/* ==========================================================================
   MUNDO INFORMATICA
   Centro de Formacion y Capacitacion Laboral, Ciudad del Este.
   NovaSolutions. Un solo archivo, HTML/CSS/JS a mano, sin dependencias.

   ---------------------------------------------------------------------------
   DIRECCION DE DISENO
   El objeto fisico de referencia es el prospecto de una escuela de oficios:
   un afiche de inscripcion pegado en la ventana del instituto. Senaletica,
   no revista. Catalogo de cursos, no tarjetitas.

   DOS PISOS Y NADA MAS
     AZUL   #211EE6 (el color que pidio el cliente). Hero, la banda del
            certificado, e inscripcion + pie. El azul carga la marca.
     PAPEL  Blanco frio, casi sin croma. Cursos, practica, turnos, sedes,
            preguntas.
   No existe un tercer piso. Si aparece uno, es un error. Los bloques azules
   y los de papel se alternan a proposito: azul, papel, azul, papel, azul.

   TIPOGRAFIA
     Una sola familia: Archivo (Omnibus-Type, Buenos Aires). Es una grotesca
     pensada para senaletica y para el espanol de America Latina. La jerarquia
     sale del eje de ancho y del peso, no de una segunda fuente:
       titulares  -> ancho 82 (semi condensado), peso 800
       texto      -> ancho 100, peso 400/500
     El semi condensado no es un capricho: las palabras del espanol son largas
     y asi entran enteras en el ancho de un celular.

   ESQUINAS
     Radio 0 en absolutamente todo. Botones, fotos, campos, el boton de
     WhatsApp. La esquina viva es la decision que separa esto de una plantilla.

   MOVIMIENTO
     Un solo momento coreografiado: la entrada del hero. Nada de aparecer al
     hacer scroll seccion por seccion. Despues de eso el movimiento solo
     responde al usuario (hover de curso, pulsacion de boton, acordeon).

   FOTOS
     Sobre piso AZUL van en duotono (escala de grises en modo screen: las
     sombras toman el azul, las luces quedan blancas).
     Sobre piso PAPEL van a color pleno.
   ========================================================================== */

:root{
  /* --- marca ------------------------------------------------------------ */
  --azul:        #211EE6;   /* blanco encima = 8.7:1, AAA */
  --azul-hondo:  #150FA8;   /* pulsado */
  --azul-texto:  #211EE6;   /* azul como texto sobre papel = 8.7:1, AAA */
  --sobre-azul:  #FFFFFF;
  --sobre-azul-2:#C9CAFF;   /* secundario sobre azul = 5.9:1, AA */

  /* --- pisos ------------------------------------------------------------ */
  --papel:       #F3F4F8;
  --papel-alto:  #FFFFFF;
  --tinta:       #0C0E1C;
  --tinta-2:     #4B4E63;   /* sobre papel = 7.4:1, AAA */

  --linea:       rgba(12,14,28,.16);
  --linea-suave: rgba(12,14,28,.08);
  --linea-azul:  rgba(255,255,255,.24);

  /* --- medidas ---------------------------------------------------------- */
  --ancho:       1240px;
  --canal:       clamp(20px, 4vw, 48px);
  --nav:         64px;

  /* --- curvas (Emil Kowalski) ------------------------------------------- */
  --out:   cubic-bezier(.23, 1, .32, 1);      /* ease-out fuerte */
  --inout: cubic-bezier(.77, 0, .175, 1);
}

@media (prefers-color-scheme: dark){
  :root{
    --papel:       #0B0C18;
    --papel-alto:  #12142A;
    --tinta:       #EDEEF5;
    --tinta-2:     #9EA1B8;              /* sobre papel oscuro = 7.6:1, AAA */
    --azul-texto:  #6E6BFF;              /* sobre papel oscuro = 4.8:1, AA */
    --linea:       rgba(237,238,245,.20);
    --linea-suave: rgba(237,238,245,.10);
  }
}
/* El azul de marca no cambia entre modos. Es la identidad, no una superficie. */

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav) + 12px);
  interpolate-size:allow-keywords;   /* habilita animar hacia height:auto */
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--azul-texto); outline-offset:2px; }
.azul :focus-visible{ outline-color:#FFFFFF; }

.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--canal); }

/* ---------- tipografia ---------------------------------------------------- */
h1,h2,h3{
  margin:0;
  font-variation-settings:'wdth' 82;
  font-weight:800;
  line-height:.98;
  letter-spacing:-.025em;
  text-wrap:balance;
}
/* El techo del clamp está calculado para que las dos frases del titular
   entren enteras, cada una en una línea, desde 961px para arriba. */
h1{ font-size:clamp(2.2rem, 6.4vw, 4.75rem); }
h2{ font-size:clamp(2.1rem, 5.2vw, 3.6rem); }
h3{ font-size:clamp(1.25rem, 2.4vw, 1.6rem); line-height:1.05; }
p{ margin:0; text-wrap:pretty; }

.bajada{
  font-size:clamp(1.02rem, 1.5vw, 1.2rem);
  line-height:1.5;
  color:var(--tinta-2);
  max-width:46ch;
}
.azul .bajada{ color:var(--sobre-azul-2); }

/* ---------- botones ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px;
  border:2px solid transparent;
  border-radius:0;
  font-weight:700; font-size:1rem; letter-spacing:-.01em;
  font-variation-settings:'wdth' 92;
  cursor:pointer; white-space:nowrap;
  transition:background-color .18s var(--out), color .18s var(--out),
             border-color .18s var(--out), transform .16s var(--out);
}
/* Pulsacion tactil: 0.97 y salida rapida (Kowalski, timing asimetrico). */
.btn:active{ transform:scale(.97); transition-duration:.1s; }

.btn-solido{ background:var(--tinta); color:var(--papel-alto); border-color:var(--tinta); }
.btn-solido:hover{ background:var(--azul); border-color:var(--azul); color:#fff; }

.btn-linea{ background:transparent; color:var(--tinta); border-color:var(--linea); }
.btn-linea:hover{ border-color:var(--tinta); }

/* sobre piso azul se invierten */
.azul .btn-solido{ background:#fff; color:var(--azul); border-color:#fff; }
.azul .btn-solido:hover{ background:var(--tinta); border-color:var(--tinta); color:#fff; }
.azul .btn-linea{ color:#fff; border-color:var(--linea-azul); }
.azul .btn-linea:hover{ border-color:#fff; }

.btn-chico{ padding:11px 20px; font-size:.94rem; }

/* ==========================================================================
   NAV
   Se apoya sobre el hero azul y cambia a papel cuando lo deja atras.
   No es un cambio de tema: la barra toma el color del piso que tiene debajo.
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--nav);
  display:flex; align-items:center;
  color:#fff;
  border-bottom:1px solid transparent;
  transition:background-color .25s var(--out), color .25s var(--out), border-color .25s var(--out);
}
.nav.pisando{
  background:var(--papel);
  color:var(--tinta);
  border-bottom-color:var(--linea);
}
.nav .wrap{ display:flex; align-items:center; gap:28px; }

.marca{
  margin-right:auto;
  display:flex; align-items:center; gap:.5em;
  font-variation-settings:'wdth' 82;
  font-weight:800; font-size:1.16rem; letter-spacing:-.03em;
  text-transform:uppercase;
}
.marca > span{ display:flex; align-items:baseline; gap:.42em; }
.marca i{ font-style:normal; font-weight:400; opacity:.62; }
/* El logo real del instituto. Vienen las dos versiones en el HTML y el CSS
   elige cual se ve, sin JavaScript:
     sobre AZUL  -> el globo blanco, con la retícula y los continentes calados
     sobre PAPEL -> el globo a color
   32px es el piso: mas chico que eso, el detalle del globo se hace un borron. */
.marca-globo{ width:32px; height:auto; flex:none; }
.marca-globo-color{ display:none; }
.nav.pisando .marca-globo-claro{ display:none; }
.nav.pisando .marca-globo-color{ display:block; }
/* El pie siempre es piso azul: ahi va el blanco y punto. */
footer .marca-globo-claro{ display:block; }
footer .marca-globo-color{ display:none; }

.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-size:.95rem; font-weight:500;
  padding-block:4px;
  border-bottom:2px solid transparent;
  transition:border-color .18s var(--out);
}
.nav-links a:hover{ border-bottom-color:currentColor; }

.hamb{
  display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer; color:inherit;
  align-items:center; justify-content:center;
}
.hamb span{ display:block; width:22px; height:2px; background:currentColor; position:relative; transition:background-color .2s; }
.hamb span::before,.hamb span::after{
  content:''; position:absolute; left:0; width:22px; height:2px; background:currentColor;
  transition:transform .25s var(--out), top .25s var(--out);
}
.hamb span::before{ top:-7px; }
.hamb span::after{ top:7px; }
.hamb[aria-expanded="true"] span{ background:transparent; }
.hamb[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.hamb[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.menu{
  position:fixed; top:var(--nav); left:0; right:0; z-index:59;
  background:var(--papel); color:var(--tinta);
  border-bottom:1px solid var(--linea);
  padding:8px var(--canal) 24px;
  display:none; flex-direction:column;
}
.menu.abierto{ display:flex; }
.menu a{ padding:16px 0; border-bottom:1px solid var(--linea-suave); font-variation-settings:'wdth' 88; font-weight:700; font-size:1.3rem; }
.menu .btn{ margin-top:20px; }

/* ==========================================================================
   PISO AZUL
   ========================================================================== */
.azul{ background:var(--azul); color:var(--sobre-azul); }

/* Duotono: la foto va en gris y en modo screen sobre el azul.
   Las sombras se tinen de azul, las luces quedan claras. */
.duo{ background:var(--azul); overflow:hidden; }
.duo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.04);
  mix-blend-mode:screen;
  opacity:.92;
}

/* ---------- HERO ---------------------------------------------------------- */
.hero{ padding-top:calc(var(--nav) + clamp(48px, 8vw, 96px)); padding-bottom:0; overflow:hidden; }
.hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
.hero-texto{ padding-bottom:clamp(56px, 8vw, 104px); }

.hero h1{ margin-bottom:26px; }
/* Cada linea vive en una ventana con overflow oculto para poder subirla. */
.linea-h1{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.linea-h1 > span{ display:block; }

.hero-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.hero-foto{ position:relative; aspect-ratio:4/3.1; clip-path:inset(0); }
.hero-foto img{ position:absolute; inset:0; }

/* De 961px para arriba la foto sangra hasta el borde derecho de la pantalla.
   En vez de sacarla con un margen negativo, le saco el padding derecho al
   contenedor y le empujo el padding izquierdo hasta donde arranca la columna
   del resto de la página. Así el texto sigue alineado con todo lo demás y la
   foto llega exacta al borde, sin recortes ni desbordes laterales. */
@media (min-width:961px){
  .hero .wrap{
    max-width:none;
    padding-right:0;
    /* Mismo cálculo que hace .wrap para centrarse (100% del ancho real,
       no 100vw: vw incluye la barra de scroll y desalinea 7px). */
    padding-left:max(var(--canal), calc((100% - var(--ancho)) / 2 + var(--canal)));
    grid-template-columns:minmax(0,1fr) minmax(0, clamp(320px, 38vw, 620px));
  }
}

@media (prefers-reduced-motion: no-preference){
  .linea-h1 > span{ animation:subir .82s var(--out) both; }
  .linea-h1:nth-of-type(2) > span{ animation-delay:.09s; }
  .hero .bajada{ animation:asomar .7s var(--out) .24s both; }
  .hero-acciones{ animation:asomar .7s var(--out) .34s both; }
  .hero-foto{ animation:persiana .95s var(--out) .12s both; }
}
@keyframes subir{ from{ transform:translateY(105%); } }
@keyframes asomar{ from{ opacity:0; transform:translateY(14px); } }
@keyframes persiana{ from{ clip-path:inset(100% 0 0 0); } }

/* ==========================================================================
   CURSOS
   Indice de catalogo, no tarjetas. Cada curso es una fila del ancho completo.
   Al pasar el mouse, el azul entra desde la izquierda.
   ========================================================================== */
.seccion{ padding-block:clamp(72px, 10vw, 128px); }
.titulo{ margin-bottom:clamp(36px, 5vw, 56px); }
.titulo h2{ max-width:16ch; }
.titulo .bajada{ margin-top:18px; }

.indice{ border-top:1px solid var(--linea); }

.curso{
  position:relative; isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;
  gap:clamp(16px, 3vw, 48px);
  align-items:baseline;
  padding:clamp(22px, 3vw, 30px) 0;
  border-bottom:1px solid var(--linea);
  color:inherit;
}
/* El relleno azul se dibuja detras y crece desde la izquierda. */
.curso::before{
  content:''; position:absolute; z-index:-1;
  inset:0 calc(var(--canal) * -1);
  background:var(--azul);
  transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--out);
}
.curso-nombre{
  font-variation-settings:'wdth' 82;
  font-weight:800; letter-spacing:-.025em; line-height:1;
  font-size:clamp(1.6rem, 3.6vw, 2.5rem);
}
.curso-para{ font-size:.98rem; color:var(--tinta-2); line-height:1.45; }
/* La flecha es la única señal de que la fila se puede tocar. No repito el
   turno en cada fila: es el mismo para los seis y eso ya está dicho arriba. */
.curso-flecha{
  font-size:1.5rem; line-height:1; color:var(--tinta-2); align-self:center;
  transition:transform .3s var(--out), color .2s var(--out);
}

@media (hover:hover) and (pointer:fine){
  .curso:hover::before{ transform:scaleX(1); }
  .curso:hover{ color:#fff; }
  .curso:hover .curso-para{ color:rgba(255,255,255,.84); }
  .curso:hover .curso-flecha{ color:#fff; transform:translateX(10px); }
}
/* En pantallas tactiles no hay hover: el azul entra al tocar. */
.curso:active::before{ transform:scaleX(1); }

.nota-indice{ margin-top:26px; font-size:.96rem; color:var(--tinta-2); }
.nota-indice a{ color:var(--azul-texto); font-weight:700; border-bottom:2px solid currentColor; }

/* ==========================================================================
   PLANES
   Dos caminos reales, no tres tarjetas iguales. El programa de 8 meses es el
   principal y por eso es un bloque de azul macizo; el intensivo de 2 meses va
   perfilado sobre papel. La diferencia de peso dice cual es cual sin rotulos.
   ========================================================================== */
.planes-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:2px; align-items:stretch; }
.plan{ display:flex; flex-direction:column; padding:clamp(28px,3.6vw,44px); }
/* Lleva además la clase .azul en el HTML: es un piso azul, no una excepción.
   De ahí saca el botón blanco y el anillo de foco blanco. */
.plan-principal{ background:var(--azul); color:var(--sobre-azul); }
.plan-otro{ background:var(--papel-alto); box-shadow:inset 0 0 0 1px var(--linea); }

.plan-tipo{
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:20px;
}
.plan-principal .plan-tipo{ color:var(--sobre-azul-2); }
.plan-otro .plan-tipo{ color:var(--azul-texto); }

.plan-precio{
  font-variation-settings:'wdth' 82;
  font-weight:800; letter-spacing:-.03em; line-height:.88;
  font-size:clamp(2.5rem, 5.6vw, 4rem);
  font-variant-numeric:tabular-nums;
}
.plan-precio span{ font-size:.32em; font-weight:700; letter-spacing:.04em; font-variation-settings:'wdth' 100; }
.plan-cuando{ margin-top:12px; font-size:1rem; }
.plan-principal .plan-cuando{ color:var(--sobre-azul-2); }
.plan-otro .plan-cuando{ color:var(--tinta-2); }

.plan ul{ margin:26px 0 0; padding:0; list-style:none; }
.plan li{ padding:13px 0; border-top:1px solid var(--linea); font-size:.96rem; }
.plan-principal li{ border-top-color:var(--linea-azul); }
.plan .btn{ margin-top:auto; align-self:flex-start; }
.plan ul + .btn{ margin-top:28px; }

.planes-barrio{
  margin-top:2px; padding:22px clamp(28px,3.6vw,44px);
  background:var(--papel-alto); box-shadow:inset 0 0 0 1px var(--linea);
  font-size:1.02rem; font-weight:500;
}
.planes-barrio b{ font-weight:800; font-variation-settings:'wdth' 88; }

/* ==========================================================================
   PRACTICA
   Banda de tres fotos de borde a borde. Las leyendas van debajo de la foto,
   nunca encima.
   ========================================================================== */
.practica{ padding-bottom:clamp(72px, 10vw, 128px); }
.practica h2{ max-width:20ch; margin-bottom:clamp(32px, 4vw, 48px); }
.tira{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; }
.tira figure{ margin:0; background:var(--papel-alto); }
.tira img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.tira figcaption{
  padding:16px clamp(14px, 2vw, 22px) 20px;
  font-size:.93rem; color:var(--tinta-2); line-height:1.4;
}
.tira b{ display:block; color:var(--tinta); font-weight:700; margin-bottom:3px; }

/* ==========================================================================
   CERTIFICADO
   Un solo pensamiento por pantalla. Texto grande sobre la foto en duotono.
   ========================================================================== */
.certificado{ position:relative; isolation:isolate; overflow:hidden; }
.certificado .fondo{ position:absolute; inset:0; z-index:-2; }
.certificado .fondo img{ width:100%; height:100%; object-fit:cover; }
/* Velo azul: sube el contraste del texto por encima de AA sin apagar la foto. */
.certificado::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(33,30,230,.94) 0%, rgba(33,30,230,.94) 46%, rgba(33,30,230,.62) 100%);
}
.certificado .wrap{ padding-block:clamp(96px, 14vw, 176px); }
.certificado h2{ max-width:13ch; }
.certificado p{ margin-top:24px; max-width:44ch; font-size:clamp(1.05rem,1.6vw,1.25rem); color:#fff; }

/* ==========================================================================
   TURNOS
   Un horario, no tres tarjetas. Numeros grandes y lineas finas.
   ========================================================================== */
.horario{ display:grid; grid-template-columns:repeat(3, 1fr); border-top:2px solid var(--tinta); }
.turno{ padding:clamp(26px,3.4vw,36px) 0 clamp(30px,4vw,44px); border-bottom:1px solid var(--linea); }
.horario .turno + .turno{ border-left:1px solid var(--linea); padding-left:clamp(20px,3vw,36px); }
.turno-nombre{
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul-texto); margin-bottom:14px;
}
.turno-hora{
  font-variation-settings:'wdth' 82;
  font-weight:800; letter-spacing:-.03em; line-height:.92;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  font-variant-numeric:tabular-nums;
}
.turno-hora small{ display:block; font-size:.34em; font-weight:500; letter-spacing:0; font-variation-settings:'wdth' 100; color:var(--tinta-2); margin-top:10px; }
.turno-nota{ margin-top:16px; font-size:.94rem; color:var(--tinta-2); max-width:26ch; }

/* ==========================================================================
   SEDES
   Bloque tipografico a dos columnas. Sin fotos: lo que importa es la direccion.
   ========================================================================== */
.sedes-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2px; background:var(--linea); }
.sede{ background:var(--papel); padding:clamp(28px,4vw,44px); }
.sede-km{
  font-variation-settings:'wdth' 82;
  font-weight:800; font-size:clamp(2rem,4.4vw,3rem); line-height:1; letter-spacing:-.03em;
  margin-bottom:14px;
}
.sede-donde{ font-size:1rem; color:var(--tinta-2); }
.sede-ref{
  margin-top:20px; padding-top:20px; border-top:1px solid var(--linea-suave);
  font-size:.96rem; font-weight:500;
}
.sede .btn{ margin-top:26px; }

/* ==========================================================================
   PREGUNTAS
   ========================================================================== */
.preguntas{ max-width:820px; }
.preguntas details{ border-bottom:1px solid var(--linea); }
.preguntas details:first-of-type{ border-top:1px solid var(--linea); }
.preguntas summary{
  cursor:pointer; list-style:none;
  padding:24px 44px 24px 0; position:relative;
  font-variation-settings:'wdth' 88;
  font-weight:700; font-size:clamp(1.05rem,1.9vw,1.28rem); line-height:1.25;
}
.preguntas summary::-webkit-details-marker{ display:none; }
.preguntas summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:14px; height:2px; background:currentColor;
  transition:transform .26s var(--out);
}
.preguntas summary::before{
  content:''; position:absolute; right:6px; top:50%;
  width:14px; height:2px; background:var(--azul-texto);
  transform:rotate(90deg);
  transition:transform .26s var(--out), opacity .26s var(--out);
}
.preguntas details[open] summary::before{ transform:rotate(0deg); opacity:0; }
.preguntas .respuesta{ padding:0 clamp(20px,6vw,90px) 26px 0; color:var(--tinta-2); }

/* Animacion nativa del acordeon donde el navegador la soporta.
   Donde no, abre y cierra al instante: no se rompe nada. */
@media (prefers-reduced-motion: no-preference){
  .preguntas details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .28s var(--out), content-visibility .28s allow-discrete;
  }
  .preguntas details[open]::details-content{ block-size:auto; }
}

/* ==========================================================================
   INSCRIPCION
   ========================================================================== */
.inscripcion .wrap{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(40px, 6vw, 88px);
  align-items:start;
}
.datos{ margin-top:36px; border-top:1px solid var(--linea-azul); }
.dato{ padding:20px 0; border-bottom:1px solid var(--linea-azul); }
.dato dt{ font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--sobre-azul-2); margin-bottom:6px; }
.dato dd{ margin:0; font-size:1.02rem; line-height:1.4; }
.dato a{ border-bottom:2px solid rgba(255,255,255,.4); }
.dato a:hover{ border-bottom-color:#fff; }

/* Formulario sin servidor: arma el mensaje y lo abre en WhatsApp.
   Campos blancos y macizos sobre el azul: maximo contraste, cero vidrio. */
.formulario{ background:var(--papel-alto); color:var(--tinta); padding:clamp(26px,3.6vw,40px); }
.formulario h3{ margin-bottom:22px; }
.campo{ margin-bottom:18px; }
.campo label{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.02em; margin-bottom:7px; }
.campo input,.campo select,.campo textarea{
  width:100%; padding:14px 15px;
  background:#fff; color:#0C0E1C;
  border:1px solid #B9BCCC; border-radius:0;
  font-size:1rem;
  transition:border-color .16s var(--out), box-shadow .16s var(--out);
}
.campo input::placeholder,.campo textarea::placeholder{ color:#5B5E73; }   /* 6.0:1 sobre blanco */
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:inset 0 0 0 1px var(--azul);
}
.campo textarea{ resize:vertical; min-height:88px; }
.campo.mal input,.campo.mal select{ border-color:#C6262E; box-shadow:inset 0 0 0 1px #C6262E; }
.error{ display:none; margin-top:6px; font-size:.84rem; font-weight:600; color:#A81D24; }  /* 6.4:1 sobre blanco */
.campo.mal .error{ display:block; }
.formulario .btn{ width:100%; background:var(--azul); color:#fff; border-color:var(--azul); }
.formulario .btn:hover{ background:var(--azul-hondo); border-color:var(--azul-hondo); }
.letra-chica{ margin-top:14px; font-size:.84rem; color:var(--tinta-2); text-align:center; }

/* ==========================================================================
   PIE
   Sigue siendo piso azul: inscripcion y pie son un solo bloque.
   ========================================================================== */
footer{ border-top:1px solid var(--linea-azul); padding-block:clamp(44px,6vw,64px) 28px; }
.pie-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px; }
.pie-grid p{ margin-top:16px; max-width:34ch; font-size:.94rem; color:var(--sobre-azul-2); }
footer h4{ margin:0 0 14px; font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--sobre-azul-2); }
.pie-col a{ display:block; padding:5px 0; font-size:.95rem; color:var(--sobre-azul-2); }
.pie-col a:hover{ color:#fff; }
.pie-abajo{
  margin-top:clamp(40px,5vw,60px); padding-top:22px; border-top:1px solid var(--linea-azul);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-size:.85rem; color:var(--sobre-azul-2);
}
.pie-abajo a{ color:#fff; font-weight:600; }

/* ==========================================================================
   BOTON FLOTANTE DE WHATSAPP
   Cuadrado y en tinta, no el circulo verde de siempre: mantiene el sistema
   de dos colores y de esquinas vivas. El icono ya dice que es WhatsApp.
   (Para pasarlo al verde de WhatsApp, cambiar background a #25D366.)
   ========================================================================== */
.wa{
  position:fixed; right:0; bottom:0; z-index:55;
  width:60px; height:60px;
  background:var(--tinta); color:var(--papel);
  display:grid; place-items:center;
  transition:background-color .18s var(--out);
}
.wa:hover{ background:var(--azul); color:#fff; }
.wa svg{ width:28px; height:28px; }

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

/* ==========================================================================
   PANTALLAS CHICAS
   ========================================================================== */
@media (max-width:960px){
  .hero .wrap{ grid-template-columns:1fr; gap:0; align-items:start; }
  .hero-texto{ padding-bottom:clamp(40px,7vw,64px); }
  .hero-foto{ margin-inline:calc(var(--canal) * -1); aspect-ratio:16/10; }
  .curso{ grid-template-columns:1fr; gap:8px; }
  .curso-turnos{ align-self:start; }
  .tira{ grid-template-columns:1fr; }
  .tira img{ aspect-ratio:16/10; }
  .tira figcaption{ padding-inline:var(--canal); }
  .horario{ grid-template-columns:1fr; }
  .horario .turno + .turno{ border-left:0; padding-left:0; }
  .planes-grid{ grid-template-columns:1fr; }
  .sedes-grid{ grid-template-columns:1fr; }
  /* En una columna los bloques dejan de ser tarjetas: alinean con el canal. */
  .sede{ padding-inline:var(--canal); }
  .inscripcion .wrap{ grid-template-columns:1fr; }
  .pie-grid{ grid-template-columns:1fr 1fr; }
  .pie-grid > :first-child{ grid-column:1 / -1; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .nav-links{ display:none; }
  .nav .btn{ display:none; }
  .hamb{ display:flex; }
  .pie-grid{ grid-template-columns:1fr; gap:30px; }
  .pie-grid > :first-child{ grid-column:auto; }
  .hero-acciones .btn{ flex:1 1 100%; }
}

/* ==========================================================================
   PAGINAS INTERNAS
   Todo lo de abajo se agrego al pasar de una sola pagina con anclas a un
   sitio de 13 paginas con URL propia. Reusa los mismos dos pisos, la misma
   tipografia y el mismo radio 0: son paginas nuevas, no un sistema nuevo.
   ========================================================================== */

/* --- marca la pagina actual en la barra ---------------------------------- */
.nav-links a[aria-current="page"]{ border-bottom-color:currentColor; }
.menu a[aria-current="page"]{ color:var(--azul-texto); }

/* --- cabecera de pagina interna ------------------------------------------
   Mas baja que el hero de la portada: acá el visitante ya entró, no hay que
   volver a venderle la idea, hay que ubicarlo.
   -------------------------------------------------------------------------- */
.cabecera{ padding-top:calc(var(--nav) + clamp(40px, 6vw, 76px)); padding-bottom:clamp(44px, 6vw, 76px); }
.cabecera h1{ font-size:clamp(2.1rem, 5.4vw, 3.9rem); max-width:18ch; }
.cabecera .bajada{ margin-top:20px; max-width:52ch; }

/* migas: dónde estoy y cómo vuelvo */
.migas{ display:flex; flex-wrap:wrap; align-items:center; gap:.55em; margin-bottom:22px; font-size:.9rem; }
.migas a{ color:var(--sobre-azul-2); border-bottom:1px solid transparent; }
.migas a:hover{ color:#fff; border-bottom-color:currentColor; }
.migas span{ color:var(--sobre-azul-2); }
.migas i{ font-style:normal; opacity:.5; }

/* fichas de la cabecera del curso: duración, precio, turnos */
.fichas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.ficha{
  padding:9px 15px;
  border:1px solid var(--linea-azul);
  font-size:.88rem; font-weight:600;
}
.ficha b{ font-weight:800; font-variation-settings:'wdth' 88; }

.cabecera-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* --- cuerpo de la ficha de curso ------------------------------------------ */
.dos-col{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px, 5vw, 72px); align-items:start;
}
.dos-col h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
.bloque-texto h2 + p{ margin-top:18px; }
.bloque-texto p + p{ margin-top:16px; }
.bloque-texto p{ color:var(--tinta-2); }

/* temario: dos columnas de items con línea fina, no viñetas */
.temario{ margin:0; padding:0; list-style:none; columns:2; column-gap:clamp(24px,3vw,44px); }
.temario li{
  break-inside:avoid;
  padding:13px 0; border-top:1px solid var(--linea);
  font-size:.97rem;
}

/* datos duros del curso: definición a la izquierda, valor a la derecha */
.datos-curso{ margin:0; border-top:2px solid var(--tinta); }
.datos-curso > div{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px;
  padding:16px 0; border-bottom:1px solid var(--linea);
}
.datos-curso dt{ font-size:.8rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-2); }
.datos-curso dd{ margin:0; font-size:1rem; }
.datos-curso dd b{ font-weight:800; font-variation-settings:'wdth' 88; }

/* --- banda de llamada al final de cada página interna --------------------- */
.cta-banda .wrap{ padding-block:clamp(64px, 8vw, 104px); }
.cta-banda h2{ max-width:15ch; }
.cta-banda .bajada{ margin-top:18px; }
.cta-banda .cabecera-acciones{ margin-top:30px; }

/* --- índice compacto de los otros cursos ---------------------------------- */
.otros{ border-top:1px solid var(--linea); }
.otro{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:18px 0; border-bottom:1px solid var(--linea);
}
.otro-nombre{
  font-variation-settings:'wdth' 86; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.05rem, 2vw, 1.35rem);
}
.otro span:last-child{ color:var(--tinta-2); transition:transform .26s var(--out), color .2s var(--out); }
@media (hover:hover) and (pointer:fine){
  .otro:hover .otro-nombre{ color:var(--azul-texto); }
  .otro:hover span:last-child{ color:var(--azul-texto); transform:translateX(8px); }
}

@media (max-width:960px){
  .dos-col{ grid-template-columns:1fr; }
  .temario{ columns:1; }
}

/* ==========================================================================
   GALERIA
   Fotos reales del instituto, de borde a borde. Van a COLOR PLENO, no en
   duotono: el duotono servia para que las fotos de banco no desentonaran, y
   estas no son de banco. Que se vea el verde de las paredes es la gracia.
   Ritmo 2-3-2: la grilla es de 6 columnas y cada foto ocupa 2 o 3, asi las
   filas cierran exactas y ninguna celda queda vacia.
   ========================================================================== */
.galeria{ display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; }
/* Fondo de espera: las fotos son lazy, asi que hasta que entran en pantalla
   la celda esta vacia. Con este tinte se lee como "una foto que esta por
   cargar" y no como un hueco roto. Es el azul de marca al 6%, no un color
   nuevo. */
.galeria figure{ margin:0; grid-column:span 2; overflow:hidden; background:rgba(33,30,230,.06); }
.galeria figure.ancha{ grid-column:span 3; }
.galeria img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .5s var(--out);
}
/* Un acercamiento apenas perceptible al pasar el mouse: da a entender que la
   foto es una foto y no un adorno, sin convertir la galeria en un carrusel. */
@media (hover:hover) and (pointer:fine){
  .galeria figure:hover img{ transform:scale(1.03); }
}

@media (max-width:760px){
  .galeria figure,
  .galeria figure.ancha{ grid-column:span 6; }
}