/* Mundo Pérgolas — Del Viso.
   Dirección EL PORTÓN: la marca no se eligió, se leyó de su propia chapa pintada
   a mano (negro, letras hueso) y del container "MUNDO PÉRGOLAS MADERAS" (rojo).
   El rojo va SÓLO como acento: punto, línea, número, estado activo, un botón.
   Agrandado a fondo de bloque cae en el Canva amarillo-y-rojo de su Instagram,
   que es justo de lo que esta página tiene que despegarse. */

:root{
  --fondo:#f6f4f0;          /* el blanco del logo, apenas cálido para que la madera no quede fría */
  --fondo-2:#ffffff;        /* tarjeta levantada */
  --panel:#ece8e1;          /* donde se dibuja: croquis, cortes, la idea */
  --linea:#e0dcd4;
  --linea-2:#cbc6bd;
  --texto:#121212;          /* el negro del logo */
  --gris:#6c6861;
  --gris-2:#46433e;
  --tenue:#948f87;
  --rojo:#e00a0f;           /* las varas del logo */
  --rojo-hov:#c40004;
  --redondeo:18px;
  --marco:clamp(20px,5vw,56px);
  --tipo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --titulo:'Montserrat','Inter',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--tipo);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:800;letter-spacing:-.025em;line-height:1.02}
p{margin:0}
::selection{background:var(--rojo);color:#fff}

/* el `·` que ellos ponen delante de cada palabra en el portón.
   Es su puntuación, no una viñeta de plantilla. */
.pto{color:var(--rojo)}

.marco{max-width:1320px;margin:0 auto;padding:0 var(--marco)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
.rotulo{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);
}

/* ---------------- encabezado ---------------- */
.cab{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(246,244,240,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:transform .32s ease,padding .32s ease,border-color .32s ease;
}
.cab.compacta{border-bottom-color:var(--linea)}
.cab.oculta{transform:translateY(-102%)}
.cab .in{display:flex;align-items:center;gap:26px;padding:17px var(--marco);transition:padding .32s ease}
.cab.compacta .in{padding:11px var(--marco)}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;flex-shrink:0}
.logo svg{width:32px;height:auto;flex-shrink:0}
.logo b{font-family:var(--titulo);font-weight:800;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.logo b i{color:var(--rojo);font-style:normal}
.menu{display:flex;align-items:center;gap:24px}
.menu a{
  text-decoration:none;font-size:14.5px;color:var(--gris-2);
  position:relative;padding:4px 0;transition:color .2s;
}
.menu a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--rojo);transition:right .28s ease;
}
.menu a:hover{color:var(--texto)}
.menu a:hover::after,.menu a[aria-current]::after{right:0}
.menu a[aria-current]{color:var(--texto)}
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border-radius:999px;padding:12px 22px;font-size:14.5px;font-weight:600;
  border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.btn-r{background:var(--rojo);color:#fff}
.btn-r:hover{background:var(--rojo-hov)}
.btn-b{border-color:var(--linea-2);color:var(--texto)}
.btn-b:hover{border-color:var(--texto)}
.btn-g{background:var(--texto);color:var(--fondo)}
.btn-g:hover{background:#fff}
.cab .btn{padding:10px 18px}
.barra{position:fixed;top:0;left:0;height:2px;width:0;background:var(--rojo);z-index:61}

/* ---------------- hero ---------------- */
.hero{padding:calc(92px + 6vh) 0 0}
.hero .rej{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,58px);align-items:end}
.hero h1{font-size:clamp(40px,6.4vw,84px);max-width:13ch;margin:22px 0 0}
.hero .baj{margin:28px 0 0;max-width:47ch;color:var(--gris-2);font-size:clamp(16px,1.25vw,18px)}
.acc{display:flex;gap:11px;flex-wrap:wrap;margin-top:34px}
.hero-foto{border-radius:var(--redondeo);overflow:hidden;aspect-ratio:4/5;background:var(--fondo-2)}
.hero-foto img{width:100%;height:100%;object-fit:cover}

/* EL SELLO · la sombra de la pérgola.
   Dos copias del titular: la de abajo en penumbra, la de arriba a pleno sol,
   revelada por una máscara de bandas inclinadas que el JS corre de izquierda a
   derecha — el ritmo de las varas rojas del pictograma de su logo.
   NO se usa background-clip:text: en Chrome no compone con máscaras, no pinta
   nada y no tira error (trampa ya pagada en North Delta).
   El estado por defecto es el VISIBLE: ocultar es lo que hace el JS. */
.sello{position:relative;display:block}
.sello .varas{
  position:absolute;inset:-.14em -2% -.1em;pointer-events:none;display:none;
  background:repeating-linear-gradient(96deg,
    rgba(12,12,13,.90) 0 17px, rgba(12,12,13,0) 21px 31px);
}
.js .sello.activo .varas{display:block}
.sello[data-listo] .varas{display:none}

/* ---------------- secciones ---------------- */
section{padding:clamp(58px,8vw,118px) 0}
.sec-tit{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:34px}
.sec-tit h2{font-size:clamp(28px,3.6vw,46px)}
.lead{max-width:56ch;color:var(--gris-2);margin-top:14px}

/* la lista del portón, verbatim */
.franja{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);overflow:hidden;padding:22px 0}
.corre{display:flex;gap:44px;white-space:nowrap;will-change:transform}
.corre span{
  font-family:var(--mono);font-size:clamp(13px,1.5vw,17px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris-2);
}

/* fichas */
.fichas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--redondeo);overflow:hidden}
.ficha{
  background:var(--fondo);padding:26px 24px 28px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:10px;position:relative;
  transition:background .26s ease;
}
.ficha::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rojo);
  transform:scaleY(0);transform-origin:top;transition:transform .32s ease;
}
.ficha .adentro{transition:transform .32s ease}
.ficha:hover,.ficha.tocada{background:var(--fondo-2)}
.ficha:hover::before,.ficha.tocada::before{transform:scaleY(1)}
@media(hover:hover){.ficha:hover .adentro{transform:translateX(12px)}}
.ficha .n{font-family:var(--mono);font-size:12px;color:var(--rojo)}
.ficha h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.ficha .esp{font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--gris)}
.ficha .ir{margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--gris-2)}

/* bloque de dos columnas: texto + foto */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,64px);align-items:center}
.dos.inv > :first-child{order:2}
.cita{
  font-family:var(--titulo);font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.06;
  border-left:3px solid var(--rojo);padding-left:22px;
}
.foto{border-radius:var(--redondeo);overflow:hidden;background:var(--fondo-2)}
.foto img{width:100%;height:100%;object-fit:cover}
.parx{overflow:hidden}
.parx img{will-change:transform}

/* tira de loops */
.tira-caja{overflow:hidden;padding:0}
.tira{display:flex;gap:14px;will-change:transform}
.clip{flex:0 0 clamp(190px,17vw,250px);border-radius:var(--redondeo);overflow:hidden;
  background:var(--fondo-2);aspect-ratio:9/14}
.clip video{width:100%;height:100%;object-fit:cover}

/* tabla de catálogo */
.tabla{border-top:1px solid var(--linea)}
.fila{
  display:grid;grid-template-columns:2.1fr 1.1fr 1.1fr 1fr;gap:clamp(12px,2vw,28px);
  padding:19px 0;border-bottom:1px solid var(--linea);align-items:baseline;
  transition:background .2s;
}
.fila:hover,.fila.tocada{background:var(--fondo-2)}
.fila .q{font-size:18px;font-weight:600;letter-spacing:-.015em}
.fila .d{font-family:var(--mono);font-size:13px;color:var(--gris)}
.fila .u{font-family:var(--mono);font-size:13px;color:var(--gris-2)}
.fila .porconf{color:var(--tenue);font-style:normal}
.enca{display:grid;grid-template-columns:2.1fr 1.1fr 1.1fr 1fr;gap:clamp(12px,2vw,28px);
  padding-bottom:10px}
.enca span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue)}

/* aviso honesto */
.nota{
  border:1px solid var(--linea);border-left:2px solid var(--rojo);border-radius:0 12px 12px 0;
  padding:18px 22px;color:var(--gris-2);font-size:15px;max-width:72ch;
}

/* grilla de fotos */
.grilla{display:grid;gap:14px}
.g3{grid-template-columns:1.4fr 1fr 1fr}
.g2{grid-template-columns:1fr 1fr}
.grilla .foto{aspect-ratio:4/5}
.grilla .foto.ancha{aspect-ratio:16/11}

/* etapas: la sección que se queda quieta */
.etapas .pegado{position:sticky;top:96px}
.etapas .paso-e{
  display:grid;grid-template-columns:52px 1fr;gap:20px;padding:20px 0;
  border-bottom:1px solid var(--linea);opacity:.34;transition:opacity .3s ease;
}
.etapas .paso-e.on{opacity:1}
.etapas .paso-e .k{font-family:var(--mono);font-size:12.5px;color:var(--rojo)}
.etapas .paso-e h3{font-size:21px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.etapas .paso-e p{color:var(--gris);font-size:15px}

/* ---------------- cotizador ---------------- */
.cotiz{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,52px);align-items:start}
.pasos{display:flex;flex-direction:column;gap:14px}
.campo{
  border:1px solid var(--linea);border-radius:14px;padding:20px 22px;
  background:var(--fondo);opacity:0;height:0;overflow:hidden;padding-top:0;padding-bottom:0;
  border-width:0;transition:opacity .3s ease;
}
.campo.visible{opacity:1;height:auto;padding-top:20px;padding-bottom:22px;border-width:1px}
.campo.hecho{cursor:pointer;background:var(--fondo-2)}
.campo .pre{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.campo .pre .k{font-family:var(--mono);font-size:12px;color:var(--rojo)}
.campo .pre h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.campo.hecho .cuerpo{display:none}
.campo .resp{font-family:var(--mono);font-size:13px;color:var(--gris-2);display:none}
.campo.hecho .resp{display:block}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font:inherit;font-size:14.5px;cursor:pointer;background:none;color:var(--gris-2);
  border:1px solid var(--linea);border-radius:999px;padding:9px 18px;
  transition:border-color .2s,color .2s,background .2s;
}
.chip:hover{border-color:var(--gris);color:var(--texto)}
.chip.on{background:var(--rojo);border-color:var(--rojo);color:#fff}
.medida{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.medida label{display:flex;align-items:center;gap:14px;font-size:14.5px;color:var(--gris-2)}
.medida .nom{width:68px;flex-shrink:0}
.medida input[type=range]{
  flex:1;appearance:none;height:2px;background:var(--linea);border-radius:2px;outline:none;
}
.medida input[type=range]::-webkit-slider-thumb{
  appearance:none;width:20px;height:20px;border-radius:50%;background:var(--rojo);
  cursor:pointer;border:3px solid var(--fondo);
}
.medida input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--rojo);cursor:pointer;border:none;
}
.medida .val{font-family:var(--mono);font-size:14px;color:var(--texto);width:66px;text-align:right}

.panel{position:sticky;top:96px;border:1px solid var(--linea);border-radius:var(--redondeo);
  overflow:hidden;background:var(--fondo-2)}
.dibujo{background:var(--panel);padding:18px;border-bottom:1px solid var(--linea)}
.dibujo svg{width:100%;height:auto;display:block}
.piezas{padding:20px 22px;border-bottom:1px solid var(--linea)}
.piezas h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 12px;font-weight:400}
.piezas ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.piezas li{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:13px}
.piezas li span:first-child{color:var(--gris-2)}
.piezas li span:last-child{color:var(--texto)}
.burbuja{padding:20px 22px}
.burbuja .msj{
  background:#dcf5d0;border-radius:14px 14px 14px 3px;padding:14px 16px;font-size:14.5px;
  line-height:1.55;color:#122016;
}
.burbuja .falta{color:var(--rojo);border-bottom:1px dashed var(--rojo)}
.burbuja .btn{margin-top:14px;width:100%;justify-content:center}

/* ---------------- pie ---------------- */
.pie{border-top:1px solid var(--linea)}

/* ---------------- entrada ----------------
   El estado por defecto es el VISIBLE. La clase `.js` la pone el script, así que
   sin JS (o si el script muere) la página se lee entera. */
.js .entra{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js .entra-foto{opacity:0;clip-path:inset(14% 0 0 0 round var(--redondeo));transform:translateY(28px);
  transition:opacity .7s ease,clip-path 1.15s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1)}
.js .entra.dentro,.js .entra-foto.dentro{opacity:1;transform:none;clip-path:inset(0 0 0 0 round var(--redondeo))}

/* velo de paso entre páginas: que las cinco se sientan una sola */
.velo-paso{position:fixed;inset:0;background:var(--fondo);z-index:90;pointer-events:none;
  opacity:1;transition:opacity .34s ease}
.entro .velo-paso{opacity:0}
.saliendo .velo-paso{opacity:1;transition-duration:.26s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .entra,.js .entra-foto{opacity:1;transform:none}
}

/* ---------------- celular ----------------
   No es la misma página achicada: el hero cambia de forma (la foto entera arriba
   a sangre, el titular debajo sobre el negro, donde además se lee mejor), las
   fichas pasan a una columna y el cotizador apila dibujo y preguntas. */
@media(max-width:900px){
  body{font-size:16px}
  .menu{display:none}
  .cab .in{gap:14px}
  .hero{padding:78px 0 0}
  .hero .rej{grid-template-columns:1fr;gap:0}
  .hero .rej > .hero-foto{order:-1;margin:0 calc(var(--marco) * -1);border-radius:0;aspect-ratio:1/1;
    position:relative}
  .hero .rej > .hero-foto::after{content:'';position:absolute;inset:auto 0 0;height:38%;
    background:linear-gradient(transparent,var(--fondo))}
  .hero h1{margin-top:26px;max-width:none}
  .fichas{grid-template-columns:1fr}
  .dos,.cotiz{grid-template-columns:1fr}
  .dos.inv > :first-child{order:0}
  .g3,.g2{grid-template-columns:1fr 1fr}
  .g3 .foto:first-child{grid-column:1/-1}
  .fila,.enca{grid-template-columns:1.5fr 1fr;row-gap:4px}
  .fila .u{grid-column:1/-1}
  .panel{position:static;margin-bottom:18px}
  .etapas .pegado{position:static}
    .clip{flex-basis:56vw}
  .marco{padding:0 20px}
}
@media(max-width:560px){
  .g3,.g2{grid-template-columns:1fr}
  .g3 .foto:first-child{grid-column:auto}
  }

/* ---------------- botones que son <button> ----------------
   Sin esto el navegador les pone su fondo gris claro y el texto hueso no se lee
   (el «Seguir» blanco del cotizador). */
button.btn{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;background:none}
button.btn.btn-r{background:var(--rojo)}
button.btn.btn-r:hover{background:var(--rojo-hov)}
button.btn:disabled{opacity:.6;cursor:progress}
button[hidden]{display:none}

/* ---------------- trabajos terminados ---------------- */
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-auto-rows:clamp(200px,23vw,330px);gap:12px}
.obra{position:relative;display:block;border-radius:var(--redondeo);overflow:hidden;background:var(--fondo-2);
  text-decoration:none;color:#fff}
.obra.o-alta{grid-row:span 2}
.obra.o-ancha{grid-column:span 2}
.obra img,.obra video{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.obra:hover img,.obra:hover video{transform:scale(1.04)}}
.pie-obra{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:48px 18px 16px;background:linear-gradient(transparent,rgba(8,8,10,.82))}
.pie-obra .tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pie-obra .ir{font-size:13.5px;color:#d9d5ce;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.obra:hover .ir,.obra.tocada .ir{opacity:1;transform:none}

/* ---------------- los dos modos del presupuesto ---------------- */
.modos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modo{display:flex;flex-direction:column;gap:18px;padding:26px;border:1px solid var(--linea);border-radius:var(--redondeo);
  background:var(--fondo-2);text-decoration:none;color:inherit;transition:border-color .25s}
.modo:hover{border-color:var(--linea-2)}
.modo .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.modo h3{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.15;max-width:24ch}
.modo .ir{margin-top:auto;font-size:14px;color:var(--rojo)}
.modo-dib,.modo-idea{display:flex;align-items:center;justify-content:center;background:var(--panel);border-radius:12px;
  aspect-ratio:16/7;padding:18px}
.modo-dib svg{width:100%;height:auto}
.crece rect{transform-box:fill-box;transform-origin:bottom;animation:crece 3.6s cubic-bezier(.2,.7,.2,1) infinite;
  animation-delay:calc(var(--k) * 45ms)}
@keyframes crece{0%{transform:scaleY(0)}28%,82%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.modo-idea .tipea{font-size:clamp(16px,1.6vw,21px);line-height:1.4;color:#122016;background:#dcf5d0;
  border-radius:14px 14px 14px 3px;padding:14px 18px;max-width:30ch}

/* ---------------- cierre de la home ---------------- */
.cierre{border-top:1px solid var(--linea)}
.donde-dir{font-family:var(--titulo);font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-top:12px}

/* ---------------- catálogo visual ---------------- */
.cat-t{margin:0 0 16px}
.prods + .cat-t{margin-top:clamp(40px,5vw,64px)}
.prods{display:grid;gap:12px}
.p3{grid-template-columns:repeat(3,1fr)}
.p4{grid-template-columns:repeat(4,1fr)}
.prod{border-radius:var(--redondeo);overflow:hidden;background:var(--fondo-2);border:1px solid var(--linea)}
.prod-med{aspect-ratio:4/4.4;overflow:hidden;background:var(--panel)}
.p4 .prod-med{aspect-ratio:4/3}
.prod-med img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.prod:hover .prod-med img{transform:scale(1.05)}}
.prod-dib{display:flex;align-items:center;justify-content:center;padding:14px}
.prod-dib svg{width:78%;height:auto}
.prod-dib .cota{font-family:var(--mono);font-size:10px;fill:var(--tenue);letter-spacing:.1em}
.prod-txt{padding:16px 18px 18px}
.prod-txt h3{font-size:19px;font-weight:700;letter-spacing:-.015em}
.prod-txt p{font-size:14px;color:var(--gris);margin-top:4px;line-height:1.45}

/* ---------------- cotizador: tu idea ---------------- */
.chip-idea{border-style:dashed}
.idea-txt{width:100%;background:var(--panel);border:1px solid var(--linea);border-radius:12px;color:var(--texto);
  font:inherit;font-size:16px;line-height:1.5;padding:14px 16px;resize:vertical;outline:none;margin-bottom:14px}
.idea-txt:focus{border-color:var(--gris)}
.idea-aviso{font-size:14px;color:var(--rojo);margin-top:10px;min-height:1em}
.dibujo .vacio{color:var(--tenue);text-align:center;padding:52px 10px;line-height:1.8}
.armando{display:flex;flex-direction:column;align-items:center;gap:14px;padding:58px 10px;color:var(--gris-2)}
.barra-armando{width:60%;height:2px;background:var(--linea);overflow:hidden;border-radius:2px}
.barra-armando i{display:block;height:100%;width:0;background:var(--rojo);animation:armando 15s cubic-bezier(.1,.6,.3,1) forwards}
@keyframes armando{to{width:94%}}
.ia-fig{margin:0}
.ia-fig img{width:100%;border-radius:10px}
.ia-fig figcaption{display:flex;flex-direction:column;gap:3px;padding:12px 2px 2px}
.ia-fig b{font-size:16px;font-weight:700}
.ia-fig span{font-family:var(--mono);font-size:12.5px;color:var(--gris-2)}
.ia-fig em{font-style:normal;font-size:12px;color:var(--tenue);margin-top:4px}

@media(max-width:900px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(190px,52vw,300px)}
  .obra.o-ancha{grid-column:span 2}
  .pie-obra .ir{display:none}
  .modos,.p3{grid-template-columns:1fr}
  .p3{grid-template-columns:1fr 1fr}
  .p4{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .p3 .prod:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.crece rect{animation:none}}

.cab .logo svg{color:var(--texto)}
.ig{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--linea-2);color:var(--texto);transition:border-color .2s,color .2s}
.ig:hover{border-color:var(--rojo);color:var(--rojo)}
.ig svg{width:17px;height:17px}
@media(max-width:900px){.cab .ig{display:none}}

/* ---------------- ronda 16-sep: qué hacemos y corralón ---------------- */
.proyectos .tira-caja{margin-top:6px}
.proyectos .clip{flex-basis:clamp(210px,19vw,280px)}
.clip-f video{width:100%;height:100%;object-fit:cover}
.g4{grid-template-columns:repeat(4,1fr)}
.grilla.par .foto,.grilla.par .foto.ancha{aspect-ratio:3/4}
.etapas{margin-top:-10px}
.etapas .paso-e{opacity:1}
.deck-dib{background:var(--panel);border-radius:var(--redondeo);padding:clamp(18px,3vw,34px)}
.deck-dib svg{width:100%;height:auto;display:block}
.deck-dib rect{transform-box:fill-box;transform-origin:left;animation:tabla 4.2s cubic-bezier(.2,.7,.2,1) infinite;
  animation-delay:calc(var(--k) * 70ms)}
@keyframes tabla{0%{transform:scaleX(0)}30%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.2}}
.mapa{border-radius:var(--redondeo);overflow:hidden;aspect-ratio:4/3.4;background:var(--panel);border:1px solid var(--linea)}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.02)}
.hero + .franja{margin-top:clamp(56px,8vw,110px)}
@media(max-width:900px){
  .g4{grid-template-columns:1fr 1fr}
  .proyectos .clip{flex-basis:58vw}
}
@media(prefers-reduced-motion:reduce){.deck-dib rect{animation:none}}

/* ---------------- pie mínimo: ubicación, un teléfono, Instagram ---------------- */
.pie{padding:34px 0}
.pie-min{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pie-min .logo{margin-right:auto}
.pie-dir{font-size:14.5px;color:var(--gris-2);text-decoration:none}
.pie-dir:hover{color:var(--texto)}
.pie-tel{color:var(--gris-2);text-decoration:none;font-size:13.5px}
.pie-tel:hover{color:var(--rojo)}
@media(max-width:900px){
  .pie-min{flex-direction:column;align-items:flex-start;gap:14px}
}
.solo-cel{display:none}
@media(max-width:900px){.solo-pc{display:none}.solo-cel{display:inline}}
.cerco-v .foto{aspect-ratio:4/5;max-width:480px;margin-left:auto}
@media(max-width:900px){.cerco-v .foto{margin:0 auto}}
.pergola-2{max-width:980px}

/* ---------------- hero: texto + la obra en vertical ----------------
   Todo el material de ellos es vertical de celular: acá se muestra en su formato
   y a su resolución, sin recortar ni agrandar. */
.hero-v{padding:calc(88px + 5vh) 0 clamp(40px,6vw,80px)}
.rej-v{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:center}
.hero-v h1{font-size:clamp(40px,5.6vw,82px);line-height:1.02;margin-top:18px;max-width:13ch}
.hero-v .baj{margin-top:24px;max-width:44ch;color:var(--gris-2);font-size:clamp(16px,1.25vw,19px)}
.hero-v .acc{margin-top:32px}
.hero-v-media{justify-self:end;width:min(100%,460px);aspect-ratio:720/1044;border-radius:24px;overflow:hidden;
  background:var(--panel);box-shadow:0 30px 70px -30px rgba(40,25,10,.45)}
.hero-v-media video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------------- animaciones ----------------
   Todo parte VISIBLE. `.anima` la pone mueve.js sólo si el usuario no pidió menos
   movimiento; `.entro` llega en el primer frame (y por guardián a los 400 ms), así
   que si el JS no corre nada queda escondido. */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.pal > span{display:inline-block}
.anima .pal > span{transform:translateY(108%);transition:transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(120ms + var(--i) * 65ms)}
.anima .sube{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(160ms + var(--i) * 65ms)}
.anima .hero-v-media{clip-path:inset(18% 8% 18% 8% round 24px);transform:scale(1.04);
  transition:clip-path 1.4s cubic-bezier(.16,1,.3,1) .25s,transform 1.6s cubic-bezier(.16,1,.3,1) .25s}
.anima.entro .pal > span,.anima.entro .sube{opacity:1;transform:none}
.anima.entro .hero-v-media{clip-path:inset(0 0 0 0 round 24px);transform:none}

/* botones: la flecha avanza, el rojo se levanta */
.btn{transition:background .2s,border-color .2s,color .2s,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.btn .flecha{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
  .btn-r:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(224,10,15,.6)}
  .btn:hover .flecha{transform:translateX(4px)}
  .modo,.prod{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .25s}
  .modo:hover,.prod:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(40,25,10,.35)}
}

/* el subrayado rojo de los títulos de sección se dibuja al entrar */
.sec-tit h2{position:relative}
.sec-tit h2::after{content:'';position:absolute;left:0;bottom:-10px;height:3px;width:56px;background:var(--rojo);
  transform:scaleX(1);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1) .25s}
.js .sec-tit.entra h2::after{transform:scaleX(0)}
.js .sec-tit.entra.dentro h2::after{transform:scaleX(1)}

@media(max-width:900px){
  .hero-v{padding-top:96px}
  .rej-v{grid-template-columns:1fr}
  .hero-v-media{justify-self:stretch;width:100%;max-height:78svh;aspect-ratio:720/1000}
}
@media(prefers-reduced-motion:reduce){
  .anima .pal > span,.anima .sube,.anima .hero-v-media{transform:none;opacity:1;clip-path:none}
}