/* Portada de Improva · papel beis, tinta y rojo. Filetes, números al margen, esquinas rectas. */
:root{
  --papel:#F0E8D8; --papel-2:#E6DBC5; --blanco:#FBF7EF; --rojo:#C0241A; --rojo-2:#9C1C14;
  --tinta:#2C1810; --tinta-2:rgba(44,24,16,.66); --filete:rgba(44,24,16,.22);
  --display:"Tanker","Impact","Arial Narrow Bold",sans-serif;
  --texto:"Switzer",system-ui,-apple-system,sans-serif;
  --m:clamp(16px,4.5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.claim .l{opacity:1;transform:none}}
body{background:var(--papel);color:var(--tinta);font:400 17px/1.55 var(--texto);overflow-x:hidden}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:3px;text-decoration-color:var(--rojo)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
img,video{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.caja{max-width:1280px;margin:0 auto;padding-inline:var(--m)}
.d{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:.005em}

/* ── navegación ── */
.nav{position:sticky;top:0;z-index:50;background:var(--papel);border-bottom:2px solid var(--tinta)}
.nav .caja{display:flex;align-items:center;gap:28px;height:64px}
.nav .logo img{height:24px;width:auto}
.menu{display:flex;gap:26px;margin-left:auto;font-size:15px;align-items:center}
.menu > a,.menu summary{text-decoration:none;cursor:pointer;list-style:none;padding:6px 0;border-bottom:2px solid transparent}
.menu > a:hover,.menu summary:hover{border-bottom-color:var(--rojo)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:" +";color:var(--rojo)}
.menu details[open] summary::after{content:" −"}
.menu details{position:relative}
.desp{position:absolute;top:calc(100% + 18px);left:-24px;width:min(440px,90vw);background:var(--blanco);border:2px solid var(--tinta);padding:8px 0}
.desp a{display:grid;grid-template-columns:44px 1fr;gap:4px;padding:12px 22px;text-decoration:none;border-bottom:1px solid var(--filete)}
.desp a:last-child{border-bottom:0}
.desp a:hover{background:var(--papel)}
.desp b{font-weight:600}
.desp i{font-style:normal;color:var(--rojo);font:400 22px/1 var(--display)}
.desp span{grid-column:2;font-size:14px;color:var(--tinta-2)}
.nav-cta{background:var(--tinta);color:var(--papel);text-decoration:none;padding:11px 18px;font-weight:600;font-size:15px}
.nav-cta:hover{background:var(--rojo);color:var(--blanco)}
.hamb{display:none;margin-left:auto;border:0;background:none;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){
  .hamb{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:64px;background:var(--papel);border-bottom:2px solid var(--tinta);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--m) 18px}
  .menu.abierto{display:flex}
  .menu > a,.menu summary{padding:14px 0;border-bottom:1px solid var(--filete);font-size:18px}
  .desp{position:static;width:auto;border:0;background:none;padding:0 0 8px}
  .desp a{padding:10px 0}
  .nav-cta{text-align:center;margin-top:14px}
}

/* ── portada ── */
.hero{border-bottom:2px solid var(--tinta);overflow:hidden}
.hero .caja{display:grid;grid-template-columns:1fr minmax(240px,320px);gap:clamp(24px,4vw,56px);padding-block:clamp(28px,5vw,64px) 0;align-items:end}
.claim{font-size:clamp(76px,15.5vw,236px);line-height:.8;margin-left:-.04em}
.claim sup{font:400 .22em var(--texto);color:var(--rojo);vertical-align:.95em;margin-left:.06em}
.claim .l{display:block;opacity:0;transform:translateY(.25em);animation:entra .7s cubic-bezier(.2,.9,.2,1) forwards}
.claim .l:nth-child(2){animation-delay:.12s}.claim .l:nth-child(3){animation-delay:.24s}
@keyframes entra{to{opacity:1;transform:none}}
.bajo{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;margin:26px 0 clamp(28px,4vw,48px);align-items:start}
.nota{font-size:15px;border-top:2px solid var(--rojo);padding-top:10px;max-width:30ch}
.nota b{color:var(--rojo);font-weight:600;margin-right:4px}
.lead{font-size:clamp(18px,1.8vw,22px);line-height:1.4;max-width:34ch}
.lead strong{font-weight:600}
.acciones{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-top:22px}
.boton{display:inline-block;background:var(--rojo);color:var(--blanco);text-decoration:none;font-weight:600;padding:16px 24px;font-size:16px}
.boton:hover{background:var(--tinta)}
.enl{font-weight:600}
.reel{position:relative;aspect-ratio:9/16;background:var(--tinta);color:var(--papel);align-self:stretch;max-height:560px;margin-bottom:-2px;overflow:hidden}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .vacio{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font-size:14px;opacity:.75}
.reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:13px;background:var(--tinta)}
@media(max-width:820px){
  /* móvil: el vídeo ocupa el ancho y el claim va arriba como pegatina; una persiana sube al cargar */
  .hero .caja{grid-template-columns:1fr;grid-template-areas:"escena" "bajo";gap:0;padding-top:0}
  .hero .caja>div:first-child{display:contents}
  .hero .claim{grid-area:escena;align-self:start;position:relative;z-index:2;color:var(--tinta);padding-top:22px;font-size:clamp(70px,20vw,140px);line-height:.86;filter:url(#troquel);transform-origin:50% 100%;will-change:transform;animation:saltos 1.9s .95s linear both}
  /* el claim entero es una pegatina troquelada: el beige del fondo baja y rodea las letras sobre el vídeo; al subir la persiana entra dando botes, como la lámpara de Pixar, hasta quedarse quieta; solo se anima la transformación para que vaya fluido */
  .hero .claim .l{width:max-content;max-width:100%;padding:.07em .1em 0 .06em;margin-bottom:.02em;opacity:1;transform:none;animation:none}
  .hero .claim .l:nth-child(1){rotate:-1deg}
  .hero .claim .l:nth-child(2){rotate:1.2deg;margin-left:.12em}
  .hero .claim .l:nth-child(3){rotate:-.6deg}
  .bajo{grid-area:bajo;grid-template-columns:1fr;gap:18px;margin-top:22px}
  /* el vídeo empieza por debajo de las dos primeras líneas: solo «CUESTA.» se pega encima, sobre la pared, y la cabeza queda libre */
  .reel{grid-area:escena;aspect-ratio:auto;width:auto;height:min(72svh,640px);min-height:420px;max-height:none;margin:calc(clamp(70px,20vw,140px) * 1.86 + 22px) calc(-1 * var(--m)) 0;justify-self:stretch;align-self:start}
  .reel figcaption{left:auto;right:0;padding:8px 12px;font-size:12px;letter-spacing:.02em}
  .reel::after{content:"";position:absolute;inset:0;background:var(--tinta);transform:scaleY(0);transform-origin:50% 0;animation:persiana 1s .45s cubic-bezier(.7,0,.2,1) both;pointer-events:none}
}
@keyframes persiana{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes saltos{0%{transform:translate(118%,-40px) rotate(10deg);animation-timing-function:cubic-bezier(.55,0,.75,.45)}14%{transform:translate(78%,0) scale(1.08,.86) rotate(0);animation-timing-function:cubic-bezier(.25,.6,.45,1)}26%{transform:translate(56%,-64px) scale(.96,1.05) rotate(-6deg);animation-timing-function:cubic-bezier(.55,0,.75,.45)}38%{transform:translate(34%,0) scale(1.07,.88) rotate(0);animation-timing-function:cubic-bezier(.25,.6,.45,1)}49%{transform:translate(20%,-38px) scale(.97,1.04) rotate(-4deg);animation-timing-function:cubic-bezier(.55,0,.75,.45)}59%{transform:translate(8%,0) scale(1.05,.92) rotate(0);animation-timing-function:cubic-bezier(.25,.6,.45,1)}68%{transform:translate(3%,-16px) rotate(-2deg);animation-timing-function:cubic-bezier(.55,0,.75,.45)}77%{transform:translate(0,0) scale(1.04,.94);animation-timing-function:cubic-bezier(.25,.6,.45,1)}87%{transform:scale(.98,1.03)}100%{transform:none}}

/* ── secciones con número al margen ── */
.sec{border-bottom:2px solid var(--tinta);padding-block:clamp(48px,7vw,96px)}
.sec .caja{display:grid;grid-template-columns:clamp(56px,9vw,130px) 1fr;column-gap:clamp(16px,3vw,40px)}
.sec .caja > *{min-width:0}
.num{font:400 clamp(44px,7vw,104px)/.8 var(--display);color:var(--rojo)}
.tit{font-size:clamp(44px,7vw,104px);max-width:12ch;margin-bottom:22px}
.intro{max-width:52ch;color:var(--tinta-2);margin-bottom:34px}
@media(max-width:640px){.sec .caja{grid-template-columns:1fr}.num{margin-bottom:8px}}
.oscuro{background:var(--tinta);color:var(--papel)}
.oscuro .intro{color:rgba(240,232,216,.75)}
.oscuro .num{color:#E8473A}

/* ── selector por tipo de negocio ── */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-top:2px solid currentColor;border-bottom:1px solid rgba(240,232,216,.3)}
.tab{background:none;border:0;padding:16px 22px 14px 0;margin-right:22px;cursor:pointer;font:400 clamp(24px,3.2vw,40px)/1 var(--display);text-transform:uppercase;opacity:.45;border-bottom:4px solid transparent}
.tab[aria-selected="true"]{opacity:1;border-bottom-color:#E8473A}
.tab:hover{opacity:.85}
.panel-neg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);padding-top:30px}
.panel-neg[hidden]{display:none}
.panel-neg .dolor{font-size:clamp(24px,2.6vw,34px);line-height:1.2;font-weight:500}
.panel-neg .dolor::before{content:"«";color:#E8473A}
.panel-neg .dolor::after{content:"»";color:#E8473A}
.panel-neg ul{list-style:none;border-top:1px solid rgba(240,232,216,.3)}
.panel-neg li{padding:12px 0 12px 26px;border-bottom:1px solid rgba(240,232,216,.3);position:relative}
.panel-neg li::before{content:"→";position:absolute;left:0;color:#E8473A}
.panel-neg .ir{display:inline-block;margin-top:20px;font-weight:600;color:var(--papel)}
@media(max-width:760px){.panel-neg{grid-template-columns:1fr}.tab{padding-right:0}}

/* ── servicios desplegables ── */
.serv{border-top:2px solid var(--tinta)}
.serv details{border-bottom:1px solid var(--tinta)}
.serv summary{display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;gap:14px;padding:20px 0;cursor:pointer;list-style:none}
.serv summary::-webkit-details-marker{display:none}
.serv summary .n{font:400 30px/1 var(--display);color:var(--rojo)}
.serv summary h3{font:400 clamp(30px,4.2vw,58px)/.9 var(--display);text-transform:uppercase}
.serv summary .p{font-size:14px;color:var(--tinta-2);white-space:nowrap}
.serv summary .p::after{content:"  +";color:var(--rojo);font-weight:600}
.serv details[open] summary .p::after{content:"  −"}
.serv summary:hover h3{color:var(--rojo)}
.serv .cont{display:grid;grid-template-columns:64px 1fr 1fr;gap:14px 28px;padding:0 0 26px}
.serv .cont > *:first-child{grid-column:2}
.serv .cont ul{list-style:none}
.serv .cont li{padding:6px 0;border-bottom:1px dashed var(--filete)}
.serv .cont a{font-weight:600}
@media(max-width:760px){.serv summary{grid-template-columns:40px 1fr}.serv summary .p{grid-column:2}.serv .cont{grid-template-columns:1fr}.serv .cont > *:first-child{grid-column:auto}}

/* ── antes y después ── */
.comparar{position:relative;border:2px solid var(--tinta);background:var(--blanco);user-select:none;max-width:860px}
.capa{display:grid;grid-template-columns:1fr 1fr;min-height:340px}
.ficha{padding:22px}
.ficha h4{font:600 20px var(--texto);margin-bottom:2px}
.ficha .cat{font-size:13px;color:var(--tinta-2);margin-bottom:12px}
.ficha .est{font-size:15px;margin-bottom:10px}
.ficha .est b{font-size:22px}
.fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 14px}
.fotos i{aspect-ratio:1;background:var(--papel-2)}
.fotos i.v{background:repeating-linear-gradient(45deg,var(--papel-2) 0 6px,var(--papel) 6px 12px)}
.ficha ul{list-style:none;font-size:14px}
.ficha li{padding:5px 0;border-bottom:1px dashed var(--filete)}
.antes{filter:grayscale(1);opacity:.8}
.despues .fotos i:nth-child(1){background:#C9A27E}.despues .fotos i:nth-child(2){background:#8E6B4F}.despues .fotos i:nth-child(3){background:#D8C3A5}.despues .fotos i:nth-child(4){background:#5B3B2A}
.despues li::before{content:"✓ ";color:var(--rojo)}
.velo{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 var(--corte,50%))}
.velo .capa{background:var(--blanco);height:100%}
.linea-corte{position:absolute;top:0;bottom:0;left:var(--corte,50%);width:2px;background:var(--rojo);pointer-events:none}
.linea-corte::after{content:"⇆";position:absolute;top:50%;left:-19px;width:38px;height:38px;margin-top:-19px;background:var(--rojo);color:var(--blanco);display:grid;place-items:center;font-size:18px}
.comparar input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.leyenda{display:flex;justify-content:space-between;max-width:860px;font-size:13px;color:var(--tinta-2);margin-top:8px}
.dato{margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline;max-width:860px;border-top:2px solid var(--tinta);padding-top:18px}
.dato .cifra{font:400 clamp(64px,9vw,120px)/.8 var(--display);color:var(--rojo)}
.dato p{font-size:18px;max-width:38ch}
.dato small{grid-column:1/-1;font-size:12.5px;color:var(--tinta-2)}
@media(max-width:640px){.capa{grid-template-columns:1fr}.ficha:nth-child(2){display:none}.capa{min-height:0}}

/* ── trabajos ── */
.pista{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,24vw,300px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.trabajo{scroll-snap-align:start;border-top:2px solid currentColor;padding-top:10px}
.trabajo .marco{aspect-ratio:9/16;background:rgba(240,232,216,.08);display:grid;place-items:center;text-align:center;padding:18px;font-size:13px;color:rgba(240,232,216,.6);overflow:hidden}
.trabajo .marco video,.trabajo .marco img{width:100%;height:100%;object-fit:cover}
.trabajo .marco{position:relative}
.sonido{position:absolute;left:10px;bottom:10px;background:var(--papel);color:var(--tinta);border:0;border-radius:0;padding:7px 10px 6px;font:600 13px/1 var(--texto);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sonido[aria-pressed="true"]{background:var(--rojo);color:var(--blanco)}
.sonido:focus-visible{outline:2px solid var(--papel);outline-offset:2px}
.trabajo h3{font:400 28px/.95 var(--display);text-transform:uppercase;margin:12px 0 4px}
.trabajo p{font-size:14px;color:rgba(240,232,216,.7)}
.trabajo a{color:var(--papel)}
.trabajo .credito{margin-top:6px;font-size:12px;letter-spacing:.02em;color:rgba(240,232,216,.55)}
.flechas{display:flex;gap:18px;margin-top:14px}
.flechas button{background:none;border:0;cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:5px;color:var(--papel)}

/* ── proceso ── */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--tinta);counter-reset:p}
.pasos li{padding:18px 20px 0 0;counter-increment:p}
.pasos li::before{content:counter(p,decimal-leading-zero);display:block;font:400 56px/.9 var(--display);color:var(--rojo);margin-bottom:8px}
.pasos b{display:block;font-size:19px;margin-bottom:4px}
.pasos span{font-size:15px;color:var(--tinta-2)}
@media(max-width:860px){.pasos{grid-template-columns:1fr 1fr;gap:20px 0}}
@media(max-width:480px){.pasos{grid-template-columns:1fr}}

/* ── diagnóstico ── */
.diag{max-width:820px}
.preg{border-top:2px solid var(--tinta);padding:18px 0 22px}
.preg legend{font-size:clamp(22px,2.6vw,30px);font-weight:500;margin-bottom:12px;padding:0}
.preg fieldset{border:0}
.opcs{display:flex;flex-wrap:wrap;gap:10px}
.opcs label{cursor:pointer}
.opcs input{position:absolute;opacity:0}
.opcs span{display:inline-block;border:2px solid var(--tinta);padding:10px 16px;font-size:15px}
.opcs input:checked + span{background:var(--tinta);color:var(--papel)}
.opcs input:focus-visible + span{outline:3px solid var(--rojo);outline-offset:2px}
.resultado{border:2px solid var(--rojo);padding:22px;margin-top:6px;background:var(--blanco)}
.resultado[hidden]{display:none}
.resultado h3{font:400 clamp(30px,4vw,46px)/.95 var(--display);text-transform:uppercase;margin-bottom:10px}
.resultado p{margin-bottom:16px;max-width:56ch}

/* ── precios ── */
.precios{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--tinta)}
.precio-b{padding:22px 24px 26px 0}
.precio-b + .precio-b{border-left:1px solid var(--tinta);padding-left:24px}
.precio-b .cifra{font:400 clamp(72px,10vw,140px)/.8 var(--display);color:var(--rojo);margin:6px 0 10px}
.precio-b .cifra small{font:500 15px var(--texto);color:var(--tinta-2);margin-left:6px}
.precio-b h3{font:600 20px var(--texto)}
.precio-b p{color:var(--tinta-2);max-width:40ch}
@media(max-width:700px){.precios{grid-template-columns:1fr}.precio-b + .precio-b{border-left:0;border-top:1px solid var(--tinta);padding-left:0}}

/* ── preguntas ── */
.faq details{border-bottom:1px solid var(--tinta)}
.faq{border-top:2px solid var(--tinta);max-width:900px}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-size:19px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 32px var(--display);color:var(--rojo)}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 0 20px;color:var(--tinta-2);max-width:68ch}

/* ── contacto ── */
.contacto{background:var(--rojo);color:var(--blanco);padding-block:clamp(56px,8vw,110px)}
.contacto .grande{font-size:clamp(56px,10vw,150px);text-decoration:none;display:inline-block}
.contacto .grande:hover{text-decoration:underline;text-decoration-thickness:6px;text-decoration-color:var(--tinta)}
.contacto p{margin-top:20px;max-width:46ch;font-size:18px}
.contacto .otras{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-weight:600}

/* ── pie ── */
.pie{padding:30px 0 40px}
.pie .caja{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:flex-end;font-size:14px;color:var(--tinta-2)}
.pie img{width:130px;height:auto}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 18px}

/* foto en el proceso: rompe la columna hacia la derecha */
.foto-proc{display:grid;grid-template-columns:1fr minmax(220px,38%);gap:18px;align-items:end;margin:0 0 30px}
.foto-proc img{grid-column:2;grid-row:1;width:100%;height:auto;transform:rotate(-2deg);filter:drop-shadow(10px 10px 0 var(--rojo));margin-right:calc(-1 * var(--m) / 2)}
.foto-proc img.espera{transform:rotate(-7deg) translateY(18px) scale(.94);filter:drop-shadow(0 0 0 var(--rojo))}
.foto-proc img.pegada{transition:transform .7s cubic-bezier(.2,1.3,.4,1),filter .5s .35s ease-out}
.foto-proc figcaption{grid-column:1;grid-row:1;font-size:14px;color:var(--tinta-2);border-top:2px solid var(--rojo);padding-top:8px;max-width:30ch;justify-self:end;text-align:right}
@media(max-width:640px){.foto-proc{grid-template-columns:1fr}.foto-proc img,.foto-proc figcaption{grid-column:1}.foto-proc figcaption{grid-row:2;justify-self:start;text-align:left}.foto-proc img{margin-right:0}}