/* ════════════════════════════════════════════════════════
   El Rincón de Valentina — landing
   Mobile-first. Único breakpoint en 1024px.
   ════════════════════════════════════════════════════════ */

/* Nunito variable, autohospedada. Un solo archivo cubre 400–800:
   el eje wght va de 200 a 1000. Subconjunto latino, que ya incluye
   todos los acentos, la ñ y los signos de apertura del español. */
@font-face{
  font-family:Nunito;
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(assets/fuentes/nunito-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Terracota tiene dos versiones a propósito: la clara es la de marca
     y solo se usa en relleno (puntos, círculos, bordes). Sobre blanco da
     3,3:1 y no llega al 4,5:1 que pide WCAG AA, así que todo lo que sea
     texto o fondo de botón usa --terracota-txt. Mismo tono, más oscuro. */
  --terracota:#C77B5A;
  --terracota-txt:#9B5736;
  --sage:#9CAE8A;
  --verde:#4E6552;
  --crema:#FBF6EC;
  --crema-alt:#F3EADA;
  --ocre:#D9A86C;
  --rosa:#E8B7A8;
  --tierra:#4A4030;
  --gris:#716759;
  --blanco:#fff;
  --whatsapp:#25D366;
  --borde:#E9DECC;

  --radio:18px;
  --radio-gde:24px;
  --sombra:0 2px 14px rgba(74,64,48,.06);
  --ancho:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  color:var(--tierra);
  background:var(--crema);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.2;font-weight:800}
p,figure,details,summary{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--crema-alt);margin:14px 0}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--tierra);color:var(--crema);padding:12px 18px;border-radius:0 0 10px 0;
}
.saltar:focus{left:0}

:focus-visible{outline:3px solid var(--terracota-txt);outline-offset:3px;border-radius:6px}

.contenedor{
  width:100%;max-width:var(--ancho);
  margin-inline:auto;padding-inline:24px;
}
.contenedor--angosto{max-width:820px}

/* ── tipografía de sección ───────────────────────────── */
section > .contenedor > h2{
  font-size:26px;text-align:center;text-wrap:balance;
}
.bajada{
  margin-top:12px;text-align:center;color:var(--gris);
  font-size:15px;text-wrap:pretty;
}
.cierre-seccion{
  margin-top:26px;text-align:center;font-weight:600;
  font-size:15px;line-height:1.55;text-wrap:pretty;
}
.cierre-seccion--chico{font-weight:400;font-size:14px;color:var(--gris)}
.parrafo-centrado{
  margin-top:18px;text-align:center;color:var(--gris);
  font-size:16px;line-height:1.6;text-wrap:pretty;
}
.titulo-verde{color:var(--verde)}

/* ── botones ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 26px;border-radius:999px;border:0;
  font:inherit;font-weight:700;font-size:17px;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease,filter .12s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--terracota-txt);color:var(--blanco)}
.btn--verde{background:var(--verde);color:var(--blanco)}
.btn--claro{background:var(--blanco);color:var(--verde)}
.btn--wa{background:var(--whatsapp);color:var(--tierra)}
.btn--bloque{display:flex;width:100%;margin-top:14px}
.btn--chico{padding:10px 18px;font-size:14px}
.btn--borde{background:transparent;color:var(--crema);border:1px solid #9A8C74;font-weight:600;font-size:14px;padding:12px 22px}
.btn--borde-oscuro{background:transparent;color:var(--tierra);border:1px solid var(--borde)}
.ico-wa{width:1.15em;height:1.15em;flex:none}

.enlace-wa{
  font-weight:600;color:var(--verde);text-decoration:none;font-size:15px;
}
.enlace-wa:hover{text-decoration:underline}

/* ── grillas ─────────────────────────────────────────── */
.grilla{display:grid;gap:12px}

/* ── tarjetas ────────────────────────────────────────── */
.tarjeta{
  background:var(--blanco);border-radius:var(--radio);padding:18px;
  box-shadow:var(--sombra);
}
.tarjeta__ilu{height:78px;width:auto;margin-bottom:6px}
.tarjeta h3{font-size:16px;font-weight:700;color:var(--terracota-txt);margin-bottom:6px}
.tarjeta p{font-size:14px;color:var(--gris);line-height:1.5}

/* ══ HEADER ══ */
.header{display:none}

/* ══ HERO ══ */
.hero{background:var(--crema);padding:28px 0 40px}
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
/* `text-align:center` no centra un bloque de ancho fijo: hace falta
   el margen automático. */
.hero__logo{display:block;width:116px;margin:0 auto 22px}
.hero__logo img{width:100%;height:auto}
.eyebrow{
  font-size:13px;font-weight:700;color:var(--terracota-txt);
  text-transform:uppercase;letter-spacing:.06em;
  display:none;
}
.hero h1{font-size:28px;text-wrap:balance}
.hero__sub{margin-top:14px;color:var(--gris);font-size:16px;text-wrap:pretty}
.hero__acciones{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.hero__acciones .btn{width:100%}
.hero__foto{margin:26px 0 0}
.hero__foto img{border-radius:var(--radio-gde);aspect-ratio:342/300;object-fit:cover;width:100%}

/* ══ PROBLEMA ══ */
.problema{background:var(--crema-alt);padding:48px 0}
.problema .grilla{margin-top:22px}

/* ══ SOLUCIÓN ══ */
.solucion{background:var(--crema);padding:52px 0}
.destacado{
  margin-top:24px;background:var(--crema-alt);border-radius:var(--radio);
  padding:20px;text-align:center;font-size:15px;line-height:1.55;text-wrap:pretty;
}
/* Tiras horizontales: full-bleed acotado al viewport.
   Sin los márgenes negativos, la imagen interna (más ancha que la
   pantalla) ensancha el documento entero y descuadra toda la página. */
.tira{
  margin-top:26px;
  margin-inline:calc(50% - 50vw);
  padding-inline:24px;
  overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tira::-webkit-scrollbar{display:none}
.tira img{max-width:none;width:1000px;height:auto}
.tira__pie{margin-top:8px;text-align:center;font-size:12px;color:var(--gris)}

/* ══ CÓMO FUNCIONA ══ */
.como{background:var(--crema-alt);padding:52px 0}
.como .grilla{margin-top:22px}
.paso{display:flex;flex-direction:column;gap:10px}
.paso__cabecera{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;width:100%;
}
.paso__n{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--c,var(--terracota));color:var(--tierra);
  display:grid;place-items:center;font-weight:800;font-size:19px;
}
.paso__cabecera img{height:62px;width:auto;flex:none}
.paso h3{color:var(--tierra);font-size:16px}

/* ══ GALERÍA DE TARJETAS ══ */
.tarjetas-galeria{background:var(--crema);padding:52px 0}
.galeria__label{
  margin-top:22px;margin-bottom:8px;
  font-size:11.5px;font-weight:700;color:var(--terracota-txt);
  text-transform:uppercase;letter-spacing:.06em;
}
/* Carrusel de tarjetas: scroll horizontal con snap en mobile,
   grilla de 6 en desktop. Cada tarjeta es una imagen aparte, así
   se puede paginar de a una y pesa menos que una tira compuesta. */
.carrusel{
  display:flex;gap:12px;
  margin-inline:calc(50% - 50vw);
  padding:2px 24px 6px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.carrusel::-webkit-scrollbar{display:none}

.tarjeta-pecs{
  flex:none;width:132px;scroll-snap-align:center;
  background:var(--blanco);border:1px solid var(--borde);border-radius:16px;
  padding:10px 8px 12px;text-align:center;
  box-shadow:var(--sombra);
}
.tarjeta-pecs img{width:100%;height:auto;aspect-ratio:1}
.tarjeta-pecs span{
  display:block;margin-top:4px;
  font-size:10.5px;font-weight:600;color:var(--gris);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.25;
}
.solo-mobile{margin-top:18px}

/* ══ PRODUCTOS ══ */
.productos{background:var(--crema-alt);padding:52px 0}
.productos__grilla{margin-top:26px;gap:18px}

.producto{
  background:var(--blanco);border-radius:var(--radio-gde);
  overflow:hidden;box-shadow:var(--sombra);
  display:flex;flex-direction:column;
}
.producto__img img{width:100%;aspect-ratio:350/265;object-fit:cover}
.producto__body{padding:20px;display:flex;flex-direction:column;flex:1}

.kicker{
  align-self:flex-start;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:6px 12px;border-radius:13px;
}
.kicker--terracota{color:var(--terracota-txt);background:color-mix(in srgb,var(--terracota) 16%,transparent)}
.kicker--verde{color:var(--verde);background:color-mix(in srgb,var(--verde) 16%,transparent)}

.producto h3{font-size:21px;margin-top:10px}
.precio{margin-top:10px;display:flex;align-items:baseline;gap:6px}
.precio__desde{font-size:14px;color:var(--gris);font-weight:400}
.precio strong{font-size:26px;font-weight:800}
.precio--terracota strong{color:var(--terracota-txt)}
.precio--verde strong{color:var(--verde)}

.lista-check li{
  position:relative;padding-left:17px;margin-bottom:8px;
  font-size:14.5px;line-height:1.5;color:var(--gris);
}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--c,var(--terracota));
}
.lista-check--terracota{--c:var(--terracota)}
.lista-check--verde{--c:var(--verde)}

.label-opcion{
  margin-top:12px;margin-bottom:8px;
  font-size:11px;font-weight:700;color:var(--gris);
  text-transform:uppercase;letter-spacing:.06em;
}

/* El margen va acá y no en el botón: el botón usa `margin-top:auto`
   para pegarse al pie en desktop, y en mobile eso colapsa a cero. */
.opciones{display:grid;gap:8px;margin-bottom:20px}
.opcion{
  display:flex;align-items:center;gap:10px;
  padding:12px;border:1px solid var(--borde);border-radius:12px;
  cursor:pointer;transition:border-color .12s ease,background .12s ease;
}
.opcion:hover{border-color:var(--gris)}
.opcion input{
  appearance:none;flex:none;width:18px;height:18px;border-radius:50%;
  border:2px solid #948871;margin:0;cursor:pointer;
  display:grid;place-items:center;
}
.opcion input::after{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--blanco);
  transform:scale(0);transition:transform .12s ease;
}
.opcion__nombre{flex:1;font-size:13.5px;line-height:1.35}
.opcion__precio{font-size:15px;font-weight:800;text-align:right;white-space:nowrap}
.opcion__precio s{display:block;font-size:11px;font-weight:400;color:var(--gris)}

/* estado seleccionado, según el producto */
[data-producto="fisico"] .opcion:has(input:checked){border-color:var(--terracota);border-width:2px;background:var(--crema)}
[data-producto="fisico"] .opcion input:checked{border-color:var(--terracota);background:var(--terracota)}
[data-producto="fisico"] .opcion:has(input:checked) .opcion__nombre{font-weight:700}
[data-producto="digital"] .opcion:has(input:checked){border-color:var(--verde);border-width:2px;background:var(--crema)}
[data-producto="digital"] .opcion input:checked{border-color:var(--verde);background:var(--verde)}
[data-producto="digital"] .opcion:has(input:checked) .opcion__nombre{font-weight:700}
.opcion input:checked::after{transform:scale(1)}

.producto .btn--bloque{margin-top:auto}
.micro{margin-top:8px;text-align:center;font-size:12.5px;color:var(--gris);line-height:1.4}

/* ══ FAQ ══ */
.faq{background:var(--crema);padding:52px 0}
.faq__item{
  background:var(--blanco);border-radius:14px;margin-top:10px;
  box-shadow:var(--sombra);overflow:hidden;
}
.faq__item summary{
  list-style:none;cursor:pointer;padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:15px;font-weight:700;line-height:1.35;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";flex:none;font-size:21px;font-weight:700;color:var(--terracota-txt);
  line-height:1;transition:transform .15s ease;
}
.faq__item[open] summary::after{content:"–"}
.faq__cuerpo{padding:0 16px 16px;border-top:1px solid var(--crema-alt);margin-top:-2px;padding-top:12px}
.faq__cuerpo p{font-size:14px;line-height:1.55;color:var(--gris)}
.faq__cuerpo p + p{margin-top:10px}
.faq h2{margin-bottom:8px}

/* ══ CIERRE ══ */
.cierre{background:var(--verde);color:var(--blanco);padding:54px 0;text-align:center}
.cierre h2{color:var(--blanco)}
.cierre__bajada{margin-top:14px;color:#DCE6D8;font-size:15.5px;line-height:1.55;text-wrap:pretty}
.cierre__botones{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.cierre__wa{
  margin-top:28px;background:rgba(0,0,0,.10);
  border-radius:var(--radio);padding:20px;
}
.cierre__wa-titulo{font-size:15.5px;font-weight:700}
.cierre__wa-sub{margin-top:4px;color:#DCE6D8;font-size:14px}
.cierre__wa .btn{margin-top:12px;width:100%}
.cierre__tel{margin-top:10px;color:#DCE6D8;font-size:13px}

/* ══ FOOTER ══ */
.footer{background:var(--tierra);color:var(--crema);padding:40px 0}
.footer__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.footer__nombre{font-size:17px;font-weight:800}
.footer__tagline{margin-top:4px;color:#B6AC98;font-size:13.5px;font-style:italic}
.footer__fiscal{margin-top:18px;color:#B6AC98;font-size:11.5px;line-height:1.5}
.footer__links{display:flex;flex-direction:column;gap:12px;
  border-top:1px solid #5E5342;padding-top:24px;width:100%}
.footer__links a{color:#D6CCB8;font-size:13.5px;text-decoration:none}
.footer__links a:hover{text-decoration:underline}
.footer__legal{display:flex;flex-direction:column;align-items:center;gap:10px}
.footer__nota{color:#B6AC98;font-size:12px}
.footer__ig{color:#D6CCB8;font-size:14px;text-decoration:none}

/* ══ FAB WHATSAPP ══ */
.fab{
  position:fixed;right:16px;bottom:16px;z-index:40;
  width:58px;height:58px;border-radius:50%;
  background:var(--whatsapp);color:var(--blanco);
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .15s ease;
}
.fab:hover{transform:scale(1.06)}
.fab svg{width:30px;height:30px}

/* ══ COOKIES ══ */
/* `hidden` tiene que ganarle a cualquier `display` que pongamos después,
   si no el atributo no oculta nada. Este fue el motivo de que el banner
   de cookies no se cerrara al hacer clic. */
[hidden]{display:none!important}

.cookies{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;padding:20px;
  background:rgba(74,64,48,.5);
  animation:cookies-fade .2s ease;
}
@keyframes cookies-fade{from{opacity:0}to{opacity:1}}

.cookies__caja{
  width:100%;max-width:440px;
  background:var(--blanco);border-radius:20px;
  padding:26px 24px 22px;text-align:center;
  box-shadow:0 12px 40px rgba(74,64,48,.28);
}
.cookies__titulo{font-size:19px;font-weight:800;margin-bottom:10px}
.cookies p{font-size:14.5px;line-height:1.55;color:var(--gris)}
.cookies a{color:var(--terracota-txt)}
.cookies__acciones{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.cookies__acciones .btn{width:100%}

@media (min-width:520px){
  .cookies__acciones{flex-direction:row-reverse}
  .cookies__acciones .btn{flex:1}
}

/* ════════════════════════════════════════════════════════
   DESKTOP
   ════════════════════════════════════════════════════════ */
@media (min-width:1024px){

  body{font-size:17px}

  section > .contenedor > h2{font-size:40px}
  .bajada{font-size:18px;margin-top:14px}
  .parrafo-centrado{font-size:19px;line-height:1.65;max-width:760px;margin-inline:auto;margin-top:26px}
  .cierre-seccion{font-size:18px;max-width:700px;margin-inline:auto;margin-top:40px}
  .cierre-seccion--chico{font-size:16px}

  .grilla{gap:20px}
  .grilla--2{grid-template-columns:repeat(2,1fr);gap:32px}
  .grilla--3{grid-template-columns:repeat(3,1fr);gap:24px}
  .grilla--4{grid-template-columns:repeat(4,1fr)}

  .tarjeta{padding:26px;border-radius:20px}
  .tarjeta__ilu{height:110px;margin-bottom:10px}
  .tarjeta h3{font-size:18px;margin-bottom:10px}
  .tarjeta p{font-size:15px;line-height:1.55}

  /* header */
  .header{display:block;background:var(--crema);padding:22px 0}
  .header__inner{display:flex;align-items:center;justify-content:space-between}
  .header__logo img{width:100px;height:auto}
  .header .btn{font-size:15px;padding:12px 24px}

  /* hero */
  .hero{padding:40px 0 96px}
  .hero__inner{flex-direction:row;align-items:center;gap:72px;text-align:left}
  .hero__logo{display:none}
  .hero__texto{flex:1}
  .eyebrow{display:block;font-size:13.5px;letter-spacing:.08em}
  .hero h1{font-size:54px;line-height:1.1;margin-top:18px}
  .hero__sub{font-size:19px;line-height:1.6;max-width:480px;margin-top:22px}
  .hero__acciones{flex-direction:row;justify-content:flex-start;gap:16px;margin-top:34px;width:auto}
  .hero__acciones .btn{width:auto;padding:19px 34px;font-size:17.5px}
  .hero__foto{flex:none;width:528px;margin:0}
  .hero__foto img{aspect-ratio:528/500;border-radius:28px}

  /* problema */
  .problema{padding:88px 0}
  .problema .grilla{margin-top:44px}

  /* solución */
  .solucion{padding:88px 0}
  .destacado{max-width:760px;margin:34px auto 0;padding:28px;font-size:17px;border-radius:20px}
  .tira{margin-top:40px;overflow:visible;margin-inline:0;padding-inline:0}
  .tira img{width:100%}
  .tira__pie{display:none}

  /* cómo funciona */
  .como{padding:88px 0}
  .como .grilla{margin-top:44px}
  .paso{gap:12px;padding:30px}
  .paso__n{width:52px;height:52px;font-size:24px}
  .paso__cabecera img{height:104px}
  .paso h3{font-size:19px;margin-top:6px}

  /* galería */
  .tarjetas-galeria{padding:88px 0}
  .galeria__label{font-size:13px;margin-top:30px;margin-bottom:10px}
  .carrusel{
    display:grid;grid-template-columns:repeat(6,1fr);gap:20px;
    margin-inline:0;padding:0;overflow:visible;
  }
  .tarjeta-pecs{width:auto;padding:16px 12px 16px;border-radius:20px}
  .tarjeta-pecs span{font-size:12px;margin-top:8px}
  .solo-mobile{display:none}

  /* productos */
  .productos{padding:88px 0}
  .productos__grilla{margin-top:48px;align-items:stretch}
  .producto{border-radius:26px}
  .producto__img img{aspect-ratio:554/420}
  .producto__body{padding:32px}
  .producto h3{font-size:27px}
  .precio strong{font-size:34px}
  .precio__desde{font-size:16px}
  .lista-check li{font-size:16px;padding-left:20px;margin-bottom:10px}
  .lista-check li::before{width:8px;height:8px}
  .label-opcion{font-size:12px;margin-top:16px}
  .opcion{padding:15px 16px;border-radius:14px}
  .opcion input{width:20px;height:20px}
  .opcion input::after{width:8px;height:8px}
  .opcion__nombre{font-size:15.5px}
  .opcion__precio{font-size:18px}
  .opcion__precio s{font-size:12.5px}
  .producto .btn--bloque{margin-top:auto;padding:19px;font-size:18px}
  .micro{font-size:14px;margin-top:10px}

  /* faq */
  .faq{padding:88px 0}
  .faq__item{border-radius:16px;margin-top:12px}
  .faq__item summary{padding:22px 26px;font-size:18px}
  .faq__cuerpo{padding:14px 26px 22px}
  .faq__cuerpo p{font-size:16px;line-height:1.6}
  .faq h2{margin-bottom:32px}

  /* cierre */
  .cierre{padding:96px 0}
  .cierre h2{font-size:44px}
  .cierre__bajada{font-size:19px;max-width:720px;margin-inline:auto;margin-top:18px}
  .cierre__botones{flex-direction:row;justify-content:center;gap:16px;margin-top:36px}
  .cierre__botones .btn{padding:19px 40px}
  .cierre__wa{max-width:620px;margin:44px auto 0;padding:30px;border-radius:22px}
  .cierre__wa-titulo{font-size:19px}
  .cierre__wa-sub{font-size:16px}
  .cierre__wa .btn{width:auto;margin-top:16px;padding:16px 34px}
  .cierre__tel{font-size:14.5px}

  /* footer */
  .footer{padding:56px 0 44px}
  .footer__inner{flex-direction:row;align-items:flex-start;justify-content:space-between;text-align:left;gap:40px}
  .footer__marca{max-width:320px}
  .footer__nombre{font-size:20px}
  .footer__links{border-top:0;padding-top:0;width:auto}
  .footer__links a{font-size:14.5px}
  .footer__legal{align-items:flex-end}
  .footer__ig{margin-top:10px}

  /* fab */
  .fab{right:32px;bottom:32px;width:64px;height:64px}
  .fab svg{width:34px;height:34px}
}

/* Fallback para navegadores sin :has() — sin él, el estado
   seleccionado igual se ve en el punto del radio. */
@supports not selector(:has(*)){
  .opcion input:checked{border-color:currentColor}
}