/* =========================================================================
   Remotos Academy · Sistema visual de las páginas de Candidato Remoto
   -------------------------------------------------------------------------
   Paleta oficial heredada del repo (diagnostico-especializaciones/web/estilos.css
   y las plantillas de correo): azul #0400bc, amarillo #ffe400, tinta #11111a,
   rojo #e00035. El distintivo de marca es la BARRA AMARILLA bajo el bloque azul.

   Tres decisiones que sostienen todo lo demás:
   1. El fondo no es blanco, es hueso. El blanco se reserva para las fichas.
   2. Las etiquetas, los números y los datos van en monoespaciada versalita.
      Los titulares van en sans pesada y muy apretada. Ese contraste es la voz.
   3. El amarillo nunca es decorativo: o es barra estructural, o es subrayado
      de marcador sobre una palabra que importa. Nunca degradados.
   ========================================================================= */

:root {
  --azul:          #0400bc;
  --azul-hondo:    #02006e;
  --azul-claro:    #3a37d6;
  --azul-niebla:   #ecebff;
  --amarillo:      #ffe400;
  --amarillo-hondo:#e6ce00;
  --amarillo-pal:  #fffbea;
  --tinta:         #11111a;
  --tinta-media:   #3a3a44;
  --gris:          #5b5b6b;
  --gris-linea:    #d9d7cf;
  --hueso:         #f2f1ec;
  --hueso-hondo:   #e4e2da;
  --blanco:        #ffffff;
  --rojo:          #e00035;
  --rojo-pal:      #fdf5f5;
  --verde:         #0a7a4a;
  --verde-pal:     #e9f6ef;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Inter", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;

  --ancho: 1180px;
  --ancho-texto: 68ch;
  --radio: 4px;
  --borde: 2px solid var(--tinta);
  --dura-azul: 7px 7px 0 var(--azul);
  --dura-tinta: 7px 7px 0 var(--tinta);
  --dura-amarilla: 7px 7px 0 var(--amarillo);
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` debe ganar siempre: varias utilidades de este archivo declaran
   display y, sin esto, un elemento oculto por JavaScript seguiría visible. */
[hidden] { display: none !important; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

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

/* ------------------------------------------------------------ TIPOGRAFÍA */

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.03;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.35rem, 6.6vw, 4.4rem);
  line-height: .99;
  letter-spacing: -.038em;
}
.t1 { font-size: clamp(1.95rem, 4.6vw, 3.15rem); line-height: 1.05; }
.t2 { font-size: clamp(1.45rem, 3vw, 2.1rem);  line-height: 1.12; }
.t3 { font-size: clamp(1.12rem, 2vw, 1.35rem); line-height: 1.25; letter-spacing: -.016em; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.entrada {
  font-size: clamp(1.06rem, 2.1vw, 1.32rem);
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: 62ch;
}
.menudo { font-size: .875rem; line-height: 1.5; color: var(--gris); }
.medida { max-width: var(--ancho-texto); }

strong, b { font-weight: 700; }

/* Marcador amarillo: el gesto de énfasis de la marca. */
mark, .marcado {
  background: linear-gradient(to bottom, transparent 8%, var(--amarillo) 8%, var(--amarillo) 92%, transparent 92%);
  color: inherit;
  padding: 0 .12em;
  border-radius: 0;
}
.sobre-azul mark, .sobre-azul .marcado { color: var(--tinta); }

/* Etiqueta monoespaciada: eyebrows, metadatos, numeración. */
.eti {
  display: inline-block;
  font-family: var(--mono);
  font-size: .70rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--azul);
}
.eti--amarilla { color: var(--tinta); background: var(--amarillo); padding: .3rem .55rem; }
/* #e00035 en 11px sobre hueso se queda en 4.4:1. Este tono llega a AA. */
.eti--roja     { color: #b8002b; }
.eti--clara    { color: var(--amarillo); }
.eti--linea    { border: 1px solid currentColor; padding: .28rem .55rem; }

/* Numeral grande de sección */
.numeral {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--azul);
}

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--azul-claro); }

/* Enlaces de texto sobre fondo azul, NUNCA los botones: un `.sobre-azul a`
   sin acotar pinta de amarillo el texto de los CTA amarillos y los deja
   ilegibles (amarillo sobre amarillo). */
.sobre-azul a:not(.boton),
.seccion--azul a:not(.boton) { color: var(--amarillo); }

/* -------------------------------------------------------------- ESQUELETO */

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.envoltura--estrecha { max-width: 820px; }

.seccion { padding-block: clamp(3.4rem, 8vw, 6.4rem); position: relative; }
.seccion--ajustada { padding-block: clamp(2.4rem, 5vw, 4rem); }
.seccion--hueso  { background: var(--hueso); }
.seccion--blanca { background: var(--blanco); }
.seccion--niebla { background: var(--azul-niebla); }

.sobre-azul, .seccion--azul {
  background: var(--azul);
  color: var(--blanco);
}
.seccion--azul .entrada { color: rgba(255,255,255,.82); }
.seccion--azul .eti     { color: var(--amarillo); }
.seccion--azul .numeral { color: var(--amarillo); }
.seccion--azul .menudo  { color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------------------
   SUPERFICIES CLARAS SOBRE AZUL

   Un bloque azul pinta de blanco todo lo que hay dentro. En cuanto metes ahí
   una tarjeta de fondo claro (ficha, formulario, oferta, columna de contraste)
   su contenido queda blanco sobre blanco, o amarillo sobre amarillo. Estas
   reglas devuelven a esas superficies los colores del tema claro.

   Las tarjetas translúcidas que SÍ van en blanco declaran `color:#fff` en
   línea, y un estilo en línea gana sobre cualquiera de estas reglas.
   --------------------------------------------------------------------------- */

.seccion--azul .eti--amarilla,
.sobre-azul    .eti--amarilla { color: var(--tinta); }

:is(.seccion--azul, .sobre-azul) :is(.ficha, .tarjeta-form, .oferta, .contraste__col) {
  color: var(--tinta);
}
:is(.seccion--azul, .sobre-azul) :is(.ficha, .tarjeta-form, .oferta, .contraste__col) :is(.eti, .numeral) {
  color: var(--azul);
}
:is(.seccion--azul, .sobre-azul) :is(.ficha, .tarjeta-form, .oferta, .contraste__col) .menudo {
  color: var(--gris);
}
:is(.seccion--azul, .sobre-azul) :is(.ficha, .tarjeta-form, .oferta, .contraste__col) .entrada,
:is(.seccion--azul, .sobre-azul) :is(.ficha, .tarjeta-form, .oferta, .contraste__col) .descargo {
  color: var(--tinta-media);
}
:is(.seccion--azul, .sobre-azul) :is(.ficha, .tarjeta-form, .oferta, .contraste__col) a:not(.boton) {
  color: var(--azul);
}
:is(.seccion--azul, .sobre-azul) :is(.ficha, .tarjeta-form, .oferta, .contraste__col) .confianza {
  color: var(--gris);
}

/* `--clara` es la marca explícita de «esto va sobre azul»: gana siempre. */
.seccion--azul .eti--clara,
.sobre-azul    .eti--clara,
:is(.seccion--azul, .sobre-azul) :is(.ficha, .tarjeta-form) .eti--clara { color: var(--amarillo); }

/* Trama de puntos sobre los bloques azules: da textura sin ruido. */
.trama-puntos {
  position: relative;
  isolation: isolate;
}
.trama-puntos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Barra amarilla: el distintivo. Va bajo todo bloque azul. */
.barra-marca { height: 7px; background: var(--amarillo); }

/* Separador de franjas diagonales */
.franja-diagonal {
  height: 16px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--amarillo) 0 10px,
    var(--tinta) 10px 20px
  );
}

.regla { height: 1px; background: var(--gris-linea); border: 0; margin: 0; }

/* Cabecera de sección con numeral a la izquierda */
.cabeza-seccion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.1rem;
  align-items: start;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.cabeza-seccion .numeral { padding-top: .12em; }
.cabeza-seccion > div { min-width: 0; }
.cabeza-seccion h2 { margin-bottom: .35em; }
@media (max-width: 560px) {
  .cabeza-seccion { grid-template-columns: 1fr; gap: .5rem; }
}

/* --------------------------------------------------------------- CABECERA */

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--amarillo);
  color: var(--tinta);
  font-weight: 700;
  padding: .75rem 1.1rem;
}
.saltar:focus { left: .5rem; top: .5rem; }

.aviso-barra {
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: .6rem 1rem;
}
.aviso-barra b { color: var(--amarillo); font-weight: 600; }

.cabecera {
  background: var(--azul);
  color: var(--blanco);
  border-bottom: 7px solid var(--amarillo);
}
.cabecera .envoltura {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
  padding-block: .7rem;
}
/* El isotipo hace de «R» del wordmark, así que por debajo de ~30px el logo
   se lee «EMOTOS ACADEMY». No reducir esta altura. */
.cabecera img { height: 32px; width: auto; }
.cabecera .logotipo-texto {
  font-weight: 800;
  letter-spacing: .06em;
  font-size: .95rem;
}
.cabecera nav { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
.cabecera .dato-cabecera {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
@media (max-width: 720px) { .cabecera .dato-cabecera { display: none; } }

/* ----------------------------------------------------------------- BOTONES */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 56px;
  padding: .95rem 1.7rem;
  font-family: var(--sans);
  font-size: 1.03rem;
  font-weight: 800;
  letter-spacing: -.012em;
  text-align: center;
  text-decoration: none;
  border: var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.boton--principal {
  background: var(--amarillo);
  color: var(--tinta);
  box-shadow: var(--dura-tinta);
}
.boton--principal:hover { background: #ffea3d; color: var(--tinta); transform: translate(2px, 2px); box-shadow: 5px 5px 0 var(--tinta); }
.boton--principal:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--tinta); }

.boton--azul {
  background: var(--azul);
  color: var(--blanco);
  border-color: var(--tinta);
  box-shadow: var(--dura-tinta);
}
.boton--azul:hover { background: var(--azul-claro); color: var(--blanco); transform: translate(2px,2px); box-shadow: 5px 5px 0 var(--tinta); }
.boton--azul:active { transform: translate(7px,7px); box-shadow: 0 0 0 var(--tinta); }

.boton--linea {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
  box-shadow: none;
  font-weight: 700;
}
.boton--linea:hover { background: var(--tinta); color: var(--blanco); }
.sobre-azul .boton--linea { color: var(--blanco); border-color: rgba(255,255,255,.55); }
.sobre-azul .boton--linea:hover { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }

.boton--ancho { width: 100%; }
.boton[aria-disabled="true"], .boton:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 2px;
}
.sobre-azul :where(a, button, input, summary):focus-visible,
.seccion--azul :where(a, button, input, summary):focus-visible {
  outline-color: var(--amarillo);
}

/* Línea de confianza bajo un CTA */
.confianza {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: .9rem;
}
.sobre-azul .confianza, .seccion--azul .confianza { color: rgba(255,255,255,.72); }

/* ----------------------------------------------------------------- FICHAS */

.ficha {
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 2.4vw, 1.7rem);
}
.ficha--dura   { box-shadow: var(--dura-azul); }
.ficha--tinta  { box-shadow: var(--dura-tinta); }
.ficha--suave  { border: 1px solid var(--gris-linea); box-shadow: 0 1px 2px rgba(17,17,26,.05); }
.ficha--amarilla { background: var(--amarillo-pal); border-color: var(--tinta); }
.ficha h3 { margin-bottom: .45em; }
.ficha > :last-child { margin-bottom: 0; }

/* El reinicio de color de las fichas sobre fondo azul vive junto al resto de
   reglas de «superficies claras sobre azul», más arriba en este archivo. */

/* Hero de dos columnas: copy a la izquierda, formulario a la derecha. */
.hero-doble {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: start;
}
@media (max-width: 920px) { .hero-doble { grid-template-columns: 1fr; } }

.dos {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.dos--centrada { align-items: center; }

.rejilla { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* ---------------------------------------------------------------- LISTAS */

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.lista li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.5;
}
.lista li::before {
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--mono);
  font-weight: 700;
}

/* Palomita dibujada, no emoji */
.lista--si li::before {
  content: "";
  top: .32em;
  width: 15px; height: 8px;
  border-left: 3px solid var(--azul);
  border-bottom: 3px solid var(--azul);
  transform: rotate(-45deg);
}
.sobre-azul .lista--si li::before, .seccion--azul .lista--si li::before { border-color: var(--amarillo); }

.lista--no li::before { content: "×"; color: var(--rojo); font-size: 1.35em; top: -.12em; }
.lista--punto li::before { content: ""; top: .62em; width: 9px; height: 9px; background: var(--amarillo); border: 2px solid var(--tinta); }
.lista--flecha li::before { content: "→"; color: var(--azul); }

/* Lista numerada con numeral mono */
.lista-num { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; gap: 1rem; }
.lista-num > li {
  counter-increment: n;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 .9rem;
  align-items: start;
}
.lista-num > li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  color: var(--azul);
  padding-top: .18em;
  border-top: 3px solid var(--amarillo);
}
.seccion--azul .lista-num > li::before { color: var(--amarillo); border-top-color: var(--amarillo); }

/* --------------------------------------------------------------- LA RUTA */

.ruta { display: grid; gap: 0; counter-reset: paso; }
.ruta__paso {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-top: 1px solid var(--gris-linea);
  align-items: start;
}
.ruta__paso:last-child { border-bottom: 1px solid var(--gris-linea); }
.ruta__num {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--azul);
  position: relative;
}
.ruta__num::after {
  content: "";
  display: block;
  width: 26px;
  height: 7px;
  background: var(--amarillo);
  margin-top: .6rem;
}
.ruta__paso h3 { margin-bottom: .3em; }
.ruta__res {
  display: inline-block;
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--amarillo);
  padding: .3rem .6rem;
}
.seccion--azul .ruta__paso { border-color: rgba(255,255,255,.22); }
.seccion--azul .ruta__num { color: var(--amarillo); }
@media (max-width: 560px) {
  .ruta__paso { grid-template-columns: 1fr; gap: .6rem; }
  .ruta__num::after { margin-top: .35rem; }
}

/* ---------------------------------------------------- ANTES / DESPUÉS */

.contraste { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.contraste__col { border: var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--blanco); }
.contraste__cab { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.contraste__cab--antes   { background: var(--hueso-hondo); color: var(--tinta-media); border-bottom: 2px solid var(--tinta); }
.contraste__cab--despues { background: var(--amarillo); color: var(--tinta); border-bottom: 2px solid var(--tinta); }
.contraste__cuerpo { padding: 1.2rem; }
.contraste__col--despues { box-shadow: var(--dura-azul); }

/* -------------------------------------------------------------- FORMULARIO */

.tarjeta-form {
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--dura-tinta);
  overflow: hidden;
}
.tarjeta-form__cab {
  background: var(--amarillo);
  border-bottom: 2px solid var(--tinta);
  padding: .95rem 1.4rem;
}
.tarjeta-form__cab p { margin: 0; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: var(--tinta); }
.tarjeta-form__cuerpo { padding: clamp(1.2rem, 2.5vw, 1.7rem); }

.campo { margin-bottom: 1.05rem; }
.campo label {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: .4rem;
}
.campo .opt { color: var(--gris); font-weight: 400; letter-spacing: .06em; }

.campo input,
.campo select {
  width: 100%;
  min-height: 52px;
  padding: .8rem .9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--hueso);
  border: 2px solid var(--gris-linea);
  border-radius: var(--radio);
}
.campo input::placeholder { color: #9a99a3; }
.campo input:focus, .campo select:focus { background: var(--blanco); border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(4,0,188,.16); }
.campo input[aria-invalid="true"] { border-color: var(--rojo); background: var(--rojo-pal); }

.campo-tel { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }
@media (max-width: 400px) { .campo-tel { grid-template-columns: 1fr; } }

.error-campo {
  display: none;
  margin-top: .35rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--rojo);
}
.error-campo.visible { display: block; }

.consenti { display: grid; gap: .7rem; margin: 1.2rem 0; }
.consenti label {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .65rem;
  align-items: start;
  font-size: .89rem;
  line-height: 1.45;
  color: var(--tinta-media);
  cursor: pointer;
}
.consenti input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem;
  margin: .1rem 0 0;
  accent-color: var(--azul);
  cursor: pointer;
}

/* Botón que se lee como enlace: para acciones secundarias que cambian la
   página sin navegar (volver del opt-in al formulario completo). */
.enlace-boton {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--azul);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.enlace-boton:hover { color: var(--azul-claro); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso-form {
  display: none;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border: 2px solid;
  border-radius: var(--radio);
  font-size: .92rem;
  font-weight: 600;
}
.aviso-form.visible { display: block; }
.aviso-form--error { border-color: var(--rojo); background: var(--rojo-pal); color: #96001f; }
.aviso-form--ok    { border-color: var(--verde); background: var(--verde-pal); color: #05512f; }
.aviso-form--nota  { border-color: var(--amarillo-hondo); background: var(--amarillo-pal); color: #6b5b00; }

/* ------------------------------------------------------------- ACORDEONES */

.acordeon { border-top: 1px solid var(--gris-linea); }
.acordeon:last-of-type { border-bottom: 1px solid var(--gris-linea); }
.acordeon__boton {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem .2rem;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: 1.03rem;
  letter-spacing: -.015em;
  text-align: left;
  color: var(--tinta);
  cursor: pointer;
}
.acordeon__boton:hover { color: var(--azul); }
.acordeon__boton .pref {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--azul);
  letter-spacing: .1em;
  margin-right: .7rem;
}
.acordeon__signo {
  position: relative;
  width: 26px; height: 26px;
  flex: none;
  border: 2px solid var(--tinta);
  border-radius: 50%;
}
.acordeon__signo::before,
.acordeon__signo::after {
  content: "";
  position: absolute;
  inset: 50% 22% auto 22%;
  height: 2px;
  background: var(--tinta);
  transform: translateY(-50%);
  transition: transform .18s ease, opacity .18s ease;
}
.acordeon__signo::after { transform: translateY(-50%) rotate(90deg); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo { background: var(--amarillo); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.acordeon__panel { padding: 0 .2rem 1.35rem; max-width: var(--ancho-texto); }
.acordeon__panel[hidden] { display: none; }

/* ------------------------------------------------------------ ENTREGABLES */

/* Rejilla con líneas dibujadas en los propios ítems, no con `gap` sobre un
   fondo gris: 13 recursos no llenan la última fila y el hueco sobrante se
   vería como un bloque gris suelto. */
.kit {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  border-top: 1px solid var(--gris-linea);
  border-left: 1px solid var(--gris-linea);
}
.kit__item {
  background: var(--blanco);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-right: 1px solid var(--gris-linea);
  border-bottom: 1px solid var(--gris-linea);
}
.kit__item:hover { background: var(--amarillo-pal); }
.kit__n { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--azul); }
.kit__item h3 { font-size: 1.02rem; margin: 0; letter-spacing: -.018em; }
.kit__item p { font-size: .91rem; color: var(--tinta-media); margin: 0; }

/* --------------------------------------------------------------- OFERTA */

.oferta {
  background: var(--blanco);
  border: 3px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: 12px 12px 0 var(--azul);
  overflow: hidden;
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 700px) { .oferta { box-shadow: 7px 7px 0 var(--azul); } }
.oferta__cab {
  background: var(--azul);
  color: var(--blanco);
  padding: 1.6rem 1.5rem 1.3rem;
  border-bottom: 7px solid var(--amarillo);
  text-align: center;
}
.oferta__cab h3 { color: var(--blanco); margin: .3rem 0 .2rem; font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
.oferta__cab p { margin: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--amarillo); }
.oferta__cuerpo { padding: clamp(1.4rem, 3vw, 2.2rem); }
.precio { text-align: center; margin-bottom: 1.5rem; }
.precio__cifra {
  font-family: var(--mono);
  font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--azul);
  display: block;
}
.precio__nota { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-top: .5rem; }

.sellos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 1px; background: var(--gris-linea); border: 1px solid var(--gris-linea); margin: 1.5rem 0; }
.sellos div { background: var(--blanco); padding: .85rem .7rem; text-align: center; }
.sellos b { display: block; font-family: var(--mono); font-size: 1.02rem; color: var(--azul); letter-spacing: -.02em; }
.sellos span { font-size: .76rem; color: var(--gris); letter-spacing: .04em; }

/* ----------------------------------------------------------------- TABLA */

.tabla-comp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla-comp caption { text-align: left; font-size: .85rem; color: var(--gris); padding-bottom: .8rem; }
.tabla-comp th, .tabla-comp td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--gris-linea); vertical-align: top; }
.tabla-comp thead th { background: var(--tinta); color: var(--blanco); font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; border-bottom: 0; }
.tabla-comp thead th:nth-child(2) { background: var(--azul); }
.tabla-comp tbody th { font-weight: 600; }
.tabla-comp .si  { color: var(--verde); font-weight: 700; }
.tabla-comp .no  { color: var(--gris); }
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  .tabla-comp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla-comp tbody tr { display: block; border: 2px solid var(--tinta); background: var(--blanco); margin-bottom: 1rem; }
  .tabla-comp tbody th { display: block; background: var(--tinta); color: var(--blanco); border: 0; }
  .tabla-comp tbody td { display: grid; grid-template-columns: 1fr auto; gap: 1rem; border-bottom: 1px solid var(--gris-linea); }
  .tabla-comp tbody td::before { content: attr(data-col); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
  .tabla-comp tbody tr td:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------ CTA MÓVIL */

.cta-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: .75rem;
  align-items: center;
  padding: .7rem clamp(.8rem, 3vw, 1.2rem);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--tinta);
  border-top: 4px solid var(--amarillo);
}
.cta-movil__dato { flex: 1; min-width: 0; color: var(--blanco); font-family: var(--mono); font-size: .7rem; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.cta-movil__dato b { color: var(--amarillo); display: block; font-size: .82rem; }
.cta-movil .boton { min-height: 48px; padding: .6rem 1rem; font-size: .93rem; box-shadow: none; flex: none; }
body.con-cta-movil { padding-bottom: 84px; }
@media (max-width: 860px) { .cta-movil.activo { display: flex; } }

/* ------------------------------------------------- BURBUJA DE WHATSAPP */
/* Contacto directo con el equipo (pago en bolívares u otros métodos).
   Nace oculta en el HTML; paginas.js la muestra solo si hay número o
   enlace configurado en config.js. */

.burbuja-wa {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.4rem);
  bottom: clamp(.9rem, 3vw, 1.4rem);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25d366;
  border: 3px solid var(--tinta);
  box-shadow: var(--dura-tinta);
  transition: transform .15s ease, box-shadow .15s ease;
}
.burbuja-wa:hover  { transform: translate(2px,2px); box-shadow: 5px 5px 0 var(--tinta); }
.burbuja-wa:active { transform: translate(7px,7px); box-shadow: 0 0 0 var(--tinta); }
.burbuja-wa svg { width: 34px; height: 34px; fill: var(--blanco); }

/* En pantallas con la barra fija de CTA, la burbuja sube para no taparla. */
@media (max-width: 860px) {
  body.con-cta-movil .burbuja-wa {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) { .burbuja-wa { transition: none; } }
@media print { .burbuja-wa { display: none !important; } }

/* ---------------------------------------------------------------- FOOTER */

.pie { background: var(--tinta); color: rgba(255,255,255,.72); padding-block: clamp(2.5rem, 5vw, 3.6rem); font-size: .9rem; }
.pie a { color: var(--blanco); }
.pie img { height: 40px; width: auto; margin-bottom: 1.2rem; }
.pie__cols { display: grid; gap: 2rem; grid-template-columns: minmax(240px, 1.3fr) 1fr; align-items: start; }
@media (max-width: 700px) { .pie__cols { grid-template-columns: 1fr; } }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: 0; margin: 0 0 1.4rem; list-style: none; font-family: var(--mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.pie__legal { border-top: 1px solid rgba(255,255,255,.2); margin-top: 2rem; padding-top: 1.4rem; font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------- UTILIDADES */

.centro { text-align: center; }
.centro .entrada, .centro .medida { margin-inline: auto; }
.apilar { display: grid; gap: 1.1rem; justify-items: start; }
.centro .apilar { justify-items: center; }
.fila { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.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; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3rem; }

/* Chips de metadatos del evento */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.chips li {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .42rem .7rem;
  border: 1px solid currentColor;
  color: var(--tinta);
}
.sobre-azul .chips li, .seccion--azul .chips li { color: var(--blanco); }
.chips li.destacado { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); }

/* Nota legal / descargo */
.descargo {
  border-left: 4px solid var(--amarillo);
  padding: .9rem 0 .9rem 1.1rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--tinta-media);
}
.seccion--azul .descargo { color: rgba(255,255,255,.78); }

/* Cita grande */
.cita {
  font-size: clamp(1.55rem, 4.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.13;
  margin: 0;
  text-wrap: balance;
}
.cita__firma { display: block; margin-top: 1.4rem; font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--amarillo); }

/* Dato pendiente de rellenar (solo visible con ajustes.avisarPendientes) */
.ra-pendiente {
  background: repeating-linear-gradient(-45deg, #ffe9ec 0 6px, #ffdbe1 6px 12px);
  outline: 1px dashed var(--rojo);
  outline-offset: 1px;
}

/* Aparición al hacer scroll */
.aparece { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aparece { opacity: 1; transform: none; } }

@media print {
  .cta-movil, .aviso-barra { display: none !important; }
  body { background: #fff; }
}