/* ============================================================
   FAMILIA CONSCIENTE · Skin de marca
   ------------------------------------------------------------
   Extraído de los PRODUCTOS REALES (no inventado): los hex y las
   tipografías salen de los tres PDF que Bianca devolvió el 22-sep-2026.
     · guia-lactancia-que-te-queda-a-ti_v1
     · tu-leche-tu-camino_maqueta
     · ya-no-solo-leche_v1
   Objetivo: que la web y los libros se lean como UNA sola marca.
   Compatible con activos/diseno/kit.css → [data-mood="familia"].
   ============================================================ */

:root{
  /* --- papel --- */
  --crema:#faf5e8;      /* fondo de página de los libros        */
  --papel:#fffdf7;      /* tarjetas, superficies elevadas       */
  --mesa:#e8e0d0;       /* fondo exterior / secciones hundidas  */
  --arena:#f0e7d2;      /* bandas suaves                        */
  --rosa:#fde2ec;       /* banda de capítulo                    */
  --rosa-2:#fad2e1;     /* destacado dentro de banda rosa       */

  /* --- tinta --- */
  --tinta:#770523;      /* titulares (vino profundo)            */
  --acento:#d81a67;     /* acento, CTA, firma                   */
  --acento-d:#a3335e;   /* acento presionado                    */
  --texto:#5a443f;      /* cuerpo                               */
  --suave:#7a5a52;      /* cuerpo secundario                    */
  --tenue:#9b837a;      /* pies, metadatos                      */

  /* --- verdes (reglas y confirmaciones) --- */
  --verde:#d0d996;
  --verde-d:#5a8a3c;
  --linea:rgba(119,5,35,.14);

  /* --- tipografía --- */
  --display:'Caveat',"Brush Script MT",cursive;      /* titulares a mano */
  --ui:'Baloo 2',ui-rounded,'Segoe UI',system-ui,sans-serif; /* subtítulos, botones */
  --body:'Quicksand',ui-rounded,'Segoe UI',system-ui,sans-serif;

  --fs-hero:clamp(2.9rem,8.5vw,5.4rem);
  --fs-h2:clamp(2rem,5.2vw,3.1rem);
  --fs-h3:clamp(1.05rem,2.4vw,1.25rem);
  --fs-body:clamp(1rem,1.15vw,1.09rem);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --radius:16px; --radius-lg:22px;
  --sombra:0 2px 14px rgba(119,5,35,.05);
  --sombra-lg:0 22px 60px -26px rgba(119,5,35,.38);
  --ease:cubic-bezier(.22,.72,.22,1);
  --maxw:1080px; --readw:660px;

  color-scheme: light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--crema);color:var(--texto);
  font-family:var(--body);font-size:var(--fs-body);line-height:1.72;
  font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento);text-underline-offset:3px}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{color:var(--tinta);font-weight:700;text-wrap:balance}
h1{font-family:var(--display);font-size:var(--fs-hero);line-height:.93;letter-spacing:-.005em}
h2{font-family:var(--display);font-size:var(--fs-h2);line-height:1.0}
h3{font-family:var(--ui);font-size:var(--fs-h3);line-height:1.35;font-weight:700}
p{max-width:var(--readw)}
p + p{margin-top:.85em}
strong{color:var(--tinta);font-weight:700}
em{font-style:italic}

.kicker{
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--acento);display:block;margin-bottom:.6em;
}
.firma{font-family:var(--display);color:var(--acento);font-size:1.7rem;line-height:1}
.lead{font-size:clamp(1.08rem,1.6vw,1.22rem);color:var(--suave);line-height:1.62}

/* regla verde de los libros */
.regla{width:74px;height:3px;background:var(--verde);border-radius:2px;margin:var(--s3) 0}
.regla.centro{margin-left:auto;margin-right:auto}

/* ---------- estructura ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.wrap-lee{max-width:var(--readw)}
section{padding:clamp(56px,9vw,104px) 0;position:relative}
.sec-mesa{background:var(--mesa)}
.sec-arena{background:var(--arena)}
.sec-rosa{background:var(--rosa)}
.sec-papel{background:var(--papel)}

/* ---------- tarjetas ---------- */
.card{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radius);
  padding:clamp(20px,3vw,28px);box-shadow:var(--sombra);
}
.grid{display:grid;gap:var(--s2)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- cita ---------- */
.cita{
  font-family:var(--display);font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.12;
  color:var(--tinta);border-left:3px solid var(--acento);padding-left:clamp(18px,3vw,26px);
  max-width:20ch;
}
.cita-ancha{max-width:26ch}

/* ---------- botón ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--acento);color:#fff;font-family:var(--ui);font-weight:700;
  font-size:1.06rem;letter-spacing:.01em;padding:17px 32px;border:none;
  border-radius:999px;text-decoration:none;cursor:pointer;
  box-shadow:0 12px 30px -12px rgba(216,26,103,.75);
  transition:transform .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:hover{background:var(--acento-d);transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(216,26,103,.8)}
.btn:active{transform:translateY(0)}
.btn-ancho{width:100%}

/* ---------- formulario ---------- */
.form{display:flex;flex-direction:column;gap:12px;max-width:440px}
.form input[type=email],.form input[type=text]{
  font-family:var(--body);font-size:1.02rem;font-weight:600;color:var(--tinta);
  background:var(--papel);border:1.5px solid var(--linea);border-radius:14px;
  padding:16px 18px;width:100%;transition:border-color .2s,box-shadow .2s;
}
.form input::placeholder{color:var(--tenue);font-weight:500}
.form input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px rgba(216,26,103,.13)}
.form .nota{font-size:.84rem;color:var(--tenue);line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- píldoras / listas ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--papel);
  border:1px solid var(--linea);border-radius:999px;padding:7px 15px;
  font-family:var(--ui);font-weight:600;font-size:.86rem;color:var(--suave);
}
.lista{list-style:none;display:grid;gap:14px;max-width:var(--readw)}
.lista li{display:flex;gap:13px;align-items:flex-start;line-height:1.6}
.lista li::before{
  content:"";flex:none;width:9px;height:9px;margin-top:.62em;border-radius:50%;
  background:var(--verde-d);opacity:.65;
}
.lista-x li::before{background:var(--tenue);opacity:.4}

/* ---------- aviso legal / disclaimer ---------- */
.aviso{
  background:var(--rosa);border:1px solid rgba(216,26,103,.22);border-radius:var(--radius);
  padding:18px 22px;font-size:.92rem;color:#8a2b52;line-height:1.6;max-width:var(--readw);
}
.aviso strong{color:#8a2b52}

/* ---------- páginas de muestra ---------- */
.hojas{display:flex;gap:clamp(12px,2.4vw,26px);justify-content:center;align-items:flex-start;flex-wrap:wrap}
.hoja{
  width:clamp(150px,27vw,238px);border-radius:12px;overflow:hidden;
  border:1px solid var(--linea);box-shadow:var(--sombra-lg);background:var(--papel);
  transition:transform .5s var(--ease);
}
.hoja img{width:100%;height:auto}
.hoja:nth-child(1){transform:rotate(-2.2deg)}
.hoja:nth-child(3){transform:rotate(2.2deg)}
.hoja:nth-child(2){transform:translateY(-14px) scale(1.045);z-index:2}
@media(hover:hover){
  .hoja:hover{transform:translateY(-8px) rotate(0) scale(1.05);z-index:3}
}

/* ---------- pie ---------- */
.pie{background:var(--mesa);padding:clamp(40px,6vw,64px) 0;font-size:.9rem;color:var(--tenue)}
.pie a{color:var(--suave)}

/* ---------- barra CTA móvil ---------- */
.cta-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--papel);
  border-top:1px solid var(--linea);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 28px rgba(119,5,35,.10);
  transform:translateY(110%);transition:transform .38s var(--ease);
}
.cta-movil.visible{transform:translateY(0)}
@media(min-width:801px){.cta-movil{display:none}}

/* ---------- animación de entrada ----------
   Regla de seguridad: el contenido SOLO se esconde si el navegador
   confirmó que hay JS (html.js). Sin JS, o si el script falla, la
   página se ve entera. Nunca una sección en blanco.                */
html.js .rev{opacity:0;transform:translateY(22px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
html.js .rev.dentro{opacity:1;transform:none}
.rev-d1{transition-delay:.09s}.rev-d2{transition-delay:.18s}.rev-d3{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js .rev{opacity:1;transform:none}
  .hoja{transform:none!important}
}