@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Archivo+Narrow:wght@500;600;700&family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500;600&display=swap');
body { margin: 0; }

@keyframes aparece { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rev { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rev {
      animation-name: aparece;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 52%;
    }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .heroIn { animation: heroIn 900ms cubic-bezier(.22,.8,.3,1) both; }
  .heroIn2 { animation: heroIn 900ms cubic-bezier(.22,.8,.3,1) 160ms both; }
  .heroIn3 { animation: heroIn 900ms cubic-bezier(.22,.8,.3,1) 320ms both; }
}
.tira { overflow: hidden; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%); }
.pista { display: flex; gap: 16px; width: max-content; align-items: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .pista { animation: corre 46s linear infinite; }
  .tira:hover .pista { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes asoma { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .saludo { animation: asoma 600ms cubic-bezier(.22,.8,.3,1) 3s both; }
}
#cerrarchat { position: absolute; opacity: 0; pointer-events: none; }
#cerrarchat:checked ~ .saludo { display: none; }
.saludo .op { display: block; background: #F7F1EA; border: 1px solid #EADFD6; border-radius: 10px; padding: 10px 12px; font-size: 14px; color: #332629; text-decoration: none; transition: background-color 200ms ease; }
.saludo .op:hover { background: #EFE7DB; }
.protcalc { counter-reset: prot 0; }
.sumbox .num::after { content: counter(prot) " g"; }
#d1:checked ~ .sumbox .sd { counter-increment: prot 8; }
#d2:checked ~ .sumbox .sd { counter-increment: prot 20; }
#d3:checked ~ .sumbox .sd { counter-increment: prot 32; }
#c1:checked ~ .sumbox .sc { counter-increment: prot 14; }
#c2:checked ~ .sumbox .sc { counter-increment: prot 28; }
#c3:checked ~ .sumbox .sc { counter-increment: prot 42; }
#n1:checked ~ .sumbox .sn { counter-increment: prot 10; }
#n2:checked ~ .sumbox .sn { counter-increment: prot 24; }
#n3:checked ~ .sumbox .sn { counter-increment: prot 36; }
.ri { position: absolute; opacity: 0; pointer-events: none; }
.opt { display: block; cursor: pointer; background: #FFFFFF; border: 1px solid #EADFD6; border-radius: 14px; padding: 16px 18px; font-size: 16px; color: #4A3A3C; transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease; }
.opt:hover { transform: translateY(-2px); border-color: #C2858F; }
.optm { display: block; cursor: pointer; background: #FFFFFF; border: 1px solid #EADFD6; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: #4A3A3C; transition: border-color 200ms ease, background-color 200ms ease; }
.optm:hover { border-color: #C2858F; }
label.opt::before, label.optm::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; border-radius: 50%; border: 2px solid #D9C6C0; vertical-align: -2px; }
.pan { display: none; }
#q1:checked ~ div label[for="q1"], #q2:checked ~ div label[for="q2"], #q3:checked ~ div label[for="q3"], #q4:checked ~ div label[for="q4"],
#w1:checked ~ div label[for="w1"], #w2:checked ~ div label[for="w2"], #w3:checked ~ div label[for="w3"], #w4:checked ~ div label[for="w4"],
#d1:checked ~ div label[for="d1"], #d2:checked ~ div label[for="d2"], #d3:checked ~ div label[for="d3"],
#c1:checked ~ div label[for="c1"], #c2:checked ~ div label[for="c2"], #c3:checked ~ div label[for="c3"],
#n1:checked ~ div label[for="n1"], #n2:checked ~ div label[for="n2"], #n3:checked ~ div label[for="n3"],
#s2:checked ~ div label[for="s2"], #s3:checked ~ div label[for="s3"], #s4:checked ~ div label[for="s4"],
#lg:checked ~ div label[for="lg"], #lc:checked ~ div label[for="lc"] { background: #332629; border-color: #332629; color: #FFFFFF; }
#q1:checked ~ div label[for="q1"]::before, #q2:checked ~ div label[for="q2"]::before, #q3:checked ~ div label[for="q3"]::before, #q4:checked ~ div label[for="q4"]::before,
#w1:checked ~ div label[for="w1"]::before, #w2:checked ~ div label[for="w2"]::before, #w3:checked ~ div label[for="w3"]::before, #w4:checked ~ div label[for="w4"]::before,
#d1:checked ~ div label[for="d1"]::before, #d2:checked ~ div label[for="d2"]::before, #d3:checked ~ div label[for="d3"]::before,
#c1:checked ~ div label[for="c1"]::before, #c2:checked ~ div label[for="c2"]::before, #c3:checked ~ div label[for="c3"]::before,
#n1:checked ~ div label[for="n1"]::before, #n2:checked ~ div label[for="n2"]::before, #n3:checked ~ div label[for="n3"]::before,
#s2:checked ~ div label[for="s2"]::before, #s3:checked ~ div label[for="s3"]::before, #s4:checked ~ div label[for="s4"]::before,
#lg:checked ~ div label[for="lg"]::before, #lc:checked ~ div label[for="lc"]::before { background: #E7233E; border-color: #FFFFFF; }
#q1:checked ~ .pan.r1, #q2:checked ~ .pan.r2, #q3:checked ~ .pan.r3, #q4:checked ~ .pan.r4 { display: block; }
#w1:checked ~ .pan.v1, #w2:checked ~ .pan.v2, #w3:checked ~ .pan.v3, #w4:checked ~ .pan.v4 { display: block; }
.sem { display: none; }
#s2:checked ~ #lg:checked ~ .sem.a2g, #s3:checked ~ #lg:checked ~ .sem.a3g, #s4:checked ~ #lg:checked ~ .sem.a4g,
#s2:checked ~ #lc:checked ~ .sem.a2c, #s3:checked ~ #lc:checked ~ .sem.a3c, #s4:checked ~ #lc:checked ~ .sem.a4c { display: block; }
.dia { background: #FFFFFF; border: 1px solid #EADFD6; border-radius: 12px; padding: 14px; text-align: center; font-size: 13px; color: #4A3A3C; }
.dia b { display: block; font-size: 11px; letter-spacing: 0.12em; color: #B0868E; margin-bottom: 6px; }
.off { background: #F7F1EA; color: #B0868E; }
details { border-bottom: 1px solid #EADFD6; }
details summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: 18px; font-weight: 500; color: #332629; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-size: 24px; color: #B51F3C; line-height: 1; }
details[open] summary::after { content: "\2013"; }
details .resp { padding: 0 0 22px; font-size: 16px; color: #6B5A5C; max-width: 760px; }
.card { transition: transform 320ms cubic-bezier(.22,.8,.3,1), box-shadow 320ms ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(51,38,41,0.10); }
.btn { transition: transform 220ms cubic-bezier(.22,.8,.3,1), box-shadow 220ms ease, background-color 220ms ease; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(51,38,41,0.26); }
.ph { transition: transform 700ms cubic-bezier(.22,.8,.3,1); }
.ph:hover { transform: scale(1.03); }
.hero {
  background-color: #332629;
  background-image: linear-gradient(to right, rgba(51,38,41,0.94) 0%, rgba(51,38,41,0.84) 40%, rgba(51,38,41,0.50) 72%, rgba(51,38,41,0.34) 100%), url('../img/hero.jpg');
  background-size: cover;
  background-position: 62% 30%;
  background-repeat: no-repeat;
}
a { color: #B51F3C; }
a:hover { color: #8C1830; }

html { scroll-behavior: smooth; }
img { max-width: 100%; }
@media (max-width: 760px) { .saludo { width: calc(100vw - 52px); } }