/* ------------------------------------------------------------------
   Capa de marca de Vira.
   La cargan todas las páginas antes de su propio CSS. Define la paleta
   ampliada, las dos familias tipográficas y las texturas compartidas.

   Para cambiar la tipografía de titulares de toda la web solo hay que
   tocar --serif (y el <link> de Google Fonts de cada página).
   ------------------------------------------------------------------ */

:root{
  --p:0; /* progreso de scroll de la cabecera: 0 arriba del todo, 1 azul */

  /* Azules */
  --tinta-900:#082730;
  --tinta:#0E3A47;
  --tinta-700:#1C5464;
  --tinta-80:#3A6270;
  --tinta-60:#6A8B96;

  /* Acentos cálidos */
  --salmon-600:#E3A188;
  --salmon:#F6C7B6;
  --salmon-claro:#FDEEE8;
  --arena:#E7D9C3;
  --salvia:#8FA89B;

  /* Fondos */
  --marfil:#F4EDE7;
  --crema:#FBF8F6;
  --blanco:#FFFFFF;
  --linea:#E4DDD8;

  /* Tipografía */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Sombras */
  --sombra-baja:0 1px 2px rgba(8,39,48,.05);
  --sombra-alta:0 1px 2px rgba(8,39,48,.05),0 22px 44px -26px rgba(8,39,48,.32);
}

/* Las páginas traen su propio CSS después de este fichero, así que estas
   reglas usan un selector de más peso para imponerse sin tocar cada página. */
html body{
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body h1,body h2,body .titular,body .cifra,body .gancho,body .tiempo{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.018em;
}
body h3,body h4{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.012em;
}
body summary,body .btn,body button,body input,body select,body textarea,body label{
  font-family:var(--sans);
}

/* Grano: una capa de ruido muy tenue que quita el aspecto plano.
   El contenido del bloque debe ir dentro de un hijo con posición. */
.grano{position:relative;isolation:isolate}
.grano::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}
.grano>*{position:relative;z-index:1}

/* Ojo de sección: la etiqueta pequeña en mayúsculas con el filo salmón */
.ojo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-700);
  margin-bottom:14px;
}
.ojo::before{content:"";width:26px;height:1.5px;background:var(--salmon-600);display:block;flex:0 0 auto}

/* Filete corto bajo los titulares de sección */
.regla{width:34px;height:2px;background:var(--salmon-600);border-radius:2px;margin:0 0 18px}

/* Aparición suave al entrar en pantalla */
.revelar{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .revelar{opacity:1;transform:none;transition:none}
}

/* Ilustraciones: heredan el color de la paleta */
.ilustracion{display:block;width:100%;height:auto}
.marco-ilustracion{
  background:var(--marfil);border-radius:16px;padding:22px;overflow:hidden;
}

/* Redes sociales: heredan el color del pie donde se coloquen */
.redes{display:flex;gap:10px;align-items:center}
.redes a{
  width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid currentColor;color:inherit;opacity:.55;
  transition:opacity .2s ease,background .2s ease
}
.redes a:hover,.redes a:focus-visible{opacity:1;background:rgba(246,199,182,.16)}
.redes svg{width:19px;height:19px;display:block}

/* Cabecera común a todas las páginas. El marcado se repite en cada HTML
   (ver README); el estilo vive solo aquí. Vira a azul al bajar con --p. */
header.cab,header.cab *{box-sizing:border-box}
header.cab{
  position:sticky;top:0;z-index:50;width:100%;
  background:rgba(14,58,71,var(--p));
  border-bottom:1px solid rgba(228,221,216,calc(1 - var(--p)));
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  transition:background .15s linear,border-color .15s linear;
}
.cab-int{
  position:relative;max-width:1080px;height:72px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cab-logo{position:relative;display:block;line-height:0;text-decoration:none;flex:0 0 auto}
.cab-logo img{height:30px;width:auto;display:block}
.cab-logo .claro{position:absolute;inset:0;filter:brightness(0) invert(1);opacity:var(--p);pointer-events:none}
.cab-nav{display:flex;gap:26px;font-size:15px;font-family:var(--sans)}
.cab-nav a{
  text-decoration:none;white-space:nowrap;
  color:var(--tinta-80);
  color:color-mix(in srgb,var(--tinta-80),var(--blanco) calc(var(--p) * 100%));
  transition:color .15s linear;
}
.cab-nav a:hover{opacity:.7}
.cab-acciones{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.cab-cta{
  display:inline-block;padding:11px 20px;border-radius:999px;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3;white-space:nowrap;
  background:color-mix(in srgb,var(--tinta),var(--blanco) calc(var(--p) * 100%));
  color:color-mix(in srgb,var(--blanco),var(--tinta) calc(var(--p) * 100%));
  border:1.5px solid color-mix(in srgb,var(--tinta),var(--blanco) calc(var(--p) * 100%));
  transition:background .15s linear,color .15s linear,border-color .15s linear;
}
.cab-cta:hover{opacity:.85}
.cab-menu-btn{
  display:none;width:42px;height:42px;padding:0;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;border-radius:10px;
  color:color-mix(in srgb,var(--tinta),var(--blanco) calc(var(--p) * 100%));
}
.cab-menu-btn:focus-visible,.cab-nav a:focus-visible,.cab-cta:focus-visible{outline:2px solid var(--salmon-600);outline-offset:2px}
@media(max-width:979px){
  .cab-int{height:64px;padding:0 14px 0 16px;gap:10px}
  .cab-logo img{height:26px}
  .cab-cta{padding:9px 14px;font-size:14px}
  .cab-menu-btn{display:inline-flex}
  .cab-nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    padding:6px 16px 10px;background:var(--blanco);
    border-bottom:1px solid var(--linea);box-shadow:var(--sombra-alta);
  }
  .cab-nav.abierto{display:flex}
  .cab-nav a{padding:14px 4px;font-size:16px;color:var(--tinta);border-bottom:1px solid var(--linea)}
  .cab-nav a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion: reduce){header.cab,header.cab *{transition:none !important}}