/* ============================================================
   EYUB' DIGITAL EXPERIENCE 2026
   Sistema de diseno - base.css
   Blanco luminoso · azul EYUB' · fotografia protagonista
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Paleta oficial 2026
     Tres colores y nada mas: el azul EYUB' como tierra, el blanco
     como papel y el rojo del sello como unico acento. El azul
     electrico de la version anterior desaparecio a proposito: era
     lo que hacia que el sitio se pareciera a cualquier otro. */
  --azul-profundo:    #011C59;
  --azul-corporativo: #012E8C;
  /*
     El azul de lo interactivo.

     Era #1A4FE0, un azul electrico de aplicacion web. Se cambia
     por el azul CORPORATIVO, que ya estaba en la paleta: sigue
     siendo mas claro que el fondo -asi un enlace o un borde en
     estado activo se distingue- pero pertenece a la marca en vez
     de a la moda de las plataformas.

     El nombre se queda: lo usan cien reglas y renombrarlo no
     arreglaria nada que el color no arregle ya.
  */
  --azul-interactivo: #012E8C;
  --blanco:           #FFFFFF;

  /* Complementarios de funcion */
  --whatsapp: #25D366;
  /* El verde de WhatsApp sobre blanco no llega al contraste
     minimo. Este es el mismo color bajado de luz para cuando va
     como texto o icono, no como fondo. */
  --whatsapp-oscuro: #0F7B39;
  --ia:       #8B5CF6;
  --marca:    #E01B24;

  /* Escala azul derivada de #011C59 */
  --azul-950: #011C59;   /* la tierra de la marca */
  --azul-900: #01133C;   /* mas hondo: velos y esquinas */
  --azul-850: #012567;
  --azul-800: #012E8C;
  --azul-600: #1240B8;
  --azul-500: #1A4FE0;
  --azul-400: #5C86F5;
  --azul-300: #93AEFB;
  --azul-200: #C3D2FD;
  --azul-100: #E7EDFE;
  --azul-050: #F5F8FF;

  /* ---- Superficies: BLANCO por defecto ---- */
  --fondo:        #FFFFFF;
  --fondo-alt:    #F4F5F8;
  --superficie:   #FFFFFF;
  --superficie-2: #EFF1F6;
  --borde:        rgba(1, 28, 89, .13);
  --borde-fuerte: rgba(1, 28, 89, .34);

  /* ---- Texto ---- */
  --texto:     #011C59;
  --texto-sec: #46577D;
  --texto-ter: #8A97B0;

  /* El acento sobre papel es el propio azul de marca; el rojo se
     reserva para los indices y para la franja. */
  --acento:      #011C59;
  --acento-vivo: #012E8C;

  /* Sombras: casi ninguna. Un diseno editorial separa con lineas
     y con aire, no con tarjetas flotando. */
  --sombra-sm:   none;
  --sombra:      0 18px 44px rgba(1, 28, 89, .10);
  --sombra-lg:   0 40px 90px rgba(1, 28, 89, .16);
  --sombra-foto: none;

  /* Tipografia
     Archivo: grotesca de titular, muy apretada y con peso real.
     Inter: el texto corrido, que es donde se lee de verdad.
     IBM Plex Mono: indices, etiquetas y cifras. Es el detalle que
       hace que una pagina parezca compuesta y no generada.
     Instrument Serif: la palabra destacada dentro del titular, en
       cursiva. Sustituye al degradado azul de la version anterior,
       que era la firma mas reconocible de plantilla. */
  --fuente-titulo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-texto:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fuente-serif:  'Instrument Serif', 'Times New Roman', Georgia, serif;

  /* Filete: la unidad de separacion de este diseno. Casi todo lo
     que antes era sombra o esquina redondeada, ahora es una linea. */
  --filete: 1px solid var(--borde);

  /* Medidas */
  --ancho:       1360px;
  --ancho-texto: 62ch;
  --radio-sm:    2px;
  --radio:       3px;
  --radio-lg:    4px;
  --radio-xl:    6px;
  --radio-full:  999px;

  --seccion-y: clamp(3.8rem, 7.2vw, 7.4rem);

  /* Movimiento */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --rapido:    .18s;
  --normal:    .35s;
  --lento:     .7s;

  --nav-alto: 78px;
}

/* ---------- Modo oscuro (opcional) ---------- */
[data-tema="oscuro"] {
  --fondo:        #011C59;
  --fondo-alt:    #01133C;
  --superficie:   rgba(255, 255, 255, .05);
  --superficie-2: rgba(255, 255, 255, .09);
  --borde:        rgba(255, 255, 255, .16);
  --borde-fuerte: rgba(255, 255, 255, .42);

  --texto:     #FFFFFF;
  --texto-sec: #B7C4DE;
  --texto-ter: #8494B4;

  --acento:      #FFFFFF;
  --acento-vivo: #93AEFB;

  --sombra-sm:   none;
  --sombra:      none;
  --sombra-lg:   0 40px 90px rgba(0, 8, 30, .55);
  --sombra-foto: none;
}

/*
   Bloque inverso: una banda azul profunda dentro de una pagina
   blanca. Redefine los tokens localmente, asi los componentes
   que viven dentro se adaptan solos.
*/
.inverso {
  --fondo:        var(--azul-950);
  --fondo-alt:    var(--azul-900);
  --superficie:   rgba(255, 255, 255, .05);
  --superficie-2: rgba(255, 255, 255, .10);
  --borde:        rgba(255, 255, 255, .17);
  --borde-fuerte: rgba(255, 255, 255, .45);
  --texto:        #FFFFFF;
  --texto-sec:    #B7C4DE;
  --texto-ter:    #8494B4;
  --acento:       #FFFFFF;
  --acento-vivo:  #FFFFFF;
  color: var(--texto);
}


/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + 20px);
}

body {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip y no hidden: "hidden" convierte al body en contenedor de
     desplazamiento y con eso deja de funcionar position:sticky en
     todo lo que cuelga de el, empezando por la escena del hero. */
  overflow-x: clip;
  transition: background var(--normal) var(--ease), color var(--normal) var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--azul-corporativo); color: #fff; }

:focus-visible {
  /* El foco va en rojo. Es el sitio donde mas importa el "aqui
     estas", y el rojo es justo la marca de aqui del sistema. */
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---------- 3. TIPOGRAFIA ---------- */
/*
   La escala es deliberadamente violenta: el titular manda y el
   resto acompana. Un titular timido de 40 px rodeado de parrafos
   de 16 px es exactamente lo que hace que una pagina se vea
   "de plantilla": todo pesa lo mismo y nada dirige la mirada.
*/
h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.9rem, 7.2vw, 6.2rem); }
h2 { font-size: clamp(2.2rem, 5.4vw, 4.3rem); }
h3 { font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.05; letter-spacing: -.03em; }
h4 { font-size: 1.1rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }

/* Texto tecnico: indices, cifras, etiquetas y metadatos. */
.mono {
  font-family: var(--fuente-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;
}

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.06rem, 1.85vw, 1.32rem);
  color: var(--texto-sec);
  line-height: 1.62;
  max-width: var(--ancho-texto);
}

.apagado  { color: var(--texto-sec); }
.tenue    { color: var(--texto-ter); }
.centrado { text-align: center; }
.centrado .lede { margin-inline: auto; }

/*
   La palabra destacada del titular.

   Antes era un degradado azul sobre el texto. Funciona, pero es la
   marca de agua de las plantillas de los ultimos anos: en cuanto
   aparece, el visitante ya vio esa pagina antes.

   Ahora el destaque es un cambio de VOZ tipografica: la misma
   frase salta de la grotesca a una serif en cursiva. Es mas dificil
   de imitar, se lee mejor y no depende del color, asi que funciona
   igual sobre papel blanco que sobre azul.
*/
.destello {
  font-family: var(--fuente-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.01em;
  /* La serif tiene un ojo menor que Archivo al mismo cuerpo:
     se compensa para que las dos lineas pesen lo mismo. */
  font-size: 1.12em;
  color: inherit;
}

/*
   El apostrofo de EYUB'.
   Va en rojo de marca solo donde acompana al nombre a buen tamano;
   en textos pequenos, botones y etiquetas hereda el color para que
   no se lea como un signo suelto.
*/
.apos { color: var(--marca); font-weight: 800; }

.btn .apos,
.etiqueta-seccion .apos,
.franja__item .apos,
.menu__enlace .apos,
.movil__enlace .apos,
.chip .apos,
.insignia .apos,
.pie__lista .apos,
.pie__base .apos,
.lista-check .apos,
.opcion .apos,
.celda__texto .apos,
small .apos,
.ayuda .apos { color: inherit; }


/* ---------- 4. LAYOUT ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.contenedor--angosto { max-width: 900px; }
.contenedor--ancho   { max-width: 1560px; }

.seccion {
  padding-block: var(--seccion-y);
  position: relative;
  /*
     Recorta solo en horizontal. Los elementos decorativos que giran
     (los brazos del sistema orbital, los anillos) tienen una caja
     delimitadora mayor que su dibujo y, sin esto, ensanchan el
     documento en pantallas angostas.
     Se usa "clip" y no "hidden" para no romper position: sticky.
  */
  overflow-x: clip;
}
.seccion--compacta { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Fondo alterno suave */
.seccion--suave { background: var(--fondo-alt); }

/*
   El azul de marca, plano.

   Antes cada seccion oscura llevaba dos manchas radiales
   desenfocadas en las esquinas. Ese recurso -el "blob"- estuvo en
   todas las plantillas de los ultimos anos y es justo lo que
   convierte un color de marca en un fondo generico. Aqui el
   #011C59 se sostiene solo: lo que da profundidad es la retícula
   de filetes y el grano, no un degradado.
*/
.seccion--inmersiva,
.seccion--noche {
  background: var(--azul-950);
  color: rgba(255, 255, 255, .80);
}
.seccion--noche h2,
.seccion--noche h3,
.seccion--noche h4 { color: #fff; }
.seccion--noche .lede { color: rgba(255, 255, 255, .70); }
.seccion--noche .apagado { color: rgba(255, 255, 255, .58); }

/*
   Grano.

   Una capa de ruido al 3 % sobre el azul. No se ve conscientemente,
   pero rompe la planitud digital del color solido y hace que la
   pantalla parezca una superficie impresa. Es SVG en linea, asi que
   no cuesta ninguna peticion.
*/
.seccion--noche::before,
.seccion--inmersiva::before,
.grano::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.35'/%3E%3C/svg%3E");
}
.seccion--noche > *,
.seccion--inmersiva > * { position: relative; z-index: 1; }

/*
   Reticula de filetes: cuatro lineas verticales que atraviesan la
   seccion de arriba abajo. Es el esqueleto visible de la pagina,
   el gesto que mas separa un diseno compuesto de uno generado.
*/
.reticula { position: relative; }
.reticula::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      to right,
      var(--borde) 0 1px,
      transparent 1px calc(100% / 4));
  background-size: 100% 100%;
}
@media (max-width: 760px) { .reticula::after { display: none; } }

.rejilla { display: grid; gap: clamp(1rem, 2vw, 1.7rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.fila { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.fila--centro { justify-content: center; }
.fila--entre  { justify-content: space-between; }


/* ---------- 5. ENCABEZADO DE SECCION ---------- */
.encabezado { margin-bottom: clamp(2.4rem, 4vw, 3.6rem); max-width: 800px; }
.encabezado--centro { margin-inline: auto; text-align: center; }
.encabezado h2 { margin-bottom: .9rem; }
.encabezado--centro .lede { margin-inline: auto; }

/*
   El puntito azul pulsante que llevaba antes cada etiqueta se
   repetia ocho veces por pagina y era puro ruido. Lo sustituye un
   filete rojo: la misma funcion de "aqui empieza algo", con el
   color de la marca y sin animacion que distraiga.
*/
.etiqueta-seccion {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--fuente-mono);
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-bottom: 1.3rem;
}
.etiqueta-seccion::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--marca);
  flex-shrink: 0;
  margin-right: .7rem;
}
.inverso .etiqueta-seccion,
[data-tema="oscuro"] .etiqueta-seccion { color: rgba(255, 255, 255, .70); }

/* Numero de indice: [01], [02]... El recurso editorial que ordena
   la lectura de una pagina larga sin repetir titulillos. */
.etiqueta-seccion__n {
  color: var(--marca);
  margin-right: .55rem;
  font-variant-numeric: tabular-nums;
}
/* La etiqueta usa gap:0 para no separar el apóstrofo de la marca,
   así que el icono lleva su propio margen. */
.etiqueta-seccion > .ico { flex-shrink: 0; margin-right: .45rem; }


/* ---------- 6. BOTONES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1.05rem 1.75rem;
  font-family: var(--fuente-texto);
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--azul-profundo);
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: transform var(--rapido) var(--ease),
              box-shadow var(--normal) var(--ease),
              background var(--normal) var(--ease),
              border-color var(--normal) var(--ease),
              color var(--normal) var(--ease);
}

/* El icono se separa con margen, no con gap: asi el apostrofo de
   EYUB' no se despega del nombre dentro del boton. */
.btn > .ico { transition: transform var(--normal) var(--ease); flex-shrink: 0; }
.btn > .ico:first-child { margin-right: .55rem; }
.btn > .ico:last-child:not(:first-child) { margin-left: .55rem; }

/*
   El brillo diagonal que cruzaba el boton al pasar el raton era
   otro tic de plantilla. Lo sustituye una cortina que sube desde
   el borde inferior: el mismo aviso de "esto se pulsa", pero
   dirigido y silencioso.
*/
.btn::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--btn-cortina, rgba(255, 255, 255, .17));
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.btn:hover::after { transform: translateY(0); }

/* Sin levitacion: el boton se queda donde esta y lo que se mueve
   es la flecha. Un elemento cuadrado que flota se ve despegado. */
.btn:active { transform: translateY(1px); }
.btn:hover .ico:last-child { transform: translateX(5px); }

.btn--primario { background: var(--azul-profundo); --btn-cortina: var(--marca); }

/* Rojo de marca: reservado para la accion principal de cada
   pagina. Si aparece dos veces en la misma pantalla, deja de
   significar "esto es lo importante". */
.btn--marca { background: var(--marca); --btn-cortina: var(--azul-profundo); }

.btn--fantasma {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-fuerte);
  --btn-cortina: var(--azul-profundo);
}
.btn--fantasma:hover {
  border-color: var(--azul-profundo);
  color: #fff;
}

/*
   Sobre fotografia oscura el boton fantasma debe ir en blanco,
   si no queda azul sobre azul y no se ve.
*/
.hero .btn--fantasma,
.vitrina .btn--fantasma,
.inverso .btn--fantasma,
[data-tema="oscuro"] .btn--fantasma {
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
  backdrop-filter: blur(8px);
}
.hero .btn--fantasma:hover,
.vitrina .btn--fantasma:hover,
.inverso .btn--fantasma:hover,
[data-tema="oscuro"] .btn--fantasma:hover {
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .70);
}

.btn--claro { background: var(--blanco); color: var(--azul-profundo); --btn-cortina: var(--marca); }
.btn--claro:hover { color: #fff; }

.btn--oscuro { background: var(--azul-profundo); color: #fff; --btn-cortina: var(--marca); }

.btn--wa { background: var(--whatsapp); color: #04310F; font-weight: 700; --btn-cortina: rgba(4, 49, 15, .14); }

.btn--ia { background: var(--ia); --btn-cortina: var(--azul-profundo); }

.btn--grande { padding: 1.25rem 2.4rem; font-size: .86rem; }
.btn--chico  { padding: .68rem 1.1rem; font-size: .71rem; letter-spacing: .08em; }
.btn--bloque { width: 100%; }

/* Enlace con subrayado que se dibuja: la interaccion mas barata
   y la que menos envejece. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fuente-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
  padding-bottom: .35rem;
  background-image: linear-gradient(var(--marca), var(--marca));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--normal) var(--ease-out), gap var(--normal) var(--ease);
}
.enlace-flecha:hover { gap: .9rem; background-size: 100% 2px; }


/* ---------- 7. TARJETAS ---------- */
.tarjeta {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--normal) var(--ease),
              border-color var(--normal) var(--ease),
              box-shadow var(--normal) var(--ease);
}

/* El filete rojo que se dibuja en el borde superior al pasar el
   raton. Sustituye al halo azul difuso que seguia al cursor. */
.tarjeta::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  z-index: 1;
  width: 100%; height: 2px;
  background: var(--marca);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--normal) var(--ease-out);
}
.tarjeta:hover::before { transform: scaleX(1); }

.tarjeta:hover {
  transform: translateY(-3px);
  border-color: var(--borde-fuerte);
}

.tarjeta h3, .tarjeta h4 { margin-bottom: .55rem; }
.tarjeta p { color: var(--texto-sec); font-size: .95rem; }
a.tarjeta { display: block; }

.tarjeta-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radio-sm);
  margin-bottom: 1.4rem;
  color: var(--acento);
  background: transparent;
  border: 1px solid var(--borde);
  transition: color var(--normal) var(--ease),
              background var(--normal) var(--ease),
              border-color var(--normal) var(--ease);
}
[data-tema="oscuro"] .tarjeta-ico,
.inverso .tarjeta-ico { border-color: rgba(255, 255, 255, .20); }
.tarjeta:hover .tarjeta-ico {
  color: #fff;
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
}
.inverso .tarjeta:hover .tarjeta-ico {
  color: var(--azul-profundo);
  background: #fff;
  border-color: #fff;
}

.tarjeta-ico--wa { color: #0F7B39; background: rgba(37,211,102,.14); border-color: rgba(37,211,102,.26); }
.tarjeta-ico--ia { color: #6A3BD6; background: rgba(139,92,246,.13); border-color: rgba(139,92,246,.26); }

.tarjeta-num {
  position: absolute;
  top: 1.3rem; right: 1.3rem;
  font-family: var(--fuente-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
  color: var(--texto-ter);
  pointer-events: none;
}


/* ---------- 8. BENTO GRID ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.5rem);
}
.bento > * { grid-column: span 6; }

@media (min-width: 720px) {
  .bento > *  { grid-column: span 3; }
  .bento .b-2 { grid-column: span 3; }
  .bento .b-3 { grid-column: span 3; }
  .bento .b-4 { grid-column: span 6; }
  .bento .b-6 { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .bento > *  { grid-column: span 2; }
  .bento .b-2 { grid-column: span 2; }
  .bento .b-3 { grid-column: span 3; }
  .bento .b-4 { grid-column: span 4; }
  .bento .b-6 { grid-column: span 6; }
  .bento .b-alto { grid-row: span 2; }
}


/* ---------- 9. INSIGNIAS Y CHIPS ---------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .75rem;
  font-family: var(--fuente-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--borde-fuerte);
}
[data-tema="oscuro"] .insignia,
.inverso .insignia {
  background: transparent;
  color: rgba(255, 255, 255, .82);
  border-color: rgba(255, 255, 255, .28);
}

.insignia--wa    { background: rgba(37,211,102,.14);  color: #0F7B39; border-color: rgba(37,211,102,.28); }
.insignia--ia    { background: rgba(139,92,246,.14);  color: #6A3BD6; border-color: rgba(139,92,246,.28); }
.insignia--marca { background: rgba(224,27,36,.10);   color: var(--marca); border-color: rgba(224,27,36,.26); }
.insignia--pronto{ background: var(--superficie-2);   color: var(--texto-ter); border-color: var(--borde); }

.inverso .insignia--wa { color: #6FE79E; background: rgba(37,211,102,.18); }
.inverso .insignia--ia { color: #C4AEFF; background: rgba(139,92,246,.22); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1.05rem;
  font-family: var(--fuente-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radio-sm);
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto-sec);
  transition: color var(--rapido) var(--ease),
              background var(--rapido) var(--ease),
              border-color var(--rapido) var(--ease);
}
.chip:hover { border-color: var(--azul-profundo); color: var(--texto); }
.chip.activo, .chip[aria-pressed="true"] {
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
  color: #fff;
}

/* Lista en filas separadas por filete, no vinetas sueltas.
   Se lee como una ficha tecnica, que es lo que es. */
.lista-check { border-top: var(--filete); }
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .85rem 0;
  border-bottom: var(--filete);
  color: var(--texto-sec);
  font-size: .95rem;
}
.lista-check .ico { color: var(--marca); flex-shrink: 0; margin-top: .28rem; }


/* ---------- 10. FOTOGRAFIA ---------- */

/* Marco base de toda imagen destacada */
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-lg);
  background: var(--superficie-2);
  box-shadow: var(--sombra-foto);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }

.foto--sm  { border-radius: var(--radio); }
.foto--xl  { border-radius: var(--radio-xl); }
.foto--redonda { border-radius: 50%; }

/* Proporciones */
.foto--16-9  { aspect-ratio: 16 / 9; }
.foto--4-3   { aspect-ratio: 4 / 3; }
.foto--1-1   { aspect-ratio: 1 / 1; }
.foto--3-4   { aspect-ratio: 3 / 4; }
.foto--panor { aspect-ratio: 21 / 9; }

/* Sin recorte: la imagen completa, para infografías que deben
   leerse enteras. El marco abraza el alto natural de la imagen. */
.foto--natural img { height: auto; object-fit: contain; }

/* Acercamiento suave al pasar el cursor */
.foto--zoom img { transition: transform 1s var(--ease-out); }
.foto--zoom:hover img { transform: scale(1.06); }

/* Velo para poner texto encima */
.foto--velo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 19, 60, .05) 0%, rgba(1, 19, 60, .82) 100%);
  pointer-events: none;
}
.foto--velo-azul::after {
  background: linear-gradient(150deg, rgba(1, 28, 89, .86) 0%, rgba(1, 19, 60, .74) 100%);
}

/* Contenido sobre la fotografia */
.foto__texto {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  color: #fff;
}
.foto__texto h3, .foto__texto h4 { color: #fff; margin-bottom: .35rem; }
.foto__texto p { color: rgba(255, 255, 255, .82); font-size: .9rem; }

/* Marco decorativo con borde de luz */
.foto--marco {
  padding: 8px;
  background: linear-gradient(140deg, rgba(18,107,255,.35), rgba(11,61,145,.10) 60%);
  border-radius: calc(var(--radio-lg) + 8px);
}
.foto--marco > img,
.foto--marco > picture > img { border-radius: var(--radio-lg); }

/* Imagen sin asignar todavia */
.es-vacia { opacity: .55; }


/* ---------- 11. REVELADO AL HACER SCROLL ----------

   Regla de reparto, y no es un capricho:

     la ENTRADA usa `translate` y `scale`
     la INTERACCION (hover, foco, pulsacion) usa `transform`

   Son propiedades distintas y se suman sin pisarse. Cuando ambas
   usaban `transform`, la regla `.revelar.visible { transform: none }`
   le ganaba por cascada a `.celda:hover { transform: translateY(-5px) }`
   y las tarjetas dejaban de levantarse al pasar el raton. Costo un
   rato encontrarlo porque el hover *parecia* funcionar: cambiaba el
   valor, solo que hacia cero.

   En un navegador antiguo que no entienda `translate` el elemento
   aparece sin desplazarse. Se pierde el adorno, no el contenido.
*/
.revelar {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .8s var(--ease-out),
              translate .8s var(--ease-out),
              scale .8s var(--ease-out);
  transition-delay: var(--retraso, 0ms);
}
.revelar.visible { opacity: 1; translate: none; scale: none; }

.revelar--izq { translate: -34px 0; }
.revelar--der { translate: 34px 0; }
.revelar--zoom{ translate: none; scale: .93; }

/*
   En pantallas angostas el desplazamiento lateral se convierte en
   vertical: si no, los bloques que aun no se han revelado sobresalen
   por la derecha y ensanchan el documento.
*/
@media (max-width: 900px) {
  .revelar--izq, .revelar--der { translate: 0 24px; }
}


/* ---------- 12. FORMULARIOS ---------- */
.campo { margin-bottom: 1.15rem; }

.campo label {
  display: block;
  font-size: .82rem;
  font-weight: 650;
  color: var(--texto-sec);
  margin-bottom: .45rem;
}
.campo label .req { color: var(--marca); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="url"],
.campo input[type="number"],
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="datetime-local"],
.campo input[type="search"],
.campo select,
.campo textarea {
  width: 100%;
  padding: .88rem 1.05rem;
  font-size: .95rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: border-color var(--rapido) var(--ease),
              box-shadow var(--rapido) var(--ease),
              background var(--rapido) var(--ease);
}
.campo textarea { min-height: 135px; resize: vertical; line-height: 1.6; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23445E83' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-ter); }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-interactivo);
  box-shadow: 0 0 0 4px rgba(1, 28, 89, .14);
}

.campo-error { border-color: var(--marca) !important; }
.campo .ayuda { display: block; font-size: .78rem; color: var(--texto-ter); margin-top: .35rem; }

.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }

.trampa { position: absolute !important; left: -9999px; opacity: 0; height: 0; }


/* ---------- 13. AVISOS ---------- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .95rem 1.2rem;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: .92rem;
  margin-bottom: 1.2rem;
}
.aviso--ok    { border-color: rgba(37,211,102,.40); background: rgba(37,211,102,.09); color: #0C6B33; }
.aviso--error { border-color: rgba(224,27,36,.36);  background: rgba(224,27,36,.07);  color: #B00E17; }
.aviso--info  { border-color: rgba(18,107,255,.32); background: rgba(18,107,255,.07); color: var(--azul-800); }

[data-tema="oscuro"] .aviso--ok    { color: #7BEBA8; }
[data-tema="oscuro"] .aviso--error { color: #FF9AA0; }
[data-tema="oscuro"] .aviso--info  { color: #86B4FF; }


/* ---------- 14. UTILIDADES ---------- */
.oculto { display: none !important; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar-al-contenido {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 200;
  padding: .8rem 1.3rem;
  background: var(--azul-interactivo);
  color: #fff;
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  font-weight: 650;
  transition: top var(--rapido) var(--ease);
}
.saltar-al-contenido:focus { top: 0; }

.relieve { position: relative; z-index: 1; }

.linea {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--borde) 20%, var(--borde) 80%, transparent);
  margin-block: clamp(2rem, 5vw, 3.5rem);
}