` desde el 02/10/2026: sin esto cogería el gris y el ancho de los párrafos. */
.seccion--cierre .cierre__titulo { color: inherit; max-width: none; margin-inline: 0; }
/* ── Error 404 ────────────────────────────────────────────────────────────── */
.error__codigo { font-size: 4.5rem; font-weight: 800; color: var(--marca); line-height: 1; margin: 0; }
.lista-enlaces { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.lista-enlaces a {
display: inline-block; padding: .5rem 1rem; border: 1px solid var(--linea);
border-radius: var(--radio-chico); text-decoration: none; color: var(--tinta); background: #fff;
}
.lista-enlaces a:hover { border-color: var(--marca); color: var(--marca-texto); }
.aviso { background: var(--fondo-suave); padding: 1.25rem; border-radius: var(--radio); color: var(--tinta-suave); }
/* ── Pie ──────────────────────────────────────────────────────────────────── */
.pie { background: var(--fondo-oscuro); color: #C9D8DA; padding-top: clamp(2.5rem, 5vw, 4rem); }
/*
* ⚠ Las columnas van ESCRITAS UNA A UNA, no con `repeat(auto-fit, …)`.
*
* Antes ponía `grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr))`
* y **el pie salía en una sola columna gigante**. No es un problema de anchos:
* la declaración es inválida —`auto-fit` no se puede mezclar con una pista en
* `fr` en la misma lista— y el navegador la descarta entera, así que la rejilla
* se queda sin columnas definidas y apila todo. No avisa de nada: simplemente se
* ve mal.
*/
/*
* ⚠ **Son CINCO columnas, y tienen que coincidir con los bloques que pinta
* `td_pie()`**: empresa · Servicios · Países · Ticdat · El grupo. Si se añade un
* grupo en `inc/plantilla.php` y no se añade aquí una pista, el bloque de más se
* descuelga a una segunda fila y el pie se ve roto — que es exactamente lo que
* pasó el 14/08/2026 al dar su columna a los países.
*/
.pie__rejilla {
display: grid; gap: 2rem 2.5rem; padding-bottom: 2.5rem;
grid-template-columns: 1.6fr .9fr .9fr .8fr 1.2fr;
align-items: start;
}
/* El logotipo va A COLOR también sobre el fondo oscuro. Se probó a invertirlo
por CSS (`brightness(0) invert(1)`) para no mantener un segundo fichero, y el
resultado es que el isotipo pierde su forma: las tres piezas de color pasan a
ser una mancha blanca sólida. El rosa de marca sobre #0E3D45 contrasta de
sobra, así que no hace falta tocarlo. */
.pie__empresa img { height: 28px; width: auto; }
.pie__lema { margin: 1rem 0; font-size: .93rem; }
.pie address { font-style: normal; font-size: .9rem; line-height: 1.8; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { color: var(--acento-lima); text-decoration: underline; }
.pie__titulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: #fff; margin-bottom: .9rem; }
.pie__grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.pie__texto { font-size: .93rem; margin-bottom: 1rem; }
.pie .boton--fantasma {
background: transparent; color: #fff; border-color: #2F5A62;
}
.pie .boton--fantasma:hover { border-color: #fff; color: #fff; text-decoration: none; }
.pie__legal { border-top: 1px solid #0B3138; padding: 1.25rem 0; font-size: .85rem; }
.pie__legal p { margin: 0; }
/* ── Aviso de cookies ─────────────────────────────────────────────────────── */
.cookies {
position: fixed; inset-inline: 0; bottom: 0; z-index: 90; padding: 1rem;
display: flex; justify-content: center;
}
.cookies[hidden] { display: none; }
.cookies__caja {
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
box-shadow: 0 10px 40px rgba(22, 25, 31, .18);
padding: 1.25rem 1.5rem; max-width: 34rem;
}
.cookies__titulo { font-size: 1.05rem; margin-bottom: .4rem; }
.cookies__texto { font-size: .92rem; color: var(--tinta-suave); }
.cookies__botones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.cookies__enlace { font-size: .85rem; margin: .75rem 0 0; }
/* ── Formularios ──────────────────────────────────────────────────────────── */
.campo { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.campo label { font-weight: 600; font-size: .93rem; }
.campo input, .campo textarea, .campo select {
font: inherit; font-size: 1rem; padding: .65rem .8rem;
border: 1px solid var(--linea); border-radius: var(--radio-chico); background: #fff; color: var(--tinta);
width: 100%;
}
/* ⚠ El foco va en MARINO, no en el color de marca.
`--marca-texto` es #E00047 —rojo—, así que al pinchar en cualquier campo el
borde se ponía rojo y parecía que lo escrito estaba mal. En un formulario de
alta eso frena a quien iba a registrarse. El rojo queda reservado para los
errores de verdad, que es lo único que debería señalar. */
.campo input:focus, .campo textarea:focus {
border-color: var(--marino); outline: 2px solid rgba(14, 61, 69, .12); outline-offset: 1px;
}
/* Una casilla no tiene borde que cambie: con la regla de arriba su único foco era ese
contorno al 12 % (1,2:1) y la de privacidad de cada formulario no se veía al tabular.
Vuelve al `:focus-visible` de siempre (02/10/2026, medido en /contacto). */
.campo input[type="checkbox"]:focus-visible { outline: 3px solid var(--marca-texto); outline-offset: 2px; }
/* ── Comprobación del documento en el propio formulario ──────────────────────
Lo pinta `assets/js/ticdat.js` con el mismo algoritmo que el servidor. */
/* Las tres condiciones del alta, en fila y sin adornos: es lo primero que se
busca al ver un formulario y tiene que leerse de un vistazo. */
.condiciones {
list-style: none; margin: 1rem 0 1.6rem; padding: 0;
display: flex; flex-wrap: wrap; gap: .5rem;
}
.condiciones li {
font-size: .9rem; font-weight: 600; color: var(--verde);
border: 1px solid var(--verde); border-radius: 999px; padding: .3rem .85rem;
}
.campo__estado { font-size: .85rem; font-weight: 600; }
.campo--ok input { border-color: var(--verde); }
.campo--ok .campo__estado { color: var(--verde); }
.campo--mal input { border-color: var(--marca-texto); }
.campo--mal .campo__estado { color: var(--marca-texto); }
/* La ayuda se calla cuando ya hay un veredicto: si no, se leen dos frases a la
vez diciendo cosas distintas del mismo campo. */
.campo--ok .campo__ayuda, .campo--mal .campo__ayuda { display: none; }
.campo textarea { min-height: 8rem; resize: vertical; }
.campo--casilla { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
/* 22 px y no el tamaño de fábrica (13 px): con el dedo, una casilla de 13 px se
falla más veces de las que se acierta, y es la que hay que marcar para poder
registrarse. */
.campo--casilla input { width: 22px; height: 22px; margin-top: .1rem; accent-color: var(--marca); }
.campo--casilla label { font-weight: 400; font-size: .9rem; line-height: 1.5; }
.campo__error { color: var(--marca-osc); font-size: .87rem; }
/* La aclaración bajo un campo. Sin estilo salía del tamaño del cuerpo y pesaba
más que la propia etiqueta del campo. */
.campo__ayuda { font-size: .85rem; color: var(--tinta-suave); }
/* «(opcional)» en el rótulo de los campos que se pueden dejar en blanco, y la
información básica de protección de datos bajo la casilla (`td_info_datos()`,
02/10/2026). Se lee, pero no compite con los rótulos ni con el botón. */
.campo__opcional { font-weight: 400; color: var(--tinta-suave); }
.info-datos { font-size: .82rem; line-height: 1.5; color: var(--tinta-suave); margin: -.35rem 0 1.25rem; }
.info-datos p { margin: 0 0 .35rem; }
.info-datos p:last-child { margin-bottom: 0; }
/* Aire entre lo que se cuenta y lo que hay que rellenar. Sin él, la última
línea de las ventajas y la etiqueta del primer campo quedaban pegadas y
parecían el mismo bloque. */
.lista-marcas + form { display: block; margin-top: 2rem; }
/* ⚠ El campo trampa para robots (`td_testigo_campo()`).
Se ocultaba con `style="position:absolute;left:-9999px"` INLINE, y la CSP del
sitio lleva `style-src 'self'` sin `unsafe-inline`: el navegador descartaba
el atributo y el campo se veía, con su «No rellenar» y todo. Llevaba así
desde el principio, también en el formulario de contacto.
Se saca de pantalla con `left` y NO con `display:none`: un campo oculto del
todo tampoco lo rellenan los robots, y entonces deja de ser una trampa. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mensaje { padding: 1rem 1.25rem; border-radius: var(--radio-chico); margin-bottom: 1.5rem; }
.mensaje--ok { background: #E8F7EE; color: #12602F; }
.mensaje--error { background: #FDEAF0; color: var(--marca-osc); }
/* ── Móvil ────────────────────────────────────────────────────────────────── */
/* ⚠ El corte del menú desplegable se MIDE, no se elige.
La fila de la cabecera tiene tope de 1.140 px (el contenedor) y a 72rem
(1.152 px de ventana) da 1.120. Medido el 02/10/2026 sin el selector de idioma
(va en la barra fina), con la fuente cargada y sin partir palabras:
español 1.083 px, inglés ~1.070 («Sign up») y alemán ~1.075 («Registrieren»,
«Gründung», «Amazon & Europa»). Con «Konto erstellen» y los rótulos largos el
alemán pedía 1.179 y no cabía en ningún ancho. Si se añade una entrada al
menú, se cambia un rótulo o se añade un idioma, hay que volver a medirlo en
TODOS los idiomas (ver NOTAS, «Trampas»). */
@media (max-width: 72rem) {
.barra-red__idiomas { display: none; }
.menu .menu__idiomas { display: block; } /* .menu delante: la regla general va después */
.menu-boton {
display: inline-flex; align-items: center; justify-content: center;
margin-left: auto; width: 44px; height: 44px;
background: none; border: 1px solid var(--linea); border-radius: var(--radio-chico); cursor: pointer;
}
.menu-boton__barra, .menu-boton__barra::before, .menu-boton__barra::after {
display: block; width: 18px; height: 2px; background: var(--tinta); border-radius: 2px;
}
.menu-boton__barra { position: relative; }
.menu-boton__barra::before, .menu-boton__barra::after { content: ""; position: absolute; left: 0; }
.menu-boton__barra::before { top: -6px; }
.menu-boton__barra::after { top: 6px; }
.menu {
display: none; position: absolute; inset-inline: 0; top: 100%;
flex-direction: column; align-items: stretch; gap: 1rem;
background: #fff; border-bottom: 1px solid var(--linea); padding: 1.25rem;
max-height: calc(100dvh - 68px); overflow-y: auto;
}
.menu[data-abierto="1"] { display: flex; }
.menu__lista { flex-direction: column; gap: 0; }
.menu__lista a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.menu__lista a[aria-current="page"] { border-bottom-color: var(--linea); color: var(--marca-texto); }
.menu__acciones { flex-wrap: wrap; }
.menu__acciones .boton { flex: 1 1 auto; }
}
/* El pie se queda en su corte de siempre: son cinco columnas y aguantan bien
hasta 60rem. Estaba dentro del bloque del menú y al subir aquel a 75rem se
habría quedado en dos columnas en pantallas de portátil sin motivo. */
@media (max-width: 60rem) {
.pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 34rem) {
.pie__rejilla { grid-template-columns: 1fr; }
.botonera .boton { width: 100%; }
}
/* ── Las tres sociedades ──────────────────────────────────────────────────── */
/* No son tarjetas de servicio: son una explicación de quién es quién, así que
van sin sombra ni borde completo y con la marca destacada. Que se lean como
una lista, no como tres productos a elegir. */
.seccion--grupo { background: var(--fondo-suave); }
.grupo { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grupo__pieza { border-top: 3px solid var(--marca); padding-top: 1.1rem; }
.grupo__marca {
font-size: 1.25rem; font-weight: 700; color: var(--tinta); margin: 0 0 .15rem;
letter-spacing: -.02em;
}
.grupo__papel {
font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: var(--marca-texto); margin: 0 0 .6rem;
}
.grupo__texto { color: var(--tinta-suave); margin: 0; font-size: .97rem; }
.grupo__enlace { display: inline-block; margin-top: .75rem; font-size: .92rem; font-weight: 600; }
.grupo__pie { margin-top: 2rem; }
/* ── Ajustes de móvil ─────────────────────────────────────────────────────── */
/* Medido en un viewport de 375 px, que es el iPhone de referencia:
- El `h1` arrancaba en 2rem y un titular real («Gestoría para empresas que
venden en Amazon y en Europa») ocupaba CUATRO líneas y media pantalla.
- El aviso de cookies tapaba prácticamente todo el contenido, así que el
visitante decide sin haber podido leer nada de la página. */
@media (max-width: 30rem) {
h1 { font-size: 1.72rem; line-height: 1.18; }
h2 { font-size: 1.35rem; }
/* El único de los «títulos que no son encabezados» sin tamaño propio. */
.cierre__titulo, .relacionados__titulo { font-size: 1.35rem; }
body { font-size: 1rem; }
.entradilla { font-size: 1.04rem; }
.seccion { padding: 2.5rem 0; }
.contenedor, .contenedor--estrecho { width: min(100% - 2rem, var(--ancho)); }
.prosa { font-size: 1.02rem; }
/* El aviso ocupa lo justo y deja ver la página que hay detrás. */
.cookies { padding: .6rem; }
.cookies__caja { padding: 1rem 1.1rem; max-height: 62dvh; overflow-y: auto; }
.cookies__titulo { font-size: .98rem; }
.cookies__texto { font-size: .87rem; }
.cookies__botones .boton { flex: 1 1 auto; }
/* Un botón a media pantalla se falla con el pulgar. */
.boton { min-height: 44px; }
}
/* En pantallas cortas y apaisadas (móvil girado) el aviso no puede crecer. */
@media (max-height: 30rem) {
.cookies__caja { max-height: 78dvh; overflow-y: auto; }
}
/* ── Pie: sociedades, sellos y barra legal ────────────────────────────────── */
.pie__horario { font-size: .86rem; color: #A9C3C6; margin-top: .9rem; }
.pie__sociedades { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.pie__sociedades li { display: grid; gap: .05rem; }
.pie__soc-marca { font-weight: 700; color: #fff; font-size: .97rem; }
.pie__soc-papel { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--acento-lima); }
.pie__soc-razon { font-size: .82rem; color: #A9C3C6; }
/* Los sellos son credenciales, no adornos: se leen como una lista corta y sin
iconos inventados. */
.pie__sellos { border-top: 1px solid #0B3138; padding: 1.1rem 0; }
.pie__sellos ul {
display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
list-style: none; margin: 0; padding: 0; font-size: .83rem; color: #A9C3C6;
}
.pie__sellos li { position: relative; padding-left: 1.15rem; }
.pie__sellos li::before {
content: ""; position: absolute; left: 0; top: .5em;
width: .55rem; height: .3rem; border-left: 2px solid var(--acento-lima);
border-bottom: 2px solid var(--acento-lima); transform: rotate(-45deg);
}
/* La colegiación lleva la marca «Ga» en vez de la marca de verificación (revisión del
02/10/2026, punto 22). La «G» y la «A» del logotipo son negras: sin la placa blanca
no se verían sobre el pie. */
.pie__sellos .pie__sello-colegio { display: flex; align-items: center; gap: .75rem; padding-left: 0; }
.pie__sellos .pie__sello-colegio::before { content: none; }
.pie__sello-colegio img {
flex: none; height: 2.75rem; width: auto; padding: .2rem .4rem;
background: var(--fondo); border-radius: var(--radio-chico);
}
.pie__legal-fila { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; }
.pie__legal-fila ul { display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
/* «Configurar cookies» (02/10/2026): es un botón —abre el aviso, no lleva a otra
página— pero en la barra legal se ve como los enlaces de al lado. */
.pie__cookies button {
font: inherit; color: #fff; background: none; border: 0; padding: 0; margin: 0;
cursor: pointer; text-align: left;
}
.pie__cookies button:hover { color: var(--acento-lima); text-decoration: underline; }
/* ⚠ El botón flotante del chat (abajo a la derecha: 47 px + 20 de margen) tapaba
el final de la barra legal —«Configurar cookies» y antes «Cookies»— al llegar al
final de la página, y también al llegar con el tabulador (medido el 02/10/2026
a 1.280 px: botón en 1066-1210, chat en 1108-1260). Hueco debajo de la barra
para que al final quede por encima, y `scroll-padding` para que el foco nunca
se quede debajo del chat. En móvil ya lo hace el `padding-bottom` del body. */
@media (min-width: 30.01rem) { .pie__legal { padding-bottom: 5rem; } }
html { scroll-padding-bottom: 5rem; }
/* El foco de siempre (`--marca-texto`, verde petróleo) sobre el pie marino no se
ve: 1,5:1. En el pie, el lima: 5,6:1 sobre `--marino`. */
.pie :focus-visible { outline-color: var(--acento-lima); }
/* ── Enlace de WhatsApp ───────────────────────────────────────────────────── */
/* Va dentro del contenido (pie, contacto), NO flotando: abajo a la derecha ya
está el chat de MAi, y dos botones flotantes que hacen lo mismo se estorban.
El verde es el de la marca WhatsApp; aquí sí procede, porque es la señal por
la que se reconoce el canal de un vistazo. */
.whatsapp {
display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
margin-top: 1rem; padding: .6rem .95rem; border-radius: 999px;
background: #25d366; color: #0B3B36; text-decoration: none;
font-size: .92rem; font-weight: 600;
}
.whatsapp:hover { background: #1eb457; color: #0B3B36; }
.whatsapp__icono { display: inline-flex; }
/* La nota va debajo, en toda la anchura: dice que contesta un asistente y no un
humano, así que no puede quedar cortada por el ancho del botón. */
.whatsapp__nota {
flex-basis: 100%; font-size: .78rem; font-weight: 400; line-height: 1.35; opacity: .85;
}
/* En el pie, el mismo enlace pero SIN botón.
*
* ⚠ El verde de WhatsApp está pensado para fondo claro. Sobre el #0E3D45 del
* pie, un botón relleno de 355x86 px era un manchón que se comía la columna de
* la empresa y desequilibraba la rejilla entera. Aquí basta con el icono en
* verde y el texto en blanco, como los demás enlaces del pie. */
.whatsapp--pie {
background: none; padding: 0; margin-top: .9rem;
color: #fff; font-size: .9rem; font-weight: 600;
align-items: center;
}
.whatsapp--pie:hover { background: none; color: var(--acento-lima); text-decoration: underline; }
.whatsapp--pie .whatsapp__icono { color: #25d366; }
.whatsapp--pie .whatsapp__nota { color: #A9C3C6; opacity: 1; margin-top: .1rem; }
/* ── Qué incluye la cuota ───────────────────────────────────────────────────
Dos columnas de peso muy distinto: lo que entra ocupa el doble que lo que va
aparte. Es honesto y es proporcionado — pero lo de aparte se lee igual, con
el mismo tamaño de letra, porque enterarse en la primera factura es peor que
no contratar. */
.incluye {
display: grid; gap: clamp(1.2rem, 3vw, 2.2rem);
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid var(--linea);
}
@media (min-width: 52rem) { .incluye { grid-template-columns: 2fr 1fr; } }
.incluye__titulo { font-size: 1.05rem; font-weight: 700; margin: 0 0 .4rem; color: var(--tinta); }
.incluye__texto { margin: 0 0 .9rem; color: var(--tinta-suave); font-size: .92rem; }
.incluye__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.incluye__lista li { position: relative; padding-left: 1.7rem; color: var(--tinta-suave); font-size: .93rem; }
.incluye__lista li::before {
content: ''; position: absolute; left: 0; top: .38em;
width: .95rem; height: .5rem;
border-left: 2px solid var(--marca-texto); border-bottom: 2px solid var(--marca-texto);
transform: rotate(-45deg);
}
/* Lo que va aparte no lleva check ni cruz: una raya. Una cruz roja junto a un
servicio que sí prestamos —solo que cobrado— se lee como que no lo hacemos. */
.incluye__lista--no li::before {
width: .8rem; height: 0; border-left: 0; border-bottom: 2px solid var(--linea-fuerte, #cbd5e1);
transform: none; top: .62em;
}
/* ── Casos reales ────────────────────────────────────────────────────────────
Cinco tarjetas: la cifra manda, la historia debajo. `auto-fit` puro (todas las
pistas iguales, sin mezclar con `fr` fijos — la mezcla inválida ya rompió el
pie una vez) para que 5 casen en 3+2 sin huecos raros. */
.seccion--casos { background: var(--fondo-suave, #F7F8FA); }
.casos {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.caso {
display: grid; gap: .3rem; align-content: start;
background: #fff; border: 1px solid var(--linea); border-radius: .9rem;
padding: 1.2rem 1.25rem;
}
.caso__etiqueta {
font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--marca-texto);
}
.caso__dato { font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--tinta); }
.caso__texto { margin: .2rem 0 0; font-size: .88rem; color: var(--tinta-suave); }
/* La nota de discreción: visible, no letra pequeña de contrato. Es la
explicación honesta de por qué no hay nombres, y de paso un argumento. */
.casos__nota {
margin: 1.4rem auto 0; max-width: 44rem; text-align: center;
font-size: .86rem; color: var(--tinta-suave);
}
/* ── El chat de MAi ───────────────────────────────────────────────────────── */
/* Abajo a la derecha, por encima de todo menos del aviso de cookies: primero se
decide sobre las cookies y luego se conversa. */
.chat-abrir {
position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
display: inline-flex; align-items: center; gap: .5rem;
padding: .7rem 1.1rem; border: 0; border-radius: 999px;
background: var(--marca-texto); color: #fff; font: inherit; font-size: .93rem; font-weight: 600;
box-shadow: 0 6px 24px rgba(14, 77, 87, .3); cursor: pointer;
}
.chat-abrir:hover { background: var(--marca-osc); }
.chat-abrir[hidden] { display: none; }
.chat-abrir__icono { display: inline-flex; }
.chat {
position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 85;
width: min(380px, calc(100vw - 2.5rem)); max-height: min(620px, calc(100dvh - 2.5rem));
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
box-shadow: 0 18px 50px rgba(22, 25, 31, .22); overflow: hidden;
}
.chat[hidden] { display: none; }
.chat__cabecera {
display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
padding: .9rem 1rem; background: var(--fondo-oscuro); color: #fff;
}
.chat__titulo { margin: 0; font-weight: 700; font-size: .95rem; }
.chat__sub { margin: .1rem 0 0; font-size: .76rem; color: #A9C3C6; line-height: 1.35; }
.chat__cerrar {
border: 0; background: none; color: #A9C3C6; font-size: 1.5rem; line-height: 1;
padding: 0 .2rem; cursor: pointer;
}
.chat__cerrar:hover { color: #fff; }
.chat__hilo { flex: 1; min-height: 8rem; overflow-y: auto; padding: 1rem; display: grid; gap: .75rem; align-content: start; }
.chat__msg { font-size: .89rem; line-height: 1.55; }
.chat__msg p { margin: 0; }
.chat__msg--mai { background: var(--fondo-suave); border-radius: .1rem .7rem .7rem .7rem; padding: .7rem .85rem; color: var(--tinta); }
.chat__msg--yo { background: var(--marca-texto); color: #fff; border-radius: .7rem .1rem .7rem .7rem; padding: .7rem .85rem; justify-self: end; max-width: 85%; }
.chat__msg--esperando { color: var(--tinta-tenue); font-style: italic; }
.chat__sugeridas { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.chat__sugeridas button {
width: 100%; text-align: left; font: inherit; font-size: .84rem; cursor: pointer;
background: #fff; border: 1px solid var(--linea); border-radius: .55rem; padding: .5rem .7rem;
color: var(--tinta-suave);
}
.chat__sugeridas button:hover { border-color: var(--marca); color: var(--marca-texto); }
.chat__enlaces { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chat__enlaces a {
display: inline-block; font-size: .8rem; font-weight: 600; text-decoration: none;
background: #fff; border: 1px solid var(--linea); border-radius: .4rem; padding: .25rem .55rem;
}
.chat__cta {
display: inline-block; margin-top: .7rem; font-size: .84rem; font-weight: 600;
background: var(--marca-texto); color: #fff; text-decoration: none;
border-radius: .45rem; padding: .45rem .8rem;
}
.chat__cta:hover { background: var(--marca-osc); color: #fff; }
.chat__pie { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--linea); }
/* ⚠ 16 px (1rem), ni uno menos: con letra más pequeña Safari en iPhone amplía la
página al pulsar el campo y no la devuelve (estaba en .9rem = 14,4 px; revisión
del 02/10/2026, punto 32). Los demás campos de la web ya van a 16 px. */
.chat__pie input {
flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .55rem .7rem;
border: 1px solid var(--linea); border-radius: .5rem; color: var(--tinta);
}
.chat__pie input:focus { border-color: var(--marca-texto); }
.chat__pie button {
flex: 0 0 auto; width: 42px; border: 0; border-radius: .5rem; cursor: pointer;
background: var(--marca-texto); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.chat__pie button:hover { background: var(--marca-osc); }
/* Un `` y el resto al desplegarlo
(02/10/2026; entero, en alemán a 320 px, dejaba 201 px a la conversación).
Abierto no pasa de un 30 % de la pantalla (en % no valdría: el panel no tiene
altura fija) y se desplaza dentro: la conversación sigue a la vista. */
.chat__aviso {
flex: 0 0 auto; margin: 0; padding: .55rem 1rem .65rem; font-size: .7rem; line-height: 1.45;
color: var(--tinta-tenue); background: var(--fondo-suave); border-top: 1px solid var(--linea);
}
.chat__aviso[open] { max-height: min(12rem, 30dvh); overflow-y: auto; }
.chat__aviso summary { cursor: pointer; }
.chat__aviso p { margin: .35rem 0 0; }
/* En móvil ocupa la pantalla: un chat de 380 px en un móvil de 375 no cabe. */
@media (max-width: 30rem) {
.chat { right: 0; left: 0; bottom: 0; width: 100%; max-height: 88dvh; border-radius: var(--radio) var(--radio) 0 0; }
/* ⚠ En móvil el botón flotante **tapaba el botón «Ver precios»** de la
portada: dos elementos peleando por la misma esquina, y el que estorbaba
ganaba por ser `fixed`. Aquí se queda solo con el icono —ocupa un tercio— y
el contenido de debajo respira gracias al `padding-bottom` del body.
No se oculta al hacer scroll ni cosas por el estilo: un botón que aparece y
desaparece se pulsa por accidente. Ocupar menos sitio basta. */
.chat-abrir { right: 1rem; bottom: 1rem; padding: .75rem; font-size: .88rem; }
.chat-abrir__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body { padding-bottom: 4.5rem; }
}
/* ── Cifras ───────────────────────────────────────────────────────────────── */
/* Sobre fondo oscuro y pegadas a la portada: es la primera prueba de que detrás
hay una empresa con recorrido. Sin iconos ni animaciones de contador — el
número se lee mejor quieto. */
.seccion--cifras { background: var(--fondo-oscuro); color: #fff; padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.seccion--cifras .seccion__titulo { color: #fff; margin-bottom: 2rem; }
.cifras {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
text-align: center;
}
.cifras li { display: grid; gap: .35rem; }
.cifras__dato {
font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; line-height: 1;
color: var(--acento-lima); letter-spacing: -.03em;
}
.cifras__texto { font-size: .93rem; color: #C9D8DA; line-height: 1.45; }
/* ── Tarifas ──────────────────────────────────────────────────────────────── */
.tarifas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tarifa {
display: grid; gap: .3rem; align-content: start;
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
padding: 1.25rem 1.35rem; text-decoration: none; color: inherit;
}
.tarifa:hover { border-color: var(--marca); }
.tarifa__concepto { font-size: .88rem; font-weight: 600; color: var(--tinta); }
.tarifa__importe { font-size: 1.45rem; font-weight: 800; color: var(--marca-texto); letter-spacing: -.02em; line-height: 1.15; }
.tarifa__nota { font-size: .81rem; color: var(--tinta-tenue); line-height: 1.45; }
.tarifas__pie { margin-top: 1.5rem; font-size: .93rem; }
/* ── Países ───────────────────────────────────────────────────────────────── */
/* Los siete, en rejilla y enlazando al alta de IVA. La competencia los enumera
en portada; nosotros los teníamos en una frase suelta. */
.paises { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem;
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.paises a {
display: grid; gap: .15rem; text-decoration: none; color: inherit;
border: 1px solid var(--linea); border-radius: var(--radio-chico);
padding: .8rem .95rem; background: #fff; height: 100%;
}
.paises a:hover { border-color: var(--marca); }
.paises__nombre { font-weight: 700; color: var(--tinta); font-size: .97rem; }
.paises__nota { font-size: .8rem; color: var(--tinta-tenue); line-height: 1.4; }
/* ── Pasos («cómo funciona») ──────────────────────────────────────────────── */
.pasos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.paso { border-top: 3px solid var(--marca); padding-top: 1rem; }
.paso h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.paso p { color: var(--tinta-suave); margin: 0; font-size: .95rem; }
/* ── Pie de las cifras ────────────────────────────────────────────────────── */
.cifras__pie { margin: 1.75rem 0 0; text-align: center; font-size: .8rem; color: #A9C3C6; }
/* ── La tarifa destacada ──────────────────────────────────────────────────── */
/* Una sola, la que queremos que se mire. Marcar tres es no marcar ninguna. */
.tarifa--destacada { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
/* ═══════════════════════════════════════════════════════════════════════════
CAPA VISUAL v2 — 14/08/2026
La web era tipográficamente correcta y visualmente plana. Esta capa añade la
composición: hero oscuro con el precio flotando, banderas, iconos, la
plataforma enseñada y una banda de cierre. Va AL FINAL a propósito: a igual
especificidad gana la última regla, así que redefine sin tocar lo de arriba.
═══════════════════════════════════════════════════════════════════════════ */
/* ── El hero, oscuro ─────────────────────────────────────────────────────────
Es el primer pantallazo y decide si el visitante se queda. Fondo de marca
oscuro con dos brillos —magenta y azul— y las tarjetas de precio en blanco
encima: el contraste hace el trabajo que antes no hacía nadie. */
.portada {
background: var(--fondo-oscuro);
/* Brillos suaves: el magenta bajado a acento (con .22 el marino se volvía
morado de discoteca) y el azul claro arriba a la derecha, como una luz. */
background-image:
radial-gradient(900px 480px at 8% -12%, rgba(14, 77, 87, .10), transparent 62%),
radial-gradient(720px 420px at 94% 8%, rgba(143, 211, 207, .16), transparent 60%);
color: #DCE5E6;
}
.portada h1 { color: #fff; }
.portada .entradilla { color: #C9D8DA; }
.portada .lista-marcas li { color: #C9D8DA; }
/* ⚠ `background: transparent` es imprescindible: el botón fantasma base lleva
fondo BLANCO, y sobre el hero oscuro con el texto puesto en blanco quedaba
una caja blanca vacía (visto en la captura del 14/08/2026). */
.portada .boton--fantasma { border-color: #2F5A62; color: #fff; background: transparent; }
.portada .boton--fantasma:hover { border-color: #fff; color: #fff; background: transparent; }
.portada__precios-cab { color: #A9C3C6; }
.portada__precios-pie { color: #A9C3C6; }
.pcard { border: 0; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.pcard--dest { outline: 2px solid var(--marca); outline-offset: -2px; }
/* Los canales, como chips */
.portada__marcas {
margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.portada__marcas-cab {
font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #A9C3C6;
margin-right: .2rem;
}
.chip {
padding: .3rem .75rem; border-radius: 999px;
border: 1px solid #2F5A62; background: rgba(255, 255, 255, .04);
color: #DCE5E6; font-size: .85rem; font-weight: 600;
}
/* ── Cifras: números grandes de marca ───────────────────────────────────────── */
.seccion--cifras .cifras__dato {
font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; color: var(--marca-texto);
}
.seccion--cifras .cifras__texto { color: var(--tinta-suave); }
/* ── Países con bandera ─────────────────────────────────────────────────────── */
.paises li a {
display: grid; grid-template-columns: auto 1fr; align-items: center;
column-gap: .7rem; padding: .95rem 1.05rem;
border: 1px solid var(--linea); border-radius: var(--radio); background: #fff;
text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.paises li a:hover {
transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--marca-texto);
}
.bandera {
display: inline-flex; width: 30px; height: 20px; border-radius: 4px; overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(22, 25, 31, .12); grid-row: span 2;
}
.bandera svg { width: 100%; height: 100%; display: block; }
.paises__nombre { font-weight: 700; color: var(--tinta); }
.paises__nota { grid-column: 2; font-size: .8rem; color: var(--tinta-tenue); }
/* ── Iconos en las tarjetas de servicio ─────────────────────────────────────── */
.tarjeta__icono {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; margin-bottom: .8rem; border-radius: 12px;
background: rgba(14, 77, 87, .08); color: var(--marca-texto);
}
.tarjeta__icono svg { width: 22px; height: 22px; }
/* ── Cómo funciona: pasos numerados y unidos ────────────────────────────────── */
.pasos { counter-reset: paso; }
.paso { position: relative; padding-left: 4rem; counter-increment: paso; }
.paso::before {
content: counter(paso);
position: absolute; left: 0; top: 0;
width: 2.6rem; height: 2.6rem; border-radius: 50%;
display: grid; place-items: center;
background: var(--marca-texto); color: #fff; font-weight: 800; font-size: 1.15rem;
}
/* La línea que une los pasos. En el último no hay siguiente, así que no sale. */
.paso:not(:last-child)::after {
content: ''; position: absolute; left: 1.28rem; top: 2.9rem; bottom: -1.4rem;
width: 2px; background: var(--linea);
}
/* ── La plataforma, con la pantalla de verdad ────────────────────────────────
En claro. Con dos bandas oscuras (hero y pie) la página ya tiene ritmo; una
tercera la volvía sombría — y la captura real luce más sobre fondo claro. */
/* ⚠ Oscuro A PROPÓSITO: sus textos (blanco, #C9D8DA, acento claro) están pensados
para fondo oscuro (arriba, «.seccion--plataforma h2/p»). El 15/08 se le puso
fondo claro aquí sin cambiar los textos y el bloque quedó invisible: titular
blanco sobre casi blanco y el botón «ecomverify» en blanco sobre blanco
(medido el 01/10/2026). Si algún día se quiere claro, cambiar los DOS sitios. */
.seccion--plataforma { background: var(--fondo-oscuro); }
.plataforma__rejilla { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) {
.plataforma__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* La maqueta: un navegador dibujado. Nada que mantener, nada que caduque. */
.maqueta {
border-radius: 14px; overflow: hidden;
background: #1D212A; box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
border: 1px solid #0B3138;
}
.maqueta__barra { display: flex; gap: .4rem; padding: .6rem .8rem; background: #0B3138; }
.maqueta__barra i { width: 10px; height: 10px; border-radius: 50%; background: #2F5A62; }
.maqueta__barra i:first-child { background: #FF5F57; }
.maqueta__barra i:nth-child(2) { background: #FEBC2E; }
.maqueta__barra i:nth-child(3) { background: #28C840; }
.maqueta__cuerpo { display: grid; grid-template-columns: 52px 1fr; }
.maqueta__lado { display: grid; gap: .6rem; align-content: start; padding: 1rem .9rem; background: #191D26; }
.maqueta__lado b { height: 8px; border-radius: 4px; background: #0B3138; }
.maqueta__lado b:first-child { background: var(--marca); }
.maqueta__panel { padding: 1rem; display: grid; gap: .9rem; }
.maqueta__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.maqueta__kpi {
background: #0B3138; border-radius: 8px; padding: .55rem .65rem; display: grid; gap: .15rem;
}
.maqueta__kpi small { font-size: .58rem; color: #A9C3C6; text-transform: uppercase; letter-spacing: .05em; }
.maqueta__kpi strong { font-size: .92rem; color: #fff; }
.maqueta__kpi--ok strong { color: var(--acento-lima); }
.maqueta__grafica {
display: flex; align-items: flex-end; gap: .45rem; height: 90px;
padding: .6rem; background: #0B3138; border-radius: 8px;
}
/* ⚠ Las alturas venían en el HTML como `style="--a:34%"` y la CSP del sitio
(`style-src 'self'`) las descartaba: las ocho barras salían al 40% y la
«gráfica» del panel era un bloque plano. Van aquí, que es donde se aplican. */
.maqueta__grafica i {
flex: 1; height: 40%; border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, var(--marca), var(--marca-osc));
}
.maqueta__grafica i:nth-child(1) { height: 34%; }
.maqueta__grafica i:nth-child(2) { height: 52%; }
.maqueta__grafica i:nth-child(3) { height: 41%; }
.maqueta__grafica i:nth-child(4) { height: 68%; }
.maqueta__grafica i:nth-child(5) { height: 57%; }
.maqueta__grafica i:nth-child(6) { height: 79%; }
.maqueta__grafica i:nth-child(7) { height: 64%; }
.maqueta__grafica i:nth-child(8) { height: 92%; }
.maqueta__grafica i:nth-child(even) { opacity: .55; }
.maqueta__filas { display: grid; gap: .5rem; }
.maqueta__filas b { height: 10px; border-radius: 5px; background: #0B3138; }
.maqueta__filas b:nth-child(2) { width: 82%; }
.maqueta__filas b:nth-child(3) { width: 64%; }
/* ── La banda de cierre ─────────────────────────────────────────────────────── */
.cta-final {
background: linear-gradient(115deg, var(--marca-osc), var(--marca) 60%, #FF3D75);
color: #fff; padding: clamp(2.2rem, 5vw, 3.5rem) 0;
}
.cta-final__fila {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1.2rem 2rem;
}
.cta-final__titulo { margin: 0 0 .3rem; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #fff; }
.cta-final__texto { margin: 0; max-width: 38rem; color: rgba(255, 255, 255, .92); }
.cta-final__boton {
background: #fff; color: var(--marca-osc); border: 0; font-weight: 700; white-space: nowrap;
}
.cta-final__boton:hover { background: var(--fondo-suave); color: var(--marca-osc); }
/* En pantallas estrechas la maqueta va después del texto y algo más pequeña. */
@media (max-width: 61.99rem) {
.maqueta { max-width: 34rem; }
}
/* ── Material gráfico (huecos que se activan al dejar el fichero) ──────────── */
.portada__sellos {
margin: 1.1rem 0 0; font-size: .78rem; color: #A9C3C6; letter-spacing: .01em;
}
.banda-foto {
margin: 0 0 1.6rem; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
}
.banda-foto img { display: block; width: 100%; height: clamp(220px, 32vw, 380px); object-fit: cover; }
/* La captura real hereda el marco de navegador de la maqueta. */
.maqueta--real { margin: 0; }
.maqueta--real img { display: block; width: 100%; height: auto; }
.banda-foto--servicio { margin-top: 1.6rem; max-width: 52rem; }
/* ═══════════════════════════════════════════════════════════════════════════
PORTADA v3 — 14/08/2026 · el guion del sector con nuestra marca
═══════════════════════════════════════════════════════════════════════════ */
/* El hero reparte más espacio a los planes: ahora son dos tarjetas lado a lado */
@media (min-width: 62rem) {
.portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(26rem, .95fr); }
.portada__precios { grid-template-columns: 1fr 1fr; }
.portada__precios-cab, .portada__precios-pie { grid-column: 1 / -1; }
}
.pcard__precio small { font-size: .9rem; font-weight: 600; color: var(--tinta-suave); margin-left: .15rem; }
.pcard__lista { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .3rem; }
.pcard__lista li {
position: relative; padding-left: 1.15rem; font-size: .78rem; color: var(--tinta-suave); line-height: 1.35;
}
.pcard__lista li::before {
content: ''; position: absolute; left: 0; top: .32em; width: .6rem; height: .34rem;
border-left: 2px solid #1B7F74; border-bottom: 2px solid #1B7F74; transform: rotate(-45deg);
}
/* ── La comparativa ─────────────────────────────────────────────────────────── */
.cmp-envoltura { overflow-x: auto; margin-bottom: .8rem; }
.cmp {
width: 100%; max-width: 56rem; margin-inline: auto; border-collapse: collapse;
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
overflow: hidden; box-shadow: var(--sombra);
}
.cmp th, .cmp td { padding: .68rem .9rem; text-align: left; border-bottom: 1px solid var(--linea); }
.cmp thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.cmp thead .cmp__cab-ticdat { color: var(--marca-texto); }
.cmp__grupo th {
background: var(--fondo-suave); font-size: .8rem; text-transform: uppercase;
letter-spacing: .06em; color: var(--tinta-suave); padding: .5rem .9rem;
}
.cmp td { font-size: .92rem; color: var(--tinta); }
.cmp__celda { text-align: center; width: 7.5rem; }
.cmp__celda--ticdat { background: rgba(14, 77, 87, .035); }
.cmp__si { color: #1B7F74; font-weight: 800; font-size: 1.05rem; }
.cmp__no { color: #C0C7D2; font-weight: 700; }
.cmp__dep { color: #A9C3C6; font-weight: 700; }
.cmp tbody tr:last-child td { border-bottom: 0; }
/* ── Los planes ─────────────────────────────────────────────────────────────── */
.planes {
display: grid; gap: 1.2rem; max-width: 56rem; margin: 0 auto;
}
@media (min-width: 46rem) { .planes { grid-template-columns: 1fr 1fr; } }
.plan {
display: grid; gap: .6rem; align-content: start;
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
padding: 1.6rem 1.5rem; box-shadow: var(--sombra);
}
.plan--dest { border-color: var(--marca-texto); border-width: 2px; position: relative; }
.plan__nombre { margin: 0; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.plan__precio { margin: 0; font-size: clamp(1.9rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--tinta); }
.plan__precio small { font-size: 1rem; font-weight: 600; color: var(--tinta-suave); }
.plan__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.plan__lista li { position: relative; padding-left: 1.6rem; font-size: .93rem; color: var(--tinta-suave); }
.plan__lista li::before {
content: ''; position: absolute; left: 0; top: .4em; width: .85rem; height: .45rem;
border-left: 2px solid #1B7F74; border-bottom: 2px solid #1B7F74; transform: rotate(-45deg);
}
.plan__cta { margin-top: .6rem; }
.planes__nota { margin: 1.4rem 0 0; color: var(--tinta-suave); }
.planes__banda {
margin: 1.6rem auto 0; max-width: 56rem;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: .9rem 1.5rem; background: #fff; border: 1px solid var(--linea);
border-radius: var(--radio); padding: 1.1rem 1.4rem; box-shadow: var(--sombra);
}
.planes__banda p { margin: 0; max-width: 34rem; color: var(--tinta-suave); }
/* ── La banda de cifras, en marino ──────────────────────────────────────────── */
.banda-cifras {
background: var(--fondo-oscuro);
background-image: radial-gradient(700px 380px at 85% 0%, rgba(143, 211, 207, .12), transparent 60%);
color: #C9D8DA; padding: clamp(2.6rem, 5vw, 4rem) 0; text-align: center;
}
.banda-cifras__titulo { color: #fff; margin-bottom: 1.6rem; }
.cifras--banda { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); list-style: none; margin: 0 0 1.8rem; padding: 0; }
.cifras--banda .cifras__dato { display: block; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; color: #fff; }
.cifras--banda .cifras__texto { color: #B7BDCB; font-size: .9rem; }
.banda-cifras__fantasma { background: transparent; border-color: #454C74; color: #fff; }
.banda-cifras__fantasma:hover { background: transparent; border-color: #fff; color: #fff; }
/* ── Servicios sueltos con precio ───────────────────────────────────────────── */
.sprecio { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sprecio__caja {
display: grid; gap: .35rem; align-content: start;
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem 1.25rem;
}
.sprecio__caja h3 { margin: 0; font-size: 1rem; }
.sprecio__precio { margin: 0 0 .5rem; font-weight: 800; color: var(--marca-texto); }
.sprecio__caja .boton { justify-self: start; }
/* ── Atención ───────────────────────────────────────────────────────────────── */
.atencion { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 56rem; margin-inline: auto; }
.atencion__caja {
display: grid; gap: .3rem; align-content: start; text-align: center;
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
padding: 1.4rem 1.2rem; text-decoration: none; color: var(--tinta);
transition: transform .12s, box-shadow .12s, border-color .12s;
}
.atencion__caja:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--marca-texto); color: var(--tinta); }
.atencion__caja h3 { margin: 0; font-size: 1.05rem; }
.atencion__caja p { margin: 0; font-size: .87rem; color: var(--tinta-suave); }
.atencion__dato { margin-top: .3rem; font-weight: 700; color: var(--marca-texto); }
/* ═══════════════════════════════════════════════════════════════════════════
PORTADA v4 — 14/08/2026 · el lenguaje visual del sector, medido
═══════════════════════════════════════════════════════════════════════════
Valores tomados del CSS calculado de la competencia directa el 14/08/2026:
hero BLANCO (no oscuro — dos intentos anteriores fallaron por esto), texto
marino #031549, botones de radio 50px, tarjetas de 24-30px con sombra suave,
verde #1B7F74 para los checks. Tipografía geométrica.
═══════════════════════════════════════════════════════════════════════════ */
/* La tipografía: geométrica y redonda, no la del sistema. Se sirve desde
nuestro dominio (nada de Google Fonts: es una petición a un tercero y un
problema de RGPD que ya evitamos en toda la web). Si el fichero no está,
cae a la del sistema sin romper nada. */
@font-face {
font-family: 'Ticdat Sans';
src: url('../fuentes/poppins-400.woff2') format('woff2');
font-weight: 400; font-display: swap;
}
@font-face {
font-family: 'Ticdat Sans';
src: url('../fuentes/poppins-600.woff2') format('woff2');
font-weight: 600; font-display: swap;
}
@font-face {
font-family: 'Ticdat Sans';
src: url('../fuentes/poppins-700.woff2') format('woff2');
font-weight: 700; font-display: swap;
}
/* Mientras llega Poppins se pinta Arial ESTIRADA a sus medidas, para que el
cambio de letra no mueva la página (PageSpeed 02/10/2026: el bloque de avales
saltaba 0,145 de CLS con el cambio de fuente). Las cifras salen de los propios
ficheros (ancho medio de un texto en castellano frente a Arial y Arial Bold;
ascendente 1050, descendente 350 e interlineado 100 sobre 1000):
size-adjust = ancho Poppins / ancho Arial; los override = métrica / size-adjust.
«Liberation Sans» tiene las medidas de Arial (Linux). En Android no hay
ninguna de las dos: allí lo cubre el preload de `inc/seo.php`. */
@font-face {
font-family: 'Ticdat Respaldo';
src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans');
font-weight: 400;
size-adjust: 111.5%; ascent-override: 94.2%; descent-override: 31.4%; line-gap-override: 9%;
}
@font-face {
font-family: 'Ticdat Respaldo';
src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
font-weight: 600 700;
size-adjust: 107%; ascent-override: 98.1%; descent-override: 32.7%; line-gap-override: 9.3%;
}
:root { --tipo: 'Ticdat Sans', 'Ticdat Respaldo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
/* ── El hero, CLARO ─────────────────────────────────────────────────────────
Blanco con un lavado verde muy suave por detrás, como el de referencia.
Aquí estaba el error de fondo de los dos intentos anteriores. */
.portada {
background: #fff;
background-image:
radial-gradient(900px 520px at 78% 12%, rgba(27, 127, 116, .10), transparent 62%),
radial-gradient(700px 420px at 4% 0%, rgba(14, 61, 69, .045), transparent 60%);
color: var(--marino);
}
.portada h1 { color: var(--marino); font-weight: 700; letter-spacing: -.02em; }
.portada .entradilla { color: var(--tinta-suave); }
.portada .lista-marcas li { color: var(--tinta-suave); }
.portada .boton--fantasma { background: #fff; border-color: #CFDCDD; color: var(--marino); }
.portada .boton--fantasma:hover { background: #fff; border-color: var(--marino); color: var(--marino); }
.portada__precios-cab { color: var(--tinta-suave); }
.portada__precios-pie { color: var(--tinta-tenue); }
.portada__marcas-cab, .portada__sellos { color: var(--tinta-tenue); }
.chip { background: #fff; border-color: #CFDCDD; color: var(--marino); }
/* Las tarjetas de precio del hero, sobre claro */
.pcard {
border: 1px solid #DCE5E6; border-radius: var(--radio-tarjeta);
box-shadow: 0 18px 46px rgba(14, 61, 69, .10);
}
.pcard--dest { outline: 0; border: 2px solid var(--verde); }
.pcard__quien { color: var(--tinta-tenue); }
.pcard__cta { border-radius: var(--radio-boton); background: var(--marino); }
.pcard__cta:hover { background: #0A3940; }
/* ── Botones: marino relleno, redondo ──────────────────────────────────────── */
.boton--principal { background: var(--marino); color: #fff; }
.boton--principal:hover { background: #0A3940; color: #fff; }
/* ── Tarjetas, en general: más redondas y con sombra suave ─────────────────── */
.tarjeta, .caso, .plan, .sprecio__caja, .atencion__caja, .paises li a, .planes__banda {
border-radius: var(--radio-tarjeta);
border-color: #DCE5E6;
box-shadow: 0 2px 10px rgba(14, 61, 69, .05);
}
.tarjeta__icono { background: rgba(27, 127, 116, .10); color: var(--verde); }
.paises li a:hover { border-color: var(--verde); box-shadow: 0 10px 26px rgba(14, 61, 69, .10); }
.atencion__caja:hover { border-color: var(--verde); }
.atencion__dato { color: var(--verde); }
/* ── Los checks, en verde ──────────────────────────────────────────────────── */
.lista-marcas li::before { border-color: var(--verde) !important; }
.cmp__si { color: var(--verde); }
.cmp__celda--ticdat { background: rgba(27, 127, 116, .05); }
.cmp thead .cmp__cab-ticdat { color: var(--verde); }
.cmp { border-radius: var(--radio-tarjeta); border-color: #DCE5E6; }
.plan--dest { border-color: var(--verde); }
.caso__etiqueta { color: var(--verde); }
.sprecio__precio { color: var(--marino); }
.seccion--casos { background: var(--fondo-suave); }
/* ── La banda de cifras: marino, el único bloque oscuro de la página ───────── */
.banda-cifras { background: var(--marino); background-image: none; }
.banda-cifras__fantasma { border-color: rgba(255,255,255,.35); }
/* ── La banda de cierre: verde, no magenta ─────────────────────────────────── */
.cta-final { background: linear-gradient(120deg, #1B7F74, #56E095); }
.cta-final__titulo, .cta-final__texto { color: #04331F; }
.cta-final__boton { background: var(--marino); color: #fff; }
.cta-final__boton:hover { background: #0A3940; color: #fff; }
/* ── El pie, marino ────────────────────────────────────────────────────────── */
.pie { background: var(--marino); }
.pie__soc-papel { color: var(--verde-claro); }
.whatsapp--pie .whatsapp__icono { color: var(--verde-claro); }
/* Los enlaces de marca siguen en magenta, que es nuestra identidad; el marino
y el verde son la estructura. */
a { color: var(--marca-texto); }
/* ── Ajustes finos medidos sobre la referencia (14/08/2026) ────────────────── */
/* El hero NO es blanco puro: es un azul muy claro que separa la cabecera del
resto de la página. Medido: #F1F5F5. */
.portada {
background: #F1F5F5;
background-image:
radial-gradient(760px 460px at 80% 18%, rgba(27, 127, 116, .09), transparent 60%);
}
/* Titular grande y apretado, como el suyo (48px con interlineado 1.1). */
.portada h1 {
font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.4rem);
line-height: 1.1;
letter-spacing: -.025em;
margin-bottom: 1.1rem;
}
.portada .entradilla { font-size: 1.12rem; line-height: 1.6; }
/* La línea de refuerzo con check verde relleno, bajo la entradilla. */
.portada__claim {
display: inline-flex; align-items: center; gap: .55rem;
margin: 0 0 1.4rem; font-weight: 600; color: var(--verde);
}
.portada__claim i {
display: inline-grid; place-items: center; flex: 0 0 auto;
width: 1.4rem; height: 1.4rem; border-radius: 6px;
background: var(--verde); color: #fff; font-style: normal; font-size: .8rem; font-weight: 700;
}
/* Los sellos, como imágenes en fila (se activan al dejar los ficheros). */
.sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin: 1.5rem 0 0; }
.sellos img { height: 46px; width: auto; opacity: .95; }
/* La ilustración del hero, a la derecha. */
.portada__ilustracion { display: grid; place-items: center; }
.portada__ilustracion img { width: 100%; max-width: 34rem; height: auto; }
/* Cabecera: menú centrado y botón de acceso redondo, como el de referencia. */
.cabecera__fila { min-height: 76px; }
.menu__lista a { font-weight: 600; }
.menu__acciones .boton { border-radius: var(--radio-boton); white-space: nowrap; }
/* ── Tarjetas destacadas con foto grande ───────────────────────────────────── */
.destacados { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.dcard {
display: grid; align-content: start; text-decoration: none; color: var(--tinta);
background: #fff; border: 1px solid #DCE5E6; border-radius: var(--radio-tarjeta);
overflow: hidden; box-shadow: 0 2px 12px rgba(14, 61, 69, .06);
transition: transform .14s, box-shadow .14s;
}
.dcard:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(14, 61, 69, .13); color: var(--tinta); }
.dcard__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fondo-suave); }
.dcard__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard__foto--vacia { display: grid; place-items: center; }
.dcard__foto--vacia .tarjeta__icono { width: 64px; height: 64px; margin: 0; }
.dcard__foto--vacia .tarjeta__icono svg { width: 30px; height: 30px; }
.dcard__cuerpo { display: grid; gap: .4rem; padding: 1.2rem 1.3rem 1.4rem; }
.dcard__titulo { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.dcard__texto { font-size: .92rem; color: var(--tinta-suave); }
.dcard__mas { margin-top: .2rem; font-weight: 700; font-size: .9rem; color: var(--verde); }
/* ── Los dos accesos grandes ───────────────────────────────────────────────── */
.accesos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.acceso {
display: grid; gap: .5rem; align-content: start; text-align: center;
background: linear-gradient(160deg, #F1F5F5, #EAFBF2);
border: 1px solid #DCE5E6; border-radius: var(--radio-tarjeta); padding: 2rem 1.6rem;
}
.acceso h3 { margin: 0; font-size: 1.3rem; }
.acceso p { margin: 0 0 .6rem; color: var(--tinta-suave); }
.acceso .boton { justify-self: center; }
/* Los sellos del hero: logos a la izquierda, la línea verificable al lado. */
.sellos { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.3rem; margin-top: 1.6rem; }
.sellos img { height: 44px; width: auto; }
.sellos__texto { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--tinta-tenue); max-width: 22rem; }
/* ── Arreglos de la revisión del 14/08/2026 ────────────────────────────────── */
/* ⚠ El precio se partía: salía «desde 29 € /» y «mes» en la línea siguiente.
El bloque entero no puede romperse, y el «/mes» va pegado a la cifra. */
.pcard__precio, .plan__precio { white-space: nowrap; }
.pcard__precio small, .plan__precio small { white-space: nowrap; margin-left: .1rem; }
/* El logo del colegio, sin caja: ya es transparente, y así respira. */
.sellos img { height: 52px; width: auto; }
.sellos { gap: 1rem 1.5rem; }
/* ── Los planes del hero, en DOS FILAS ──────────────────────────────────────
Andreu, 14/08/2026. En dos columnas, cada tarjeta tenía 26rem para cinco
líneas de lista y el texto salía en columnas estrechísimas («Contabilidad
automática: conectas tus canales y se ordena sola» ocupaba tres renglones).
Apiladas caben a lo ancho y se leen de un vistazo. */
@media (min-width: 62rem) {
.portada__precios { grid-template-columns: 1fr; }
.portada__rejilla { grid-template-columns: minmax(0, 1fr) minmax(24rem, .85fr); }
}
/* En fila, el precio va arriba a la derecha y la lista se despliega a lo ancho */
.pcard {
grid-template-columns: 1fr auto;
grid-template-areas: 'quien precio' 'lista lista' 'cta cta' 'pie pie';
gap: .2rem .9rem; align-items: baseline;
}
.pcard__quien { grid-area: quien; align-self: center; }
.pcard__precio { grid-area: precio; text-align: right; }
.pcard__lista { grid-area: lista; margin-top: .5rem; }
.pcard__cta { grid-area: cta; margin-top: .7rem; }
/* Con más ancho, la lista puede ir a dos columnas y no crece a lo alto */
@media (min-width: 34rem) {
.pcard__lista { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
}
.pcard__lista li { font-size: .82rem; }
/* ── Franja de capacidades ─────────────────────────────────────────────────── */
.caps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cap {
display: grid; gap: .4rem; align-content: start;
background: #fff; border: 1px solid #DCE5E6; border-radius: var(--radio-tarjeta);
padding: 1.4rem 1.3rem; text-decoration: none; color: var(--tinta);
transition: transform .14s, box-shadow .14s, border-color .14s;
}
.cap:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(14, 61, 69,.10); border-color: var(--verde); color: var(--tinta); }
.cap__icono {
display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: .4rem;
border-radius: 13px; background: rgba(27, 127, 116,.10); color: var(--verde);
}
.cap__icono svg { width: 23px; height: 23px; }
.cap__titulo { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.cap__texto { font-size: .88rem; color: var(--tinta-suave); }
/* ── MÓVIL: el precio, en la primera pantalla ────────────────────────────────
Medido el 15/08/2026 en 375 px: el precio caía a **1.185 px del principio**,
es decir, kilómetro y medio de scroll para ver lo primero que busca quien
compara gestorías. En escritorio se ve de entrada porque va en la columna
derecha; en móvil esa columna cae detrás de TODO el argumento.
Se reordena solo en móvil: titular → qué somos → PRECIO → lo demás.
⚠ `display: contents` en `.portada__texto` es lo que lo hace posible: sube
sus hijos a la rejilla para poder intercalar entre ellos un elemento que en
el HTML es su hermano. Sin eso habría que duplicar el bloque de precios en el
marcado, y dos bloques de precio en la misma página acaban divergiendo. */
@media (max-width: 61.99rem) {
.portada__rejilla { display: flex; flex-direction: column; gap: 1.4rem; }
.portada__texto { display: contents; }
/* ⚠ `min-width: 0` no es cosmético: sin él la portada tenía scroll lateral.
Un hijo de un flex arranca con `min-width: auto`, que le impide encogerse
por debajo de lo que pide su contenido. La tarjeta de precios pedía 409 px
dentro de un contenedor de 343 y se salía 50 px de la pantalla, en la
página más visitada del sitio y justo sobre el bloque de precios.
Medido a 375 px el 15/08/2026. */
.portada__rejilla > * { min-width: 0; }
.pcard, .pcard__lista, .pcard__lista li { min-width: 0; overflow-wrap: break-word; }
.portada__texto h1 { order: 1; }
.portada__texto .entradilla { order: 2; margin-bottom: 0; }
.portada__precios { order: 3; }
.portada__texto .lista-marcas { order: 4; margin-top: 0; }
.portada__texto .botonera { order: 5; margin-top: 0; }
.portada__texto .portada__marcas { order: 6; margin-top: 0; }
.portada__texto .sellos { order: 7; margin-top: 0; }
/* Y se aprieta lo que en móvil solo ocupa: el titular no necesita 3,4 rem. */
.portada { padding: 2rem 0 2.5rem; }
.portada h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); margin-bottom: .7rem; }
.portada .entradilla { font-size: 1rem; }
.lista-marcas { gap: .45rem; }
.lista-marcas li { font-size: .93rem; }
.pcard { padding: 1rem 1.1rem; }
.pcard__lista { grid-template-columns: 1fr; }
/* El nombre del plan y el precio, uno debajo de otro y no lado a lado.
En dos columnas, «desde 79 € + IVA por país y mes» lleva `white-space:
nowrap` —que ahí arriba es lo correcto, para que el importe no se parta— y
en 375 px empujaba la tarjeta 30 px fuera de la pantalla. Apilados, el
precio dispone de todo el ancho y no hace falta romperlo. */
.pcard {
grid-template-columns: 1fr;
grid-template-areas: 'quien' 'precio' 'lista' 'cta' 'pie';
}
.pcard__precio { text-align: left; }
.pcard__precio small { display: inline-block; }
/* Lo mismo en el bloque de planes de más abajo, que comparte el `nowrap` del
precio y se salía otros 29 px. Se arreglan juntos o el scroll lateral no
desaparece: basta UN elemento fuera de pantalla para que el dedo lo note. */
.planes, .plan { min-width: 0; }
.plan > *, .plan__lista li { min-width: 0; overflow-wrap: break-word; }
.plan__precio small { display: inline-block; }
}
/* ── MÓVIL: objetivos táctiles ───────────────────────────────────────────────
Google pide ~48 px de alto en lo que se pulsa. Los enlaces dentro de un
párrafo se toleran (van en texto corrido), pero los de contacto del pie y las
listas de navegación no: ahí se pulsa a propósito. */
@media (max-width: 61.99rem) {
.pie address a,
.pie__grupo ul a,
.atencion__caja,
.idiomas a, .idiomas__actual {
display: inline-block; padding-block: .45rem; min-height: 44px; line-height: 1.7;
}
.pie__grupo ul { gap: .15rem; }
}
/* El quita-miedos, pegado al botón: es lo último que se lee antes de pulsar. */
.pcard__pie { grid-area: pie; margin-top: .45rem; font-size: .72rem; color: var(--tinta-tenue); text-align: center; }
.plan__pie { margin: .5rem 0 0; font-size: .8rem; color: var(--tinta-tenue); text-align: center; }
/* ══════════════════════════════════════════════════════════════════════════
PALETA VERDE PETRÓLEO Y PORTADA POR PERFILES (01/10/2026)
──────────────────────────────────────────────────────────────────────────
Andreu eligió la paleta C («verde petróleo») y pidió una web «más
profesional», sin textos ni botones que se confundan con el fondo. Las
variables de arriba ya llevan los colores nuevos; este bloque va AL FINAL a
propósito para mandar sobre las capas anteriores (14/08 y 15/08), que se
pisaban entre sí.
Contrastes medidos (mínimo 4,5:1 para texto normal):
texto #13343B / blanco 13,3 · suave #3D4F55 8,6 · tenue #56676D 5,9
botón #0E4D57 / blanco 9,5 · enlace #0F6B73 6,2 · marca #1B7F74 4,8
sobre fondo oscuro #0E3D45: blanco 11,9 · #C9D8DA 8,1 · #8FD3CF 7,0
══════════════════════════════════════════════════════════════════════════ */
/* Botones: rectángulo sobrio, no píldora. */
.boton { border-radius: var(--radio-boton); font-weight: 600; }
.boton--principal { background: var(--marino); color: #fff; border-color: var(--marino); }
.boton--principal:hover { background: var(--fondo-oscuro); color: #fff; }
.boton--fantasma { background: #fff; color: var(--marino); border: 1px solid var(--marino); }
.boton--fantasma:hover { background: var(--fondo-suave); color: var(--fondo-oscuro); border-color: var(--fondo-oscuro); }
/* Hero claro con un tinte petróleo muy suave. */
.portada {
background: linear-gradient(180deg, #F1F5F5 0%, #FFFFFF 100%);
color: var(--tinta);
}
.portada h1 { color: var(--fondo-oscuro); }
.portada .entradilla { color: var(--tinta-suave); }
.portada .boton--fantasma { background: #fff; color: var(--marino); border-color: var(--marino); }
.portada .boton--fantasma:hover { background: var(--fondo-suave); color: var(--fondo-oscuro); }
.portada__precios-cab, .portada__precios-pie { color: var(--tinta-tenue); }
.pcard { border: 1px solid var(--linea); box-shadow: var(--sombra); background: #fff; }
.pcard--dest { outline: 0; border: 2px solid var(--marino); }
.pcard__cta { background: var(--marino); color: #fff; border-radius: var(--radio-boton); }
.pcard__cta:hover { background: var(--fondo-oscuro); color: #fff; }
/* La experiencia, en una línea de sellos de texto. */
.credenciales {
list-style: none; margin: 1.25rem 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .5rem;
}
.credenciales li {
padding: .4rem .8rem; border: 1px solid #CFDCDD; border-radius: var(--radio-chico);
background: #fff; color: var(--fondo-oscuro); font-size: .9rem; font-weight: 600;
}
/* ¿Qué necesitas? Los cuatro perfiles. */
.perfiles { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .perfiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .perfiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.perfil {
display: grid; gap: .5rem; align-content: start;
padding: 1.4rem 1.3rem; background: #fff; color: var(--tinta);
border: 1px solid var(--linea); border-top: 4px solid var(--marino);
border-radius: 0 0 var(--radio) var(--radio); text-decoration: none;
transition: border-color .15s, box-shadow .15s;
}
.perfil:hover { border-color: var(--marino); box-shadow: var(--sombra); color: var(--tinta); }
.perfil__titulo { font-size: 1.15rem; font-weight: 700; color: var(--fondo-oscuro); }
.perfil__texto { font-size: .95rem; line-height: 1.5; color: var(--tinta-suave); }
.perfil__mas { margin-top: .3rem; font-size: .92rem; font-weight: 600; color: var(--marca-texto); }
/* Cinco perfiles (02/10/2026: el quinto es la tienda online). En tableta, 2 + 2 y el
último a lo ancho; en escritorio, 3 + 2 centrados. Cinco en fila no: a 1.024 px la
tarjeta se queda en ~140 px de texto y las palabras alemanas largas no caben. */
@media (min-width: 40rem) { .perfiles--cinco .perfil:last-child { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
.perfiles--cinco { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.perfiles--cinco .perfil, .perfiles--cinco .perfil:last-child { grid-column: span 2; }
.perfiles--cinco .perfil:nth-child(4) { grid-column: 2 / span 2; }
}
/* «Cómo funciona nuestra gestoría online» de la portada (02/10/2026). Usa `.pasos` /
`.paso` (número en círculo y la línea que los une), sin el borde rosa de la primera
capa. En fila, la línea vertical quedaba suelta bajo cada número: solo en columna. */
.pasos--inicio {
list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho);
grid-template-columns: minmax(0, 1fr);
}
.pasos--inicio .paso { border-top: 0; padding-top: 0; }
@media (min-width: 56rem) {
.pasos--inicio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pasos--inicio .paso:not(:last-child)::after { content: none; }
}
/* Seis tarjetas (los canales de /gestoria-ecommerce, 02/10/2026): 3 + 3 en vez de
4 + 2. Sin `:has()` (navegadores viejos) se queda en 4 + 2, que también vale. */
.tarjetas:has(> .tarjeta:nth-child(6):last-child) {
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
/* Planes: el gratuito a lo ancho (la entrada) y los cuatro de perfil en fila. */
.planes { max-width: var(--ancho); gap: 1rem; }
@media (min-width: 46rem) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .planes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { border-radius: var(--radio); box-shadow: none; grid-template-columns: minmax(0, 1fr); }
/* ⚠ Sin `minmax(0, 1fr)` la columna de la tarjeta toma el ancho de su contenido
más largo que no se parte (el precio va con `nowrap`) y la lista se salía
encima de la tarjeta vecina (visto el 01/10/2026 con «[precio pendiente]»). */
.plan:not(.plan--dest) .plan__precio { white-space: normal; }
.plan__precio small { display: inline-block; } /* baja de línea entero si no cabe */
.plan--dest {
grid-column: 1 / -1; border: 2px solid var(--marino); background: var(--fondo-suave);
}
@media (min-width: 46rem) {
.plan--dest {
grid-template-columns: minmax(12rem, .8fr) minmax(0, 2fr) auto;
align-items: center; column-gap: 2rem;
}
.plan--dest .plan__nombre { grid-column: 1; }
.plan--dest .plan__precio { grid-column: 1; }
.plan--dest .plan__lista { grid-column: 2; grid-row: 1 / span 2; }
.plan--dest .plan__cta { grid-column: 3; grid-row: 1 / span 2; }
.plan--dest .plan__pie { grid-column: 1 / -1; }
}
.plan__nombre { color: var(--marino); }
.plan__precio { color: var(--fondo-oscuro); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.plan__lista li { color: var(--tinta-suave); }
.plan__lista li::before { border-color: var(--verde) !important; }
.plan__pie { color: var(--tinta-tenue); }
/* Textos pequeños que salían en gris claro casi ilegible. */
.sellos__texto, .portada__marcas-cab, .pcard__pie, .planes__nota, .cifras__pie { color: var(--tinta-tenue); }
/* Enlaces en verde: el «Ver más» y los datos de contacto daban 2,9:1. */
.dcard__mas, .atencion__dato, .caso__etiqueta { color: var(--marca-texto); }
/* El bloque «Tu plan» de las páginas de perfil: su plan y, al lado, el gratuito. */
@media (min-width: 46rem) { .planes--perfil { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; } }
.planes--perfil .plan:first-child { border: 2px solid var(--marino); }
.plan--gratis { background: var(--fondo-suave); }
/* El cierre «¿Empezamos?». Iba con un degradado verde→verde claro y el texto en
verde casi negro: 2,9:1 sobre la parte oscura (medido el 01/10/2026). Fondo
petróleo liso, texto blanco (11,9:1) y botón blanco. */
.cta-final { background: var(--fondo-oscuro); background-image: none; }
.cta-final__titulo { color: #fff; }
.cta-final__texto { color: #C9D8DA; }
.cta-final__boton { background: #fff; color: var(--fondo-oscuro); border-color: #fff; }
.cta-final__boton:hover { background: var(--fondo-suave); color: var(--fondo-oscuro); }
/* Móvil: las credenciales van detrás de la entradilla. La regla de orden del
hero (arriba, «MÓVIL: el precio, en la primera pantalla») no las conocía y
sin `order` subían por encima del titular (visto el 01/10/2026). Mismo
`order` que la entradilla: el empate lo decide el orden del HTML. */
@media (max-width: 61.99rem) {
.portada__texto .credenciales { order: 2; margin-top: 0; }
}
/* Tarjetas de plan alineadas (Andreu, 01/10/2026: «botones desalineados»).
Cada tarjeta es una columna: nombre, precio, periodo y lista arriba; la nota
y el botón SIEMPRE abajo, en ese orden. Como la rejilla estira las tarjetas
a la misma altura, los botones quedan en la misma línea aunque las listas
tengan distinto largo. El periodo («+ IVA al mes») va siempre en su propia
línea: si se dejaba en línea, unas tarjetas lo ponían al lado del precio y
otras debajo, según cupiera. */
.plan:not(.plan--dest) { display: flex; flex-direction: column; gap: .55rem; }
.plan:not(.plan--dest) .plan__precio { line-height: 1.1; }
.plan:not(.plan--dest) .plan__precio small {
display: block; margin-top: .35rem; font-size: .95rem; font-weight: 600; color: var(--tinta-suave);
}
.plan:not(.plan--dest) .plan__lista { margin: .4rem 0 auto; padding-bottom: .9rem; }
.plan:not(.plan--dest) .plan__pie { order: 1; margin: 0; font-size: .85rem; line-height: 1.45; }
.plan:not(.plan--dest) .plan__cta { order: 2; width: 100%; justify-content: center; text-align: center; }
/* ── Avales bajo la cabecera (01/10/2026) ─────────────────────────────────────
Cinco piezas en una franja blanca a todo lo ancho, cada una con su gráfico
(cifra, escudo del colegio, icono o banderas), título y una línea. En móvil,
dos columnas; en escritorio, cinco con separadores. */
.avales {
list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
box-shadow: var(--sombra);
}
@media (min-width: 64rem) { .avales { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.aval {
display: grid; gap: .35rem; align-content: start; justify-items: start;
padding: 1.3rem 1.25rem; border-top: 1px solid var(--linea);
}
.aval:nth-child(-n+2) { border-top: 0; }
@media (min-width: 64rem) {
.aval { border-top: 0; border-left: 1px solid var(--linea); }
.aval:first-child { border-left: 0; }
}
.aval__grafico { height: 3rem; display: flex; align-items: center; color: var(--marino); }
.aval__grafico img { height: 3rem; width: auto; }
.aval__icono { width: 2.4rem; height: 2.4rem; }
.aval__cifra { font-size: 2.3rem; font-weight: 800; line-height: 1; color: var(--marino); letter-spacing: -.02em; }
/* Con `wrap` (02/10/2026): las cinco banderas miden 171 px y en la columna de 375 px hay
130; se salían y la portada se desplazaba 4 px de lado. En dos filas caben en el 3rem. */
.aval__banderas { display: flex; flex-wrap: wrap; gap: .3rem; }
.aval__banderas .bandera { width: 1.9rem; height: 1.3rem; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--linea); }
.aval__titulo { font-weight: 700; color: var(--fondo-oscuro); font-size: .98rem; line-height: 1.3; }
.aval__texto { font-size: .86rem; line-height: 1.45; color: var(--tinta-suave); }
/* En alemán, título y texto del aval con guiones (02/10/2026), como los titulares. La
columna de cada aval mide al menos su palabra más larga (`overflow-wrap` no la acorta),
y «Kooperationspartnerin» (185 px) se montaba sobre el aval de al lado a 375 px y se
salía 10 px a 1.024; a 320, también «Steuerbehörden» y «Registerbücher». La página no
se desplazaba, por eso no lo veía la comprobación de ancho. Con guion la palabra larga
pasa a ser «Kooperations-» y cabe. En español e inglés ninguno se sale de su tarjeta
(medido de 320 a 1.366 px; a 320, «administrativa» ocupa 18 px del relleno). */
.aval__titulo:lang(de), .aval__texto:lang(de) {
-webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
/* La tarjeta del plan gratuito del hero: lista en UNA columna. En dos, las
frases largas («Plataforma ecomverify conectada a tus canales de venta»)
se partían en tres líneas estrechas (01/10/2026). */
.portada .pcard__lista { grid-template-columns: 1fr; }
/* ── IVA en Europa sin gestoría en España (01/10/2026) ───────────────────────
Bloque propio bajo los planes: cabecera, tres precios en fila y, al pie, las
banderas de cada país (enlazan a su página) con el botón de presupuesto. */
.europa {
border: 2px solid var(--marino); border-radius: var(--radio); background: #fff;
padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1.6rem;
}
.europa__titulo { margin: 0 0 .4rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--fondo-oscuro); }
.europa__texto { margin: 0; max-width: 46rem; color: var(--tinta-suave); }
.europa__precios { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .europa__precios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.europa__precio {
display: grid; gap: .35rem; align-content: start; padding: 1.1rem 1.2rem;
background: var(--fondo-suave); border-radius: var(--radio-chico); border-top: 3px solid var(--marino);
}
.europa__nombre { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marino); }
.europa__importe { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.1; color: var(--fondo-oscuro); }
.europa__importe small { display: block; margin-top: .3rem; font-size: .9rem; font-weight: 600; color: var(--tinta-suave); }
.europa__detalle { font-size: .9rem; line-height: 1.5; color: var(--tinta-suave); }
.europa__pie { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.europa__paises { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.europa__paises a {
display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem;
border: 1px solid var(--linea); border-radius: var(--radio-chico); background: #fff;
color: var(--tinta); font-size: .9rem; font-weight: 600; text-decoration: none;
}
.europa__paises a:hover { border-color: var(--marino); color: var(--fondo-oscuro); }
.europa__paises .bandera { width: 1.5rem; height: 1rem; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--linea); }
/* ── Ficha de constitución de una SL (01/10/2026) ─────────────────────────── */
.constitucion__entrada { max-width: 46rem; margin-left: auto; margin-right: auto; }
.constitucion { display: grid; gap: 1.25rem; max-width: 60rem; margin: 1.5rem auto 0; }
.constitucion__requisitos, .constitucion__costes {
background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--sombra);
}
.constitucion__requisitos { display: flex; gap: 1rem; align-items: flex-start; }
.constitucion__requisitos h3 { margin: 0 0 .6rem; color: var(--fondo-oscuro); }
.ficha__icono { width: 2rem; height: 2rem; flex: none; color: var(--marino); }
.constitucion__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem 2rem; }
@media (min-width: 46rem) { .constitucion__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.constitucion__lista li { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start; }
.constitucion__lista .ficha__icono { grid-row: span 2; }
.constitucion__concepto { font-weight: 700; color: var(--fondo-oscuro); font-size: 1.05rem; }
.constitucion__importe { color: var(--tinta-suave); }
.constitucion__pie {
display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea);
}
.constitucion__rotulo { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue); }
.constitucion__total { display: block; font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 800; color: var(--fondo-oscuro); line-height: 1.1; }
.constitucion__plazo { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta-suave); }
.constitucion__plazo .ficha__icono { width: 1.6rem; height: 1.6rem; }
.constitucion__nota { margin: 1rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--tinta-tenue); font-style: italic; }
/* ── Franja de la red de gestorías en la portada (01/10/2026) ─────────────── */
/* Discreta a propósito: la portada es para clientes; esto es la puerta de los
despachos. Borde de marca a la izquierda, texto y un botón. */
.banda-red {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1rem 2rem; padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.2rem, 3vw, 2.2rem);
background: var(--fondo-suave); border: 1px solid var(--linea);
border-left: 4px solid var(--marca-texto); border-radius: var(--radio);
}
.banda-red__titulo { margin: 0 0 .3rem; font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.banda-red__texto { margin: 0; max-width: 40rem; color: var(--tinta-suave); }
.banda-red .boton { white-space: nowrap; }
/* ── Franja de canales de venta (01/10/2026) ──────────────────────────────── */
.canales { background: var(--fondo); border-bottom: 1px solid var(--linea); padding: 1.1rem 0; }
.canales__fila {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.4rem;
}
.canales__titulo { margin: 0; font-weight: 600; color: var(--tinta-suave); font-size: .95rem; }
.canales__lista {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}
.canales__canal {
padding: .35rem .8rem; border: 1px solid var(--linea); border-radius: 999px;
background: var(--fondo-suave); color: var(--tinta); font-weight: 600; font-size: .9rem;
}
@media (min-width: 62rem) {
.canales { padding: 1.4rem 0; }
.canales__titulo { font-size: 1.05rem; }
.canales__canal { padding: .5rem 1.1rem; font-size: 1rem; }
}
/* ── Botones de la banda de cifras (02/10/2026) ───────────────────────────── */
/* «Ver precios» llevaba `boton--principal`, del mismo verde que la banda: solo
se leía el texto. Aquí los dos van fijados, sin depender de los genéricos. */
.banda-cifras .banda-cifras__principal { background: #fff; border-color: #fff; color: var(--marino); }
.banda-cifras .banda-cifras__principal:hover { background: var(--fondo-suave); border-color: var(--fondo-suave); color: var(--marino); }
.banda-cifras .banda-cifras__fantasma { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.banda-cifras .banda-cifras__fantasma:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
/* ── Cifras exactas en la banda (02/10/2026) ──────────────────────────────── */
/* «111.097.570 €» tiene trece caracteres: a 2,5rem no cabía en una columna.
Cifras de ancho fijo para que no bailen al cambiar cada día. */
.cifras--banda { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cifras--banda .cifras__dato {
font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); font-variant-numeric: tabular-nums;
white-space: nowrap; letter-spacing: -.01em;
}
/* ── Oferta a medida bajo los planes (02/10/2026) ─────────────────────────── */
.planes__oferta {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1rem 2rem; margin: 1.6rem 0 0; padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.2rem, 3vw, 2rem);
background: var(--fondo); border: 1px solid var(--linea);
border-left: 4px solid var(--marca-texto); border-radius: var(--radio);
}
.planes__oferta-titulo { margin: 0 0 .3rem; font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.planes__oferta-texto { margin: 0; max-width: 44rem; color: var(--tinta-suave); }
.planes__oferta .boton { white-space: nowrap; }
/* ── Aviso de una línea para gestorías, encima del formulario (02/10/2026) ── */
.aviso-red {
margin: 0 0 1.4rem; padding: .7rem 1rem; font-size: .95rem; color: var(--tinta-suave);
background: var(--fondo-suave); border-left: 3px solid var(--marca-texto); border-radius: var(--radio-chico);
}
.aviso-red a { font-weight: 600; color: var(--marca-texto); white-space: nowrap; }
@media (max-width: 30rem) { .aviso-red a { white-space: normal; } }
/* ── Barra «Para gestorías» encima de la cabecera (02/10/2026) ────────────── */
/* Fina y discreta: visible en todas las páginas sin quitar sitio al menú del
cliente (la fila de la cabecera no admite un enlace más). */
.barra-red { background: var(--marino); }
.barra-red__fila { display: flex; align-items: center; gap: 1rem; padding-top: .35rem; padding-bottom: .35rem; }
/* El enlace, siempre a la derecha, haya selector de idioma o no (las páginas
solo en español no lo pintan). */
.barra-red__enlace { margin-left: auto; }
.barra-red .idiomas { font-size: .75rem; gap: .15rem; }
.barra-red .idiomas a, .barra-red .idiomas__actual { padding: 0 .4rem; line-height: 1.3; color: #fff; }
.barra-red .idiomas a { opacity: .75; font-weight: 600; }
.barra-red .idiomas a:hover { opacity: 1; background: rgba(255, 255, 255, .12); color: #fff; }
.barra-red .idiomas__actual { background: rgba(255, 255, 255, .16); }
/* Uno u otro: en escritorio el de la barra, con menú desplegable el del menú.
El corte es el mismo que el del menú (72rem). */
.menu__idiomas { display: none; }
.barra-red a {
font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none; line-height: 1.3;
}
.barra-red a:hover, .barra-red a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.barra-red__corta { display: none; }
@media (max-width: 40rem) {
.barra-red__fila { justify-content: center; text-align: center; }
.barra-red__enlace { margin-left: 0; }
.barra-red__larga { display: none; }
.barra-red__corta { display: inline; }
}
/* ── Ventajas de la red de gestorías (02/10/2026) ─────────────────────────── */
@media (min-width: 64rem) { .perfiles--ventajas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.perfil--ventaja { gap: .6rem; padding: 1.6rem 1.5rem; }
.perfil--ventaja .ficha__icono { width: 2.4rem; height: 2.4rem; color: var(--marca-texto); margin-bottom: .2rem; }
.perfiles--ventajas { margin-top: 1.4rem; }
/* ══════════════════════════════════════════════════════════════════════════
CALCULADORA DE COMISIONES DE AMAZON (02/10/2026)
──────────────────────────────────────────────────────────────────────────
Va AL FINAL: manda la última capa. Solo tokens de :root. Contrastes medidos:
--tinta-tenue #56676D 5,9 sobre blanco y 5,4 sobre --fondo-suave; --peligro
6,6 y 6,0. El borde de los campos de la calculadora va en --tinta-tenue
porque --linea (#DCE5E6, 1,3:1) no llega al 3:1 de WCAG 1.4.11.
══════════════════════════════════════════════════════════════════════════ */
/* Foco de los campos de la calculadora (revisión del 02/10/2026): el de siempre, 3px en
--marca-texto (6,2:1 sobre blanco). `.calc .campo input[type="text"]` (0,3,1) dejaba el
borde igual al recibir el foco y solo quedaba el contorno al 12 % de `.campo input:focus`
(1,2:1). Aquí iba también `.campo select:focus` con ese contorno débil para TODA la web:
quitado, en los desplegables de cualquier página manda `:focus-visible`. */
.calc .campo input:focus-visible, .calc .campo select:focus-visible { outline: 3px solid var(--marca-texto); outline-offset: 2px; }
.calc [hidden] { display: none !important; }
.calc { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.calc__grupo { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); padding: 1.25rem 1.25rem .25rem; margin: 0 0 1.25rem; min-width: 0; }
.calc__grupo legend { font-weight: 700; color: var(--tinta); padding: 0 .4rem; }
.calc .campo input[type="text"], .calc .campo select { border-color: var(--tinta-tenue); }
/* El error, en --peligro y con la MISMA especificidad que la regla de arriba (0,3,1
y 0,2,1), que va antes: `.campo--mal input` (0,1,1) perdía y el campo erróneo no
cambiaba de borde. */
.calc .campo--mal input[type="text"], .calc .campo--mal select { border-color: var(--peligro); }
.calc .campo--mal .campo__estado { color: var(--peligro); }
.calc__fila-campos { display: grid; gap: 0 .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc__opciones { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.calc__opcion { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; cursor: pointer; }
.calc__opcion input { width: 20px; height: 20px; accent-color: var(--marino); }
.calc__ayuda-casilla { grid-column: 2; margin: 0; }
.calc__modo { font-size: .9rem; color: var(--tinta-suave); margin: -.5rem 0 1.1rem; }
.calc__restaurar { background: none; border: 0; padding: 0; margin: -.6rem 0 1.1rem; font: inherit; font-size: .88rem; color: var(--marca-texto); text-decoration: underline; cursor: pointer; }
.calc__resultado { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); padding: 1.5rem; min-width: 0; }
.calc__titulo { margin-top: 0; }
.calc__tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc__tabla th, .calc__tabla td { padding: .5rem 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; font-weight: 400; color: var(--tinta); }
.calc__tabla td { text-align: right; white-space: nowrap; padding-left: 1rem; }
.calc__grupo-titulo th { padding-top: 1.1rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--marino); border-bottom-color: var(--marino); }
.calc__sub th { padding-left: .9rem; }
.calc__dato th, .calc__dato td { color: var(--tinta-suave); }
.calc__clave th, .calc__clave td { font-weight: 700; }
.calc__total th, .calc__total td { font-size: 1.2rem; font-weight: 700; color: var(--fondo-oscuro); border-bottom: 2px solid var(--fondo-oscuro); }
.calc__fila--negativa th, .calc__fila--negativa td { color: var(--peligro); }
.calc__detalle { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 400; color: var(--tinta-tenue); }
.calc__aviso { margin: 1.25rem 0; font-size: .9rem; }
/* La barra fija de móvil deja sitio a la derecha para el botón del chat. */
.calc__barra { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin: 0; padding: .75rem 4.5rem .75rem 0; background: var(--fondo-suave); border-top: 1px solid var(--linea); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__desplazable { overflow-x: auto; }
.calc__desplazable table { min-width: 32rem; }
.calc__ejemplo { display: grid; gap: 0 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .calc__fila-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .calc__ejemplo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc__ejemplo table { min-width: 0; } }
@media (min-width: 62rem) {
.calc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
/* Debajo de la cabecera fija (77 px); si el desglose no cabe, se desplaza dentro. */
.calc__resultado { position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
.calc__barra { display: none; }
}
/* ── Enlace a una herramienta desde un artículo del blog (02/10/2026) ──────────
Clase propia, no `.banda-red` (esa es la franja de la red de gestorías y NOTAS
pide no copiarla). Lo pinta `paginas/articulo.php` con `contenido/es/_articulos.php`. */
.articulo__herramienta {
margin: 2rem 0 0; padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.2rem, 3vw, 2rem);
background: var(--fondo-suave); border: 1px solid var(--linea);
border-left: 4px solid var(--marca-texto); border-radius: var(--radio);
}
.articulo__herramienta-titulo { margin: 0 0 .4rem; font-size: clamp(1.15rem, 2.4vw, 1.35rem); }
.articulo__herramienta-texto { margin: 0 0 1rem; color: var(--tinta-suave); }
.articulo__herramienta .botonera { margin: 0; }
/* ── Herramienta gratuita a la vista (02/10/2026) ─────────────────────────────
Andreu: «si haces cosas y no se encuentran… como si no existiera». La
calculadora sale en la barra fina (escritorio), en el menú desplegable
(móvil) y en una franja en la portada y en las páginas de Amazon. */
.barra-red__herramienta {
display: inline-flex; align-items: center; gap: .35rem;
}
.barra-red__herramienta .ficha__icono { width: 14px; height: 14px; flex: none; }
.menu__solo-desplegable { display: none; }
.seccion--herramienta { padding-block: clamp(1.2rem, 3vw, 1.8rem); }
.banda-herramienta {
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.2rem, 3vw, 2rem);
background: var(--fondo); border: 1px solid var(--linea); border-left: 4px solid var(--marca);
border-radius: var(--radio);
}
.banda-herramienta__icono {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--fondo-suave); color: var(--marca-texto);
}
.banda-herramienta__icono .ficha__icono { width: 1.7rem; height: 1.7rem; }
.banda-herramienta__cuerpo { flex: 1 1 20rem; }
.banda-herramienta__etiqueta {
margin: 0 0 .2rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--marca-texto);
}
.banda-herramienta__titulo { margin: 0 0 .25rem; font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.banda-herramienta__texto { margin: 0; max-width: 42rem; color: var(--tinta-suave); }
.banda-herramienta .boton { white-space: nowrap; }
@media (max-width: 72rem) {
.barra-red__herramienta { display: none; }
.menu .menu__solo-desplegable { display: block; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MÓVIL Y TECLADO — revisión antes de abrir, puntos 30 y 31 (02/10/2026)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Nada se sale de la pantalla en móvil (punto 30) ─────────────────────────
Medido a 375, 360 y 320 px en las 98 páginas (es, en, de) y en los 34 artículos.
Se salían: el h1 de /de/epr-herstellerverantwortung («Herstellerverantwortung»,
ya a 375), los de /de/plattform y /de/datenschutz a 320, el botón «Das
Ticdat-Netzwerk kennenlernen» de /de/ (2 px a 360), la URL de youronlinechoices
en las tres páginas de cookies y, en el blog, enlaces cuyo texto es una URL
(oss-ventanilla-unica llegaba a 1.291 px), una tabla dentro de