/* ============================================================
   FortePet · Sistema de diseño · versión cálida
   Crema dominante. El verde aparece en el header, la calculadora
   y el pie. La franja destacada usa terracota suave.
   Contrastes verificados AA. El dorado #B98A4E y el terracota
   #C4674A son SOLO decorativos sobre crema (2.7:1 y 3.5:1);
   para texto se usan --oro-osc y --terra-osc.
   ============================================================ */

:root{
  --verde:      #1C4A2B;
  --verde-tinta:#0E2A18;
  --verde-suave:#E4EDE4;

  --terra:      #C4674A;   /* decorativo: bordes, iconos grandes */
  --terra-osc:  #9B4A31;   /* texto y botones · AA 5.5:1 sobre crema */
  --terra-suave:#F7E4DA;   /* fondo de bloque cálido */

  --oro:        #B98A4E;   /* decorativo */
  --oro-osc:    #7F5A2C;   /* texto sobre crema · AA 5.5:1 */
  --oro-luz:    #D9AE73;   /* texto sobre verde · AA 5.0:1 */

  --blanco:     #FCFAF6;   /* fondo base, blanco roto */
  --crema:      #F6F1E8;
  --crema-osc:  #EDE6D8;
  --marron:     #5C3A28;
  --tinta:      #17130E;

  --max: 1140px;
  --gut: clamp(20px, 5vw, 44px);
  --r: 12px;
  --r-lg: 18px;
  --pill: 999px;
  --sombra: 0 2px 12px rgba(28,74,43,.08);

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Figtree", "Archivo", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* red de seguridad contra desbordamiento horizontal en móvil.
     clip (no hidden) para no romper position:sticky de la barra superior */
  overflow-x:clip;
  overflow-wrap:break-word;
}
@media(min-width:900px){ body{ font-size:18px } }

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
button{ font:inherit }

/* ---------- Tipografía ---------- */

h1,h2,h3,h4{
  font-family:var(--titulo);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2rem, 4.4vw, 3.2rem); line-height:1.08 }
h2{ font-size:clamp(1.65rem, 3.4vw, 2.5rem) }
h3{ font-size:clamp(1.2rem, 2.2vw, 1.5rem) }
h4{ font-size:1.05rem; line-height:1.3 }

p{ margin:0 0 1em; max-width:66ch }
strong{ font-weight:650 }

.eyebrow{
  font-family:var(--sans);
  font-size:13px; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--terra-osc); margin:0 0 14px;
}
.on-verde .eyebrow{ color:var(--oro-luz) }

.lead{ font-size:clamp(1.05rem,1.8vw,1.22rem); line-height:1.6; color:var(--marron) }
.on-verde .lead{ color:#DDD6C6 }

.num{ font-variant-numeric:tabular-nums; font-family:var(--titulo); font-weight:800; letter-spacing:-0.03em }

/* ---------- Bandas ---------- */

.band{ padding:clamp(48px,7vw,88px) var(--gut) }
.band-blanco{ background:var(--blanco) }
.band-crema{ background:var(--crema) }
.band-verde{ background:var(--verde); color:var(--blanco) }
.band-terra{ background:var(--terra-suave) }
.on-verde h1,.on-verde h2,.on-verde h3{ color:var(--blanco) }
.inner{ max-width:var(--max); margin:0 auto }
.inner-narrow{ max-width:720px; margin:0 auto }
.centro{ text-align:center }

/* franja cálida de una sola frase */
.franja{ background:var(--terra-suave); padding:clamp(52px,8vw,96px) var(--gut) }
.franja p{
  font-family:var(--titulo); font-weight:700;
  font-size:clamp(1.6rem,4vw,2.6rem); line-height:1.18; letter-spacing:-0.02em;
  color:var(--verde); max-width:22ch; margin:0 auto; text-align:center;
}
.franja .destaca{ color:var(--terra-osc) }

/* ---------- Barra superior ---------- */

.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(252,250,246,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid rgba(92,58,40,.14);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px var(--gut);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none }
.brand img{ height:40px; width:auto }
.brand-txt{ font-family:var(--titulo); font-weight:800; font-size:20px; letter-spacing:-0.02em; color:var(--verde); line-height:1 }
.brand-txt span{ color:var(--oro-osc) }
.topbar-right{ display:flex; align-items:center; gap:16px }
.topbar a.link{ color:var(--marron); text-decoration:none; font-size:14.5px; font-weight:550 }
.topbar a.link:hover{ color:var(--terra-osc) }
@media(max-width:700px){ .topbar a.link{ display:none } }

/* ---------- Botones ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--pill);
  font-family:var(--titulo); font-weight:650; font-size:16px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, transform .1s;
}
.btn:active{ transform:scale(.985) }
.btn-terra{ background:var(--terra-osc); color:#fff; border-color:var(--terra-osc) }
.btn-terra:hover{ background:#833B26; border-color:#833B26 }
.btn-verde{ background:var(--verde); color:var(--blanco); border-color:var(--verde) }
.btn-verde:hover{ background:var(--verde-tinta); border-color:var(--verde-tinta) }
.btn-oro{ background:var(--oro); color:var(--verde-tinta); border-color:var(--oro) }
.btn-oro:hover{ background:var(--oro-luz); border-color:var(--oro-luz) }
.btn-linea{ background:transparent; color:var(--verde); border-color:rgba(28,74,43,.32) }
.btn-linea:hover{ border-color:var(--verde); background:rgba(28,74,43,.05) }
.btn-linea-claro{ background:transparent; color:var(--blanco); border-color:rgba(252,250,246,.45) }
.btn-linea-claro:hover{ border-color:var(--oro-luz); color:var(--oro-luz) }
.btn-wa{ background:#1F6B3F; color:#fff; border-color:#1F6B3F }
.btn-wa:hover{ background:#17552F; border-color:#17552F }
.btn-lg{ padding:17px 32px; font-size:17px; width:100% }
@media(min-width:560px){ .btn-lg{ width:auto } }
.btn:focus-visible{ outline:3px solid var(--terra); outline-offset:2px }

/* ---------- Hero cálido ---------- */

.hero{ background:var(--crema); padding:clamp(34px,5vw,64px) var(--gut) }
.hero-grid{ max-width:var(--max); margin:0 auto; display:grid; gap:clamp(26px,4vw,52px); align-items:center }
@media(min-width:900px){ .hero-grid{ grid-template-columns:47fr 53fr } }
.hero h1{ color:var(--verde) }
.hero h1 .destaca{ color:var(--terra-osc) }
.hero-img{ position:relative; display:flex; align-items:center; justify-content:center; padding:16px 0 }
.hero-img::before{
  content:""; position:absolute; z-index:0;
  width:min(84%,380px); aspect-ratio:1; border-radius:50%;
  background:var(--terra-suave);
}
.hero-img img{ position:relative; z-index:1 }
.hero-marcas{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; padding:0; list-style:none }
.hero-marcas li{
  font-size:13px; font-weight:600; color:var(--marron);
  background:var(--blanco); border:1px solid rgba(92,58,40,.16);
  border-radius:var(--pill); padding:7px 14px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:11px; align-items:center }
.hero-nota{ font-size:14px; color:var(--marron); margin:14px 0 0 }

/* ---------- Viñetas de beneficio ---------- */

.beneficios{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px }
.beneficios li{ display:flex; align-items:flex-start; gap:13px; font-size:1rem; line-height:1.5 }
.beneficios .tick{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--terra-suave); display:grid; place-items:center; margin-top:1px;
}
.beneficios .tick svg{ width:15px; height:15px; color:var(--terra-osc) }
.on-verde .beneficios .tick{ background:rgba(217,174,115,.2) }
.on-verde .beneficios .tick svg{ color:var(--oro-luz) }

/* ---------- Franja de confianza ---------- */

.confianza{ background:var(--crema); padding:clamp(28px,4vw,44px) var(--gut); border-top:1px solid rgba(92,58,40,.12) }
.confianza ul{ max-width:var(--max); margin:0 auto; padding:0; list-style:none; display:grid; gap:20px }
@media(min-width:640px){ .confianza ul{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:940px){ .confianza ul{ grid-template-columns:repeat(4,1fr) } }
.confianza li{ display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:550; color:var(--marron) }
.confianza svg{ flex:0 0 auto; width:22px; height:22px; color:var(--verde) }

/* ---------- Enrutador de WhatsApp ---------- */

.wa-router{ display:grid; gap:11px; margin-top:28px }
@media(min-width:700px){ .wa-router{ grid-template-columns:1fr 1fr } }
.wa-op{
  display:flex; align-items:center; gap:14px;
  background:var(--blanco); border:1px solid rgba(92,58,40,.18);
  border-radius:var(--r-lg); padding:16px 20px;
  text-decoration:none; transition:border-color .16s, background .16s;
}
.wa-op:hover{ border-color:var(--terra); background:var(--terra-suave) }
.wa-op .ico{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--verde-suave); display:grid; place-items:center }
.wa-op .ico svg{ width:19px; height:19px; color:var(--verde) }
.wa-op b{ display:block; font-family:var(--titulo); font-weight:650; font-size:15.5px; line-height:1.25 }
.wa-op span{ display:block; font-size:13.5px; color:var(--marron); margin-top:2px }
.wa-op.ancho{ grid-column:1/-1 }

/* ---------- Checklist ---------- */

.checklist{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:10px }
.check{
  display:flex; align-items:center; gap:14px;
  background:var(--blanco); border:1px solid rgba(92,58,40,.16);
  border-radius:var(--r-lg); padding:15px 18px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.check:hover{ border-color:var(--terra) }
.check input{ position:absolute; opacity:0; width:0; height:0 }
.check .box{
  flex:0 0 auto; width:25px; height:25px; border-radius:8px;
  border:1.5px solid rgba(92,58,40,.35); display:grid; place-items:center;
  transition:background .15s, border-color .15s;
}
.check .box svg{ width:15px; height:15px; opacity:0; transform:scale(.7); transition:.15s }
.check input:checked + .box{ background:var(--terra-osc); border-color:var(--terra-osc) }
.check input:checked + .box svg{ opacity:1; transform:scale(1); color:#fff }
.check input:checked ~ .txt{ color:var(--terra-osc); font-weight:600 }
.check:has(input:checked){ background:var(--terra-suave); border-color:var(--terra) }
.check input:focus-visible + .box{ outline:3px solid var(--terra); outline-offset:2px }
.check .txt{ font-size:1rem; line-height:1.4 }

.check-result{
  margin-top:22px; padding:20px 22px; border-radius:var(--r-lg);
  background:var(--verde-suave); font-size:1rem; color:var(--marron);
}
.check-result strong{ display:block; font-family:var(--titulo); font-size:1.2rem; font-weight:700; color:var(--verde); margin-bottom:5px }

/* ---------- Tabla de ingredientes ---------- */

.nutri{ margin-top:30px; border-top:2px solid var(--verde) }
.nutri-row{ display:grid; gap:4px 24px; padding:20px 0; border-bottom:1px solid rgba(92,58,40,.16) }
@media(min-width:720px){ .nutri-row{ grid-template-columns:170px 1fr; align-items:baseline } }
.nutri-qty{ font-variant-numeric:tabular-nums; font-family:var(--titulo); font-weight:800; font-size:clamp(1.5rem,3vw,1.95rem); letter-spacing:-0.03em; color:var(--oro-osc); line-height:1 }
.nutri-qty small{ font-size:.5em; font-weight:650; margin-left:3px }
.nutri-name{ font-family:var(--titulo); font-weight:650; font-size:1.05rem; margin:0 0 4px }
.nutri-desc{ margin:0; color:var(--marron); font-size:.96rem; max-width:58ch }

/* ---------- Calculadora ---------- */

.calc{ margin-top:30px }
.calc label{ display:block; font-size:13px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--oro-luz); margin-bottom:9px }
.calc input[type=number]{
  font:inherit; font-variant-numeric:tabular-nums; font-weight:650; font-size:17px;
  width:140px; padding:13px 16px; border-radius:var(--pill);
  background:rgba(252,250,246,.1); border:1.5px solid rgba(217,174,115,.55); color:var(--blanco);
}
.calc input[type=number]:focus{ outline:3px solid var(--oro-luz); outline-offset:1px }
.calc-hint{ font-size:14px; color:#C9C0AE; margin:12px 0 0; max-width:60ch }
.calc-out{ margin-top:26px; display:grid; gap:12px }
@media(min-width:680px){ .calc-out{ grid-template-columns:repeat(3,1fr) } }
.calc-cell{ background:var(--verde-tinta); border-radius:var(--r-lg); padding:22px 22px }
.calc-k{ font-size:12.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--oro-luz); margin:0 0 9px }
.calc-v{ font-variant-numeric:tabular-nums; font-family:var(--titulo); font-weight:800; font-size:clamp(1.6rem,3.6vw,2.2rem); letter-spacing:-0.03em; line-height:1; color:var(--blanco); margin:0 }
.calc-v small{ display:block; font-family:var(--sans); font-size:.42em; font-weight:450; letter-spacing:0; color:#C9C0AE; margin-top:8px; line-height:1.45 }
.calc-cell.destacado{ background:var(--oro) }
.calc-cell.destacado .calc-k{ color:var(--verde-tinta); opacity:.75 }
.calc-cell.destacado .calc-v{ color:var(--verde-tinta) }
.calc-cell.destacado .calc-v small{ color:var(--verde-tinta); opacity:.82 }

/* ---------- Tabla de dosis ---------- */

.tabla{ width:100%; border-collapse:collapse; margin-top:24px; font-size:.96rem }
.tabla caption{ text-align:left; color:var(--marron); font-size:.9rem; padding-bottom:12px }
.tabla th,.tabla td{ text-align:left; padding:14px 14px; border:0 }
.tabla thead th{ font-size:12.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--oro-osc); border-bottom:2px solid var(--verde) }
.tabla tbody tr{ border-bottom:1px solid rgba(92,58,40,.14) }
.tabla tbody tr:nth-child(even){ background:var(--crema) }
.tabla td:first-child{ font-weight:600 }
.tabla td.n{ font-variant-numeric:tabular-nums; font-weight:650; color:var(--oro-osc) }
.tabla-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ---------- Reseñas ---------- */

.resena-destacada{ background:var(--blanco); border:1px solid rgba(92,58,40,.16); border-radius:var(--r-lg); padding:clamp(24px,4vw,38px); box-shadow:var(--sombra) }
.resena-cita{ font-family:var(--titulo); font-weight:650; font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1.3; letter-spacing:-0.015em; color:var(--verde); margin:0 0 18px; max-width:26ch }
.autor{ display:flex; align-items:center; gap:13px; margin-top:20px }
.autor img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 auto }
.autor .n{ font-family:var(--titulo); font-weight:650; font-size:15px; line-height:1.2 }
.autor .d{ font-size:13.5px; color:var(--marron) }
.estrellas{ display:flex; gap:3px; margin-bottom:16px; color:var(--oro) }
.estrellas svg{ width:17px; height:17px }

.resena-lista{ display:grid; gap:14px; margin-top:20px }
@media(min-width:760px){ .resena-lista{ grid-template-columns:1fr 1fr } }
.resena-item{ background:var(--blanco); border:1px solid rgba(92,58,40,.14); border-radius:var(--r-lg); padding:22px 24px }
.resena-item p{ margin:0; font-size:.98rem; color:var(--marron) }
.resena-item .autor img{ width:44px; height:44px }

/* ---------- Bloque de compra ---------- */

.compra{ display:grid; gap:clamp(26px,4vw,52px); align-items:center }
@media(min-width:900px){ .compra{ grid-template-columns:46fr 54fr } }
.compra-galeria{ text-align:center }
.compra-galeria .marco{
  background:var(--blanco); border-radius:var(--r-lg);
  padding:26px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sombra);
}
.thumbs{ display:flex; gap:9px; justify-content:center; margin-top:16px; flex-wrap:wrap }
.thumb{ width:66px; height:66px; padding:5px; cursor:pointer; border:1.5px solid rgba(92,58,40,.2); border-radius:var(--r); background:var(--blanco); overflow:hidden }
.thumb img{ width:100%; height:100%; object-fit:contain }
.thumb[aria-current="true"]{ border-color:var(--terra); background:var(--terra-suave) }
.thumb:focus-visible{ outline:3px solid var(--terra); outline-offset:2px }

.precio{ font-variant-numeric:tabular-nums; font-family:var(--titulo); font-weight:800; font-size:clamp(2.2rem,5vw,3rem); letter-spacing:-0.035em; line-height:1; color:var(--verde); margin:16px 0 6px }
.precio-sub{ font-size:.94rem; color:var(--marron); margin:0 }
.precio-dia{ display:inline-block; margin:12px 0 22px; font-size:14.5px; font-weight:650; background:var(--terra-suave); color:var(--terra-osc); border-radius:var(--pill); padding:9px 16px }
.compra-acciones{ display:flex; flex-direction:column; gap:11px; max-width:400px }
.pago-nota{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--marron); margin:14px 0 0 }
.pago-nota svg{ flex:0 0 auto; width:16px; height:16px }

.aviso{ margin-top:24px; padding:20px 22px; border-radius:var(--r-lg); background:var(--crema-osc); font-size:.96rem; color:var(--marron) }
.on-verde .aviso{ background:rgba(14,42,24,.5); color:#DDD6C6 }
.aviso p{ margin:0; max-width:none }
.aviso p + p{ margin-top:10px }

/* ---------- Tarjetas de producto en la home ---------- */

.prods{ display:grid; gap:18px; margin-top:34px }
@media(min-width:800px){ .prods{ grid-template-columns:1fr 1fr } }
.prod{
  background:var(--blanco); border:1px solid rgba(92,58,40,.14);
  border-radius:var(--r-lg); padding:26px 26px 28px;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  box-shadow:var(--sombra); transition:border-color .16s, transform .16s;
}
.prod:hover{ border-color:var(--terra); transform:translateY(-2px) }
.prod-img{ background:var(--crema); border-radius:var(--r); padding:18px; display:flex; justify-content:center; margin-bottom:20px }
.prod-tag{ display:inline-block; align-self:flex-start; font-size:12.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--terra-osc); background:var(--terra-suave); border-radius:var(--pill); padding:5px 12px; margin-bottom:12px }
.prod h3{ margin:0 0 8px; color:var(--verde) }
.prod p{ color:var(--marron); font-size:.97rem; margin:0 0 18px }
.prod-pie{ margin-top:auto; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.prod-precio{ font-variant-numeric:tabular-nums; font-family:var(--titulo); font-weight:800; font-size:1.5rem; color:var(--verde); letter-spacing:-0.03em }
.prod-dia{ font-size:13.5px; color:var(--marron) }
.prod-flecha{ display:inline-flex; align-items:center; gap:7px; font-family:var(--titulo); font-weight:650; font-size:15px; color:var(--terra-osc); margin-top:16px }
.prod:hover .prod-flecha{ gap:11px }

/* ---------- Estudios ---------- */

.estudios{ list-style:none; padding:0; margin:24px 0 0; counter-reset:e; display:grid; gap:10px }
.estudios li{ background:var(--blanco); border:1px solid rgba(92,58,40,.14); border-radius:var(--r) }
.estudios a{ display:grid; gap:3px 16px; padding:16px 20px; text-decoration:none; grid-template-columns:auto 1fr; align-items:baseline }
.estudios a::before{ counter-increment:e; content:counter(e,decimal-leading-zero); font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; color:var(--terra-osc) }
.estudios .t{ font-weight:600; line-height:1.35; font-size:.97rem }
.estudios .m{ grid-column:2; font-size:13.5px; color:var(--marron) }
.estudios a:hover .t{ color:var(--terra-osc) }

/* ---------- Pie ---------- */

.pie{ background:var(--verde-tinta); color:#C9C0AE; padding:clamp(44px,6vw,72px) var(--gut) 36px; font-size:14.5px }
.pie-inner{ max-width:var(--max); margin:0 auto; display:grid; gap:28px }
@media(min-width:760px){ .pie-inner{ grid-template-columns:230px 1fr; align-items:start } }
.pie-marca{ display:block }
.pie-nombre{
  display:block; font-family:var(--titulo); font-weight:800;
  font-size:30px; letter-spacing:-0.025em; line-height:1;
  color:var(--blanco); margin-bottom:10px;
}
.pie-nombre span{ color:var(--oro-luz) }
.pie-tag{
  display:block; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--oro-luz);
  padding-top:10px; border-top:1px solid rgba(217,174,115,.3);
  max-width:230px; line-height:1.5;
}
.pie a{ color:var(--oro-luz); text-decoration:none }
.pie a:hover{ text-decoration:underline; text-underline-offset:3px }
.pie p{ margin:0 0 10px; max-width:60ch }
.pie-legal{ margin-top:26px; padding-top:20px; border-top:1px solid rgba(217,174,115,.22); font-size:13.5px; color:#A79E8D }

/* ---------- Barra CTA móvil ---------- */

.cta-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; gap:10px; align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--blanco); border-top:1px solid rgba(92,58,40,.16);
  box-shadow:0 -2px 14px rgba(28,74,43,.07);
}
.cta-movil .p{ flex:0 0 auto; font-variant-numeric:tabular-nums; font-family:var(--titulo); font-weight:800; color:var(--verde); font-size:17px }
.cta-movil .btn{ flex:1; padding:13px 16px; font-size:15px }
@media(min-width:900px){ .cta-movil{ display:none } }
@media(max-width:899px){ body.tiene-cta{ padding-bottom:76px } }

/* ---------- FAQ ---------- */

.faq{ display:grid; gap:10px; margin-top:28px }
.faq details{ background:var(--blanco); border:1px solid rgba(92,58,40,.14); border-radius:var(--r-lg) }
.faq summary{ list-style:none; cursor:pointer; padding:18px 48px 18px 22px; position:relative; font-family:var(--titulo); font-weight:650; font-size:1.02rem; line-height:1.35 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; position:absolute; right:22px; top:24px; width:10px; height:10px; border-right:1.8px solid var(--terra-osc); border-bottom:1.8px solid var(--terra-osc); transform:rotate(45deg); transition:transform .18s }
.faq details[open] summary::after{ transform:rotate(225deg); top:28px }
.faq summary:focus-visible{ outline:3px solid var(--terra); outline-offset:2px }
.faq details p{ margin:0 22px 20px; color:var(--marron); font-size:.97rem }

/* ============================================================
   CHECKOUT
   ============================================================ */

.co{ max-width:1080px; margin:0 auto; padding:clamp(26px,4vw,48px) var(--gut) 80px; display:grid; gap:clamp(26px,4vw,48px) }
@media(min-width:980px){ .co{ grid-template-columns:1fr 350px; align-items:start } }
.co-paso{ margin-bottom:28px }
.co-barra{ height:6px; border-radius:var(--pill); background:var(--crema-osc); margin-bottom:22px; overflow:hidden }
.co-barra i{ display:block; height:100%; width:66%; background:var(--terra-osc); border-radius:var(--pill) }
.co-paso h1{ color:var(--verde); margin-bottom:.3em }
.co-paso p{ color:var(--marron); margin:0 }

.co-bloque{ background:var(--blanco); border:1px solid rgba(92,58,40,.14); border-radius:var(--r-lg); padding:22px 24px 26px; margin-bottom:14px }
.co-bloque > h2{ font-family:var(--titulo); font-size:1.02rem; font-weight:650; color:var(--verde); margin:0 0 18px }

.campos{ display:grid; gap:16px }
.campos-2{ display:grid; gap:16px }
@media(min-width:560px){ .campos-2{ grid-template-columns:1fr 1fr } }
.campo label{ display:block; font-size:14px; font-weight:600; margin-bottom:7px }
.campo .req{ color:var(--terra-osc) }
.campo .opt{ font-weight:400; color:var(--marron) }
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:16px; width:100%; padding:13px 15px; color:var(--tinta);
  background:var(--crema); border:1.5px solid rgba(92,58,40,.22); border-radius:var(--r);
}
.campo textarea{ min-height:94px; resize:vertical }
.campo select{ appearance:none; background-image:linear-gradient(45deg,transparent 49%,var(--terra-osc) 50%),linear-gradient(-45deg,transparent 49%,var(--terra-osc) 50%); background-size:7px 7px,7px 7px; background-position:calc(100% - 20px) 21px,calc(100% - 13px) 21px; background-repeat:no-repeat; padding-right:42px }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:3px solid var(--terra); outline-offset:1px; border-color:var(--terra-osc) }
.campo input.error,.campo select.error,.campo textarea.error{ border-color:#A32020; background:#FBEDEA }
.error-msg{ display:none; font-size:13.5px; color:#A32020; margin-top:6px; font-weight:500 }
.error-msg.show{ display:block }

.pago-op{ display:flex; align-items:center; gap:13px; padding:16px 18px; cursor:pointer; border:1.5px solid rgba(92,58,40,.22); border-radius:var(--r-lg) }
.pago-op.selected{ border-color:var(--terra); background:var(--terra-suave) }
.pago-radio{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--terra-osc); display:grid; place-items:center }
.pago-radio i{ width:10px; height:10px; border-radius:50%; background:transparent }
.pago-op.selected .pago-radio i{ background:var(--terra-osc) }
.pago-nombre{ font-family:var(--titulo); font-weight:650; font-size:15.5px }
.pago-desc{ font-size:13.5px; color:var(--marron) }
.pago-badge{ margin-left:auto; font-size:12px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--verde); background:var(--verde-suave); border-radius:var(--pill); padding:6px 11px; white-space:nowrap }

.consent{ display:flex; gap:13px; align-items:flex-start; font-size:14.5px; line-height:1.5; cursor:pointer; color:var(--marron) }
.consent input{ flex:0 0 auto; width:20px; height:20px; margin-top:2px; accent-color:var(--terra-osc) }
.consent a{ color:var(--terra-osc) }

.co-enviar{ width:100%; margin-top:6px }
.co-nota{ display:flex; gap:9px; align-items:center; font-size:13.5px; color:var(--marron); margin:14px 0 0 }
.co-nota svg{ flex:0 0 auto; width:16px; height:16px }

.co-resumen{ background:var(--verde); color:var(--blanco); border-radius:var(--r-lg); padding:26px 24px }
@media(min-width:980px){ .co-resumen{ position:sticky; top:76px } }
.co-resumen .eyebrow{ color:var(--oro-luz) }
.co-prod{ display:flex; gap:15px; align-items:center; padding-bottom:20px; border-bottom:1px solid rgba(217,174,115,.28) }
.co-prod .marco{ background:var(--blanco); border-radius:var(--r); padding:8px; flex:0 0 auto }
.co-prod img{ width:52px; height:auto }
.co-prod-nombre{ font-family:var(--titulo); font-weight:650; font-size:15px; line-height:1.25 }
.co-prod-sub{ font-size:13.5px; color:#C9C0AE; margin-top:3px }
.co-fila{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; font-size:14.5px; border-bottom:1px solid rgba(217,174,115,.16) }
.co-fila .v{ font-variant-numeric:tabular-nums; font-weight:600; text-align:right }
.co-total{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:18px 0 4px }
.co-total .l{ font-size:13px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--oro-luz) }
.co-total .v{ font-variant-numeric:tabular-nums; font-family:var(--titulo); font-weight:800; font-size:1.9rem; letter-spacing:-0.03em }
.co-confianza{ list-style:none; padding:18px 0 0; margin:16px 0 0; border-top:1px solid rgba(217,174,115,.28); display:grid; gap:10px; font-size:13.5px; color:#DDD6C6 }
.co-confianza li{ display:flex; gap:10px; align-items:flex-start }
.co-confianza svg{ flex:0 0 auto; width:16px; height:16px; margin-top:3px; color:var(--oro-luz) }

.co-exito{ display:none }
.co-exito.show{ display:block }
.co-exito-ico{ width:54px; height:54px; border-radius:50%; background:var(--verde-suave); display:grid; place-items:center; margin-bottom:20px }
.co-exito-ico svg{ width:27px; height:27px; color:var(--verde) }
.co-ref{ font-size:13.5px; font-weight:650; color:var(--terra-osc); margin:0 0 8px }
.co-preview{ white-space:pre-wrap; font-size:13.5px; line-height:1.55; background:var(--crema); border-radius:var(--r-lg); padding:18px 20px; margin:0 0 22px; color:var(--marron); max-height:280px; overflow:auto }

/* ---------- Documento legal ---------- */

.doc{ max-width:740px; margin:0 auto; padding:clamp(36px,5vw,68px) var(--gut) 80px }
.doc h1{ color:var(--verde) }
.doc h2{ font-size:clamp(1.2rem,2.2vw,1.5rem); margin:40px 0 12px; padding-top:20px; border-top:1px solid rgba(92,58,40,.16) }
.doc .meta{ color:var(--marron); font-size:14.5px; margin-bottom:28px }
.doc ul{ padding-left:22px; margin:0 0 16px }
.doc li{ margin-bottom:9px; max-width:66ch }
.doc a{ color:var(--terra-osc) }
.doc .datos{ background:var(--crema); border-radius:var(--r-lg); padding:22px 24px; margin:0 0 8px }
.doc .datos p{ margin:0 0 8px; font-size:15px }

/* ---------- Utilidades ---------- */

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--terra-osc); color:#fff; padding:12px 18px; font-weight:650; border-radius:var(--r) }
.skip:focus{ left:8px; top:8px }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* ---------- enlace a la ficha técnica ---------- */
.ficha-link{ margin:30px 0 0 }
.ficha-link a{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--titulo); font-weight:650; font-size:15.5px; line-height:1.2;
  color:var(--verde); text-decoration:none;
  background:var(--crema-osc); border:1px solid rgba(92,58,40,.18);
  border-radius:var(--pill); padding:12px 20px;
  transition:border-color .16s, background .16s;
}
.ficha-link a:hover{ border-color:var(--terra); background:var(--terra-suave) }
.ficha-link a:focus-visible{ outline:3px solid var(--terra); outline-offset:3px }
.ficha-link svg{ flex:0 0 auto; width:17px; height:17px }
.ficha-link .flecha{ width:14px; height:14px }