/* ══════════════════════════════════════════════════════════════════════
   Soy Lorena Ruiz · estilos comunes de la web (dirección D)
   Lo que comparten TODAS las páginas: colores, base, retícula, cabecera,
   pie, tipografía de titulares, botones y enlaces.
   Cada página enlaza este archivo PRIMERO y después añade solo sus secciones.
   Normas de uso: 04-web/NORMAS_WEB.md. Borrador: paleta y textos abiertos.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --crema:#F7F7F1;
  --papel:#FCFCF8;
  --grafito:#2E3330;
  --grafito-2:#3A403C;
  --texto-2:#4A504C;
  --salvia:#748F70;
  --salvia-deep:#566E51;      /* fondo con texto blanco: 5,6:1 */
  --lima:#D4F531;
  --orquidea-clara:#CDBBE3;   /* grafito encima: 7,2:1 */
  --linea:#DCDDD4;
  --filete-oscuro:#4A514C;
  --sobre-grafito:#F4F4EE;
  --sobre-grafito-2:#C9CCC6;
  --ancho:1320px;
  --lado:56px;
}

/* ── Base ── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}

/* ── Cambio de página sin parpadeo del menú ──
   El navegador funde una página con la siguiente y deja la cabecera quieta.
   Funciona en Chrome, Edge y Safari recientes; en el resto, cambio normal.
   Necesita servir la web (http/https): abriendo el archivo suelto no se aplica. */
@view-transition{navigation:auto}
.cab{view-transition-name:cabecera}
::view-transition-group(cabecera){animation:none}
::view-transition-old(cabecera){display:none}
::view-transition-new(cabecera){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
body{background:var(--crema);color:var(--grafito);font-family:"Space Grotesk",system-ui,sans-serif;font-size:18px;line-height:1.6;font-variant-numeric:lining-nums}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
p{text-wrap:pretty}
h1,h2,h3,.frase,.cita{text-wrap:balance}
[id]{scroll-margin-top:96px}
:focus-visible{outline:3px solid var(--grafito);outline-offset:3px}
.grafito :focus-visible,.pie-web :focus-visible,.franja-salvia :focus-visible{outline-color:var(--lima)}
.saltar{position:absolute;left:16px;top:-60px;z-index:30;background:var(--grafito);color:var(--sobre-grafito);padding:10px 16px;border-radius:6px}
.saltar:focus{top:12px}

/* ── Contenedor y retícula de 12 columnas ── */
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}
.ret{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}

/* ── Fondos de franja ── */
.grafito{background:var(--grafito);color:var(--sobre-grafito)}
.grafito .antetitulo{color:var(--sobre-grafito-2)}
.franja-lila{background:var(--orquidea-clara)}
.franja-salvia{background:var(--salvia-deep);color:#fff}
.franja-salvia .antetitulo{color:rgba(255,255,255,.82)}

/* ── Cabecera: barra de menú fija, con la marca resaltada ── */
.cab{position:sticky;top:0;z-index:20;background:var(--crema);border-bottom:1px solid var(--linea)}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado);height:76px;display:flex;align-items:center;gap:36px}
.marca{display:inline-flex;align-items:baseline;gap:.28em;font-size:21px;line-height:1;white-space:nowrap;color:var(--grafito);margin-top:6px}
.marca .m-soy{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.08em;letter-spacing:-.01em}
.marca .nombre{font-weight:700;text-transform:uppercase;letter-spacing:-.015em;padding:0 .12em;background:linear-gradient(transparent 50%,var(--lima) 48%,var(--lima) 100%)}
.nav{margin-left:auto;display:flex;gap:4px;font-size:15px;font-weight:500;color:var(--texto-2)}
.nav a{padding:10px 14px;border-radius:6px}
.nav a:hover{color:var(--grafito);background:rgba(46,51,48,.06)}
.nav a[aria-current]{color:var(--grafito);text-decoration:underline;text-decoration-color:var(--lima);text-decoration-thickness:3px;text-underline-offset:8px}
.cab-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:8px;background:var(--grafito);color:var(--sobre-grafito);font-size:15px;font-weight:500;white-space:nowrap}
.cab-cta .flecha{color:var(--lima)}
.cab-cta:hover{text-decoration:underline;text-underline-offset:4px}
.menu{font-family:inherit;background:none;color:inherit;cursor:pointer;display:none;margin-left:auto;font-size:15px;font-weight:500;border:1.5px solid var(--grafito);border-radius:6px;padding:8px 14px;min-height:44px;align-items:center}

/* ── Tipografía común ── */
.antetitulo{display:block;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2);margin-bottom:20px}
h1,h2{font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:.98}
h1{font-size:clamp(44px,5.4vw,80px);margin-bottom:34px}
h2{font-size:clamp(32px,3.5vw,52px)}
.frase{font-family:Fraunces,Georgia,serif;font-weight:500;font-optical-sizing:auto;line-height:1.22;letter-spacing:-.01em}
.resalta{color:var(--lima)}
.franja-salvia .resalta{color:var(--lima)}
mark.rotulador{color:inherit;background:linear-gradient(transparent 54%,var(--lima) 54%,var(--lima) 90%,transparent 90%);padding:0 .04em}
.borrador{letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:500}

/* ── Apertura de las páginas interiores: migas y titular, iguales en todas ──
   El espacio superior (56 px; 28 px en móvil) lo pone cada página en su .apertura. */
.migas{grid-column:1 / -1;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--texto-2);margin-bottom:48px}
.migas a{text-decoration:underline;text-underline-offset:3px}
.titular{font-size:clamp(46px,6.4vw,96px);line-height:.92;letter-spacing:-.035em}
.titular .previa{display:block;color:var(--texto-2);font-size:.5em;letter-spacing:-.02em;margin-bottom:.3em}
.titular mark{color:inherit;background:linear-gradient(transparent 54%,var(--lima) 54%,var(--lima) 90%,transparent 90%);padding:0 .04em}

/* ── Botones y enlaces ── */
.acciones{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:38px}
.boton{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 28px;border-radius:8px;background:var(--grafito);color:var(--sobre-grafito);font-weight:500;font-size:17px}
.boton .flecha{color:var(--lima)}
.boton:hover{text-decoration:underline;text-underline-offset:4px}
.boton.lima{background:var(--lima);color:var(--grafito)}
.boton.lima .flecha{color:var(--grafito)}
.enlace{font-weight:500;font-size:17px;text-decoration:underline;text-decoration-color:var(--salvia);text-decoration-thickness:2px;text-underline-offset:5px}
.enlace:hover{text-decoration-color:var(--grafito)}
.enlace.claro,.grafito .enlace{text-decoration-color:var(--lima)}

/* ── Pie de página ── */
.pie-web{background:var(--grafito);color:var(--sobre-grafito-2);font-size:15px;line-height:1.5}
.pie-in{max-width:var(--ancho);margin:0 auto;padding:72px var(--lado) 0;display:grid;grid-template-columns:5fr 7fr;gap:32px;border-top:1px solid var(--filete-oscuro)}
.pie-marca .marca{color:var(--sobre-grafito);margin:0}
.pie-marca .marca .nombre{color:var(--grafito);background:var(--lima);padding:.12em .22em .06em}
.pie-lema{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:22px;line-height:1.25;color:var(--sobre-grafito);margin-top:22px;max-width:15em}
.pie-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pie-tit{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sobre-grafito);margin-bottom:12px}
.pie-nav a{display:flex;align-items:center;min-height:36px;color:var(--sobre-grafito-2)}
.pie-nav a:hover{color:var(--sobre-grafito);text-decoration:underline;text-decoration-color:var(--lima);text-underline-offset:4px}
.pie-legal{max-width:var(--ancho);margin:0 auto;padding:56px var(--lado) 36px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-size:13px}
.pie-legal .copia{margin-right:auto}
.pie-legal a{display:inline-flex;align-items:center;min-height:36px;text-decoration:underline;text-underline-offset:3px}
.pie-legal a:hover{color:var(--sobre-grafito)}

/* ── Pantallas medianas ── */
@media (max-width:1100px){
  .ret{column-gap:24px}
  .cab-in{gap:20px}
  .nav a{padding:10px 8px}
  .pie-in{grid-template-columns:1fr;gap:48px}
}
/* La barra entera no cabe por debajo de 900 px: menú compacto */
@media (max-width:900px){
  .nav,.cab-cta{display:none}
  .menu{display:inline-flex}
  /* Menú desplegable: el botón «Menú» añade .abierta a la cabecera */
  .cab.abierta .cab-in{flex-wrap:wrap;height:auto;min-height:64px;padding-top:10px;padding-bottom:22px;row-gap:10px}
  .cab.abierta .nav{display:flex;flex-direction:column;order:3;flex-basis:100%;margin-left:0;gap:0;border-top:1px solid var(--linea);padding-top:6px}
  .cab.abierta .nav a{padding:13px 0;font-size:18px;border-radius:0}
  .cab.abierta .nav a:hover{background:none}
  .cab.abierta .cab-cta{display:inline-flex;order:4}
}
/* ── Móvil ── */
@media (max-width:760px){
  :root{--lado:16px}
  body{font-size:17px}
  .cab-in{height:64px}
  .marca{font-size:17px}
  h1{font-size:clamp(38px,11vw,50px);margin-bottom:22px}
  h2{font-size:31px}
  .boton{width:100%;justify-content:center}
  .migas{flex-direction:column;gap:4px;margin-bottom:32px}
  .titular{font-size:clamp(40px,11.5vw,54px)}
  .pie-in{padding-top:56px}
  .pie-nav{grid-template-columns:1fr 1fr;row-gap:32px}
  .pie-legal{padding-top:44px}
  .pie-legal .copia{flex-basis:100%}
}