/* Tus hormonas, explicadas · hoja de estilo única */

@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --crema: #FBF3EA;
  --crema-2: #F7EADC;
  --melocoton: #F6C9B0;
  --terracota: #C96F5B;
  --terracota-osc: #A4503E; /* para texto pequeño: contraste AA sobre crema */
  --ciruela: #4B3445;
  --ciruela-suave: #6E5767;
  --salvia: #A9C4A5;
  --salvia-osc: #4F6B4B;
  --estrogeno: #EE9A80;
  --progesterona: #C8B8E2;
  --cortisol: #F2C46D;
  --insulina: #9EC7DA;
  --blanco: #FFFCF8;
  --borde: #EAD9C8;
  --radio: 18px;
  --sombra: 0 1px 2px rgba(75, 52, 69, .06), 0 6px 20px rgba(75, 52, 69, .07);
  --ancho: 1080px;
  --ancho-lectura: 720px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--crema);
  color: var(--ciruela);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ciruela); text-decoration-color: var(--terracota); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--terracota-osc); }
:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 4.6vw, 2.2rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
.acento { color: var(--terracota); }

.saltar { position: absolute; left: -999px; top: 0; background: var(--ciruela); color: var(--crema); padding: .6em 1em; z-index: 10; }
.saltar:focus { left: 16px; top: 8px; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.lectura { max-width: var(--ancho-lectura); }

/* Cabecera */
.cabecera { background: var(--crema); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.02rem; line-height: 1.1; color: var(--ciruela); }
.marca img { width: 36px; height: 36px; border-radius: 50%; }
.marca span span { color: var(--terracota); }
.menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; white-space: nowrap; padding: 8px 10px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .95rem; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--crema-2); color: var(--ciruela); }
.menu .solo-ancho { display: none; }
@media (min-width: 720px) { .menu .solo-ancho { display: block; } .marca { font-size: 1.12rem; } }
@media (max-width: 339px) { .marca .marca-texto { display: none; } }
@media (max-width: 400px) { .marca { font-size: .9rem; gap: 8px; } .marca img { width: 32px; height: 32px; } .menu a { padding: 8px 7px; font-size: .9rem; } }

/* Botones */
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4em 0 0; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.2;
  background: var(--ciruela); color: var(--crema); border: 2px solid var(--ciruela);
  cursor: pointer; font-family: inherit;
}
.boton:hover { background: #3a2836; color: var(--crema); }
.boton--claro { background: transparent; color: var(--ciruela); }
.boton--claro:hover { background: var(--crema-2); color: var(--ciruela); }
.boton--terracota { background: var(--terracota-osc); border-color: var(--terracota-osc); }
.boton--terracota:hover { background: #8d4334; border-color: #8d4334; }

/* Portada de inicio */
.hero { padding: 36px 0 28px; }
.hero .envoltura { display: grid; gap: 20px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.promesa { font-size: clamp(1.2rem, 3.6vw, 1.45rem); font-weight: 700; margin-bottom: .4em; }
.subpromesa { color: var(--ciruela-suave); font-size: 1.05rem; }
.hero-imagen { width: min(300px, 76vw); margin: 0 auto; border-radius: 50%; }
@media (min-width: 820px) {
  .hero { padding: 64px 0 48px; }
  .hero .envoltura { grid-template-columns: 1.2fr 1fr; gap: 40px; }
  .hero-imagen { width: 100%; max-width: 420px; }
}

.seccion { padding: 40px 0; }
.seccion--suave { background: var(--crema-2); }
.entradilla { color: var(--ciruela-suave); max-width: 60ch; }

/* Personajes */
.personajes { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; padding: 0; margin: 20px 0 0; }
@media (min-width: 600px) { .personajes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .personajes { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.personaje { background: var(--blanco); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); display: grid; grid-template-columns: 60px 1fr; column-gap: 14px; align-items: start; }
.personaje svg { width: 60px; height: 60px; grid-row: span 3; }
.personaje h3 { margin: 2px 0 0; font-size: 1.12rem; }
.personaje .apodo { font-size: .85rem; font-weight: 700; color: var(--ciruela-suave); margin: 0 0 .4em; }
@media (min-width: 900px) {
  .personaje { display: block; padding: 20px 16px 18px; }
  .personaje svg { width: 68px; height: 68px; margin-bottom: 10px; }
}
.personaje p { font-size: .95rem; margin: 0; line-height: 1.5; }

/* Tarjetas grandes */
.tarjetas { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 820px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 24px 20px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.tarjeta .etiqueta { align-self: flex-start; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--melocoton); margin-bottom: 12px; }
.tarjeta--salvia .etiqueta { background: var(--salvia); }
.tarjeta p { flex: 1; }
.tarjeta .boton { align-self: flex-start; }

.instagram { text-align: center; }
.instagram p { margin-left: auto; margin-right: auto; }
.instagram .botones { justify-content: center; }

/* Pie */
.pie { background: var(--ciruela); color: #F3E6DC; padding: 32px 0 40px; font-size: .92rem; margin-top: 24px; }
.pie a { color: #FFF4EA; text-decoration-color: var(--melocoton); }
.pie a:hover { color: var(--melocoton); }
.pie .envoltura { display: grid; gap: 14px; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.pie-aviso { margin: 0; max-width: 70ch; opacity: .92; }
.pie-marca { font-weight: 800; font-size: 1.05rem; color: #FFF4EA; margin: 0; }

/* Páginas interiores */
.cabeza-pagina { padding: 32px 0 8px; }
.cabeza-pagina h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); }
.migas { font-size: .9rem; color: var(--ciruela-suave); margin-bottom: 10px; }

/* Guía */
.nw { white-space: nowrap; }
.indice-fijo { position: sticky; top: 60px; z-index: 4; background: var(--crema); margin: 0 -16px; padding: 0; border-bottom: 1px solid var(--borde); }
.indice-fijo .indice { margin: 0; }
@media (min-width: 820px) { .indice { flex-wrap: wrap; } .indice-fijo .indice { flex-wrap: nowrap; } }
.indice { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; margin: 0 -16px; list-style: none; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.indice a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--borde); text-decoration: none; font-weight: 700; font-size: .92rem; }
.indice a:hover { border-color: var(--terracota); }
.caja { background: var(--blanco); border-radius: var(--radio); padding: 18px 18px 4px; box-shadow: var(--sombra); margin: 18px 0; }
.caja--nota { background: #F1F6EF; box-shadow: none; border: 1px solid #D6E4D3; }
.caja--aviso { background: #FCEDE5; box-shadow: none; border: 1px solid var(--melocoton); }
.caja h2, .caja h3 { margin-top: 0; }

.bloque { padding: 28px 0 8px; border-top: 1px solid var(--borde); scroll-margin-top: 124px; }
.bloque:first-of-type { border-top: 0; }
.bloque-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bloque-cabeza .punto { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--color, var(--terracota)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color, var(--terracota)) 25%, transparent); }
.bloque-cabeza h2 { margin: 0; }
.cuando { font-weight: 700; color: var(--ciruela-suave); margin: 0 0 14px; }
.subtitulo { font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--terracota-osc); margin: 22px 0 8px; }
.pasa { background: var(--crema-2); border-radius: 14px; padding: 14px 16px 2px; }
.datos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.dato { background: var(--blanco); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); border-left: 5px solid var(--color, var(--salvia)); }
.dato h3 { font-size: 1.08rem; margin-bottom: .35em; }
.dato p { margin-bottom: .5em; }
.dato p:last-child { margin-bottom: 0; }
.dato .platos { color: var(--ciruela-suave); font-size: .97rem; }
.solidez { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; margin-left: 4px; white-space: nowrap; }
.solidez--firme { background: #DCEAD9; color: #2F4A2C; }
.solidez--asociacion { background: #FBE7C4; color: #6A4A0C; }
.solidez--modesta { background: #EADFF3; color: #4A3463; }
sup.ref { font-size: .72em; line-height: 0; font-weight: 700; white-space: nowrap; }
sup.ref a { text-decoration: none; color: var(--terracota-osc); padding: 0 1px; }
.leyenda { display: grid; gap: 6px; font-size: .95rem; margin-bottom: 1em; }

.fuentes { font-size: .92rem; padding-left: 1.6em; }
.fuentes li { margin-bottom: .7em; scroll-margin-top: 80px; }
.fuentes li:target { background: #FCEDE5; border-radius: 6px; }
.fuentes .url { overflow-wrap: anywhere; }

/* Lista de productos */
.grupo { padding: 20px 0 6px; scroll-margin-top: 64px; }
.productos { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .productos { grid-template-columns: 1fr 1fr; } }
.producto { background: var(--blanco); border-radius: 16px; padding: 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.producto h3 { font-size: 1.06rem; margin: 0; }
.producto .autora { font-size: .9rem; color: var(--ciruela-suave); margin: 0; }
.producto p { margin: 0; font-size: .97rem; flex: 1; }
.producto .boton { align-self: flex-start; min-height: 44px; padding: 10px 18px; font-size: .95rem; margin-top: 6px; }
.publi { font-size: .78rem; font-weight: 700; color: var(--ciruela-suave); }

/* Legal */
.legal h2 { margin-top: 1.6em; scroll-margin-top: 70px; }
.legal h3 { margin-top: 1.2em; }
.marcador { background: #FFE9A8; padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* Impresión */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .cabecera, .pie, .indice, .no-imprimir, .saltar, .botones { display: none !important; }
  .envoltura { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  h1 { font-size: 22pt; }
  h2 { font-size: 16pt; break-after: avoid; }
  h3 { font-size: 11.5pt; break-after: avoid; }
  .cabeza-pagina { padding-top: 0; }
  .bloque { border-top: 1px solid #999; padding-top: 10pt; }
  .dato, .caja, .pasa { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; background: #fff; }
  .dato { border-left: 4pt solid var(--color, #999); }
  .solidez { border: 1px solid #777; background: #fff !important; color: #000 !important; }
  sup.ref a { color: #000; }
  .fuentes .url::before { content: " "; }
  .fuentes { font-size: 8.5pt; }
  .fuentes li { break-inside: avoid; }
  .solo-impresion { display: block !important; }
}

/* Productos integrados: siempre después del contenido */
.sirve { margin: 22px 0 6px; padding: 14px 16px 12px; border: 1.5px dashed var(--salvia); border-radius: 16px; background: #F6F8F2; }
.sirve-titulo { margin: 0 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--salvia-osc); }
.sirve-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sirve-item { display: grid; gap: 8px; padding: 10px 0 0; border-top: 1px solid #DDE7D9; }
.sirve-item:first-child { border-top: 0; padding-top: 0; }
.sirve-texto { margin: 0; font-size: .95rem; line-height: 1.45; }
.sirve-autora { font-weight: 500; color: var(--ciruela-suave); }
.sirve-accion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sirve-pie { margin: 10px 0 0; font-size: .8rem; color: var(--ciruela-suave); }
.sirve-pie a { font-weight: 700; }
@media (min-width: 640px) {
  .sirve-item { grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; }
  .sirve-accion { flex-direction: column; align-items: flex-end; gap: 2px; }
}
.boton--mini { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.productos--tres { margin-top: 18px; }
@media (min-width: 820px) { .productos--tres { grid-template-columns: repeat(3, 1fr); } }
.destacados .sirve-pie { margin-top: 14px; font-size: .88rem; }
.a-la-guia { margin: -4px 0 0; font-weight: 700; font-size: .95rem; }
@media print { .sirve { display: none !important; } }
.solo-impresion { display: none; }