/* ============================================
   ARDI - ESTILOS PRINCIPALES
   Academia de Idiomas
   ============================================ */

/* La tipografía YA NO se pide desde aquí con @import: eso obligaba al
   navegador a bajar primero styles.css, descubrir el @import y salir a por la
   fuente después —dos viajes en fila, con la página en blanco mientras tanto—.
   Ahora cada página la pide en su <head>, en paralelo con este archivo, y con
   preconnect a fonts.gstatic.com, que es de donde salen los .woff2. */

:root {
  /* Alto real de la cabecera: 0.75rem·2 de padding + 52px de logo.
     Estaba copiado a mano en dos sitios y con el valor equivocado. */
  --header-h: 76px;

  /* Marca en triplete RGB: hace falta para componer rgba() desde variables.
     Son los de ARDI: la tinta #14213D y el azul #1F6FBF. */
  --navy-rgb: 20, 33, 61;
  --gold-rgb: 31, 111, 191;

  /*  ── Los cuatro colores del logotipo ──────────────────────
      Existían en la plataforma (plataforma/styles_examen.css) y no en el
      sitio público, así que aquí todo se pintaba con el azul y sus tonos: la
      marca tiene cuatro colores y en la web pública se veía uno. Van también
      en triplete, que es lo que hace falta para componer un rgba() desde una
      variable, y con su versión OSCURA, la única que se lee sobre blanco:
      el naranja y el verde del logotipo dan 2,0:1 y 2,7:1 sobre papel, así
      que como color de TEXTO no valen — valen como relleno.  */
  --ardi-azul:    #2F8FE3;  --ardi-azul-rgb:    47, 143, 227;  --ardi-azul-d:    #1F6FBF;
  --ardi-naranja: #F7A21B;  --ardi-naranja-rgb: 247, 162, 27;  --ardi-naranja-d: #9A5E00;
  --ardi-verde:   #16A34A;  --ardi-verde-rgb:   22, 163, 74;   --ardi-verde-d:   #0F7A37;
  --ardi-rojo:    #E1252F;  --ardi-rojo-rgb:    225, 37, 47;   --ardi-rojo-d:    #B3141D;

  /*  UN ancho de contenido para todo el sitio. Estaba escrito a mano en cada
      página —1100 en Capacítate, 1140 en Empresas, 1200 en Cursos— y se
      notaba al navegar: el contenido cambia de anchura al cambiar de página.  */
  --ancho: 1240px;
  --gold-light-rgb: 47, 143, 227;   /* el azul vivo, para tintes sobre el marino */

  /* Cristal de la cabecera */
  --glass-bg:       rgba(255, 255, 255, 0.72);
  --glass-bg-solid: rgba(255, 255, 255, 0.97);
  --glass-line:     rgba(var(--gold-rgb), 0.22);
  --glass-shadow:   0 4px 24px rgba(var(--navy-rgb), 0.10);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:         0.18s var(--ease-out);
  /* ── La marca ARDI ────────────────────────────────────────
     El azul del logotipo, en las dos versiones que hacen falta: una que se
     lee sobre BLANCO (5.1:1) y otra que se lee sobre el azul del héroe
     (8.9:1). Un solo tono no puede hacer las dos cosas: el que contrasta
     con el blanco desaparece sobre el marino y al revés.
     Los nombres siguen siendo --gold* porque están citados en toda la hoja
     y en las clases; lo que cambió es el color. */
  --navy:       #14213D;   /* la tinta del logotipo */
  --navy-light: #26406F;
  --gold:       #1F6FBF;   /* el azul, para secciones claras — 5.1:1 sobre blanco */
  --gold-light: #2F8FE3;   /* el azul vivo del logotipo, para el hover */
  /* El dorado de --gold (L* 70) se queda para las secciones claras, donde
     apenas llega a 2.3:1 sobre blanco y no puede subir más. Sobre el azul del
     héroe pasa lo contrario: ahí se puede —y se debe— usar uno con luz.
     #E9C36C da 7.5:1 sobre el azul, tono 87°. */
  --gold-claro-oscuro: #8FC7F5;   /* 8.9:1 sobre el azul del héroe */
  --cream:      #EEF5FC;   /* la superficie clara de la marca, azulada */
  --red:        #CF1F2B;   /* el rojo del logotipo */
  --white:      #ffffff;
  --gray-light: #f0f0f0;
  --gray-mid:   #888;
  --text-dark:  #14213D;
  --shadow:     0 8px 32px rgba(20, 33, 61, 0.12);
  --shadow-lg:  0 16px 56px rgba(20, 33, 61, 0.18);
  --radius:     12px;
  --radius-lg:  20px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Añade esto a tu styles.css para optimizar imágenes */
img {
  max-width: 100%;
  height: auto;
}

/* Aquí había un `content-visibility: auto` sobre los logotipos.
   En una imagen sin `contain-intrinsic-size` eso es contraproducente: mientras
   está fuera de la pantalla el navegador la maqueta como si midiera cero, y al
   entrar salta a su tamaño real desplazando lo que tiene al lado. Era lo que
   dejaba el escudo de «Acerca de nosotros» descolocado a la izquierda.
   Además no ahorraba nada: son cuatro imágenes pequeñas, y dos de ellas
   (.header-logo, .header-logo-jva) están visibles desde el primer píxel. */

/* Añade a styles.css */
:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--navy);
  color: white;
  padding: 8px;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Sin esto, cada clic en #cursos o #contacto deja el título de la sección
     escondido debajo de la cabecera pegajosa. */
  scroll-padding-top: calc(var(--header-h) + 8px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* evita el reescalado automático de texto en móvil */
  text-size-adjust: 100%;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--white);
  color: var(--text-dark);
  line-height: 1.7;
  /* SIN `overflow-x: hidden`. Estuvo aquí y no arreglaba nada: escondía la
     barra y dejaba el contenido cortado por la derecha, que es exactamente el
     fallo que no se ve en el portátil y sí en un móvil estrecho. Si algo se
     sale, ahora se nota y se arregla donde se sale. Se comprobó que nada lo
     necesitaba: ni un `100vw` ni un margen negativo de página en todo el CSS. */
  width: 100%;
  max-width: 100%;
}

/* Ningún medio o tabla debe desbordar el ancho del dispositivo (rompía el layout al hacer zoom) */
img, video, iframe, canvas, svg, table { max-width: 100%; }
*, *::before, *::after { min-width: 0; }

/* ============================================
   WELCOME SCREEN
   ============================================ */

#welcome-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 50%, #0d2d5e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* 0,55 s de desvanecido. Sumados a los 1,45 s que la deja js/main.js, la
     bienvenida dura DOS segundos de punta a punta. Los dos números van
     juntos: cambiar uno sin el otro alarga o acorta la presentación. */
  transition: opacity .55s cubic-bezier(.4,0,.2,1), visibility .55s;
  overflow: hidden;
}

#welcome-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232F8FE3' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.welcome-flag-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  display: flex;
}
.welcome-flag-stripe span {
  flex: 1;
}
/*  Eran los tres de la bandera de Francia, que es la identidad anterior.
    Ahora son los CUATRO del logotipo, en el orden de las letras — la misma
    franja que llevan la plataforma, el aula, el afiche y el emergente.  */
.welcome-flag-stripe span:nth-child(1) { background: #2F8FE3; }
.welcome-flag-stripe span:nth-child(2) { background: #F7A21B; }
.welcome-flag-stripe span:nth-child(3) { background: #16A34A; }
.welcome-flag-stripe span:nth-child(4) { background: #E1252F; }

.welcome-escudo {
  /*  Por ANCHO, no por alto: el conjunto con lema es apaisado (2,4:1) y
      dimensionarlo por altura lo deja diminuto. Y con el lema dentro, la
      pantalla ya no necesita el nombre escrito debajo. */
  width: clamp(280px, 62vw, 760px);
  height: auto;
  margin-bottom: 0;
  animation: fadeInDown .55s cubic-bezier(.2,.7,.3,1) both;
  filter: drop-shadow(0 6px 28px rgba(var(--gold-rgb),.35));
}


/*  La bisagra entre el logotipo y el nombre: una regla corta con los cuatro
    colores. Sin ella las dos piezas flotan sueltas y el nombre parece un pie
    de foto; con ella se leen como un bloque.  */
/*  La regla de colores se quitó: entre el logotipo —que ya lleva los cuatro
    colores en las letras— y el nombre, una tira más era un tercer elemento
    compitiendo en dos segundos de pantalla. El aire basta para separarlos.  */
.welcome-regla { display: none; }

/*  El nombre, con peso de titular. Estaba a 0,9 rem en versalitas azul
    claro: al lado de un logotipo de 460 px eso es una nota al pie, no el
    nombre de la academia. En blanco —el color de más peso sobre el marino—,
    en la serif de la marca, y con «Roi Duclon» en el azul con luz para que
    el ojo tenga dónde caer.  */
.welcome-sub {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 4.6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: none;
  color: var(--white);
  text-align: center;
  /*  Ancho suficiente para que «Academia de Idiomas Roi Duclon» quepa en una
      línea en pantalla grande. A 22ch partía por «Roi / Duclon», que es el
      peor sitio: separa el nombre propio de sí mismo. Y `text-wrap: balance`
      para que, cuando en un móvil tenga que partir, reparta las dos líneas
      en vez de dejar una huérfana.  */
  max-width: 30ch;
  padding-inline: 1rem;
  margin-top: clamp(.9rem, 2.4vw, 1.6rem);
  text-wrap: balance;
  animation: fadeInUp .55s .26s cubic-bezier(.2,.7,.3,1) both;
}
.welcome-sub em { font-style: normal; color: var(--gold-claro-oscuro); }

/* Dura poco: quien llega con el movimiento reducido activado no debería ver
   nada moverse, y tampoco esperar. */
@media (prefers-reduced-motion: reduce) {
  .welcome-escudo, .welcome-nombre, .welcome-sub { animation: none; }
  #welcome-screen { transition: none; }
}

.welcome-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   HEADER / NAV
   ============================================
   Marino, como en la captura: el logotipo claro (su lema es blanco), el
   nombre de la academia al lado tras una raya, «Iniciar sesión» como
   píldora azul y el resto de la barra en blanco, con la de la página
   subrayada.  */

:root { --cab-bg: #0B2554; }

header {
  background: var(--cab-bg);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.55rem 0;
  box-shadow: 0 2px 18px rgba(4, 12, 30, 0.28);
}

.header-inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-logos { display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.2rem); min-width: 0; }
.header-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.header-logo-link::after { display: none !important; }
.header-logo-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
.header-logo { height: clamp(46px, 5.2vw, 62px); width: auto; }

/*  El nombre al lado del logotipo. Se esconde antes que la barra: en un
    teléfono el logotipo ya lo dice.  */
.ar-marca-txt {
  padding-left: clamp(.7rem, 1.6vw, 1.2rem);
  border-left: 1.5px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(.72rem, 1.1vw, .95rem);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 1380px) { .ar-marca-txt { display: none; } }

nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

nav a {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.93rem;
  color: #fff;
  text-decoration: none;
  padding: 0.5rem clamp(0.5rem, 0.9vw, 0.95rem);
  border-radius: 8px;
  white-space: nowrap;
  position: relative;
  transition: color var(--t-fast), background var(--t-fast);
}

/*  El subrayado: el de la página actual y el del ratón. Con transform, no
    con width, para que no recalcule la maquetación en cada fotograma.  */
nav a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.95rem;
  right: 0.95rem;
  height: 2.5px;
  background: var(--ardi-azul);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease-out);
}
nav a:hover, nav a:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
nav a:hover::after, nav a:focus-visible::after,
nav a[aria-current="page"]::after { transform: scaleX(1); }

/*  «Iniciar sesión»: la única píldora de la barra.  */
.nav-entrar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-right: .6rem;
  padding: .62rem 1.25rem !important;
  border-radius: 999px;
  background: var(--ardi-azul);
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(var(--ardi-azul-rgb), .35);
}
.nav-entrar .ico { width: 19px; height: 19px; flex: none; }
.nav-entrar::after { display: none !important; }
.nav-entrar:hover, .nav-entrar:focus-visible { background: #1F7BD0; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .nav-entrar:hover { transform: none; } }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  /* El gap de 5px NO se toca: las transformadas de .active asumen 5+2. */
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  transition: background var(--t-fast);
}
.hamburger:hover,
.hamburger:focus-visible { background: rgba(255, 255, 255, 0.1); }

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   HERO SECTION
   ============================================ */



/*  Las pastillas del héroe. Eran cuatro cajas idénticas —blanco al 8 % con
    borde al 15 %—: cuatro cosas iguales no informan de nada y dejan el bloque
    apagado. Cada una toma un color del logotipo, en su versión CON LUZ, que
    es la única que se lee sobre el marino (el naranja del logotipo da 2,4:1
    ahí y el verde 2,9:1; los claros pasan de 7:1).  */
.badge {
  --bc: #8FC7F5;
  --bc-rgb: 143, 199, 245;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  background: rgba(var(--bc-rgb), 0.13);
  border: 1px solid rgba(var(--bc-rgb), 0.42);
  color: var(--bc);
  padding: 0.42rem 1.05rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background var(--t-fast), border-color var(--t-fast);
}


/*  La bandera de dentro conserva sus colores: es el dato, no el adorno.  */
.badge .bandera { filter: none; }

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /*  NARANJA, no azul. Era `--gold`, que es el azul de la marca, sobre el
      marino del héroe: cumplía el contraste de texto (6,2:1) y aun así no
      se leía como un botón, porque es el color de la superficie en la que
      se apoya. Es el invariante 56, en la pantalla que más importa: el
      único clic que de verdad hay que dar en la portada.
      El naranja del logotipo es el único color de la marca que salta sobre
      el azul. Sale de `--ardi-naranja`, que está en `:root`, y no del
      `--pa-cta` del afiche: ese lo pone su JavaScript en su propio
      elemento, así que aquí solo llegaría el respaldo escrito a mano.
      Con el texto marino da 6,8:1.  */
  background: var(--ardi-naranja);
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 6px 22px rgba(var(--ardi-naranja-rgb), 0.38);
}


.hero-cta:hover {
  /*  Un tono más claro al pasar el ratón, compuesto y no escrito: así sigue
      al naranja de la marca si alguna vez cambia.  */
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(var(--ardi-naranja-rgb), 0.5);
}


/* ============================================
   SECTIONS COMMON
   ============================================ */

.section-container {
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}


/* ============================================
   NOSOTROS
   ============================================ */



.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--navy);
  color: var(--white);
}


/* ============================================
   CURSOS
   ============================================ */



.niveles {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nivel {
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.82rem;
  color: white;
}

.A1 { background: #2980b9; }
.A2 { background: #27ae60; }
.B1 { background: #8e44ad; }
.B2 { background: var(--red); }


@keyframes bpPromoEspera { to { background-position: -150% 0; } }


/*  En una columna la media se vuelve una franja ancha y baja: una foto
    cuadrada encima de un texto largo deja la tarjeta con la forma de un
    cartel, y en un móvil eso es media pantalla sin leer.  */


/*  ── Las pastillas de nivel, cada una de su color ────────
    Seis cifras iguales en gris no se distinguen de un vistazo, y el nivel
    es justo lo que se viene a buscar. Los colores son los cuatro de la
    marca, repetidos en orden: no hay seis colores de marca, y inventarlos
    sería meter una paleta que no es de nadie.  */
.nivel.A1 { --nv: var(--ardi-azul); }
.nivel.A2 { --nv: var(--ardi-verde); }
.nivel.B1 { --nv: #7C4DBF; }
.nivel.B2 { --nv: var(--ardi-rojo); }
.nivel.C1 { --nv: var(--ardi-naranja); }
.nivel.C2 { --nv: #0E8C6A; }
.nivel.A1, .nivel.A2, .nivel.B1, .nivel.B2, .nivel.C1, .nivel.C2 {
  background: var(--nv);
  border-color: transparent;
  color: #fff;
}
.nivel.A1:hover, .nivel.A2:hover, .nivel.B1:hover, .nivel.B2:hover,
.nivel.C1:hover, .nivel.C2:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
/*  Conversación y gramática no son un nivel de la escala: van en marino,
    que es lo que las separa de las seis cifras sin darles otro color de
    marca que no significa nada.  */
.nivel.CONV, .nivel.GRAM { background: var(--navy); border-color: transparent; color: #fff; }
.nivel.CONV:hover, .nivel.GRAM:hover { filter: brightness(1.18); }


.bancos-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.banco-item {
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  padding: 1.25rem 1.75rem;
  min-width: 200px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.banco-item:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--gold);
}

.banco-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.banco-header img {
  height: 32px;
  object-fit: contain;
}

.banco-name {
  font-weight: 700;
  font-size: 0.88rem;
  /*  El nombre NO lleva el color del banco. Medido sobre la tarjeta blanca:
      el mostaza de Pichincha daba 2,30:1 y el naranja de Internacional
      2,70:1, con el mínimo en 4,5:1. El color de la marca se reconoce en el
      distintivo de al lado; aquí lo único que importa es que se lea.
      Y el color hay que fijarlo: `.pie` pinta su texto en blanco al 72 %, y
      heredarlo sobre una tarjeta blanca sería peor todavía.  */
  color: var(--navy);
}

.banco-details {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #e0e0e0;
  font-size: 0.88rem;
  color: #444;
  line-height: 1.8;
}

.banco-details.open {
  display: block;
}

.banco-details strong {
  color: var(--navy);
}

/* ============================================
   CONTACTO
   ============================================ */



.cbtn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1.5px solid rgba(var(--navy-rgb), 0.12);
  background: var(--white);
  text-decoration: none;
  color: var(--navy);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s;
}
.cbtn:hover,
.cbtn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10, 31, 68, 0.12);
}

.cbtn-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--white);
}
.cbtn-ico .ico { width: 22px; height: 22px; }

/* El icono de WhatsApp trae ya su verde de marca —es como se reconoce—, así
   que la casilla va en claro. Cuando la casilla era verde, el globo verde
   del icono desaparecía dentro y solo quedaba el auricular blanco. */
.cbtn-wa .cbtn-ico { background: #E6F9EE; border: 1px solid #B9E8CE; }
.cbtn-wa:hover { border-color: #25D366; }
.cbtn-mail .cbtn-ico { background: var(--navy); }
.cbtn-mail:hover { border-color: var(--gold); }

.cbtn-txt { display: flex; flex-direction: column; min-width: 0; }
/* El número de WhatsApp NO se escribe en pantalla, en ningún tamaño: el botón
   abre el chat con ese mismo número, y escrito solo alarga la tarjeta y deja el
   teléfono a la vista de los rastreadores de spam. Vale para la portada y para
   Capacítate, que comparten esta hoja. */
.cbtn-wa .cbtn-txt small { display: none; }
.cbtn-txt b {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.cbtn-txt small {
  font-size: 0.82rem;
  color: #6a7587;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  /* max(16px, …) evita el zoom automático de Safari iOS al enfocar. */
  font-size: max(16px, 0.95rem);
  color: var(--text-dark);
  background: var(--white);
  transition: border-color var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--navy);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* ============================================
   MENSAJE DE ÉXITO DEL FORMULARIO
   ============================================ */






/* Animación adicional */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}



/* ============================================
   FOOTER
   ============================================ */

/* ============================================
   PIE — pagos y cierre en una sola banda

   Antes eran dos franjas seguidas: la de pagos, con tres tarjetas blancas
   sueltas sobre crema, y debajo un pie de una línea. Las dos se veían
   incompletas por separado y juntas ocupaban más que esto.
   ============================================ */
/* El pie base. Lo comparten las páginas que no llevan la banda completa de la
   portada —cursos, nosotros, capacítate— y que se quedaron sin estilo al
   convertir el selector footer en .pie: el <footer> suelto perdió su fondo azul. */
footer:not(.pie) {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  padding: 1.75rem clamp(1rem, 4vw, 2.5rem);
  font-size: 0.85rem;
}
footer:not(.pie) strong { color: var(--gold); }
footer:not(.pie) p { margin: 0; }
/* Los legales, pegados al copyright: el relleno de 10px que traian en linea
   dejaba una franja vacia al final de la pagina. */
footer:not(.pie) #bp-pie-legal { font-size: .8rem; opacity: .85; margin-top: .35rem; }
footer:not(.pie) a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
footer:not(.pie) a:hover { color: var(--gold); text-decoration: underline; }

.pie {
  background: #0F2A5C;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.pie-top {
  display: grid;
  grid-template-columns: 1fr 2fr 0.7fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
  align-items: start;
  font-size: 0.85rem;
}

/*  Era el icono cuadrado a 42 px; ahora es el conjunto con lema, que es
    apaisado y se mide por ANCHO.  */
.pie-escudo { width: clamp(150px, 15vw, 190px); height: auto; margin-bottom: 0.7rem; }
.pie-nombre {
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
}
.pie-lema { margin-top: 0.4rem; line-height: 1.55; max-width: 32ch; font-size: 0.82rem; }

.pie-h {
  color: var(--white);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
/*  Las rayas verticales entre las tres columnas, como en la captura.  */
.pie-top > .pie-col + .pie-col { border-left: 1px solid rgba(255, 255, 255, 0.18); padding-left: clamp(1.2rem, 3vw, 2.6rem); }
.pie-p { margin-bottom: 0.8rem; line-height: 1.5; font-size: 0.82rem; }

.pie-social { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.pie-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
  transition: var(--transition);
}
.pie-chip:hover { background: rgba(255, 255, 255, 0.12); }
/*  WhatsApp, lleno de su verde; el correo, solo con contorno.  */
.pie-chip[data-wa] { background: var(--ardi-verde); border-color: var(--ardi-verde); color: #fff; }
.pie-chip[data-wa]:hover { filter: brightness(1.08); background: var(--ardi-verde); }
.pie-chip .ico { width: 16px; height: 16px; }

.pie-enlaces { display: flex; flex-direction: column; gap: 0.38rem; }
.pie-enlaces a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: var(--transition);
  width: fit-content;
}
.pie-enlaces a:hover { color: var(--gold); }


/* Los bancos: tarjetas blancas con el logotipo de cada entidad y el nombre
   en la tinta del texto (invariante 59: el color va al distintivo). */
.pie .bancos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0.8rem;
}
.pie .banco-item {
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  min-width: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: var(--transition);
}
.pie .banco-item:hover { transform: translateY(-2px); }
.pie .banco-header { display: flex; align-items: center; gap: 0.8rem; }
.pie .banco-header img { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; flex: none; }
.pie .banco-name { color: var(--navy) !important; font-weight: 800; font-size: 0.88rem; line-height: 1.2; }

/* La misma rejilla que .pie-top, para que los enlaces legales caigan bajo la
   columna de navegación en vez de pegados al borde de la pantalla. */
.pie-bajo {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 2fr 0.7fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  font-size: 0.82rem;
}
.pie-bajo > p { grid-column: 1 / 3; margin: 0; }
.pie-bajo > #bp-pie-legal { grid-column: 3; }
@media (max-width: 900px) {
  .pie-bajo { grid-template-columns: 1fr; gap: 0.5rem; text-align: center; }
  .pie-bajo > p, .pie-bajo > #bp-pie-legal { grid-column: 1; }
}
.pie-bajo strong { color: var(--gold); }
.pie-bajo a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.pie-bajo a:hover { color: var(--gold); text-decoration: underline; }

@media (max-width: 900px) {
  .pie-top { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
  .pie-top > .pie-marca + .pie-col { border-left: 0; padding-left: 0; }
}
/* En el móvil el pie NO baja a una columna: ver «MÓVIL» al final del archivo. */

/* ============================================
   MODAL
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,31,68,0.6);
  backdrop-filter: blur(4px);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: min(75vw, 700px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(10,31,68,0.3);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  padding: 0;
  position: relative;
}


.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.9);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: var(--transition);
  z-index: 10;
}

.modal-close:hover {
  background: var(--white);
  transform: rotate(90deg);
}

.modal-body {
  padding: 2rem 2.25rem 2.5rem;
}

.modal-body h2 {
  font-family: 'Playfair Display', serif;
  color: var(--navy);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}


.modal-body p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {


  .modal { width: min(90vw, 700px); }
}

@media (max-width: 1100px) {

  .promo-afiche {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  /* El menú móvil se define una sola vez, más abajo (mismo breakpoint).
     Aquí solo van los ajustes de secciones. */


  .promo-afiche { grid-column: auto; }
  .promo-step-precio { font-size: 1.6rem; }

  .modal { width: min(95vw, 700px); }
  .modal-body { padding: 1.5rem; }
}


/* ============================================
   HEADER DUAL LOGO (JVA)
   ============================================ */
.header-logos {
  display: flex;
  align-items: center;
  gap: 1rem;
}


/* Banco items: no toggle, no details shown */
.banco-item { cursor: default; }
.banco-item .banco-details { display: none !important; }


/* ============================================
   AFICHE PROMOCIONAL (tercera columna)
   ============================================ */

/* El afiche es editable desde el panel admin (Publicidad → Editar promoción).
   Las variables --pa-* las inyecta js/promo-afiche.js; los valores tras la coma
   son el respaldo estático y reproducen el diseño original. */
.promo-afiche {
  background: linear-gradient(145deg, var(--pa-bg, var(--navy)) 0%, var(--pa-bg2, #26406F) 100%);
  border-radius: 24px;
  /*  Más aire, y que crezca con el ancho: a 1,5 rem fijos el contenido tocaba
      el borde en un portátil y sobraba sitio en un monitor.  */
  padding: clamp(1.7rem, 3.2vw, 2.7rem) clamp(1.35rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-lg);
  color: var(--pa-text, #fff);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.25);
}

.promo-afiche::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.07);
  border-radius: 50%;
  pointer-events: none;
}

/* Los cuatro colores del logotipo, arriba del afiche. La misma franja va en el
   cuadro de la portada, en el emergente de descuentos, en la plataforma y en
   el aula: es lo que hace que todo se lea como una sola marca sin repetir el
   logotipo cinco veces. */
.promo-afiche::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(90deg, #2F8FE3 0 25%, #F7A21B 25% 50%, #16A34A 50% 75%, #E1252F 75% 100%);
}

.promo-badge-top {
  display: inline-block;
  background: var(--pa-accent, var(--gold));
  color: var(--pa-bg, var(--navy));
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 0.75rem;
}

.promo-flags {
  font-size: 0.9rem;
  color: rgba(var(--pa-ov, 255,255,255), 0.7);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.promo-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Variante "tarjetas": rejilla que se adapta al ancho, sin flechas. */
.promo-steps--tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}

/* Variante "compacto": escalones más bajos, para promociones de muchos pasos. */
.promo-steps--compacto { gap: 0.4rem; }
.promo-steps--compacto .promo-step { padding: 0.6rem 0.9rem; }
.promo-steps--compacto .promo-step-precio { font-size: 1.4rem; margin-bottom: 0.15rem; }

.promo-step {
  background: rgba(var(--pa-ov, 255,255,255), 0.06);
  border: 1px solid rgba(var(--pa-ov, 255,255,255), 0.1);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: background 0.2s;
}

.promo-step.highlight {
  background: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.15);
  border-color: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.4);
}

.promo-step-mes {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(var(--pa-ov, 255,255,255), 0.55);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.promo-step-precio {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--pa-accent, var(--gold));
  line-height: 1;
  margin-bottom: 0.4rem;
}

.promo-step-detalle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.75rem;
  font-size: 0.82rem;
  color: rgba(var(--pa-ov, 255,255,255), 0.75);
  margin-bottom: 0.35rem;
}

.promo-step-detalle strong {
  color: var(--pa-text, var(--white));
  font-weight: 700;
  text-align: right;
}

.promo-step-nota {
  font-size: 0.78rem;
  color: rgba(var(--pa-ov, 255,255,255), 0.45);
  font-style: italic;
}

.promo-step-bonus {
  font-size: 0.78rem;
  color: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.95);
  font-weight: 700;
  margin-top: 0.35rem;
  line-height: 1.35;
}

.promo-arrow {
  text-align: center;
  color: var(--pa-accent, var(--gold));
  font-size: 1.1rem;
  padding: 0.3rem 0;
  opacity: 0.7;
}

/* ── Afiche «niveles»: la tarifa completa, nivel por nivel ───
   Escrito desde el móvil: una columna, tarjetas que caben enteras en 360 px y
   ninguna tipografía que obligue a desplazarse en horizontal. En pantalla
   ancha, los tres tramos se ponen en fila.
   Las pestañas son radios ocultos: sin JavaScript, para que la vista previa
   del panel —un iframe sin guiones— enseñe exactamente lo que se publica. */
.pa-niveles { text-align: center; }

.pa-pct {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.45rem, 7vw, 2.3rem); line-height: 1.05; font-weight: 700;
  color: var(--pa-accent, var(--gold)); margin: 0.1rem 0 0.5rem;
}
/*  ══ Afiche: la columna de «por qué elegir ARDI» ══════════
    Antes era un rótulo pequeño y una tabla de dos columnas. Ahora sostiene
    la mitad izquierda del cuadro, así que tiene titular propio, un icono
    por fila y una firma al pie.
    Los velos van en `rgba(var(--pa-ov))`, que `styleVars` calcula según la
    luminancia del fondo: con el tema claro son marino sobre blanco y con el
    oscuro, blanco sobre marino. Un solo juego de reglas para los dos.  */
.pa-compara-h {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 800; line-height: 1.14;
  margin: 0; color: var(--pa-text, #14213D);
  text-transform: none; letter-spacing: 0;
}
/*  Las cuatro letras de ARDI, cada una en su color. Dentro de la frase y
    como texto: una imagen no se alinea con la línea base ni crece con ella.  */
.pa-ardi { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.pa-ardi i { font-style: normal; }
.pa-compara-sub {
  margin: .45rem 0 1.1rem;
  font-size: .94rem; line-height: 1.5;
  color: rgba(var(--pa-ov, 10,31,68), .62);
}

/*  Cada fila: icono · lo habitual · lo de aquí. En tres columnas se leen en
    paralelo; apiladas habría que ir y volver para comparar.  */
.pa-compara ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pa-compara li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: .9rem;
  background: rgba(var(--pa-ov, 10,31,68), .04);
  border-radius: 14px; padding: .8rem 1rem;
}
.pa-compara-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: rgba(var(--pa-accent-rgb, 31,111,191), .12);
  color: var(--pa-accent, #1F6FBF);
}
.pa-compara-ico .pa-glifo { width: 21px; height: 21px; }
.pa-compara-otros, .pa-compara-bp { display: block; min-width: 0; line-height: 1.4; }
.pa-compara-otros { font-size: .86rem; color: rgba(var(--pa-ov, 10,31,68), .6); }
.pa-compara-bp { font-size: .86rem; color: var(--pa-text, #14213D); font-weight: 600;
  border-left: 1px solid rgba(var(--pa-ov, 10,31,68), .12); padding-left: .9rem; }
.pa-compara-otros b, .pa-compara-bp b {
  display: block; font-size: .6rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .2rem;
}
.pa-compara-otros b { color: rgba(var(--pa-ov, 10,31,68), .42); }
.pa-compara-bp b { color: var(--pa-accent, #1F6FBF); }
.pa-compara-txt { display: flex; align-items: flex-start; gap: .4rem; }
.pa-compara-txt .pa-visto { width: 15px; height: 15px; flex: none; margin-top: .15em; color: #16A34A; }

/*  La firma manuscrita y las cuatro rayitas. Es lo único del cuadro que no
    se alinea a la rejilla, y por eso funciona.  */
.pa-firma { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-top: 1.4rem; flex-wrap: wrap; }
.pa-firma-txt {
  position: relative; display: inline-block; padding-bottom: .3rem;
  font-family: 'Caveat', 'Playfair Display', cursive; font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 1.75rem);
  color: var(--pa-accent, #1F6FBF);
  transform: rotate(-2deg); max-width: 16ch; line-height: 1.3;
}
.pa-firma-txt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.5px; border-radius: 3px; background: var(--pa-accent, #1F6FBF); opacity: .55;
}
.pa-firma-col { display: flex; gap: 5px; }
.pa-firma-col i { width: 8px; height: 26px; border-radius: 2px; transform: skewX(-18deg); }
.pa-firma-col i:nth-child(1) { background: #2F8FE3; }
.pa-firma-col i:nth-child(2) { background: #F7A21B; }
.pa-firma-col i:nth-child(3) { background: #16A34A; }
.pa-firma-col i:nth-child(4) { background: #E1252F; }

/*  ══ Afiche: la caja de cupos y la nota ═══════════════════
    «Cupos limitados por nivel» era un párrafo suelto entre el resto del
    texto. Responde la pregunta que sigue a ver un precio —«¿y esto me va a
    subir?»— así que va en un bloque con su icono, para que se lea ANTES de
    los números y no después.  */
.pa-urgente {
  display: flex; align-items: flex-start; gap: .85rem;
  background: rgba(var(--pa-accent-rgb, 31,111,191), .08);
  border-radius: 15px; padding: .95rem 1.1rem;
  margin: 0 0 1.25rem; text-align: left;
}
.pa-urgente-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: var(--pa-accent, #1F6FBF); color: #fff;
}
.pa-urgente-ico .pa-glifo { width: 21px; height: 21px; }
.pa-urgente-txt { min-width: 0; }
.pa-urgente-txt b { display: block; font-size: .96rem; font-weight: 800;
  color: var(--pa-text, #14213D); line-height: 1.3; }
.pa-urgente-txt em { display: block; font-style: normal; font-size: .84rem;
  color: rgba(var(--pa-ov, 10,31,68), .62); margin-top: .15rem; line-height: 1.45; }

.pa-nota-legal {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .78rem; line-height: 1.5;
  color: rgba(var(--pa-ov, 10,31,68), .55);
  margin: .85rem 0 0; text-align: left;
}
.pa-nota-ico { width: 15px; height: 15px; flex: none; margin-top: .15em; }

/*  El glifo suelto, por si alguno se usa fuera de su cuadro.  */
.pa-glifo { width: 19px; height: 19px; }

@media (max-width: 760px) {
  /*  En una columna la tabla no se compara: se lee. El icono se queda, que
      es lo que marca de qué va cada fila de un vistazo.  */
  .pa-compara li { grid-template-columns: auto minmax(0, 1fr); gap: .7rem; }
  .pa-compara-bp { grid-column: 1 / -1; border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(var(--pa-ov, 10,31,68), .12); padding-top: .6rem; }
  .pa-compara-ico { width: 36px; height: 36px; border-radius: 10px; }
  .pa-compara-ico .pa-glifo { width: 18px; height: 18px; }
  .pa-firma-txt { max-width: none; }
}

/* El desplegable de promociones: el precio de todos es el regular, y cada
   quien elige el descuento que le toca. Al lado, el «?» que abre la misma
   ficha del pop-up —un solo sitio que la escribe, para que no se separen—. */
.pa-promo { margin: 0 0 1.25rem; text-align: left; }
.pa-promo-lbl {
  display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(var(--pa-ov, 255,255,255), 0.6); margin-bottom: 0.35rem;
}
.pa-promo-fila { display: flex; gap: 0.5rem; align-items: center; }
.pa-sel {
  flex: 1; min-width: 0; font: inherit; font-size: 0.85rem;
  padding: 0.5rem 0.7rem; border-radius: 10px; cursor: pointer;
  background: rgba(var(--pa-ov, 255,255,255), 0.1);
  border: 1px solid rgba(var(--pa-ov, 255,255,255), 0.25);
  color: var(--pa-text, #fff);
}
/* Las opciones las pinta el sistema: sobre fondo oscuro hay que forzar el
   color o en Windows salen blancas sobre blanco. */
.pa-sel option { color: #10203c; background: #fff; }
.pa-ayuda {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font: 700 0.9rem/1 var(--ff-b, inherit);
  background: rgba(var(--pa-ov, 255,255,255), 0.12);
  border: 1px solid rgba(var(--pa-ov, 255,255,255), 0.28);
  color: rgba(var(--pa-ov, 255,255,255), 0.75);
  transition: background 0.15s, color 0.15s;
}
.pa-ayuda:hover { background: var(--pa-accent, var(--gold)); color: var(--pa-bg, var(--navy)); border-color: transparent; }

/*  ── La fila de idioma, encima de los niveles ────────────
    Es la decisión que manda: elegir «inglés» quita C1 y C2 de la lista de
    abajo. Por eso va primero y se ve más que una pestaña de nivel — si las
    dos filas pesaran igual, no se entendería que una filtra a la otra.  */
.pa-idiomas {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0 0 0.9rem;
}
.pa-idiomas-lbl {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(var(--pa-ov, 255,255,255), 0.62);
}
.pa-idiomas-btns { display: flex; gap: 0.45rem; }
.pa-idioma {
  border: 1.5px solid rgba(var(--pa-ov, 255,255,255), 0.24);
  background: transparent;
  color: var(--pa-text, #fff);
  font-family: inherit; font-size: 0.86rem; font-weight: 800;
  padding: 0.42rem 1.15rem; border-radius: 99px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pa-idioma:hover { background: rgba(var(--pa-ov, 255,255,255), 0.1); }
.pa-idioma.on {
  background: var(--pa-cta, #F7A21B);
  color: var(--pa-cta-txt, #14213D);
  border-color: transparent;
}

/*  ── Conversación y gramática ────────────────────────────
    No se venden por tramos: se acuerdan. El panel enseñaba el mismo cuadro
    de precios que un nivel, con cifras que no corresponden a nada.  */
.pa-panel-medida {
  text-align: center;
  padding: 1.5rem 1.1rem 1.2rem;
  border: 1px dashed rgba(var(--pa-ov, 255,255,255), 0.22);
  border-radius: 14px;
  background: rgba(var(--pa-ov, 255,255,255), 0.04);
}
.pa-medida-h {
  margin: 0 0 0.4rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 700; color: var(--pa-text, #fff);
}
.pa-medida-p {
  margin: 0 auto 1.1rem; max-width: 40ch;
  font-size: 0.85rem; line-height: 1.5;
  color: rgba(var(--pa-ov, 255,255,255), 0.72);
}
.pa-medida-btns { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.pa-medida-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.62rem 1.15rem; border-radius: 99px;
  font-size: 0.86rem; font-weight: 800; text-decoration: none;
  transition: filter 0.18s, transform 0.18s var(--ease-out);
}
.pa-medida-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pa-medida-wa { background: #25D366; color: #06331A; }
.pa-medida-mail { background: var(--pa-cta, #F7A21B); color: var(--pa-cta-txt, #14213D); }
.pa-medida-btn .ico { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) {
  .pa-medida-btn, .pa-idioma { transition: none; }
  .pa-medida-btn:hover { transform: none; }
}

/*  ── Que quepa sin desplazarse ───────────────────────────
    Con la fila de idioma, el cuadro ganó alto justo donde no sobraba: en un
    portátil de 768 px la columna de precios se salía y había que
    desplazarse DENTRO del diálogo para ver el botón de inscribirse — que es
    lo único que hay que ver. Se aprieta lo que no es dato: el aire entre
    pestañas, el de las tarjetas y el del pie.  */
@media (max-height: 900px) {
  .promo-afiche { padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1.1rem, 2.4vw, 1.9rem); }
  .pa-idiomas { margin-bottom: 0.65rem; }
  .pa-tabs { gap: 0.35rem; margin-bottom: 0.75rem; }
  .pa-tabs label { padding: 0.34rem 0.85rem; font-size: 0.78rem; }
  .pa-cards { gap: 0.55rem; }
  .pa-card { padding: 0.75rem 0.9rem; }
  .pa-card .pa-precio strong { font-size: clamp(1.35rem, 2.6vw, 1.6rem); }
  .pa-promo { margin-bottom: 0.8rem; }
  .pa-urgente { margin-bottom: 0.6rem; }
  .pa-inicial { margin-top: 0.7rem; }
  .pa-doble-precios .promo-cta-wrap { margin-top: 0.9rem; padding-top: 0.85rem; }
  .pa-compara li > span { padding: 0.5rem 0.75rem; }
  .pa-compara ul { gap: 0.4rem; }
}

.pa-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/*  Ocho pestañas (A1–C2 más conversación y gramática), no cuatro: necesitan
    sitio para partirse en dos líneas sin amontonarse.  */
.pa-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; margin: 0 0 1.15rem; }
.pa-tabs label {
  padding: 0.44rem 1.05rem; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(var(--pa-ov, 255,255,255), 0.22);
  font-size: 0.82rem; font-weight: 800; color: var(--pa-text, #fff);
  line-height: 1.15; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pa-tabs label:hover { background: rgba(var(--pa-ov, 255,255,255), 0.12); }
/* El radio está oculto, así que el foco del teclado se enseña en su fila. */
.pa-radio:focus-visible ~ .pa-tabs { outline: 2px solid var(--pa-accent, var(--gold)); outline-offset: 4px; border-radius: 99px; }

.pa-panel { display: none; text-align: left; }
.pa-cards { display: grid; gap: 0.8rem; }
.pa-card {
  background: rgba(var(--pa-ov, 255,255,255), 0.06);
  border: 1px solid rgba(var(--pa-ov, 255,255,255), 0.1);
  border-radius: 14px; padding: 1.05rem 1.15rem;
}
.pa-card.destacada {
  background: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.14);
  border-color: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.42);
}
.pa-card h4 {
  margin: 0 0 0.3rem; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(var(--pa-ov, 255,255,255), 0.6);
}
.pa-precio { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.15rem; }
.pa-precio s { font-size: 0.95rem; color: rgba(var(--pa-ov, 255,255,255), 0.5); }
.pa-precio strong {
  font-family: 'Playfair Display', serif; font-size: 1.75rem; line-height: 1;
  color: var(--pa-accent, var(--gold));
}
.pa-ahorro {
  display: inline-block; margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 800;
  padding: 0.15rem 0.55rem; border-radius: 99px;
  background: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.2); color: var(--pa-text, #fff);
}
.pa-nota { font-size: 0.76rem; font-style: italic; color: rgba(var(--pa-ov, 255,255,255), 0.5); margin: 0.25rem 0 0; line-height: 1.4; }
.pa-bonus { font-size: 0.76rem; font-weight: 700; color: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.95); margin: 0.3rem 0 0; line-height: 1.35; }
.pa-inicial { margin: 1.1rem 0 0; font-size: 0.88rem; text-align: center; color: rgba(var(--pa-ov, 255,255,255), 0.8); }
.pa-inicial strong { color: var(--pa-accent, var(--gold)); font-size: 1.05rem; }
.pa-nota-legal { margin: 0.6rem 0 0; font-size: 0.7rem; color: rgba(var(--pa-ov, 255,255,255), 0.45); }

@media (min-width: 620px) {
  .pa-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* El diálogo del afiche en el móvil: el cuadro entero a la vista, no un cartel
   gigante al que hay que asomarse. */
@media (max-width: 560px) {
  .promo-modal { padding: 8px; }
  .promo-modal-caja { max-height: 94vh; }
  .promo-afiche { padding: 1.1rem 0.9rem; border-radius: 14px; }
  .promo-modal-x { top: 8px; right: 10px; width: 30px; height: 30px; font-size: 18px; }

  /* En el móvil cada tramo es una FILA, no una tarjeta: etiqueta a la
     izquierda, precio a la derecha. Apiladas como tarjetas, el cuadro medía
     dos pantallas y había que desplazarse para ver el precio del cuarto mes,
     que es justo lo que se viene a mirar. */
  .pa-card {
    padding: 0.55rem 0.7rem;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 0.15rem 0.6rem;
  }
  .pa-card h4 { grid-column: 1; margin: 0; font-size: 0.66rem; }
  .pa-precio { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; margin: 0; }
  .pa-precio strong { font-size: 1.35rem; }
  .pa-precio s { font-size: 0.8rem; }
  .pa-ahorro { grid-column: 1; margin: 0; font-size: 0.62rem; padding: 0.1rem 0.45rem; }
  .pa-card .promo-step-detalle { grid-column: 1 / -1; font-size: 0.72rem; margin: 0.2rem 0 0; }
  .pa-nota, .pa-bonus { grid-column: 1 / -1; margin: 0.1rem 0 0; font-size: 0.7rem; }
  .pa-tabs label { padding: 0.3rem 0.8rem; font-size: 0.76rem; }
  .pa-inicial { margin-top: 0.55rem; font-size: 0.8rem; }
}

/* Pantallas BAJAS (un móvil normal en vertical ya lo es, y un plegable cerrado
   más): se quita lo que adorna, nunca lo que informa del precio. */
@media (max-height: 760px) {
  .pa-nota, .pa-bonus { display: none; }
  .promo-espera { display: none; }
  .promo-cta-wrap { margin-top: 0.9rem; padding-top: 0.9rem; }
}

.promo-cta-wrap {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--pa-ov, 255,255,255), 0.1);
  text-align: center;
}

.promo-espera {
  font-size: 0.9rem;
  color: rgba(var(--pa-ov, 255,255,255), 0.6);
  margin-bottom: 0.6rem;
  font-style: italic;
}

.promo-urgencia {
  font-size: 0.75rem;
  color: rgba(var(--pa-ov, 255,255,255), 0.5);
  margin-top: 0.6rem;
  line-height: 1.4;
}

/* El botón que lleva al formulario. Llevaba el color del ACENTO, que es el
   que tiñe el panel entero: quedaba azul sobre azul (4,68:1 de texto, pero
   nada que lo separe del fondo). Ahora tiene su propio color —el naranja del
   logotipo, 7,7:1 con la tinta encima— y forma de píldora, como los otros dos
   botones de precio del sitio. */
.promo-cta-btn {
  /*  A TODO el ancho de su columna. Un botón pequeño centrado bajo tres
      tarjetas de precios no se lee como el final del camino: se lee como
      un enlace más entre otros.  */
  display: block;
  width: 100%;
  text-align: center;
  background: var(--pa-cta, #F7A21B);
  color: var(--pa-cta-txt, var(--navy));
  font-weight: 800;
  font-size: 1rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(var(--pa-cta-rgb, 247,162,27), 0.34);
  transition: filter 0.2s, transform 0.2s var(--ease-out), box-shadow 0.2s;
  margin-bottom: 0.65rem;
}
/*  El glifo que acompaña a «Clases» y «Material» dentro de una tarjeta de
    precio: pequeño y del color del texto, para no competir con la cifra.  */
.pa-det-ico { width: 15px; height: 15px; flex: none; vertical-align: -0.17em; }
.promo-cta-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(var(--pa-cta-rgb, 247,162,27), 0.46);
}
@media (prefers-reduced-motion: reduce) {
  .promo-cta-btn { transition: none; }
  .promo-cta-btn:hover { transform: none; }
}

.promo-email {
  display: block;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}

.promo-email:hover {
  color: var(--gold);
}

@media (max-width: 480px) {
/* ============================================
   LANGUAGE SWITCHER — encima del afiche
   ============================================ */
}


/* Selector de idioma del sitio */
.lang-main-switcher {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  width: 100%;
}

.lang-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 2px solid #ddd;
  border-radius: 50px;
  background: var(--white);
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--navy);
  transition: all 0.2s;
  letter-spacing: 0.04em;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.lang-main-btn:hover {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb),0.08);
}

.lang-main-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}


/* El contador «20 cupos disponibles» estaba justo encima del aviso que dice
   exactamente lo mismo, en la misma seccion. Se queda el aviso, que es el que
   se edita desde el panel. Lo responsive de «Sobre nosotros» esta mas abajo,
   donde ya estaba escrito por segunda vez. */

/* ============================================
   CURSOS PAGE - NIVELES COMO BOTONES
   ============================================ */

/* Asegurar que los enlaces dentro de .niveles se vean como botones */
.niveles a.nivel {
  text-decoration: none;
  color: white;
  display: inline-block;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.niveles a.nivel:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  filter: brightness(1.1);
}

.niveles a.nivel:active {
  transform: translateY(0);
}

.niveles a.nivel:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Mantener los colores originales de los niveles */
.niveles a.nivel.A1 { background: #2980b9; }
.niveles a.nivel.A2 { background: #27ae60; }
.niveles a.nivel.B1 { background: #8e44ad; }
.niveles a.nivel.B2 { background: var(--red); }
/* Los dos niveles de arriba y los dos programas que no son un nivel. Estos
   últimos llevan nombre, así que no caben en la misma píldora cuadrada. */
.niveles a.nivel.C1 { background: #d35400; }
.niveles a.nivel.C2 { background: #16a085; }
.niveles a.nivel.CONV, .niveles a.nivel.GRAM { background: var(--navy); width: auto; padding: 0 0.7rem; border-radius: 999px; font-size: 0.78rem; }

/* Responsive para móviles */
@media (max-width: 480px) {
  .niveles a.nivel {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }
}


/* ---- HEADER RESPONSIVE ---- */
@media (max-width: 900px) {
  .header-inner { padding: 0 1.25rem; }
  nav a { font-size: 0.85rem; padding: 0.45rem 0.75rem; }
}

/*  El menú se pliega antes de que las ocho entradas dejen de caber en una
    fila (con «Empresas» de vuelta, a unos 900 px).  */
@media (max-width: 940px) {
  .header-logo { height: 40px; }

  nav {
    display: none;
    position: absolute;
    top: 100%;
    /* Desplegable estrecho anclado al ☰: ocupa solo el ancho del texto,
       no de borde a borde de la pantalla. */
    left: auto; right: 0;
    width: max-content;
    min-width: 160px;
    max-width: min(78vw, 300px);
    background: var(--cab-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
    box-shadow: 0 12px 28px rgba(4, 12, 30, 0.35);
    gap: 0.15rem;
    border-top: 2px solid var(--ardi-azul);
    border-radius: 0 0 12px 12px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  nav.open { display: flex; }
  nav a {
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    font-size: 0.95rem;
    width: auto;
    text-align: left;
    white-space: nowrap;
  }
  nav a::after { display: none; }
  .nav-entrar { margin: 0 0 .25rem; justify-content: center; }
  .hamburger { display: flex; }
  .header-inner { position: relative; }
}

/* ---- HERO RESPONSIVE ---- */


@media (max-width: 600px) {


  .hero-cta { width: 100%; justify-content: center; }
}

/* ---- SECTIONS PADDING ---- */
@media (max-width: 768px) {
  .section-container { padding: 0 1.25rem; }
}
@media (max-width: 480px) {
  .section-container { padding: 0 1rem; }
}

/* ---- NOSOTROS RESPONSIVE ---- */


@media (max-width: 480px) {

  .btn-secondary { width: 100%; justify-content: center; }
  .promo-step-precio { font-size: 1.6rem; }
}

/* ---- CURSOS RESPONSIVE ---- */


/* ---- CONTACTO RESPONSIVE ---- */


/* ---- PAGOS RESPONSIVE ---- */
@media (max-width: 768px) {
  .bancos-grid { gap: 1rem; }
  .banco-item { min-width: 160px; padding: 1rem 1.25rem; }
}


/* ---- MODAL RESPONSIVE ---- */
@media (max-width: 768px) {
  .modal { width: min(96vw, 700px); }
  .modal-body { padding: 1.5rem; }
  .modal-body h2 { font-size: 1.3rem; }

}
@media (max-width: 480px) {
  .modal { width: 100%; margin: 0 0.5rem; border-radius: 12px 12px 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-height: 88vh; }
}

/* ---- FOOTER RESPONSIVE ---- */
@media (max-width: 480px) {
  footer { font-size: 0.82rem; padding: 1.5rem 1rem; }
}

/* ---- WELCOME SCREEN RESPONSIVE ---- */


/* ---- BACK-BAR (capacitate / nosotros / cursos / certificado pages) ---- */
.back-bar {
  background: var(--cream);
  padding: 0.75rem 2rem;
  border-bottom: 1px solid #DCE8F5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  position: sticky;
  top: var(--header-h);
  z-index: 999;
}
.back-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--navy); font-weight: 600; font-size: 0.9rem;
  text-decoration: none; transition: gap 0.2s;
}
.back-link:hover { gap: 0.8rem; }
.lang-switcher-inline { display: flex; gap: 0.5rem; }
.lang-btn {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 1rem; border: 2px solid #ddd; border-radius: 50px;
  background: var(--white); font-family: 'Nunito', sans-serif;
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  color: var(--navy); transition: all 0.2s; letter-spacing: 0.04em;
  touch-action: manipulation; /* prevent 300ms tap delay on mobile */
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.lang-btn:hover { border-color: var(--gold); background: rgba(var(--gold-rgb),0.08); }
.lang-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

@media (max-width: 600px) {
  .back-bar {
    padding: 0.6rem 1rem;
    top: var(--header-h);
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .lang-switcher-inline, .lang-switcher { 
    gap: 0.35rem;
    justify-content: flex-start;
  }
  .lang-btn { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
}

/* ---- CAPACITATE PAGE RESPONSIVE ---- */
@media (max-width: 768px) {
  .cap-hero { padding: 4rem 1.25rem 5rem; }
  .cap-hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
}
@media (max-width: 480px) {
  .cap-hero { padding: 3rem 1rem 4rem; }
}

/* ---- NOSOTROS PAGE (np-) RESPONSIVE ---- */
@media (max-width: 768px) {
  .np-hero { padding: 4rem 1.25rem 5rem; }
  .np-hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
}

/* Las páginas de cursos tienen su hoja propia: css/cursos.css.
   Aquí quedaban cuatro selectores (.cursos-page-hero, .niveles-filter,
   .cursos-list-grid, .nivel-filter-btn) de una versión anterior de esas
   páginas que ya no existe en ningún HTML. */

/* ---- PROMO AFICHE ---- */
@media (max-width: 480px) {
  .promo-afiche { padding: 1.25rem 1rem; }
  .promo-step-precio { font-size: 1.5rem; }
  .lang-main-btn { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
  .lang-main-switcher { gap: 0.35rem; }
}

/* ---- SMALL PHONES (360px) ---- */
@media (max-width: 360px) {


  nav a { font-size: 0.88rem; }

  /* No se baja de 16px: por debajo, iOS hace zoom al enfocar. */
  .form-group input, .form-group textarea { font-size: max(16px, 0.9rem); }
}


/* Safe images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ── Accesibilidad: foco de teclado + movimiento reducido ── */
:focus-visible { outline: 3px solid #26406F; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* Aviso de «copiado» en los enlaces de correo. Sin esto, pulsar el botón en un
   equipo sin cliente de correo no produce ninguna señal. */
a[href^="mailto:"] { position: relative; }
a[href^="mailto:"].copiado::after {
  content: 'Correo copiado';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  animation: bpCopiado 2.2s ease forwards;
  z-index: 5;
}
@keyframes bpCopiado {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  12%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}


/* ============================================================
   MÓVIL: reducir, no apilar

   El sitio pasaba a una sola columna en cuanto la pantalla bajaba de 560px, y
   el resultado era una tira vertical larguísima: el pie ocupaba tres
   pantallas para decir cuatro cosas.

   La regla aquí es otra. Lo que se puede seguir leyendo en dos columnas
   —el pie, los datos del héroe, las fichas de banco, las píldoras— se queda
   en dos y se le baja el tamaño. Lo que NO se puede —la prosa, las tarjetas
   de curso con su lista de niveles— sigue en una, pero se le quita relleno y
   se le ajusta el tipo para que ocupe bastante menos alto.

   El suelo son 320px. Por debajo de eso no hay teléfonos en uso.
   ============================================================ */

/* ── El pie, en dos columnas hasta el final ───────────────── */
@media (max-width: 560px) {
  .pie-top {
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1rem;
    font-size: 0.8rem;
    padding-top: 1.5rem;
    padding-bottom: 1.1rem;
  }
  /* La marca cruza las dos: lleva el lema, que sí necesita ancho. */
  .pie-marca { grid-column: 1 / -1; }
  .pie-lema { max-width: none; font-size: 0.78rem; }
  .pie-h { font-size: 0.74rem; margin-bottom: 0.3rem; }
  .pie-p { font-size: 0.76rem; margin-bottom: 0.55rem; }
  .pie-escudo { width: 150px; margin-bottom: 0.5rem; }
  .pie-nombre { font-size: 1.05rem; }
  .pie-enlaces { gap: 0.3rem; }
  .pie-enlaces a { font-size: 0.8rem; }
  .pie-social { margin-top: 0.7rem; gap: 0.4rem; }
  .pie-chip { padding: 0.4rem 0.7rem; font-size: 0.76rem; }
  /* Las fichas de banco caben de dos en dos dentro de su columna. */
  .pie .bancos-grid { grid-template-columns: 1fr; gap: 0.4rem; }
  .pie .banco-item { padding: 0.45rem 0.5rem; }
  .pie .banco-name { font-size: 0.72rem; }
  .pie .banco-header img { width: 18px; height: 18px; }
}

/* La línea de abajo: una fila que envuelve, no dos bloques apilados. */
@media (max-width: 900px) {
  .pie-bajo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3rem 0.9rem;
    text-align: center;
    font-size: 0.76rem;
    padding: 0.9rem clamp(0.75rem, 4vw, 2.5rem);
  }
}

/* El pie sencillo de las páginas interiores. */
@media (max-width: 560px) {
  footer:not(.pie) { padding: 1.4rem 1rem; font-size: 0.82rem; }
  footer:not(.pie) #bp-pie-legal { font-size: 0.74rem; }
}

/* ── Portada: menos alto, mismo contenido ────────────────── */
@media (max-width: 560px) {
  section { padding-top: 2.25rem; padding-bottom: 2.25rem; }


  .niveles { gap: 0.35rem; }

  /* Los tres botones de contacto, compactos. */
  .cbtn { padding: 0.7rem 0.85rem; gap: 0.7rem; }
  .cbtn-ico { width: 38px; height: 38px; border-radius: 10px; }
  .cbtn-ico .ico { width: 19px; height: 19px; }
  .cbtn-txt b { font-size: 0.88rem; }
  .cbtn-txt small { font-size: 0.74rem; }
}

/* ── 320px: el suelo ─────────────────────────────────────── */
@media (max-width: 380px) {
  .pie-top { gap: 0.9rem 0.7rem; font-size: 0.76rem; }
  .pie-enlaces a { font-size: 0.76rem; }
  .pie .banco-name { font-size: 0.68rem; }
  .section-container { padding-left: 0.85rem; padding-right: 0.85rem; }

}


/* ── Franja de cifras (Capacítate, Empresas) ───────────────
   Vivía dentro del <style> de Capacítate; al estrenar Empresas salió sin
   estilos, con los números pegados a su etiqueta. Con dos páginas usándola,
   su sitio es este. */
/*  ── La franja de cifras ─────────────────────────────────
    Era `background: var(--gold)` a secas: un rectángulo de azul plano con
    las cifras centradas encima. Plano de verdad — un color, una tipografía,
    ninguna jerarquía—, y encima el único sitio del bloque donde cabía meter
    los otros tres colores de la marca.

    Ahora: el marino degradando al azul, la hairline de los cuatro colores
    arriba (la misma que une la portada, el afiche, el emergente y el aula),
    un separador fino entre cifras y cada número en uno de los colores
    CLAROS — los únicos que se leen sobre oscuro: entre 8,1:1 y 10,3:1.  */
.stats-strip {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 52%, var(--gold) 128%);
  padding: clamp(1.4rem, 3.4vw, 2.1rem) clamp(1rem, 4vw, 2rem);
  overflow: hidden;
}
.stats-strip::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg,
    var(--ardi-azul) 0 25%, var(--ardi-naranja) 25% 50%,
    var(--ardi-verde) 50% 75%, var(--ardi-rojo) 75% 100%);
}
/*  Una mancha de luz en diagonal: lo que separa un degradado de un color
    plano a la vista.  */
.stats-strip::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 120% at 18% 0%, rgba(255,255,255,.09), transparent 62%);
}
.stats-strip-inner {
  position: relative;
  max-width: var(--ancho); margin: 0 auto;
  display: flex; justify-content: center; align-items: stretch;
  gap: 0; flex-wrap: wrap;
}
.stat-item {
  --sc: #8FC7F5;
  text-align: center; min-width: 0;
  flex: 1 1 0;
  padding: 0 clamp(0.6rem, 2.4vw, 1.9rem);
  border-left: 1px solid rgba(255,255,255,.14);
}
.stat-item:first-child { border-left: 0; }
.stat-item:nth-child(4n+2) { --sc: #FFC565; }
.stat-item:nth-child(4n+3) { --sc: #6EE7A0; }
.stat-item:nth-child(4n+4) { --sc: #8FC7F5; }
.stat-item strong {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 4.2vw, 2.15rem);
  color: var(--sc);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 0.3rem;
}
.stat-item span {
  font-size: clamp(0.66rem, 1.7vw, 0.78rem);
  font-weight: 700;
  color: rgba(255,255,255,0.74);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.35;
}
/*  A 560 px cinco columnas de 60 px no son columnas. Dos por fila, y el
    separador pasa a ser el de arriba.  */
@media (max-width: 560px) {
  .stat-item { flex: 1 1 42%; padding: 0.7rem 0.5rem; border-left: 0; }
  .stat-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}

/* ── El cuadro de precios de la portada ─────────────────────
   Un solo cuadro, centrado: cabecera (insignia + «hasta X% menos»), y dos
   columnas: «Por qué aquí» a la izquierda y los precios a la derecha, con el
   botón de inscribirse DENTRO de esa columna, en el hueco que quedaba bajo
   los precios. Así se ve todo sin desplazarse.
   Por debajo de 900 px no caben dos columnas legibles: la comparativa se
   convierte en un botón que la abre en una hoja (ver .pa-compara-ov). */
.pa-cabecera { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.pa-cabecera .promo-badge-top { margin: 0; }
.pa-pct-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  background: none; border: 0; padding: 0.2rem 0.3rem; border-radius: 8px;
  font: 800 0.78rem/1 var(--ff-b, inherit); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pa-text, #fff);
}
.pa-pct-chip:hover { background: rgba(var(--pa-ov, 255,255,255), 0.1); }
.pa-chip-ico { width: 14px; height: 14px; }

.pa-doble { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(20px, 3.2vw, 40px); align-items: stretch; text-align: left; margin-top: 1rem; }
.pa-doble.sin-compara { grid-template-columns: minmax(0, 1fr); }
/*  La mitad de los precios, sobre un fondo apenas más oscuro y con una
    línea fina a la izquierda: sin eso las dos columnas se leen como una
    sola rejilla y no se distingue «por qué aquí» de «cuánto cuesta».
    El fondo sale de `--pa-bg2`, que el administrador puede cambiar.  */
.pa-doble-precios {
  min-width: 0;
  background: var(--pa-bg2, #F5F8FC);
  border-left: 1px solid rgba(var(--pa-ov, 10,31,68), .09);
  border-radius: 16px;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  margin: calc(-1 * clamp(0.5rem, 1vw, 0.8rem)) 0;
}
@media (max-width: 760px) {
  /*  En una columna la línea vertical cruzaría la caja por donde ya no
      separa nada: pasa a horizontal.  */
  .pa-doble-precios { border-left: 0; border-top: 1px solid rgba(var(--pa-ov, 10,31,68), .09); }
}
.pa-doble-precios .pa-niveles { text-align: center; }

/* La comparativa: cada fila, dos celdas. A la izquierda lo habitual, apagado;
   a la derecha ARDI, con el visto verde y el acento de la marca. */
/*  Las reglas de la comparativa están ARRIBA, con el resto del afiche.
    Aquí había una copia entera —titular en mayúsculas diminutas, filas de
    dos columnas sin icono— que ganaba por estar mil líneas más abajo: el
    diseño nuevo se escribió y la pantalla seguía enseñando el viejo.  */
.pa-compara { min-width: 0; }
.pa-visto { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #16A34A; }

/* El código de una institución aliada: aparece al elegir esa opción del
   desplegable. No cambia los precios —un código identifica al aliado, no un
   porcentaje—: comprueba que sirve y viaja con el botón de inscribirse. */
.pa-cod { margin-top: 0.5rem; }
.pa-cod[hidden] { display: none; }
.pa-cod-inp {
  width: 100%; padding: 0.5rem 0.7rem; border-radius: 10px;
  background: rgba(var(--pa-ov, 255,255,255), 0.08);
  border: 1px solid rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.45);
  color: var(--pa-text, #fff); font: 700 0.9rem/1 var(--ff-b, inherit);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.pa-cod-inp::placeholder { letter-spacing: normal; text-transform: none; font-weight: 600; opacity: .6; }
.pa-cod-msg { margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 700; min-height: 1em; }
.pa-cod-msg.bien { color: #3cb878; }
.pa-cod-msg.mal { color: #f87171; }
.pa-cod-msg.esperando { color: rgba(var(--pa-ov, 255,255,255), 0.6); }

/* El botón que la sustituye en pantallas estrechas. En el escritorio no se ve. */
.pa-compara-abrir {
  display: none; align-items: center; gap: 0.45rem; width: 100%; justify-content: center;
  margin: 0 0 0.8rem; padding: 0.55rem 0.9rem; border-radius: 12px; cursor: pointer;
  font: 700 0.85rem/1.2 var(--ff-b, inherit); color: var(--pa-text, #fff);
  background: rgba(var(--pa-ov, 255,255,255), 0.08);
  border: 1px solid rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.45);
}
.pa-compara-abrir:hover { background: rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.16); }

@media (max-width: 900px) {
  .pa-doble { grid-template-columns: minmax(0, 1fr); }
  .pa-doble > .pa-compara { display: none; }
  .pa-compara-abrir { display: inline-flex; }
}

/* La hoja de la comparativa (móvil). Por encima del cuadro de precios (9100)
   y por debajo de la bienvenida (9999). */
.pa-compara-ov {
  position: fixed; inset: 0; z-index: 9300; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8,14,30,.72); padding: 12px; animation: paOvIn .2s ease-out;
}
.pa-compara-hoja {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  background: linear-gradient(145deg, var(--pa-bg, var(--navy)) 0%, var(--pa-bg2, #26406F) 100%);
  color: var(--pa-text, #fff); border-radius: 18px; padding: 1.1rem 1rem 1rem;
  border: 1px solid rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.3);
  animation: paHoja .26s cubic-bezier(.2,.7,.3,1);
}
/* En la hoja, cada fila se lee de arriba abajo: lo habitual y, debajo, lo nuestro. */
.pa-compara-hoja li { grid-template-columns: minmax(0, 1fr); }
.pa-compara-hoja .pa-compara-bp { border-left: 0; border-top: 1px solid rgba(var(--pa-accent-rgb, var(--gold-light-rgb)), 0.35); }
.pa-compara-x {
  position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; font-size: 18px; line-height: 1;
}
@keyframes paOvIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes paHoja { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pa-compara-ov, .pa-compara-hoja { animation: none; } }

/* Los precios, un poco más cuidados sin exagerar: el «/mes» al lado, la
   tarjeta destacada con una línea de acento arriba y las tres a la misma
   altura. */
.pa-por-mes { font-size: 0.72rem; font-weight: 600; color: rgba(var(--pa-ov, 255,255,255), 0.55); }
.pa-card { position: relative; display: flex; flex-direction: column; }
.pa-card.destacada { box-shadow: inset 0 3px 0 var(--pa-accent, var(--gold)); }
.pa-card .pa-precio strong { font-size: clamp(1.6rem, 3vw, 1.95rem); }

/* El botón y el correo, en una fila bajo los precios: ocupan una línea en vez
   de tres, que es lo que obligaba a desplazarse. */
.pa-doble-precios .promo-cta-wrap {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem 1.15rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(var(--pa-ov, 255,255,255), 0.12);
}
.pa-doble-precios .promo-cta-wrap .promo-espera { flex-basis: 100%; margin: 0; text-align: center; }
.pa-doble-precios .promo-email { margin: 0; font-size: 0.78rem; }

/*  Volver al inicio desde otra página no repite la intro (js/main.js).  */
.sin-intro #welcome-screen { display: none !important; }