/* =========================================================
EUROPA CONNECT — Landing "Estancia por estudios"
Sistema visual extraído de "Propuesta Europa Connect.pdf".
Colores muestreados directamente de las páginas del deck.
========================================================= */
/* ---------- 1. Tokens ---------- */
:root{
/* Azules de marca (muestreados del deck) */
--azul:#1E6BEB; /* azul brillante: CTA, énfasis, numerales */
--azul-700:#1557C8; /* hover */
--azul-300:#4C8DF0; /* acentos claros sobre navy */
--navy:#07295A; /* azul profundo: secciones oscuras */
--navy-900:#032250;
--tinta:#031731; /* titulares */
/* Neutros con sesgo azul */
--gris:#5D6E88; /* texto corrido */
--gris-suave:#94A6C2; /* texto desenfatizado */
--hueso:#F4F8FE; /* fondo secundario */
--chip:#E2EEFC; /* fondo de iconos */
--linea:#DCE7F7;
--blanco:#FFFFFF;
--wa:#25D366; /* único color ajeno a la paleta: WhatsApp */
/* Tipografía */
--display:"Archivo","Helvetica Neue",Arial,sans-serif;
--texto:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
/* Formas: el deck usa esquinas contenidas, nunca píldoras */
--r-btn:10px;
--r-card:16px;
--r-media:20px;
--sombra-sm:0 1px 2px rgba(3,23,49,.04);
--sombra:0 18px 40px -24px rgba(3,23,49,.22);
--sombra-alta:0 40px 80px -32px rgba(3,23,49,.34);
--ancho:1180px;
--pad:clamp(20px,5vw,48px);
/* ---- Escala de espaciado vertical ----
Tres peldaños, y nada más. Toda separación vertical de la página sale
de aquí para que dos secciones equivalentes no acaben con 160px y 70px
sin motivo:
--esp-seccion cambio de sección (el salto grande)
--esp-bloque entre cabecera y contenido, o entre grupos hermanos
--esp-item dentro de un componente
Los mínimos del clamp están calculados para que en móvil el valor NO
cambie respecto a la versión anterior (64px de sección): la compactación
es de escritorio, donde 8vw disparaba el padding hasta 120px y dejaba
240px de aire entre bloques. */
--esp-seccion:clamp(64px,5.6vw,84px);
--esp-bloque:clamp(30px,3.2vw,46px);
--esp-item:clamp(14px,1.6vw,20px);
--seccion-y:var(--esp-seccion); /* se conserva el nombre antiguo */
/* Tipografía: peso de los subtítulos. Inter va en eje variable, así que
450 existe de verdad; da presencia sin convertirlos en titulares. */
--peso-sub:450;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
background:var(--blanco);
color:var(--gris);
font-family:var(--texto);
font-size:17px;
line-height:1.6;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{
margin:0;
font-family:var(--display);
color:var(--tinta);
font-weight:800;
line-height:1.08;
letter-spacing:-.025em;
text-wrap:balance;
}
h1{font-size:clamp(2.3rem,5.2vw,4rem)}
h2{font-size:clamp(2.05rem,4.05vw,3.3rem)}
/* Los titulares ya iban en Archivo 800, que es el peso del deck; lo que les
faltaba era tamaño y aire, no grosor. h3/h4 sí suben de 700 a 750: a 1.1rem
el 700 de Archivo se quedaba corto frente al cuerpo de texto.
El h2 sube otro punto de tamaño (48→52.8px a 1440) por la misma razón: el
peso se queda en 800 porque es el tope que carga el y el que usa el
deck. Si algún día hace falta más grosor, hay que ampliar el eje a 900
en index.html antes de tocar este font-weight. */
h3{font-size:1.16rem;font-weight:750;letter-spacing:-.012em;line-height:1.24}
strong{color:var(--tinta)}
/* ---- Subtítulos ----
Punto único de control. Son los textos que acompañan a un h1/h2 y
explican la sección; NO entran aquí captions, labels, botones, textos
legales ni el cuerpo de las tarjetas, que deben quedar por debajo en la
jerarquía. Antes iban en Inter 400 y se leían más flojos que el cuerpo. */
.entradilla,.hero__lead,.confianza__txt,.tst-intro > p,.form__sub{
font-weight:var(--peso-sub);
}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:4px}
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--pad)}
.seccion{padding-block:var(--seccion-y)}
.seccion[id]{scroll-margin-top:88px}
.seccion--hueso{background:var(--hueso)}
.azul{color:var(--azul)}
.salta{position:absolute;left:-9999px;top:0;z-index:200;background:var(--azul);color:#fff;padding:12px 20px}
.salta:focus{left:0}
/* ---------- 3. Rótulos mono (firma de marca) ----------
El rótulo ES el nombre de la sección ("01 · LA OPORTUNIDAD"), no un pie de
foto: a .72rem/500 se leía más flojo que el cuerpo de texto y la jerarquía
arrancaba en falso. Sube a .82rem/600 y el tracking baja de .22em a .18em
para compensar el peso. El 600 de IBM Plex Mono se pide explícitamente en
el de index.html; sin ese peso el navegador lo sintetiza y ensucia
el trazo. Mismo salto en .grupo__t y .footer__t, que son la misma firma. */
.rotulo{
display:block;
font-family:var(--mono);
font-size:.82rem;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--azul);
margin-bottom:20px;
}
.rotulo--gris{color:var(--gris-suave)}
.rotulo--claro{color:var(--azul-300)}
/* ---- El rótulo que TITULA una sección ----
Los rótulos numerados (01 · TU CAMINO EN ESPAÑA … 10 · DA EL PRIMER PASO)
no son lo mismo que los rótulos internos ("Servicio principal", "El
siguiente paso", el servicio de cada caso): son el nombre de la sección y
el primer escalón de su jerarquía, así que pesan más que el resto.
.82rem/600 → .95rem/700. El tracking baja de .18em a .16em por el mismo
motivo por el que bajó de .22 a .18 en su día: a más peso, menos aire
entre letras, o la palabra se deshilacha.
⚠️ El 700 de IBM Plex Mono se descarga en el de index.html. Si
alguien recorta esa lista de pesos, esto pasa a ser negrita sintética.
Se marca con una clase y no con un selector de contexto porque los diez
rótulos no cuelgan del mismo contenedor: unos van en .cab, otros en un
.revelar suelto y el de testimonios en .tst-intro. El del hero NO la
lleva: va antes de la sección 01 y su escala es la del titular. */
.rotulo--seccion{
font-size:.95rem;
font-weight:700;
letter-spacing:.16em;
}
.entradilla{
margin-top:18px;
font-size:1.12rem;
line-height:1.62;
color:var(--gris);
max-width:56ch;
}
.cab{max-width:760px;margin-bottom:var(--esp-bloque)}
.cab--centro{margin-inline:auto;text-align:center}
.cab--centro .entradilla{margin-inline:auto}
/* ---------- 4. Botones ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:48px;padding:13px 26px;
border:0;border-radius:var(--r-btn);cursor:pointer;
font-family:var(--display);font-size:.97rem;font-weight:700;letter-spacing:-.005em;
transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--azul{background:var(--azul);color:#fff;box-shadow:0 12px 26px -14px rgba(30,107,235,.9)}
.btn--azul:hover{background:var(--azul-700);transform:translateY(-2px)}
.btn--linea{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn--linea:hover{box-shadow:inset 0 0 0 1.5px var(--azul);color:var(--azul)}
.btn--blanco{background:#fff;color:var(--navy)}
.btn--blanco:hover{background:var(--chip);transform:translateY(-2px)}
.btn--bloque{width:100%}
.btn--sm{min-height:42px;padding:10px 20px;font-size:.9rem}
/* ---------- 5. Cabecera ---------- */
.site-header{
position:sticky;top:0;z-index:100;
background:rgba(255,255,255,.88);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid transparent;
transition:border-color .3s var(--ease);
}
.site-header.fijo{border-bottom-color:var(--linea)}
.header__in{display:flex;align-items:center;gap:24px;min-height:74px}
.marca{display:inline-flex;align-items:center;flex:none}
.marca__img{height:46px;width:auto}
.marca__img.falta{display:none}
.marca__img.falta + .marca__txt{display:block}
.marca__txt{
display:none;
font-family:var(--display);font-weight:800;
font-size:1.06rem;line-height:1.04;letter-spacing:-.01em;
color:var(--azul);text-transform:uppercase;
}
.marca--claro .marca__txt{color:#fff}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav__a{font-size:.94rem;font-weight:500;color:var(--gris);transition:color .2s var(--ease)}
.nav__a:hover{color:var(--azul)}
.header__cta{flex:none}
.hamb{
display:none;width:46px;height:46px;flex:none;
border:1px solid var(--linea);border-radius:10px;background:#fff;cursor:pointer;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamb span{display:block;width:18px;height:2px;background:var(--tinta);transition:transform .3s var(--ease),opacity .2s var(--ease)}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- 6. Hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,#FBFDFF 0%,var(--blanco) 68%);overflow:hidden}
.hero__in{
display:grid;grid-template-columns:1.02fr .98fr;
gap:clamp(32px,4.5vw,64px);align-items:center;
padding-block:clamp(44px,6vw,84px) clamp(52px,6vw,96px);
}
.hero h1{margin-bottom:0}
.hero__lead{margin-top:22px;font-size:1.1rem;color:var(--gris);max-width:46ch}
.hero__acc{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
/* Cuatro puntos de valor, centrados como grupo dentro del hero.
Con grid de 4 columnas iguales el bloque se pegaba visualmente a la
izquierda (cada aval arrancaba en su celda y la última sobraba de ancho);
con flex + justify-content:center el conjunto se equilibra solo y cada
punto conserva su ancho natural. */
.avales{
display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
gap:clamp(20px,3vw,46px);
margin-top:clamp(36px,4vw,52px);padding-top:clamp(28px,3vw,36px);
border-top:1px solid var(--linea);
}
.aval{display:flex;align-items:flex-start;gap:12px;flex:0 1 auto;max-width:280px}
.aval__ico{
display:grid;place-items:center;width:40px;height:40px;flex:none;
border-radius:50%;background:var(--chip);color:var(--azul);
}
.aval__ico svg{width:20px;height:20px}
.aval b{display:block;font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--tinta);line-height:1.25}
.aval span{font-size:.82rem;color:var(--gris-suave);line-height:1.35}
.hero__media{position:relative}
.hero__vuelo{
position:absolute;top:6%;right:4%;width:min(210px,44%);
pointer-events:none;color:var(--azul);
}
/* ---------- 7. Oportunidad ---------- */
.oport__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.5vw,64px);align-items:center}
.oport__foto{border-radius:var(--r-media);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--sombra);background:var(--chip)}
.oport__foto img{width:100%;height:100%;object-fit:cover}
.claims{display:grid;gap:0;margin-top:30px}
.claim{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--linea)}
.claim:last-child{border-bottom:1px solid var(--linea)}
.claim__n{font-family:var(--mono);font-size:.76rem;color:var(--azul);padding-top:3px;flex:none}
.claim p{font-size:1rem}
.claim b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--tinta);margin-bottom:3px}
/* ---------- 8. Tarjetas genéricas ---------- */
/* .rejilla / .rejilla--3 / .rejilla--4 se retiraron en la ronda del
reestructuración: --3 era la rejilla de "¿Cómo te acompañamos?" (sección
eliminada) y --4 la de las tarjetas de Beneficios, que ahora son
.beneficios sobre navy (bloque 28.3). No quedaba ningún usuario.
.tarjeta sigue viva: la usan las tarjetas de "Otros trámites". */
.tarjeta{
display:flex;flex-direction:column;
padding:30px 26px;border-radius:var(--r-card);
background:var(--blanco);border:1px solid var(--linea);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.seccion--hueso .tarjeta{background:var(--blanco)}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--chip)}
.tarjeta__ico{
display:grid;place-items:center;width:52px;height:52px;
border-radius:50%;background:var(--chip);color:var(--azul);margin-bottom:22px;
}
.tarjeta__ico svg{width:24px;height:24px}
.tarjeta h3{margin-bottom:8px}
.tarjeta p{font-size:.93rem}
/* ---------- 9. Confianza (navy) ---------- */
.confianza{position:relative;background:var(--navy-900);color:rgba(255,255,255,.78);overflow:hidden}
.confianza::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(52% 60% at 78% 18%,rgba(30,107,235,.34),transparent 68%),
radial-gradient(40% 50% at 6% 92%,rgba(76,141,240,.18),transparent 70%);
}
.confianza__in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.confianza h2{color:#fff}
.confianza h2 .azul{color:var(--azul-300)}
/* Sobre navy, un 400 al 74% de blanco se deshacía: sube peso y opacidad. */
.confianza__txt{margin-top:20px;font-size:1.12rem;line-height:1.62;color:rgba(255,255,255,.84);max-width:50ch}
.firma{
display:flex;align-items:center;gap:18px;margin-top:34px;
padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
}
.firma .marca__txt{color:#fff;display:block}
.firma__lema{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--azul-300);line-height:1.7}
.confianza__foto{border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sombra-alta)}
.confianza__foto img{width:100%;height:100%;object-fit:cover}
/* ---------- 10. Cierre + formulario ---------- */
.cierre__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,68px);align-items:start}
.cierre__lista{margin-top:30px;display:grid;gap:14px}
.cierre__lista li{display:flex;align-items:flex-start;gap:11px;font-size:.97rem}
.cierre__lista svg{width:19px;height:19px;flex:none;color:var(--azul);margin-top:2px}
.form{
background:var(--blanco);border:1px solid var(--linea);
border-radius:var(--r-card);padding:clamp(26px,3.2vw,38px);
box-shadow:var(--sombra);
}
.form h3{font-size:1.34rem;margin-bottom:6px}
.form__sub{font-size:.98rem;margin-bottom:22px}
.campo{margin-bottom:15px}
.campo label{display:block;margin-bottom:7px;font-size:.84rem;font-weight:600;color:var(--tinta)}
.campo input,.campo select,.campo textarea{
width:100%;min-height:50px;padding:13px 15px;
border:1.5px solid var(--linea);border-radius:var(--r-btn);
background:var(--hueso);color:var(--tinta);
font-family:inherit;font-size:16px; /* 16px evita el zoom automático en iOS */
transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.campo textarea{min-height:96px;resize:vertical}
.campo input::placeholder{color:#A9B7CC}
.campo input:focus,.campo select:focus,.campo textarea:focus{
outline:none;background:#fff;border-color:var(--azul);
box-shadow:0 0 0 4px rgba(30,107,235,.13);
}
.campo [aria-invalid="true"]{border-color:#D4455A;box-shadow:0 0 0 4px rgba(212,69,90,.1)}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.sel svg{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--azul);pointer-events:none}
.form__wa{position:relative}
.form__wa svg{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--wa);pointer-events:none}
.form__wa input{padding-right:44px}
.form__pie{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:15px;font-size:.8rem;color:var(--gris-suave);
}
.form__pie svg{width:14px;height:14px}
.form__estado{margin-top:13px;font-size:.9rem;font-weight:500;text-align:center;color:var(--azul)}
.form__estado.err{color:#C23A4C}
.form__estado.ok{color:#128A4B}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------- 11. Pie ---------- */
.site-footer{background:var(--tinta);color:rgba(255,255,255,.62);padding-top:clamp(48px,6vw,72px)}
.footer__in{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:36px}
.footer__in p{font-size:.9rem;margin-top:16px;max-width:34ch}
.footer__t{
font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:#fff;margin:0 0 16px;
}
.footer__nav{display:grid;gap:10px}
.footer__nav a{font-size:.92rem;transition:color .2s var(--ease)}
.footer__nav a:hover{color:#fff}
.footer__wa{
display:inline-flex;align-items:center;gap:9px;min-height:46px;
padding:11px 20px;border-radius:var(--r-btn);background:var(--wa);color:#04331B;
font-family:var(--display);font-weight:700;font-size:.9rem;
transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.footer__wa:hover{background:#1DAE54;color:#fff;transform:translateY(-2px)}
/* El número de WhatsApp bajo el botón del pie. Discreto: el botón es la
acción, el número es el dato. Lo rellena iniciarWhatsApp() desde
CONFIG.whatsappVisible. */
.footer__num{margin-top:12px;font-size:.92rem}
.footer__num a{
font-family:var(--mono);letter-spacing:.04em;
color:rgba(255,255,255,.62);
transition:color .2s var(--ease);
}
.footer__num a:hover{color:#fff}
.footer__bajo{margin-top:clamp(36px,4vw,56px);padding-block:20px;border-top:1px solid rgba(255,255,255,.1)}
.footer__bajo p{font-size:.78rem;color:rgba(255,255,255,.42);margin:0;max-width:none}
/* ---------- 12. WhatsApp flotante ----------
⚠️ EL `bottom` ESTÁ CALCULADO, NO ELEGIDO A OJO.
Netlify inyecta en el sitio desplegado una píldora "Powered by Netlify"
abajo a la derecha. No está en nuestro HTML y no la controlamos: aparece
sólo en producción, así que en local no se ve y es fácil olvidarse de ella.
Medida sobre una captura del sitio publicado:
píldora 167 × 39 px
separación al pie ~18 px
──────────────────────────────
ocupa hasta ~57 px desde el borde inferior
Horizontalmente llega a unos 174px desde la derecha, o sea que pasa por
encima del botón entero: separarlos de lado no es opción sin sacar el
botón de su esquina. La separación tiene que ser VERTICAL.
A 20px, el botón quedaba tapado en 37 de sus 56px de alto. A 78 su borde
inferior queda 21px por encima de la píldora: despejado, y sigue leyéndose
como un botón flotante de esquina inferior.
Subir el z-index NO habría servido: se vería encima, pero los dos seguirían
ocupando el mismo sitio y la píldora quedaría inclicable debajo.
Si algún día se quita el badge (plan de pago o dominio propio), esto se
puede devolver a 20px. Mientras esté, no lo bajes. */
.wa-flot{
position:fixed;right:20px;bottom:78px;z-index:90;
display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
background:var(--wa);color:#04331B;
box-shadow:0 14px 30px -10px rgba(37,211,102,.6);
transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.wa-flot svg{width:28px;height:28px}
.wa-flot:hover{background:#1DAE54;color:#fff;transform:translateY(-3px)}
/* ---------- 13. Animación de entrada ----------
Sin JS todo queda visible: la clase que oculta la pone el propio script. */
.js .revelar{opacity:0;transform:translateY(18px)}
.js .revelar.visible{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* Puntos de valor: entran uno detrás de otro y se quedan quietos.
Es una transición de una sola pasada, no una animación en bucle: nada
flota, rebota ni se repite después. Reutiliza el mismo observador que el
resto de la página (la clase .visible la pone iniciarRevelado). */
.js .avales.revelar{opacity:1;transform:none} /* el bloque no; sus hijos sí */
.js .avales.revelar .aval{opacity:0;transform:translateY(10px)}
.js .avales.revelar.visible .aval{
opacity:1;transform:none;
transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.js .avales.revelar.visible .aval:nth-child(1){transition-delay:.02s}
.js .avales.revelar.visible .aval:nth-child(2){transition-delay:.10s}
.js .avales.revelar.visible .aval:nth-child(3){transition-delay:.18s}
.js .avales.revelar.visible .aval:nth-child(4){transition-delay:.26s}
/* =========================================================
14. TABLET (≤ 1024px)
Se reorganiza: navegación a menú y hero apaisado.
========================================================= */
@media (max-width:1024px){
.nav{
position:fixed;inset:74px 0 auto;margin:0;
flex-direction:column;align-items:stretch;gap:0;
background:#fff;padding:12px var(--pad) 26px;
border-bottom:1px solid var(--linea);box-shadow:var(--sombra);
transform:translateY(-12px);opacity:0;pointer-events:none;
transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.nav.abierto{opacity:1;transform:none;pointer-events:auto}
.nav__a{padding:15px 0;border-bottom:1px solid var(--linea);font-size:1rem;color:var(--tinta)}
.hamb{display:flex;order:3}
.header__cta{margin-left:auto;order:2}
.hero__in{grid-template-columns:1fr;gap:40px}
/* La foto encabeza el hero en pantallas apiladas */
.hero__media{order:-1}
.oport__grid,.confianza__in,.cierre__in{grid-template-columns:1fr}
.oport__foto{aspect-ratio:16/9}
.confianza__foto{aspect-ratio:16/8}
.footer__in{grid-template-columns:1fr 1fr}
}
/* =========================================================
15. MÓVIL (≤ 700px)
Una columna, objetivos táctiles grandes, ritmo vertical corto.
========================================================= */
@media (max-width:700px){
body{font-size:16px}
/* El suelo del clamp baja de 2rem a 1.6rem y el tramo variable de 8.4 a
8.3vw. No es estética: a 2rem el titular del hero medía 32px fijos en
cualquier móvil, y su bloque más largo ("y trabajar en España?") pedía
326px cuando en una pantalla de 360 sólo hay 320 útiles. Resultado:
"España?" se quedaba sola en una tercera línea.
Con 8.3vw el cuerpo sigue al ancho de la pantalla y el bloque entra
siempre: 304px de 320 a 360px de ancho, 330 de 350 a 390, 271 de 280
en un iPhone SE. El suelo de 1.6rem sólo actúa por debajo de 308px.
Si cambias el titular del hero, vuelve a medir el bloque más largo. */
h1{font-size:clamp(1.6rem,8.3vw,2.6rem);line-height:1.12}
h2{font-size:clamp(1.78rem,7vw,2.3rem)}
.header__in{min-height:66px;gap:12px}
.nav{inset:66px 0 auto}
.marca__img{height:38px}
.header__cta{padding:10px 15px;font-size:.85rem;min-height:42px}
.hero__in{padding-block:30px 44px;gap:30px}
.hero__lead{font-size:1.02rem}
.hero__acc{margin-top:26px}
.hero__acc .btn{width:100%}
/* en el recorte 4:3 la estela cruzaba sobre la cara: se oculta */
.hero__vuelo{display:none}
/* 2×2: en una sola columna los cuatro puntos alargaban demasiado el
arranque de la página y empujaban el resto fuera de vista. */
.avales{
display:grid;grid-template-columns:1fr 1fr;
gap:18px 14px;margin-top:30px;padding-top:24px;
}
/* En dos columnas el texto dispone de ~150px: el icono cede unos píxeles
para que "Acompañamiento" y el pie de cada punto no queden apretados. */
.aval{max-width:none;gap:10px}
.aval__ico{width:34px;height:34px}
.aval__ico svg{width:17px;height:17px}
.aval span{font-size:.8rem}
.tarjeta{padding:24px 20px}
.tarjeta__ico{width:46px;height:46px;margin-bottom:16px}
.claim{gap:12px;padding:16px 0}
.form{padding:22px 18px}
/* Los rótulos mono son firma de marca, pero a 11px no se leen en un móvil:
se suben a 12.8px y se afloja un poco el tracking para que no partan. */
.rotulo,.footer__t,.firma__lema{font-size:.84rem;letter-spacing:.14em}
/* El de sección sube en la misma proporción. El tracking se afloja menos
que el del rótulo normal porque aquí el peso ya separa las letras: a
.14em, "06 · PERSONAS CON RESULTADOS" se iba a dos líneas. */
.rotulo--seccion{font-size:.92rem;letter-spacing:.12em}
.footer__in{grid-template-columns:1fr;gap:30px}
/* Mismo problema que en escritorio (ver bloque 12) y un poco peor: la
píldora de Netlify mide lo mismo, pero aquí compite además con la barra
inferior del navegador y con el indicador de inicio del móvil. Por eso
sube a 84 en vez de 78.
Van dos declaraciones a propósito: la primera es el respaldo para
navegadores sin env(), donde la segunda se descarta entera por ser
inválida. Con el fallback 0px dentro de env(), en un móvil sin muesca
el resultado es exactamente el mismo 84px. */
.wa-flot{right:14px;bottom:84px;width:52px;height:52px}
.wa-flot{bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
.wa-flot svg{width:26px;height:26px}
}
/* ---------- 16. Preferencias del usuario ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.js .revelar{opacity:1;transform:none}
.js .avales.revelar .aval{opacity:1;transform:none}
}
/* =========================================================
17. SECCIONES AÑADIDAS
Servicios secundarios · Reseñas · Personas con resultados.
Bloque autocontenido: reutiliza los tokens y no redefine
ninguna regla anterior. Incluye sus propios breakpoints.
========================================================= */
/* ---- Grupos dentro de servicios secundarios ---- */
.grupo + .grupo{margin-top:var(--esp-bloque)}
.grupo__cab{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.grupo__t{
margin:0;font-family:var(--mono);font-size:.8rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);
/* "Homologación / convalidación" es largo: sin esto se salía del
contenedor por la derecha en móvil y se cortaba a media palabra. */
min-width:0;flex:0 1 auto;
}
.grupo__cab::after{content:"";flex:1;height:1px;background:var(--linea)}
/* Las tarjetas de trámite usan h4: h3 ya está ocupado por el título de grupo */
.tarjeta h4{
margin:0 0 8px;font-family:var(--display);font-size:1.05rem;font-weight:700;
letter-spacing:-.01em;color:var(--tinta);line-height:1.2;
}
.aviso{
display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--linea);
font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--azul);
}
.cierre-cta{margin-top:var(--esp-bloque);text-align:center}
/* ---- Marcadores de contenido de prueba ---- */
.plantilla{
display:inline-flex;align-items:center;align-self:flex-start;
font-family:var(--mono);font-size:.66rem;font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--gris-suave);
border:1px dashed var(--linea);border-radius:100px;padding:5px 11px;
}
.aviso-plantilla{
display:flex;gap:14px;align-items:flex-start;
margin-bottom:clamp(26px,3vw,38px);padding:18px 20px;
border:1px dashed var(--linea);border-radius:var(--r-card);background:var(--hueso);
}
.seccion--hueso .aviso-plantilla{background:var(--blanco)}
.aviso-plantilla p{font-size:.88rem}
.aviso-plantilla svg{width:20px;height:20px;flex:none;color:var(--azul);margin-top:2px}
/* Resultados queda entre dos secciones blancas: un filete marca el corte
sin alterar el fondo de las secciones vecinas. */
#resultados{border-top:1px solid var(--linea)}
/* ---- Reseñas ---- */
.resenas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.resena{
display:flex;flex-direction:column;gap:16px;
padding:26px 24px;border-radius:var(--r-card);
background:var(--blanco);border:1px dashed var(--linea);
}
.estrellas{display:flex;gap:4px}
.estrellas svg{width:18px;height:18px;color:var(--azul)}
.resena__txt{font-size:.95rem;color:var(--gris-suave);font-style:italic;flex:1;margin:0}
.resena__pie{
display:flex;align-items:center;gap:13px;
padding-top:16px;border-top:1px solid var(--linea);
}
.resena__av{
display:grid;place-items:center;width:44px;height:44px;flex:none;
border-radius:50%;background:var(--chip);color:var(--azul);
}
.resena__av svg{width:20px;height:20px}
.resena__n{
display:block;font-family:var(--display);font-weight:700;
font-size:.95rem;color:var(--gris-suave);line-height:1.25;
}
.resena__s{
display:block;font-family:var(--mono);font-size:.68rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--gris-suave);
}
/* ---- Personas con resultados ---- */
.casos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.caso{
display:flex;flex-direction:column;overflow:hidden;
border-radius:var(--r-card);background:var(--blanco);
border:1px dashed var(--linea);
}
.caso__foto{
display:grid;place-items:center;align-content:center;gap:10px;
aspect-ratio:4/3;padding:16px;text-align:center;
background:var(--chip);color:var(--azul);
}
.caso__foto svg{width:30px;height:30px}
.caso__foto .plantilla{align-self:center;border-color:var(--azul-300)}
.caso__cuerpo{display:flex;flex-direction:column;flex:1;padding:24px 22px}
.caso__srv{
font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--azul);margin-bottom:10px;
}
.caso h3{color:var(--gris-suave);margin-bottom:8px}
.caso p{font-size:.92rem;color:var(--gris-suave);flex:1}
.caso__res{
flex:none;margin-top:16px;padding-top:14px;
border-top:1px solid var(--linea);font-size:.9rem;
}
.caso__res b{
display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--gris-suave);margin-bottom:5px;
}
/* ---- Tablet ---- */
@media (max-width:1024px){
.resenas,.casos{grid-template-columns:repeat(2,1fr)}
}
/* ---- Móvil ---- */
@media (max-width:700px){
.resenas,.casos{grid-template-columns:1fr}
.grupo__cab{gap:12px}
.grupo__t{font-size:.84rem;letter-spacing:.13em}
.resena{padding:22px 20px}
.caso__cuerpo{padding:22px 18px}
.aviso-plantilla{padding:16px;gap:12px}
.cierre-cta .btn{width:100%}
/* mismo mínimo de 12px que el resto de la página */
.plantilla,.caso__srv,.resena__s,.caso__res b{font-size:.78rem;letter-spacing:.1em}
}
/* =========================================================
18. HERO CON SLIDER DE 4 FOTOGRAFÍAS
Zoom lento + fundido cruzado. Sin librerías: transición
de opacidad y transform sobre cuatro capas apiladas.
========================================================= */
.hero{
position:relative;
min-height:clamp(640px,88vh,880px);
display:flex;align-items:flex-end;
background:var(--tinta); /* color de espera mientras carga la 1ª foto */
overflow:hidden;
}
/* ---- Capas de fotografía ---- */
.hero__fotos{position:absolute;inset:0}
.hero__foto{
position:absolute;inset:0;margin:0;
opacity:0;transition:opacity 1.2s ease-in-out;
will-change:opacity;
}
.hero__foto.activa{opacity:1}
.hero__foto img{
width:100%;height:100%;object-fit:cover;
/* Ancladas arriba: el recorte se come el pie, nunca las cabezas. Este
valor tiene que coincidir con el data-pos del HTML, porque sin JS (y en
el primer pintado, antes de que corra) manda esta línea. */
object-position:50% 0%; /* JS lo ajusta por foto y breakpoint */
transform:scale(1.005);
}
/* El zoom sólo corre en la foto visible, para no gastar GPU en las ocultas */
.hero__foto.activa img{
transform:scale(1.07);
transition:transform 7s linear;
}
/* ---- Velo de legibilidad ----
Oscurece sólo lo justo por la izquierda y por abajo: la fotografía
sigue siendo la protagonista en los dos tercios superiores derechos. */
.hero__velo{
position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(100deg,rgba(3,34,80,.72) 0%,rgba(3,34,80,.44) 34%,rgba(3,34,80,.10) 64%,rgba(3,34,80,0) 84%),
linear-gradient(to top,rgba(3,34,80,.78) 0%,rgba(3,34,80,.58) 22%,rgba(3,34,80,.28) 44%,rgba(3,34,80,.08) 66%,rgba(3,34,80,0) 88%);
}
/* ---- Contenido ---- */
/* display:block NO es redundante: .hero__in hereda del bloque 6 una rejilla
de dos columnas (1.02fr .98fr) que era del hero anterior, el de foto al
lado. Desde que manda el slider a pantalla completa, la segunda columna no
tiene nada dentro, pero seguía reservando su mitad: el texto disponía de
520px de los 1084 útiles y el titular se partía en cuatro líneas con
palabras sueltas. Quitando la rejilla, la columna de texto vuelve a
mandar su propio max-width.
Ese max-width es 720 y no un número redondo: el bloque más ancho del
titular ("y trabajar en España?") mide 652px a 64px de cuerpo, así que por
debajo de eso vuelve a partirse por dentro. Si cambias el titular o el
tamaño de h1, vuelve a medirlo. */
.hero__in{position:relative;display:block;width:100%;padding-block:clamp(48px,7vw,86px)}
.hero__txt{max-width:720px}
.hero .rotulo--sobre-foto{color:#9EC4FF}
.hero h1{color:#fff;text-shadow:0 1px 24px rgba(3,23,49,.3)}
/* Los dos trozos del titular. inline-block hace que el salto de línea sólo
pueda caer ENTRE ellos: en escritorio la frase entra de una, y en móvil se
parte exactamente por donde se quiere, sin fijos ni media queries.
Si un trozo no cupiera, el texto de dentro sigue partiendo por su cuenta,
así que no hay riesgo de desbordar. */
.h1__bloque{display:inline-block}
.azul-claro{color:#8FBBFF}
.hero__lead{
margin-top:20px;font-size:1.16rem;line-height:1.58;max-width:46ch;
color:rgba(255,255,255,.93);text-shadow:0 1px 16px rgba(3,23,49,.35);
}
/* .clave pinta en tinta, que sobre la fotografía del hero sería invisible:
aquí el énfasis lo da el blanco puro contra el .93 del resto del párrafo. */
.hero__lead .clave{color:#fff}
.hero__acc{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
/* Botón secundario legible sobre fotografía */
.btn--velo{
background:rgba(255,255,255,.10);color:#fff;
box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--velo:hover{background:rgba(255,255,255,.92);color:var(--tinta);box-shadow:inset 0 0 0 1.5px transparent}
/* ---- Banda de avales bajo el hero ---- */
.avales-banda{background:var(--blanco);border-bottom:1px solid var(--linea)}
.avales-banda .avales{
/* `margin:0` a secas anulaba el margin-inline:auto de .contenedor y dejaba
toda la banda pegada al borde izquierdo en pantallas anchas: ése era el
motivo de que los puntos de valor no pareciesen del centro del hero. */
margin-block:0;margin-inline:auto;
padding-block:clamp(22px,3vw,32px);
border-top:0;
}
/* ---- Tablet ---- */
@media (max-width:1024px){
.hero{min-height:clamp(560px,80vh,760px)}
.hero__velo{
background:
linear-gradient(105deg,rgba(3,34,80,.70) 0%,rgba(3,34,80,.42) 44%,rgba(3,34,80,.12) 76%,rgba(3,34,80,0) 100%),
linear-gradient(to top,rgba(3,34,80,.80) 0%,rgba(3,34,80,.58) 26%,rgba(3,34,80,.26) 50%,rgba(3,34,80,.06) 74%,rgba(3,34,80,0) 92%);
}
}
/* ---- Móvil ---- */
@media (max-width:700px){
.hero{min-height:clamp(560px,84svh,780px)}
.hero__in{padding-block:34px 58px}
.hero__txt{max-width:none}
.hero__lead{font-size:1.04rem;margin-top:16px}
.hero__acc{margin-top:24px}
.hero__acc .btn{width:100%}
/* En vertical el texto ocupa la parte baja: el velo sube desde abajo */
.hero__velo{
/* Tope en .70: por encima el azul tapa la foto y se lee como un bloque
macizo bajo el titular. La legibilidad la completa el text-shadow. */
background:linear-gradient(to top,rgba(3,34,80,.70) 0%,rgba(3,34,80,.56) 18%,rgba(3,34,80,.36) 38%,rgba(3,34,80,.18) 60%,rgba(3,34,80,.04) 84%);
}
/* sobre cielo claro el azul del rótulo no contrasta: en móvil va en blanco */
.hero .rotulo--sobre-foto{color:#fff;text-shadow:0 1px 10px rgba(3,34,80,.7)}
.hero h1{text-shadow:0 2px 18px rgba(3,34,80,.62)}
.hero__lead{text-shadow:0 1px 14px rgba(3,34,80,.7)}
/* 2×2 también aquí: esta regla es más específica que la del bloque 15 y
antes devolvía la banda a una sola columna. */
.avales-banda .avales{grid-template-columns:1fr 1fr;gap:18px 14px}
}
/* ---- Movimiento reducido: sin zoom ni cambios automáticos ---- */
@media (prefers-reduced-motion:reduce){
.hero__foto,.hero__foto.activa img{transition:none}
.hero__foto.activa img{transform:none}
}
/* =========================================================
19. RESULTADOS · EXPERIENCIAS · TESTIMONIOS
Los cuatro bloques de métricas usan la escala de azules de
la marca (no los colores de la referencia). Carruseles con
scroll-snap: el táctil es nativo, el JS sólo añade arrastre
y flechas.
========================================================= */
/* ---------- Carrusel (base común) ---------- */
/* min-width:0 es imprescindible: sin él, una pista flex ensancha su
columna de grid y provoca scroll horizontal en toda la página. */
.carrusel{position:relative;min-width:0;max-width:100%}
.tst-grid > *{min-width:0}
.carrusel__pista{
display:flex;gap:16px;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding-bottom:6px;
scrollbar-width:none;-ms-overflow-style:none;
}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista > *{scroll-snap-align:start;flex:none}
.carrusel__pista.arrastrando{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}
.carrusel__flechas{display:flex;gap:9px}
.carrusel__flecha{
display:grid;place-items:center;width:44px;height:44px;
border-radius:50%;border:1.5px solid var(--linea);background:var(--blanco);
color:var(--tinta);cursor:pointer;
transition:border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}
.carrusel__flecha svg{width:18px;height:18px}
.carrusel__flecha:hover:not(:disabled){border-color:var(--azul);color:var(--azul)}
.carrusel__flecha:disabled{opacity:.3;cursor:default}
/* ---------- Experiencias (fotografías) ---------- */
/* El ancho de cada fotografía. A 22vw (máx. 262px) la franja se leía
como una tira de miniaturas y era el bloque más flojo de la página.
A 26vw (máx. 330px) entran TRES imágenes completas en el contenedor
de escritorio (1180 − 96 de padding = 1084 útiles: 3×330 + 2×16 = 1022)
y sobran 62px, que es justo lo que asoma de la cuarta y lo que cuenta
que el carrusel sigue. Subir el tope por encima de 330 se come ese
asomo y deja el corte pegado al borde.
En móvil no cambia nada: manda la regla de ≤700px (74vw, máx. 300px).
La proporción editorial 4:5 se mantiene. */
.exp{
margin:0;width:clamp(240px,26vw,330px);aspect-ratio:4/5;
border-radius:var(--r-card);overflow:hidden;background:var(--hueso);
border:1px solid var(--linea);
}
.exp img{
width:100%;height:100%;object-fit:cover;
transition:transform .5s var(--ease);
}
.exp:hover img{transform:scale(1.03)}
/* Hueco limpio mientras no haya fotografía: sin textos de relleno */
.exp--vacia{background:linear-gradient(160deg,var(--hueso) 0%,var(--chip) 100%)}
.exp__hueco{display:block;width:100%;height:100%}
/* ---------- Testimonios ---------- */
.tst-grid{display:grid;grid-template-columns:minmax(270px,340px) 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.tst-intro .estrellas-fijas{display:flex;gap:5px;margin:18px 0 16px}
.tst-intro .estrellas-fijas svg{width:20px;height:20px;fill:var(--azul)}
.tst-intro p{font-size:1.06rem;line-height:1.62;color:var(--gris);max-width:40ch}
.tst{
display:flex;flex-direction:column;gap:14px;
width:clamp(258px,27vw,326px);
padding:24px 22px;border-radius:var(--r-card);
background:var(--blanco);border:1px solid var(--linea);
box-shadow:var(--sombra-sm);
}
.tst__estrellas{display:flex;gap:3px}
.tst__estrellas svg{width:16px;height:16px;fill:var(--azul)}
.tst__txt{font-size:.94rem;color:var(--gris);flex:1;margin:0}
.tst__pie{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--linea)}
/* El avatar es el mismo círculo tanto si lleva foto como si lleva iniciales:
mismo diámetro, mismo recorte, misma posición en el pie de la tarjeta. Así
sustituir un placeholder por un retrato real no mueve nada de la maqueta.
`object-position` va explícito aunque 50% 50% ya sea el valor por defecto:
es el punto que hay que tocar si un retrato concreto queda descentrado. */
.tst__foto{
display:grid;place-items:center;width:44px;height:44px;flex:none;
border-radius:50%;object-fit:cover;object-position:center;
/* color de espera mientras carga, para que no parpadee en blanco */
background:var(--chip);
}
.tst__foto--iniciales{
background:var(--chip);color:var(--azul);
font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.01em;
}
.tst__n{display:block;font-family:var(--display);font-size:.93rem;color:var(--tinta);line-height:1.25}
.tst__c{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-suave)}
/* ---------- Tablet ---------- */
@media (max-width:1024px){
.tst-grid{grid-template-columns:1fr;gap:28px}
.tst-intro p{max-width:56ch}
}
/* ---------- Móvil ---------- */
@media (max-width:700px){
/* 1,2 tarjetas a la vista: se ve que hay más contenido al lado */
.exp{width:74vw;max-width:300px}
.tst{width:80vw;max-width:330px}
.tst__c{font-size:.72rem}
.carrusel__flechas{display:none} /* en táctil sobra: se desliza */
}
/* =========================================================
20. FRANJA DE RESULTADOS Y TRÁMITES COMPACTOS
El hero crece; estas dos secciones se comprimen. En móvil
ambas se recorren en horizontal en vez de apilarse.
========================================================= */
.sr-solo{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.seccion--franja{padding-block:clamp(26px,3.4vw,42px)}
/* ---------- Resultados: franja de 4 ---------- */
.metricas{display:flex;gap:12px}
.metrica{
display:flex;flex-direction:column;justify-content:center;gap:6px;
flex:1 1 0;min-width:0;
padding:20px 22px;border-radius:var(--r-card);color:#fff;
}
.metrica:nth-child(1){background:var(--navy-900)}
.metrica:nth-child(2){background:var(--navy)}
.metrica:nth-child(3){background:var(--azul-700)}
.metrica:nth-child(4){background:var(--azul)}
.metrica__n{
font-family:var(--display);font-weight:800;
font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;letter-spacing:-.03em;
font-variant-numeric:tabular-nums;color:#fff;
}
.metrica__t{
font-family:var(--mono);font-size:.68rem;font-weight:500;
letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78);
line-height:1.4;
}
/* ---------- Trámites: tarjeta horizontal y baja ---------- */
.grupo__flechas{margin-left:auto}
.grupo__cab{margin-bottom:16px}
.grupo__cab::after{order:-1} /* el filete queda entre título y flechas */
.tramites .tarjeta{
display:grid;
grid-template-columns:auto 1fr;
grid-template-areas:"ico titulo" "ico texto" "ico aviso";
column-gap:14px;row-gap:3px;align-content:start;
width:clamp(280px,25vw,330px);
padding:18px 20px;
}
.tramites .tarjeta:hover{transform:none;box-shadow:var(--sombra-sm)}
.tramites .tarjeta__ico{
grid-area:ico;width:38px;height:38px;margin:0;align-self:start;
}
.tramites .tarjeta__ico svg{width:19px;height:19px}
.tramites .tarjeta h4{grid-area:titulo;margin:0 0 2px;font-size:.98rem;line-height:1.25}
.tramites .tarjeta p{grid-area:texto;font-size:.86rem;line-height:1.45}
.tramites .aviso{grid-area:aviso;margin-top:9px;padding-top:9px;font-size:.66rem}
/* ---------- Tablet ---------- */
@media (max-width:1024px){
.metrica{padding:18px 18px}
.tramites .tarjeta{width:clamp(268px,38vw,320px)}
}
/* ---------- Móvil: las dos franjas se recorren de lado ---------- */
@media (max-width:700px){
.metricas{flex-direction:column;gap:10px}
.metrica{width:auto;max-width:none;padding:16px 18px}
.metrica__n{font-size:1.95rem}
.metrica__t{font-size:.66rem;letter-spacing:.1em}
/* ---- Trámites: UNA tarjeta por pantalla ----
Antes la tarjeta medía 78vw (máx. 310px) dentro de una pista de
ancho contenedor: la siguiente asomaba unos 25px justo en el borde
del padding y se leía como un título cortado a media palabra.
Ahora cada tarjeta ocupa exactamente el ancho útil de la pista
(flex-basis:100%, que es el contenedor ya descontado el padding
lateral del sitio), así que el corte cae fuera de la vista y el
borde derecho de la tarjeta se ve entero. El gap de 16px queda
entre tarjeta y tarjeta, nunca a la vista en reposo.
Se usa flex-basis y no calc(100vw - pad): con 100vw la barra de
desplazamiento —cuando el navegador la reserva— desalinea la
tarjeta respecto al resto de la página. */
.tramites{gap:16px;scroll-padding-inline:0}
.tramites .tarjeta{
flex:0 0 100%;width:100%;max-width:none;
padding:20px 20px;
}
/* Con una sola tarjeta a la vista hacen falta las flechas: son la única
pista de que el grupo continúa. Reutilizan el componente existente. */
.grupo__flechas{display:flex;gap:8px}
.grupo__flechas .carrusel__flecha{width:38px;height:38px}
.grupo__flechas .carrusel__flecha svg{width:16px;height:16px}
.grupo__cab{gap:12px;flex-wrap:nowrap}
.grupo__cab::after{min-width:12px}
}
/* =========================================================
21. VÍDEO DE LA SECCIÓN "LA OPORTUNIDAD"
El clip es vertical (9:16); el hueco se recorta a 4:5 para
que no desequilibre la columna de texto que tiene al lado.
========================================================= */
.oport__video{
position:relative;border-radius:var(--r-media);overflow:hidden;
/* El tope baja de 600 a 540: en escritorio el vídeo era el elemento más
alto de "La oportunidad" y estiraba la sección 60px por encima de lo
que pedía la columna de texto que tiene al lado. */
aspect-ratio:4/5;max-height:540px;margin-inline:auto;width:100%;
background:var(--chip);box-shadow:var(--sombra);
}
.oport__video video{
width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:1024px){
.oport__video{aspect-ratio:4/5;max-height:520px;max-width:420px}
}
@media (max-width:700px){
.oport__video{aspect-ratio:3/4;max-height:none;max-width:none}
}
/* =========================================================
22. CASO DESTACADO EN VÍDEO
El clip es vertical y lleva voz: se presenta como pieza
editorial con controles, no como fondo automático.
========================================================= */
/* ---- La tarjeta ----
El problema que resolvía esta versión era de ESCRITORIO: el vídeo iba a
252px fijos y el texto tenía el tope de lectura en 46ch, así que entre
los dos ocupaban ~700 de los 1084px útiles del contenedor y el tercio
derecho de la tarjeta quedaba vacío. La solución NO es encoger la
tarjeta hasta que el hueco no se note: es repartir mejor su ancho.
Cuentas a 1040px de tarjeta (el tope), con 32 de padding a cada lado:
interior 1040 − 64 = 976px
vídeo 33% de 976 = 322px (→ 573 de alto en 9:16)
hueco = 48px
texto 976 − 322 − 48 = 606px
Eso deja el vídeo en un 33% y el contenido en un 62% del interior, que
es el reparto que se buscaba. El tope de 1040 sale del contenedor de
1180: más ancha, la tarjeta se come el aire lateral de la sección y deja
de leerse como una pieza editorial.
El texto sube a 1.06rem y su tope de lectura a 72ch, que a ese cuerpo son
justo esos 606px: la columna se llena sola. Si cambias una de las dos
cifras sin la otra, vuelve a aparecer el hueco, sólo que dentro del
párrafo en lugar de al lado. */
.caso-video{
display:grid;grid-template-columns:minmax(220px,33%) 1fr;
gap:clamp(24px,3.2vw,48px);align-items:center;
max-width:1040px;margin-inline:auto;
margin-bottom:clamp(26px,3vw,40px);
padding:clamp(20px,2.4vw,32px);
border-radius:var(--r-card);
background:var(--blanco);border:1px solid var(--linea);
box-shadow:var(--sombra-sm);
}
/* El vídeo llena su columna en vez de llevar ancho fijo. El tope de 340
existe porque en 9:16 cada píxel de ancho son 1,78 de alto: sin él, en
monitores anchos la tarjeta se estiraba a más de 700px de alto. */
.caso-video__media{
width:100%;max-width:340px;
border-radius:var(--r-btn);overflow:hidden;
background:var(--tinta);aspect-ratio:9/16;
}
.caso-video__media video{width:100%;height:100%;object-fit:cover;display:block}
.caso-video__txt h3{font-size:1.6rem;margin:2px 0 14px}
.caso-video__txt p{font-size:1.06rem;line-height:1.7;max-width:72ch}
/* El aire entre los dos párrafos: suficiente para que se lean como dos
bloques, no tanto como para que parezcan dos secciones. */
.caso-video__txt p + p{margin-top:16px}
/* No hay botón en esta tarjeta y es deliberado: el vídeo lleva sus propios
controles, así que "ver su historia" sería un botón que no hace nada que
no haga ya el play. */
@media (max-width:1024px){
/* Entre 701 y 1024 la tarjeta sigue en dos columnas, pero el 33% se queda
corto para el vídeo: se le da algo más de sitio. */
.caso-video{grid-template-columns:minmax(200px,38%) 1fr;max-width:none}
.caso-video__txt h3{font-size:1.45rem}
.caso-video__txt p{font-size:1rem}
}
@media (max-width:700px){
/* En móvil la columna es una y el texto ya llena el ancho: el reparto de
escritorio no pinta nada aquí. Como el texto ha crecido de un párrafo a
dos, el cuerpo vuelve a .96rem y los espacios se aprietan, para que la
sección no se alargue por haber añadido contenido. */
.caso-video{grid-template-columns:1fr;gap:20px;padding:16px;max-width:none}
.caso-video__media{width:100%;max-width:280px;margin-inline:auto}
.caso-video__txt{text-align:center}
.caso-video__txt h3{font-size:1.38rem;margin:2px 0 10px}
.caso-video__txt p{font-size:.96rem;line-height:1.62;margin-inline:auto}
.caso-video__txt p + p{margin-top:12px}
}
/* ---- Logotipo de Google en la cabecera de testimonios ----
Señal de confianza discreta, a la altura de las estrellas. */
.tst-marca{display:flex;align-items:center;gap:16px;margin:20px 0 16px;flex-wrap:wrap}
.tst-marca .estrellas-fijas{margin:0}
.tst-google{
height:26px;width:auto;display:block;
/* separador fino entre el logotipo y las estrellas */
padding-right:16px;border-right:1px solid var(--linea);
}
@media (max-width:700px){
.tst-google{height:22px;padding-right:13px}
.tst-marca{gap:13px;margin:16px 0 14px}
}
/* =========================================================
23. DESFILE AUTOMÁTICO EN MÓVIL
Las clases .carrusel--desfile / .desfile las pone el JS y
sólo por debajo de 700px. En escritorio no se aplica nada:
el carrusel sigue siendo manual.
========================================================= */
@media (max-width:700px){
.carrusel--desfile{
overflow:hidden;
/* los bordes se difuminan para que entren y salgan sin corte */
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.carrusel__pista.desfile{
width:max-content;
overflow:visible;
scroll-snap-type:none;
animation:desfile-dcha var(--desfile,40s) linear infinite;
will-change:transform;
}
/* Se detiene mientras se toca o se enfoca, para poder leer */
.carrusel--desfile:active .desfile,
.carrusel--desfile:hover .desfile,
.carrusel--desfile:focus-within .desfile{animation-play-state:paused}
}
@keyframes desfile-dcha{
from{transform:translate3d(-50%,0,0)}
to {transform:translate3d(0,0,0)}
}
/* =========================================================
24. PREGUNTAS FRECUENTES
Acordeón sobre los mismos tokens del resto: tarjeta blanca,
borde --linea, radio de tarjeta y azul de marca en el icono.
El despliegue se anima con grid-template-rows 0fr→1fr, que no
obliga a medir alturas en JS y funciona con cualquier texto.
========================================================= */
.faq{
display:grid;gap:10px;
max-width:860px;margin-inline:auto;
}
.faq__item{
border:1px solid var(--linea);border-radius:var(--r-card);
background:var(--blanco);overflow:hidden;
transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.faq__item:has(.faq__btn[aria-expanded="true"]){
border-color:var(--chip);box-shadow:var(--sombra-sm);
}
/* El h3 sólo aporta estructura al documento: el aspecto lo da el botón */
.faq__t{margin:0;font:inherit;color:inherit;letter-spacing:normal}
.faq__btn{
display:flex;align-items:center;justify-content:space-between;gap:18px;
width:100%;padding:19px 22px;
border:0;background:none;cursor:pointer;text-align:left;
font-family:var(--display);font-size:1.02rem;font-weight:700;
letter-spacing:-.012em;line-height:1.35;color:var(--tinta);
transition:color .2s var(--ease),background .2s var(--ease);
}
.faq__btn:hover{color:var(--azul);background:var(--hueso)}
.faq__btn:focus-visible{outline:3px solid var(--azul);outline-offset:-3px;border-radius:var(--r-card)}
/* Icono "+" dibujado con dos filetes: gira a "×" sin cargar ningún SVG */
.faq__mas{
position:relative;flex:none;width:34px;height:34px;
border-radius:50%;background:var(--chip);
transition:background .25s var(--ease),transform .35s var(--ease);
}
.faq__mas::before,.faq__mas::after{
content:"";position:absolute;top:50%;left:50%;
width:13px;height:2px;border-radius:2px;background:var(--azul);
transform:translate(-50%,-50%);
transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.faq__mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__btn[aria-expanded="true"] .faq__mas{background:var(--azul)}
.faq__btn[aria-expanded="true"] .faq__mas::before,
.faq__btn[aria-expanded="true"] .faq__mas::after{background:#fff}
.faq__btn[aria-expanded="true"] .faq__mas::after{transform:translate(-50%,-50%) rotate(180deg)}
.faq__btn:hover .faq__mas{background:var(--azul)}
.faq__btn:hover .faq__mas::before,.faq__btn:hover .faq__mas::after{background:#fff}
/* Sin JS el panel lleva `hidden` y no se ve nada roto; con JS se le quita
y el cierre pasa a ser esta rejilla de 0fr. */
.faq__panel--js{
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .34s var(--ease);
}
.faq__panel--js > .faq__txt{
overflow:hidden;
/* visibility saca el texto cerrado del orden de tabulación y del
lector de pantalla; el retardo espera a que termine el plegado. */
visibility:hidden;opacity:0;
transition:visibility 0s linear .34s,opacity .2s var(--ease);
}
.faq__panel--js.abierto{grid-template-rows:1fr}
.faq__panel--js.abierto > .faq__txt{
visibility:visible;opacity:1;
transition:visibility 0s,opacity .3s var(--ease) .06s;
}
.faq__txt p{
padding:0 22px 20px;
font-size:1rem;line-height:1.66;color:var(--gris);max-width:68ch;
}
.faq__txt b{color:var(--tinta);font-weight:600}
@media (max-width:700px){
.faq{gap:9px}
.faq__btn{padding:16px 16px;font-size:.98rem;gap:12px}
.faq__mas{width:30px;height:30px}
.faq__mas::before,.faq__mas::after{width:12px}
.faq__txt p{padding:0 16px 17px;font-size:.96rem}
}
@media (prefers-reduced-motion:reduce){
.faq__panel--js,.faq__panel--js > .faq__txt,.faq__mas,
.faq__mas::before,.faq__mas::after{transition:none}
}
/* =========================================================
25. PUNTOS DE VALOR EN TABLET ESTRECHA (701–860px)
En esa franja los cuatro puntos no caben en una fila y el
cuarto se quedaba solo en la segunda, descentrado. Se pasa
al mismo 2×2 del móvil antes de que eso ocurra.
El mínimo de la consulta deja intacto el bloque de ≤700px.
========================================================= */
@media (min-width:701px) and (max-width:860px){
.avales,.avales-banda .avales{
display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;
}
.aval{max-width:none}
}
/* =========================================================
26. TU CAMINO EN ESPAÑA
Tres pasos unidos por un filete: en escritorio 01─02─03,
en móvil en columna. El filete lo dibuja el ::before del
propio paso, así que añadir o quitar uno no obliga a tocar
nada más. Los conceptos clave del subtítulo van con .clave,
no con un suelto, para que el énfasis sea tipográfico.
========================================================= */
.clave{font-weight:600;color:var(--tinta)}
.camino__pasos{
--camino-gap:clamp(18px,2.6vw,30px);
display:grid;grid-template-columns:repeat(3,1fr);
gap:var(--camino-gap);
}
.paso{
position:relative;
padding:clamp(22px,2.6vw,30px);
border-radius:var(--r-card);
background:var(--blanco);border:1px solid var(--linea);
box-shadow:var(--sombra-sm);
}
.paso__n{
display:block;
font-family:var(--mono);font-size:.82rem;font-weight:600;
letter-spacing:.18em;color:var(--azul);margin-bottom:14px;
}
.paso h3{margin-bottom:8px}
.paso p{font-size:.96rem}
/* El filete que une cada paso con el anterior */
.paso + .paso::before{
content:"";position:absolute;z-index:1;
top:50%;left:calc(-1 * var(--camino-gap));
width:var(--camino-gap);height:1px;
background:var(--linea);
}
.camino__nota{
margin-top:var(--esp-item);
font-size:.86rem;color:var(--gris-suave);text-align:center;
}
/* ---- Por debajo de 900px: en columna, el filete pasa a vertical ----
El corte va en 900 y no en 1024 a propósito: en tablet ancha los tres
pasos aún caben en fila (~300px cada uno) y es ahí donde se lee la
progresión 01→02→03. Apilándolos ya a 1024 la sección se iba a 925px
de alto y el recorrido dejaba de verse de un golpe. */
@media (max-width:900px){
.camino__pasos{grid-template-columns:1fr}
.paso + .paso::before{
top:calc(-1 * var(--camino-gap));left:50%;
width:1px;height:var(--camino-gap);
transform:translateX(-50%);
}
}
/* =========================================================
27. JERARQUÍA DE SERVICIOS
Tres niveles con peso visual distinto a propósito:
.destacado nivel 1 — estancia por estudios
.continuidad nivel 2 — prórroga y residencia y trabajo
.tramites nivel 3 — el resto (ya existía, sin cambios)
Si los tres se ven igual, la página no vende un camino.
========================================================= */
.destacado{
display:grid;grid-template-columns:.92fr 1.08fr;
gap:clamp(26px,3.4vw,50px);align-items:center;
padding:clamp(20px,2.4vw,30px);
border-radius:var(--r-card);
background:var(--blanco);border:1px solid var(--linea);
box-shadow:var(--sombra);
}
.destacado__media{
border-radius:var(--r-media);overflow:hidden;
aspect-ratio:4/3;background:var(--tinta);
}
.destacado__media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.destacado__txt h3{
font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.14;margin:6px 0 14px;
}
.destacado__txt > p{font-size:1.02rem;max-width:52ch}
/* El beneficio que de verdad mueve la decisión. Destacado, pero con el
condicional siempre delante: "en determinados supuestos". */
.destacado__plus{
margin:22px 0;padding:17px 20px;
border-radius:var(--r-btn);
background:var(--hueso);
box-shadow:inset 3px 0 0 var(--azul);
}
.destacado__plus b{
display:block;font-family:var(--display);font-size:1.02rem;
font-weight:750;letter-spacing:-.012em;color:var(--tinta);margin-bottom:6px;
}
.destacado__plus p{font-size:.94rem}
/* ---- Nivel 2 ---- */
.continuidad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
.cont{
display:flex;flex-direction:column;overflow:hidden;
border-radius:var(--r-card);background:var(--blanco);
border:1px solid var(--linea);box-shadow:var(--sombra-sm);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.cont:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--chip)}
.cont__media{aspect-ratio:16/9;background:var(--tinta);overflow:hidden;flex:none}
.cont__media img{width:100%;height:100%;object-fit:cover}
.cont__txt{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.4vw,28px)}
.cont__txt h4{font-size:1.18rem;line-height:1.24;margin:2px 0 10px}
.cont__txt p{font-size:.96rem;flex:1;margin-bottom:20px}
.cont__txt .btn{align-self:flex-start}
/* Nivel 3: el titular de "Otros trámites" no compite con el del nivel 1 */
.cab--nivel3 h2{font-size:clamp(1.45rem,2.3vw,1.95rem)}
/* ---- Tablet ---- */
@media (max-width:1024px){
.destacado{grid-template-columns:1fr;gap:24px}
.destacado__media{aspect-ratio:16/9}
}
/* ---- Móvil ---- */
@media (max-width:700px){
.continuidad{grid-template-columns:1fr}
.destacado{padding:16px}
.destacado__plus{margin:18px 0;padding:15px 16px}
.destacado__txt .btn{width:100%}
.cont__txt .btn{align-self:stretch}
}
/* =========================================================
28. BLOQUE DE LA RONDA DE REESTRUCTURACIÓN
Bloque autocontenido, como el 17: añade componentes nuevos
y sólo redefine reglas anteriores cuando se dice. Contiene
28.1 Icono de Instagram (cabecera y pie)
28.2 Transición "Continúa tu camino en España"
28.3 Beneficios + Personas acompañando personas (navy)
28.4 Más volumen desde "Otros trámites" hasta el pie
28.5 Velo del hero en móvil
Va al final del archivo a propósito: el 28.5 tiene que pesar
más que el velo del bloque 18, y ambos son .hero__velo dentro
de la misma consulta de ≤700px. Si mueves este bloque más
arriba, el velo de móvil vuelve al anterior sin avisar.
========================================================= */
/* ---------- 28.1 · Instagram ----------
Minimalista a propósito: sólo el icono, del tamaño de un
objetivo táctil, sin etiqueta ni tarjeta. El enlace no lleva
URL en el HTML; se la pone iniciarInstagram() desde
CONFIG.instagram, y si no hay perfil configurado el icono se
elimina del DOM. */
.ig{
display:grid;place-items:center;
width:42px;height:42px;flex:none;
border-radius:var(--r-btn);
color:var(--gris);
transition:color .2s var(--ease),background .2s var(--ease);
}
.ig svg{width:21px;height:21px}
.ig:hover{color:var(--azul);background:var(--chip)}
/* En el pie va bajo el botón de WhatsApp, sobre fondo tinta */
.ig--pie{margin-top:16px;color:rgba(255,255,255,.62)}
.ig--pie:hover{color:#fff;background:rgba(255,255,255,.10)}
/* ---------- 28.2 · Transición al nivel 2 ----------
La bisagra entre el servicio principal y los dos que lo
continúan. Centrada, con un filete vertical que baja desde el
bloque anterior: el recorrido se lee de arriba abajo.
Su titular NO puede alcanzar al del servicio principal
(clamp 1.45→2rem): si los dos pesan igual, los tres niveles de
la jerarquía comercial dejan de distinguirse. Por eso el tope
se queda en 1.85rem. */
.transicion{
position:relative;
max-width:600px;
margin:clamp(38px,4.6vw,62px) auto clamp(26px,3vw,38px);
padding-top:clamp(28px,3vw,38px);
text-align:center;
}
.transicion__filete{
position:absolute;top:0;left:50%;
width:1px;height:clamp(18px,2.2vw,26px);
transform:translateX(-50%);
background:linear-gradient(to bottom,rgba(30,107,235,0),var(--azul));
}
.transicion__r{margin-bottom:13px}
.transicion__t{
font-family:var(--display);
font-size:clamp(1.42rem,2.3vw,1.85rem);
font-weight:800;letter-spacing:-.022em;line-height:1.14;
color:var(--tinta);text-wrap:balance;
}
.transicion__p{
margin:14px auto 0;max-width:50ch;
font-size:1.02rem;line-height:1.6;
font-weight:var(--peso-sub);color:var(--gris);
}
/* ---------- 28.3 · Beneficios + acompañamiento ----------
Una sola sección navy con dos mitades. Los beneficios eran
cuatro tarjetas blancas en su propia sección; aquí son puntos
de una lista sobre el fondo oscuro, que es lo que permite
juntar los dos bloques sin alargar la página.
.confianza lleva un ::before absoluto con los dos radiales; el
contenido tiene que ir por encima, y ahora el hijo directo es
.contenedor (antes lo era .confianza__in, que ya traía su
position:relative). */
.confianza > .contenedor{position:relative}
.beneficios{
display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(20px,2.6vw,34px);
}
.beneficio{display:flex;align-items:flex-start;gap:14px}
.beneficio__ico{
display:grid;place-items:center;width:44px;height:44px;flex:none;
border-radius:50%;
background:rgba(76,141,240,.16);color:var(--azul-300);
}
.beneficio__ico svg{width:22px;height:22px}
.beneficio b{
display:block;font-family:var(--display);
font-size:1.02rem;font-weight:750;letter-spacing:-.012em;
color:#fff;line-height:1.24;margin-bottom:5px;
}
.beneficio p{font-size:.93rem;line-height:1.5;color:rgba(255,255,255,.72)}
/* El filete que separa el argumento racional del humano. Se
desvanece por los extremos para que no parezca el borde de una
sección nueva, que es justo lo que se quería quitar. */
.confianza__sep{
height:1px;margin:clamp(34px,4vw,52px) 0;
background:linear-gradient(90deg,
rgba(255,255,255,0),rgba(255,255,255,.20) 20%,
rgba(255,255,255,.20) 80%,rgba(255,255,255,0));
}
/* "Personas acompañando personas" pasó de h2 a h3 al fusionarse
las dos secciones (la sección ya tiene su h2 en Beneficios),
pero su peso visual es el mismo de antes: el cambio es de
estructura del documento, no de jerarquía visual. */
.confianza__t{
font-size:clamp(1.78rem,3.6vw,2.9rem);
font-weight:800;line-height:1.08;letter-spacing:-.025em;
color:#fff;text-wrap:balance;
}
.confianza__t .azul{color:var(--azul-300)}
/* ---------- 28.4 · Volumen en escritorio grande ----------
De "Otros trámites" al pie la página se quedaba estrecha: seis
bloques seguidos dentro de 1180px con tarjetas pequeñas. A
partir de 1200px esas secciones abren a 1320 y, con ellas,
crecen tarjetas, titulares y cuerpo de texto. Es ANCHO Y
ESCALA, no altura: no se añade ni un padding vertical.
Por debajo de 1200px no se aplica nada de esto y el tramo
final sigue midiendo lo mismo que el resto de la página. */
@media (min-width:1200px){
.seccion--ancha > .contenedor,
.site-footer > .contenedor{max-width:1320px}
/* Otros trámites (nivel 3) */
.seccion--ancha .cab--nivel3 h2{font-size:2.15rem}
.seccion--ancha .tramites .tarjeta{width:clamp(320px,26vw,390px);padding:22px 24px}
.seccion--ancha .tramites .tarjeta__ico{width:44px;height:44px}
.seccion--ancha .tramites .tarjeta__ico svg{width:22px;height:22px}
.seccion--ancha .tramites .tarjeta h4{font-size:1.06rem}
.seccion--ancha .tramites .tarjeta p{font-size:.91rem}
/* Beneficios + acompañamiento */
.seccion--ancha .beneficio__ico{width:48px;height:48px}
.seccion--ancha .beneficio__ico svg{width:24px;height:24px}
.seccion--ancha .beneficio b{font-size:1.08rem}
.seccion--ancha .beneficio p{font-size:.97rem}
.seccion--ancha .confianza__txt{font-size:1.18rem;max-width:54ch}
/* Preguntas frecuentes */
.seccion--ancha .faq{max-width:980px}
.seccion--ancha .faq__btn{font-size:1.1rem;padding:22px 28px}
.seccion--ancha .faq__txt p{padding:0 28px 22px;font-size:1.04rem}
/* Cierre y formulario */
.seccion--ancha .cierre__in{grid-template-columns:1fr 1.05fr}
.seccion--ancha .form{padding:42px}
.seccion--ancha .form h3{font-size:1.5rem}
/* Pie */
.site-footer .footer__in{gap:48px}
}
/* ---------- Tablet ---------- */
@media (max-width:1024px){
/* El icono queda a la derecha del logotipo, delante del CTA y de
la hamburguesa. El margen automático lo lleva ahora él: si lo
conservaran los dos, el espacio sobrante se repartiría entre
medias y el icono se iría al centro de la barra. */
.ig{order:1;margin-left:auto}
.header__cta{margin-left:0}
.beneficios{grid-template-columns:repeat(2,1fr)}
}
/* ---------- Móvil ---------- */
@media (max-width:700px){
/* ---- La barra de cabecera, medida ----
Cuatro elementos en 320px útiles (pantalla de 360): logotipo,
Instagram, CTA y hamburguesa. Con los tamaños anteriores la suma
daba 331px sobre 335 disponibles en un iPhone de 375, y en un
Android de 360 se salía: como el body lleva overflow-x:hidden, lo
que se pierde por la derecha es la hamburguesa, sin aviso.
Así que aquí se recorta a conciencia: hueco de 8px, icono de 34,
hamburguesa de 42 y el CTA con menos aire lateral. Todos siguen
por encima del objetivo táctil real, porque la barra mide 66px de
alto y el área pulsable de cada uno la completa ese alto.
Medido a 360px de ancho (320 útiles): 88 + 34 + 128 + 42 + 3×8 =
315. Entra, con 5px de margen. Si cambias cualquiera de estas
cifras, vuelve a sumar.
Y el logotipo cede el primero. Hoy se ve el texto de respaldo
(~88px), pero el SVG oficial declara 184x46 y a 38px de alto
ocuparía 152px: la fila se pasaría 26px y, como el body lleva
overflow-x:hidden, lo que desaparecería por la derecha sería la
hamburguesa, sin ningún aviso. Con flex:0 1 auto + min-width:0 y
object-fit:contain, el logotipo se encoge hasta el hueco que haya
en vez de empujar al resto fuera de la pantalla. */
.header__in{gap:8px}
.marca{flex:0 1 auto;min-width:0}
.marca__img{max-width:100%;object-fit:contain;object-position:left center}
.header__cta{padding:10px 13px}
.hamb{width:42px;height:42px}
.ig{width:34px;height:34px}
.ig svg{width:18px;height:18px}
.transicion{margin:32px auto 24px;padding-top:26px}
.beneficios{grid-template-columns:1fr;gap:17px}
.confianza__sep{margin:30px 0}
/* ---- 28.5 · Velo del hero ----
En vertical las fotografías competían con el texto, y no las
cuatro igual: la del atardecer y la de la oficina son oscuras,
pero la de Sevilla es un día de sol con el cielo casi blanco
justo detrás del titular. El velo está calibrado para LA PEOR
de las cuatro, no para la primera.
Dónde cae cada cosa en móvil (medido a 375x812, hero de 682px),
contando desde ABAJO, que es como van los stops:
CTA 8 – 22% α ≈ .78
lead 29 – 44% α ≈ .57
h1 46 – 68% α ≈ .46
rótulo 70 – 73% α ≈ .38
Son dos capas y las dos hacen falta: la de abajo arriba sostiene
el bloque de texto, y la de arriba abajo (suave) levanta el
rótulo, que es el elemento más pequeño y el que caía sobre el
cielo. La versión anterior sólo tenía la primera y topaba en .70.
Resultado sobre las CUATRO fotografías, midiendo el color medio
real de cada banda: el peor contraste de toda la tabla es 3,5:1
(el acento del titular, que es texto grande) y el peor del texto
blanco pequeño, 4,9:1. Antes el rótulo sobre Sevilla se quedaba
en 3,1:1.
El centro de la imagen se queda entre .38 y .46: la fotografía
se sigue viendo entera. Por encima de ~.60 en esa zona el azul
deja de ser un velo y se lee como un bloque macizo. */
.hero__velo{
background:
linear-gradient(to top,
rgba(3,34,80,.82) 0%,rgba(3,34,80,.70) 18%,rgba(3,34,80,.54) 40%,
rgba(3,34,80,.36) 62%,rgba(3,34,80,.18) 84%,rgba(3,34,80,.10) 100%),
linear-gradient(to bottom,
rgba(3,34,80,.34) 0%,rgba(3,34,80,.14) 26%,rgba(3,34,80,0) 52%);
}
/* El acento del titular sube de brillo SÓLO en móvil. Sobre la foto
de Sevilla, el #8FBBFF de escritorio se quedaba en 2,2:1 contra
el fondo ya velado —por debajo del 3:1 que pide un texto grande—
y el acento del titular se leía más flojo que el resto de la
frase, que es justo lo contrario de lo que tiene que pasar.
Con #B9D6FF sube a 3,5:1 en la peor foto y a 6–7,8:1 en las
otras tres, y sigue leyéndose como el mismo azul de marca. */
.hero .azul-claro{color:#B9D6FF}
}