/* ---------- La tipografía, alojada aquí ----------
Antes se pedía a fonts.googleapis.com y era EL cuello de botella: la hoja
de Google bloquea el pintado, tardaba 1.476 ms y dejaba la página en
blanco casi dos segundos, cuando todo lo demás llegaba en menos de 40.
Servida desde aquí se pinta enseguida, y de paso el navegador del
visitante deja de conectarse a Google, que era lo que obligaba a hablar
de terceros en la política de cookies.
Solo van los alfabetos latinos: el cirílico y el vietnamita que sirve
Google eran la mitad de los ficheros y aquí no los lee nadie. Cada peso
se descarga solo si la página lo usa. */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 600;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 600;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-800-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
/* swap: se lee con la tipografía del sistema mientras llega la buena, en
vez de dejar el texto invisible. */
font-display: swap;
src: url('fuentes/jakarta-800-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* La paleta es LA MISMA de la aplicación (software/frontend/src/index.css):
el marino y el turquesa del logotipo, el gris frío del fondo, los radios
de 8 y 16. Ni un color inventado: quien vea esta página y luego entre en
TimerClose tiene que reconocer el sitio. */
:root {
--fondo: #f3f4f8;
--superficie: #ffffff;
--borde: #e2e8f0;
--texto: #12223a;
/* Antes era #50627d y se quedaba en 5,6:1 sobre el fondo gris. Con este
gris azulado sube a 6,7:1, que es lo que hace falta para que la letra
pequeña (0,66 rem en el calendario) se lea a pleno sol en un móvil. */
--texto-suave: #45566e;
--acento: #1d1d60;
--acento-oscuro: #14144a;
--acento-suave: #e9e9f6;
--turquesa: #04c4b4;
--turquesa-suave: #d9f5f2;
/* Turquesa oscurecido para texto e iconos sobre fondo claro: el --turquesa
puro sobre blanco se queda en 2,3:1 y la etiqueta de sección es letra
pequeña. Este llega a 5,6:1 sobre blanco y 5,1:1 sobre el gris. */
--turquesa-oscuro: #0a7469;
--ok: #166534;
--ok-fondo: #dcfce7;
--error: #b91c1c;
--error-fondo: #fee2e2;
--aviso: #c2410c;
--aviso-fondo: #fef3c7;
/* Se usaba en el hueco del carrusel sin estar declarada en ningún sitio,
así que el trazo discontinuo salía negro. Es el mismo gris del borde
punteado de los módulos. */
--control-borde: #cbd5e1;
--radio: 8px;
--radio-tarjeta: 16px;
/* Dos sombras en vez de una: un filo muy corto que dibuja el canto de la
tarjeta y una difusa que la separa del fondo. Con una sola, o se ve el
borde o se ve el relieve, nunca los dos. */
--sombra-tarjeta: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 18px -12px rgba(15, 38, 70, 0.14);
--sombra: 0 2px 6px rgba(15, 38, 70, 0.05), 0 18px 40px -14px rgba(15, 38, 70, 0.22);
/* ---- Ritmo de la página ----
El aire lateral y el vertical crecen con la ventana en vez de saltar en
el breakpoint: así no hay ningún ancho en el que la página se vea
apretada de golpe. */
--contenedor-x: clamp(20px, 0.5rem + 2.6vw, 40px);
--seccion-y: clamp(54px, 1.6rem + 4.2vw, 84px);
/* Altura de la barra de arriba. Vale 0 porque hoy la barra NO es fija; si
alguien la hace pegajosa, basta con poner aquí su altura y los enlaces
del menú dejarán de aterrizar debajo de ella. */
--alto-barra: 0px;
/* Color del anillo de foco. Las secciones oscuras lo cambian a blanco. */
--anillo-foco: var(--acento);
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* El ancla no se pega al techo de la ventana: deja aire arriba (y sitio
para la barra si algún día se queda fija). */
scroll-padding-top: calc(var(--alto-barra) + 24px);
}
/* Quien tenga desactivadas las animaciones no quiere que la página vuele
sola al pulsar un enlace del menú. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
/* Red de seguridad contra el scroll horizontal en móviles estrechos.
"clip" y no "hidden" porque hidden convertiría el body en contenedor de
scroll y rompería cualquier position: sticky. */
overflow-x: clip;
background: var(--fondo);
color: var(--texto);
font-family: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: clamp(16px, 15.2px + 0.22vw, 17px);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Ninguna imagen puede sacar los pies del plato en 360 px. */
img, svg, video { max-width: 100%; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-oscuro); text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: pretty; }
p { margin: 0; }
/* ---------- Foco visible ----------
Se ve solo cuando se navega con el teclado (:focus-visible), nunca al
hacer clic con el ratón. Anillo grueso y separado del elemento para que se
distinga sobre cualquier fondo de la página. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--anillo-foco);
outline-offset: 3px;
border-radius: 6px;
}
/* Sobre el marino de la ley y del contacto, un anillo marino no se vería. */
.ley, .contacto, .boton-marino, .movil-cabecera { --anillo-foco: #ffffff; }
/* ---------- Saltar al contenido ----------
Primer tabulador de la página: quien navega con teclado o lector se salta
el menú y cae en el titular. Solo aparece cuando tiene el foco.
OJO: el enlace hay que ponerlo como primer hijo de y marcar el
destino con id="contenido" (ver A1.md). */
.saltar-al-contenido {
position: absolute;
left: 12px;
top: -80px;
z-index: 100;
padding: 12px 20px;
border-radius: var(--radio);
background: var(--acento);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
box-shadow: var(--sombra);
transition: top 0.15s ease;
}
.saltar-al-contenido:focus { top: 12px; color: #ffffff; text-decoration: none; }
.contenedor {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 var(--contenedor-x);
}
/* ---------- El logotipo ----------
El JPEG del logotipo (27 KB) estaba escrito DOS veces en la página, en la
barra y en el pie: 54 KB de los 211 que pesaba, para enseñar la misma
imagen. Ahora se pinta desde `logo.jpg`, una sola vez y como fichero: en
base64 ocupaba un 33 % más y viajaba dentro del CSS de cada página, en vez
de cachearse una vez para las cuatro. Se usa con
.
El fichero es de 1280x640, o sea 2:1; de ahí el ancho de cada tamaño. */
.logotipo {
display: block;
width: 120px;
height: 60px;
flex-shrink: 0;
background-image: url("logo.jpg");
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
/* El del pie se queda como estaba: el grande es el de la barra, que es el que
hace de marca. En el pie basta con que se reconozca. */
.logotipo-pie { width: 60px; height: 30px; }
/* ---------- Barra de arriba ---------- */
.barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 0;
border-bottom: 1px solid var(--borde);
background: var(--superficie);
}
.barra-marca { display: flex; align-items: center; gap: 10px; }
.barra-marca img { height: 34px; width: auto; display: block; }
.barra-enlaces { display: flex; align-items: center; gap: 28px; }
.barra-enlaces a { font-size: 0.92rem; font-weight: 600; }
/* El gris es para los enlaces del menú, NO para el botón de escribirnos: este
selector pesa más que .boton-marino y le comía el blanco, dejando letra gris
sobre el marino. Con :not(.boton) el botón se queda con su propio color. */
.barra-enlaces a:not(.boton) { color: var(--texto-suave); }
.barra-enlaces a:not(.boton):hover { color: var(--acento); text-decoration: none; }
/* "Acceder" lleva a la aplicación, que está en otro dominio (el .com). Va en
marino y no en el gris de los demás para que no se lea como una sección más
de esta página. La regla se pone DESPUÉS de la del gris: pesan lo mismo y
gana la última. */
.barra-enlaces a.barra-acceder { color: var(--acento); }
/* ---------- Botones ---------- */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 0 22px;
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.boton:hover { filter: brightness(0.93); text-decoration: none; }
.boton:active { transform: translateY(1px); }
/* El botón principal junta las dos tintas del logotipo —turquesa con letra
marina— igual que el botón de entrar de la aplicación. */
.boton-primario { background: var(--turquesa); color: #1d1d60; }
.boton-marino { background: var(--acento); color: #ffffff; }
.boton-neutro {
background: var(--superficie);
color: var(--acento);
border: 2px solid var(--borde);
}
.boton-neutro:hover { border-color: var(--acento); filter: none; }
@media (prefers-reduced-motion: reduce) {
.boton { transition: none; }
.boton:active { transform: none; }
}
/* ---------- Portada ---------- */
.portada {
position: relative;
overflow: hidden;
padding: calc(var(--seccion-y) + 8px) 0 calc(var(--seccion-y) + 12px);
/* Los dos lavados en diagonal del fondo de la aplicación, uno por tinta. */
background:
radial-gradient(circle at 12% 0%, rgba(4, 196, 180, 0.16), transparent 42%),
radial-gradient(circle at 92% 88%, rgba(29, 29, 96, 0.12), transparent 46%),
var(--fondo);
}
.portada-rejilla {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 56px;
align-items: center;
}
/* El titular crece con la ventana en vez de saltar de 2,3 a 3,5 rem en el
breakpoint: en una tablet de 900 px se veía o enano o partido en cinco
líneas, según de qué lado del salto cayera. */
.portada h1 {
font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.035em;
text-wrap: balance;
}
.portada-entrada {
margin-top: 20px;
font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
color: var(--texto-suave);
max-width: 30em;
}
.portada-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.portada-pie { margin-top: 18px; font-size: 0.85rem; color: var(--texto-suave); }
.chip-ley {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 22px;
padding: 7px 16px 7px 12px;
border-radius: 999px;
background: var(--acento-suave);
color: var(--acento);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.chip-ley svg { flex-shrink: 0; }
/* ---------- El móvil de la portada ---------- */
.portada-mockup { position: relative; display: flex; justify-content: center; }
/* Sin barra de estado ni teclado dibujados: en un móvil de verdad los pinta
el sistema encima y quedaría doble. */
.movil {
width: 286px;
max-width: 100%;
border-radius: 34px;
border: 1px solid var(--borde);
background: var(--superficie);
box-shadow: 0 30px 60px rgba(15, 38, 70, 0.18);
overflow: hidden;
}
.movil-cabecera {
display: flex;
align-items: center;
gap: 9px;
padding: 13px 16px;
background: var(--acento);
color: #ffffff;
}
.movil-disco {
width: 30px; height: 30px;
border-radius: 50%;
background: #ffffff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.movil-cabecera strong { font-size: 0.86rem; font-weight: 700; }
.movil-cabecera span { display: block; font-size: 0.66rem; color: rgba(217, 245, 242, 0.7); }
.movil-cuerpo { padding: 20px 18px 14px; }
.movil-reloj {
text-align: center;
font-size: 2.6rem;
font-weight: 800;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.movil-estado {
margin-top: 2px;
text-align: center;
font-size: 0.82rem;
font-weight: 600;
color: var(--ok);
}
.movil-boton {
display: flex;
align-items: center;
justify-content: center;
margin-top: 18px;
min-height: 66px;
border-radius: 16px;
background: var(--acento);
color: #ffffff;
font-size: 1.05rem;
font-weight: 800;
}
.movil-boton-suave {
display: flex;
align-items: center;
justify-content: center;
margin-top: 9px;
min-height: 52px;
border-radius: 16px;
border: 2px solid var(--borde);
color: var(--texto);
font-size: 0.95rem;
font-weight: 700;
}
.movil-lineas { display: flex; flex-direction: column; margin-top: 16px; }
.movil-linea {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--borde);
font-size: 0.82rem;
color: var(--texto-suave);
}
.movil-linea b { color: var(--texto); font-variant-numeric: tabular-nums; }
.movil-nav {
display: flex;
border-top: 1px solid var(--borde);
}
.movil-nav div {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 9px 4px 12px;
font-size: 0.63rem;
font-weight: 600;
color: var(--texto-suave);
}
.movil-nav div.activo { color: var(--acento); }
.tarjeta-flotante {
position: absolute;
left: -14px;
bottom: 46px;
display: flex;
align-items: flex-start;
gap: 10px;
width: 268px;
max-width: calc(100% - 8px);
padding: 13px 15px;
border-radius: 14px;
background: var(--superficie);
border: 1px solid var(--borde);
box-shadow: var(--sombra);
font-size: 0.82rem;
line-height: 1.4;
}
.tarjeta-flotante .punto {
width: 9px; height: 9px;
margin-top: 6px;
border-radius: 50%;
background: var(--turquesa);
flex-shrink: 0;
/* Para que el halo de `latido` se coloque detrás. */
position: relative;
}
/* El halo que late. Es un círculo detrás del punto que crece y se desvanece;
antes era un `box-shadow` animado, y eso el navegador lo repinta en cada
fotograma, sin parar, mientras la página esté abierta. Con `transform` y
`opacity` lo hace la tarjeta gráfica y no cuesta nada. Se ve igual. */
.tarjeta-flotante .punto::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: 50%;
background: rgba(4, 196, 180, 0.45);
}
/* ---------- Confianza: el dato y el carrusel de empresas ---------- */
.confianza {
padding: 38px 0 42px;
background: var(--superficie);
border-bottom: 1px solid var(--borde);
}
.confianza-cabecera {
display: flex;
align-items: center;
gap: 18px 32px;
flex-wrap: wrap;
margin-bottom: 26px;
}
.confianza-dato { display: flex; align-items: baseline; gap: 14px; }
.confianza-dato strong {
font-size: clamp(2.1rem, 1.6rem + 1.4vw, 2.7rem);
font-weight: 800;
letter-spacing: -0.04em;
color: var(--acento);
font-variant-numeric: tabular-nums;
}
.confianza-dato span { font-size: 1.02rem; color: var(--texto-suave); max-width: 22em; }
.confianza-texto {
margin-left: auto;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--texto-suave);
}
/* El carrusel se mueve solo y en bucle: la pista lleva la lista DOS veces y
se desplaza justo la mitad, así al terminar vuelve al punto de partida sin
que se vea el salto. Para añadir o quitar empresas hay que tocar las dos
mitades. */
/* Los bordes se difuminan con dos degradados por encima, y NO con
`mask-image` (2026-09-01). La máscara obliga al navegador a redibujar la
banda entera en cada fotograma mientras la pista se mueve —y son dos
tiras en bucle, una en cada sentido—, así que se llevaba por delante los
fotogramas de toda la página, no solo los del carrusel. El degradado sale
del mismo color de fondo de la banda, así que se ve exactamente igual, y
en modo oscuro también, porque es la misma variable. */
.carrusel {
overflow: hidden;
position: relative;
}
.carrusel::before,
.carrusel::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 6%;
z-index: 1;
/* Los degradados tapan la pista: no pueden comerse ni un clic ni el
arrastre del dedo. */
pointer-events: none;
}
.carrusel::before { left: 0; background: linear-gradient(90deg, var(--superficie), transparent); }
.carrusel::after { right: 0; background: linear-gradient(270deg, var(--superficie), transparent); }
.carrusel-pista {
display: flex;
gap: 16px;
width: max-content;
animation: desfile 34s linear infinite;
/* Capa propia: el desplazamiento lo hace la tarjeta gráfica y no repinta
nada de lo que hay debajo. */
will-change: transform;
}
/* Fuera de la pantalla no se mueve (A11). Dos bucles infinitos corriendo
mientras se lee el final de la página son fotogramas tirados a la basura,
y en un móvil eso es batería. */
.carrusel.parado .carrusel-pista { animation-play-state: paused; }
/* Lo mismo con el latido del aviso de la portada: se pasa la mayor parte del
tiempo fuera de la pantalla, leyendo lo de abajo. */
.tarjeta-flotante.parado .punto::after { animation-play-state: paused; }
@keyframes desfile {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Quien tenga desactivadas las animaciones en su móvil ve la fila quieta. */
@media (prefers-reduced-motion: reduce) {
.carrusel-pista { animation: none; }
}
.carrusel-empresa {
display: flex;
align-items: center;
justify-content: center;
width: 196px;
height: 82px;
flex-shrink: 0;
padding: 12px 16px;
border-radius: 14px;
background: var(--fondo);
border: 1px solid var(--borde);
}
.carrusel-empresa img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* El hueco vacío va con trazo discontinuo y el nombre entre corchetes: así
no hay manera de mandar la página con los huecos puestos sin darse cuenta. */
.carrusel-empresa.hueco {
border: 2px dashed var(--control-borde);
background: transparent;
color: var(--texto-suave);
font-size: 0.85rem;
font-weight: 700;
}
/* ---------- Secciones ---------- */
.seccion { padding: var(--seccion-y) 0; }
.seccion-blanca { background: var(--superficie); }
.seccion-cabecera { max-width: 44em; margin-bottom: clamp(30px, 1.2rem + 1.6vw, 44px); }
.seccion-etiqueta {
display: block;
margin-bottom: 12px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
/* El turquesa puro sobre blanco se queda en 2,3:1 y esta etiqueta es letra
pequeña: va con la versión oscura, que sí se lee. */
color: var(--turquesa-oscuro);
}
.seccion h2 { font-size: clamp(1.8rem, 1.28rem + 1.65vw, 2.35rem); letter-spacing: -0.03em; }
.seccion-cabecera p { margin-top: 14px; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); color: var(--texto-suave); }
/* ---------- La ley ---------- */
.ley { background: var(--acento); color: #ffffff; }
.ley h2 { color: #ffffff; font-size: clamp(1.8rem, 1.28rem + 1.65vw, 2.35rem); letter-spacing: -0.03em; max-width: 16em; }
.ley-entrada { margin-top: 18px; max-width: 46em; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); color: rgba(233, 233, 246, 0.82); }
.ley-tarjetas {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 40px;
}
.ley-tarjeta {
padding: 24px 26px;
border-radius: var(--radio-tarjeta);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.ley-tarjeta svg { color: var(--turquesa); margin-bottom: 14px; }
.ley-tarjeta strong {
display: block;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.015em;
color: #ffffff;
}
.ley-tarjeta span { display: block; margin-top: 8px; font-size: 0.92rem; color: rgba(233, 233, 246, 0.8); }
/* Lo de 2019 no es la novedad, pero sigue vigente: va en una tira compacta
para no robarle el sitio a lo que viene. */
.ley-hoy {
display: grid;
grid-template-columns: minmax(0, 0.9fr) repeat(3, minmax(0, 1fr));
gap: 28px;
align-items: start;
margin-top: 44px;
padding-top: 34px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.ley-hoy-titulo { font-size: 1.05rem; font-weight: 700; }
.ley-hoy-titulo span {
display: block;
margin-top: 6px;
font-size: 0.88rem;
font-weight: 400;
color: rgba(233, 233, 246, 0.72);
}
.ley-hoy-dato strong {
display: block;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--turquesa);
}
.ley-hoy-dato span { display: block; margin-top: 6px; font-size: 0.88rem; color: rgba(233, 233, 246, 0.78); }
/* ---------- Qué incluye ---------- */
.rejilla-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.funcion {
padding: 26px 24px 28px;
border-radius: var(--radio-tarjeta);
background: var(--fondo);
border: 1px solid var(--borde);
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.funcion:hover { border-color: var(--control-borde); }
.funcion-icono {
display: flex;
align-items: center;
justify-content: center;
width: 42px; height: 42px;
margin-bottom: 18px;
border-radius: 12px;
background: var(--superficie);
border: 1px solid var(--borde);
color: var(--acento);
}
.funcion h3 { font-size: 1.03rem; letter-spacing: -0.015em; }
.funcion p { margin-top: 8px; font-size: 0.9rem; line-height: 1.5; color: var(--texto-suave); }
/* ---------- El producto por dentro ---------- */
.producto {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 48px;
align-items: center;
}
.calendario-mock {
padding: 22px;
border-radius: var(--radio-tarjeta);
background: var(--superficie);
border: 1px solid var(--borde);
box-shadow: var(--sombra);
}
.calendario-mock-cabecera {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.calendario-mock-cabecera strong { font-size: 1rem; }
.calendario-mock-cabecera span { font-size: 0.8rem; color: var(--texto-suave); }
.calendario-rejilla {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
}
.calendario-dia-nombre {
text-align: center;
font-size: 0.66rem;
font-weight: 700;
color: var(--texto-suave);
padding-bottom: 2px;
}
.calendario-dia {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 54px;
padding: 5px 6px;
border: 1px solid var(--borde);
border-radius: var(--radio);
background: #f8fafc;
font-size: 0.72rem;
}
.calendario-dia .arriba {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3px;
color: var(--texto-suave);
font-size: 0.66rem;
}
.calendario-dia .horas {
text-align: right;
font-weight: 700;
font-variant-numeric: tabular-nums;
font-size: 0.7rem;
}
.calendario-dia.vacio { background: transparent; border-color: transparent; }
.calendario-dia.incompleto { background: var(--error-fondo); border-color: var(--error); }
.calendario-dia.incompleto .arriba,
.calendario-dia.incompleto .horas { color: var(--error); }
.calendario-dia.hoy { border-color: var(--turquesa); border-width: 2px; }
.calendario-leyenda {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin-top: 14px;
font-size: 0.76rem;
color: var(--texto-suave);
}
.lista-marcada { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.lista-marcada > div { display: flex; gap: 12px; align-items: flex-start; }
.lista-marcada svg { flex-shrink: 0; margin-top: 3px; color: var(--turquesa-oscuro); }
.lista-marcada strong { display: block; font-size: 1rem; }
.lista-marcada span { display: block; margin-top: 2px; font-size: 0.93rem; color: var(--texto-suave); }
/* ---------- Planes ---------- */
.planes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
.plan {
display: flex;
flex-direction: column;
padding: 30px 26px 30px;
border-radius: var(--radio-tarjeta);
background: var(--superficie);
border: 1px solid var(--borde);
box-shadow: var(--sombra-tarjeta);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan:hover { border-color: var(--control-borde); box-shadow: var(--sombra); }
.plan.destacado {
border: 2px solid var(--acento);
box-shadow: var(--sombra);
}
.plan.destacado:hover { border-color: var(--acento); }
.plan-etiqueta {
align-self: flex-start;
margin-bottom: 14px;
padding: 3px 12px;
border-radius: 999px;
background: var(--turquesa-suave);
color: var(--acento);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.plan-etiqueta.hueca { background: transparent; color: transparent; }
.plan h3 { font-size: 1.25rem; }
.plan-precio {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 14px;
}
.plan-precio strong {
font-size: clamp(2.1rem, 1.72rem + 1.05vw, 2.5rem);
font-weight: 800;
letter-spacing: -0.035em;
color: var(--acento);
font-variant-numeric: tabular-nums;
}
.plan-precio span { font-size: 0.9rem; color: var(--texto-suave); }
.plan-tope {
margin-top: 10px;
padding-top: 16px;
border-top: 1px solid var(--borde);
font-size: 0.97rem;
font-weight: 600;
}
.plan-nota { margin-top: 6px; font-size: 0.86rem; color: var(--texto-suave); }
.plan .boton { margin-top: auto; width: 100%; }
.plan-espacio { flex: 1; min-height: 22px; }
/* ---------- Datos y RGPD ---------- */
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dato {
display: flex;
gap: 16px;
padding: 24px 26px;
border-radius: var(--radio-tarjeta);
background: var(--superficie);
border: 1px solid var(--borde);
transition: border-color 0.15s ease;
}
.dato:hover { border-color: var(--control-borde); }
.dato svg { flex-shrink: 0; margin-top: 2px; color: var(--acento); }
.dato strong { display: block; font-size: 1.03rem; }
.dato p { margin-top: 6px; font-size: 0.93rem; color: var(--texto-suave); }
/* ---------- Dudas ---------- */
.dudas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; }
.duda { padding-bottom: 20px; border-bottom: 1px solid var(--borde); }
.duda h3 { font-size: 1.05rem; }
.duda p { margin-top: 8px; font-size: 0.95rem; color: var(--texto-suave); }
.contacto {
margin-top: 52px;
padding: 46px 48px;
border-radius: 22px;
background: var(--acento);
color: #ffffff;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 40px;
align-items: center;
}
.contacto h2 { color: #ffffff; font-size: clamp(1.55rem, 1.28rem + 0.85vw, 1.9rem); letter-spacing: -0.03em; }
.contacto p { margin-top: 12px; font-size: 1.02rem; color: rgba(233, 233, 246, 0.82); max-width: 34em; }
.contacto-correo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.contacto-correo a.correo {
font-size: clamp(1.25rem, 1.07rem + 0.55vw, 1.5rem);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--turquesa);
text-decoration: none;
overflow-wrap: anywhere;
}
.contacto-correo a.correo:hover { color: #ffffff; text-decoration: underline; }
/* ---------- Pie ---------- */
.pie {
padding: 40px 0 48px;
background: var(--superficie);
border-top: 1px solid var(--borde);
}
.pie-fila {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.pie-marca { display: flex; align-items: center; gap: 12px; }
.pie-marca img { height: 30px; width: auto; display: block; }
.pie-marca span { font-size: 0.86rem; color: var(--texto-suave); }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 24px; font-size: 0.88rem; }
.pie-legal { margin-top: 22px; font-size: 0.78rem; color: var(--texto-suave); max-width: 60em; }
/* ---------- Tablet y portátil pequeño ----------
Entre 760 y 1180 px la página iba con la rejilla de escritorio metida con
calzador: cuatro columnas de planes en 900 px salen a 200 px cada una y el
precio no cabe. Aquí se pasa a dos columnas, que es lo que se lee. */
@media (max-width: 1024px) {
.portada-rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; }
.movil { width: 262px; }
.ley-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
/* El título deja de competir por sitio con los tres datos y se pone encima. */
.ley-hoy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.ley-hoy-titulo { grid-column: 1 / -1; }
.rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.producto { gap: 32px; }
.contacto { padding: 38px 36px; gap: 32px; }
}
/* A partir de aquí las dos columnas de la portada y del producto ya no dan
de sí: el móvil de la portada se comería el titular. */
@media (max-width: 880px) {
.portada-rejilla { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.producto { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.dudas { gap: 18px 28px; }
}
/* ---------- Móvil ----------
La misma página, apilada. El artboard de 390 px enseña exactamente esto. */
@media (max-width: 760px) {
/* En 390 px de ancho no caben cinco enlaces: la barra se queda con la
marca y el botón, que es lo único que hay que tocar desde el móvil. */
.barra { gap: 12px; padding: 14px 0; }
.barra-marca img { height: 30px; }
.logotipo { width: 92px; height: 46px; }
.barra-enlaces a:not(.boton) { display: none; }
.barra .boton { min-height: 40px; padding: 0 16px; font-size: 0.85rem; }
.portada { padding: 44px 0 52px; }
.portada-acciones .boton { flex: 1; min-width: 150px; }
.tarjeta-flotante { position: static; width: 100%; max-width: 100%; margin-top: 18px; }
/* Dentro de un móvil de verdad no se dibuja otro móvil: se le cae el marco
y la pantalla de fichar queda como una tarjeta a todo el ancho, que es
exactamente lo que va a ver el visitante cuando entre en la aplicación. */
.portada-mockup .movil {
width: 100%;
border-radius: 20px;
box-shadow: var(--sombra-tarjeta);
}
.movil-reloj { font-size: 3rem; }
.movil-boton { min-height: 72px; }
/* El calendario en 390 px: siete columnas en poco más de 300 px. Sin bajar
huecos, altos y letra, las casillas se desbordan y el mes deja de leerse. */
.calendario-mock { padding: 14px; }
.calendario-mock-cabecera { flex-direction: column; align-items: flex-start; gap: 2px; }
.calendario-rejilla { gap: 3px; }
.calendario-dia { min-height: 44px; padding: 3px 4px; }
.calendario-dia .arriba { font-size: 0.58rem; gap: 1px; }
.calendario-dia .horas { font-size: 0.6rem; }
.calendario-dia-nombre { font-size: 0.58rem; }
.calendario-leyenda { gap: 4px 12px; font-size: 0.72rem; }
/* El carrusel sigue rodando en el móvil, con fichas más pequeñas. */
.confianza { padding: 28px 0 32px; }
.confianza-cabecera { margin-bottom: 20px; gap: 10px; }
.confianza-dato { gap: 10px; }
.confianza-dato span { font-size: 0.95rem; }
.confianza-texto { margin-left: 0; }
.carrusel-pista { gap: 12px; }
.carrusel-empresa { width: 152px; height: 68px; font-size: 0.78rem; }
.seccion-cabecera { margin-bottom: 30px; }
.ley-tarjetas { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
.ley-hoy { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; padding-top: 26px; }
.rejilla-4, .rejilla-2, .planes, .dudas { grid-template-columns: minmax(0, 1fr); }
.plan-etiqueta.hueca { display: none; }
.contacto {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
padding: 32px 24px;
margin-top: 36px;
}
.pie-fila { flex-direction: column; align-items: flex-start; }
}
/* Los móviles de 360 px y menos: se recorta el aire lateral y las cifras
grandes, que son lo único capaz de sacar barra horizontal. */
@media (max-width: 380px) {
.contacto { padding: 28px 20px; }
.plan, .funcion, .dato { padding-left: 20px; padding-right: 20px; }
.ley-tarjeta { padding: 20px 22px; }
}
/* ---------- Impresión ----------
Un gestor imprime esta página para llevársela a la gestoría o al comité.
Fuera lo que en papel no sirve (menú, carrusel, botones), fondos oscuros a
blanco para no gastar un cartucho, y las tarjetas sin partirse por la
mitad al cambiar de hoja. */
@media print {
@page { margin: 14mm; }
html { scroll-behavior: auto; }
body {
background: #ffffff;
color: #000000;
font-size: 11pt;
line-height: 1.4;
}
.barra-enlaces, .carrusel, .confianza-texto, .boton, .saltar-al-contenido,
.movil-nav, .tarjeta-flotante { display: none !important; }
.contenedor { max-width: none; padding: 0; }
.seccion, .portada { padding: 18pt 0; }
.portada { background: none; }
.portada-rejilla, .producto, .contacto, .ley-hoy {
grid-template-columns: minmax(0, 1fr);
gap: 14pt;
}
.rejilla-4, .rejilla-2, .dudas, .ley-tarjetas {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10pt;
}
.planes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8pt; }
/* Las secciones marinas en papel: letra negra sobre blanco con un filete
de encuadre, que es lo que se lee en una fotocopia. */
.ley, .contacto, .movil-cabecera, .movil-boton {
background: #ffffff !important;
color: #000000 !important;
border: 1px solid #999999;
}
.ley h2, .ley-tarjeta strong, .contacto h2,
.ley-entrada, .ley-tarjeta span, .ley-hoy-titulo span,
.ley-hoy-dato span, .contacto p { color: #000000 !important; }
.ley-tarjeta {
background: #ffffff !important;
border: 1px solid #999999;
}
.ley-tarjeta svg, .ley-hoy-dato strong,
.seccion-etiqueta, .contacto-correo a.correo { color: #000000 !important; }
.funcion, .plan, .dato, .calendario-mock, .movil {
box-shadow: none !important;
border: 1px solid #999999;
background: #ffffff !important;
break-inside: avoid;
page-break-inside: avoid;
}
.duda, .lista-marcada > div { break-inside: avoid; page-break-inside: avoid; }
h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
/* En papel un enlace sin su dirección no lleva a ninguna parte. El correo
se escribe entero, sin el mailto: delante. */
.pie-enlaces a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
a[href^="mailto:"]::after { content: ""; }
}
/* ===================== A2 ===================== */
/* ================================================================
A2 · Barra, portada y banda de confianza
================================================================ */
/* La barra pasa a estar pegada arriba, así que --alto-barra deja de valer 0:
de esta variable sale el scroll-padding-top que ya escribió A1, y es lo
que evita que al pulsar "La ley nueva" el título quede tapado. */
:root { --alto-barra: 68px; }
/* ---------- Barra pegada arriba ---------- */
.barra-fija {
position: sticky;
top: 0;
z-index: 60;
background: var(--superficie);
border-bottom: 1px solid var(--borde);
transition: box-shadow 0.2s ease;
}
/* La sombra la pone A2.js solo cuando la página ya ha bajado: arriba del
todo la barra tiene que parecer parte de la portada, no una capa encima. */
.barra-fija.con-sombra { box-shadow: 0 6px 22px rgba(15, 38, 70, 0.09); }
/* El fondo y la raya de abajo ya los pone .barra-fija. */
.barra {
min-height: var(--alto-barra);
padding: 0;
background: transparent;
border-bottom: none;
}
.barra-marca, .barra-marca:hover { text-decoration: none; }
.barra-enlaces a { transition: color 0.15s ease; }
/* El botón de menú solo aparece cuando los enlaces no caben (ver abajo). */
.barra-hamburguesa {
display: none;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
flex-shrink: 0;
border: 1px solid var(--borde);
border-radius: 12px;
background: var(--superficie);
color: var(--acento);
cursor: pointer;
}
.barra-rayas { display: block; position: relative; width: 20px; height: 14px; }
.barra-rayas i {
position: absolute;
left: 0; right: 0;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.2s ease, opacity 0.15s ease;
}
.barra-rayas i:nth-child(1) { top: 0; }
.barra-rayas i:nth-child(2) { top: 6px; }
.barra-rayas i:nth-child(3) { top: 12px; }
/* Abierto, las tres rayas se convierten en la equis de cerrar: el mismo
botón sirve para las dos cosas y no hay que buscar dónde se cierra. */
.barra-hamburguesa[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.barra-hamburguesa[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.barra-hamburguesa[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* El panel cuelga de la barra en posición absoluta para que abrirlo no
empuje la página hacia abajo. */
.barra-menu {
display: none;
position: absolute;
left: 0; right: 0;
top: 100%;
background: var(--superficie);
border-bottom: 1px solid var(--borde);
box-shadow: 0 18px 32px rgba(15, 38, 70, 0.12);
}
.barra-menu .contenedor {
display: flex;
flex-direction: column;
padding-top: 6px;
padding-bottom: 20px;
}
.barra-menu a:not(.boton) {
padding: 15px 2px;
font-size: 1.02rem;
font-weight: 700;
color: var(--texto);
border-bottom: 1px solid var(--borde);
}
.barra-menu a:not(.boton):hover { color: var(--acento); text-decoration: none; }
.barra-menu .boton { margin-top: 18px; min-height: 52px; }
/* Foco visible de verdad en todo lo que se pulsa aquí arriba: quien navega
con el teclado tiene que ver dónde está. */
.barra-fija a:focus-visible,
.barra-hamburguesa:focus-visible,
.portada-acciones .boton:focus-visible,
.portada-pie a:focus-visible {
outline: 3px solid var(--acento);
outline-offset: 3px;
border-radius: 10px;
}
/* ---------- Portada ---------- */
.portada { padding: 88px 0 100px; }
.portada-rejilla { gap: 64px; }
/* El titular es lo primero que se lee y tiene que pesar más de lo que
pesaba: sube el techo de la escala fluida de A1 (3.5 → 3.9rem) sin tocar
la forma de la fórmula, para que siga creciendo con el zoom del sistema
y no solo con el ancho de la ventana. */
.portada h1 {
font-size: clamp(2.35rem, 1.45rem + 3.8vw, 3.9rem);
line-height: 1.06;
letter-spacing: -0.04em;
}
/* Subrayado turquesa por detrás en vez de letra turquesa: sobre blanco el
turquesa no tiene contraste suficiente para leerse como texto. */
.portada-resalte {
background: linear-gradient(transparent 63%, var(--turquesa-suave) 63%);
padding: 0 0.06em;
}
.portada-entrada {
margin-top: 22px;
font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.22rem);
line-height: 1.5;
max-width: 27em;
}
.portada-acciones { margin-top: 34px; gap: 14px; }
.portada-acciones .boton {
min-height: 56px;
padding: 0 30px;
font-size: 1.02rem;
transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* El botón principal es el único elemento de la página con sombra de color:
a tres metros de distancia se ve dónde hay que pulsar. */
.portada-acciones .boton-primario { box-shadow: 0 12px 26px rgba(4, 196, 180, 0.36); }
.portada-acciones .boton-primario:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(4, 196, 180, 0.42); }
.portada-acciones .boton-neutro:hover { transform: translateY(-2px); }
.portada-garantias {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.portada-garantias li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.96rem;
color: var(--texto-suave);
}
.portada-garantias svg { flex-shrink: 0; margin-top: 3px; color: var(--turquesa); }
.portada-pie {
margin-top: 28px;
padding-left: 14px;
border-left: 3px solid var(--turquesa);
font-size: 0.88rem;
line-height: 1.5;
}
.portada-pie a { font-weight: 700; white-space: nowrap; }
/* ---------- El móvil de la portada ---------- */
/* Un halo turquesa detrás para despegar el móvil del fondo; si no, el
marco oscuro se queda flotando sin apoyo. */
.portada-mockup::before {
content: "";
position: absolute;
inset: -6% -4%;
border-radius: 50%;
background: radial-gradient(circle at 50% 45%, rgba(4, 196, 180, 0.22), transparent 62%);
pointer-events: none;
}
.movil {
position: relative;
z-index: 1;
width: 304px;
padding: 9px; /* el marco del aparato */
border: none;
border-radius: 44px;
background: linear-gradient(155deg, #3b3b86 0%, #14144a 52%, #0d0d33 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 34px 70px rgba(15, 38, 70, 0.32),
0 10px 20px rgba(15, 38, 70, 0.16);
}
/* Reflejo diagonal del cristal, muy flojo: da el volumen sin parecer un
dibujo de móvil de catálogo. */
.movil::after {
content: "";
position: absolute;
inset: 0;
border-radius: 44px;
background: linear-gradient(118deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 40%);
pointer-events: none;
}
.movil-pantalla {
position: relative;
z-index: 1;
border-radius: 36px;
overflow: hidden;
background: var(--superficie);
}
/* El punto verde delante del estado: es la señal de "estás dentro". */
.movil-estado::before {
content: "";
display: inline-block;
width: 7px; height: 7px;
margin-right: 6px;
border-radius: 50%;
background: var(--ok);
vertical-align: middle;
}
.movil-sello {
position: absolute;
z-index: 2;
right: -14px;
top: 40px;
display: flex;
align-items: flex-start;
gap: 9px;
width: 200px;
padding: 11px 13px;
border-radius: 14px;
background: var(--superficie);
border: 1px solid var(--borde);
box-shadow: var(--sombra);
font-size: 0.78rem;
line-height: 1.35;
color: var(--texto-suave);
}
.movil-sello svg { flex-shrink: 0; margin-top: 1px; color: var(--acento); }
.movil-sello strong { color: var(--texto); }
.tarjeta-flotante { z-index: 2; }
.tarjeta-flotante strong { color: var(--texto); }
/* La secuencia de entrada cuenta la escena en orden: primero aparece el
móvil, después el aviso que le llega al jefe. Nada se mueve por sí solo
una vez terminada: la portada no es un anuncio parpadeando. */
@keyframes movil-entra {
from { opacity: 0; transform: translateY(20px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@keyframes aviso-entra {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@keyframes latido {
/* Empieza del tamaño justo del punto —escondido detrás de él— y se abre
hasta 23 px (9 + 7 por cada lado, que es lo que medía la sombra). */
0%, 70%, 100% { transform: scale(1); opacity: 0.45; }
35% { transform: scale(2.55); opacity: 0; }
}
.movil { animation: movil-entra 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.tarjeta-flotante { animation: aviso-entra 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.65s both; }
.movil-sello { animation: aviso-entra 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.95s both; }
.tarjeta-flotante .punto::after { animation: latido 2.6s ease-out 1.4s infinite; }
/* Quien tenga desactivadas las animaciones lo ve todo puesto y quieto. */
@media (prefers-reduced-motion: reduce) {
.movil, .tarjeta-flotante, .movil-sello, .tarjeta-flotante .punto::after {
animation: none;
opacity: 1;
transform: none;
}
.portada-acciones .boton:hover { transform: none; }
.barra-fija, .barra-rayas i { transition: none; }
}
/* ---------- Confianza ---------- */
.confianza { padding: 34px 0 36px; }
.confianza-cabecera { margin-bottom: 22px; }
.confianza-dato strong { line-height: 1; }
.confianza-texto { align-self: flex-end; }
/* El carrusel se para al pasar por encima: si a alguien le interesa un
sector, puede pararse a leerlo. */
.carrusel:hover .carrusel-pista,
.carrusel:focus-within .carrusel-pista { animation-play-state: paused; }
/* Las fichas de sector son pastillas, no cajas de logotipo: así nadie las
confunde con un logotipo que falta por poner. */
.carrusel-ficha {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
height: 62px;
padding: 0 22px;
border-radius: 999px;
background: var(--fondo);
border: 1px solid var(--borde);
font-size: 0.92rem;
font-weight: 700;
color: var(--texto);
white-space: nowrap;
}
.carrusel-ficha svg { flex-shrink: 0; color: var(--acento); }
/* Por si algún día vuelve a usarse la caja de hueco: la variable a la que
apuntaba el borde no existe y el trazo salía en negro. */
.carrusel-empresa.hueco { border-color: var(--borde); }
/* ---------- Tamaños intermedios (tablet y portátil pequeño) ---------- */
@media (max-width: 1000px) {
.barra-enlaces { gap: 18px; }
.barra-enlaces a { font-size: 0.88rem; }
.portada { padding: 60px 0 72px; }
.portada-rejilla { gap: 36px; }
/* El móvil se estrecha antes de que la columna del texto se quede sin
sitio; el sello se mete dentro para no salirse de la pantalla. */
.movil { width: 268px; }
.movil-sello { right: -6px; width: 178px; font-size: 0.74rem; }
.tarjeta-flotante { left: -6px; width: 236px; }
}
/* ---------- El menú del móvil ---------- */
/* A partir de aquí los cinco enlaces ya no caben en una línea: pasan al
panel desplegable y en la barra se queda la marca y el botón de menú. */
@media (max-width: 860px) {
.barra-enlaces { display: none; }
.barra-hamburguesa { display: inline-flex; }
.barra-menu.abierto { display: block; }
}
/* ---------- Móvil ---------- */
@media (max-width: 760px) {
:root { --alto-barra: 60px; }
.barra { min-height: var(--alto-barra); padding: 0; }
.barra-hamburguesa { width: 42px; height: 42px; }
.portada { padding: 36px 0 48px; }
.portada-rejilla { gap: 34px; }
/* El tamaño de letra no se fija aquí: la escala fluida ya lo baja sola. */
.portada-entrada { max-width: none; }
.portada-acciones { margin-top: 26px; }
.portada-acciones .boton { flex: 1; min-width: 152px; min-height: 52px; padding: 0 18px; font-size: 0.96rem; }
.portada-garantias { margin-top: 22px; }
.portada-garantias li { font-size: 0.92rem; }
.portada-pie { margin-top: 22px; }
/* Dentro de un móvil de verdad no se dibuja otro móvil: se le cae el
marco y la pantalla de fichar queda como una tarjeta a todo el ancho,
que es exactamente lo que verá el visitante al entrar. */
.portada-mockup::before { display: none; }
.portada-mockup .movil {
width: 100%;
padding: 0;
border-radius: 20px;
border: 1px solid var(--borde);
background: var(--superficie);
box-shadow: var(--sombra-tarjeta);
}
.movil::after { display: none; }
.movil-pantalla { border-radius: 20px; }
/* El sello de la hora del servidor se cae aquí: en 390 px taparía la
pantalla, y lo mismo ya lo dice la lista de garantías de arriba. */
.movil-sello { display: none; }
.tarjeta-flotante { left: auto; width: 100%; }
.confianza { padding: 26px 0 30px; }
.confianza-cabecera { margin-bottom: 18px; }
.confianza-texto { align-self: auto; }
.carrusel-ficha { height: 52px; padding: 0 16px; gap: 8px; font-size: 0.84rem; }
}
/* ---------- En papel ----------
A1 ya quita en la impresión los enlaces, el carrusel y las tarjetas
flotantes. Aquí van solo las piezas nuevas: un botón de menú y un marco
de móvil impresos no sirven para nada, y una barra pegada se repetiría
en cada hoja. */
@media print {
.barra-hamburguesa, .barra-menu, .movil-sello, .portada-mockup::before { display: none !important; }
.barra-fija { position: static; box-shadow: none; }
.movil {
width: 100%;
padding: 0;
background: none;
border: 1px solid #000000;
box-shadow: none;
animation: none;
}
.movil::after { display: none; }
}
/* ===================== A3 ===================== */
/* ============================================================
A3 · La ley
============================================================ */
/* ---------- La ley ----------
Era un muro: entrada, tarjetas, plazos, estado, lo de 2019 y las fuentes,
todo con el mismo peso visual. Se parte en cuatro bloques con su rótulo,
para que se entienda de un vistazo y se lea a fondo solo quien quiera. */
.ley h2 { max-width: 15em; }
.ley-entrada { margin-top: 18px; font-size: 1.12rem; color: rgba(233, 233, 246, 0.85); }
.ley-entrada strong { color: #ffffff; font-weight: 700; }
/* Rótulo de bloque: la raya que sale a la derecha marca dónde empieza cada
parte sin gastar otro titular grande. */
.ley-subtitulo {
display: flex;
align-items: center;
gap: 14px;
margin: 54px 0 0;
font-size: 0.79rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--turquesa);
}
.ley-subtitulo::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.16);
}
.ley-tarjetas {
margin: 22px 0 0;
padding: 0;
list-style: none;
gap: 18px;
}
.ley-tarjeta { padding: 22px 24px 24px; }
.ley-tarjeta-alto {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.ley-tarjeta svg { margin-bottom: 0; }
/* El número ata cada exigencia con su respuesta en "ya cumple". */
.ley-tarjeta-numero {
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
border-radius: 50%;
background: rgba(4, 196, 180, 0.16);
border: 1px solid rgba(4, 196, 180, 0.5);
color: var(--turquesa);
font-size: 0.8rem;
font-weight: 800;
}
.ley-hoy { gap: 32px; margin-top: 58px; padding-top: 36px; }
.ley-hoy-titulo h3 { font-size: 1.08rem; }
.ley-hoy-titulo p {
margin-top: 8px;
font-size: 0.88rem;
font-weight: 400;
color: rgba(233, 233, 246, 0.72);
}
.ley-hoy-dato { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
/* La tarjeta "punto por punto" (antes "ya cumple") y sus estilos se fueron a
A4, junto con la sección de "qué incluye" con la que ahora forma una sola.
"Cómo funciona" y sus tres pasos desaparecieron: contaban por tercera vez
lo que ya dicen la ley y la tarjeta. */
/* ---------- Entrada al hacer scroll ----------
Solo se activa si hay JavaScript y el sistema no pide menos movimiento:
sin script, todo se ve igual desde el primer momento. */
.a3-animado .a3-aparece {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.a3-animado .a3-aparece.a3-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.a3-animado .a3-aparece { opacity: 1; transform: none; transition: none; }
}
/* ---------- Pantallas medianas (tablet y portátil pequeño) ---------- */
@media (max-width: 1000px) {
.ley-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ley-hoy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ley-hoy-titulo { grid-column: 1 / -1; }
}
/* ---------- Móvil ----------
Este bloque va después del de 1000 px a propósito: las reglas de esta hoja
se añaden al final del