/* Fuentes alojadas en el sitio (Fontsource) */
@font-face{ font-family:"Source Serif 4"; font-style:normal; font-weight:200 900; font-display:swap;
  src:url(/fonts/source-serif-4.woff2) format("woff2-variations"), url(/fonts/source-serif-4.woff2) format("woff2"); }
@font-face{ font-family:"Public Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/public-sans-400.woff2) format("woff2"); }
@font-face{ font-family:"Public Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/public-sans-500.woff2) format("woff2"); }
@font-face{ font-family:"Public Sans"; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/public-sans-600.woff2) format("woff2"); }
/* Header + hero construidos 100% con los tokens del Sistema Mariana Albert (mismos nombres que theme.css).
   Phone + tablet (< 64rem): una columna centrada, texto → botón → foto. Desk (≥ 64rem): 8 columnas, texto 4 + foto 4. */

/* ══ TOKENS (copia exacta del sistema) ══ */
:root{
  color-scheme:light;
  /* Colores · interfaz */
  --color-papel:#F8F6F1;
  --color-tinta:#10163A;        /* 16.2:1 */
  --color-gris:#50566A;         /*  6.7:1 */
  --color-azul:#1E3ABA;         /*  8.2:1 · blanco encima 8.9 */
  --color-azul-hondo:#162C8F;
  --color-violeta:#6A22E0;      /*  6.6:1 · blanco encima 7.2 */
  --color-linea:#E2E0DA;
  --color-menu-hover:#EEF3FC;
  --color-plano:#EAF1FC;        /* fondo de sección suave · tinta encima 15:1 */
  /* Fuentes */
  --font-serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --font-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Fijos */
  --spacing-boton:3rem; --spacing-icono:1.25rem; --spacing-icono-texto:.5rem; --container-page:64rem;
  /* Phone + tablet */
  --gutter:1.5rem; --header:4rem; --spacing-bloque:3rem; --spacing-section:4rem; --spacing-grupo:1.5rem;
  --text-marca:1.25rem;       --text-marca--line-height:1.75rem;
  --text-t1:2.5rem;           --text-t1--line-height:3rem;
  --text-t2:2rem;             --text-t2--line-height:2.5rem;
  --text-t3:1.5rem;           --text-t3--line-height:2rem;
  --text-numero:3rem;         --text-numero--line-height:3.5rem;
  --text-destacado:1.125rem;  --text-destacado--line-height:1.75rem;
  --text-texto:1rem;          --text-texto--line-height:1.5rem;
  --text-nota:.875rem;        --text-nota--line-height:1.25rem;
  --text-etiqueta:.75rem;     --text-etiqueta--line-height:1rem;
}
@media (width >= 64rem){
  :root{
    --gutter:3rem; --header:5rem; --spacing-bloque:4rem; --spacing-section:6rem; --spacing-grupo:2rem;
    --text-marca:1.5rem;  --text-marca--line-height:2rem;
    --text-t1:3.5rem;     --text-t1--line-height:4rem;
    --text-t2:2.5rem;     --text-t2--line-height:3rem;
    --text-t3:1.75rem;    --text-t3--line-height:2.25rem;
  }
}

/* ══ Base ══ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:calc(var(--header) + 1rem); }
body{ margin:0; background:var(--color-papel); color:var(--color-tinta);
  font:400 var(--text-texto)/var(--text-texto--line-height) var(--font-sans); -webkit-font-smoothing:antialiased; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--color-azul); outline-offset:2px; }
.skip{ position:absolute; left:-999px; top:0; }
.skip:focus{ left:1rem; top:1rem; z-index:10; background:var(--color-papel); padding:.5rem 1rem; }
.wrap{ max-width:var(--container-page); margin-inline:auto; padding-inline:var(--gutter); }
.ico{ width:var(--spacing-icono); height:var(--spacing-icono); flex:none; }

/* ══ Roles tipográficos ══ */
.etiqueta{ font:600 var(--text-etiqueta)/var(--text-etiqueta--line-height) var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--color-azul); text-wrap:balance; }
.t1{ font:600 var(--text-t1)/var(--text-t1--line-height) var(--font-serif); letter-spacing:-.022em; text-wrap:balance; margin:0; }
.destacado{ font:400 var(--text-destacado)/var(--text-destacado--line-height) var(--font-sans); color:var(--color-gris); }
.nota{ font:400 var(--text-nota)/var(--text-nota--line-height) var(--font-sans); color:var(--color-gris); text-wrap:balance; }

/* ══ Botón ══ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--spacing-icono-texto); min-height:var(--spacing-boton); padding-inline:1.5rem;
  background:var(--color-azul); color:#fff; text-decoration:none; font:600 var(--text-texto)/var(--text-texto--line-height) var(--font-sans);
  border-radius:8px; text-align:center; transition:background .15s, transform .1s; }
.btn:hover{ background:var(--color-azul-hondo); }
.btn:active{ transform:translateY(1px); }

/* ══ Header ══ */
header{ position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--color-papel); border-bottom:1px solid var(--color-linea); }
.header-in{ height:var(--header); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.marca{ text-decoration:none; display:grid; justify-items:start; }
.marca b{ font:600 var(--text-marca)/var(--text-marca--line-height) var(--font-serif); color:var(--color-azul); }
.marca span{ font:500 var(--text-etiqueta)/var(--text-etiqueta--line-height) var(--font-sans); letter-spacing:.32em; text-transform:uppercase; }
nav.desk{ display:none; align-items:center; gap:2rem; }
nav.desk a:not(.btn){ text-decoration:none; padding-block:.25rem; border-bottom:1px solid transparent; }
nav.desk a:not(.btn):hover{ border-bottom-color:var(--color-tinta); }

/* Menú phone + tablet: panel a pantalla completa bajo el header */
.menu summary{ list-style:none; cursor:pointer; width:var(--spacing-boton); height:var(--spacing-boton); display:grid; place-items:center;
  margin-right:-.75rem; color:var(--color-azul); border-radius:8px; }
.menu summary::-webkit-details-marker{ display:none; }
.menu summary svg{ width:1.5rem; height:1.5rem; }
.menu .x{ display:none; }
.menu[open] .x{ display:block; } .menu[open] .h{ display:none; }
.panel{ position:fixed; left:0; right:0; bottom:0; top:calc(var(--header) + env(safe-area-inset-top,0px));
  background:var(--color-papel); overflow-y:auto; padding:1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:var(--spacing-grupo); }
.panel ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--color-linea); }
.panel li{ border-bottom:1px solid var(--color-linea); }
.panel li a{ display:flex; align-items:center; justify-content:space-between; min-height:3.5rem; text-decoration:none;
  font:600 var(--text-etiqueta)/var(--text-etiqueta--line-height) var(--font-sans); letter-spacing:.12em; text-transform:uppercase; }
.panel li a:hover{ background:var(--color-menu-hover); }
.panel li a::after{ content:"→"; font:400 1rem/1 var(--font-sans); color:var(--color-azul); }
.panel .btn{ width:100%; }
.panel .nota{ text-align:center; text-box:trim-both cap alphabetic; }
html:has(.menu[open]){ overflow:hidden; }
html:has(.menu[open]) .barra{ display:none; }
@media (width >= 64rem){ nav.desk{ display:flex; } .menu{ display:none; } }

/* ══ Hero ══ */
.hero{ padding-block:var(--spacing-bloque) var(--spacing-section); }
.hero-grid{ display:grid; gap:var(--spacing-bloque); justify-items:center; text-align:center; }
.texto{ display:flex; flex-direction:column; align-items:center; max-width:36rem; min-width:0; }
.hero .t1{ margin-top:1rem; }                          /* etiqueta → título: 16 */
.hero .t1 .gesto{ color:var(--color-violeta); }
.hero .t1 span{ display:block; }
.hero .destacado{ margin-top:var(--spacing-grupo); max-width:30rem; }   /* título → párrafo */
.acciones{ margin-top:var(--spacing-grupo); display:flex; flex-direction:column; align-items:center; gap:.75rem; }  /* párrafo → botón · botón → nota 12 */
figure{ margin:0; width:100%; max-width:24rem; }
figure img{ display:block; width:100%; height:auto; aspect-ratio:1066/1386; }
@media (width >= 64rem){
  .hero-grid{ grid-template-columns:repeat(8,minmax(0,1fr)); column-gap:2rem; align-items:center; justify-items:start; text-align:left; }
  .texto{ grid-column:1 / span 4; align-items:flex-start; max-width:none; }
  .hero .t1 span{ display:block; }
  .acciones{ align-items:flex-start; }
  figure{ grid-column:5 / span 4; max-width:none; }
}

/* ══ Sección 2 · Reconocimiento (plano violeta) ══ */
.plano-violeta{ background:var(--color-violeta); color:#fff; padding-block:var(--spacing-section); }
.plano-violeta .etiqueta{ color:#fff; }
.plano-violeta :focus-visible{ outline-color:#fff; }
.t2{ font:600 var(--text-t2)/var(--text-t2--line-height) var(--font-serif); letter-spacing:-.018em; text-wrap:balance; margin:0; }
.rec{ display:flex; flex-direction:column; gap:var(--spacing-grupo); }
.rec .t2{ margin-top:calc(1rem - var(--spacing-grupo)); }       /* etiqueta → título: 16 */
.rec .destacado{ color:#fff; max-width:30rem; padding-left:1rem; border-left:2px solid #fff; }
@media (width >= 64rem){
  .rec{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); column-gap:2rem; row-gap:1rem; align-items:end; }
  .rec .etiqueta{ grid-column:1 / -1; }
  .rec .t2{ grid-column:1 / span 4; margin-top:0; }
  .rec .destacado{ grid-column:5 / span 4; padding-left:2rem; }
}

/* ══ Secciones comunes ══ */
.seccion{ padding-block:var(--spacing-section); }
.cabeza{ display:flex; flex-direction:column; max-width:44rem; }
.cabeza .t2{ margin-top:1rem; }                               /* etiqueta → título: 16 */
.cabeza .destacado{ margin-top:var(--spacing-grupo); }        /* título → párrafo */
.t3{ font:600 var(--text-t3)/var(--text-t3--line-height) var(--font-serif); margin:0; text-wrap:balance; }
.cta-linea{ margin-top:var(--spacing-bloque); display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; }
.plano-suave{ background:var(--color-plano); }
.plano-azul{ background:var(--color-azul); color:#fff; }
.plano-azul .etiqueta,.plano-azul .destacado,.plano-azul .nota{ color:#fff; }
.plano-azul :focus-visible{ outline-color:#fff; }

/* 3 · Tres cosas sobre las que se trabaja */
.puntos{ list-style:none; margin:var(--spacing-bloque) 0 0; padding:0; display:grid; gap:1.5rem; }
.puntos li{ display:grid; gap:.5rem; padding:1.5rem; background:#fff; border:1px solid var(--color-linea); border-radius:12px; }
.puntos .t3{ color:var(--color-azul); }
.puntos p{ color:var(--color-gris); }
@media (width >= 64rem){ .puntos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; } .puntos li{ padding:2rem; } }

/* 4 · Soy Mariana */
.quien{ display:grid; gap:var(--spacing-bloque); justify-items:center; }
.quien figure{ width:100%; max-width:24rem; margin:0; }
.quien img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:12px; }
.quien .cabeza{ width:100%; }
.cred{ margin:var(--spacing-grupo) 0 0; padding:0; list-style:none; display:grid; gap:.75rem; }
.cred li{ display:flex; gap:.75rem; align-items:flex-start; }
.cred li::before{ content:""; flex:none; width:.5rem; height:.5rem; margin-top:.5rem; border-radius:50%; background:var(--color-azul); }
.link-red{ display:inline-flex; align-items:center; gap:var(--spacing-icono-texto); min-height:2.75rem; color:var(--color-azul); font-weight:600; text-decoration:none; }
.link-red:hover{ text-decoration:underline; text-underline-offset:4px; }
@media (width >= 64rem){
  .quien{ grid-template-columns:repeat(8,minmax(0,1fr)); column-gap:2rem; align-items:center; justify-items:start; }
  .quien figure{ grid-column:1 / span 4; max-width:none; }
  .quien .cabeza{ grid-column:5 / span 4; }
}

/* 5 · Cómo es trabajar conmigo */
.modalidad{ margin-top:1rem; font:600 var(--text-texto)/var(--text-texto--line-height) var(--font-sans); color:var(--color-tinta); }
.pasos{ list-style:none; margin:var(--spacing-bloque) 0 0; padding:0; counter-reset:p; display:grid; gap:1.5rem; }
.pasos li{ counter-increment:p; display:grid; grid-template-columns:3rem 1fr; gap:1rem; align-items:start; }
.pasos li::before{ content:counter(p); display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%;
  background:var(--color-azul); color:#fff; font:600 var(--text-t3)/1 var(--font-serif); }
.pasos .t3{ padding-top:.5rem; }
.pasos p{ color:var(--color-gris); margin-top:.25rem; }
@media (width >= 64rem){
  .pasos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
  .pasos li{ grid-template-columns:1fr; align-content:start; }
  .pasos .t3{ padding-top:0; }
}

/* 6 · Preguntas */
.faq{ margin-top:var(--spacing-bloque); display:grid; gap:1rem; }
.faq details{ background:#fff; border:1px solid var(--color-linea); border-radius:12px; }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.25rem 1.5rem; min-height:3.5rem; font:600 var(--text-destacado)/var(--text-destacado--line-height) var(--font-sans); border-radius:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; font:400 1.5rem/1 var(--font-sans); color:var(--color-azul); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 1.5rem 1.5rem; color:var(--color-gris); max-width:40rem; }
@media (width >= 64rem){ .faq{ max-width:48rem; } }

/* 7 · Cierre */
.final{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.final .t2{ max-width:36rem; }
.final .destacado{ margin-top:var(--spacing-grupo); max-width:30rem; }
.final .acciones{ margin-top:var(--spacing-grupo); align-items:center; text-align:center; }
.btn-claro{ background:#fff; color:var(--color-azul); }
.btn-claro:hover{ background:var(--color-menu-hover); }

/* Pie */
footer{ border-top:1px solid var(--color-linea); padding-block:3rem calc(3rem + env(safe-area-inset-bottom,0px)); }
.pie{ display:flex; flex-direction:column; gap:1rem; align-items:center; text-align:center; }
.pie .marca{ justify-items:center; }
.pie-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem; }
@media (width >= 64rem){ .pie{ flex-direction:row; justify-content:space-between; text-align:left; } .pie .marca{ justify-items:start; } }

/* ══ Barra CTA phone + tablet ══ */
@media (width < 64rem){ .solo-desk{ display:none; } }
.barra{ position:fixed; left:0; right:0; bottom:0; z-index:6; padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom,0px));
  background:var(--color-papel); border-top:1px solid var(--color-linea); display:flex; justify-content:center;
  transform:translateY(110%); transition:transform .2s; }
.barra.on{ transform:none; }
@media (width >= 64rem){ .barra{ display:none; } }
@media (width < 64rem){ html{ scroll-padding-bottom:5.5rem; } }

@media (prefers-reduced-motion: reduce){ *{ transition:none!important; } .btn:active{ transform:none; } }

/* Utilidades (sin estilos en línea: la CSP no los permite) */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.cta-cerca{ margin-top:var(--spacing-grupo); }
.t2-tras-etiqueta{ margin-top:1rem; }