@font-face{font-family:"trapmedium";src:url(trap-medium_500-webfont.woff2) format("woff2");font-display:swap}
@font-face{font-family:"circular_stdlight";src:url(circularstd-light-webfont.woff2) format("woff2");font-display:swap}
:root{--rojo:#EC2427;--crema:#FFFFFF;--crema2:#F4F4F3;--carbon:#111;--carbon2:#1b1a19;--gris:#6a6a6a;--linea:rgba(17,17,17,.14);--serif:"trapmedium",sans-serif;--sans:"circular_stdlight",sans-serif;--pad:clamp(20px,5vw,80px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--carbon);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(3rem,9vw,8rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.2}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:normal;color:var(--rojo)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.salto{position:absolute;left:-999px;top:8px;background:var(--rojo);color:#fff;padding:10px 16px;z-index:100}
.salto:focus{left:8px}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
.hero h1{text-transform:uppercase}
.rot{font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);margin:0 0 1.2em}
.rot a{text-decoration:none}
.sep{margin-top:4rem}
.barra{position:sticky;top:0;z-index:50;background:var(--crema);border-bottom:1px solid var(--linea)}
.inicio .barra{background:color-mix(in srgb,var(--crema) 96%,transparent)}
.barra-in{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--pad)}
.logo{font:600 1.5rem/1 var(--serif);text-decoration:none;letter-spacing:-.03em}
.logo{display:inline-flex}.logo img{height:30px;width:auto;display:block}
.btn{display:inline-block;font:600 .85rem/1 var(--sans);text-decoration:none;padding:14px 22px;border-radius:2px;border:0;cursor:pointer;transition:background .2s,color .2s}
.btn-neg{background:var(--carbon);color:#fff!important}
.btn-neg:hover{background:var(--rojo)}
.btn-bco{background:#fff;color:var(--carbon)}
.btn-bco:hover{background:var(--carbon);color:#fff}
.hero{background:var(--carbon);color:#fff;padding:clamp(80px,13vw,180px) var(--pad) 50px;min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{max-width:10ch}
.hero-p{max-width:40ch;margin:2rem 0 4rem;font-size:1.15rem;color:rgba(255,255,255,.75)}
.hero-d{display:flex;flex-wrap:wrap;gap:8px 36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);font-size:.8rem;color:rgba(255,255,255,.55)}
.proy{padding:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--crema)}
.tile{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--carbon2)}
.tile.t0{background:#1c1c1d}
.tile.t1{background:#8a1f22}
.tile.t2{background:#26352b}
.tile.t3{background:#4a3425}
.tile.t4{background:#1f2e40}
.tile.t5{background:#2e1f3b}
.tile a{position:absolute;inset:0;display:block}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tile a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 55%)}
.tile:hover img{transform:scale(1.03)}
.tile-n{position:absolute;left:20px;bottom:18px;right:20px;z-index:2;color:#fff;font:500 1.15rem/1.2 var(--serif)}
.tile-n::after{content:"→";float:right;opacity:0;transform:translateX(-6px);transition:.25s}
.tile:hover .tile-n::after{opacity:1;transform:none}
.mas{padding:28px var(--pad);margin:0;font-weight:600;font-size:.9rem}
.mas a,.enlace{color:var(--rojo);text-decoration:none}
.mas a:hover,.enlace:hover{text-decoration:underline}
.oscura{background:var(--carbon);color:#fff}
.señales,.cre{padding:clamp(70px,10vw,140px) var(--pad)}
.enc{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(36px,5vw,64px)}
.enc h2{max-width:16ch}
.enc p{max-width:30ch;margin:0;font-size:.85rem;color:var(--gris)}
.oscura .enc p{color:rgba(255,255,255,.5)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:.75rem;padding:5px 11px;border:1px solid var(--linea);border-radius:2px;background:transparent}
.inds{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linea);border-left:1px solid var(--linea)}
.inds a{display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:150px;padding:26px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);text-decoration:none;transition:background .2s}
.inds a:hover{background:#fff}
.inds strong{font:500 1.4rem/1.2 var(--serif)}
.inds span{font-size:.75rem;font-weight:600;color:var(--rojo)}
.celdas{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--linea);border-left:1px solid var(--linea)}
.celdas li{display:grid;place-items:center;text-align:center;min-height:84px;padding:14px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);font:500 .9rem/1.25 var(--serif);color:#4a4742}
.celdas-a{grid-template-columns:repeat(6,1fr)}
.ops{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.op-img{aspect-ratio:3/2;background:linear-gradient(135deg,#ddd3b8,#cfc4a6);margin-bottom:18px}
.op h3 a{text-decoration:none}
.op h3 a:hover{color:var(--rojo)}
.cierre{background:var(--rojo);color:#fff;text-align:center;padding:clamp(80px,12vw,160px) var(--pad)}
.cierre h2{font-size:clamp(2.2rem,6vw,4.6rem);max-width:14ch;margin:0 auto .8em}
.cierre-c{margin:2.4rem 0 0;font-size:.9rem}
.cierre-c a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.pie{background:var(--carbon);color:rgba(255,255,255,.55);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;padding:26px var(--pad);font-size:.78rem}
.pie p{margin:0}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.pie a{text-decoration:none}
.pie a:hover{color:#fff}
.enc-pag{padding:clamp(56px,8vw,110px) var(--pad) 40px;border-bottom:1px solid var(--linea)}
.sub{max-width:40ch;margin:1.4rem 0 0;font-size:1.15rem;color:var(--gris)}
.filtros{margin-top:2.4rem}
.buscar input{width:100%;max-width:380px;padding:14px 16px;border:1px solid var(--linea);border-radius:2px;background:#fff;font:inherit;font-size:.95rem}
.chips-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{background:transparent;border:1px solid var(--linea);border-radius:2px;padding:8px 14px;font:500 .8rem var(--sans);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--carbon)}
.chip.on{background:var(--carbon);color:#fff;border-color:var(--carbon)}
.cuenta{margin:16px 0 0;font-size:.8rem;color:var(--gris)}
.vacio{padding:70px var(--pad);color:var(--gris)}
.texto{max-width:680px}
.texto p{font-size:1.2rem}
.enl{display:flex;flex-wrap:wrap;gap:10px 28px}
.enl a{color:var(--rojo);font-weight:600;text-decoration:none}
.fenc{padding:clamp(50px,7vw,100px) var(--pad) 40px}
.fenc h1{font-size:clamp(2.6rem,8vw,7rem);margin-bottom:.4em}
.fhero{margin:0;background:var(--carbon2);display:flex;justify-content:center}
.fhero img{width:100%;height:auto;max-height:78vh;object-fit:contain}
.fcuerpo{padding:clamp(60px,8vw,110px) var(--pad);max-width:1100px}
.fb{display:grid;grid-template-columns:200px 1fr;gap:20px 40px;margin-bottom:clamp(50px,7vw,90px)}
.fb h2{font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);padding-top:.5em}
.fb p{font-size:1.15rem;max-width:62ch}
.cita{margin:0 0 clamp(50px,7vw,90px);font:500 clamp(1.6rem,3.6vw,2.8rem)/1.18 var(--serif);letter-spacing:-.015em;padding-left:28px;border-left:4px solid var(--rojo)}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--carbon2);align-items:center}
.gal img{width:100%;height:auto;justify-self:center}
.sigue{display:block;background:var(--carbon);color:#fff;text-decoration:none;padding:clamp(60px,9vw,130px) var(--pad);transition:background .3s}
.sigue:hover{background:var(--rojo)}
.sigue span{display:block;font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:1.2em}
.sigue strong{font:500 clamp(2.2rem,6vw,5rem)/1.05 var(--serif);letter-spacing:-.02em}
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.rev.vis{opacity:1;transform:none}
@media (max-width:900px){
.tiles{grid-template-columns:repeat(2,1fr)}
.celdas,.celdas-a{grid-template-columns:repeat(3,1fr)}
.ops{grid-template-columns:1fr}
.inds{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
.tiles{grid-template-columns:1fr}
.disc,.celdas,.celdas-a{grid-template-columns:repeat(2,1fr)}
.inds{grid-template-columns:1fr}
.fb{grid-template-columns:1fr}
.gal{grid-template-columns:1fr}
.hero{min-height:70vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.rev{opacity:1;transform:none}}

.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,17,17,.62),rgba(17,17,17,.78))}
.hero h1.hero-b{max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:.25em .4em;font-size:clamp(2.2rem,6.6vw,6.5rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.hero-b svg{height:.8em;width:.8em;flex:none}
.hero h1 em{font-style:normal}
/* hero: una sola pantalla (desktop y móvil) */
.hero{height:calc(100vh - var(--bh,72px));height:calc(100svh - var(--bh,72px));min-height:0;padding-top:clamp(24px,5vh,80px);padding-bottom:clamp(18px,3.5vh,40px)}
.hero h1{font-size:clamp(2.4rem,min(11vw,12vh),7rem)}
.hero-p{margin:clamp(.8rem,2.5vh,2rem) 0 clamp(1rem,4vh,3.5rem);font-size:clamp(1rem,2.2vh,1.15rem)}
@media(max-width:700px){.hero-d{gap:6px 18px;padding-top:16px}}
/* hero: legibilidad */
.hero::before{background:linear-gradient(180deg,rgba(17,17,17,.45) 0%,rgba(17,17,17,.6) 40%,rgba(17,17,17,.88) 100%),linear-gradient(90deg,rgba(17,17,17,.55),rgba(17,17,17,0) 70%)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero h1 em{color:var(--rojo);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-p{color:#fff;font-size:clamp(1.05rem,2.4vh,1.3rem);text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero-d{color:#fff;font-size:clamp(.85rem,1.9vh,1rem);font-weight:600;letter-spacing:.04em;border-top-color:rgba(255,255,255,.55);text-shadow:0 1px 10px rgba(0,0,0,.6)}
/* hero: variantes de filtro (vista previa con ?filtro=rojo|fuego|selva|neon) */
.hero[data-f]::before{mix-blend-mode:multiply;opacity:1}
.hero[data-f]::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(17,17,17,.35) 45%,rgba(17,17,17,.78) 100%)}
.hero[data-f=rojo]::before{background:linear-gradient(180deg,#ec2427,#b5161a)}
.hero[data-f=fuego]::before{background:linear-gradient(135deg,#ec2427 0%,#f0562a 45%,#ffc928 100%)}
.hero[data-f=selva]::before{background:linear-gradient(135deg,#ec2427 0%,#c8a82a 50%,#1fa35b 100%)}
.hero[data-f=neon]::before{background:linear-gradient(120deg,#ec2427 0%,#ff2d95 30%,#ff8a1f 62%,#ffd22e 100%)}
.hero[data-f=rosa]::before{background:linear-gradient(120deg,#ff3d9a 0%,#ff7ab8 35%,#ffd23f 100%)}
.hero[data-f=lago]::before{background:linear-gradient(120deg,#1fd18a 0%,#14b8c4 45%,#2a5cff 100%)}
.hero[data-f=loco]::before{background:linear-gradient(120deg,#ff3d9a 0%,#ffd23f 35%,#1fd18a 68%,#2a5cff 100%)}
.hero[data-f=mezcla]::before{background:linear-gradient(120deg,#e8337a 0%,#f0a93a 33%,#1fa35b 66%,#1f6fe0 100%)}
/* con filtro de color: "Más negocio." en bloque rojo Mixen para que siempre se note */
.hero[data-f] h1 em{display:inline-block;background:var(--rojo);color:#fff;padding:.02em .16em .06em;margin-top:.08em;text-shadow:none}
/* filtros de color: menos negro, más color + patrón sutil */
.hero[data-f]::before{mix-blend-mode:color;opacity:.92}
.hero[data-f]::after{background:
 radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.6px) 0 0/7px 7px,
 linear-gradient(180deg,rgba(17,17,17,.08) 0%,rgba(17,17,17,.22) 50%,rgba(17,17,17,.6) 100%)}
.hero[data-p=lineas]::after{background:
 repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 1px,transparent 1px 7px),
 linear-gradient(180deg,rgba(17,17,17,.08) 0%,rgba(17,17,17,.22) 50%,rgba(17,17,17,.6) 100%)}
.hero[data-p=rejilla]::after{background:
 linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px) 0 0/40px 40px,
 linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px) 0 0/40px 40px,
 linear-gradient(180deg,rgba(17,17,17,.08) 0%,rgba(17,17,17,.22) 50%,rgba(17,17,17,.6) 100%)}
/* "Más negocio.": sin recuadro; variantes con ?texto= */
.hero[data-f] h1 em{background:none;padding:0;margin:0;display:inline;color:#fff}
.hero[data-t=contorno] h1 em{color:transparent;-webkit-text-stroke:2px #fff;text-shadow:none}
.hero[data-t=subrayado] h1 em{text-decoration:underline;text-decoration-color:var(--rojo);text-decoration-thickness:.09em;text-underline-offset:.12em}
.hero[data-t=carbon] h1 em{color:var(--carbon);text-shadow:none}
.hero[data-t=rojo] h1 em{color:var(--rojo);-webkit-text-stroke:1.5px #fff;paint-order:stroke fill;text-shadow:none}
/* hero escalonado: "Más negocio." arranca donde termina "Más marca." */
.hero-t{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start}
.hero-t h1{display:contents}
.hero h1{font-size:clamp(2.2rem,min(6vw,11vh),6.2rem);line-height:1.02}
.hero-t .l1{grid-column:1;grid-row:1;white-space:nowrap}
.hero-t em{grid-column:2;grid-row:2;white-space:nowrap}
.hero-t .hero-p{grid-column:1;grid-row:2;align-self:start;margin:.9rem 2rem 0 0;max-width:none;font-size:clamp(.95rem,2.1vh,1.2rem);line-height:1.45}
@media(max-width:900px){
 .hero-t{display:block}
 .hero-t h1{display:block;font-size:clamp(2rem,min(9.5vw,9vh),4rem)}
 .hero-t .l1{display:block}
 .hero-t em{display:block;margin-left:1.5em}
 .hero-t .hero-p{margin:1.2rem 0 0;font-size:clamp(1rem,2.2vh,1.15rem)}
}
.hero-t{margin-bottom:clamp(1rem,4vh,3.5rem)}
.hero-t .hero-p{width:0;min-width:calc(100% - 2rem)}
@media(max-width:900px){.hero-t .hero-p{width:auto;min-width:0}}
.hero-t .hero-p{text-wrap:balance}
@media(max-width:900px){.hero .hero-t h1 em{margin-left:1.5em}}
@media(max-width:700px){.hero-d{flex-direction:column;gap:6px;padding-top:14px;list-style:none;margin-left:0;padding-left:0}}
/* patrón: líneas muy sutiles (sustituye a los puntos) */
.hero[data-f]::after,.hero[data-f][data-p=lineas]::after{background:
 repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px),
 linear-gradient(180deg,rgba(17,17,17,.08) 0%,rgba(17,17,17,.22) 50%,rgba(17,17,17,.6) 100%)}
/* ===== animación de entrada (hero al cargar; resto al hacer scroll) ===== */
:root{--ease:cubic-bezier(.16,.84,.24,1)}
@keyframes subir{from{opacity:0;transform:translateY(.55em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-.15em -100vw -.25em -.1em)}}
@keyframes aparece{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes linea{from{background-size:0 .09em}to{background-size:100% .09em}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero-v{animation:fade 1.6s ease both}
.hero-t .l1{animation:subir 1.1s var(--ease) .15s both}
.hero-t em{animation:subir 1.1s var(--ease) .45s both}
.hero-t .hero-p{animation:aparece 1s var(--ease) .95s both}
.hero-d li{animation:aparece .9s var(--ease) both}
.hero-d li:nth-child(1){animation-delay:1.2s}.hero-d li:nth-child(2){animation-delay:1.3s}.hero-d li:nth-child(3){animation-delay:1.4s}.hero-d li:nth-child(4){animation-delay:1.5s}.hero-d li:nth-child(5){animation-delay:1.6s}
.hero-d{position:relative;border-top-color:transparent}
.hero-d::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:rgba(255,255,255,.55);transform-origin:left;animation:trazo 1.4s var(--ease) 1s both}
@keyframes trazo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* subrayado que se dibuja de izquierda a derecha */
.hero[data-t=subrayado] h1 em{text-decoration:none;padding-bottom:.08em;background:linear-gradient(var(--rojo),var(--rojo)) 0 100%/100% .09em no-repeat;animation:subir 1.1s var(--ease) .45s both,linea 1s var(--ease) 1.3s both}
/* scroll reveal global */
.rev{opacity:0;transform:translateY(26px);filter:blur(5px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rev.vis{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){.hero *,.hero-v,.hero::before{animation:none!important}.rev{opacity:1;transform:none;filter:none}}
/* sello flotante */
.sello{position:absolute;z-index:2;right:var(--pad);top:clamp(24px,9vh,110px);width:clamp(104px,12vw,168px);aspect-ratio:1;display:grid;place-items:center;color:#fff;text-decoration:none;animation:aparece 1.2s var(--ease) 1.4s both,flota 7s ease-in-out 2.6s infinite}
.sello>svg{position:absolute;inset:0;width:100%;height:100%;animation:gira 28s linear infinite;overflow:visible}
.sello-t{fill:currentColor;font:600 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.sello-c{width:34%;aspect-ratio:1;border-radius:50%;background:var(--rojo);display:grid;place-items:center;transition:transform .5s var(--ease)}
.sello-c svg{width:44%;height:44%}
.sello:hover .sello-c{transform:scale(1.14) rotate(-45deg)}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes flota{50%{transform:translateY(-10px)}}
@media(max-width:700px){.sello{width:88px;top:18px}.sello-t{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.sello,.sello>svg{animation:none!important}}
/* las dos líneas llegan hasta el borde derecho de la pantalla */
.hero[data-t=subrayado] h1 em{background:none;animation:subir 1.1s var(--ease) .45s both;position:relative}
.hero[data-t=subrayado] h1 em::after{content:"";position:absolute;left:0;right:calc(var(--pad)*-1);bottom:0;height:.09em;background:var(--rojo);transform-origin:left;animation:trazo 1.3s var(--ease) 1.2s both}
.hero-d::before{width:calc(100% + var(--pad))}

/* ===== menú: barra mínima + panel a pantalla completa ===== */
.barra{z-index:80;transition:transform .6s var(--ease),background .4s,border-color .4s}
.burger{display:flex;align-items:center;gap:14px;height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--carbon);font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:color .4s}
.b-l{position:relative;width:32px;height:10px}
.b-l i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .6s var(--ease),top .6s var(--ease),width .4s var(--ease)}
.b-l i:first-child{top:0}.b-l i:last-child{top:8px;width:68%;left:auto;right:0}
.burger:hover .b-l i:last-child{width:100%}
.burger[aria-expanded=true] .b-l i:first-child{top:4px;transform:rotate(45deg)}
.burger[aria-expanded=true] .b-l i:last-child{top:4px;width:100%;transform:rotate(-45deg)}
.barra.menu-on{background:transparent;border-color:transparent}
.barra.menu-on .burger{color:#fff}
.barra.menu-on .logo img{filter:brightness(0) invert(1)}
.logo img{transition:filter .4s}
.sin-scroll{overflow:hidden}
.panel{position:fixed;inset:0;z-index:70;background:var(--carbon);color:#fff;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,5vw,90px);align-items:center;padding:clamp(80px,12vh,120px) var(--pad) clamp(28px,6vh,60px);height:100vh;height:100dvh;overflow:hidden;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease),visibility 0s .9s}
.panel.abierto{visibility:visible;clip-path:inset(0);transition:clip-path .9s var(--ease)}
.panel-n ol{display:grid;gap:.04em}
.panel-n li{clip-path:inset(-.35em -.35em -.16em -.35em)}
.panel-n a{display:flex;align-items:baseline;gap:.7em;color:#fff;text-decoration:none;font:400 clamp(1.7rem,min(6.6vw,8vh),5.8rem)/1.1 var(--serif);letter-spacing:-.03em;transform:translateY(140%);transition:transform .9s var(--ease),color .3s,padding .4s var(--ease)}
.panel.abierto .panel-n a{transform:none}
.panel.abierto .panel-n li:nth-child(1) a{transition-delay:.25s,0s,0s}.panel.abierto .panel-n li:nth-child(2) a{transition-delay:.33s,0s,0s}.panel.abierto .panel-n li:nth-child(3) a{transition-delay:.41s,0s,0s}.panel.abierto .panel-n li:nth-child(4) a{transition-delay:.49s,0s,0s}.panel.abierto .panel-n li:nth-child(5) a{transition-delay:.57s,0s,0s}.panel.abierto .panel-n li:nth-child(6) a{transition-delay:.65s,0s,0s}.panel.abierto .panel-n li:nth-child(7) a{transition-delay:.73s,0s,0s}
.panel-n a em{font:600 .72rem/1 var(--sans);letter-spacing:.14em;color:var(--rojo);align-self:flex-start;padding-top:1.1em}
.panel-n a:hover,.panel-n a:focus-visible{color:var(--rojo);padding-left:.12em}
.panel-p{display:flex;flex-direction:column;gap:clamp(10px,2.2vh,22px);opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s var(--ease)}
.panel.abierto .panel-p{opacity:1;transform:none;transition:opacity .9s var(--ease) .7s,transform .9s var(--ease) .7s}
.panel-t{font:400 clamp(1.3rem,min(2.8vw,4.4vh),2.6rem)/1.08 var(--serif);text-transform:uppercase;letter-spacing:-.02em;margin:0;color:#fff}
.panel-t span,.panel-t em{display:block}
.panel-t em{position:relative;display:block;color:var(--rojo);padding-bottom:.12em}
.panel-t em::after{content:"";position:absolute;left:0;right:calc(var(--pad)*-1);bottom:0;height:.07em;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.panel.abierto .panel-t em::after{transform:scaleX(1);transition-delay:1.1s}
.panel-c{display:grid;gap:8px;font-size:.9rem;color:rgba(255,255,255,.7)}
.panel-c a{text-decoration:none}.panel-c a:hover{color:#fff;text-decoration:underline}
.btn-rojo{background:var(--rojo);color:#fff!important;align-self:flex-start}
.btn-rojo:hover{background:#fff;color:var(--carbon)!important}
@media(max-width:760px){
.panel{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:space-between;align-items:start;gap:14px;padding:84px var(--pad) 22px}
.panel-n a{font-size:clamp(1.6rem,min(10vw,7.4vh),3rem)}
.panel-t{display:none}
.panel-p{gap:14px}
.panel-v{height:clamp(90px,15vh,150px);margin:0 0 0 auto;width:46%;aspect-ratio:auto}
.panel-c{display:grid;gap:4px;font-size:.95rem;color:#fff}
.panel-p .btn{display:block;width:100%;align-self:stretch;text-align:center;padding:20px 16px;font-size:1rem;line-height:1.2}
}
@media(max-width:760px) and (max-height:640px){.panel-v{display:none}}
@media(max-height:620px) and (min-width:761px){.panel-t,.panel-c{display:none}.panel-v{height:clamp(110px,40vh,300px)}}
@media(prefers-reduced-motion:reduce){.panel,.panel-n a,.panel-p{transition:none!important;transform:none}.panel-p{opacity:1}}

/* visual del panel: el reel enmarcado + dos piezas de proyecto que se salen del cuadro */
.panel-v{position:relative;height:clamp(120px,32vh,440px);aspect-ratio:4/5;background:var(--carbon2);margin:4px 0 14px;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease)}
.panel.abierto .panel-v{clip-path:inset(-60px -60px -60px -60px);transition:clip-path 1.1s var(--ease) .75s}
.panel-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel-v img{position:absolute;width:38%;height:auto;max-width:170px;box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform 1.2s var(--ease)}
.pv-a{left:-14%;bottom:-6%}
.pv-b{right:-12%;top:12%}
.panel.abierto .pv-a{animation:flotaA 9s ease-in-out 2s infinite}
.panel.abierto .pv-b{animation:flotaB 11s ease-in-out 2s infinite}
@keyframes flotaA{50%{transform:translateY(-10px)}}
@keyframes flotaB{50%{transform:translateY(8px)}}
@media(max-width:760px){.panel-v{height:clamp(180px,30vh,260px);margin-left:14%}}
@media(prefers-reduced-motion:reduce){.panel-v img{animation:none!important}}

/* señales: una sola vista. Frases cortas; al pasar por cada una, el punto se abre en número y aparece la disciplina que la resuelve */
.señales{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(28px,5vw,90px);align-content:center;min-height:min(100vh,860px)}
.sen-t h2{font-size:clamp(1.9rem,min(3.7vw,7.2vh),4.2rem);max-width:none;overflow-wrap:normal;hyphens:none}
.sen-l{grid-column:2;grid-row:1/3;align-self:center;border:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:clamp(20px,3vw,52px)}
.sen-i{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:clamp(10px,1.2vw,18px);padding:clamp(14px,2.6vh,26px) 0 clamp(10px,2vh,20px);border-bottom:1px solid rgba(255,255,255,.14);position:relative}
.sen-i:first-child,.sen-i:nth-child(6){border-top:1px solid rgba(255,255,255,.14)}
.sen-d{grid-row:1/3;align-self:start;margin-top:.55em}
.sen-i::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.sen-d{display:grid;place-items:center;width:10px;height:10px;border-radius:50%;background:var(--rojo);transition:width .5s var(--ease),height .5s var(--ease)}
.sen-d b{font:600 .62rem/1 var(--sans);letter-spacing:.04em;color:#fff;opacity:0;transition:opacity .3s}
.sen-i p{margin:0;font:400 clamp(1.05rem,min(1.45vw,3vh),1.5rem)/1.15 var(--serif);letter-spacing:-.01em;transition:transform .6s var(--ease)}
.sen-s{grid-column:2;margin-top:.7em;font:600 .68rem/1 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s var(--ease);white-space:nowrap}
@media(hover:hover){
.sen-i:hover::after{transform:scaleX(1)}
.sen-i:hover .sen-d{width:30px;height:30px}
.sen-i:hover .sen-d b{opacity:1}
.sen-i:hover p{transform:translateX(6px)}
.sen-i:hover .sen-s{opacity:1;transform:none}
}
@media(hover:none){.sen-s{opacity:.7;transform:none}}
.sen-f{grid-column:1;align-self:end}
.sen-f p{font-size:1.05rem;color:rgba(255,255,255,.75);max-width:36ch;margin:0 0 22px}
/* entrada: como el hero y los proyectos */
@media(prefers-reduced-motion:no-preference){
.señales.ent .sen-t h2,.señales.ent .sen-f>*{opacity:0;transform:translateY(.6em)}
.señales.ent .sen-i{clip-path:inset(0 0 100% 0)}
.señales.ent .sen-i p{opacity:0}
.señales.ent.dentro .sen-t h2{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.señales.ent.dentro .sen-i{clip-path:inset(-1px 0 -1px 0);transition:clip-path 1s var(--ease) calc(.25s + var(--k)*.08s)}
.señales.ent.dentro .sen-i p{opacity:1;transition:opacity .9s var(--ease) calc(.5s + var(--k)*.08s),transform .6s var(--ease)}
.señales.ent.dentro .sen-f>*{opacity:1;transform:none;transition:opacity .9s var(--ease) 1.3s,transform 1s var(--ease) 1.3s}
}
@media(max-width:900px){
.señales{grid-template-columns:1fr;min-height:0}
.sen-l{grid-column:1;grid-row:auto;grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
.sen-i:nth-child(6){border-top:0}
.sen-f{grid-column:1}
.sen-i{grid-template-columns:22px minmax(0,1fr)}
.sen-s{opacity:.7;transform:none}
}

/* isotipo M en el botón del menú (vectorial: nítido a cualquier tamaño) */
.b-iso{display:block;width:22px;height:auto;color:var(--rojo);flex:none;transition:transform .8s var(--ease)}
.burger:hover .b-iso{transform:translateY(-2px)}

/* ===== servicios: cinco disciplinas como un índice limpio ===== */
.discs{border-top:1px solid var(--linea)}
.disc{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(18px,3vw,56px);padding:clamp(28px,4.4vw,60px) 0;border-bottom:1px solid var(--linea)}
.disc::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.disc:hover::before{transform:scaleX(1)}
.d-h{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,24px)}
.d-n{font:600 .78rem/1 var(--sans);letter-spacing:.14em;color:var(--rojo);margin:0}
.d-h h3{font-size:clamp(1.9rem,3.4vw,3.2rem);letter-spacing:-.025em;transition:transform .6s var(--ease)}
.disc:hover .d-h h3{transform:translateX(8px)}
.d-l{margin:0;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.45;color:var(--gris);max-width:26ch;padding-top:.35em}
.d-s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px)}
.d-s li{padding:.62em 0;border-bottom:1px solid var(--linea);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.3;transition:color .4s var(--ease)}
.d-s li span{display:flex;align-items:baseline;gap:.7em;transition:transform .6s var(--ease)}
.d-s li span::before{content:"";flex:none;width:.34em;height:.34em;border-radius:50%;background:var(--rojo);transform:translateY(-.12em)}
.d-s li:hover{color:var(--rojo)}
.d-s li:hover span{transform:translateX(.55em)}
.d-s li:nth-last-child(-n+2):nth-child(odd),.d-s li:last-child{border-bottom:0}
@media(prefers-reduced-motion:no-preference){
.disc.ent .d-h,.disc.ent .d-l{opacity:0;transform:translateY(.7em)}
.disc.ent .d-s li{opacity:0;transform:translateY(.6em)}
.disc.ent.dentro .d-h,.disc.ent.dentro .d-l{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.disc.ent.dentro .d-l{transition-delay:.15s}
.disc.ent.dentro .d-s li{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(.3s + var(--k)*.07s),transform 1s var(--ease) calc(.3s + var(--k)*.07s),color .4s var(--ease)}
}
@media(max-width:1000px){
.disc{grid-template-columns:1fr 1fr}
.d-h{grid-column:1/-1}
.d-l{max-width:none;padding-top:0}
}
@media(max-width:640px){
.disc{grid-template-columns:1fr;gap:16px}
.d-s{grid-template-columns:1fr}
.d-s li:nth-last-child(-n+2):nth-child(odd){border-bottom:1px solid var(--linea)}
}

/* servicios: peso sin exagerar. Numeral sobre el nombre (así el nombre nunca invade otra columna) y hover con un tono crema más profundo */
.enc-s{align-items:flex-start}
.enc-iso{display:block;width:clamp(64px,8vw,120px);height:auto;color:var(--rojo);flex:none}
.discs{margin:0 calc(var(--pad)*-1)}
.disc{padding-left:var(--pad);padding-right:var(--pad);grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1.6fr);transition:background .6s var(--ease)}
.d-h{flex-direction:column;align-items:flex-start;gap:.5em;min-width:0}
.d-n{font:400 clamp(1.8rem,3vw,2.8rem)/.9 var(--serif);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px var(--rojo);transition:color .5s var(--ease)}
.d-h h3{font-size:clamp(1.7rem,2.7vw,2.7rem);line-height:1.08;color:var(--carbon);overflow-wrap:break-word;transition:transform .6s var(--ease)}
.d-l{color:rgba(17,17,17,.72)}
.d-s li{color:var(--carbon);border-bottom-color:rgba(17,17,17,.16)}
@media(hover:hover){
.disc:hover{background:var(--crema2)}
.disc:hover .d-n{color:var(--rojo)}
}
@media(max-width:1000px){.disc{grid-template-columns:1fr 1fr}.d-h{grid-column:1/-1}}
@media(max-width:640px){.disc{grid-template-columns:1fr}}

/* ===== Mi Web PyME: un descanso claro y sereno, otra marca dentro de Mixen ===== */
.mwp{--az:#0052FC;--azc:#1FA5FE;--tinta:#05061F;position:relative;background:#F2F6FE;color:var(--tinta);padding:clamp(28px,6vh,80px) var(--pad);min-height:calc(100vh - var(--bh,72px));min-height:calc(100svh - var(--bh,72px));display:grid;align-content:center;overflow:hidden;isolation:isolate}
.mwp::before{content:"";position:absolute;z-index:-1;right:-8%;top:50%;width:62%;aspect-ratio:1;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(31,165,254,.22),rgba(31,165,254,0));pointer-events:none}
.mwp-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,90px);align-items:center}
.mwp-logo{width:clamp(130px,min(14vw,24vh),200px);height:auto;margin-bottom:clamp(14px,3vh,38px)}
.mwp-k{font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--az);margin:0 0 clamp(.6em,1.6vh,1.2em)}
.mwp h2{font-size:clamp(2.1rem,min(4.8vw,9vh),4.8rem);line-height:1.04;letter-spacing:-.03em}
.mwp h2 em{display:block;color:var(--az);font-style:normal}
.mwp-p{max-width:50ch;margin:clamp(12px,2.4vh,28px) 0 clamp(12px,2.2vh,24px);font-size:clamp(.98rem,min(1.3vw,2.4vh),1.18rem);color:#4A5678}
.mwp-pt{display:grid;gap:0;max-width:50ch;margin:0 0 clamp(16px,3.4vh,40px)}
.mwp-pt li{display:flex;gap:.8em;align-items:baseline;padding:clamp(.45em,1.2vh,.7em) 0;border-bottom:1px solid rgba(5,6,31,.12);font-size:1rem;color:var(--tinta)}
.mwp-pt li:first-child{border-top:1px solid rgba(5,6,31,.12)}
.mwp-pt li::before{content:"";flex:none;width:.4em;height:.4em;border-radius:50%;background:var(--az);transform:translateY(-.1em)}
.mwp-b{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.btn-azul{background:var(--az);color:#fff!important}
.btn-azul:hover{background:var(--tinta)}
.mwp-l{color:var(--tinta);text-decoration:none;font-weight:600;font-size:.92rem;border-bottom:1px solid rgba(5,6,31,.3);padding-bottom:3px;transition:border-color .3s,color .3s}
.mwp-l:hover{color:var(--az);border-color:var(--az)}
.mwp-iso{justify-self:end;width:min(100%,clamp(200px,min(26vw,48vh),400px))}
.mwp-iso svg{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 50px rgba(0,82,252,.22))}
@media(prefers-reduced-motion:no-preference){
.mwp-iso{animation:flotaIso 10s ease-in-out infinite}
@keyframes flotaIso{50%{transform:translateY(-12px)}}
.mwp.ent .mwp-logo,.mwp.ent .mwp-k,.mwp.ent h2,.mwp.ent .mwp-p,.mwp.ent .mwp-pt,.mwp.ent .mwp-b,.mwp.ent .mwp-iso{opacity:0;transform:translateY(.7em)}
.mwp.ent.dentro .mwp-logo,.mwp.ent.dentro .mwp-k,.mwp.ent.dentro h2,.mwp.ent.dentro .mwp-p,.mwp.ent.dentro .mwp-pt,.mwp.ent.dentro .mwp-b{opacity:1;transform:none;transition:opacity .9s var(--ease) calc(var(--k)*.12s),transform 1.1s var(--ease) calc(var(--k)*.12s)}
.mwp.ent.dentro .mwp-iso{opacity:1;transform:none;transition:opacity 1.4s var(--ease) .3s,transform 1.4s var(--ease) .3s}
}
@media(max-width:900px){
.mwp-top{grid-template-columns:1fr}
.mwp-iso{display:none}
.mwp{min-height:0}
}
/* isotipo del botón: el trazo iguala el grosor de las dos líneas (1.5 px) */
.b-iso{overflow:visible}
.b-iso path{stroke:currentColor;stroke-width:18;stroke-linejoin:miter;stroke-miterlimit:4}

/* ===== variantes de la barra (se prueban con ?barra=negra|grafito|vidrio|perla|blanca) ===== */
.barra[data-b]:not(.menu-on){transition:background .4s,border-color .4s,backdrop-filter .4s}
.barra[data-b=negra]:not(.menu-on){background:#111;border-bottom-color:rgba(255,255,255,.1)}
.barra[data-b=grafito]:not(.menu-on){background:#1d1c1b;border-bottom-color:rgba(255,255,255,.08)}
.barra[data-b=vidrio]{position:sticky}
.barra[data-b=vidrio]:not(.menu-on){background:linear-gradient(180deg,rgba(17,17,17,.82),rgba(17,17,17,.68));-webkit-backdrop-filter:blur(40px) saturate(1.8) brightness(.42) contrast(1.1);backdrop-filter:blur(40px) saturate(1.8) brightness(.42) contrast(1.1);border-bottom:0}
.barra[data-b=vidrio]:not(.menu-on)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.32) 22%,rgba(255,255,255,.32) 78%,rgba(255,255,255,.04));pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.barra[data-b=vidrio]:not(.menu-on){background:#1a1918}}
.barra[data-b=vidrio]:not(.menu-on) .burger{color:rgba(255,255,255,.92)}
.barra[data-b=vidrio]:not(.menu-on) .burger:hover{color:var(--rojo)}
.barra[data-b=perla]:not(.menu-on){background:#E7E5E0;border-bottom-color:rgba(17,17,17,.12)}
.barra[data-b=blanca]:not(.menu-on){background:#fff;border-bottom-color:rgba(17,17,17,.1)}
.barra[data-b=negra]:not(.menu-on) .burger,.barra[data-b=grafito]:not(.menu-on) .burger{color:#fff}

/* menú abierto: logo e isotipo blancos */
.barra.menu-on .b-iso{color:#fff}

/* barra de cristal: logo e isotipo siempre blancos */
.barra[data-b=vidrio] .logo img{filter:brightness(0) invert(1)}
.barra[data-b=vidrio] .b-iso{color:#fff}

/* hover rojo: logo, isotipo y menú */
.logo img,.burger,.b-iso{transition:filter .35s var(--ease),color .35s var(--ease),transform .8s var(--ease)}
.barra[data-b=vidrio] .logo:hover img,.barra.menu-on .logo:hover img{filter:none}
.barra .burger:hover,.barra.menu-on .burger:hover,.barra[data-b=vidrio] .burger:hover{color:var(--rojo)}
.barra[data-b=vidrio] .burger:hover .b-iso,.barra.menu-on .burger:hover .b-iso{color:var(--rojo)}

/* reflejo del cristal: un destello diagonal muy tenue que cruza la barra */
.barra[data-b=vidrio]:not(.menu-on)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.04) 26%,rgba(255,255,255,0) 44%,rgba(255,255,255,0) 66%,rgba(255,255,255,.1) 100%)}

/* la línea roja del hero y del menú avanza con una punta de flecha al frente y llega con ella al borde derecho */
.hero[data-t=subrayado] h1 em::before,.panel-t em::before{content:"";position:absolute;left:0;width:.7em;height:.7em;transform:translateX(-.56em);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 2 L16 10 L3 18' fill='none' stroke='%23EC2427' stroke-width='2.6' stroke-linejoin='miter' stroke-miterlimit='6'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none;opacity:0}
.hero[data-t=subrayado] h1 em::before{bottom:calc(.045em - .35em);animation:puntaHero 1.3s var(--ease) 1.2s both}
@keyframes puntaHero{0%{left:0;opacity:0}3%{opacity:1}100%{left:calc(100% + var(--pad));opacity:1}}
.panel-t em::before{bottom:calc(.035em - .35em);transition:left 1s var(--ease),opacity .2s}
.panel.abierto .panel-t em::before{left:calc(100% + var(--pad));opacity:1;transition:left 1s var(--ease) 1.1s,opacity .2s 1.1s}
@media(prefers-reduced-motion:reduce){.hero[data-t=subrayado] h1 em::before{animation:none;left:calc(100% + var(--pad));opacity:1}.panel-t em::before{transition:none}}

/* Mi Web PyME en el menú: su hexágono la hace destacar */
.hex-m{height:.7em;width:auto;align-self:baseline;margin-left:-.42em;flex:none;transition:transform .8s var(--ease)}
.panel-n a:hover .hex-m{transform:translateX(6px)}

.proy-i{padding:0 var(--pad) 40px;margin:0;font-size:.85rem;color:#4a4742}
.proy-i span{font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);margin-right:1em}
.proy-i a{text-decoration:none}
.proy-i a:hover{color:var(--rojo)}
.marqs{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:0}
.marq{overflow:hidden;padding:28px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-t{display:flex;align-items:center;width:max-content;animation:marq 70s linear infinite paused}
.marq.on .marq-t{animation-play-state:running}
.marq.inv .marq-t{animation-direction:reverse}
.marq.on:hover .marq-t{animation-play-state:paused}
.marq-t li{flex:none;padding:0 clamp(34px,4.5vw,64px)}
.marq-t img,.alis img{display:block;max-width:none;opacity:.72;transition:opacity .2s}
.marq-t img:hover,.alis img:hover{opacity:1}
@keyframes marq{to{transform:translateX(-50%)}}
.alis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea);border-left:1px solid var(--linea)}
.alis li{display:grid;place-items:center;min-height:112px;padding:20px 14px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.alis img{max-width:100%;height:auto}
@media (max-width:600px){.alis{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.marq-t{animation:none;flex-wrap:wrap;width:auto;row-gap:28px}.marq-t li[aria-hidden]{display:none}.marq{-webkit-mask-image:none;mask-image:none}}
.marq+.marq{border-top:1px solid var(--linea)}

.inds small{font-size:.82rem;line-height:1.5;color:var(--gris)}
.respiro{position:relative;overflow:hidden;isolation:isolate;background:var(--carbon)}
.respiro video{position:relative;display:block;width:100%;height:auto;aspect-ratio:16/9;z-index:0}
/* mismo filtro de color y patrón de líneas que el hero */
.respiro::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(120deg,#e8337a 0%,#f0a93a 33%,#1fa35b 66%,#1f6fe0 100%);mix-blend-mode:color;opacity:.92}
.respiro::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px),linear-gradient(180deg,rgba(17,17,17,.08) 0%,rgba(17,17,17,.18) 50%,rgba(17,17,17,.45) 100%);z-index:1}
@media (max-width:760px){.respiro.cta video{min-height:420px;object-fit:cover}.respiro:not(.cta) video{min-height:260px;object-fit:cover}}
.cierre-t{position:relative;z-index:2;text-align:center;color:#fff}
.btn-xl{display:inline-flex;align-items:center;gap:.9em;font-size:clamp(1.15rem,2vw,1.7rem);font-weight:600;padding:1.15em 2.3em;border-radius:999px;background:var(--rojo);color:#fff;box-shadow:0 0 0 0 rgba(236,36,39,.6),0 18px 50px rgba(0,0,0,.35);animation:halo 2.6s var(--ease) infinite;transition:background .3s,color .3s,transform .3s}
.btn-xl svg{width:1.1em;height:1.1em;flex:none;transition:transform .3s}
.btn-xl:hover{background:var(--carbon);color:#fff;transform:scale(1.04);animation-play-state:paused}
.btn-xl:hover svg{transform:translateX(6px)}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(236,36,39,.6),0 18px 50px rgba(0,0,0,.35)}70%,100%{box-shadow:0 0 0 26px rgba(236,36,39,0),0 18px 50px rgba(0,0,0,.35)}}
/* lemas de los respiros: misma línea con flecha del hero */
.lema-v{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(22px,4vw,56px);margin:0;color:#fff;text-transform:uppercase;font:500 clamp(1.5rem,4.6vw,4.2rem)/1.04 var(--serif);text-shadow:0 2px 24px rgba(0,0,0,.4);z-index:2}
.lema-v span{display:block}
.lema-v em{display:block;font-style:normal;margin-left:clamp(0px,14vw,220px)}
.lema-v em.lf{--af:.3em;--lt:.045em;padding-bottom:.16em}
.lf{position:relative;--af:16px;--lt:2px}
.lf::after{content:"";position:absolute;left:0;right:calc(var(--pad)*-1);bottom:0;height:var(--lt);background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .2s}
.lf::before{content:"";position:absolute;left:0;bottom:calc((var(--lt) - var(--af))/2);width:var(--af);height:var(--af);transform:translateX(calc(var(--af)*-.56));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 2 L16 10 L3 18' fill='none' stroke='%23EC2427' stroke-width='2.6' stroke-linejoin='miter' stroke-miterlimit='6'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:0;transition:left 1.4s var(--ease) .2s,opacity .2s .2s}
.lf.on::after{transform:scaleX(1)}
.lf.on::before{left:calc(100% + var(--pad));opacity:1}
@media (prefers-reduced-motion:reduce){.btn-xl{animation:none}.lf::after{transform:scaleX(1);transition:none}.lf::before{left:calc(100% + var(--pad));opacity:1;transition:none}}


/* CTA de proyectos */
.proy-f{margin:clamp(36px,5vw,70px) 0 0;padding:0;text-align:center}
.btn-ir{display:inline-flex;align-items:center;gap:.8em;padding:1.05em 1.9em;font-size:1rem}
.btn-ir svg{width:1.1em;height:1.1em;transition:transform .3s var(--ease)}
.btn-ir:hover svg{transform:translateX(6px)}
.proy-f .btn-ir{text-align:left}
/* pie */
.pie{display:block;position:relative;background:var(--carbon);color:rgba(255,255,255,.7);font-size:.82rem;padding:clamp(40px,5vw,70px) var(--pad) 0}
.pie-main{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px 40px;padding-bottom:clamp(24px,3.4vw,44px)}
.pie-ct{display:flex;flex-direction:column;gap:4px;margin:0;padding:0}
.pie-k{margin:0 0 8px;font:600 .66rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.pie-mail,.pie-wa{display:flex;align-items:center;gap:.4em;width:fit-content;color:#fff;text-decoration:none;font:500 clamp(1.3rem,2.6vw,2.2rem)/1.12 var(--serif);letter-spacing:-.01em;transition:color .25s}
.pie-wa{color:rgba(255,255,255,.62)}
.pie-wa .wa-ic{width:1em;height:1em;flex:none;color:#25d366}
.pie-mail:hover,.pie-wa:hover{color:var(--rojo)}
.pie-lema{margin:0;text-align:right;font:500 clamp(1.3rem,2.6vw,2.2rem)/1.12 var(--serif);letter-spacing:-.01em;color:#fff}
.pie-lema em{display:block;font-style:normal;color:var(--rojo)}
.pie-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(30px,4.4vw,60px)}
.pie-logo img{display:block;height:clamp(46px,6.2vw,88px);width:auto;filter:brightness(0) invert(1)}
.pie .pie-c{display:grid;grid-template-columns:repeat(3,minmax(140px,auto));justify-content:end;gap:24px clamp(40px,7vw,110px);margin:0;padding:0;border:0;font-size:.82rem}
.pie .pie-c p{margin:0 0 10px;color:#fff;opacity:.4;font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.pie .pie-c a{display:block;margin:0 0 6px;color:#fff;opacity:.85;text-decoration:none}
.pie .pie-c a:hover{opacity:1;color:#fff;text-decoration:underline}
.pie-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:clamp(24px,3vw,40px);padding:16px 0 18px;border-top:1px solid rgba(255,255,255,.14);font-size:.72rem}
.pie-b p{margin:0;display:flex;align-items:center;gap:10px}
.pie-iso{display:block;width:20px;height:auto;color:var(--rojo);flex:none}
.pie-b nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.pie-b a{text-decoration:none;color:inherit}.pie-b a:hover{color:#fff}
.lema-v em{color:#fff}
@media (max-width:760px){.pie-main{grid-template-columns:1fr}.pie-lema{text-align:left}.pie-row{flex-direction:column}}

.pie .pie-c a.pie-sop{display:inline-flex;align-items:center;gap:.55em;margin:0 0 10px;padding:.5em .85em;border:1px solid rgba(236,36,39,.7);color:#fff;font-weight:600;opacity:1}
.pie .pie-c a.pie-sop:hover{background:var(--rojo);border-color:var(--rojo);text-decoration:none}
.sop-ic{width:1.25em;height:1.25em;flex:none}
.pc-ic{display:inline-flex;align-items:center;gap:.5em}
.pc-ic .wa-ic{width:1.15em;height:1.15em;flex:none;color:#25d366}
.pc-sop{margin-top:6px;padding:.35em .7em;border:1px solid rgba(255,255,255,.35)}
.pc-sop .sop-ic{color:var(--rojo)}
.pc-sop:hover{border-color:#fff;text-decoration:none!important}
@media (max-width:900px){.pie .pie-c{grid-template-columns:repeat(2,minmax(140px,auto))}}

/* CTA final: misma composición que el hero (línea 1 a la izquierda, línea 2 escalonada con trazo y flecha, botón bajo la línea 1) */
.respiro.cta .cierre-t{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(22px,4vw,56px);display:grid;grid-template-columns:auto 1fr;grid-template-areas:"l1 l1" "bt em";align-items:end;gap:clamp(12px,1.8vw,24px) clamp(24px,4vw,72px);text-align:left;color:#fff}
.c-h{display:contents;font:500 clamp(1.5rem,4.6vw,4.2rem)/1.04 var(--serif);text-transform:uppercase}
.c-l1{grid-area:l1;display:block;font:500 clamp(1.5rem,4.6vw,4.2rem)/1.04 var(--serif);text-transform:uppercase;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.c-h em{grid-area:em;display:block;font:500 clamp(1.5rem,4.6vw,4.2rem)/1.04 var(--serif);text-transform:uppercase;font-style:normal;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4);--af:.3em;--lt:.045em;padding-bottom:.16em}
.cierre-t .btn-xl{grid-area:bt;justify-self:start;font-size:clamp(.95rem,1.35vw,1.2rem);padding:1em 1.9em;margin-bottom:.4em}
@media (max-width:760px){.respiro.cta .cierre-t{grid-template-columns:1fr;grid-template-areas:"l1" "em" "bt"}}

/* barra "espejo": sin franja; solo el cristal que desenfoca, aclara y satura lo que pasa por detrás, difuminado hacia abajo (volver a la oscura: ?barra=vidrio) */
.barra[data-b=espejo]:not(.menu-on){background:none;border-bottom:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.barra[data-b=espejo]:not(.menu-on)::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0));-webkit-backdrop-filter:blur(30px) saturate(1.25) brightness(1.04);backdrop-filter:blur(30px) saturate(1.25) brightness(1.04);}
.barra[data-b=espejo]:not(.menu-on)::after{display:none}
.barra[data-b=espejo]:not(.menu-on) .logo{background:var(--rojo);-webkit-mask:url(/logo.svg) center/100% 100% no-repeat;mask:url(/logo.svg) center/100% 100% no-repeat;transition:background .3s}
.barra[data-b=espejo]:not(.menu-on) .logo img{opacity:0}
.barra[data-b=espejo]:not(.menu-on) .logo:hover{background:var(--carbon)}
.barra[data-b=espejo]:not(.menu-on) .burger{color:var(--carbon)}
.barra[data-b=espejo]:not(.menu-on) .burger:hover{color:var(--rojo)}

/* barra espejo: punto medio — sobre fondo oscuro el cristal se vuelve más blanco y el menú pasa a blanco */
.barra[data-b=espejo]:not(.menu-on).sobre-osc::before{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.14));-webkit-backdrop-filter:blur(30px) saturate(1.4) brightness(1.5);backdrop-filter:blur(30px) saturate(1.4) brightness(1.5)}
.barra[data-b=espejo]:not(.menu-on).sobre-osc::after{display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.4) 22%,rgba(255,255,255,.4) 78%,rgba(255,255,255,.08));pointer-events:none}
.barra[data-b=espejo]:not(.menu-on).sobre-osc .burger{color:#fff}
.barra[data-b=espejo]:not(.menu-on).sobre-osc .burger:hover{color:var(--rojo)}
.barra[data-b=espejo]:not(.menu-on).sobre-osc .logo:hover{background:#fff}
.barra[data-b=espejo]:not(.menu-on)::before{transition:background .4s,backdrop-filter .4s}
.barra[data-b=espejo] .burger{transition:color .4s}

/* menú cerrado: las líneas siempre rojas, sin cambiar con el fondo ni el hover */
.barra:not(.menu-on) .b-l i,.barra:not(.menu-on) .burger:hover .b-l i{background:var(--rojo)}



/* hero: línea roja fina, como las demás flechas del sitio */
.hero[data-t=subrayado] h1 em::after{height:2px}

/* botón de contacto bajo el logo del pie */
.pie-id{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.6vw,34px)}
.pie-id .btn-xl{font-size:clamp(.95rem,1.3vw,1.15rem);padding:1em 1.9em;animation:none;box-shadow:none}

/* pie: cada elemento entra desde abajo; su opacidad final es la que ya tenía */
.pie .rev:not(.vis){opacity:0}

/* ===== ficha de proyecto v2 ===== */
.fx-t{padding:clamp(40px,6vw,88px) var(--pad) clamp(26px,3.4vw,48px);max-width:1640px;margin:0 auto}
.fx-t .rot{margin-bottom:1.4em}
.fx-t h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .5em;font:400 clamp(1.8rem,4.2vw,3.7rem)/1.08 var(--serif);letter-spacing:-.015em;text-transform:uppercase}
.fx-n{color:var(--carbon)}
.fx-ar{align-self:center;width:.85em;height:.85em;flex:none;color:var(--rojo)}
.fx-d{font-style:normal;color:var(--carbon)}
.fx-c{margin:1.3em 0 0;font:600 .7rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.fx-m{display:flex;justify-content:center;background:var(--carbon2)}
.fx-m>img{display:block;width:100%;height:auto;max-height:88vh;object-fit:contain}
.fx-vw{width:min(100%,1520px);aspect-ratio:16/9}
.fx-vw iframe{display:block;width:100%;height:100%;border:0}
.fx-cu{max-width:1640px;margin:0 auto;padding:clamp(48px,6.4vw,104px) var(--pad) clamp(52px,7vw,110px)}
.fx-cu>*{margin-bottom:clamp(52px,6.6vw,108px)}
.fx-cu>*:last-child{margin-bottom:0}
.fx-i{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,88px)}
.fx-b h2{margin:0 0 1.1em;font:600 .74rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--carbon)}
.fx-b p{margin:0 0 1em;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.7;max-width:62ch}
.fx-l{margin-top:1.6em!important}
.fx-l a{font:600 .8rem/1 var(--sans);letter-spacing:.12em;color:var(--carbon);text-decoration:none;border-bottom:1.5px solid var(--rojo);padding-bottom:.35em;transition:color .25s}
.fx-l a:hover{color:var(--rojo)}
.fx-f{margin:0;display:flex;justify-content:center}
.fx-f img{display:block;width:100%;height:auto}
.fx-s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,88px);align-items:center}
.fx-inv .fx-f{order:-1}
.fx-solo{grid-template-columns:minmax(0,760px)}
.fx-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:center}
.fx-g .fx-ancha{grid-column:1/-1}
@media(max-width:900px){.fx-i,.fx-s{grid-template-columns:1fr}.fx-inv .fx-f{order:0}.fx-g{grid-template-columns:1fr}}

/* ficha: composición editorial de imágenes */
.fx-d2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(14px,2vw,32px);align-items:start}
.fx-d2>.fx-f:nth-child(1){grid-column:1/8;justify-content:flex-start}
.fx-d2>.fx-f:nth-child(2){grid-column:8/13;justify-content:flex-end;margin-top:clamp(40px,9vw,170px)}
.fx-d2.fx-inv2>.fx-f:nth-child(1){grid-column:1/6;margin-top:clamp(40px,9vw,170px)}
.fx-d2.fx-inv2>.fx-f:nth-child(2){grid-column:6/13;margin-top:0}
.fx-uno{width:min(100%,64%)}
.fx-uno.fx-inv2{margin-left:auto}
.fx-t3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,22px);align-items:center}
@media(max-width:760px){.fx-d2{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}.fx-d2>.fx-f:nth-child(n){grid-column:1/-1;margin-top:0;justify-content:center}.fx-uno{width:100%}.fx-t3{grid-template-columns:1fr}}
/* proyectos sugeridos */
.sug{background:var(--carbon);color:#fff;padding:clamp(56px,8vw,120px) var(--pad) clamp(60px,8vw,120px)}
.sug-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;max-width:1640px;margin:0 auto clamp(26px,3.4vw,52px)}
.sug-h h2{font:400 clamp(2rem,5vw,4.4rem)/1.04 var(--serif);letter-spacing:-.02em}
.sug-h a{font:600 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1.5px solid var(--rojo);padding-bottom:.4em;transition:color .25s}
.sug-h a:hover{color:var(--rojo)}
.sug .tiles{max-width:1640px;margin:0 auto;background:transparent;gap:clamp(8px,1vw,16px)}
@media(max-width:760px){.sug .tiles{grid-template-columns:1fr}}

/* sugeridos: mismo lenguaje editorial del listado, sobre fondo oscuro */
.sug .tile a{position:relative}
.sug .tile a::before{content:counter(p,decimal-leading-zero);position:absolute;z-index:3;top:-.42em;left:-.06em;font:400 clamp(4rem,8vw,7.5rem)/1 var(--serif);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--rojo);transition:color .4s;pointer-events:none}
.sug .tile:hover a::before{color:var(--rojo)}
.sug .tile-i{display:none}
.sug .tile-m{border-top:0;padding-top:0;margin-top:0;position:relative;z-index:2}
.sug .tile .tile-n{display:inline-block;background:var(--carbon);color:#fff;margin:-.62em 0 0 clamp(12px,2vw,28px);padding:.18em .5em .05em 0;font-size:clamp(1.15rem,2vw,1.9rem);line-height:1}
.sug .tile .tile-n::after{color:var(--rojo)}
.sug .tile-im{aspect-ratio:4/3}
.sug .tile{max-width:none}
.sug .tiles{align-items:start;padding-top:1.2em}

.pie .pie-c .pie-t{display:block;margin:0 0 6px;color:#fff;opacity:.85;cursor:default}
.fx-l a{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.35em .9em;border-bottom:0;padding-bottom:0}
.fx-l a span{font:600 .74rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--carbon);border-bottom:1.5px solid var(--rojo);padding-bottom:.4em;transition:color .25s}
.fx-l a b{font:500 .8rem/1.2 var(--sans);letter-spacing:.08em;color:var(--gris)}
.fx-l a:hover span{color:var(--rojo)}

/* menú móvil: todo cabe en una pantalla, sin scroll */
@media(max-width:900px){
.panel{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;padding:clamp(72px,10vh,92px) var(--pad) clamp(16px,3vh,28px);gap:clamp(14px,2.6vh,26px);overflow:hidden}
.panel-n a{font-size:clamp(1.45rem,min(7.4vw,5.4vh),3rem);line-height:1.12}
.panel-n li{margin:0}
}

/* ===== menú móvil, versión final: lista grande arriba, contacto y botón abajo; sin imágenes y sin scroll ===== */
@media(max-width:900px){
.panel{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:clamp(12px,2.4vh,24px);padding:clamp(76px,11vh,96px) var(--pad) max(clamp(16px,2.8vh,26px),env(safe-area-inset-bottom));overflow:hidden}
.panel-n{flex:1;display:flex;align-items:center;min-height:0}
.panel-n ol{width:100%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,.8vh,8px)}
.panel-n a{font-size:clamp(1.5rem,min(8.2vw,5.5vh),2.8rem);line-height:1.12}
.panel-n a em{font-size:.62rem;min-width:1.7em}
.panel-p{flex:none;gap:clamp(10px,1.8vh,18px)}
.panel-v,.panel-t{display:none!important}
.panel-c{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.92rem}
.panel-p .btn{padding:clamp(15px,2.4vh,20px) 16px}
}

/* ficha en móvil: espacios homogéneos (entre bloques 48, texto-imagen 32, imagen-imagen 20) */
@media(max-width:760px){
.fx-t{padding:34px var(--pad) 24px}
.fx-cu{padding-top:44px;padding-bottom:52px}
.fx-cu>*{margin-bottom:48px}
.fx-i{gap:36px}
.fx-s{gap:32px}
.fx-d2,.fx-t3,.fx-g{gap:20px}
.fx-b h2{margin-bottom:.9em}
.sug{padding-top:52px;padding-bottom:56px}
}


/* ===== navegación sin saltos: bloqueo de scroll, etiqueta del menú y transiciones coordinadas ===== */
.sin-scroll{overflow:hidden;padding-right:var(--sbw,0)}
.b-t{display:inline-block;min-width:4.6em;text-align:right}
/* al abrir, el cambio es inmediato; al cerrar, la barra espera a que el telón se retire */
.logo img,.burger{transition:filter .35s var(--ease) .62s,color .35s ease .62s}
.barra.menu-on .logo img,.barra.menu-on .burger{transition-delay:0s}
.barra:not(.menu-on) .mixo-bar,.barra:not(.menu-on) .barra-sep{transition:opacity .4s ease .62s,visibility 0s linear .62s}
.barra.menu-on .mixo-bar,.barra.menu-on .barra-sep{transition:opacity .2s ease,visibility 0s linear .2s}

/* ===== línea con flecha: un solo formato en hero, videos, pie y menú ===== */
:root{--fin:0px;--lt:2px;--af:20px}
.hero[data-t=subrayado] h1 em::after,.lf::after,.panel-t em::after{right:calc(var(--pad)*-1 + var(--fin));height:var(--lt)}
.hero[data-t=subrayado] h1 em::before,.lf::before,.panel-t em::before{width:var(--af);height:var(--af);transform:translateX(-80%);bottom:calc((var(--lt) - var(--af))/2)}
.lf.on::before,.panel.abierto .panel-t em::before{left:calc(100% + var(--pad) - var(--fin))}
@keyframes puntaHero{0%{left:0;opacity:0}3%{opacity:1}100%{left:calc(100% + var(--pad) - var(--fin));opacity:1}}
@media(prefers-reduced-motion:reduce){.hero[data-t=subrayado] h1 em::before{left:calc(100% + var(--pad) - var(--fin))}.lf::before{left:calc(100% + var(--pad) - var(--fin))}}
.hero-t em{padding-bottom:.16em}
.hero-t .l1{padding-bottom:.02em}
.lema-v em.lf{padding-bottom:.2em}

/* ===== hero móvil: lo esencial ===== */
.hp-c{display:none}
@media(max-width:700px){
.hp-l{display:none}.hp-c{display:inline}
.hero-p{max-width:26ch}
.hero-d{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 16px;font-size:.78rem;padding-top:14px}
}


/* ===== indicadores homologados: enlace de texto (.ln), títulos de sección y números ===== */
.ln{display:inline-flex;align-items:center;gap:.7em;font:600 .78rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--carbon);text-decoration:none;padding-bottom:.55em;border-bottom:1.5px solid var(--rojo);transition:color .25s,gap .3s var(--ease)}
.ln i{font-style:normal;color:var(--rojo);font-size:1.15em;letter-spacing:0;line-height:1;transition:transform .3s var(--ease)}
.ln:hover{color:var(--rojo);gap:1em}
.ln:hover i{transform:translateX(3px)}
.sug .ln,.pie .ln{color:#fff}
.fx-l{margin-top:1.8em!important;display:flex;flex-direction:column;align-items:flex-start;gap:.8em}
.fx-l small{font:400 .86rem/1 var(--sans);letter-spacing:.04em;color:var(--gris)}
.fx-l a,.fx-l a:hover{border-bottom:1.5px solid var(--rojo);padding-bottom:.55em}
.fx-b h2{display:flex;align-items:center;gap:14px;margin:0 0 1.3em;font:600 clamp(.9rem,1.05vw,1rem)/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--carbon)}
.fx-b h2::before{content:"";width:30px;height:1.5px;background:var(--rojo);flex:none}
.sug .tiles{row-gap:clamp(60px,7vw,92px)}
.sug .tile a::before{top:-.5em;font-size:clamp(3.4rem,6.4vw,6rem)}
.sug .tile .tile-n{margin-top:-.4em;margin-bottom:0}
.sug .tile-m{padding-bottom:4px}
.pie .pie-c a.pie-sop{white-space:nowrap;flex-wrap:nowrap}
.pie .pie-c a.pie-sop span{white-space:nowrap}
@media(max-width:760px){
.pie .pie-c a.pie-sop{font-size:.84rem;padding:.5em .8em}
.sug .tiles{row-gap:72px}
.sug .tile a::before{font-size:3.6rem}
.fx-b h2{margin-bottom:1.1em}
}
.pie-leg{display:flex;flex-wrap:wrap;gap:6px 22px}


/* sitio del proyecto: protagonista el dominio; «Ver proyecto en línea» queda como rótulo secundario */
.fx-l{margin-top:2em!important;display:flex;flex-direction:column;align-items:flex-start;gap:.7em}
.fx-l small{order:-1;font:600 .68rem/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--gris)}
.fx-l a,.fx-l a:hover{display:inline-block;font:500 clamp(1.35rem,2.2vw,1.9rem)/1.15 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--carbon);text-decoration:none;border-bottom:2px solid var(--rojo);padding-bottom:.28em;overflow-wrap:anywhere;transition:color .25s}
.fx-l a:hover{color:var(--rojo)}
.fx-l a::after{content:none}

/* sin recuadros de enfoque raros al tocar en móvil; el aro de teclado se conserva */
html{-webkit-tap-highlight-color:transparent}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none}
@media(hover:none){.mixo-bar:hover,.burger:hover{opacity:1!important}}


/* ===== rendimiento de video en móvil: sin mezcla de color por fotograma ni desenfoque sobre el video ===== */
@media(max-width:900px),(hover:none) and (pointer:coarse){
.hero[data-f]::before,.respiro::before{display:none!important}
.hero-v,.respiro video{transform:translateZ(0)}
}

/* móvil: «Más negocio.» ocupa todo el ancho para que su línea y su flecha lleguen al borde */
@media(max-width:900px){.hero[data-f] .hero-t h1 em,.hero[data-t] .hero-t h1 em{display:block}}
@media(max-width:900px){.hero .hero-t h1{width:100%;max-width:none}}

/* pie recompuesto: logo + lema a la izquierda, contacto discreto, puerta a Mi Web PyME al final */
.pie-id{gap:clamp(14px,2vw,24px)}
.pie-id .pie-lema{text-align:left;font-size:clamp(1.4rem,2.4vw,2.1rem)}
.pie-main{grid-template-columns:1fr auto;align-items:center;gap:20px 40px;padding-bottom:0}
.pie-cm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:.95rem}
.pie-cm .pie-k{margin:0}
.pie-cm a{display:inline-flex;align-items:center;gap:.5em;width:auto;font:inherit;color:#fff;text-decoration:none;opacity:.9}
.pie-cm a:hover{color:var(--rojo);opacity:1}
.pie-cm .wa-ic{width:1.1em;height:1.1em;color:#25d366;flex:none}
@media (max-width:760px){.pie-main{grid-template-columns:1fr}}
.pie-main{padding-bottom:clamp(22px,2.6vw,34px)}
.pyme-f{--az:#0052FC;display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,3vw,40px);margin:0 0 clamp(18px,2.4vw,28px);padding:16px clamp(16px,2vw,26px);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.pyme-logo{display:block;width:auto;height:clamp(28px,3vw,38px);flex:none}
.pyme-t{display:flex;flex-direction:column;gap:2px;margin:0;flex:1 1 260px;font-size:.84rem;color:rgba(255,255,255,.62)}
.pyme-t strong{font-weight:600;font-size:.95rem;color:#fff}
.pyme-btn{display:inline-flex;align-items:center;gap:.6em;border:0;cursor:pointer;font:600 .84rem/1 var(--sans);padding:.85em 1.3em;background:var(--az);color:#fff;transition:background .25s}
.pyme-btn:hover{background:#1FA5FE}
.pyme-btn svg{width:.95em;height:.95em;animation:pymeFlecha 1.8s ease-in-out infinite}
.pyme-btn[aria-expanded=true]{display:none}
@keyframes pymeFlecha{50%{transform:translateY(.25em)}}
@media (prefers-reduced-motion:reduce){.pyme-btn svg{animation:none}}
.pyme-pozo .mwp{scroll-margin-top:var(--bh,72px);padding-top:clamp(12px,3vh,40px)}

/* pie v3: botón discreto bajo el lema; Mi Web PyME ocupa la columna derecha */
.pie-row{align-items:stretch;justify-content:space-between;gap:28px clamp(40px,6vw,100px)}
.pie-id{align-items:flex-start;gap:clamp(12px,1.6vw,20px)}
.pie-cta{display:inline-flex;align-items:center;gap:.7em;font-size:.88rem;padding:.9em 1.5em;border-radius:999px}
.pie-cta svg{width:1em;height:1em;flex:none;transition:transform .3s}
.pie-cta:hover svg{transform:translateX(4px)}
.pie-cm{margin-top:clamp(4px,1vw,12px)}
.pie-der{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,3vw,44px);min-width:0}
.pie-der .pyme-f{margin:0}
.pie-main{padding:0;min-height:1px;margin:clamp(26px,3.4vw,46px) 0 0}
@media (max-width:760px){.pie-row{flex-direction:column}}
/* menú: acceso aparte para quien está empezando */
.panel-py{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:14px 18px;border:1px solid #1FA5FE;color:#fff;text-decoration:none;background:rgba(31,165,254,.08);transition:background .25s,border-color .25s}
.panel-py:hover{background:rgba(31,165,254,.2);border-color:#fff}
.panel-py .pp-t{display:flex;flex-direction:column;gap:3px}
.panel-py em{font:600 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:#8fd0ff}
.panel-py b{font:500 1.25rem/1.1 var(--serif);letter-spacing:-.01em}
.panel-py .hex-m{height:1.5rem;margin:0;align-self:center}

/* pie v4: dos columnas arriba (marca | navegación), tarjeta PyME a lo ancho, sin vacíos */
.pie{padding-top:clamp(34px,4vw,56px)}
.pie-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start;gap:28px clamp(40px,6vw,100px);margin-bottom:clamp(26px,3vw,40px)}
.pie-logo img{height:clamp(40px,4.6vw,64px)}
.pie-id{gap:clamp(10px,1.3vw,16px)}
.pie-id .pie-lema{font-size:clamp(1.25rem,2vw,1.7rem)}
.pie-cm{margin-top:4px}
.pie-der{display:block}
.pie .pie-c{justify-content:space-between;grid-template-columns:repeat(3,auto);gap:20px clamp(28px,4vw,70px)}
.pyme-f{margin:0}
.pie-main{margin-top:clamp(22px,2.6vw,34px)}
@media (max-width:760px){.pie-row{grid-template-columns:1fr}}

/* pie v5: más aire entre bloques; franja PyME agrupada */
.pie{padding-top:clamp(48px,5.4vw,78px)}
.pie-row{margin-bottom:clamp(40px,4.6vw,64px)}
.pie-id{gap:clamp(18px,2.2vw,28px)}
.pie-cm{margin-top:clamp(8px,1.2vw,16px)}
.pie .pie-c{gap:28px clamp(36px,5vw,84px)}
.pie .pie-c a,.pie .pie-c .pie-t{margin-bottom:10px}
.pyme-f{justify-content:center;gap:16px clamp(22px,2.6vw,38px);padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,34px)}
.pyme-t{flex:0 1 auto}
.pie-main{margin-top:clamp(34px,4vw,54px)}
.pie-b{margin-top:clamp(34px,4vw,54px);padding:20px 0 24px}

/* Mi Web PyME en móvil: se ve completa, con su isotipo */
@media(max-width:900px){
.mwp-iso{display:block;justify-self:center;width:min(58vw,260px);margin-top:clamp(8px,3vw,24px)}
.mwp::before{width:120%;right:-10%;top:auto;bottom:4%;transform:none}
.mwp-logo{width:clamp(140px,38vw,190px)}
.mwp-b .btn{width:100%;text-align:center}
.mwp-p,.mwp-pt{max-width:none}
}

/* servicios → clientes: menos aire y fondo distinto para separar las secciones */
#servicios.cre{padding-bottom:clamp(40px,5vw,72px)}
#clientes.cre{background:var(--crema2);padding-top:clamp(48px,6vw,88px);border-top:1px solid var(--linea)}

/* móvil: el pie no debe ensanchar la página (quedaba una columna en blanco a la derecha) */
@media (max-width:900px){
.pie .pie-c{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
.pie .pie-c>div:last-child{grid-column:1/-1}
.pie .pie-c a,.pie .pie-c .pie-t{overflow-wrap:anywhere}
}
html,body{overflow-x:clip}

/* menú en escritorio: información a la izquierda, navegación grande a la derecha */
@media(min-width:901px){
.panel{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(40px,7vw,130px)}
.panel-p{order:-1;max-width:34rem;justify-self:start}
.panel-n{justify-self:end;width:100%}
.panel-n ol{justify-items:start}
.panel-n li{width:100%}
}

/* ===== SEO / AEO: bloques de contenido (servicios, ciudades, FAQ) ===== */
.resp{font:400 clamp(1.15rem,2vw,1.5rem)/1.5 var(--sans);color:var(--carbon);max-width:62ch}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--linea)}
.svc li{padding:26px 28px 26px 0;border-bottom:1px solid var(--linea)}
.svc h3{font-size:1.25rem;margin:0 0 .5em}
.svc h3 a{text-decoration:none}
.svc p{margin:0;color:var(--gris);max-width:44ch}
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.pasos span{font:600 .72rem var(--sans);letter-spacing:.14em;color:var(--rojo)}
.pasos h3{font-size:1.2rem;margin:.4em 0 .5em}
.pasos p{margin:0;color:var(--gris)}
.faq{margin:clamp(40px,6vw,80px) 0 0;max-width:860px}
.faq h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.8em}
.faq details{border-top:1px solid var(--linea);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;font:600 1.05rem/1.4 var(--sans);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--rojo);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:.9em 0 0;color:var(--gris);max-width:62ch}
.tiles-seo{margin-top:8px}
.rot-l{color:inherit;text-decoration:none}
.rot-l:hover{text-decoration:underline}
.pie-c{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:.85rem}
.pie-c p{margin:0;font-weight:600;flex-basis:100%}
.pie-c a{text-decoration:none;opacity:.8}.pie-c a:hover{opacity:1;text-decoration:underline}
@media(max-width:900px){.svc{grid-template-columns:1fr}.pasos{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pasos{grid-template-columns:1fr}}

/* ===== proyectos: composición editorial (imagen limpia + texto debajo) ===== */
.proy{padding:clamp(48px,7vw,110px) var(--pad) clamp(40px,5vw,70px);background:var(--crema)}
.proy-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,4vw,56px)}
.proy-h .rot{margin-bottom:.8em}
.proy-h h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.mas-l{color:var(--rojo);font-weight:600;font-size:.9rem;text-decoration:none;white-space:nowrap}
.mas-l:hover{text-decoration:underline}
.tiles{gap:clamp(24px,3.4vw,52px) clamp(18px,2.4vw,36px);background:none;counter-reset:p}
.tile{position:static;aspect-ratio:auto;overflow:visible;background:none!important;counter-increment:p}
.tile a{position:static;display:block;color:inherit;text-decoration:none}
.tile a::after{display:none}
.tile-im{display:block;position:relative;overflow:hidden;aspect-ratio:var(--ar,1);background:var(--carbon2)}
.tile-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tile-im::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#e8337a,#f0a93a 33%,#1fa35b 66%,#1f6fe0);mix-blend-mode:color;opacity:0;transition:opacity .5s}
.tile:hover .tile-im::after{opacity:.5}
.tile-m{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--linea)}
.tile-i{display:block;font:600 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.tile-i::before{content:counter(p,decimal-leading-zero) " — "}
.tile .tile-n{position:static;display:block;margin-top:.4em;color:var(--carbon);font:400 clamp(1.1rem,1.6vw,1.45rem)/1.15 var(--serif)}
.tile .tile-n::after{float:none;margin-left:.4em;color:var(--rojo)}
/* ===== home: collage editorial =====
   Regla de calidad: cada pieza conserva la proporción real de su imagen (sin recortar) y nunca se
   muestra a más de su ancho original (--w, en px). Las ranuras W son para banners, S para cuadradas. */
.tiles{align-items:start}
.tile{max-width:calc(var(--w,700)*1px);width:100%}
#pool{grid-template-columns:repeat(12,1fr);gap:clamp(56px,8vw,130px) clamp(16px,2vw,32px);padding:clamp(14px,2vw,30px) 0 clamp(20px,4vw,60px)}
:is(#pool,#lista) .tile a{position:relative}
:is(#pool,#lista) .tile a::before{content:counter(p,decimal-leading-zero);position:absolute;z-index:3;top:-.42em;left:-.06em;font:400 clamp(4.5rem,11vw,10rem)/1 var(--serif);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--rojo);pointer-events:none;text-shadow:-1px 0 var(--crema),1px 0 var(--crema),0 -1px var(--crema),0 1px var(--crema);transition:color .4s}
:is(#pool,#lista) .tile:hover a::before{color:var(--rojo)}
:is(#pool,#lista) .tile-i::before{content:none}
:is(#pool,#lista) .tile-m{border-top:0;padding-top:0;margin-top:0;position:relative;z-index:2}
:is(#pool,#lista) .tile-i{display:none}
:is(#pool,#lista) .tile .tile-n{display:inline-block;background:var(--crema);margin:-.62em 0 0 clamp(12px,2vw,28px);padding:.18em .5em .05em 0;font-size:clamp(1.15rem,2vw,1.9rem);line-height:1}
:is(#pool,#lista) .tile-i{margin:.9em 0 0 clamp(12px,2vw,28px);position:relative;z-index:3}
#pool .tile:nth-child(1){grid-column:1/10}
#pool .tile:nth-child(1) .tile-n{font-size:clamp(2rem,5vw,4.6rem)}
#pool .tile:nth-child(2){grid-column:10/13;margin-top:clamp(40px,12vw,190px)}
#pool .tile:nth-child(3){grid-column:2/6}
#pool .tile:nth-child(4){grid-column:6/13;margin-top:clamp(30px,9vw,150px)}
#pool .tile:nth-child(4) .tile-n{font-size:clamp(1.6rem,3.6vw,3.2rem)}
#pool .tile:nth-child(5){grid-column:1/5}
#pool .tile:nth-child(6){grid-column:7/11;margin-top:clamp(30px,10vw,160px)}
#pool .tile:nth-child(7){grid-column:3/13}
#pool .tile:nth-child(7) .tile-n{font-size:clamp(1.8rem,4.2vw,3.8rem)}
#pool .tile:nth-child(2) .tile-n{font-size:clamp(1rem,1.7vw,1.5rem)}
/* hover: solo reacciona la pieza tocada; las demás no se tocan. Sin filtros sobre la imagen. */
:is(#pool,#lista) .tile-im::after{display:none}
:is(#pool,#lista) .tile .tile-n{background-image:linear-gradient(var(--rojo),var(--rojo));background-repeat:no-repeat;background-position:0 100%;background-size:0 .06em;background-clip:padding-box;transition:background-size .6s var(--ease)}
:is(#pool,#lista) .tile:hover .tile-n{background-size:calc(100% - .5em) .06em}
:is(#pool,#lista) .tile .tile-n::after{display:none}
/* hover: solo el número se asienta unos px y se rellena de rojo */
:is(#pool,#lista) .tile a::before{transition:color .8s var(--ease),transform .9s var(--ease)}
:is(#pool,#lista) .tile:hover a::before{transform:translateY(4px)}
.proy-f{margin:clamp(36px,5vw,72px) 0 0;text-align:right;padding-top:18px}
@media(max-width:900px){
#pool{grid-template-columns:repeat(2,1fr);gap:56px 14px}
#pool .tile{grid-column:auto!important;margin-top:0!important}
#pool .tile:nth-child(3n+1){grid-column:1/-1!important}
#pool .tile:nth-child(3n+2){margin-top:30px!important}
#pool .tile .tile-n{font-size:clamp(1.05rem,3.6vw,1.5rem)!important}
#pool .tile:nth-child(3n+1) .tile-n{font-size:clamp(1.6rem,6vw,2.6rem)!important}
}
@media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr);gap:22px 14px}.tile .tile-n{font-size:.98rem}.proy-h{align-items:flex-start;flex-direction:column;gap:14px}}

/* entrada de los proyectos: la imagen se descubre de arriba hacia abajo y el nombre sube, igual que el hero */
@media(prefers-reduced-motion:no-preference){
:is(#pool,#lista) .tile.ent .tile-im{clip-path:inset(0 0 100% 0)}
:is(#pool,#lista) .tile.ent .tile-n,:is(#pool,#lista) .tile.ent .tile-i{opacity:0;transform:translateY(.6em)}
:is(#pool,#lista) .tile.ent a::before{opacity:0}
:is(#pool,#lista) .tile.ent.dentro .tile-im{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease) var(--d,0s)}
:is(#pool,#lista) .tile.ent.dentro .tile-n,:is(#pool,#lista) .tile.ent.dentro .tile-i{opacity:1;transform:none;transition:opacity .9s var(--ease) calc(var(--d,0s) + .45s),transform 1.1s var(--ease) calc(var(--d,0s) + .45s)}
:is(#pool,#lista) .tile.ent.dentro a::before{opacity:1;transition:opacity .9s var(--ease) calc(var(--d,0s) + .7s),color .8s var(--ease),transform .9s var(--ease)}
}

/* /proyectos/: el mismo collage. La ranura la decide el tipo de imagen: panorámica = 8 columnas, cuadrada = 4 */
#lista{grid-template-columns:repeat(12,1fr);grid-auto-flow:row dense;gap:clamp(56px,7vw,110px) clamp(16px,2vw,32px);padding:clamp(14px,2vw,30px) 0 clamp(20px,4vw,60px)}
#lista .tile[data-k=w]{grid-column:span 8}
#lista .tile[data-k=s]{grid-column:span 4}
#lista .tile[data-o="1"]{margin-top:clamp(30px,8vw,130px)}
#lista .tile[data-o="2"]{margin-top:clamp(14px,3vw,50px)}
#lista .tile[data-k=w] .tile-n{font-size:clamp(1.6rem,3.2vw,2.8rem)}
@media(max-width:900px){
#lista{grid-template-columns:repeat(2,1fr);gap:56px 14px}
#lista .tile[data-k=w]{grid-column:1/-1}
#lista .tile[data-k=s]{grid-column:auto}
#lista .tile[data-o="1"],#lista .tile[data-o="2"]{margin-top:0}
#lista .tile[data-o="1"]{margin-top:28px}
#lista .tile .tile-n{font-size:clamp(1.05rem,3.6vw,1.5rem)}
#lista .tile[data-k=w] .tile-n{font-size:clamp(1.5rem,5.4vw,2.4rem)}
}