/* main.css — FIRST English Centre · diferido. Capas declaradas en critico.css: base, layout, components, motion. */
@layer components{
/* enlaces y botones: estados */
a{transition:color var(--dur-1) var(--ease-std),text-decoration-thickness var(--dur-1) var(--ease-std)}
a:hover{color:var(--navy-deep);text-decoration-thickness:2px}
.banda-oscura a:hover,.pie a:hover{color:var(--white)}
.btn{transition:background-color var(--dur-1) var(--ease-std),color var(--dur-1) var(--ease-std),border-color var(--dur-1) var(--ease-std),transform var(--dur-2) var(--ease-std)}
.btn--primario:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--white)}
.btn--secundario:hover{background:var(--sky-tint);color:var(--navy-deep)}
.btn--claro.btn--primario:hover{background:var(--white);color:var(--navy-deep);border-color:var(--white)}
.btn--claro.btn--secundario:hover{background:var(--white);color:var(--navy)}
.btn:active{transform:translateY(1px)}
.cab__nav a{transition:color var(--dur-1) var(--ease-std)}
.cab__nav a:hover{color:var(--navy-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.barra a{transition:background-color var(--dur-1) var(--ease-std)}
.barra a:hover{background:var(--white)}
/* reseñas */
.resena{margin:0;background:var(--white);border:1px solid var(--hairline);padding:var(--s-5)}
.resena p{font-size:var(--fs-1);line-height:1.4;hanging-punctuation:first}
.resena footer{color:var(--grey);font-size:var(--fs--1)}
.resenas{display:grid;gap:var(--s-5)}
@media(min-width:700px){.resenas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form{max-width:38rem;background:var(--white);border:1px solid var(--hairline);padding:var(--s-5)}
.campo{margin-bottom:var(--s-4)}
.campo label{display:block;font-weight:800;margin-bottom:var(--s-1)}
.campo input:not([type=checkbox]),.campo textarea{width:100%;font:inherit;padding:.6rem .75rem;border:2px solid var(--line);background:var(--white);color:var(--ink);min-height:48px;field-sizing:content}
.campo input:focus-visible,.campo textarea:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.campo.invalido input,.campo.invalido textarea{border-color:var(--error)}
.campo--check{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2);align-items:start}
.campo--check input{width:1.5rem;height:1.5rem;margin:.15rem 0 0;accent-color:var(--navy)}
.campo--check label{font-weight:400;margin:0}
.campo--check .error{grid-column:1/-1}
.campo--trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.error{color:var(--error);background:var(--error-tint);padding:.4rem .6rem;font-size:var(--fs--1);margin:.4rem 0 0}
.error::before{content:"⚠ ";font-weight:800}
.capa1{font-size:var(--fs--1);margin-top:var(--s-4);color:var(--ink)}
}
@layer motion{
/* un solo momento al cargar: la escala sube escalón a escalón (nunca h1, entradilla, CTA ni LCP) */
@keyframes subir{from{opacity:0;transform:translateY(10%)}}
.escala li{animation:subir var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i) * 40ms)}
/* entradas al hacer scroll: CSS con view() donde existe; IntersectionObserver (clase .js-reveal) donde no */
@keyframes aparecer{from{opacity:0;transform:translateY(12px)}}
@supports (animation-timeline:view()){
.reveal{animation:aparecer linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
.js-reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.js-reveal.visible{opacity:1;transform:none}
/* transiciones entre páginas (mismo origen): la cabecera no parpadea */
@view-transition{navigation:auto}
.cab{view-transition-name:cab}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:0ms!important;animation:none!important;transition-delay:0ms!important}
html{scroll-behavior:auto}
.reveal,.js-reveal{opacity:1;transform:none}
.btn:active{transform:none}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
}
@media print{.cab,.barra,.pie__enlaces,.btn,.salto{display:none}.hero{background:none;color:var(--ink)}.hero::before{display:none}body{padding-bottom:0}}
@layer components{
/* v2.1 (12/10/2026) · pregunta desplegable de precios y horarios en Cursos (X-02) y botón de WhatsApp en la banda de Cambridge (X-01) */
.faq{max-width:var(--medida);margin:0 0 var(--s-6);border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;font-weight:800;color:var(--navy);padding-block:var(--s-3)}
.faq summary:hover{color:var(--navy-deep)}
.faq p{margin:0 0 var(--s-4)}
.cambridge__cta{margin-top:var(--s-6)}
}

/* esquinas Euler del kernel af_kernel v2.0.0 (regla 5; clotoide de Fresnel, nunca border-radius). Cada pieza es el SVG de euler_rect_path() en 9 cortes:
   las esquinas no se deforman a ningún ancho. Van en la hoja diferida: no retrasan el primer pintado y no mueven nada al llegar (CLS 0). A: botón «chip» 8,04 (7,71 con trazo de 2 px), escalón «barra_fina» 6 */
@layer components{
/* con Euler el fondo y el borde los pinta la imagen: no se transicionan (al llegar esta hoja no hay fundido y no hay animaciones no compuestas) */
.btn{transition:color var(--dur-1) var(--ease-std),transform var(--dur-2) var(--ease-std)}
.btn--primario{background:none;border-color:transparent;border-image:url(../img/e-p.svg) 13 fill / 13px stretch}
.btn--primario:hover{background:none;border-color:transparent;border-image-source:url(../img/e-p-h.svg)}
.btn--secundario{border-color:transparent;border-image:url(../img/e-s.svg) 15 fill / 15px stretch}
.btn--secundario:hover{background:none;border-image-source:url(../img/e-s-h.svg)}
.btn--claro.btn--primario{background:none;border-color:transparent;border-image:url(../img/e-cp.svg) 13 fill / 13px stretch}
.btn--claro.btn--primario:hover{background:none;border-color:transparent;border-image-source:url(../img/e-cp.svg)}
.btn--claro.btn--secundario{border-color:transparent;border-image:url(../img/e-cs.svg) 15 fill / 15px stretch}
.btn--claro.btn--secundario:hover{background:none;border-image-source:url(../img/e-cs-h.svg)}
.escala li{background:none;border:0 solid transparent;border-image:url(../img/e-esc.svg) 10 fill / 10px stretch}
.barra a{border-color:transparent;border-image:url(../img/e-s.svg) 15 fill / 15px stretch}
.barra a:hover{background:none;border-image-source:url(../img/e-s-h.svg)}
.barra a:first-child{background:none;border:2px solid transparent;border-image:url(../img/e-p.svg) 13 fill / 13px stretch}
.barra a:first-child:hover{border-image-source:url(../img/e-p-h.svg)}
html.js .cab__menu{border-color:transparent;border-image:url(../img/e-s.svg) 15 fill / 15px stretch}
html.js .cab__menu[aria-expanded="true"]{background:none;border-image:url(../img/e-p.svg) 13 fill / 13px stretch}
.salto{background:none;border:0 solid transparent;border-image:url(../img/e-p.svg) 13 fill / 13px stretch}
}