/* ===========================================================
   PI Creative House — sitio final (Direccion A + briefing de PI)
   ------------------------------------------------------------
   Base: la reticula editorial de la Direccion A (reglas de 2px,
   secciones numeradas, titulares enormes, chaflanes del isotipo).
   Del briefing de PI (presentacion de servicios, 2026-10) se toma:
     - Poppins: es la tipografia de todo su material.
     - Secciones oscuras con foto, brillo naranja y grano: su
       estetica de evento. Se ALTERNAN con secciones en papel para
       no perder el caracter editorial que eligio Jaime.
   Reglas de contraste heredadas de tokens.css, sin excepciones:
     boton naranja = texto tinta; texto naranja chico sobre claro =
     --naranja-texto; sobre oscuro el naranja de marca si pasa.
   =========================================================== */

:root{
  --display:"Poppins",system-ui,sans-serif;
  --texto:"Poppins",system-ui,sans-serif;
  --rule:2px solid var(--tinta-800);
  --rule-osc:2px solid #2B2B2B;
  --noche:#0D0D0D;
  --t-micro:150ms; --t-corta:320ms; --t-media:700ms; --t-larga:900ms; --t-xl:1100ms;
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-expo-alt:cubic-bezier(.19,1,.22,1);
  /* Grano: ruido fractal en SVG, sin imagen externa. Opacidad baja a
     proposito; solo quita lo plano del negro. */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body{
  background:var(--papel); color:var(--tinta-800);
  font-family:var(--texto); font-weight:400;
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height:1.6; overflow-x:hidden;
}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gutter);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;margin:0;}

/* ---------- revelado por linea (ver comentario en Direccion A) ---------- */
[data-rev="lineal"]{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;}
[data-rev="lineal"] > span{display:block;}
.con-reveal [data-rev="lineal"]{opacity:1;transform:none;transition:none;}
.con-reveal [data-rev="lineal"] > span{transform:translate3d(0,125%,0);
  transition:transform var(--t-xl) var(--ease-expo-alt);transition-delay:var(--retardo,0ms);}
.con-reveal [data-rev="lineal"].visible > span{transform:none;}
.sin-anim [data-rev="lineal"] > span{transform:none !important;transition:none !important;}

/* ---------- superficie oscura: brillo + grano ---------- */
.oscura{background:var(--noche);color:var(--papel);position:relative;isolation:isolate;}
.oscura::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--grano);opacity:.07;mix-blend-mode:screen;}
/* Pelicula de fondo de la portada: video al 9 %, debajo del grano
   (::before, z -1) y por encima del brillo del contenedor. Es apoyo, no
   protagonista. Peor caso medido: cuadro blanco del video -> fondo
   #232323; el texto claro sigue > 12:1 y el naranja grande > 3:1. */
.fondo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease-expo);}
.fondo-video.activo{opacity:.09;}
@media(prefers-reduced-motion:reduce){.fondo-video{transition:none;}}
.brillo{background:
  radial-gradient(60% 55% at 88% 12%, rgba(254,60,15,.30), transparent 70%),
  radial-gradient(45% 50% at 0% 100%, rgba(254,60,15,.16), transparent 70%),
  var(--noche);}

/* ---------- barra ---------- */
.bar{position:sticky;top:0;z-index:50;background:rgba(13,13,13,.94);color:var(--papel);
  border-bottom:var(--rule-osc);backdrop-filter:saturate(1.2);}
/* Barra en tres columnas: logo | menu centrado | contrapeso vacio.
   Las columnas laterales iguales (1fr) son las que centran el menu de
   verdad, no "casi" centrado por el ancho del logo. */
.bar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-block:.85rem;}
.bar-logo{justify-self:start;display:flex;align-items:center;min-height:34px;
  transition:opacity var(--t-corta) var(--ease-expo),transform var(--t-corta) var(--ease-expo),visibility 0s;}
.bar-logo-full{height:34px;width:auto;}
.bar-logo-mark{display:none;height:30px;width:auto;}
/* Mientras el logo grande de la portada esta a la vista, el de la barra
   no se duplica. Ocupa su lugar igual: la barra no cambia de alto. */
.bar.sin-logo .bar-logo{opacity:0;visibility:hidden;transform:translate3d(0,-6px,0);
  transition:opacity var(--t-corta) var(--ease-expo),transform var(--t-corta) var(--ease-expo),visibility 0s var(--t-corta);}
.nav{display:flex;gap:1.75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;}
.nav a{text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;
  transition:border-color var(--t-micro) linear,color var(--t-micro) linear;}
.nav a:hover,.nav a:focus-visible{border-color:var(--pich-naranja);}
@media(max-width:760px){
  /* Telefono: una sola fila. Isotipo (reservado) + menu desplazable. */
  .bar .wrap{grid-template-columns:auto 1fr;gap:.9rem;padding-block:.5rem;}
  .bar-logo-full{display:none;}
  .bar-logo-mark{display:block;}
  .nav{min-width:0;gap:1.2rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:none;}
  .nav::-webkit-scrollbar{display:none;}
  .nav a{white-space:nowrap;padding-block:.55rem;}
}
/* Seccion actual marcada en el nav (sitio.js pone aria-current). */
.nav a[aria-current="true"]{border-color:var(--pich-naranja);color:var(--naranja-300);}
/* La barra fija mide ~60 px (~110 en movil): los anclajes no deben
   quedar debajo de ella. */
section[id]{scroll-margin-top:4.5rem;}
@media(max-width:760px){section[id]{scroll-margin-top:4rem;}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
.progreso{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--pich-naranja);
  transform:scaleX(var(--p,0));transform-origin:0 50%;}

/* ---------- botones ---------- */
.btn{display:inline-block;background:var(--pich-naranja);color:var(--tinta-900);text-decoration:none;
  font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:.8125rem;line-height:1.2;
  padding:1.15rem 2.1rem;
  transform:translate3d(calc(var(--mx, 0px) + var(--saca, 0px)), calc(var(--my, 0px) + var(--saca, 0px)), 0);
  transition:transform var(--t-corta) var(--ease-expo),background var(--t-micro) linear,color var(--t-micro) linear;
  clip-path:polygon(var(--corte-s) 0,100% 0,100% calc(100% - var(--corte-s)),calc(100% - var(--corte-s)) 100%,0 100%,0 var(--corte-s));}
.btn:hover,.btn:focus-visible{background:var(--papel);color:var(--tinta-900);--saca:-2px;}
/* El chaflan RECORTA el outline: anillo interior. */
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--tinta-900),inset 0 0 0 6px var(--pich-naranja);}
.btn-fantasma{background:transparent;color:var(--papel);box-shadow:inset 0 0 0 2px rgba(244,241,236,.55);}
.btn-fantasma:hover,.btn-fantasma:focus-visible{background:var(--papel);color:var(--tinta-900);}
.btn-fantasma:focus-visible{box-shadow:inset 0 0 0 3px var(--pich-naranja),inset 0 0 0 6px var(--tinta-900);}
.acciones{display:flex;flex-wrap:wrap;gap:.9rem;}

/* ---------- portada ---------- */
.hero{padding-block:clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 1rem + 5vw, 6rem);border-bottom:var(--rule-osc);}
.hero-grid{display:grid;gap:clamp(2rem, 1rem + 3vw, 4rem);align-items:end;}
@media(min-width:960px){.hero-grid{grid-template-columns:1.45fr 1fr;}}
.hero-txt{container-type:inline-size;}
/* Logo protagonista (pedido de Jaime): ocupa el ancho de la columna del
   titular, con tope para que no compita con el h1. */
.hero-logo{display:block;width:min(100%, 40rem);height:auto;margin:0 0 clamp(1.75rem, 1rem + 2.5vw, 3rem);}
.kicker{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  display:flex;align-items:center;gap:.75rem;margin:0 0 clamp(1.5rem, 1rem + 2vw, 2.75rem);color:var(--naranja-300);}
.kicker::after{content:"";flex:1;height:2px;background:currentColor;opacity:.6;}
.con-reveal .kicker::after{transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-xl) var(--ease-expo) 240ms;}
.con-reveal .kicker.visible::after{transform:scaleX(1);}
.sin-anim .kicker::after{transform:none !important;}
/* El titular se dimensiona contra SU columna (cqi), no contra la
   ventana: "EXPERIENCIA" es la linea mas ancha y debe caber siempre. */
.hero h1{font-size:clamp(2.1rem, 9vw, 6.5rem);font-size:clamp(2.1rem, 12.2cqi, 6.5rem);
  line-height:.9;letter-spacing:-.035em;}
.hero h1 em{font-style:normal;color:var(--pich-naranja);}
.lin{display:block;}
.lema{font-size:clamp(1.0625rem, 1rem + .5vw, 1.375rem);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;margin:clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 0 .75rem;}
.hero-txt p.bajada{max-width:48ch;margin:0 0 2rem;color:#D9D4CD;font-weight:300;
  font-size:clamp(1rem, .95rem + .3vw, 1.1875rem);}
.hero-foto{position:relative;margin:0;}
.hero-foto img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
  clip-path:polygon(var(--corte-l) 0,100% 0,100% calc(100% - var(--corte-l)),calc(100% - var(--corte-l)) 100%,0 100%,0 var(--corte-l));}
@media(max-width:959px){.hero-foto img{aspect-ratio:4/5;max-height:72vh;}}
.pie-foto{font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  color:var(--tenue-osc);margin-top:.75rem;}

/* ---------- franja: la cadena de valor de PI ---------- */
.franja{background:var(--pich-naranja);color:var(--tinta-900);overflow:hidden;padding-block:1rem;}
.franja-desliz{width:max-content;transform:translate3d(var(--empuje,0px),0,0);}
.franja-pista{display:flex;width:max-content;font-family:var(--display);font-weight:800;
  font-size:.9375rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  animation:desfile 34s linear infinite;}
.franja-grupo{display:flex;gap:1.5rem;padding-right:1.5rem;align-items:center;}
.franja-grupo i{font-style:normal;opacity:.8;}
@keyframes desfile{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.franja:hover .franja-pista{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){
  .franja-desliz{width:auto;transform:none;}
  .franja-pista{animation:none;width:auto;flex-wrap:wrap;white-space:normal;padding-inline:var(--gutter);}
  .franja-grupo:last-child{display:none;}
}

/* ---------- cabeceras de seccion ---------- */
section{padding-block:var(--space-seccion);border-bottom:var(--rule);}
.oscura section,section.oscura{border-bottom:var(--rule-osc);}
.sec-cab{display:grid;gap:.5rem 2rem;margin-bottom:1.25rem;}
@media(min-width:900px){.sec-cab{grid-template-columns:8rem 1fr;}}
.num{font-family:var(--display);font-weight:800;font-size:.875rem;color:var(--naranja-texto);letter-spacing:.05em;}
.oscura .num{color:var(--pich-naranja);}
.sec-cab h2{font-size:clamp(1.85rem, 1rem + 3.4vw, 4rem);line-height:.95;letter-spacing:-.03em;max-width:18ch;}
.regla{display:block;height:2px;background:currentColor;margin-bottom:clamp(2rem, 1rem + 3vw, 4rem);}
.oscura .regla{background:#3A3A3A;}

/* ---------- trabajo ---------- */
.caso-pasarel{display:grid;gap:clamp(1.5rem, 1rem + 2vw, 3rem);}
@media(min-width:1000px){.caso-pasarel{grid-template-columns:5fr 7fr;align-items:end;}}
.caso-marca{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem, 1rem + 6vw, 6rem);line-height:.85;letter-spacing:-.04em;margin:0 0 1rem;}
.caso-marca em{font-style:normal;font-weight:300;color:var(--pich-naranja);letter-spacing:-.02em;}
.meta{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--naranja-300);margin:0 0 1.25rem;}
.caso-lema{font-size:clamp(1.0625rem, 1rem + .45vw, 1.3125rem);font-weight:600;margin:0 0 1.25rem;max-width:34ch;}
.roles{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none;}
.roles li{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  padding:.45rem .8rem;border:1px solid rgba(244,241,236,.35);}
.cita{margin:0;padding-left:1.25rem;border-left:2px solid var(--pich-naranja);color:#D9D4CD;font-weight:300;max-width:46ch;}

/* galeria editorial: 12 columnas, nada uniforme */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem, .3rem + .6vw, 1rem);
  margin-top:clamp(2rem, 1rem + 3vw, 4rem);}
.galeria figure{margin:0;position:relative;overflow:hidden;background:#1A1A1A;}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-larga) var(--ease-expo);}
.galeria figure:hover img{transform:scale(1.035);}
.galeria figcaption{position:absolute;left:0;bottom:0;padding:.5rem .75rem;font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--papel);
  background:linear-gradient(transparent, rgba(0,0,0,.72));width:100%;}
.g-alta{aspect-ratio:2/3;}
.g-ancha{grid-column:span 2;aspect-ratio:3/2;}
@media(min-width:900px){
  .galeria{grid-template-columns:repeat(12,1fr);}
  .g-1{grid-column:1 / span 4;grid-row:span 2;aspect-ratio:auto;}
  .g-2{grid-column:5 / span 8;aspect-ratio:3/2;}
  .g-3,.g-4{grid-column:span 4;aspect-ratio:3/4;}
  .g-3{grid-column:5 / span 4;}
  .g-5,.g-6,.g-7{grid-column:span 4;aspect-ratio:2/3;}
  .g-8{grid-column:1 / span 7;aspect-ratio:3/2;}
  .g-9{grid-column:8 / span 5;aspect-ratio:auto;}
}
.patro{margin:1.5rem 0 0;font-size:.8125rem;color:var(--tenue-osc);max-width:90ch;}
.patro b{color:#D9D4CD;font-weight:600;}

.caso-fila{display:grid;gap:clamp(1.5rem, 1rem + 2vw, 3rem);margin-top:clamp(4rem, 2rem + 5vw, 7rem);
  padding-top:clamp(2rem, 1rem + 2vw, 3rem);border-top:var(--rule-osc);}
@media(min-width:1000px){.caso-fila{grid-template-columns:5fr 7fr;}}
.aportes{display:grid;gap:1.25rem;margin:0;}
@media(min-width:560px){.aportes{grid-template-columns:repeat(3,1fr);}}
.aportes dt{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--pich-naranja);margin-bottom:.35rem;}
.aportes dd{margin:0;font-size:.9375rem;color:#D9D4CD;font-weight:300;line-height:1.45;}
.fotos-alina{display:grid;grid-template-columns:3fr 4fr;gap:clamp(.5rem, .3rem + .6vw, 1rem);}
.fotos-alina img{width:100%;height:100%;aspect-ratio:3/5;object-fit:cover;}

/* casos sin foto: bloque tipografico, como la lamina de ABANK del deck */
.casos-tipo{display:grid;gap:clamp(1rem, .5rem + 1.5vw, 2rem);margin-top:clamp(4rem, 2rem + 5vw, 7rem);}
@media(min-width:900px){.casos-tipo{grid-template-columns:1fr 1fr;}}
.ct{padding:clamp(1.75rem, 1rem + 2vw, 3rem);display:flex;flex-direction:column;
  clip-path:polygon(var(--corte-l) 0,100% 0,100% calc(100% - var(--corte-l)),calc(100% - var(--corte-l)) 100%,0 100%,0 var(--corte-l));
  transition:transform var(--t-corta) var(--ease-expo);}
.ct:hover{transform:translate3d(0,-4px,0);}
.ct-naranja{background:var(--pich-naranja);color:var(--tinta-900);}
.ct-papel{background:var(--papel);color:var(--tinta-900);}
.ct h3{font-size:clamp(3rem, 1rem + 6vw, 6.5rem);line-height:.82;letter-spacing:-.045em;margin-bottom:1.25rem;}
.ct .ct-lema{font-weight:600;font-size:clamp(1rem, .95rem + .35vw, 1.1875rem);margin:0 0 1.5rem;max-width:36ch;}
.ct ul{list-style:none;margin:auto 0 0;padding:1.25rem 0 0;border-top:2px solid currentColor;display:grid;gap:.6rem;}
@media(min-width:560px){.ct ul{grid-template-columns:1fr 1fr;}}
.ct li{font-size:.875rem;line-height:1.4;}
.ct li b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;}
.ct-papel li b{color:var(--naranja-texto);}

/* ---------- servicios ---------- */
.serv-grid{display:grid;gap:clamp(2rem, 1rem + 3vw, 4rem);}
@media(min-width:1100px){.serv-grid{grid-template-columns:1fr 360px;align-items:start;}}
/* Sin border-top: la regla trazada de la cabecera ya es ese 2px. */
.serv ul.lista{margin:0;padding:0;}
.serv .lista > li{list-style:none;border-bottom:1px solid var(--tinta-200);}
.serv .fila{position:relative;isolation:isolate;display:grid;gap:.4rem 2rem;
  padding:clamp(1.5rem, 1rem + 1.5vw, 2.4rem) 0;text-decoration:none;}
.serv .fila::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;
  left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);
  background:var(--pich-naranja);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t-media) var(--ease-expo);}
.serv .fila:hover::before,.serv .fila:focus-visible::before{transform:scaleX(1);}
.serv .fila > *{transition:transform var(--t-larga) var(--ease-expo) 60ms,color var(--t-micro) linear;}
.serv .fila:hover > *,.serv .fila:focus-visible > *{transform:translate3d(1rem,0,0);}
.serv .fila:hover .num,.serv .fila:focus-visible .num,
.serv .fila:hover .incluye,.serv .fila:focus-visible .incluye{color:var(--tinta-900);}
@media(min-width:900px){.serv .fila{grid-template-columns:5rem 1fr;}}
.serv h3{font-size:clamp(1.3rem, 1rem + 1.1vw, 2rem);letter-spacing:-.02em;line-height:1;}
.serv .que{margin:.5rem 0 .6rem;font-weight:500;max-width:56ch;}
.incluye{margin:0;font-size:.875rem;color:var(--tinta-600);max-width:70ch;line-height:1.55;}
.serv-fotos{display:none;}
@media(min-width:1100px){
  .serv-fotos{display:block;position:sticky;top:6rem;aspect-ratio:4/5;margin:0;overflow:hidden;
    clip-path:polygon(var(--corte-l) 0,100% 0,100% calc(100% - var(--corte-l)),calc(100% - var(--corte-l)) 100%,0 100%,0 var(--corte-l));}
  .serv-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    transform:scale(1.04);transition:opacity var(--t-media) var(--ease-expo),transform var(--t-larga) var(--ease-expo);}
  .serv-fotos img.on{opacity:1;transform:none;}
}

/* ---------- proceso ---------- */
.proceso{display:grid;}
@media(min-width:700px){.proceso{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1280px){.proceso{grid-template-columns:repeat(6,1fr);}}
.paso{padding:clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 1.25rem;border-bottom:1px solid var(--tinta-200);}
@media(min-width:700px){.paso{border-right:1px solid var(--tinta-200);}}
.paso b{display:block;font-family:var(--display);font-weight:800;color:var(--naranja-texto);
  font-size:clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);line-height:1;margin-bottom:.75rem;letter-spacing:-.03em;}
.paso h3{font-size:1rem;margin:0 0 .4rem;letter-spacing:.01em;}
.paso p{margin:0;font-size:.9rem;color:var(--tinta-600);}
.paso-final{background:var(--tinta-900);color:var(--papel);}
.paso-final b{color:var(--pich-naranja);}
.paso-final p{color:#D9D4CD;}

/* ---------- nosotros ---------- */
.acerca{display:grid;gap:clamp(2rem, 1rem + 3vw, 4rem);}
@media(min-width:960px){.acerca{grid-template-columns:1fr 1fr;align-items:start;}}
.manifiesto{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.6rem, 1rem + 2.4vw, 3.25rem);line-height:1;letter-spacing:-.03em;margin:0;}
.manifiesto em{font-style:normal;color:var(--naranja-texto);}
.acerca-txt p{margin:0 0 1.15rem;max-width:54ch;font-size:clamp(1rem, .95rem + .35vw, 1.1875rem);font-weight:300;}
.acerca-txt p strong{font-weight:600;}
.pilares{display:grid;grid-template-columns:repeat(2,1fr);margin:2rem 0 0;padding:0;list-style:none;border-top:var(--rule);}
@media(min-width:560px){.pilares{grid-template-columns:repeat(4,1fr);}}
.pilares li{padding:1rem .75rem 1rem 0;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;}
.pilares li::before{content:"";display:block;width:12px;height:12px;margin-bottom:.6rem;background:var(--pich-naranja);
  clip-path:polygon(33.1% 0,100% 0,100% 66.9%,66.9% 100%,0 100%,0 33.1%);}

/* ---------- por que PI: banda oscura ---------- */
.porque{padding-block:clamp(4rem, 2rem + 6vw, 9rem);}
.porque-grid{display:grid;gap:clamp(1.5rem, 1rem + 3vw, 4rem);align-items:center;}
@media(min-width:900px){.porque-grid{grid-template-columns:auto 1fr;}}
/* .porque .pi-glifo y no .pi-glifo: ".porque p" le ganaba en
   especificidad y dejaba el glifo a tamano de parrafo. */
.porque .pi-glifo{font-family:var(--display);font-weight:300;line-height:.75;margin:0;
  font-size:clamp(9rem, 5rem + 18vw, 22rem);color:transparent;-webkit-text-stroke:2px var(--pich-naranja);
  user-select:none;}
.porque h2{font-size:clamp(1.75rem, 1rem + 2.6vw, 3.25rem);letter-spacing:-.03em;margin-bottom:1.25rem;}
.porque p{margin:0 0 1rem;max-width:56ch;color:#D9D4CD;font-weight:300;font-size:clamp(1rem, .95rem + .35vw, 1.1875rem);}
.porque p.fuerte{color:var(--papel);font-weight:600;}

/* ---------- clientes ---------- */
.clientes-marco{border-top:var(--rule);padding-block:clamp(1.5rem, 1rem + 2vw, 2.5rem);margin-top:clamp(2rem, 1rem + 2vw, 3rem);}
.ficha-cliente{flex:none;display:flex;align-items:center;gap:clamp(2rem, 1rem + 2.5vw, 3.5rem);
  margin-right:clamp(2rem, 1rem + 2.5vw, 3.5rem);font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem, 1rem + 2vw, 2.75rem);letter-spacing:-.02em;color:var(--tinta-800);white-space:nowrap;
  opacity:.8;transition:opacity var(--t-micro) linear,color var(--t-micro) linear;}
.ficha-cliente::after{content:"";width:14px;height:14px;background:var(--pich-naranja);
  clip-path:polygon(33.1% 0,100% 0,100% 66.9%,66.9% 100%,0 100%,0 33.1%);}
.desfile-clientes:hover .ficha-cliente{opacity:.4;}
.desfile-clientes .ficha-cliente:hover{opacity:1;color:var(--naranja-texto);}

/* ---------- cierre ---------- */
.cierre{border-bottom:none;}
.cierre h2{font-size:clamp(2.1rem, 1rem + 5.4vw, 6rem);line-height:.9;letter-spacing:-.04em;margin:0 0 1.5rem;max-width:14ch;}
.cierre h2 em{font-style:normal;color:var(--pich-naranja);}
.cierre .hagamos{font-size:clamp(1.125rem, 1rem + .6vw, 1.5rem);font-weight:300;margin:0 0 2.25rem;color:#D9D4CD;}
.cierre-datos{display:flex;flex-wrap:wrap;gap:2rem 3.5rem;margin-top:3rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.2);font-size:.9375rem;}
.cierre-datos b{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;color:var(--naranja-300);margin-bottom:.35rem;font-weight:600;}
.cierre-datos a{text-decoration:none;border-bottom:1px solid var(--pich-naranja);}
.cierre-datos a:hover,.cierre-datos a:focus-visible{color:var(--naranja-300);}

footer{background:#070707;color:var(--tenue-osc);font-size:.75rem;padding-block:1.5rem;}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;}
footer img{height:18px;width:auto;}

/* ---------- menos movimiento: cada cosa en su estado final ---------- */
@media(prefers-reduced-motion:reduce){
  .con-reveal [data-rev="lineal"] > span,.con-reveal [data-rev="lineal"].visible > span{transform:none !important;transition:none !important;}
  .progreso{display:none;}
  .con-reveal .kicker::after{transform:none;}
  .serv .fila::before{transform:scaleX(1);opacity:0;}
  .serv .fila:hover::before,.serv .fila:focus-visible::before{opacity:1;}
  .serv .fila:hover > *,.serv .fila:focus-visible > *{transform:none;}
  .ct:hover,.galeria figure:hover img{transform:none;}
  .btn{transform:none;}
}