/* ============================================================
TIPOGRAFÍA — tres voces
Excon (local) → titulares
Instrument Serif (local) → palabra clave dentro del titular
Arimo (Google Fonts) → párrafos y texto secundario
Arimo es métricamente compatible con Arial: si tarda en cargar, el
respaldo ocupa exactamente lo mismo y no hay salto de maquetación.
============================================================ */
@font-face{font-family:'Excon'; font-weight:500; font-style:normal; font-display:swap;
src:url('../fonts/excon/Excon-Medium.woff2') format('woff2'),
url('../fonts/excon/Excon-Medium.woff') format('woff');}
@font-face{font-family:'Excon'; font-weight:900; font-style:normal; font-display:swap;
src:url('../fonts/excon/Excon-Black.woff2') format('woff2'),
url('../fonts/excon/Excon-Black.woff') format('woff');}
@font-face{font-family:'Instrument Serif'; font-weight:400; font-style:italic; font-display:swap;
src:url('../fonts/instrument-serif/InstrumentSerif-Italic.woff2') format('woff2');}
/* ============================================================
TOKENS — Apple claro. Blanco puro, gris claro, azul solo de acento.
Los dos temas viven en tokens: el bloque de abajo es el claro y
:root[data-tema="oscuro"] lo reescribe entero. Ninguna regla del
resto del archivo debe llevar un color literal, o se quedará
colgada en un tema. El tema lo fija un script en línea del
antes del primer pintado (si no, la web parpadearía en blanco).
============================================================ */
:root{
/* barras de scroll y controles nativos, al tono del tema */
color-scheme: light;
--color-fondo: #FFFFFF; /* blanco puro */
--color-superficie: #F5F5F7; /* gris claro Apple para tarjetas */
--color-borde: #D2D2D7; /* separador Apple; el #424245 sería una raya negra */
--color-texto: #1D1D1F; /* casi negro Apple */
--color-texto-sec: #6E6E73; /* gris secundario: 5,07:1 sobre blanco. El #86868B daba 3,62 y suspendía */
--color-acento: #0071E3; /* azul Apple de fondo claro: 4,70:1. El #2997FF daba 3,02 */
--color-acento-hi: #0077ED; /* hover */
--color-acento-suave: rgba(0,113,227,.09); /* relleno del botón de línea al pasar por encima */
/* El azul del botón se separa del azul de acento a propósito. En oscuro
el acento sube a #2997FF para leerse sobre negro, pero ese mismo azul
con la etiqueta en blanco da 3,04:1 y suspende. El botón se queda en
el #0071E3 de Apple en los dos temas: 4,70:1 con blanco encima. */
--color-btn: #0071E3;
--color-btn-hi: #0077ED;
--color-btn-texto: #FFFFFF;
/* Degradado de la palabra en Instrument Serif dentro de los titulares */
--degradado-acento: linear-gradient(120deg, #2997FF 0%, #1E7FFF 30%, #0071E3 55%, #0040B0 80%, #3B3BDC 100%);
/* Barra: translúcida en reposo, casi opaca cuando hay scroll debajo */
--barra-fondo: rgba(255,255,255,.75);
--barra-fondo-solido: rgba(255,255,255,.92);
/* Velo del fondo: abre una zona de calma bajo el bloque de texto para que
el titular se lea, y deja el efecto a plena fuerza en el resto.
La elipse está medida sobre el contenido del hero, que va centrado y
ocupa más o menos el 60% del ancho: por eso es más estrecha que alta y
cae ligeramente por encima del centro. En oscuro no cambia el color,
cambia el sentido: en claro blanquea, en oscuro ennegrece. */
--fondo-velo:
radial-gradient(ellipse 62% 52% at 50% 44%,
rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 40%,
rgba(255,255,255,.28) 70%, rgba(255,255,255,0) 100%);
/* Cinta inferior: isla de contraste invertido respecto a la página */
--cinta-fondo: #000000;
--cinta-texto: #F5F5F7;
--cinta-sep: #86868B;
/* Pomo del interruptor de tema. No sale de --color-fondo: en oscuro sería
un pomo negro sobre una pastilla #1D1D1F y desaparecería. Cada tema le
da el tono que lo despega de su pastilla. */
--tema-pomo: #FFFFFF;
/* Blanco de Apple, que no es blanco puro. Es de los pocos tokens que NO
se reescribe en el bloque oscuro: se quiere el mismo en los dos temas. */
--blanco-suave: #F5F5F7;
/* Tipografías */
--display:'Excon','Archivo',Arial,sans-serif;
--texto:'Arimo',Arial,'Helvetica Neue',sans-serif;
--serif:'Instrument Serif',Georgia,serif;
/* Medidas */
--ancho:1180px;
--radio:18px; /* esquinas Apple en tarjetas */
--radio-btn:980px; /* pastilla */
--radio-pila:26px;
--hueco-pila:14px;
--alto-barra:68px;
--alto-pie:140px; /* lo mide main.js; esto es solo el valor de partida */
--alto-cinta:46px; /* alto de la cinta fija; el resto de barras se apoyan en él */
/* Lo que hay tapando el borde inferior de la ventana. Una carta de la
pila no puede llegar hasta abajo del todo: por debajo está la cinta y,
en móvil, también la barra de acción. Se descuenta al calcular dónde
se clava cada carta y cuánto puede medir. */
--reserva-inferior:var(--alto-cinta);
--sombra:0 4px 20px rgba(0,0,0,.08);
}
/* ============================================================
TOKENS — Apple oscuro.
Negro puro de fondo, #1D1D1F de superficie: la misma pareja que usa
Apple en sus secciones oscuras, solo que intercambiando los papeles
del tema claro. El gris secundario sube de #6E6E73 a #86868B porque
el primero sobre negro da 2,86:1 y suspende; el #86868B da 5,92:1
sobre el fondo y 4,71:1 sobre las tarjetas. El azul de acento sube a
#2997FF (6,90:1 sobre negro); el #0071E3 se quedaba en 3,26:1.
============================================================ */
:root[data-tema="oscuro"]{
color-scheme: dark;
--color-fondo: #000000;
--color-superficie: #1D1D1F;
--color-borde: #424245;
--color-texto: #F5F5F7;
--color-texto-sec: #86868B;
--color-acento: #2997FF;
--color-acento-hi: #6BB9FF;
--color-acento-suave: rgba(41,151,255,.14);
/* el botón conserva el azul del tema claro: ver la nota en :root */
--color-btn: #0071E3;
--color-btn-hi: #0A84FF;
--color-btn-texto: #FFFFFF;
/* sin los azules profundos del claro: sobre negro se ensucian y el
final del titular se pierde. El recorrido va de cielo a índigo Apple. */
--degradado-acento: linear-gradient(120deg, #8FC9FF 0%, #2997FF 35%, #0A84FF 62%, #5E5CE6 100%);
--barra-fondo: rgba(0,0,0,.72);
--barra-fondo-solido: rgba(0,0,0,.90);
/* más flojo que el claro: en oscuro el titular es casi blanco sobre azul
profundo y ya separa solo. El velo aquí solo asienta el bloque. */
--fondo-velo:
radial-gradient(ellipse 62% 52% at 50% 44%,
rgba(0,0,0,.72) 0%, rgba(0,0,0,.52) 40%,
rgba(0,0,0,.20) 70%, rgba(0,0,0,0) 100%);
/* La cinta no se invierte a blanco: una banda clara fija en el borde
inferior deslumbra sobre una página negra. Se queda como superficie
elevada y se separa del fondo con el borde superior. */
--cinta-fondo: #1D1D1F;
--cinta-texto: #F5F5F7;
--cinta-sep: #6E6E73;
--cinta-borde: #424245;
/* gris de sistema, no blanco: un pomo blanco sobre negro es un foco.
Con él, el icono activo (#F5F5F7) encima da 5,47:1. */
--tema-pomo: #636366;
/* sobre negro una sombra negra no existe: la elevación la da el borde,
y la sombra solo asienta el elemento */
--sombra:0 4px 24px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* si algún día se añade un ancla, que no quede bajo la barra fija */
section[id]{scroll-margin-top:84px;}
body{
margin:0; overflow-x:hidden; background:var(--color-fondo); color:var(--color-texto);
font-family:var(--texto); font-size:17px; font-weight:400; line-height:1.55;
padding-bottom:var(--alto-cinta); /* hueco para la cinta fija */
}
::selection{background:var(--color-acento); color:var(--color-fondo);}
img,svg{display:block; max-width:100%;}
.logo-mark{display:inline-block; flex:none; aspect-ratio:1139/1060; background-color:currentColor;
-webkit-mask:url('../images/logo-mark.png') center / contain no-repeat;
mask:url('../images/logo-mark.png') center / contain no-repeat;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--color-acento-hi); outline-offset:3px; border-radius:4px;}
/* ============================================================
TIPOGRAFÍA BASE
============================================================ */
h1,h2,h3{
font-family:var(--display); font-weight:900;
letter-spacing:-.02em; line-height:1.02; margin:0; text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6vw,4.8rem); line-height:1.0; letter-spacing:-.035em;}
h2{font-size:clamp(2.05rem,4.2vw,3.3rem); max-width:24ch;}
.centrado h2{margin-inline:auto;}
h3{font-family:var(--display); font-size:1.18rem; font-weight:500; letter-spacing:-.01em; line-height:1.25;}
p{margin:0 0 1rem;}
/* Troceado del skew reveal (MAIBO text-reveal/skew-reveal). Las cajas las
crea main.js; aquí solo se les da el display que necesitan para poder
transformarse. La palabra entera va en inline-block para que no se parta
por la mitad al saltar de línea. */
.sr-palabra{display:inline-block;}
.sr-letra{display:inline-block; will-change:transform, opacity;}
/* Palabra de peso dentro de un titular — Instrument Serif Italic.
El contraste es tipográfico, no cromático: mismo color, otra voz.
El 1.06em compensa que Instrument Serif tiene la altura de x más baja
que Excon Black y, al mismo cuerpo, se vería hundida. */
h1 .acento, h2 .acento{
font-family:var(--serif); font-style:italic; font-weight:400;
font-size:1.06em; letter-spacing:0;
padding-right:.04em;
}
/* Degradado de texto sobre TODOS los fragmentos en Instrument Serif
de los titulares. El color sólido va primero: es lo que se ve si el
navegador no sabe recortar el fondo al texto, y evita que
-webkit-text-fill-color deje el titular invisible. */
h1 .acento, h2 .acento{color:var(--color-acento);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
h1 .acento, h2 .acento{
background-image:var(--degradado-acento);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
/* la cursiva se sale de su caja por la derecha: sin este margen
el último trazo se queda sin color */
padding-right:.06em;
}
}
/* Etiquetas y microcopy — Arimo en caja alta con tracking abierto */
.etiqueta{
font-family:var(--texto); font-size:.7rem; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--color-texto-sec);
display:inline-block; margin:0;
}
.microcopia{
font-family:var(--texto); font-size:.86rem; font-weight:400; line-height:1.5;
color:var(--color-texto-sec); margin:18px 0 0;
}
.apunte{color:var(--color-texto-sec);}
.plomo{max-width:62ch; font-size:1.12rem; font-weight:400; line-height:1.5;}
/* lo destacado sube a blanco Apple: sobre el gris secundario, el peso
solo no basta para que resalte */
.plomo strong, .microcopia strong{font-weight:700; color:var(--color-texto);}
/* ============================================================
LAYOUT
============================================================ */
.wrap{max-width:var(--ancho); margin:0 auto; padding:0 24px;}
.seccion{padding:clamp(78px,10vw,138px) 0; position:relative;}
.seccion--a{background:var(--color-fondo);}
.seccion--b{background:var(--color-superficie);}
.centrado{text-align:center;}
.centrado .plomo{margin-left:auto; margin-right:auto;}
.cab-seccion{margin-bottom:22px;}
/* ============================================================
BOTONES — pastilla Apple.
El fondo sale de --color-btn, no de --color-acento: el botón mantiene
el azul #0071E3 en los dos temas para que la etiqueta blanca siga
dando 4,70:1. Ver la nota del token en :root.
============================================================ */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 28px;
border:1px solid transparent; border-radius:var(--radio-btn);
background:var(--color-btn); color:var(--color-btn-texto);
font-family:var(--texto); font-size:1rem; font-weight:400; letter-spacing:0; line-height:1.45;
text-decoration:none; text-align:center; cursor:pointer;
transition:background .25s ease, color .25s ease, border-color .25s ease,
transform .25s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{background:var(--color-btn-hi); transform:scale(1.02);}
.btn:active{transform:scale(1);}
.btn__label{white-space:nowrap;}
.btn__caja{display:inline-flex; align-items:center; flex:none;}
.btn__caja svg{width:15px; height:15px; transition:transform .25s cubic-bezier(.2,.8,.2,1);}
.btn:hover .btn__caja svg{transform:translate(2px,-2px);}
.btn--linea{
background:transparent; color:var(--color-acento); border-color:var(--color-borde);
}
.btn--linea:hover{
background:var(--color-acento-suave); color:var(--color-acento);
border-color:var(--color-acento); transform:scale(1.02);
}
.btn--grande{padding:15px 34px; font-size:1.06rem;}
.acciones{display:flex; flex-wrap:wrap; gap:14px;}
.centrado .acciones{justify-content:center;}
/* ============================================================
BARRA
============================================================ */
/* Sticky y siempre en su sitio: lo que cambia con el scroll es la opacidad,
que main.js escribe en cada frame. Nace en 0 sobre el hero y llega a 1 a
los SCROLL_REVELA_BARRA píxeles, así que la barra se revela con el gesto
en vez de irrumpir de golpe. Aquí solo va el valor de partida. */
.barra{
position:sticky; top:0; z-index:60;
/* No debe reservar sitio en el flujo: sin este margen negativo dejaría
68px de hueco vacío encima del hero, que arranca a hueso arriba. */
margin-bottom:calc(var(--alto-barra) * -1);
background:var(--barra-fondo); backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid transparent;
opacity:0;
/* la opacidad NO va aquí: la manda el scroll fotograma a fotograma y una
transición encima la dejaría persiguiendo al dedo */
transition:border-color .3s ease, background .3s ease;
}
/* Casi transparente, la barra sigue ocupando 68px sobre el hero y se
comería los clics y el foco del teclado. main.js pone y quita esto. */
.barra--apagada{pointer-events:none;}
.barra.con-sombra{border-bottom-color:var(--color-borde); background:var(--barra-fondo-solido);}
.barra .wrap{display:flex; align-items:center; justify-content:space-between; height:var(--alto-barra); gap:24px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--color-texto);}
.logo .logo-mark{width:26px; color:var(--color-texto); transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.logo:hover .logo-mark{transform:rotate(180deg);}
.logo b{font-family:var(--display); font-weight:900; font-size:1.08rem; letter-spacing:-.015em; line-height:1; display:block;}
.barra .btn{padding:9px 20px; font-size:.92rem;}
/* el CTA se retira en pantallas estrechas (ya lo repite la barra móvil),
pero el interruptor se queda: es el único sitio desde el que se cambia */
@media(max-width:560px){.barra .btn{display:none;}}
.barra__acciones{display:flex; align-items:center; gap:14px;}
/* ------------------------------------------------------------
INTERRUPTOR DE TEMA — sol y luna
Pastilla con los dos símbolos siempre a la vista y un pomo que se
posa sobre el que está activo: en claro tapa el sol, en oscuro la
luna. role="switch" y aria-checked los mantiene main.js.
El icono de debajo del pomo sube a --color-texto; el otro recede.
------------------------------------------------------------ */
.tema{
position:relative; flex:none;
display:inline-flex; align-items:center;
width:58px; height:30px; padding:0;
border:1px solid var(--color-borde); border-radius:var(--radio-btn);
background:var(--color-superficie);
cursor:pointer;
transition:background .3s ease, border-color .3s ease;
}
.tema:hover{border-color:var(--color-texto-sec);}
/* El pomo. 24px dentro de una caja de contenido de 56×28 (58×30 menos
el borde): 2px de aire por lado, y 28px de recorrido hasta el otro
extremo (56 − 24 − 2 − 2). */
.tema__pomo{
position:absolute; top:2px; left:2px; width:24px; height:24px;
border-radius:50%; background:var(--tema-pomo);
box-shadow:0 1px 3px rgba(0,0,0,.22);
transition:transform .4s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
/* El pomo se coloca desde data-tema, que el script del ya ha
escrito antes del primer pintado, y no desde aria-checked, que lo
sincroniza main.js más tarde: si dependiera de aria, al cargar en
oscuro el pomo nacería a la izquierda y se vería cruzar la pastilla. */
:root[data-tema="oscuro"] .tema__pomo{transform:translateX(28px);}
/* cada símbolo ocupa media pastilla: sus centros caen justo donde se
para el pomo, a 14px y a 42px del borde interior */
.tema__icono{
position:relative; z-index:1;
display:flex; flex:1 1 0; align-items:center; justify-content:center;
/* el que no está activo recede al gris secundario, sin bajar la opacidad:
ambos grises ya pasan el 4,5:1 sobre su pastilla en los dos temas, y
rebajándolos el símbolo apagado dejaba de leerse */
color:var(--color-texto-sec);
transition:color .3s ease;
}
.tema__icono svg{width:14px; height:14px;}
:root:not([data-tema="oscuro"]) .tema__icono--sol,
:root[data-tema="oscuro"] .tema__icono--luna{color:var(--color-texto);}
/* Fundido al cambiar de tema. La clase la pone y la quita main.js, y solo
si el visitante no ha pedido movimiento reducido: el bloque de
prefers-reduced-motion de más abajo apaga las transiciones con
!important, y este también lo lleva porque va después en el archivo. */
html.tema-fundido,
html.tema-fundido *,
html.tema-fundido *::before,
html.tema-fundido *::after{
transition:background-color .35s ease, border-color .35s ease,
color .35s ease, fill .35s ease, box-shadow .35s ease !important;
}
/* La regla de arriba reescribe la transición entera de todo, y el pomo se
quedaría sin la suya justo en el momento en que tiene que deslizarse.
Aquí se le devuelve: gana por especificidad y por ir después. */
html.tema-fundido .tema__pomo{
transition:transform .4s cubic-bezier(.2,.8,.2,1), background-color .35s ease !important;
}
/* ============================================================
PORTADA
============================================================ */
.portada{
position:relative; overflow:hidden;
/* la barra ya no ocupa flujo: el hero arranca pegado al borde superior */
min-height:calc(100svh - var(--alto-cinta));
display:flex; align-items:center;
padding:clamp(48px,7vw,88px) 0 clamp(64px,8vw,104px);
}
/* posicionado para quedar por encima del fondo fijo, que va en z-index:0 */
.portada .wrap{position:relative; z-index:1; width:100%;}
/* el H1 no debe pasar de tres líneas: acota la medida, no el tamaño */
#titular{max-width:17ch; margin-inline:auto;}
.portada .plomo{margin:30px auto 38px; max-width:56ch;}
.portada .microcopia{max-width:46ch; margin-inline:auto;}
.avales{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:clamp(38px,5vw,60px); padding-top:26px; border-top:1px solid var(--color-borde);}
.centrado .avales{justify-content:center;}
.aval{display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--color-texto-sec);}
.aval::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--color-acento); flex:none;}
/* ============================================================
TARJETAS Y PASOS
============================================================ */
.rejilla-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px;}
@media(max-width:900px){.rejilla-3{grid-template-columns:1fr; gap:16px;}}
.pega{background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio); padding:30px 28px;
transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;}
.pega:hover{transform:translateY(-4px);}
.pega b{font-family:var(--texto); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-texto-sec); display:block; margin-bottom:16px;}
.pega h3{margin-bottom:10px;}
.pega p{margin:0; color:var(--color-texto-sec); font-size:.98rem;}
.pega svg{width:22px; height:22px; stroke-width:1.5; color:var(--color-acento); margin-bottom:18px;}
/* Emoji en lugar de icono dibujado. Va con su propia pila de fuentes: sin
ella, algunos sistemas resuelven ⚙ y 💬 con el glifo monocromo de la
fuente de texto en vez de con la versión a color.
Un punto más grande que el SVG (28 frente a 22) porque el emoji trae su
propio aire alrededor y a la misma medida pesa menos. Y line-height:1
para que ese aire no descuadre el margen inferior. */
.pega__emoji{
display:block; margin-bottom:16px;
font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
font-size:28px; line-height:1;
}
.remate{margin-top:46px; padding:30px 32px; background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio);
display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between;}
.remate p{margin:0; font-family:var(--display); font-weight:500; font-size:1.28rem; letter-spacing:-.015em; max-width:52ch;}
/* ============================================================
DOS COLUMNAS — titular a la izquierda, prosa a la derecha
============================================================ */
.dos-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start;}
@media(max-width:900px){.dos-col{grid-template-columns:1fr; gap:28px;}}
.dos-col h2{max-width:none;}
.dos-col__texto p{color:var(--color-texto-sec); font-size:1.06rem; margin-bottom:1.2rem;}
.dos-col__texto p:last-child{margin-bottom:0;}
.dos-col__texto strong{color:var(--color-texto); font-weight:700;}
/* La carta de casos es la más cargada de la pila —titular, cuatro logos,
cuatro testimonios y un CTA—, así que respira menos que las demás. Sin
esto, el botón del final se queda por debajo del pliegue y, al ser una
carta pegajosa, ahí no hay forma de alcanzarlo. */
body.pila #casos{padding:clamp(32px,3.6vh,54px) 0;}
/* un punto por debajo del resto de titulares, por lo mismo */
#casos h2{font-size:clamp(1.85rem,3.5vw,2.75rem);}
/* En ventanas bajas la carta se aprieta de verdad. La consulta es por ALTO
y no por ancho a propósito: lo que aquí escasea es el alto, y un portátil
de 13" da 1440 de ancho pero apenas 760 de alto útil una vez descontada
la interfaz del navegador. */
@media(max-height:900px){
body.pila #casos{padding:18px 0;}
#casos h2{font-size:clamp(1.55rem,2.9vw,2.15rem);}
#casos .logos{margin:12px 0 14px;}
#casos .logos img{height:calc(var(--alto) * .82);}
#casos .caso{padding:18px 20px;}
#casos .caso__cab{margin-bottom:10px;}
#casos .caso__nombre{font-size:1.12rem; margin-bottom:9px;}
#casos .caso__cita p{font-size:.88rem;}
#casos .caso__pie{margin-top:13px; padding-top:12px;}
}
/* ============================================================
FILA DE LOGOS DE CLIENTES
Cuatro columnas iguales con el logo centrado en la suya: así la
distribución es simétrica aunque los logos midan cosas muy distintas.
TAMAÑO ÓPTICO, NO DE CAJA. Los cuatro archivos vienen recortados al
dibujo (sin el aire del lienzo cuadrado original) y cada uno lleva su
propia altura, calculada a partir de su proporción y de su densidad de
tinta —Cien Palacios tiene ocho veces más tinta que Segura Höhr, así que
a igual altura uno sería un ladrillo y el otro un susurro—. Los valores
se afinaron mirando el render, que es lo único que decide.
============================================================ */
.logos{
display:grid; grid-template-columns:repeat(4,1fr);
align-items:center; justify-items:center;
gap:clamp(20px,4vw,56px);
margin:clamp(22px,2.8vh,34px) 0 clamp(24px,3.2vh,38px);
padding:0; list-style:none;
}
.logos li{
display:flex; align-items:center; justify-content:center;
width:100%; min-width:0;
/* nacen abajo y apagados; los enciende main.js con .visible en .logos */
opacity:0; transform:translateY(14px);
transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.logos img{
width:auto; max-width:100%; height:var(--alto);
object-fit:contain;
/* Reposo: monocromo y atenuado. El contraste compensa que al quitar el
color los logos claros se van al gris medio y se deslavan. */
filter:grayscale(1) contrast(1.15);
opacity:.5;
transition:filter .35s ease, opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.logos li:hover img{filter:none; opacity:1; transform:scale(1.05);}
.logos li:nth-child(1) img{--alto:52px;} /* placa densa y ornamentada */
.logos li:nth-child(2) img{--alto:46px;} /* rótulo ancho de tres pisos */
.logos li:nth-child(3) img{--alto:60px;} /* símbolo cuadrado de trazo fino */
.logos li:nth-child(4) img{--alto:42px;} /* rótulo ancho de dos líneas */
/* En oscuro NO se revela el color: la carta es negro puro y dos de los
cuatro logos son oscuros —el azul marino del bufete y el marrón de la
placa—, así que a color pleno desaparecerían. Van en blanco plano y el
hover solo los enciende. */
/* Se invierte la luminancia, NO se aplasta a blanco. Con brightness(0)
invert(1) la placa de Cien Palacios —que es una silueta rellena— salía
como una mancha blanca sin dibujo. Invirtiendo, lo oscuro se vuelve claro
y lo claro oscuro: la placa queda en negativo, con sus letras legibles. */
:root[data-tema="oscuro"] .logos img{
filter:grayscale(1) invert(1) contrast(1.1);
opacity:.55;
}
:root[data-tema="oscuro"] .logos li:hover img{
filter:grayscale(1) invert(1) contrast(1.1);
opacity:1;
}
/* escalonado de entrada, ~90ms por logo. Una sola vez: main.js desconecta
el observador en cuanto dispara. */
.logos.visible li{opacity:1; transform:none;}
.logos.visible li:nth-child(2){transition-delay:.09s;}
.logos.visible li:nth-child(3){transition-delay:.18s;}
.logos.visible li:nth-child(4){transition-delay:.27s;}
@media(prefers-reduced-motion:reduce){
.logos li{opacity:1 !important; transform:none !important;}
}
/* ============================================================
CASOS REALES
============================================================ */
.casos{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:clamp(36px,5vw,54px);}
.caso{
background:var(--color-superficie); border:1px solid var(--color-borde);
border-radius:var(--radio); padding:24px 24px;
transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, opacity .3s ease;
}
/* La tarjeta reparte su alto: la cita empuja, y el pie se queda abajo del
todo aunque los testimonios midan distinto. Sin esto, en una fila de dos
las firmas quedarían a alturas diferentes. */
.caso{display:flex; flex-direction:column;}
.caso__cita{flex:1 1 auto;}
/* ---- cabecera: sector + localidad ---- */
.caso__cab{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:8px 12px; margin-bottom:14px;
}
/* Etiqueta de sector, un color por sector. Cada tono va a juego con el logo
de su cliente —marrón la placa de Cien Palacios, azul marino el bufete,
verde la cruz de Sica, coral el rótulo de Ana—, así que la fila de logos
de abajo y las etiquetas de arriba se responden.
Los tonos llegan por variables y no escritos en la regla: el modificador
solo cambia el trío texto/fondo/borde, y el bloque oscuro lo reescribe
entero sin repetir la geometría. Sin modificador, se cae a la paleta del
sitio. */
.caso__sector{
padding:4px 10px; border-radius:6px;
background:var(--tag-fondo, var(--color-fondo));
border:1px solid var(--tag-borde, var(--color-borde));
font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--tag-texto, var(--color-acento));
}
/* Claro: texto oscuro sobre tinte pálido. Todos por encima de 5,7:1, que
para un texto de .66rem en caja alta hace falta. */
.caso__sector--marron{--tag-texto:#7A4B1E; --tag-fondo:#FBF3E8; --tag-borde:#E8D5B8;}
.caso__sector--azul {--tag-texto:#1B3B6F; --tag-fondo:#EDF2FA; --tag-borde:#C6D4EA;}
.caso__sector--verde {--tag-texto:#0A6B4A; --tag-fondo:#EAF6F1; --tag-borde:#BFE2D4;}
.caso__sector--rosa {--tag-texto:#A83246; --tag-fondo:#FDEFF1; --tag-borde:#F3CDD4;}
/* Oscuro: se invierte el reparto. El tinte pálido del claro sobre una carta
negra sería un foco, así que el fondo baja a un tono muy apagado del
mismo color y el texto sube a la versión clara. */
:root[data-tema="oscuro"] .caso__sector--marron{--tag-texto:#E0B584; --tag-fondo:#2A1E11; --tag-borde:#4A3520;}
:root[data-tema="oscuro"] .caso__sector--azul {--tag-texto:#8FB6E8; --tag-fondo:#131E2E; --tag-borde:#2A3D57;}
:root[data-tema="oscuro"] .caso__sector--verde {--tag-texto:#6FD3AC; --tag-fondo:#0D2019; --tag-borde:#1F4438;}
:root[data-tema="oscuro"] .caso__sector--rosa {--tag-texto:#F49AA6; --tag-fondo:#2A1319; --tag-borde:#4C2630;}
.caso__lugar{
display:inline-flex; align-items:center; gap:4px;
font-size:.7rem; font-weight:400; color:var(--color-texto-sec);
}
.caso__lugar svg{width:12px; height:12px; flex:none;}
.caso__nombre{font-size:1.24rem; margin:0 0 12px; transition:color .3s ease;}
.caso:hover .caso__nombre{color:var(--color-acento);}
/* ---- pie: quién lo dice y a dónde lleva ---- */
.caso__pie{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:12px; margin-top:18px; padding-top:16px;
border-top:1px solid var(--color-borde);
}
.caso__autor{display:inline-flex; align-items:center; gap:10px; min-width:0;}
.caso__inicial{
display:inline-flex; align-items:center; justify-content:center; flex:none;
width:32px; height:32px; border-radius:50%;
background:linear-gradient(135deg, var(--color-acento), #3B3BDC);
color:#FFFFFF; font-size:.7rem; font-weight:700; letter-spacing:.02em;
}
.caso__autor b{font-size:.82rem; font-weight:700; color:var(--color-texto);}
.caso__web{
display:inline-flex; align-items:center; gap:5px; flex:none;
max-width:100%; padding:5px 10px; border-radius:8px;
background:var(--color-fondo); border:1px solid var(--color-borde);
font-size:.7rem; font-weight:700; color:var(--color-texto-sec);
text-decoration:none;
transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.caso__web span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.caso__web svg{width:12px; height:12px; flex:none;}
.caso__web:hover{
background:var(--color-acento-suave); border-color:var(--color-acento);
color:var(--color-acento);
}
/* Testimonio del cliente. blockquote + footer es el patrón que marca el
estándar para una cita con su atribución, y de paso lo lee bien un lector
de pantalla. El margen del blockquote se anula: lo trae el navegador. */
.caso__cita{margin:0; position:relative;}
.caso__cita p{margin:0; color:var(--color-texto-sec); font-size:.95rem;}
/* Comilla de adorno. Absoluta y sin peso en el flujo: marca que es una cita
sin robarle ni un píxel de alto a la tarjeta. */
.caso__cita::before{
content:'\201C';
position:absolute; left:-13px; top:-14px;
font-family:var(--serif); font-size:2.4rem; line-height:1;
color:var(--color-borde); pointer-events:none;
}
.caso__mini{
width:100%; height:auto; aspect-ratio:16/10;
object-fit:cover; object-position:top center;
border:1px solid var(--color-borde); border-radius:10px; margin-top:20px;
}
/* ------------------------------------------------------------
MÓVIL — los testimonios pasan a carrusel
En una columna, las cuatro tarjetas miden 2168px sobre los 702 que caben
en una carta de la pila: no es cuestión de apretar, sobra el triple. De
una en una sí entra.
El desplazamiento es scroll nativo con anclaje, no un track movido por
JavaScript. Con eso el gesto de deslizar con el dedo, la inercia y el
frenado los pone el sistema —imposible de igualar a mano— y los botones
se limitan a llamar a scrollTo. Sin scroll interceptado.
El corte va en 900px, no en 760: es donde ya cortan .rejilla-3 y la barra
móvil. Con 760 quedaba una franja entre 761 y 900 en la que casos seguía
en rejilla de dos columnas mientras la barra móvil ya ocupaba 77px por
abajo, y el bloque se salía 103px en un tablet de 768.
------------------------------------------------------------ */
@media(max-width:900px){
[data-carrusel]{
grid-template-columns:none;
grid-auto-flow:column; grid-auto-columns:100%;
gap:0;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scrollbar-width:none; -ms-overflow-style:none;
}
[data-carrusel]::-webkit-scrollbar{display:none;}
/* sin el hueco de la rejilla, el aire entre tarjetas lo da el propio
margen interior para que cada una llegue centrada al anclarse */
[data-carrusel] > *{
scroll-snap-align:center; scroll-snap-stop:always;
margin-inline:6px; width:calc(100% - 12px);
}
/* la fila de cuatro logos se convierte en el logo del cliente que se está
leyendo: identifica la tarjeta visible y ahorra tres filas de alto */
.logos{
grid-template-columns:1fr;
min-height:52px; margin:14px 0 10px;
}
.logos li{grid-area:1 / 1;} /* apilados: solo se ve el activo */
.logos li[hidden]{display:none;}
.logos img{height:44px;}
/* A color desde el primer momento y sin atenuar. En escritorio el logo
nace en gris y se enciende al pasar por encima; en táctil no hay «pasar
por encima», así que ese tratamiento lo dejaría apagado para siempre. */
#casos .logos img{filter:none; opacity:1;}
/* La tarjeta se aprieta lo justo para caber en una carta de la pila. Lo
que estaba inflado no era el testimonio sino los envoltorios: la
etiqueta de sector rompía en dos líneas (85px de cabecera) y el pie
envolvía el enlace bajo el autor (95px). */
#casos .caso{padding:16px 16px;}
#casos .caso__cab{gap:6px 8px; margin-bottom:8px;}
#casos .caso__sector{font-size:.6rem; padding:3px 8px; letter-spacing:.07em;}
/* La localidad se retira: en una columna caía en su propio renglón bajo
la etiqueta de sector y engordaba la cabecera sin aportar. En
escritorio sigue, alineada a la derecha del sector. */
#casos .caso__lugar{display:none;}
#casos .caso__nombre{font-size:1.05rem; margin-bottom:8px;}
#casos .caso__pie{
margin-top:12px; padding-top:10px;
flex-wrap:nowrap; gap:8px;
}
#casos .caso__inicial{width:26px; height:26px; font-size:.62rem;}
#casos .caso__autor b{font-size:.76rem;}
/* El enlace al dominio se retira: competía por el ancho con el nombre y
lo partía en tres líneas. El enlace sigue en el marcado para escritorio,
donde sí hay sitio. */
#casos .caso__web{display:none;}
/* la captura pasa a un recorte más panorámico: se sigue reconociendo la
portada —el object-position ya la ancla arriba— y baja de alto */
#casos .caso__mini{aspect-ratio:2/1; margin-top:14px;}
.carrusel-nav{
display:flex; align-items:center; justify-content:center; gap:18px;
margin-top:4px;
}
.carrusel-nav__flecha{
display:flex; align-items:center; justify-content:center; flex:none;
width:38px; height:38px; padding:0;
border:1px solid var(--color-borde); border-radius:50%;
background:var(--color-fondo); color:var(--color-texto);
cursor:pointer; transition:opacity .2s ease, border-color .2s ease;
}
.carrusel-nav__flecha svg{width:16px; height:16px;}
.carrusel-nav__flecha:disabled{opacity:.3; cursor:default;}
.carrusel-nav__puntos{display:flex; align-items:center; gap:8px;}
.carrusel-nav__punto{
width:7px; height:7px; padding:0; border:0; border-radius:50%;
background:var(--color-borde); cursor:pointer;
transition:background .25s ease, transform .25s ease;
}
.carrusel-nav__punto[aria-selected="true"]{background:var(--color-acento); transform:scale(1.35);}
}
/* ------------------------------------------------------------
Visor que persigue al cursor (solo con ratón).
La miniatura de cada fila desaparece: la imagen la lleva el visor.
------------------------------------------------------------ */
.caso-visor{display:none;}
@media (hover: hover) and (pointer: fine){
.caso__mini{display:none;}
.caso-visor{
display:block; position:fixed; top:0; left:0; z-index:80;
width:min(22vw, 290px); aspect-ratio:16/10;
pointer-events:none; opacity:0;
border:1px solid var(--color-borde); border-radius:var(--radio);
overflow:hidden; box-shadow:var(--sombra);
will-change:transform, opacity;
}
.caso-visor img{width:100%; height:100%; object-fit:cover; object-position:top center;}
/* Al recorrer la rejilla, la tarjeta apuntada se queda sola encendida.
Una sola regla, y no la pareja «apagar todas / encender la apuntada»
que había antes: aquella no funcionaba nunca. `.casos:hover .caso` son
tres selectores de clase (0,3,0) y `.caso:hover` solo dos (0,2,0), así
que la de apagar ganaba siempre y la apuntada no llegaba a encenderse.
Se apagaban las cuatro.
El :has() tampoco es adorno. Sin él bastaría con que el cursor estuviera
dentro de la rejilla, y al pasar por el hueco de 16px entre tarjetas no
hay ninguna apuntada: se apagarían las cuatro un instante en cada salto.
Así solo se apagan cuando de verdad hay una encendida. */
.casos:has(.caso:hover) .caso:not(:hover){opacity:.45;}
.caso:hover{transform:translateY(-4px);}
}
/* ============================================================
MÓVIL — zoom por capas (maqueta layered-zoom-scroll, portada)
Dos capas y una diferencia de escala: eso es todo el efecto. El chasis
va de 6× a 1× mientras la foto de dentro va de 1.35× a 1×; como no
encogen al mismo ritmo, la pantalla parece tener fondo. Lo conduce
ScrollTrigger desde main.js.
La foto NO se recorta a la zona de pantalla con medidas: cubre el marco
entero y va DETRÁS del chasis, que lleva la pantalla recortada. Es la
propia transparencia del archivo la que hace de máscara, así que las
esquinas redondeadas y el hueco del notch salen exactos sin que haya que
acertar ni un porcentaje — y siguen siendo exactos si algún día cambias
el mockup por otro.
============================================================ */
.movil{position:relative; z-index:2;}
.movil__escena{
height:100svh;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
/* el zoom llega a 6×: sin esto, el móvil ampliado desbordaría a los lados */
perspective:1400px;
/* El canto de arriba se disuelve mientras la escena sube. Sin esto, lo que
asciende sobre la carta de la FAQ es una pared de foto a sangre con una
línea horizontal perfectamente recta cruzando la pantalla, y ese filo es
lo que corta.
El porcentaje lo conduce main.js con el scroll: empieza difuminando el
tercio superior y llega a 0 justo cuando la escena se clava, para que
durante el zoom la foto se vea entera. En 0% el degradado pasa de
transparente a negro en el mismo punto, así que no enmascara nada. */
--difuminado:0%;
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--difuminado));
mask-image:linear-gradient(to bottom, transparent 0, #000 var(--difuminado));
}
.movil__marco{
position:relative;
width:min(820px, 92vw);
aspect-ratio:1935/958; /* la del archivo, ya recortado */
transform-origin:center center;
will-change:transform;
}
/* La foto ocupa EXACTAMENTE el hueco de la pantalla, no el marco entero.
Ese hueco se sacó inundando el alfa del chasis desde fuera, para separar
el recorte interior del contorno redondeado exterior. Sale 1523×706 sobre
un marco de 1600×792 — proporción 2.157, la misma que la imagen — y es
simétrico: 39px por la izquierda, 38 por la derecha.
El recorte hace falta aunque la imagen ya venga con sus esquinas
redondeadas: la capa contraescala desde 1.35×, así que sin él se derramaría
sobre el bisel durante todo el zoom. */
.movil__pantalla{
position:absolute;
inset:5.429% 2.375% 5.429% 2.438%;
overflow:hidden;
border-radius:3.88% / 8.1%; /* el radio propio de la imagen, en proporción */
}
.movil__pantalla img{
width:100%; height:100%; object-fit:cover;
transform-origin:center center;
will-change:transform;
}
.movil__chasis{
position:relative; z-index:1; /* por encima de la foto: aporta el notch */
width:100%; height:100%;
pointer-events:none;
}
/* ---- titular sobre la escena ----
Blanco con sombra y no con los colores del tema: esto no cae sobre el
fondo de la web, cae sobre la foto de la catedral —cielo claro y piedra
dorada— y ahí lo único que aguanta en los dos temas es blanco con un
apoyo oscuro detrás. */
.movil__texto{
position:absolute; inset:0; z-index:3;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:clamp(8px,1.4vh,16px);
padding:0 24px; text-align:center;
pointer-events:none; /* la inclinación 3D sigue funcionando debajo */
will-change:transform, opacity;
}
.movil__precio{
margin:0;
font-family:var(--display); font-weight:900;
font-size:clamp(2.8rem,8vw,6.5rem); line-height:.95;
letter-spacing:.01em; text-transform:uppercase;
color:#FFFFFF;
/* Cinco capas apiladas. No es exceso: las sombras se componen unas sobre
otras, así que tres halos anchos al 70-85% oscurecen la foto mucho más
que uno solo al 100%, y lo hacen de forma progresiva — el texto queda
sobre una mancha oscura difuminada en vez de sobre un recorte duro.
Las dos primeras capas dibujan el filo del glifo; las tres últimas
apagan la zona. */
text-shadow:0 1px 3px rgba(0,0,0,.95),
0 2px 16px rgba(0,0,0,.90),
0 6px 48px rgba(0,0,0,.85),
0 0 100px rgba(0,0,0,.80),
0 0 170px rgba(0,0,0,.70);
}
/* La nota del IVA: en Arimo y a un cuarto del cuerpo, para que lea como
apunte y no como parte de la cifra. En em y no en px para que encoja con
el titular en pantallas estrechas.
text-transform:none le devuelve la caja baja de «incl.», que si no se la
comería el uppercase del padre. */
.movil__precio small{
font-family:var(--texto); font-weight:400;
font-size:.24em; letter-spacing:0; text-transform:none;
white-space:nowrap;
}
.movil__lema{
/* Es un
por estructura del documento, no por estilo: estas tres
declaraciones neutralizan lo que la regla base h1,h2,h3 aportaría
(letter-spacing, text-wrap y el max-width de h2) para que se pinte
exactamente igual que cuando era un
. */
margin:0; letter-spacing:normal; text-wrap:wrap; max-width:none;
font-family:var(--texto); font-weight:400;
font-size:clamp(1.1rem,2.4vw,1.7rem); line-height:1.35;
color:#FFFFFF;
text-shadow:0 1px 3px rgba(0,0,0,.95),
0 2px 14px rgba(0,0,0,.90),
0 4px 36px rgba(0,0,0,.85),
0 0 80px rgba(0,0,0,.75),
0 0 130px rgba(0,0,0,.65);
}
/* Sin GSAP o con movimiento reducido no hay zoom: la escena deja de ocupar
una pantalla entera, el móvil se queda a su tamaño y el titular sale del
apilado para colocarse encima en el flujo, en vez de taparlo. */
@media(prefers-reduced-motion:reduce){
.movil__escena{height:auto; padding:clamp(48px,8vh,96px) 0; flex-direction:column; gap:32px;}
.movil__texto{position:static; inset:auto;}
.movil__precio,
.movil__lema{color:var(--color-texto); text-shadow:none;}
}
/* ============================================================
CITA
============================================================ */
.cita{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,44px); align-items:start;
background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio); padding:clamp(30px,4vw,48px);}
@media(max-width:760px){.cita{grid-template-columns:1fr;}}
.cita > .logo-mark{width:52px; color:var(--color-texto);}
.cita > .cita-logo{width:52px; flex:none;}
.cita blockquote{margin:0; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:.005em; line-height:1.3;}
.cita figcaption{margin-top:20px; font-family:var(--texto); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-texto-sec);}
/* ============================================================
FAQ — acordeón lateral (MAIBO accordion/acordeon-lateral)
Titular a la izquierda, preguntas a la derecha. Uno abierto cada vez.
============================================================ */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start;}
@media(max-width:900px){.faq{grid-template-columns:1fr; gap:32px;}}
.faq h2{max-width:none;}
/* min-width:0 evita que una palabra larga desborde la columna del grid */
.faq__lista{min-width:0;}
.faq__item{border-top:1px solid var(--color-borde);}
.faq__item:last-child{border-bottom:1px solid var(--color-borde);}
.faq__boton{
display:flex; width:100%; align-items:center; justify-content:space-between; gap:20px;
padding:20px 0; background:none; border:0; text-align:left; cursor:pointer;
color:var(--color-texto); font:inherit;
}
.faq__titulo{
font-family:var(--display); font-weight:500; letter-spacing:-.005em; line-height:1.35;
font-size:clamp(1.05rem,1.5vw,1.3rem);
transition:color .3s ease;
}
.faq__boton:hover .faq__titulo{color:var(--color-acento-hi);}
.faq__icono{
display:flex; width:28px; height:28px; flex:none;
align-items:center; justify-content:center; border-radius:50%;
background:var(--color-borde); color:var(--color-texto-sec);
transition:transform .5s cubic-bezier(.4,0,.2,1), background .3s ease, color .3s ease;
}
.faq__icono svg{width:11px; height:11px;}
.faq__boton[aria-expanded="true"] .faq__icono{
transform:rotate(225deg);
background:var(--color-acento); color:var(--color-fondo);
}
/* 0fr → 1fr: anima la altura sin conocerla de antemano */
.faq__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .7s cubic-bezier(.4,0,.2,1);}
.faq__panel.abierto{grid-template-rows:1fr;}
.faq__panel-int{overflow:hidden;}
.faq__texto{
margin:0; padding-bottom:34px; max-width:60ch;
color:var(--color-texto-sec); font-weight:400; font-size:1rem; line-height:1.65;
}
/* las palabras solo nacen ocultas si el JS va a animarlas */
.faq__texto.por-palabras span{display:inline-block; opacity:0;}
/* ============================================================
CINTA — barra fija en el borde inferior de la ventana
Visible desde la carga y durante todo el scroll, por encima de
las secciones. Dos bloques idénticos y un desplazamiento del 50%:
el bucle no tiene costura y no hace falta JavaScript.
Capas: cookies 90 · visor 80 · barra móvil 70 · CINTA 65 · barra 60 · secciones 1
============================================================ */
.cinta{
position:fixed; left:0; right:0; bottom:0; z-index:65;
height:var(--alto-cinta);
display:flex; align-items:center;
overflow:hidden; pointer-events:none;
/* isla oscura a propósito. Fondo opaco, no translúcido: sobre una web
blanca el negro al 85% se aguaría hasta un gris sucio. Sin
backdrop-filter, que sobre un fondo opaco solo gasta GPU.
El borde superior solo corta en oscuro, donde la cinta y la página
son ambas oscuras; en claro el token lo deja transparente. */
background:var(--cinta-fondo);
border-top:1px solid var(--cinta-borde, transparent);
transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
/* Al descubrirse el pie, la cinta se retira. Es lo único que le tapaba la
última franja, así que hasta aquí el pie no se había visto entero.
La clase la pone main.js al entrar .marco__fin en pantalla. */
body.pie-a-la-vista .cinta{transform:translateY(100%); opacity:0;}
/* sin la cinta debajo, la barra móvil baja a apoyarse en el borde en vez
de quedarse flotando sobre un hueco de 46px */
body.pie-a-la-vista .barra-movil{bottom:0;}
/* Sin animación CSS: la crea main.js con la Web Animations API y el
recorrido ya resuelto en píxeles. Con @keyframes + var() los fotogramas
quedaban resueltos en el compositor y no se enteraban del cambio. */
.cinta__tira{display:flex; align-items:center; width:max-content;}
.cinta__bloque{
display:flex; align-items:center; gap:clamp(18px,2.4vw,32px);
padding:0 clamp(9px,1.2vw,16px); white-space:nowrap;
font-family:var(--texto); font-size:.8rem; font-weight:400;
letter-spacing:.13em; text-transform:uppercase; color:var(--cinta-texto);
}
/* el separador recede para que manden las palabras */
.cinta__bloque i{font-style:normal; color:var(--cinta-sep); font-size:.9em;}
/* ============================================================
TARJETAS — gris Apple sobre negro, negro sobre gris.
Sin resplandores: la separación la dan el tono, el borde y el aire.
============================================================ */
.seccion{overflow:hidden;}
.seccion > .wrap{position:relative; z-index:1;}
.card{
border:1px solid var(--color-borde);
border-radius:var(--radio);
box-shadow:var(--sombra);
transition:border-color 300ms ease, transform 300ms ease, opacity .3s ease;
}
.card:hover{
border-color:var(--color-texto-sec);
transform:translateY(-4px);
}
/* sobre sección negra la tarjeta es gris; sobre sección gris, negra.
Así siempre destaca sin necesidad de resplandores. */
.seccion--b .card,
body.pila .seccion--b .card{background:var(--color-fondo);}
/* ============================================================
PIE + BARRA MÓVIL
============================================================ */
.letra-chica{font-family:var(--texto); font-size:.82rem; line-height:1.55; color:var(--color-texto-sec); margin:14px 0 0;}
.oculto-visual{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
/* Por defecto, el pie es el último bloque y ya está. */
.pie{
position:relative; z-index:0;
background:var(--color-fondo); border-top:1px solid var(--color-borde);
padding:40px 0 48px;
}
/* Revelado sticky: el pie se pega al fondo de la ventana desde el primer
momento y el contenido le pasa por encima; al acabar, queda a la vista.
Solo donde hay telón que lo tape, que es el .marco del índice. En las
páginas legales no existe, y allí el mismo sticky dejaba el pie clavado
al borde inferior desde el principio, por debajo del texto.
Se condiciona a la presencia del marco en vez de a una clase en el body
porque es exactamente de lo que depende: sin telón, no hay revelado. Así
ninguna página futura tiene que acordarse de marcarse. */
body:has(.marco) .pie{position:sticky; bottom:0;}
.pie .wrap{display:flex; flex-wrap:wrap; gap:20px 30px; justify-content:space-between; align-items:center;}
/* Dos líneas: arriba dónde estamos y cómo escribirnos, abajo lo legal.
Separarlas también separa lo que son: la primera es contacto, la segunda
navegación — por eso solo la segunda va en