/* ============================================================================
WE CREATIVE · sistema visual
----------------------------------------------------------------------------
El primario NO se eligió a ojo: son los píxeles del isotipo real.
Medido el 25-ago-2026 sobre wecreative-icon-512.png (109.413 px opacos):
#FF3E00 dominante, 17,33 % de los opacos, cuatro veces el segundo
hue de los naranjas saturados: 13,5-34,6 grados, mediana 16,2
Y de ahí sale la decisión de fondo oscuro. Contrastes medidos:
#FF3E00 sobre #12100F -> ~5,1:1 AA para texto normal
#FF3E00 sobre blanco -> 3,53:1 AA SOLO en texto grande
#D33A0C sobre blanco -> 4,79:1 AA para texto normal
El color de la marca rinde a plena saturación sobre oscuro. Sobre claro hay
que apagarlo para que se lea. Por eso el registro base es oscuro.
============================================================================ */
/* --- Tipografía self-hosted. Sin petición a Google en la carga. ----------- */
@font-face{
font-family:'Archivo';
src:url('fonts/archivo-latin.woff2') format('woff2');
font-weight:400 800; font-style:normal; font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Archivo';
src:url('fonts/archivo-latin-ext.woff2') format('woff2');
font-weight:400 800; font-style:normal; font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'DM Sans';
src:url('fonts/dmsans-latin.woff2') format('woff2');
font-weight:400 600; font-style:normal; font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'DM Sans';
src:url('fonts/dmsans-latin-ext.woff2') format('woff2');
font-weight:400 600; font-style:normal; font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* --- Tokens --------------------------------------------------------------- */
:root{
--brand-primary:#FF3E00;
--brand-primary-hover:#FF5A24;
--brand-primary-soft:rgba(255,62,0,.12);
--brand-primary-text:#D33A0C; /* el único naranja legible sobre claro */
--background:#12100F;
--surface:#1A1817;
--surface-elevated:#242120;
--text:#F5F2F0;
--text-muted:#A39C98;
--border:#2E2A28;
/* Registro claro, para las secciones que respiran */
--light-bg:#FAFAF8;
--light-surface:#FFFFFF;
--light-text:#1A1A1A;
--light-muted:#6B6B6B;
--light-border:#E4E0DC;
--f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
--f-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
/* Escala de espaciado: 4px de base, saltos que no se improvisan */
--s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
--s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
--maxw:1280px;
--gutter:clamp(1.25rem,5vw,4rem);
--radius:2px; /* casi recto: editorial, no "app" */
--ease:cubic-bezier(.22,.61,.36,1);
}
/* --- Reset y base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--background); color:var(--text);
font-family:var(--f-body); font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
line-height:1.65; -webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{
font-family:var(--f-display); font-weight:700;
line-height:1.02; letter-spacing:-.022em; margin:0; text-wrap:balance;
}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
/* Foco visible de verdad, en todo lo que se navega con teclado */
:where(a,button,input,textarea,select,summary):focus-visible{
outline:2px solid var(--brand-primary); outline-offset:3px; border-radius:var(--radius);
}
.skip{
position:absolute; left:var(--s4); top:-4rem; z-index:100;
background:var(--brand-primary); color:#fff; padding:var(--s3) var(--s5);
font-weight:600; transition:top .18s var(--ease);
}
.skip:focus{top:var(--s4)}
/* --- Layout --------------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(4rem,10vw,var(--s10))}
.section--light{background:var(--light-bg); color:var(--light-text)}
.section--light .kicker{color:var(--brand-primary-text)}
.section--light .muted{color:var(--light-muted)}
.muted{color:var(--text-muted)}
/* Kicker. SIN barra delante: la rayita decorativa se retiro el 25-ago a
peticion de Vincenzo. El rotulo se sostiene con caja alta y tracking. */
.kicker{
font-family:var(--f-body); font-size:.75rem; font-weight:600;
text-transform:uppercase; letter-spacing:.28em; color:var(--brand-primary);
margin-bottom:var(--s5);
}
.h-display{font-size:clamp(2.5rem,1.7rem + 3.6vw,4.75rem)}
.h-1{font-size:clamp(2.25rem,1.5rem + 3.4vw,4rem)}
.h-2{font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem)}
.h-3{font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem); letter-spacing:-.014em}
.lead{font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem); line-height:1.55; max-width:46ch}
/* --- Botones -------------------------------------------------------------- */
.btn{
display:inline-flex; align-items:center; gap:var(--s3);
padding:var(--s4) var(--s6); border:1px solid transparent; border-radius:var(--radius);
font-family:var(--f-body); font-weight:600; font-size:.9375rem;
text-decoration:none; cursor:pointer; white-space:nowrap;
transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn__arrow{transition:transform .22s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--primary{background:var(--brand-primary); color:#fff}
.btn--primary:hover{background:var(--brand-primary-hover)}
.btn--ghost{border-color:var(--border); color:var(--text)}
.btn--ghost:hover{border-color:var(--brand-primary); color:var(--brand-primary)}
.section--light .btn--ghost{border-color:var(--light-border); color:var(--light-text)}
.section--light .btn--ghost:hover{border-color:var(--brand-primary-text); color:var(--brand-primary-text)}
.arrowlink{
display:inline-flex; align-items:center; gap:var(--s2);
font-weight:600; font-size:.9375rem; text-decoration:none;
color:var(--brand-primary); border-bottom:1px solid transparent; padding-bottom:2px;
transition:border-color .18s var(--ease);
}
.arrowlink:hover{border-color:currentColor}
/* Target tactil: medido en un viewport de 371 px, los "Ver proyecto" salian a
28 px de alto. El minimo comodo son 44. En raton no cambia nada porque el
area crece hacia abajo, no el texto. */
@media(pointer:coarse){
.arrowlink{min-height:44px}
}
.section--light .arrowlink{color:var(--brand-primary-text)}
/* --- Cabecera ------------------------------------------------------------- */
.hdr{
position:sticky; top:0; z-index:50;
background:rgba(18,16,15,.82); backdrop-filter:blur(14px);
border-bottom:1px solid var(--border);
}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:72px}
.lockup{display:inline-flex; align-items:center; gap:var(--s3); text-decoration:none; flex:none}
.lockup img{width:30px; height:30px}
.lockup__txt{
font-family:var(--f-display); font-weight:700; font-size:1.25rem;
letter-spacing:-.02em; color:var(--text);
}
.lockup__txt em{font-style:normal; color:var(--brand-primary)}
.nav{display:flex; align-items:center; gap:var(--s6)}
.nav a{
text-decoration:none; font-size:.9375rem; font-weight:500; color:var(--text-muted);
transition:color .18s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
/* `.nav a` es (0,1,1) y `.btn--primary` (0,1,0): sin esto el boton del menu salia
con el texto naranja sobre fondo naranja. Cazado mirando la pantalla. */
.nav a.btn--primary{color:#fff}
.nav a.btn--ghost{color:var(--text)}
.hdr .btn{padding:var(--s3) var(--s5)}
.navtoggle{
display:none; background:none; border:1px solid var(--border); border-radius:var(--radius);
padding:var(--s3); cursor:pointer;
}
.navtoggle span{display:block; width:20px; height:2px; background:var(--text); margin:3px 0}
/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative; padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5rem); overflow:hidden}
.hero__grid{display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center}
@media(min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero h1{margin-bottom:var(--s5)}
.hero h1 .l2{display:block; color:var(--brand-primary)}
.hero .lead{margin-bottom:var(--s7)}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s4)}
/* La cinta: motivo derivado del isotipo. Es la firma gráfica, no un adorno
de stock, y por eso vive detrás del hero y no en una esquina cualquiera. */
.hero__ribbon{
position:absolute; inset:auto -12% -30% auto; width:min(70vw,780px);
opacity:.10; pointer-events:none; z-index:0;
}
.hero__grid,.hero .wrap{position:relative; z-index:1}
/* Composición de capturas reales, en capas y a distintas profundidades */
.stack{position:relative; aspect-ratio:4/3.4; min-height:min(56vw,460px)}
.stack__item{
position:absolute; border-radius:var(--radius); overflow:hidden;
border:1px solid var(--border); background:var(--surface);
box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
}
.stack__item img{width:100%; height:100%; object-fit:cover; object-position:top center}
.stack__item:nth-child(1){inset:0 22% 26% 0; z-index:3}
.stack__item:nth-child(2){inset:14% 0 8% 34%; z-index:2}
.stack__item:nth-child(3){inset:auto 46% 0 6%; height:38%; z-index:4}
@media(prefers-reduced-motion:no-preference){
.stack__item{transition:transform .5s var(--ease)}
.stack:hover .stack__item:nth-child(1){transform:translate(-6px,-6px)}
.stack:hover .stack__item:nth-child(2){transform:translate(6px,4px)}
.stack:hover .stack__item:nth-child(3){transform:translate(-4px,8px)}
}
/* --- Marquesina de prueba social ------------------------------------------ */
.proof{border-block:1px solid var(--border); padding-block:var(--s7); background:var(--surface)}
.proof__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s4) var(--s6); margin-bottom:var(--s6)}
.proof__head .kicker{margin-bottom:0}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex; gap:var(--s5); width:max-content}
@media(prefers-reduced-motion:no-preference){
.marquee__track{animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Sin caja. Una tira de logotipos NO lleva marco: el recuadro convierte una
marca en una etiqueta, y con ocho seguidos se lee como una tabla. El logo va
suelto sobre el fondo, que es como se leen los muros de clientes. */
.chip{
display:flex; align-items:center; gap:var(--s3); flex:none;
padding:var(--s3) var(--s2); text-decoration:none;
}
/* Los PNG salen blancos y con alfa, asi que el tono lo decide aqui el CSS: un
cambio de registro no obliga a regenerar los ocho archivos. Y bajados de
opacidad a proposito — son la prueba, no el protagonista. */
.chip__logo{
height:30px; width:auto; display:block;
opacity:.55; transition:opacity .22s var(--ease);
}
.marquee:hover .chip__logo{opacity:.82}
@media(prefers-reduced-motion:reduce){.chip__logo{transition:none}}
.chip__name{font-family:var(--f-display); font-weight:600; font-size:1rem; letter-spacing:-.01em}
.chip__sector{font-size:.8125rem; color:var(--text-muted)}
/* --- Capacidades: tres bloques grandes, no nueve tarjetas ----------------- */
.caps{display:grid; gap:1px; background:var(--light-border); border-block:1px solid var(--light-border)}
.section--light:has(.caps){padding-bottom:0}
@media(min-width:900px){
.caps{grid-template-columns:repeat(3,1fr)}
/* La ultima tarjeta se estira si su fila quedaria a medias: con 5 en 3
columnas, la 5a dejaba una celda gris que parecia un fallo. */
.caps > :last-child:nth-child(3n+2){grid-column:span 2}
}
.cap{background:var(--light-bg); padding:clamp(2rem,4vw,3rem); display:flex; flex-direction:column; gap:var(--s4)}
.cap h3{color:var(--light-text)}
.cap__list{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s2)}
.cap__list{padding-left:1.05em; list-style:disc}
.cap__list li{font-size:.9375rem; color:var(--light-muted); line-height:1.5}
.cap__list li::marker{color:var(--brand-primary)}
.cap .arrowlink{margin-top:auto; padding-top:var(--s4)}
/* --- Mosaico de capacidades (solo la home) --------------------------------
Un mosaico, no cinco tarjetas. Componente APARTE de `.caps` porque esa clase
la usan seis plantillas y redibujarla habria cambiado paginas que nadie pidio
tocar.
Teselas OSCURAS sobre seccion clara, y no por gusto: el naranja de marca rinde
5,1:1 sobre #12100F y solo 3,53:1 sobre blanco (medido, cabecera de este
archivo). Los numeros grandes en naranja solo se leen bien sobre oscuro.
-------------------------------------------------------------------------- */
.mos__head{display:grid; gap:var(--s5); margin-bottom:clamp(2rem,4vw,3.5rem)}
@media(min-width:900px){
.mos__head{grid-template-columns:1.25fr .75fr; align-items:start; gap:var(--s8)}
/* El texto lateral baja hasta la altura de la segunda linea del titular: a
ras del borde superior competia con el, y pegado abajo se descolgaba. */
.mos__side{margin-top:clamp(3.5rem,7vw,6rem)}
}
/* Sin tope de ancho: el corte lo decide el
de la plantilla, que es donde
Vincenzo lo quiere. Con `max-width` en ch, «Cinco capacidades,» se partia en
dos y salian tres lineas donde deben ir dos. */
.mos__h{text-wrap:balance}
/* Peso, no cursiva: ver el comentario de la plantilla. */
.mos__h-alt{font-weight:400}
.mos__side{font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem); line-height:1.6; max-width:34ch}
/* El hueco es pequeno a proposito: con separaciones grandes vuelven a leerse
como cinco tarjetas sueltas, que es justo lo que se queria quitar. */
.mos{display:grid; gap:clamp(6px,.7vw,12px)}
@media(min-width:900px){
.mos{grid-template-columns:repeat(3,1fr)}
/* La tesela ANCHA es la que tiene foto, no la que no la tiene. Antes la
doble era la 04 (IA), sin imagen: el hueco mas grande del mosaico era
justo el mas vacio. Y la foto de la 01 mide 520x390 -apaisada- metida en
una tesela casi cuadrada, asi que se recortaba de lado.
Con esto la lectura dice ademas algo verdadero: arriba el trabajo hecho,
que se ENSENA; debajo la banda de lo que se explica. */
.mos__t--web{grid-column:span 2}
}
@media(min-width:560px) and (max-width:899px){
.mos{grid-template-columns:repeat(2,1fr)}
.mos__t--web{grid-column:span 2}
}
.mos__t{
position:relative; overflow:hidden; isolation:isolate;
display:block; min-height:clamp(230px,25vw,360px);
background:var(--background); color:var(--text);
border-radius:var(--radius); text-decoration:none;
}
/* Las tres sin foto forman UNA banda, no tres superficies distintas. El
escalonado anterior -surface / elevated / surface- era invisible: #1A1817
contra #242120 sobre un fondo #12100F no se distingue. Un comentario que
promete un ritmo que el CSS no hace es peor que no tenerlo. */
.mos__t--tipo{background:var(--surface)}
/* Y se sostienen con TIPOGRAFIA, que es su unica materia: el titular sube de
cuerpo y ocupa el sitio que en las otras ocupa la foto. Por eso tampoco
necesitan el alto de una tesela con imagen: conservandolo, el
`margin-top:auto` del cuerpo deja arriba un vacio negro de media tesela,
que es exactamente como se veian antes de esto. */
.mos__t--tipo{min-height:clamp(198px,16vw,258px)}
.mos__t--tipo .mos__title{
font-size:clamp(1.3rem,1.05rem + 1vw,1.95rem); max-width:19ch; margin-bottom:var(--s3);
}
.mos__t--tipo .mos__body{gap:var(--s4)}
/* Sin `z-index:-1`. Con `isolation:isolate` en la tesela, un indice negativo
manda la foto DETRAS del fondo de su propio padre y desaparece: pasó, y en la
primera captura las dos teselas con foto salian planas. El orden del DOM ya
basta — la foto va antes que el cuerpo— y el cuerpo se eleva con z-index 1. */
.mos__img{position:absolute; inset:0}
.mos__img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease)}
/* El velo NO es un degradado decorativo: es lo que reparte la tesela en dos.
Arriba casi transparente, para que la foto se vea de verdad. Del 60 % hacia
abajo casi opaco, porque ahi vive el titular y tiene que ganar SIEMPRE, sea
cual sea la foto que se ponga manana.
Con un velo plano al 45-70 % pasaba lo que se vio en la primera prueba: el
logotipo del cliente y su propio menu competian con nuestro texto y la tesela
parecia una captura pegada, no una pieza. */
/* Tres bandas, no un degradado de arriba abajo:
0-10 % OPACO. Las capturas de cliente traen su propia barra de navegacion
pegada al borde (medido: 47 px de 764 en amancaes, un 6 %). Sin
enterrarla, dentro de nuestra tesela se lee el menu de OTRA marca.
10-55 % la foto, casi limpia. Es la unica franja que se ve, y por eso el
encuadre de cada imagen se ajusta para poner ahi lo que importa.
55-100 % OPACO otra vez: aqui vive el titular y tiene que ganar siempre.
Un velo plano dejaba el logotipo del cliente compitiendo con el nuestro. */
.mos__img::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg,
rgba(18,16,15,.94) 0%,
rgba(18,16,15,.56) 10%,
rgba(18,16,15,.28) 26%,
rgba(18,16,15,.74) 46%,
rgba(18,16,15,.95) 60%,
rgba(18,16,15,.98) 100%);
}
/* 01 · velo mas ligero, y con motivo. La banda opaca de arriba existe para
enterrar la interfaz del cliente —su menu, su logotipo— cuando la imagen es
una captura de pantalla. Esta NO lo es: es la foto de portada de la web de
Mila, sin texto ni marca dentro. Aplicarle el velo de tres bandas dejaba ver
solo el humo y enterraba el sujeto. Aqui basta con oscurecer donde va el
texto.
Pero la franja del NUMERO sigue opaca, y eso no es gusto: medido, el pixel
mas claro que cae bajo el «01» es (255,255,211). El naranja de marca sobre
el da **1,00:1** — el numero desaparece. WCAG pide 3,0:1 para texto grande,
y para llegar hace falta **0,82 de velo** sobre ese pixel. Asi que el cuarto
superior se queda oscuro y la imagen se abre justo debajo. */
.mos__t--web .mos__img::after{
background:linear-gradient(180deg,
rgba(18,16,15,.88) 0%,
rgba(18,16,15,.86) 25%,
rgba(18,16,15,.24) 38%,
rgba(18,16,15,.70) 54%,
rgba(18,16,15,.94) 74%,
rgba(18,16,15,.97) 100%);
}
.mos__t--web .mos__img img{object-position:center 46%}
/* 02 · el logotipo real de un cliente. `contain` y no `cover` porque una marca
recortada deja de ser una marca.
El archivo original es un cuadrado de 1000x1000 con el logotipo ocupando el
10 % del alto —medido—, asi que con `contain` su posicion dependia del alto
de la tesela, y el alto es un `clamp()`: a 1920 caia bien y a 768 se solapaba
con el texto. Recortado a su caja de tinta, el logotipo ES la imagen y se
coloca igual a cualquier ancho.
El fondo de la tesela se iguala al del archivo —#0B0B0B, medido en sus cuatro
esquinas— para que la junta de `contain` no se vea. */
.mos__t--branding{background:#0B0B0B}
.mos__t--branding .mos__img{inset:0 0 auto; height:52%}
.mos__t--branding .mos__img img{object-fit:contain; object-position:center 62%; padding:0 16%}
/* Y el velo casi desaparece aqui: el logotipo esta en su propia franja, encima
del texto y no detras, asi que no hay nada que proteger. Con el velo general
se veia gris sucio. */
.mos__t--branding .mos__img::after{background:linear-gradient(180deg,rgba(18,16,15,.55) 0%,rgba(18,16,15,0) 24%,rgba(18,16,15,0) 72%,rgba(11,11,11,1) 100%)}
/* Debajo de 900 px la tesela mide ~250 px de alto y el logotipo, que se ajusta
al ANCHO, se comia el 59 % de ella y se metia debajo del titular. Medido en
390 y en 768. No cabe, y estirar numeros para que quepa se rompe al
siguiente ancho: en movil la tesela se sostiene con tipografia, como sus
tres hermanas sin foto. */
@media(max-width:899px){
.mos__t--branding .mos__img{display:none}
/* Sin su imagen, esta tesela ES tipografica: mismo alto y mismo cuerpo, o
arrastra su fila entera y reaparece el vacio que acabamos de quitar. */
.mos__t--branding{min-height:clamp(198px,16vw,258px)}
.mos__t--branding .mos__title{font-size:clamp(1.3rem,1.05rem + 1vw,1.95rem); max-width:19ch}
}
.mos__body{
position:relative; z-index:1; display:flex; flex-direction:column; height:100%;
min-height:inherit; gap:var(--s5);
padding:clamp(1.35rem,2.2vw,2rem);
}
.mos__top{display:flex; align-items:baseline; gap:var(--s3)}
.mos__num{
font-family:var(--f-display); font-weight:700; line-height:1;
font-size:clamp(1.75rem,1.2rem + 1.5vw,2.75rem);
color:var(--brand-primary); letter-spacing:-.02em;
}
.mos__label{
font-family:var(--f-body); font-size:.75rem; font-weight:600;
text-transform:uppercase; letter-spacing:.22em; color:var(--text);
}
.mos__mid{margin-top:auto; display:block}
.mos__title{
font-family:var(--f-display); font-weight:600; color:var(--text);
font-size:clamp(1.125rem,1rem + .6vw,1.5rem); line-height:1.2; letter-spacing:-.015em;
margin:0 0 var(--s3); max-width:22ch; text-wrap:balance;
}
.mos__text{
display:block; font-size:.9375rem; line-height:1.55;
color:var(--text-muted); max-width:44ch;
}
.mos__cta{
display:inline-flex; align-items:center; gap:var(--s2);
font-weight:600; font-size:.875rem; color:var(--brand-primary);
}
.mos__arrow{transition:transform .22s var(--ease)}
/* Hover: solo donde hay raton. En tactil nada de esto aplica y el bloque se lee
igual, que es el requisito de movil. */
@media(hover:hover) and (pointer:fine){
.mos__cta{opacity:.75}
.mos__mid,.mos__cta{transition:opacity .22s var(--ease),transform .32s var(--ease)}
.mos__t:hover .mos__img img{transform:scale(1.045)}
.mos__t:hover .mos__mid,
.mos__t:hover .mos__cta{transform:translateY(-4px)}
.mos__t:hover .mos__cta{opacity:1}
.mos__t:hover .mos__arrow{transform:translateX(4px)}
}
.mos__t:focus-visible{outline:2px solid var(--brand-primary); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
.mos__img img,.mos__mid,.mos__cta,.mos__arrow{transition:none}
.mos__t:hover .mos__img img{transform:none}
.mos__t:hover .mos__mid,.mos__t:hover .mos__cta{transform:none}
}
/* --- Casos: editorial, no cuadrícula -------------------------------------- */
.case{display:grid; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding-block:clamp(2.5rem,6vw,var(--s9))}
@media(min-width:900px){
.case{grid-template-columns:1.15fr .85fr}
.case:nth-child(even) .case__media{order:2}
}
.case + .case{border-top:1px solid var(--border)}
.case__media{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface)}
.case__media img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center}
@media(prefers-reduced-motion:no-preference){
.case__media img{transition:transform .6s var(--ease)}
.case:hover .case__media img{transform:scale(1.03)}
}
.case__sector{font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--s3)}
.case h3{margin-bottom:var(--s4)}
.case__line{color:var(--text-muted); margin-bottom:var(--s5); max-width:44ch}
.case__pending{font-size:.8125rem; color:var(--text-muted); font-style:italic}
/* --- Diferencial: bloque a sangre, el único naranja pleno ----------------- */
.diff{background:var(--brand-primary); color:#fff}
.diff .kicker{color:rgba(255,255,255,.78)}
.diff h2{margin-bottom:var(--s5); max-width:18ch}
.diff h2 span{display:block; color:rgba(255,255,255,.62)}
.diff p{max-width:52ch; color:rgba(255,255,255,.92)}
/* --- Proceso -------------------------------------------------------------- */
.steps{display:grid; gap:1px; background:var(--border); margin-top:var(--s7)}
@media(min-width:760px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{background:var(--background); padding:var(--s6) var(--s5); display:flex; flex-direction:column; gap:var(--s3)}
.step h3{font-size:1.125rem}
.step p{font-size:.875rem; color:var(--text-muted); line-height:1.55}
/* --- Demo y contacto ------------------------------------------------------ */
.panel{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:clamp(2rem,5vw,var(--s8));
}
.panel h2{margin-bottom:var(--s4)}
.panel p{color:var(--text-muted); max-width:52ch; margin-bottom:var(--s6)}
.form{display:grid; gap:var(--s4); max-width:38rem}
@media(min-width:640px){.form__row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}}
.field{display:flex; flex-direction:column; gap:var(--s2)}
.field label{font-size:.8125rem; font-weight:600; letter-spacing:.04em; color:var(--text-muted)}
.field input,.field textarea{
background:var(--background); border:1px solid var(--border); border-radius:var(--radius);
color:var(--text); padding:var(--s4); font-family:var(--f-body); font-size:1rem;
transition:border-color .18s var(--ease);
}
.field input:focus,.field textarea:focus{border-color:var(--brand-primary)}
.field textarea{min-height:8rem; resize:vertical}
/* --- Pie ------------------------------------------------------------------ */
.ftr{border-top:1px solid var(--border); padding-block:var(--s8) var(--s6); background:var(--surface)}
.ftr__grid{display:grid; gap:var(--s7); margin-bottom:var(--s8)}
@media(min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr .lockup img{width:46px; height:46px}
.ftr .lockup__txt{font-size:1.75rem}
.ftr h2{
font-family:var(--f-body); font-size:.75rem; font-weight:600; text-transform:uppercase;
letter-spacing:.2em; color:var(--text-muted); margin-bottom:var(--s4);
}
.ftr ul{display:flex; flex-direction:column; gap:var(--s3)}
.ftr a{text-decoration:none; font-size:.9375rem; color:var(--text-muted); transition:color .18s var(--ease)}
.ftr a:hover{color:var(--brand-primary)}
.ftr__legal{
border-top:1px solid var(--border); padding-top:var(--s5);
display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); justify-content:space-between;
font-size:.8125rem; color:var(--text-muted);
}
/* --- Reveal: con failsafe. Lección de Mila -------------------------------- */
/* Sin el failsafe de app.js, en pestaña de fondo el IntersectionObserver no
dispara y la sección se queda en negro. La visibilidad NUNCA se gatea solo
en el observer. */
.js .rev{opacity:0; transform:translateY(18px)}
@media(prefers-reduced-motion:no-preference){
.js .rev{transition:opacity .6s var(--ease),transform .6s var(--ease)}
}
.js .rev.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
.js .rev{opacity:1; transform:none}
*,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important}
}
/* --- Móvil: decisiones propias, no un desktop encogido -------------------- */
@media(max-width:860px){
.nav{
position:fixed; inset:72px 0 auto; flex-direction:column; align-items:stretch; gap:0;
background:var(--background); border-bottom:1px solid var(--border);
padding:var(--s4) var(--gutter) var(--s6); display:none;
}
.nav[data-open="true"]{display:flex}
.nav a{padding:var(--s4) 0; border-bottom:1px solid var(--border); font-size:1.0625rem}
.nav .btn{margin-top:var(--s5); justify-content:center}
.navtoggle{display:block}
/* En móvil la pila de capturas se convierte en una sola imagen ancha:
tres capas superpuestas en 360px no se leen, se emborronan. */
.stack{aspect-ratio:16/11}
.stack__item:nth-child(1){inset:0; z-index:3}
.stack__item:nth-child(2),.stack__item:nth-child(3){display:none}
.hero__cta .btn{flex:1 1 100%; justify-content:center}
}
/* --- Planes y precios ------------------------------------------------------
Cuatro tarjetas caben en fila a partir de 1100px; a 760 pasan a dos; en
movil una. La destacada no crece de tamano (eso descoloca la rejilla): se
distingue por borde y etiqueta, que se lee igual en las tres anchuras. */
.plans{
display:grid; gap:var(--s4); margin-top:var(--s7);
grid-template-columns:1fr;
}
@media(min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.plans{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.plan{
display:flex; flex-direction:column; gap:var(--s3);
padding:var(--s6) var(--s5); border:1px solid var(--border);
border-radius:var(--radius); background:var(--surface); position:relative;
}
.plan--featured{border-color:var(--brand-primary); background:var(--surface-elevated)}
.plan__tag{
position:absolute; top:0; right:var(--s5); transform:translateY(-50%);
background:var(--brand-primary); color:#fff; font-size:.6875rem; font-weight:600;
letter-spacing:.12em; text-transform:uppercase; padding:.25rem .625rem; border-radius:var(--radius);
}
.plan__name{font-family:var(--f-display); font-size:1.25rem; letter-spacing:-.012em}
.plan__sub{font-size:.8125rem; color:var(--text-muted); margin-top:-.35rem}
.plan__price{
font-family:var(--f-display); font-weight:700; font-size:2.25rem;
letter-spacing:-.03em; color:var(--brand-primary); margin-block:var(--s2) var(--s3);
}
.plan__suffix{font-size:.875rem; font-weight:500; color:var(--text-muted); letter-spacing:0}
.plan__list{display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s5)}
.plan__list{padding-left:1.05em; list-style:disc}
.plan__list li{font-size:.875rem; color:var(--text-muted); line-height:1.5}
.plan__list li::marker{color:var(--brand-primary)}
.plan__cta{margin-top:auto; justify-content:center}
.plan__note{
margin-top:var(--s6); font-size:.875rem; max-width:64ch;
}
/* Registro claro */
.section--light .plan{background:var(--light-surface); border-color:var(--light-border)}
.section--light .plan--featured{border-color:var(--brand-primary-text)}
.section--light .plan__name{color:var(--light-text)}
.section--light .plan__price{color:var(--brand-primary-text)}
.section--light .plan__sub,.section--light .plan__list li,.section--light .plan__note{color:var(--light-muted)}
.section--light .plan__tag{background:var(--brand-primary-text)}
/* --- FAQ ------------------------------------------------------------------
nativo: cero JavaScript, accesible por teclado de serie y el
contenido esta en el HTML aunque este plegado, que es lo que exige
FAQPAGE_ANSWER_NOT_VISIBLE. */
.faq{display:grid; gap:0; margin-top:var(--s7); border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
padding:var(--s5) 0; cursor:pointer; list-style:none;
font-family:var(--f-display); font-weight:600; font-size:1.0625rem; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:'+'; font-family:var(--f-body); font-size:1.5rem; color:var(--brand-primary);
line-height:1; flex:none; transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding-bottom:var(--s5); color:var(--text-muted); max-width:64ch; font-size:.9375rem}
.section--light .faq{border-color:var(--light-border)}
.section--light .faq details{border-color:var(--light-border)}
.section--light .faq summary::after{color:var(--brand-primary-text)}
.section--light .faq p{color:var(--light-muted)}
/* --- Prosa de las paginas de servicio -------------------------------------
Medida de linea corta (62ch) y bloques separados por regla fina: el texto
largo se abandona cuando la linea es ancha, no cuando el texto es largo. */
.prosa{margin-top:var(--s7); max-width:62ch}
.prosa__b + .prosa__b{margin-top:var(--s7); padding-top:var(--s7); border-top:1px solid var(--border)}
.prosa h3{
font-size:clamp(1.125rem,1rem + .5vw,1.375rem); letter-spacing:-.012em;
margin-bottom:var(--s4); text-wrap:balance;
}
.prosa p + p{margin-top:var(--s4)}
.prosa p{color:var(--text-muted); line-height:1.7}
.section--light .prosa__b + .prosa__b{border-color:var(--light-border)}
.section--light .prosa h3{color:var(--light-text)}
.section--light .prosa p{color:var(--light-muted)}
/* --- Conmutador de idioma --------------------------------------------------
Lo renderiza el motor (`{{{lang_switch}}}`). Sin el, las paginas del segundo
idioma no reciben NI UN enlace entrante y salen como huerfanas: es lo que
destapo ORPHAN_ZERO_INLINKS al auditar el sitio bilingue entero. */
.lang-switch{position:relative; display:flex; align-items:center; gap:var(--s2)}
.lang-switch__btn,.lang-switch > button{
display:inline-flex; align-items:center; gap:var(--s2);
background:none; border:1px solid var(--border); border-radius:var(--radius);
color:var(--text-muted); padding:var(--s2) var(--s3);
font-family:var(--f-body); font-size:.8125rem; font-weight:600; cursor:pointer;
transition:border-color .18s var(--ease),color .18s var(--ease);
}
.lang-switch__btn:hover,.lang-switch > button:hover{border-color:var(--brand-primary); color:var(--text)}
.lang-switch a{
display:flex; align-items:center; gap:var(--s2);
padding:var(--s3) var(--s4); text-decoration:none;
font-size:.875rem; color:var(--text-muted); white-space:nowrap;
}
.lang-switch a:hover{color:var(--text)}
.lang-switch a[aria-current="true"]{color:var(--brand-primary); font-weight:600}
.lang-switch [role="menu"]{
position:absolute; top:calc(100% + var(--s2)); right:0; z-index:60;
background:var(--surface-elevated); border:1px solid var(--border);
border-radius:var(--radius); min-width:9rem; padding:var(--s2) 0;
box-shadow:0 12px 32px -12px rgba(0,0,0,.7);
}
.flag-wrap{display:inline-flex; width:1.1rem}
@media(max-width:860px){
.lang-switch{order:-1; margin-bottom:var(--s4)}
.lang-switch [role="menu"]{position:static; box-shadow:none; border:0; padding:0}
}
.langlink{
font-size:.8125rem; font-weight:600; text-decoration:none; color:var(--text-muted);
border:1px solid var(--border); border-radius:var(--radius); padding:var(--s2) var(--s3);
transition:border-color .18s var(--ease),color .18s var(--ease); white-space:nowrap;
}
.langlink:hover{border-color:var(--brand-primary); color:var(--text)}
@media(max-width:860px){.langlink{align-self:flex-start; margin-top:var(--s4)}}
/* --- Paginas legales -------------------------------------------------------
Cuatro clases que el partial `_legal` usaba y aqui no existian: se vio
abriendo la pagina, no leyendo el HTML. Y el h2 hereda del h3 de `.prosa`
porque en un legal el encabezado de bloque ES un h2 (cuelga del h1 de la
pagina), mientras en una de servicio cuelga de un h2 de seccion. */
.prosa h2{
font-size:clamp(1.125rem,1rem + .5vw,1.375rem); letter-spacing:-.012em;
margin-bottom:var(--s4); text-wrap:balance;
}
.prosa__ul{margin-top:var(--s4); padding-left:1.15em; list-style:disc}
.prosa__ul li{color:var(--text-muted); line-height:1.7; margin-top:var(--s2)}
.prosa__ul li::marker{color:var(--brand-primary)}
.prosa__ul a{color:var(--text); text-decoration:underline; text-underline-offset:3px}
/* La tabla de cookies es el unico dato tabular del sitio. Desborda sola en su
caja: el cuerpo de la pagina nunca puede tener barra horizontal. */
.tablewrap{margin-top:var(--s5); overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius)}
.tabla{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:34rem}
.tabla th,.tabla td{padding:var(--s3) var(--s4); text-align:left; vertical-align:top; border-bottom:1px solid var(--border)}
.tabla th{color:var(--text); font-weight:600; white-space:nowrap; background:var(--surface)}
.tabla td{color:var(--text-muted); line-height:1.6}
.tabla tr:last-child td{border-bottom:0}
.legal__upd{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--border); font-size:.875rem}
/* Sin `lead` bajo el h1, el hero de un legal dejaba ~230 px de vacio antes del
primer bloque. Se recorta ahi, no en el hero general. */
.hero--legal{padding-block:clamp(3.5rem,9vw,7rem) 0}
.hero--legal h1{margin-bottom:0}
.section--legal{padding-block:var(--s7) clamp(4rem,8vw,6rem)}
.section--legal .prosa{margin-top:0}
/* Los tres enlaces de cierre de un legal. Un documento legal no enlaza a
ninguna parte por naturaleza, y eso lo convierte en callejon sin salida:
`DEAD_END_PAGE` y `FOOTER_ONLY_CONNECTIVITY` lo dijeron con silo limpio. */
.legal__rel{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--border);
display:flex; flex-wrap:wrap; gap:var(--s5) var(--s6); align-items:baseline}
.legal__rel .kicker{flex-basis:100%; margin-bottom:0}
/* --- Firma de autoria ------------------------------------------------------
`MISSING_AUTHOR_BLOCK`: una pagina de servicio sin firma visible no le da al
lector a quien atribuir lo que lee. */
.section--firma{padding-block:0 clamp(4rem,8vw,6rem)}
.firma{max-width:62ch; padding-top:var(--s6); border-top:1px solid var(--border)}
.firma__l{margin:var(--s4) 0; color:var(--text-muted); line-height:1.7}
.firma__n{color:var(--text); font-weight:600}
/* --- Formulario: trampa y estado -------------------------------------------
La trampa NO usa display:none: hay bots que ignoran los campos ocultos asi.
Se saca del viewport, que la deja invisible y rellenable. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formstate{
margin-bottom:var(--s5); padding:var(--s4) var(--s5); border-radius:var(--radius);
border:1px solid var(--border); line-height:1.6;
}
.formstate--ok{border-color:var(--brand-primary); color:var(--text)}
.formstate--mal{color:var(--text-muted)}
/* --- Blog -------------------------------------------------------------------
El indice y la ficha de entrada. Reutiliza `.prosa` y las clases de legal:
una entrada y un aviso legal son la misma forma —texto largo con
encabezados— y no merecen dos sistemas. */
.post__meta{font-size:.875rem; margin-top:var(--s4)}
.postcard + .postcard{margin-top:var(--s7); padding-top:var(--s7); border-top:1px solid var(--border)}
.postcard h2{font-size:clamp(1.25rem,1.05rem + .75vw,1.625rem); letter-spacing:-.015em; margin:var(--s3) 0 var(--s4)}
.postcard h2 a{color:var(--text); text-decoration:none}
.postcard h2 a:hover{color:var(--brand-primary)}
.postcard p{color:var(--text-muted); line-height:1.7; margin-bottom:var(--s4)}
.post .prosa p a,.post .prosa li a{color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--brand-primary)}
.post .prosa p a:hover,.post .prosa li a:hover{color:var(--brand-primary)}
/* --- Configurador -----------------------------------------------------------
Una columna de grupos y una barra de total que se queda pegada abajo: el
importe tiene que estar a la vista mientras se elige, no al final del scroll. */
.cfg{max-width:44rem}
.cfg__g{border:0; padding:0; margin:0 0 var(--s7)}
.cfg__h{padding:0; margin-bottom:var(--s4); font-family:var(--f-display); font-weight:600;
font-size:1.0625rem; letter-spacing:-.01em}
.cfg__lock{font-size:.875rem; margin-bottom:var(--s4)}
.cfg__g.is-lock .cfg__ops{opacity:.4; pointer-events:none}
.cfg__ops{display:grid; gap:var(--s2)}
.cfg__o{display:flex; align-items:center; gap:var(--s4); cursor:pointer; line-height:1.4;
padding:var(--s4) var(--s5); border:1px solid var(--border); border-radius:var(--radius);
background:var(--surface)}
.cfg__o:hover{border-color:var(--brand-primary)}
.cfg__o:has(input:checked){border-color:var(--brand-primary)}
.cfg__o.is-inc{opacity:.65}
.cfg__o input{accent-color:var(--brand-primary); flex:0 0 auto; width:1.1em; height:1.1em}
.cfg__n{flex:1 1 auto}
.cfg__p{color:var(--text-muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.cfg__inc{flex-basis:100%; font-size:.8125rem; color:var(--brand-primary)}
.cfg__bar{position:sticky; bottom:0; display:flex; flex-wrap:wrap; gap:var(--s5);
align-items:center; justify-content:space-between; margin-top:var(--s7);
padding:var(--s5); border:1px solid var(--border); border-radius:var(--radius);
background:var(--surface)}
.cfg__tot{display:flex; flex-direction:column; gap:1px}
.cfg__tot b{font-family:var(--f-display); font-size:1.75rem; letter-spacing:-.02em;
font-variant-numeric:tabular-nums; line-height:1.1}
.cfg__tot small{font-size:.8125rem}
.cfg__err{margin-top:var(--s4); color:var(--brand-primary); font-size:.9375rem}
.cfg__pie{margin-top:var(--s5); font-size:.875rem; line-height:1.6}
@media(max-width:520px){ .cfg__bar{flex-direction:column; align-items:stretch} }
.cfg__dto{margin-top:var(--s4); color:var(--brand-primary); font-size:.9375rem}