/* ═══════════════════════════════════════════════════════════════════════
   EL ANGEL ABERTURAS — style.css (2026-10-14)
   Sitio de CLIENTE (Coronel Suárez). Sale del motor de la demo de
   aberturas (Don Tito, demos/aberturas/): index.html, style.css y main.js
   sueltos, sin librerías.

   Colores (Pablo: «los colores míos los dejo a tu criterio; el logo en
   gris»): GRAFITO del logo para lo oscuro, mucho BLANCO de PVC, el
   CELESTE de su cartel y de su web vieja (#19B5EF) para lo que se toca y
   la luz, y MADERA (sus puertas) de acento cálido. ⚠ El celeste sobre
   blanco da ~2,4:1: no va en texto chico sobre claro; ahí va --celeste-hondo.
   Los colores de REHAU (catálogo de folios) no se tocan: son imágenes.

   ⚠ Reglas de la casa: nada de overflow en html ni body (rompe los
   sticky; body{overflow-x:clip} sí), y sólo se anima transform, opacity
   y clip-path.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ⚠ 19/10, Pablo (punto 14): «sacale tanto negro… por mis colores turquesa,
     beige y gris suave» (foto de su fachada, SIN el azul del cielo). Medidos
     en la foto: turquesa #01C8DC (al sol), beige #E0D0C0 (pared), gris
     #938B81 (revoque). Los tokens que eran del grafito se llaman ahora
     --fondo / --texto-2 / --gris-2 / --linea-2 y valen CLARO; adentro de los
     videos (texto sobre la imagen, compu) vuelven a sus valores claros-sobre-
     oscuro (bloque «PALETA DE PABLO» al final). La clase .oscuro quedó de
     cuando esas secciones eran grafito: hoy son el gris suave. Contrastes
     medidos sobre --fondo: tinta 11:1, --gris 5,6:1.
     ⚠ 19/10 (2), Jope: «un solo turquesa, el de la fachada». El petróleo
     (#006B79) se fue: --petroleo vale el mismo turquesa y la letra chica que
     iba en petróleo pasó a tinta con el turquesa de fondo o de subrayado
     (bloque «UN SOLO TURQUESA» al final). */
  --fondo:#e8e5e0;           /* gris suave (las secciones .oscuro) */
  --fondo-2:#dfdad3;
  --fondo-3:#d6d0c8;
  --linea-2:rgba(46,43,40,.12);
  --texto-2:#2e2b28;
  --gris-2:#5f5850;

  --aluminio:#f6f1e9;        /* hueso: las secciones .claro y la página */
  --arena:#ece2d4;           /* beige claro */
  --beige:#e0d0c0;           /* el beige de su pared, tal cual */
  --piedra:#938b81;          /* el gris de su revoque, tal cual: filos e íconos */
  --blanco:#fffdf9;
  --tinta:#2e2b28;           /* grafito cálido: el texto (no negro) */
  --gris:#5f5850;
  --linea:rgba(46,43,40,.13);

  --logo:#373435;            /* el gris del logo */
  --petroleo:#01c8dc;        /* = --cian desde el 19/10 (2): un solo turquesa */
  --petroleo-2:#00b3c6;      /* el mismo turquesa en la sombra de la fachada (medido: #00B3B8) */
  --cian:#01c8dc;            /* el turquesa de su fachada (sólo luces, barras y botones con letra oscura) */
  --cobre:#b57a3e;           /* madera: sólo acentos */
  --wsp:#1faa55;

  --r:18px;
  --r-chico:10px;
  --ancho:1200px;
  --gutter:clamp(16px,4vw,40px);
  --cab:68px;

  --f:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --curva:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--cab)}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.55;color:var(--tinta);background:var(--fondo);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,p{margin:0}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}

/* ── Tipografía ─────────────────────────────────────────────────────── */
.volanta{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cian);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.volanta::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.volanta--oscura{color:var(--petroleo)}
.h1{font-weight:800;font-stretch:118%;font-size:clamp(40px,6.2vw,86px);line-height:.98;letter-spacing:-.025em;color:#fff}
.h1 em,.h2 em{font-style:normal;font-weight:300;font-stretch:100%;color:var(--cian)}
.h1--dos{font-size:clamp(34px,4.8vw,66px)}
.h2{font-weight:800;font-stretch:112%;font-size:clamp(32px,4.2vw,56px);line-height:1.02;letter-spacing:-.02em}
.claro .h2 em{color:var(--petroleo)}
.bajada{font-size:clamp(17px,1.35vw,20px);color:var(--gris-2);max-width:34em;margin-top:22px}
.nota{font-size:13.5px;color:var(--gris);margin-top:14px}
.oscuro .nota{color:var(--gris-2)}
.nota--pie{font-family:var(--mono);font-size:11.5px;margin-top:28px;opacity:.8}

.claro{background:var(--aluminio);color:var(--tinta)}
.oscuro{background:var(--fondo);color:var(--texto-2)}
section{position:relative}
/* los halos .led salen por los costados: cada sección los recorta. clip y
   no hidden: hidden vuelve a la sección un contenedor de scroll y apaga
   los sticky de adentro (regla 2). */
main>section{overflow-x:clip}
.claro,.oscuro{padding:clamp(80px,11vw,150px) 0}

.cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(40px,5vw,64px)}
.cabeza__txt{max-width:25em;color:var(--gris)}
.oscuro .cabeza__txt{color:var(--gris-2)}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--petroleo);color:#fff;text-decoration:none;font-weight:650;font-size:16px;border:0;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--curva);box-shadow:0 10px 30px -12px rgba(0,150,165,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.btn svg{width:18px;height:18px;flex:none}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-110%);transition:transform .8s var(--curva)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateX(110%)}
.btn:focus-visible{outline:3px solid var(--cian);outline-offset:3px}
.btn--fantasma{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.claro .btn--fantasma{color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea)}
.btn--wsp{background:var(--wsp);box-shadow:0 10px 30px -12px rgba(31,170,85,.9),inset 0 1px 0 rgba(255,255,255,.2)}
.btn--chico{min-height:42px;padding:0 18px;font-size:14.5px}
.btn--ancho{width:100%;justify-content:center}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ── Cabecera ───────────────────────────────────────────────────────── */
.cab{position:fixed;inset:0 0 auto;z-index:50;height:var(--cab);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter);color:#fff;transition:transform .5s var(--curva)}
.cab::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(28,30,32,.82);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--linea-2);opacity:0;transition:opacity .4s}
.cab.is-solida::before{opacity:1}
.cab.is-oculta{transform:translateY(-100%)}
.cab__marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.cab__marca svg{width:38px;height:38px;flex:none;filter:drop-shadow(0 0 10px rgba(1,200,220,.25))}
.cab__marca span{display:flex;flex-direction:column;line-height:1.1}
.cab__marca b{font-weight:800;font-stretch:118%;font-size:17px;letter-spacing:.01em;text-transform:uppercase}
.cab__marca small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-2)}
.cab__nav{display:flex;gap:28px;font-size:15px}
.cab__nav a{text-decoration:none;opacity:.8;position:relative;padding:6px 0}
.cab__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cian);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--curva)}
.cab__nav a:hover{opacity:1}
.cab__nav a:hover::after{transform:scaleX(1)}
@media (max-width:860px){.cab__nav{display:none}}
@media (max-width:420px){
  .cab__marca b{font-size:14.5px;font-stretch:100%;white-space:nowrap}
  .cab__marca svg{width:34px;height:34px}
  .cab .btn--chico{padding:0 14px}
  .mapa .punto text{font-size:19px}
  .mapa .km{font-size:15px}
}

/* ── Pantalla de carga ──────────────────────────────────────────────── */
.carga{position:fixed;inset:0;z-index:100;background:var(--fondo);display:none;flex-direction:column;align-items:center;justify-content:center;gap:28px;color:#fff;transition:opacity .6s,visibility 0s linear .6s}
html.cargando .carga{display:flex}
html.carga-sale .carga{display:flex;opacity:0;visibility:hidden}
.carga__marca{text-align:center}
.carga__logo{width:64px;height:64px;margin:0 auto 18px;display:block;animation:latido 1.8s ease-in-out infinite}
.carga__nombre{font-weight:800;font-stretch:125%;font-size:26px;letter-spacing:.08em}
.carga__rubro{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-2);margin-top:6px}
.carga__barra{width:min(260px,64vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
.carga__barra i{display:block;height:100%;background:var(--cian);transform:scaleX(0);transform-origin:left;transition:transform .3s;box-shadow:0 0 12px var(--cian)}
.carga__pct{font-family:var(--mono);font-size:12px;color:var(--gris-2)}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ═══ 1 · PORTADA ════════════════════════════════════════════════════ */
.armado{height:420vh;background:var(--fondo);color:#fff}
.armado__escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.armado__cuadro{position:absolute;inset:0;transform-origin:62% 50%;will-change:transform}
.armado__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;background:#141819 center/cover no-repeat;background-position:62% 50%}
.armado__video::-webkit-media-controls,.abre__video::-webkit-media-controls{display:none!important}
.armado__video::-webkit-media-controls-start-playback-button,.abre__video::-webkit-media-controls-start-playback-button{display:none!important}
/* velo del lado del texto (el video trae la izquierda vacía, pero el
   degradé ancla el texto aunque la ventana sea angosta) */
.armado__cuadro::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,30,32,.92) 0%,rgba(28,30,32,.55) 34%,rgba(28,30,32,0) 58%),linear-gradient(0deg,rgba(28,30,32,.8),rgba(28,30,32,0) 22%);pointer-events:none}

/* Etiquetas técnicas sobre las piezas sueltas */
.armado__piezas{position:absolute;inset:0;z-index:2;pointer-events:none}
.pieza{position:absolute;left:0;top:0;font-family:var(--mono);font-size:12px;line-height:1.3;color:#fff;white-space:nowrap;padding:6px 10px;border-radius:8px;background:rgba(28,30,32,.6);box-shadow:inset 0 0 0 1px rgba(1,200,220,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.pieza em{display:block;font-style:normal;color:var(--gris-2);font-size:11px}
.pieza::before{content:"";position:absolute;top:50%;width:46px;height:1px;background:linear-gradient(90deg,var(--cian),rgba(1,200,220,.2))}
.pieza::after{content:"";position:absolute;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--cian);box-shadow:0 0 0 4px rgba(1,200,220,.2),0 0 14px var(--cian)}
.pieza[data-lado="izq"]::before{right:-46px;transform:scaleX(-1)}
.pieza[data-lado="izq"]::after{right:-54px}
.pieza[data-lado="der"]::before{left:-46px}
.pieza[data-lado="der"]::after{left:-54px}
.pieza.is-on{opacity:1}

.armado__textos{position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;max-width:var(--ancho);margin:0 auto;padding:calc(var(--cab) + 20px) var(--gutter) 90px;display:grid;align-items:center}
.paso-hero{grid-area:1/1;max-width:600px;opacity:0;transform:translateY(40px);transition:opacity .6s var(--curva),transform .8s var(--curva);pointer-events:none}
.paso-hero.is-on{opacity:1;transform:none;pointer-events:auto}
.paso-hero.is-arriba{transform:translateY(-40px)}
.paso-hero .h1 em{display:inline-block}
.chips-hero{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.chips-hero li{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--linea-2);font-size:15px}
.chips-hero i,.muestra i,.opciones--color i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.4)}

/* Entrada del primer paso: espera a que se vaya la pantalla de carga */
html.cargando .paso-hero.is-on{opacity:0;transform:translateY(40px)}

.armado__regla{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:28px;max-width:calc(var(--ancho) - 2 * var(--gutter));margin:0 auto;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding-right:70px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2)}
.armado__regla i{flex:0 0 160px;height:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;border-radius:2px}
.armado__regla i::after{content:"";position:absolute;inset:0;background:var(--cian);transform:scaleX(var(--p,0));transform-origin:left;box-shadow:0 0 10px var(--cian)}

/* Teléfono parado: el video va ARRIBA, recortado a la ventana, y el
   texto abajo sobre grafito liso. En cover sobre toda la pantalla un
   16:9 se agranda por el alto y se ve un pedazo (TECNICAS-VIDEO §8). */
@media (max-width:760px) and (orientation:portrait){
  .armado{height:360vh}
  /* El video ENTERO (Jope, 2026-09-29: «que se vean completos»): una caja
     16:9 a lo ancho, sin recorte y sin la cámara del scroll (main.js la
     apaga en el teléfono). Atrás, el mismo cuadro desenfocado llena el
     alto. La portada es el cuadro 0 del archivo -cel. */
  .armado__cuadro{bottom:auto;top:calc(var(--cab) + 22px);left:12px;right:12px;height:auto;aspect-ratio:16/9;transform:none!important}
  .armado__video{object-position:50% 50%;border-radius:14px;box-shadow:0 0 0 1px rgba(1,200,220,.22),0 24px 60px -18px rgba(1,200,220,.35);background-image:url(assets/img/quinta-m.webp)!important;background-position:50% 50%}
  .armado__cuadro::after{content:none}
  .armado__escena::before{content:"";position:absolute;left:-10%;right:-10%;top:0;height:58svh;background:url(assets/img/quinta-m.webp) center/cover;filter:blur(26px) brightness(.55) saturate(1.2);opacity:.9;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .armado__textos{padding:0 var(--gutter) 72px;align-items:end}
  .h1{font-size:clamp(34px,10.4vw,46px)}
  .h1--dos{font-size:clamp(30px,9vw,40px)}
  .bajada{margin-top:14px;font-size:16px}
  .acciones{margin-top:22px}
  .paso-hero .btn{min-height:48px;padding:0 18px;font-size:15px}
  .pieza{font-size:10.5px;padding:4px 7px}
  .pieza:nth-child(n+2){display:none}   /* una alcanza; las de abajo pisaban el titular */
  .paso-hero .volanta{font-size:11px;margin-bottom:12px}
  .pieza em{display:none}
  .pieza::before{width:26px}
  .pieza[data-lado="izq"]::before{right:-26px}
  .pieza[data-lado="der"]::before{left:-26px}
  .pieza[data-lado="izq"]::after{right:-32px}
  .pieza[data-lado="der"]::after{left:-32px}
  .armado__regla{bottom:22px}
  .armado__regla i{flex-basis:90px}
}

/* ═══ 2 · EN SIMPLE: la pista ════════════════════════════════════════
   Una pista alta con la escena pegada (sticky): a la izquierda los tres
   pasos (uno por tercio, data-paso), a la derecha una foto por paso
   (.pfotos, más abajo). Los nombres .reloj__* vienen de cuando era un
   reloj. Sin JS: los tres pasos uno abajo del otro, sin pista. */
.simple{padding:0!important;background:var(--fondo)}
.reloj__escena{position:relative;overflow:hidden;padding:clamp(80px,11vw,140px) 0}
.js .reloj__pista{height:320vh}
.js .reloj__escena{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:grid;align-items:center}
.reloj__grilla{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;padding-top:var(--cab)}
.reloj__fondo{position:absolute;inset:0;pointer-events:none}
.reloj__fondo i{position:absolute;right:-10%;top:50%;width:min(110vw,1100px);aspect-ratio:1;margin-top:calc(min(110vw,1100px) / -2);border-radius:50%;
  background:radial-gradient(closest-side,var(--c),transparent 70%);opacity:0;transition:opacity 1.2s var(--curva)}
.reloj__fondo i:nth-child(1){--c:rgba(1,200,220,.22)}
.reloj__fondo i:nth-child(2){--c:rgba(1,200,220,.22)}
.reloj__fondo i:nth-child(3){--c:rgba(240,163,90,.2)}
.simple[data-paso="1"] .reloj__fondo i:nth-child(1),.simple[data-paso="2"] .reloj__fondo i:nth-child(2),.simple[data-paso="3"] .reloj__fondo i:nth-child(3){opacity:1}
.reloj__fondo::before{content:"";position:absolute;right:-6%;top:50%;width:min(95vw,900px);aspect-ratio:1;margin-top:calc(min(95vw,900px) / -2);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(1,200,220,.18) 82%,rgba(255,255,255,.12) 86%,transparent 92%);
  -webkit-mask-image:radial-gradient(closest-side,transparent 30%,#000 60%,transparent);mask-image:radial-gradient(closest-side,transparent 30%,#000 60%,transparent);
  animation:giroLuz 14s linear infinite}
.reloj__fondo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(60% 60% at 70% 50%,#000,transparent);mask-image:radial-gradient(60% 60% at 70% 50%,#000,transparent)}
@keyframes giroLuz{to{transform:rotate(360deg)}}

.reloj__txt .h2{margin-bottom:34px}
.reloj__pasos{list-style:none;margin:0;padding:0;display:grid}
.rpaso{padding:18px 0 18px 22px;border-left:2px solid var(--led)}
.rpaso+.rpaso{margin-top:14px}
.rpaso__n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--led)}
.rpaso h3{font-weight:800;font-stretch:115%;font-size:clamp(30px,3.4vw,46px);line-height:1.02;color:#fff;margin:8px 0 12px}
.rpaso p{color:var(--gris-2);max-width:30em;font-size:clamp(16px,1.25vw,18.5px)}
/* con JS: un paso por vez, en el mismo lugar */
.js .rpaso{grid-area:1/1;margin:0;opacity:0;transform:translateY(34px);transition:opacity .6s var(--curva),transform .8s var(--curva);pointer-events:none;
  border-left:0;padding-left:0}
.js .rpaso.is-on{opacity:1;transform:none;pointer-events:auto}
.js .rpaso.is-antes{transform:translateY(-34px)}
.reloj__guia{display:none}
.js .reloj__guia{display:flex;align-items:center;gap:12px;margin-top:34px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2)}
.reloj__guia i{position:relative;width:120px;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.reloj__guia i::after{content:"";position:absolute;inset:0;background:var(--cian);box-shadow:0 0 10px var(--cian);transform:scaleX(var(--p,0));transform-origin:left}

@media (max-width:860px){
  .reloj__grilla{grid-template-columns:minmax(0,1fr);gap:18px;align-content:center}
  .reloj__txt .h2{font-size:clamp(24px,7vw,32px);margin-bottom:16px}
  .reloj__txt .volanta{margin-bottom:10px}
  .rpaso h3{font-size:28px;margin:6px 0 8px}
  .rpaso p{font-size:15.5px}
  .js .reloj__guia{margin-top:18px}
  .reloj__fondo i,.reloj__fondo::before{right:auto;left:50%;top:32%;margin-left:calc(min(110vw,1100px) / -2)}
  .reloj__fondo::before{margin-left:calc(min(95vw,900px) / -2)}
}
@media (prefers-reduced-motion:reduce){.reloj__fondo::before{animation:none}}

/* ═══ LUCES LED en toda la página ════════════════════════════════════
   .led: una luz de color DETRÁS del elemento. El fondo del elemento pasa
   a un ::after (z -1) para que la luz (::before, z -1, antes en el árbol)
   quede debajo: sin eso, con isolation la luz se pintaba ENCIMA del fondo.
   --led color, --i intensidad (0–1), --t ritmo, --d desfase. Respira sólo
   con opacity (regla 7). Radial sin filter: nada de blur animado.
   .foto-led: para figuras con overflow:hidden (un hijo no puede salir):
   la luz es su propia box-shadow, quieta, en tres anillos. */
.led{position:relative;isolation:isolate;background:none!important}
.led::before{content:"";position:absolute;inset:-18% -14%;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--led) 85%,transparent),color-mix(in srgb,var(--led) 25%,transparent) 55%,transparent);
  opacity:var(--i,.5);animation:respira var(--t,7s) ease-in-out var(--d,0s) infinite}
.led::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--sup,transparent);pointer-events:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--led) 30%,transparent),0 0 40px -14px color-mix(in srgb,var(--led) 80%,transparent)}
.claro .led::before{inset:-26% -20%;background:radial-gradient(closest-side,var(--led),color-mix(in srgb,var(--led) 40%,transparent) 50%,transparent)}
@keyframes respira{0%,100%{opacity:var(--i,.5)}50%{opacity:calc(var(--i,.5) * .5)}}
.foto-led{box-shadow:
  0 0 0 1px color-mix(in srgb,var(--led) calc(var(--i,.5) * 60%),transparent),
  0 0 34px -6px color-mix(in srgb,var(--led) calc(var(--i,.5) * 90%),transparent),
  0 40px 110px -30px color-mix(in srgb,var(--led) calc(var(--i,.5) * 100%),transparent)}

/* ═══ 3 · QUÉ HACEMOS: mosaico como la galería de Tardaluz ═══════════
   Celdas cuadradas del ancho de una columna (--col): la grande ocupa 2×2,
   las altas 1×2 y la ancha 2×1, así las seis calzan justo en 4 columnas
   (2 en el teléfono). Los filtros esconden (hidden) y `dense` rellena.
   El nombre se ve SIEMPRE (en el teléfono no hay hover); la descripción
   sube al pasar el mouse. Tocar abre el visor, que baja la versión -g. */
.productos{--gap:clamp(8px,1.1vw,14px);--col:calc((min(100vw,var(--ancho)) - 2 * var(--gutter) - 3 * var(--gap)) / 4)}
.obras-filtros{display:none}
.js .obras-filtros{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea),0 12px 30px -20px rgba(19,24,27,.35);margin-bottom:22px}
.obras-filtros button{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:none;font-size:14.5px;font-weight:600;color:var(--gris);cursor:pointer;transition:background .3s,color .3s}
.obras-filtros button[aria-pressed="true"]{background:var(--petroleo);color:#fff;box-shadow:0 8px 20px -10px var(--petroleo)}
.obras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--col);grid-auto-flow:dense;gap:var(--gap)}
.obra{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#232629;isolation:isolate;
  box-shadow:0 30px 60px -36px rgba(0,150,165,.55),0 2px 8px -4px rgba(0,0,0,.2)}
.obra--grande{grid-column:span 2;grid-row:span 2}
.obra--alta{grid-row:span 2}
.obra--ancha{grid-column:span 2}
.obra[hidden]{display:none}
.obra__abrir{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:inherit}
.obra__abrir:focus-visible{outline:3px solid var(--cian);outline-offset:-3px}
.obra img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.4s var(--curva)}
.obra:hover img{transform:scale(1.06)}
.obra::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(to top,rgba(8,10,11,.86) 0%,rgba(8,10,11,.45) 26%,rgba(8,10,11,0) 48%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.obra__num{position:absolute;z-index:2;top:14px;left:16px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.8);pointer-events:none}
.obra figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:18px 18px 16px;pointer-events:none;color:#fff}
.obra figcaption b{display:flex;align-items:center;gap:10px;font-weight:800;font-stretch:108%;font-size:clamp(17px,1.5vw,22px);line-height:1.1}
.obra figcaption b::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--cian);box-shadow:0 0 0 4px rgba(1,200,220,.2),0 0 12px var(--cian)}
.obra figcaption span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:#d6dde0;max-width:32em;
  opacity:0;transform:translateY(8px);transition:opacity .45s,transform .6s var(--curva)}
.obra:hover figcaption span,.obra:focus-within figcaption span{opacity:1;transform:none}
.obra--grande figcaption span{opacity:1;transform:none}
.obra.is-entra{animation:obraEntra .7s var(--curva) both;animation-delay:var(--e,0s)}
@keyframes obraEntra{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.obras__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;margin-top:20px;font-size:13.5px;color:var(--gris)}
/* cada foto entra de un lado distinto (main.js reparte data-lado) */
.js .obra.rv{transition:opacity .9s var(--curva),transform 1.2s var(--curva)}
.js .obra.rv img{transform:scale(1.25);transition:transform 1.8s var(--curva)}
.js .obra.rv[data-lado="izq"]{transform:translate3d(-70px,0,0) rotate(-2deg)}
.js .obra.rv[data-lado="der"]{transform:translate3d(70px,0,0) rotate(2deg)}
.js .obra.rv[data-lado="abajo"]{transform:translate3d(0,80px,0)}
.js .obra.rv[data-lado="cerca"]{transform:scale(.8)}
.js .obra.rv.is-in{transform:none}
.js .obra.rv.is-in img{transform:none}
.js .obra.rv.is-in:hover img{transform:scale(1.06)}
.js .obra.rv.is-sale{transform:translate3d(0,-50px,0) scale(.94)}
@media (max-width:760px){
  .productos{--col:calc((100vw - 2 * var(--gutter) - var(--gap)) / 2)}
  .obras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .obra{border-radius:14px}
  .obra figcaption{padding:12px 12px 11px}
  .obra figcaption b{font-size:15px;gap:8px}
  .obra--grande figcaption b{font-size:19px}
  .obra figcaption span{display:none}
  .obra--grande figcaption span{display:block;font-size:13px}
  .js .obras-filtros{display:flex;flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none}
  .obras-filtros button{flex:0 0 auto;padding:0 14px;font-size:13px;white-space:nowrap}
}

/* El visor: pantalla completa, foto entera (contain), texto y «Cotizar». */
.visor{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(10,13,14,.97);color:#fff;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.visor[hidden]{display:none}
.visor.is-abierto{opacity:1;visibility:visible;transition:opacity .35s ease}
.visor__cab{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,3vw,32px)}
.visor__cuenta{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--gris-2)}
.visor__cerrar,.visor__flecha{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;cursor:pointer;transition:border-color .3s,transform .3s var(--curva)}
.visor__cerrar:hover,.visor__flecha:hover{border-color:var(--cian)}
.visor__cerrar svg,.visor__flecha svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.visor__escena{position:relative;margin:0 clamp(10px,3vw,32px)}
.visor__escena img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;
  box-shadow:0 0 0 1px rgba(1,200,220,.2),0 30px 90px -30px rgba(1,200,220,.45);transition:opacity .45s ease,transform .7s var(--curva)}
.visor.is-cargando .visor__escena img{opacity:0;transform:scale(.97)}
.visor__pie{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,3vw,32px) 20px;max-width:900px;width:100%;margin:0 auto}
.visor__txt{flex:1;text-align:center}
.visor__txt span{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cian)}
.visor__txt b{display:block;font-weight:800;font-stretch:110%;font-size:clamp(22px,2.4vw,30px);line-height:1.1;margin:4px 0 6px}
.visor__txt p{color:#d6dde0;font-size:15px;max-width:36em;margin:0 auto}
.visor__txt small{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--gris-2)}
.visor__cta{margin-top:14px}
@media (max-width:760px){
  .visor__txt p{font-size:14px}
  .visor__pie{gap:8px}
}

/* ═══ 4 · COLORES ════════════════════════════════════════════════════ */
.colores__grilla{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.colores__txt>p{color:var(--gris-2)}
.muestras{display:grid;gap:10px;margin-top:30px}
.muestra{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.03);border:0;box-shadow:inset 0 0 0 1px var(--linea-2);cursor:pointer;transition:background .3s,box-shadow .3s}
.muestra i{grid-row:1/3;width:34px;height:34px}
.muestra b{font-weight:700;font-size:16.5px}
.muestra small{color:var(--gris-2);font-size:13.5px}
.muestra.is-on{background:rgba(1,200,220,.07);box-shadow:inset 0 0 0 1.5px var(--cian),0 0 30px -10px var(--cian)}
.muestra:focus-visible{outline:2px solid var(--cian);outline-offset:3px}

.colores__vista{position:relative}
.colores__foto{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#232629}
.colores__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .8s var(--curva),transform 1.4s var(--curva)}
.colores__foto img.is-on{opacity:1;transform:none}
.colores__foto figcaption{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(28,30,32,.7);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ═══ 5 · DVH: video del temporal (recorrido con el scroll) + detalle ═ */
.frio{height:320vh;background:var(--fondo);color:#fff}
.frio__escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--fondo)}
.frio__cam,.abre__cam{position:absolute;inset:0;will-change:transform}
.frio__cam{transform-origin:62% 50%}
.abre__cam{transform-origin:42% 55%}
.frio__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#101418 center/cover no-repeat}
.frio__video::-webkit-media-controls{display:none!important}
.frio__video::-webkit-media-controls-start-playback-button{display:none!important}
.frio__velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(28,30,32,.88) 0%,rgba(28,30,32,.5) 32%,rgba(28,30,32,0) 55%),linear-gradient(0deg,rgba(28,30,32,.7),rgba(28,30,32,0) 30%)}
.frio__txt{position:absolute;inset:0;max-width:var(--ancho);margin:0 auto;padding:calc(var(--cab) + 20px) var(--gutter) 70px;display:grid;align-items:center}
.paso-frio{grid-area:1/1;max-width:560px;opacity:0;transform:translateY(40px);transition:opacity .6s var(--curva),transform .8s var(--curva)}
.paso-frio.is-on{opacity:1;transform:none}
.paso-frio.is-arriba{transform:translateY(-40px)}
.paso-frio .bajada{color:#d6dde0}
@media (max-width:760px) and (orientation:portrait){
  .frio{height:280vh}
  .frio__escena::before,.abre__escena::before{content:"";position:absolute;left:-10%;right:-10%;top:0;height:66svh;background:center/cover;filter:blur(26px) brightness(.68) saturate(1.25);opacity:.95;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .frio__escena::before{background-image:url(assets/img/nevada-m.webp)}
  .abre__escena::before{background-image:url(assets/img/abre-cel.webp)}
  .frio__cam,.abre__cam{transform:none!important}
  .frio__video{background-image:url(assets/img/nevada-m.webp)!important}
  .frio--arbol .frio__escena::before{background-image:url(assets/img/arbol-v-m.webp)}
  .frio--arbol .frio__video{background-image:url(assets/img/arbol-v-m.webp)!important}
  .frio--lluvia .frio__escena::before{background-image:url(assets/img/lluvia-m.webp)}
  .frio--lluvia .frio__video{background-image:url(assets/img/lluvia-m.webp)!important}
  .frio--casa .frio__escena::before{background-image:url(assets/img/casa-orbita-m.webp)}
  .frio--casa .frio__video{background-image:url(assets/img/casa-orbita-m.webp)!important}
  .frio__velo,.abre__velo{background:linear-gradient(0deg,var(--fondo) 0%,var(--fondo) 34%,rgba(28,30,32,0) 50%)}
  .frio__txt{align-items:end;padding-bottom:64px}
}
.dvh{background:linear-gradient(180deg,var(--fondo),var(--fondo-2))}

/* ═══ 6 · LA CORREDIZA QUE SE ABRE ═══════════════════════════════════ */
.abre{height:340vh;background:var(--fondo)}
.abre__escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--fondo)}
.abre__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1a1612 center/cover no-repeat}
.abre__velo{position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,30,32,.9) 0%,rgba(28,30,32,.35) 38%,rgba(28,30,32,0) 60%);pointer-events:none}
.abre__txt{position:absolute;left:0;right:0;bottom:0;max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter) clamp(48px,8vh,96px);color:#fff}
.abre__txt .bajada{color:#d9dfe2}
.abre__txt>*{opacity:0;transform:translateY(30px);transition:opacity .7s var(--curva),transform .9s var(--curva)}
.abre.is-texto .abre__txt>*{opacity:1;transform:none}
.abre.is-texto .abre__txt>:nth-child(2){transition-delay:.08s}
.abre.is-texto .abre__txt>:nth-child(3){transition-delay:.16s}
@media (max-width:760px) and (orientation:portrait){
  .abre{height:290vh}
  .abre__video{background-image:url(assets/img/abre-cel.webp)!important}
}

/* ═══ 7 · COTIZADOR ══════════════════════════════════════════════════ */
.cotizar{background:var(--blanco)}
.coti{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
.coti__form{display:grid;gap:14px}
.coti__paso{border:0;margin:0;padding:24px;border-radius:var(--r);background:var(--aluminio)}
.coti__paso legend{float:left;width:100%;display:flex;align-items:center;gap:12px;font-weight:800;font-stretch:108%;font-size:19px;margin-bottom:16px}
.coti__paso legend span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--petroleo);color:#fff;font-family:var(--mono);font-size:13px;font-weight:500}
.coti__paso>*:not(legend){clear:both}
.coti__ayuda{margin-left:auto;background:none;border:0;padding:4px 0;font-weight:600;font-size:14px;color:var(--petroleo);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones+.opciones{margin-top:12px}
.opciones label{position:relative;cursor:pointer}
.opciones input{position:absolute;opacity:0;pointer-events:none}
.opciones span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea);font-size:15px;transition:background .25s,box-shadow .25s,color .25s}
.opciones span small{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:4px;background:rgba(0,150,165,.1);color:var(--petroleo)}
.opciones input:checked+span{background:var(--petroleo);color:#fff;box-shadow:0 8px 20px -10px var(--petroleo)}
.opciones input:checked+span small{background:rgba(255,255,255,.18);color:#fff}
.opciones input:focus-visible+span{outline:2px solid var(--petroleo);outline-offset:2px}
.opciones--color i{width:18px;height:18px}
.opciones--check span::before{content:"";width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.5}
.opciones--check input:checked+span::before{opacity:1;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230f5566' stroke-width='3'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}

.medidas{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.medidas__x{font-size:24px;color:var(--gris);padding-bottom:10px}
.campo{display:flex;flex-direction:column;gap:6px;position:relative}
.campo>span{font-size:13px;font-weight:600;color:var(--gris)}
.campo input{width:120px;height:52px;padding:0 44px 0 16px;border-radius:12px;border:0;background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea);font-family:var(--mono);font-size:19px;font-weight:500}
.campo input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--petroleo)}
.campo em{position:absolute;right:14px;bottom:15px;font-style:normal;font-family:var(--mono);font-size:13px;color:var(--gris)}
.campo--cant{margin-left:auto}
.campo--cant input{width:92px;padding-right:12px}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo--txt input{width:100%;font-family:var(--f);font-size:16.5px;padding-right:16px}

.como-medir{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;margin-top:18px;padding:18px;border-radius:14px;background:var(--blanco);color:var(--tinta)}
.como-medir[hidden]{display:none}
.como-medir svg{width:100%;height:auto;color:var(--gris)}
.como-medir ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px}
.como-medir:not([hidden]){animation:asoma .5s var(--curva)}
@keyframes asoma{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.coti__vista{--sup:var(--fondo);position:sticky;top:calc(var(--cab) + 20px);padding:24px;border-radius:calc(var(--r) + 4px);color:var(--texto-2);box-shadow:0 40px 80px -40px rgba(28,30,32,.6)}
.plano{border-radius:14px;background:
  linear-gradient(rgba(1,200,220,.07) 1px,transparent 1px) 0 0/20px 20px,
  linear-gradient(90deg,rgba(1,200,220,.07) 1px,transparent 1px) 0 0/20px 20px,
  var(--fondo-2);box-shadow:inset 0 0 0 1px var(--linea-2);padding:10px}
.plano__svg{display:block;width:100%;height:auto}
.plano__svg .cota{font-family:var(--mono);font-size:11px;fill:var(--cian)}
.plano__svg .cota-linea{stroke:var(--cian);stroke-width:1}
.plano__svg .hoja{transition:transform .5s var(--curva)}
.resumen{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:20px 0;font-size:14.5px}
.resumen dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-2);padding-top:2px}
.resumen dd{margin:0;font-weight:600}
.coti__vista .nota{text-align:center}

/* ═══ 9 · ZONA ═══════════════════════════════════════════════════════ */
.zona{background:var(--blanco)}
.zona__grilla{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.zona__grilla>div>p:not(.volanta){color:var(--gris);margin-top:20px}
.zona__pueblos{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.zona__pueblos li{font-size:14.5px;padding:8px 13px;border-radius:999px;background:var(--aluminio);display:flex;gap:8px;align-items:baseline}
.zona__pueblos li small{font-family:var(--mono);font-size:11px;color:var(--gris)}
.zona__pueblos li.es-base{background:var(--petroleo);color:#fff}
.zona__pueblos li.es-base small{color:rgba(255,255,255,.7)}
.mapa{border-radius:var(--r);overflow:hidden;background:
  linear-gradient(rgba(0,150,165,.06) 1px,transparent 1px) 0 0/25px 25px,
  linear-gradient(90deg,rgba(0,150,165,.06) 1px,transparent 1px) 0 0/25px 25px,
  var(--aluminio)}
.mapa svg{display:block;width:100%;height:auto}
.mapa .anillo{fill:none;stroke:var(--petroleo);stroke-width:1.5;stroke-dasharray:3 6;opacity:.55;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:transform 1.4s var(--curva),opacity 1s}
.mapa .laguna{fill:url(#mpAgua)}
.mapa .laguna-borde{fill:#e8f0d8;opacity:.8}
.mapa .agua-nombre{font-family:var(--f);font-size:10.5px;font-style:italic;font-weight:600;fill:#2a6f86;paint-order:stroke;stroke:rgba(232,240,216,.9);stroke-width:3px}
.mapa .camino{fill:none;stroke:#f4efe0;stroke-width:2;opacity:.85}
.mapa .ruta{fill:none;stroke:#c9ced1;stroke-width:2}
.mapa .punto{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s var(--curva)}
.mapa .punto circle{fill:var(--tinta)}
.mapa .punto text{font-family:var(--f);font-size:13px;font-weight:700;fill:var(--tinta);paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:3.5px;stroke-linejoin:round}
.mapa .punto--base circle{fill:var(--petroleo)}
.mapa .punto--base .onda{fill:none;stroke:var(--petroleo);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:onda 2.4s ease-out infinite}
.mapa .km{font-family:var(--mono);font-size:10.5px;fill:var(--petroleo);opacity:.85;paint-order:stroke;stroke:rgba(255,255,255,.8);stroke-width:3px}
.mapa.is-in .anillo{transform:none}
.mapa.is-in .punto{transform:none}
@keyframes onda{from{transform:scale(1);opacity:.8}to{transform:scale(3.2);opacity:0}}

/* ═══ 10 · RESEÑAS ═══════════════════════════════════════════════════ */
.resenas{background:var(--aluminio);overflow-x:clip}
.aviso-ejemplo{font-family:var(--mono);font-size:12px;padding:8px 12px;border-radius:8px;background:#fff3d6;color:#7a5a12;max-width:22em}
.resenas__cinta{margin:0 calc(var(--gutter) * -1);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.resenas__pista{display:flex;gap:28px;width:max-content;padding:50px var(--gutter) 60px;animation:cinta 50s linear infinite}
.resenas__cinta:hover .resenas__pista,.resenas__cinta.is-quieta .resenas__pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-50%)}}
.resena{--sup:var(--blanco);margin:0;width:min(380px,78vw);padding:26px;border-radius:var(--r);box-shadow:0 20px 40px -30px rgba(19,24,27,.35);display:flex;flex-direction:column;gap:16px}
.resena__estrellas{color:#e0a526;letter-spacing:2px}
.resena p{font-size:16.5px}
.resena footer{margin-top:auto;display:flex;align-items:center;gap:12px}
.resena footer img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--blanco),0 0 0 4px var(--cian)}
.resena footer span{display:flex;flex-direction:column;font-size:13.5px;color:var(--gris)}
.resena footer b{color:var(--tinta);font-size:15px}
.insta{--sup:var(--fondo);display:flex;align-items:center;gap:22px;margin-top:40px;padding:24px 28px;border-radius:var(--r);color:#fff;text-decoration:none;transition:transform .4s var(--curva)}
.insta:hover{transform:translateY(-3px)}
.insta__num{font-weight:900;font-stretch:125%;font-size:clamp(40px,5vw,64px);line-height:1;color:var(--cian)}
.insta__txt{display:flex;flex-direction:column;font-size:18px}
.insta__txt small{color:var(--gris-2);font-size:14px}
.insta svg{width:26px;height:26px;margin-left:auto;flex:none}

/* ═══ 11 · PREGUNTAS ═════════════════════════════════════════════════ */
.preguntas{background:var(--blanco)}
.preguntas__grilla{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px)}

/* ═══ 12 · CONTACTO ══════════════════════════════════════════════════ */
.contacto{background:radial-gradient(80% 90% at 85% 20%,rgba(0,150,165,.35),transparent 60%),var(--fondo)}
.contacto__grilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.contacto__grilla>div>p:not(.volanta){color:var(--gris-2);margin-top:20px}
.ficha{--sup:rgba(22,28,31,.85);padding:28px;border-radius:calc(var(--r) + 4px);box-shadow:inset 0 0 0 1px var(--linea-2),0 0 60px -20px rgba(1,200,220,.25)}
.ficha__estado{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:16px}
.ficha__estado i{width:10px;height:10px;border-radius:50%;background:var(--gris-2)}
.ficha__estado.is-abierto i{background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulso 2s infinite}
.ficha__estado.is-cerrado i{background:#e5484d}
@keyframes pulso{70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.horario{width:100%;border-collapse:collapse;font-size:15px}
.horario th,.horario td{padding:10px 0;border-bottom:1px solid var(--linea-2);text-align:left;font-weight:400}
.horario td{text-align:right;font-family:var(--mono);font-size:14px}
.horario tr.es-hoy th,.horario tr.es-hoy td{color:var(--cian);font-weight:600}
.ficha__datos{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.ficha__datos li{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:baseline;font-size:15px}
.ficha__datos span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2)}
.ficha__datos a{font-size:13.5px;color:var(--cian);text-underline-offset:3px}

/* ── Pie, flotantes ─────────────────────────────────────────────────── */
.pie{padding:40px 0 100px;border-top:1px solid var(--linea-2)}
.pie__fila{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pie__hecho{font-size:13.5px;color:var(--gris-2)}
.flota-wsp{position:fixed;right:18px;bottom:18px;z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--wsp);color:#fff;box-shadow:0 12px 30px -8px rgba(31,170,85,.8);transform:scale(0);transition:transform .5s var(--curva)}
.flota-wsp svg{width:30px;height:30px}
.flota-wsp.is-on{transform:none}
.sello-demo{position:fixed;left:14px;bottom:14px;z-index:40;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:rgba(28,30,32,.8);color:var(--gris-2);box-shadow:inset 0 0 0 1px var(--linea-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}

/* ── Entradas y salidas ─────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(38px);transition:opacity .8s var(--curva),transform 1s var(--curva)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv.is-sale{opacity:0;transform:translateY(-38px)}
@media (max-width:760px){
  .js .rv{transform:translateY(72px) scale(.93)}
  .js .rv.is-in{transform:none}
  .js .rv.is-sale{transform:translateY(-80px) scale(.96)}
}

/* ── Responsive general ─────────────────────────────────────────────── */

@media (max-width:1000px){
  .coti{grid-template-columns:1fr}
  .coti__vista{position:static}
}
@media (max-width:860px){
  .cabeza{flex-direction:column;align-items:flex-start;gap:16px}
  .simple__lista{grid-template-columns:1fr}
  .colores__grilla,.zona__grilla,.preguntas__grilla,.contacto__grilla{grid-template-columns:minmax(0,1fr)}
  .colores__vista{order:-1}
}
@media (max-width:600px){
  body{font-size:16px}
  .coti__paso{padding:18px}
  .campo input{width:104px}
  .campo--cant{margin-left:0}
  .fila-2{grid-template-columns:1fr}
  .como-medir{grid-template-columns:1fr}
  .como-medir svg{max-width:220px}
  .ficha__datos li{grid-template-columns:80px 1fr}
  .ficha__datos li a{grid-column:2}
  .insta{flex-wrap:wrap;gap:12px}
  .insta svg{display:none}
  .sello-demo{display:none}
  .sello-demo.is-final{display:block}
  .pie{padding-bottom:110px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ═══ PROFUNDIDAD EN LAS SECCIONES CLARAS (2026-09-29) ════════════════
   1) Un «piso» de líneas en perspectiva al fondo de cada sección clara,
      como la mesa de un plano, que avanza despacio hacia el que mira
      (transform en bucle de exactamente una celda: no salta). Corre sólo
      en pantalla (.is-viva, main.js 9 ter). 2) Dos luces de color quietas.
   3) Cada sección pone lo suyo en 3D: tarjetas que entran de pie, el
      plano del cotizador y el mapa que se inclinan con el puntero, la
      cinta de reseñas que se aleja y las preguntas que se levantan. */
.claro{isolation:isolate}
.claro>*{position:relative;z-index:1}
.claro::before{content:"";position:absolute;z-index:0;left:-45%;right:-45%;bottom:-72px;height:230%;pointer-events:none;
  background:
    linear-gradient(color-mix(in srgb,var(--petroleo) 24%,transparent) 1.2px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,color-mix(in srgb,var(--petroleo) 24%,transparent) 1.2px,transparent 1px) 0 0/64px 64px;
  transform-origin:50% 100%;transform:perspective(900px) rotateX(62deg);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 40%,transparent 78%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 40%,transparent 78%);
  animation:piso 7s linear infinite;animation-play-state:paused}
.claro.is-viva::before{animation-play-state:running}
@keyframes piso{from{transform:perspective(900px) rotateX(62deg) translateY(0)}to{transform:perspective(900px) rotateX(62deg) translateY(64px)}}
.claro::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:
  radial-gradient(40% 36% at 8% 14%,rgba(1,200,220,.16),transparent 70%),
  radial-gradient(34% 40% at 96% 72%,rgba(240,163,90,.13),transparent 70%),
  radial-gradient(50% 30% at 50% 100%,rgba(0,150,165,.10),transparent 70%)}


/* Cotizador: pasos como placas con canto y el plano que flota */
.coti{perspective:1600px}
.coti__paso{background:linear-gradient(180deg,#f6f7f8,#e9ecee);box-shadow:
  inset 0 1px 0 #fff,0 1px 0 rgba(19,24,27,.06),0 22px 40px -28px rgba(19,24,27,.35),0 2px 6px -3px rgba(19,24,27,.15);
  transition:transform .6s var(--curva),box-shadow .6s var(--curva)}
.coti__paso:focus-within{transform:translateY(-4px) scale(1.01);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px color-mix(in srgb,var(--petroleo) 40%,transparent),0 34px 60px -30px rgba(0,150,165,.55)}
.coti__vista{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .9s var(--curva)}
.coti__vista.is-tilt{transition:transform .18s linear}
.coti__vista .plano{transform:translateZ(40px)}
.coti__vista .btn{transform:translateZ(26px)}

/* Zona: el mapa es una mesa inclinada que se endereza al entrar */
.mapa-mesa{perspective:1300px}
.mapa-mesa .mapa{transform-origin:50% 60%}
.js .mapa-mesa .mapa.rv{transform:rotateX(38deg) rotateZ(-8deg) scale(.9);opacity:0}
.js .mapa-mesa .mapa.rv.is-in{transform:rotateX(calc(12deg + var(--rx,0deg))) rotateY(var(--ry,0deg)) rotateZ(-2deg);opacity:1;transition:opacity .8s var(--curva),transform 1.4s var(--curva)}
.mapa-mesa.is-tilt .mapa.rv.is-in{transition:transform .2s linear}
.mapa-mesa::after{content:"";display:block;height:34px;margin:-8px 8% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,150,165,.35),transparent);transform:scaleY(.55)}

/* Reseñas: la cinta se aleja hacia la derecha, como un riel curvo */
.resenas .contenedor{perspective:1500px}
.resenas__cinta{transform:rotateY(-9deg) rotateX(3deg);transform-origin:20% 50%;transform-style:preserve-3d}
.resena{box-shadow:0 30px 50px -30px rgba(19,24,27,.45),0 0 0 1px rgba(19,24,27,.04)}


@media (max-width:860px){
  .resenas__cinta{transform:rotateY(-8deg) rotateX(3deg)}
  .claro::before{height:45%;animation-duration:9s}
}
@media (prefers-reduced-motion:reduce){.claro::before{animation:none}}

/* Teléfono: el temporal y la corrediza ENTEROS en una caja 16:9 (va al
   final para ganarle a .abre__video, que está más abajo que su bloque).
   ⚠ width explícito: un <video> absoluto con width:auto toma su ancho
   propio (960 px), no el de left/right. */
@media (max-width:760px) and (orientation:portrait){
  .frio__video,.abre__video{top:calc(var(--cab) + max(22px, (100svh - var(--cab) - 56.25vw - 330px) / 2));bottom:auto;left:12px;right:auto;width:calc(100% - 24px);height:auto;aspect-ratio:16/9;border-radius:14px;box-shadow:0 0 0 1px rgba(1,200,220,.22),0 24px 60px -18px rgba(1,200,220,.35)}
}

/* ═══ COTIZADOR, segunda forma (2026-09-29: «más prolijo, más práctico y
   con más impacto») ═══════════════════════════════════════════════════
   Tipos como fichas con dibujo, medidas grandes con −/+ en la cantidad,
   colores como muestras, vidrio como selector segmentado y una ficha
   «Tu pedido» arriba del plano. Todo con los mismos name/value: main.js
   §10 no cambia de lógica. */
.coti__form{gap:16px}
.coti__paso{padding:26px 26px 24px;border-radius:22px;background:#fff;
  box-shadow:0 1px 0 rgba(19,24,27,.04),0 24px 50px -34px rgba(0,150,165,.45),inset 0 0 0 1px rgba(19,24,27,.06)}
.coti__paso:focus-within{transform:none;box-shadow:inset 0 0 0 1.5px rgba(0,150,165,.35),0 30px 60px -30px rgba(0,150,165,.5)}
.coti__paso legend{font-size:20px;margin-bottom:18px}
.coti__paso legend span{width:34px;height:34px;font-size:14px;background:linear-gradient(135deg,var(--petroleo),#01b4c7);box-shadow:0 6px 16px -6px var(--petroleo),0 0 0 4px rgba(1,200,220,.14)}
.coti__paso.is-listo legend span{font-size:0;background:linear-gradient(135deg,#1faa55,#35c877)}
.coti__paso.is-listo legend span::after{content:"✓";font-size:16px;font-family:var(--f);font-weight:800}
.coti__sub{clear:both;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:18px 0 10px}
.coti__sub:first-of-type{margin-top:0}

.opciones--tipo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.opciones--tipo label{display:block}
.opciones--tipo span{position:relative;flex-direction:column;justify-content:center;gap:8px;width:100%;min-height:98px;padding:12px 8px;border-radius:16px;
  text-align:center;font-size:13.5px;font-weight:600;line-height:1.2;background:#f3f5f6;box-shadow:inset 0 0 0 1px rgba(19,24,27,.06);
  transition:background .3s,box-shadow .3s,color .3s,transform .35s var(--curva)}
.opciones--tipo svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;color:var(--petroleo);transition:color .3s}
.opciones--tipo label:hover span{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(0,150,165,.35)}
.opciones--tipo input:checked+span{background:linear-gradient(160deg,#00b3c6,var(--petroleo));color:#fff;transform:translateY(-3px);
  box-shadow:0 14px 28px -12px rgba(0,150,165,.8),0 0 0 3px rgba(1,200,220,.25)}
.opciones--tipo input:checked+span svg{color:var(--cian);filter:drop-shadow(0 0 6px rgba(1,200,220,.7))}
.opciones--tipo input:checked+span::after{content:"";position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--cian);box-shadow:0 0 8px var(--cian)}

.medidas{gap:14px}
.campo input{height:60px;width:132px;border-radius:14px;font-size:22px;background:#f3f5f6;box-shadow:inset 0 0 0 1px rgba(19,24,27,.08)}
.campo em{bottom:19px}
.medidas__x{padding-bottom:14px}
.paso-num{display:flex;align-items:center;height:60px;border-radius:14px;background:#f3f5f6;box-shadow:inset 0 0 0 1px rgba(19,24,27,.08);overflow:hidden}
.paso-num button{width:46px;height:100%;border:0;background:none;font-size:22px;font-weight:600;color:var(--petroleo);cursor:pointer;transition:background .25s}
.paso-num button:hover{background:rgba(0,150,165,.08)}
.campo--cant .paso-num input{width:48px;height:100%;padding:0;text-align:center;background:none;box-shadow:none;border-radius:0;-moz-appearance:textfield}
.paso-num input::-webkit-inner-spin-button,.paso-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.opciones--color{gap:10px}
.opciones--color span{min-height:52px;padding:0 18px 0 8px;gap:10px;background:#f3f5f6;box-shadow:inset 0 0 0 1px rgba(19,24,27,.06)}
.opciones--color i{width:36px!important;height:36px!important}
.opciones--color input:checked+span{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--petroleo),0 10px 24px -14px var(--petroleo)}
.opciones--seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:#f3f5f6;box-shadow:inset 0 0 0 1px rgba(19,24,27,.06)}
.opciones--seg span{min-height:42px;background:none;box-shadow:none}
.opciones--check span{background:#f3f5f6;box-shadow:inset 0 0 0 1px rgba(19,24,27,.06)}
.opciones--check input:checked+span{background:rgba(0,150,165,.1);color:var(--petroleo);box-shadow:inset 0 0 0 1.5px var(--petroleo)}
.campo--txt input{background:#f3f5f6;height:54px}

.coti__vista{padding:26px;border-radius:26px}
.coti__ficha{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.coti__etq{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cian)}
.coti__ficha b{font-weight:800;font-stretch:112%;font-size:clamp(22px,2vw,28px);line-height:1.1;color:#fff}
.coti__ficha span:last-child{font-family:var(--mono);font-size:13px;color:var(--gris-2)}
.coti__vista .btn--wsp{min-height:58px;font-size:17px}

@media (max-width:600px){
  .opciones--tipo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opciones--tipo span{min-height:62px;flex-direction:row;justify-content:flex-start;text-align:left;padding:12px 14px;gap:12px}
  .campo input{width:112px}
  .coti__paso{padding:20px 16px}
}

/* El botón de WhatsApp «vibra» cada 5 s, como un teléfono que suena.
   Con `rotate`/`translate` sueltos: el `transform` es de su entrada. */
.flota-wsp.is-on{animation:vibra 5s ease-in-out 2s infinite}
@keyframes vibra{
  0%,82%,100%{rotate:0deg;translate:0 0}
  84%{rotate:-12deg;translate:-1px 0}
  86%{rotate:11deg;translate:1px 0}
  88%{rotate:-10deg}
  90%{rotate:9deg}
  92%{rotate:-6deg}
  94%{rotate:4deg}
  96%{rotate:0deg}
}
.flota-wsp.is-on::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(31,170,85,.6);animation:onda-wsp 5s ease-out 2s infinite;pointer-events:none}
@keyframes onda-wsp{0%,82%{opacity:0;transform:scale(1)}84%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.flota-wsp::after{box-shadow:0 0 0 3px rgba(31,170,85,.55)}
@media (prefers-reduced-motion:reduce){.flota-wsp.is-on,.flota-wsp.is-on::after{animation:none}}

/* Teléfono, segunda vuelta (2026-10-04, Jope: «queda muchísimo espacio
   vacío»): el temporal y la corrediza en una caja CUADRADA en cover (era
   16:9 entera, 207 px de alto en un 390), y el portada en 4:3. */
@media (max-width:760px) and (orientation:portrait){
  .frio__video,.abre__video{aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;background-size:cover;
    top:calc(var(--cab) + max(16px,(100svh - var(--cab) - (100vw - 24px) - 300px) / 2))}
  .armado__cuadro{aspect-ratio:4/3}
  .frio__escena::before,.abre__escena::before{height:78svh}
  /* el texto justo abajo de la caja, no pegado al piso */
  .frio__txt{align-items:start;padding-bottom:0;padding-top:calc(var(--cab) + max(16px,(100svh - var(--cab) - (100vw - 24px) - 300px) / 2) + (100vw - 24px) + 26px)}
  .abre__txt{bottom:auto;top:calc(var(--cab) + max(16px,(100svh - var(--cab) - (100vw - 24px) - 300px) / 2) + (100vw - 24px) + 26px);padding-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════════════
   EL ANGEL — lo propio (2026-10-14)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El logo (SVG del .ai, currentColor) ── */
.cab__marca .cab__logo{width:auto;height:40px;aspect-ratio:6.34/1;filter:none;color:#fff}
.pie .cab__logo{height:44px;color:#fff}
.carga__logo{width:min(260px,62vw);height:auto;aspect-ratio:1.33/1;color:#fff;animation:latido 1.8s ease-in-out infinite}
.carga__rubro{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2);margin-top:10px}
@media (max-width:420px){ .cab__marca .cab__logo{height:30px} }

/* ── Secciones que cambiaron de fondo respecto de Don Tito ── */
.oscuro .obras-filtros button{color:var(--gris-2)}
.oscuro .obras-filtros button[aria-pressed="true"]{color:#fff}
.oscuro .obras__pie,.oscuro .cabeza__txt{color:var(--gris-2)}
.claro .colores__txt>p{color:var(--gris)}
.claro .colores__txt>p.nota{color:var(--gris)}
.muestras{grid-template-columns:repeat(2,minmax(0,1fr))}
.muestra{grid-template-rows:auto;padding:11px 14px;color:inherit}
.muestra i{grid-row:auto;width:30px;height:30px}
.claro .muestra{background:#fff;box-shadow:inset 0 0 0 1px var(--linea)}
.claro .muestra.is-on{background:#fff;box-shadow:inset 0 0 0 2px var(--petroleo),0 10px 30px -14px rgba(0,150,165,.6)}
.muestra b{font-size:15px}

/* ── Colores: la ventana dibujada con la muestra REHAU de textura ── */
.ventana-color{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#e9e4dc,#d9d2c6);box-shadow:0 30px 70px -40px rgba(28,31,34,.6)}
.vc__pared{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.55),transparent 60%),repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 2px,transparent 2px 6px)}
.vc__marco{position:relative;width:74%;height:72%;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4.2%;
  background:var(--folio) center/180px auto repeat;border-radius:4px;
  box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 -3px 0 rgba(0,0,0,.18) inset,0 24px 40px -18px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.65)}
.vc__marco::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:14px;border-radius:0 0 4px 4px;background:var(--folio) center/180px auto repeat;filter:brightness(.92);box-shadow:0 8px 14px -6px rgba(0,0,0,.4)}
.vc__hoja{position:relative;padding:9%;background:var(--folio) center/180px auto repeat;box-shadow:0 0 0 1px rgba(0,0,0,.12),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.18)}
.vc__vidrio{position:absolute;inset:9%;display:block;background:linear-gradient(160deg,#cfe9f5 0%,#9fcfe6 38%,#b9dcec 60%,#e8f5fb 100%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
.vc__vidrio::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 32%,transparent 44%)}
.vc__manija{position:absolute;right:3%;top:44%;width:3.5%;height:14%;min-width:6px;border-radius:3px;background:#2b2e31;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.ventana-color.es-clara .vc__manija{background:#e9ecee;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.3)}
.ventana-color.is-cambia .vc__marco{animation:vcCambia .7s var(--curva)}
@keyframes vcCambia{from{opacity:.4;transform:scale(.985)}to{opacity:1;transform:none}}
.ventana-color figcaption{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(28,30,32,.78);color:#fff}

/* ── Por qué PVC: barras y ventajas ── */
.barras{display:grid;gap:18px;margin-top:10px}
.barra{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) 4.2em;align-items:center;gap:18px}
.barra__txt{font-size:15.5px;color:var(--gris)}
.barra__txt b{color:var(--tinta)}
.barra__riel{height:18px;border-radius:999px;background:rgba(28,31,34,.07);overflow:hidden}
.barra__riel i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#9aa3a8,#c4cacd);transform-origin:left;transform:scaleX(var(--v))}
.js .barra__riel i{transform:scaleX(0);transition:transform 1.6s var(--curva)}
.js .barras.is-in .barra__riel i{transform:scaleX(var(--v))}
.barra__num{font-family:var(--mono);font-size:20px;font-weight:500;text-align:right;color:var(--gris)}
.barra--rehau .barra__riel i{background:linear-gradient(90deg,var(--petroleo),var(--cian));box-shadow:0 0 18px rgba(1,200,220,.55)}
.barra--rehau .barra__num{color:var(--petroleo);font-weight:700;font-size:26px}
.barra--rehau .barra__txt{color:var(--tinta)}
@media (max-width:700px){
  .barra{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .barra__txt{grid-column:1/-1}
}

/* ── Obras reales: tira que se desliza ── */
.obras-reales{overflow:hidden}
.tira{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gutter) 22px;scroll-padding-inline:var(--gutter);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tira:focus-visible{outline:2px solid var(--petroleo);outline-offset:-2px}
.tira__foto{position:relative;flex:0 0 auto;margin:0;height:clamp(260px,34vw,430px);aspect-ratio:4/3;border-radius:16px;overflow:hidden;scroll-snap-align:start;background:#dfe3e6}
.tira__foto--ancha{aspect-ratio:16/9}
.tira__foto--alta{aspect-ratio:3/4}
.tira__foto img{width:100%;height:100%;object-fit:cover}
.tira__foto figcaption{position:absolute;left:12px;bottom:12px;right:12px;font-size:13.5px;font-weight:600;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tira__foto::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.45));pointer-events:none}
.tira__foto figcaption{z-index:1}
@media (max-width:600px){ .tira__foto{height:62vw} }
.obras-reales .insta{--sup:var(--fondo)}

/* ── Contacto: formulario, foto del local ── */
.consulta{margin-top:34px;padding:22px;border-radius:var(--r);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--linea-2);display:grid;gap:12px}
.consulta__tit{font-weight:700;font-size:17px}
.consulta .campo>span{color:var(--gris-2)}
.consulta .campo--txt input,.consulta textarea{width:100%;background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px var(--linea-2);border:0;border-radius:12px;font-family:var(--f);font-size:16px}
.consulta .campo--txt input{height:50px;padding:0 14px}
.consulta textarea{padding:12px 14px;resize:vertical;min-height:96px}
.consulta input:focus,.consulta textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cian)}
.consulta__estado{font-size:14px;color:var(--gris-2);min-height:1.2em}
.ficha__foto{margin:-28px -28px 22px;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--r) + 4px) calc(var(--r) + 4px) 0 0}
.ficha__foto img{width:100%;height:100%;object-fit:cover}
.ficha__datos li{grid-template-columns:90px 1fr auto auto}
.ficha__datos a{font-size:13.5px;color:var(--cian)}

/* ── Pie: marcas y datos ── */
.marcas{list-style:none;margin:0 0 34px;padding:0 0 28px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;border-bottom:1px solid var(--linea-2)}
.marcas li{font-weight:800;font-stretch:120%;letter-spacing:.14em;font-size:15px;color:rgba(255,255,255,.5)}
.pie__datos{font-size:14px;color:var(--gris-2)}
.pie__datos a{color:inherit}

/* ── Mapa: las sierras ── */
.mapa .sierras path{fill:#a99e86;opacity:.55}

.coti .campo--txt input{width:100%}

/* ── Bandas de foto a todo el ancho (imágenes de Flow) ── */
.banda{position:relative;height:min(92vh,860px);overflow:hidden;background:var(--fondo);color:#fff;display:flex;align-items:flex-end}
.banda__foto{position:absolute;inset:0;margin:0;will-change:transform;transform:scale(1.12)}
.banda__foto img{width:100%;height:100%;object-fit:cover}
.banda::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,20,22,.72) 0%,rgba(18,20,22,.35) 38%,transparent 62%),linear-gradient(0deg,rgba(18,20,22,.6) 0%,transparent 45%)}
.banda__txt{position:relative;z-index:2;padding-bottom:clamp(48px,9vh,96px)}
.banda__txt .h1{max-width:13em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
@media (max-width:760px){
  .banda{height:82svh}
  .banda::after{background:linear-gradient(0deg,rgba(18,20,22,.82) 0%,rgba(18,20,22,.35) 45%,transparent 70%)}
}

/* ── Obras: la galería curva (main.js §17) ── */
.curva{padding:0;background:#141618;color:#fff}
.curva__item{margin:0}
/* sin JS o con movimiento reducido: una tira que se desliza */
.curva:not(.curva-js) .curva__cab{padding-top:clamp(80px,11vw,150px)}
.curva:not(.curva-js) .curva__aro{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px var(--gutter) 20px}
.curva:not(.curva-js) .curva__item{flex:0 0 auto;width:min(78vw,520px);scroll-snap-align:start}
.curva:not(.curva-js) .curva__item img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%}
.curva:not(.curva-js) .curva__item figcaption{display:flex;gap:8px;margin-top:10px;font-size:14px}
.curva:not(.curva-js) .curva__item figcaption span{color:var(--gris-2)}
.curva:not(.curva-js) .curva__fondo,.curva:not(.curva-js) .curva__nombre,.curva:not(.curva-js) .curva__cuenta{display:none}
.curva:not(.curva-js) .curva__pie{padding-bottom:clamp(60px,9vw,120px)}
/* con JS: el cilindro */
.curva-js .curva__escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.curva-js .curva__item{display:none}
.curva__fondo{position:absolute;inset:0;z-index:0}
.curva__fondo i{position:absolute;inset:-12%;background:center/cover no-repeat;filter:blur(40px) saturate(1.35) brightness(.5);opacity:0;transition:opacity 1s ease}
.curva__fondo i.is-on{opacity:1}
.curva__fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 50%,transparent 30%,rgba(10,12,14,.75) 100%),linear-gradient(180deg,rgba(10,12,14,.55),transparent 30%,transparent 70%,rgba(10,12,14,.6))}
.curva-js .curva__cab{position:relative;z-index:2;padding-top:calc(var(--cab) + 3vh)}
.curva-js .curva__cab .h2{font-size:clamp(28px,3.4vw,48px)}
.curva__vista{position:relative;z-index:1;flex:1;perspective-origin:50% 50%;overflow:hidden}
.curva-js .curva__aro{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.curva__franja{position:absolute;left:0;top:0;width:var(--sw);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--sw) / -2);
  background-color:#2a2d30;background-repeat:no-repeat;background-size:calc(var(--N) * 100%) 100%;backface-visibility:hidden;cursor:pointer;will-change:transform}
.curva__franja.es-ini{border-radius:14px 0 0 14px}
.curva__franja.es-fin{border-radius:0 14px 14px 0}
.curva__pie{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 28px;padding-bottom:clamp(20px,5vh,48px)}
.curva__nombre{display:flex;flex-direction:column}
.curva__nombre b{font-weight:800;font-stretch:112%;font-size:clamp(20px,2vw,28px)}
.curva__nombre span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cian);margin-top:4px}
.curva__nombre.is-cambia{animation:curvaNombre .6s var(--curva)}
@keyframes curvaNombre{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.curva__cuenta{font-family:var(--mono);font-size:13px;color:var(--gris-2);margin-left:auto}
.curva__cuenta span{color:#fff;font-size:20px}
.curva__insta{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:#fff;opacity:.85;text-decoration:none}
.curva__insta svg{width:16px;height:16px}
.curva__insta:hover{opacity:1}
@media (max-width:700px){ .curva__insta{width:100%} .curva__cuenta{margin-left:0} }

/* la foto en grande */
.lupa{position:fixed;inset:0;z-index:90;display:grid;place-items:center;gap:12px;padding:5vh 4vw;background:rgba(10,12,14,.92);opacity:0;transition:opacity .35s}
.lupa.is-on{opacity:1}
/* ⚠ (15/10 noche, Jope: «aprieto botones y no me deja») el display:grid de
   arriba le ganaba al atributo hidden: las dos lupas (rollo y obras)
   quedaban invisibles ENCIMA de toda la página y se comían los clics. */
.lupa[hidden]{display:none}
.lupa:not(.is-on){pointer-events:none}
.lupa img{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lupa p{color:#fff;font-size:15px}
.lupa__cerrar{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.lupa__cerrar svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none}

/* ═══════════════════════════════════════════════════════════════════════
   15/10, SEGUNDA VUELTA (Jope: «Por qué PVC simple», DVH «texto estático»,
   presupuesto «casi sin scroll», Quiénes somos como la referencia,
   preguntas con entrada y salida)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Por qué PVC: las barras como medidores ── */
.barras{gap:12px}
.barra{grid-template-columns:40px minmax(0,15em) minmax(0,1fr) 4.4em;gap:16px;padding:14px 20px 14px 16px;border-radius:18px;background:#fff;
  box-shadow:0 1px 0 rgba(28,31,34,.04),0 20px 44px -32px rgba(28,31,34,.45),inset 0 0 0 1px rgba(28,31,34,.05)}
.barra__ico svg{display:block;width:30px;height:30px;fill:none;stroke:#8a9399;stroke-width:1.6;stroke-linejoin:round}
.barra__riel{height:24px;position:relative;overflow:visible;background:none}
.barra__riel::before{content:"";position:absolute;inset:0;border-radius:999px;background:rgba(28,31,34,.06)}
.barra__riel i{position:relative}
.barra--alu .barra__riel i{background:linear-gradient(90deg,#f6b26b,#e5484d);box-shadow:0 0 22px -4px rgba(229,72,77,.55)}
.barra--alu2 .barra__riel i{background:linear-gradient(90deg,#f7cf8a,#ec8b4c);box-shadow:0 0 18px -4px rgba(236,139,76,.5)}
.barra--rehau{box-shadow:inset 0 0 0 1.5px rgba(0,150,165,.35),0 26px 50px -30px rgba(0,150,165,.55)}
.barra--rehau .barra__ico svg{stroke:var(--petroleo)}
.barra__chip{position:absolute;z-index:1;left:calc(var(--v) * 100% + 14px);top:50%;transform:translate3d(0,-50%,0);font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:var(--petroleo);color:#fff;white-space:nowrap;box-shadow:0 10px 22px -10px var(--petroleo)}
.js .barra__chip{opacity:0;transform:translate3d(-12px,-50%,0)}
.js .barras.is-in .barra__chip{opacity:1;transform:translate3d(0,-50%,0);transition:opacity .6s 1.5s,transform .8s var(--curva) 1.5s}
@media (max-width:700px){
  .barra{grid-template-columns:30px minmax(0,1fr) auto;padding:12px 14px}
  .barra__ico svg{width:24px;height:24px}
  .barra__txt{grid-column:2/-1}
  .barra__riel{grid-column:1/3}
  .barra__chip{font-size:10.5px;padding:5px 8px}
}

/* ── Por qué PVC: las cuatro razones con su foto de cerca (main.js §15 bis) ── */
.razones{margin-top:clamp(70px,9vw,120px)}
.razones__lista{list-style:none;margin:0;padding:0;display:grid;gap:64px}
.razon__foto{position:relative;margin:0 0 24px;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#cfd5d8;box-shadow:0 40px 80px -40px rgba(28,31,34,.55)}
.razon__foto img{width:100%;height:100%;object-fit:cover;max-width:none}
.razon__n{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--petroleo)}
.razon__dato{display:block;font-weight:800;font-stretch:118%;font-size:clamp(52px,6.6vw,104px);line-height:.92;letter-spacing:-.025em;color:var(--petroleo);margin:10px 0 16px}
.razon h3{font-weight:800;font-stretch:110%;font-size:clamp(23px,2.3vw,32px);line-height:1.1;margin-bottom:12px}
.razon p{color:var(--gris);max-width:28em;font-size:17px}
/* las marcas sobre la foto: un punto con anillo que late y la etiqueta */
.marca-pt{position:absolute;z-index:2;left:var(--x);top:var(--y);display:flex;align-items:center;gap:10px;pointer-events:none;
  opacity:0;transform:translate3d(0,8px,0) scale(.9);transform-origin:0 50%;transition:opacity .5s,transform .7s var(--curva)}
.marca-pt--izq{left:auto;right:calc(100% - var(--x));flex-direction:row-reverse;transform-origin:100% 50%}
.marca-pt i{position:relative;flex:none;width:16px;height:16px;margin:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.45)}
.marca-pt i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:marcaLate 2.2s ease-out infinite}
@keyframes marcaLate{from{transform:scale(.5);opacity:1}to{transform:scale(1.7);opacity:0}}
.marca-pt b{font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;background:rgba(18,20,22,.78);color:#fff;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 24px -10px rgba(0,0,0,.6)}
.razon.is-on .marca-pt,.razon__foto.is-on .marca-pt{opacity:1;transform:none;transition-delay:.7s}
.razon.is-on .marca-pt+.marca-pt,.razon__foto.is-on .marca-pt+.marca-pt{transition-delay:1s}
.razon__foto img{transition:transform 1.6s var(--curva)}
.razon:not(.is-on) .razon__foto img{transform:scale(1.08)}
@media (min-width:901px){
  .razones--fija{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,100px);align-items:start}
  .razones--fija .razones__fija{position:sticky;top:calc(var(--cab) + 4vh);width:100%;max-width:calc(80vh * .8);aspect-ratio:4/5;border-radius:24px;overflow:hidden;
    background:#cfd5d8;box-shadow:0 50px 90px -40px rgba(28,31,34,.6)}
  .razones--fija .razon__foto{position:absolute;inset:0;margin:0;border-radius:0;box-shadow:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
  .razones--fija .razon__foto.is-on,.razones--fija .razon__foto.is-antes{clip-path:inset(0 0 0 0)}
  .razones--fija .razon__foto img{transform:scale(1.16)}
  .razones--fija .razon__foto.is-on img{transform:none}
  .razones--fija .razones__lista{gap:0}
  .razones--fija .razon{min-height:74vh;display:flex;flex-direction:column;justify-content:center;opacity:.2;transition:opacity .6s}
  .razones--fija .razon.is-on{opacity:1}
  .razones--fija .razon__dato{transform:translate3d(0,24px,0);transition:transform .9s var(--curva)}
  .razones--fija .razon.is-on .razon__dato{transform:none}
}
@media (max-width:900px){
  .razones__lista{gap:56px}
  .razon__foto{aspect-ratio:4/5;max-height:72svh;margin-left:auto;margin-right:auto}
  .marca-pt b{font-size:12px;padding:6px 10px}
}

/* ── Qué hacemos: la placa de portones (sin foto, Pablo 15/10) ── */
.porton-placa{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-top:var(--gap,16px);padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,40px);border-radius:18px;
  background:linear-gradient(120deg,#2a2e32,#202326);box-shadow:inset 0 0 0 1px var(--linea-2),0 30px 60px -40px rgba(0,0,0,.8)}
.porton{flex:none;width:clamp(90px,10vw,130px);height:auto;overflow:visible}
.porton__vano,.porton__piso{fill:none;stroke:#8a9399;stroke-width:2;stroke-linecap:round}
.porton__hojas rect{fill:rgba(1,200,220,.08);stroke:var(--cian);stroke-width:1.4}
.porton__hojas{animation:portonSube 6s cubic-bezier(.6,0,.3,1) infinite;animation-play-state:paused}
.porton-placa.is-in .porton__hojas{animation-play-state:running}
@keyframes portonSube{0%,12%{transform:translateY(0)}45%,62%{transform:translateY(-60px)}95%,100%{transform:translateY(0)}}
.porton-placa__txt{display:flex;flex-direction:column;gap:4px;flex:1}
.porton-placa__n{font-family:var(--mono);font-size:12px;color:var(--cian);letter-spacing:.14em}
.porton-placa__txt b{font-weight:800;font-stretch:108%;font-size:clamp(19px,1.8vw,24px);color:#fff}
.porton-placa__txt span:last-child{color:var(--gris-2);font-size:15px}
.porton-placa .btn{flex:none}
@media (max-width:700px){
  .porton-placa{flex-wrap:wrap}
  .porton{width:84px}
  .porton-placa__txt{flex:1 1 60%}
  .porton-placa .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.porton__hojas{animation:none}}

/* ── Colores: la foto real de la ventana, cuando exista (main.js §8) ── */
.vc__fotos{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .5s;pointer-events:none}
.ventana-color.con-foto .vc__fotos{opacity:1}
.vc__fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:0;transition:opacity .7s var(--curva)}
.vc__fotos img.is-on{opacity:1}
.ventana-color figcaption{z-index:3}

/* ── DVH: la foto y las cuatro placas que se mueven ── */
.dvh .cabeza{margin-bottom:clamp(30px,4vw,48px)}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bento__foto{grid-column:1/3;grid-row:1/3;position:relative;margin:0;min-height:460px;border-radius:24px;overflow:hidden;background:#101418;
  box-shadow:0 0 0 1px var(--linea-2),0 50px 90px -50px rgba(0,0,0,.9)}
.bento__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.bento__foto figcaption{position:absolute;left:18px;bottom:18px;display:flex;flex-direction:column;padding:12px 16px;border-radius:14px;
  background:rgba(18,20,22,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bento__foto figcaption b{font-size:17px;color:#fff}
.bento__foto figcaption span{font-size:14px;color:#c9d1d5}
.placa{position:relative;display:flex;flex-direction:column;padding:20px;border-radius:22px;background:linear-gradient(160deg,#2a2e32,#1f2225);
  box-shadow:inset 0 0 0 1px var(--linea-2),0 30px 60px -40px rgba(0,0,0,.8);overflow:hidden}
.placa__viz{position:relative;height:118px;display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;border-radius:14px;
  background:radial-gradient(80% 90% at 50% 100%,rgba(1,200,220,.1),transparent 70%),rgba(0,0,0,.2);overflow:hidden}
.placa h3{font-weight:750;font-size:18px;line-height:1.2;color:#fff;margin-bottom:6px}
.placa p{font-size:14.5px;line-height:1.5;color:var(--gris-2)}
/* gas: la llama grande (naranja) se achica y queda una chica (celeste) */
.placa--gas svg{width:62px;height:62px;overflow:visible}
.llama{transform-box:fill-box;transform-origin:50% 100%}
.llama--1{fill:#f39a4f;filter:drop-shadow(0 0 10px rgba(243,154,79,.6))}
.llama--2{fill:var(--cian);opacity:0;transform:scale(.4)}
.placa--gas.is-in .llama--1{opacity:0;transform:scale(.45);transition:opacity 1.6s .6s,transform 1.8s var(--curva) .5s}
.placa--gas.is-in .llama--2{opacity:1;transform:scale(1);transition:opacity 1.2s 1.2s,transform 1.6s var(--curva) 1s}
.placa__num{display:flex;flex-direction:column}
.placa__num b{font-family:var(--mono);font-size:34px;font-weight:500;line-height:1;color:#fff}
.placa__num small{font-family:var(--mono);font-size:11px;color:var(--gris-2);margin-top:4px}
/* ruido: barras que suenan; las de adentro se aplanan al pasar el vidrio */
.onda{display:flex;align-items:center;gap:10px;height:74px}
.onda__lado{display:flex;align-items:center;gap:3px;height:100%;transform-origin:50% 50%}
.onda__lado i{width:4px;height:100%;border-radius:2px;background:#f39a4f;transform:scaleY(.4);animation:eq 1s ease-in-out infinite alternate}
.onda__lado i:nth-child(2n){animation-duration:.8s;animation-delay:-.3s}
.onda__lado i:nth-child(3n){animation-duration:1.25s;animation-delay:-.6s}
.onda__lado i:nth-child(5n){animation-duration:.7s;animation-delay:-.15s}
.onda__lado--casa i{background:var(--cian)}
.onda__lado--casa{transition:transform 1.6s var(--curva) .5s}
.placa--ruido.is-in .onda__lado--casa{transform:scaleY(.2)}
@keyframes eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.onda__vidrio{position:relative;width:12px;height:90px}
.onda__vidrio::before,.onda__vidrio::after{content:"";position:absolute;top:0;bottom:0;width:3px;border-radius:2px;background:rgba(191,233,248,.7);box-shadow:0 0 10px rgba(127,227,238,.5)}
.onda__vidrio::before{left:0}.onda__vidrio::after{right:0}
.onda__etq{position:absolute;left:12px;right:12px;bottom:7px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-2)}
/* empañado y cámaras: FOTOS de Higgsfield (16/10; antes, dibujos). La foto
   va de borde a borde arriba de la placa. Empañado: la empañada se disuelve
   sobre la seca al entrar (opacity); cámaras: el corte se acerca (transform). */
.placa__viz--foto{height:150px;margin:-20px -20px 16px;border-radius:22px 22px 0 0;background:#14171a}
.placa__viz--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.placa__viz--foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(31,34,37,.55));pointer-events:none}
.placa--vaho .placa__viz--foto img{object-position:60% 50%}
.vaho__empanado{transition:opacity 2.8s var(--curva) .6s}
.placa--vaho.is-in .vaho__empanado{opacity:0}
.placa--camaras .placa__viz--foto img{object-position:62% 45%;transform:scale(1.12);transition:transform 3.2s var(--curva) .3s}
.placa--camaras.is-in .placa__viz--foto img{transform:none}
@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__foto{grid-column:1/-1;grid-row:auto;min-height:0;aspect-ratio:16/10}
}
@media (max-width:620px){
  .bento{grid-template-columns:minmax(0,1fr);gap:12px}
  .bento__foto{aspect-ratio:4/3}
  .placa{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:14px;align-items:center;padding:14px}
  .placa__viz{grid-row:1/3;height:112px;margin:0;gap:8px}
  .placa h3{font-size:16.5px;align-self:end}
  .placa p{font-size:13.5px;align-self:start}
  .placa--gas svg{width:44px;height:44px}
  .placa__num b{font-size:24px}
  .onda{gap:5px;height:56px}
  .onda__lado{gap:2px}
  .onda__lado i{width:3px}
  .placa__viz--foto{margin:0;border-radius:14px;height:112px}
}

/* ── Presupuesto: casi sin scroll en la compu, sobre el showroom ── */
.cotizar{background:linear-gradient(180deg,rgba(251,252,252,.9),rgba(242,244,245,.93)),url(assets/img/fondo-coti.webp) center/cover no-repeat,var(--blanco)}
@media (min-width:1101px){
  .cotizar{padding:clamp(64px,6.5vw,92px) 0}
  .cotizar .cabeza{margin-bottom:26px}
  .coti{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px}
  .coti__form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
  .coti__paso{padding:18px 18px 16px;border-radius:18px}
  .coti__paso legend{font-size:16.5px;margin-bottom:12px;gap:10px}
  .coti__paso legend span{width:28px;height:28px;font-size:12.5px}
  .coti__ayuda{font-size:13px}
  .opciones--tipo{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .opciones--tipo span{min-height:70px;padding:8px 4px;font-size:12px;gap:5px;border-radius:12px}
  .opciones--tipo svg{width:24px;height:24px}
  .medidas{gap:8px;flex-wrap:nowrap}
  .campo>span{font-size:12px}
  .campo input{height:48px;width:98px;font-size:17px;padding:0 30px 0 11px;border-radius:12px}
  .campo em{bottom:15px;right:9px;font-size:11.5px}
  .medidas__x{padding-bottom:12px;font-size:18px}
  .paso-num{height:48px;border-radius:12px}
  .paso-num button{width:32px;font-size:19px}
  .campo--cant .paso-num input{width:34px}
  .campo--cant{margin-left:auto}
  .coti__sub{margin:12px 0 7px;font-size:10.5px}
  .opciones--color{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .opciones--color label{display:block}
  .opciones--color span{width:100%;min-height:40px;padding:0 6px;gap:6px;font-size:11.5px;line-height:1.1;border-radius:10px}
  .opciones--color i{width:22px!important;height:22px!important;flex:none}
  .opciones--seg span{min-height:34px;font-size:13.5px;padding:0 12px}
  .opciones--check span{min-height:36px;font-size:13.5px}
  .coti .campo--txt input{height:46px;font-size:15px}
  .coti .fila-2{grid-template-columns:1fr;gap:10px}
  .como-medir{grid-template-columns:96px 1fr;gap:10px;padding:10px;margin-top:10px}
  .como-medir ol{font-size:12.5px;gap:4px}
  .coti__vista{padding:20px;border-radius:22px;top:calc(var(--cab) + 14px)}
  .coti__ficha{margin-bottom:10px}
  .coti__ficha b{font-size:20px}
  .plano{padding:6px}
  .plano__svg{max-height:200px;width:auto;margin:0 auto}
  .resumen{margin:12px 0;gap:4px 12px;font-size:13.5px}
  .coti__vista .btn--wsp{min-height:50px;font-size:15.5px}
  .coti__vista .nota{font-size:12px;margin-top:8px}
}

/* ── Quiénes somos: el rollo de película (main.js §11) ── */
.rollo{padding:0;background:#121416;color:#fff}
.rollo__item{margin:0}
/* sin JS o con movimiento reducido: una tira que se desliza */
.rollo:not(.rollo-js) .rollo__cab{padding-top:clamp(80px,11vw,150px)}
.rollo:not(.rollo-js) .rollo__cinta{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px var(--gutter) clamp(60px,9vw,120px)}
.rollo:not(.rollo-js) .rollo__item{flex:0 0 auto;width:min(80vw,560px);scroll-snap-align:start}
.rollo:not(.rollo-js) .rollo__item img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px}
.rollo:not(.rollo-js) .rollo__item figcaption{display:flex;flex-direction:column;margin-top:10px;font-size:14.5px}
.rollo:not(.rollo-js) .rollo__item figcaption span{color:var(--gris-2)}
.rollo:not(.rollo-js) .rollo__fondo,.rollo:not(.rollo-js) .rollo__pie{display:none}
/* con JS */
.rollo-js .rollo__escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.rollo-js .rollo__item{display:none}
.rollo__fondo{position:absolute;inset:0;z-index:0}
.rollo__fondo i{position:absolute;inset:-12%;background:center/cover no-repeat;filter:blur(44px) saturate(1.3) brightness(.42);opacity:0;transition:opacity 1.1s ease}
.rollo__fondo i.is-on{opacity:1}
.rollo__fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 55%,transparent 30%,rgba(10,12,14,.78) 100%),linear-gradient(180deg,rgba(10,12,14,.6),transparent 32%,transparent 72%,rgba(10,12,14,.65))}
.rollo__cab{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;padding-top:calc(var(--cab) + 3.5vh)}
.rollo-js .rollo__cab .h2{font-size:clamp(28px,3.4vw,48px)}
.rollo__bajada{max-width:25em;color:#c9d1d5;font-size:16px}
.rollo__vista{position:relative;z-index:1;flex:1;overflow:hidden;perspective-origin:50% 50%}
.rollo-js .rollo__vista{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
.rollo-js .rollo__cinta{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
/* ⚠ 1000 % = N franjas × 100 (N = 10 en main.js §11) */
.rollo__franja{position:absolute;left:0;top:0;background-color:#2a2d30;background-repeat:no-repeat;background-size:1000% 100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;cursor:pointer;will-change:transform}
.rollo__franja.es-ini{border-radius:12px 0 0 12px}
.rollo__franja.es-fin{border-radius:0 12px 12px 0}
.rollo__pie{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:10px 28px;padding-bottom:clamp(18px,4.5vh,44px)}
.rollo__cuenta{font-family:var(--mono);font-size:13px;color:var(--gris-2);white-space:nowrap}
.rollo__cuenta span{color:#fff;font-size:22px}
.rollo__nombre{display:flex;flex-direction:column}
.rollo__nombre b{font-weight:800;font-stretch:112%;font-size:clamp(20px,2vw,28px);line-height:1.15}
.rollo__nombre span{color:#c9d1d5;font-size:15px;margin-top:3px}
.rollo__nombre.is-cambia{animation:curvaNombre .6s var(--curva)}
.rollo__barra{grid-column:1/-1;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.rollo__barra i{display:block;height:100%;background:var(--cian);transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--cian)}
@media (max-width:760px){
  .rollo__cab{flex-direction:column;align-items:flex-start;gap:10px}
  .rollo__bajada{font-size:14.5px}
  .rollo__nombre span{font-size:14px}
  .rollo__pie{padding-right:84px}   /* el WhatsApp flotante no tapa el texto */
}

/* ── Preguntas: tarjetas numeradas que entran de costado y salen hacia arriba ── */
.preguntas__grilla{align-items:start}
.preguntas__txt{color:var(--gris);margin-top:18px;max-width:24em}
.preguntas__foto{position:relative;margin:28px 0 22px;aspect-ratio:4/3;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(28,31,34,.6)}
.preguntas__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;max-width:none}
.preguntas__foto figcaption{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(18,20,22,.75);color:#fff}
@media (min-width:861px){ .preguntas__lado{position:sticky;top:calc(var(--cab) + 28px)} }
.acordeon{display:grid;gap:12px}
.faq{border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(19,24,27,.06),0 18px 34px -26px rgba(19,24,27,.42);transition:box-shadow .5s}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--petroleo);outline-offset:3px;border-radius:18px}
.faq__n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-family:var(--mono);font-size:12.5px;color:var(--petroleo);background:rgba(0,150,165,.08)}
.faq__q{font-weight:700;font-size:17.5px;line-height:1.3}
.faq__mas{position:relative;width:36px;height:36px;border-radius:50%;background:var(--aluminio);transition:transform .45s var(--curva),background .3s}
.faq__mas::before,.faq__mas::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--petroleo);transition:background .3s}
.faq__mas::after{transform:rotate(90deg)}
.faq summary:hover .faq__mas{background:rgba(0,150,165,.14)}
.faq[open]{box-shadow:inset 3px 0 0 var(--petroleo),0 30px 60px -28px rgba(0,150,165,.45)}
.faq[open] .faq__n{background:var(--petroleo);color:#fff}
.faq[open] .faq__mas{transform:rotate(135deg);background:var(--petroleo)}
.faq[open] .faq__mas::before,.faq[open] .faq__mas::after{background:#fff}
.faq__r{padding:0 22px 22px 72px;color:var(--gris)}
.faq[open] .faq__r{animation:faqAbre .55s var(--curva)}
@keyframes faqAbre{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}}
.js .acordeon .faq.rv{opacity:0;transform:translate3d(-80px,0,0) rotate(-2deg)}
.js .acordeon .faq.rv[data-lado="der"]:not(.is-in):not(.is-sale){transform:translate3d(80px,0,0) rotate(2deg)}
.js .acordeon .faq.rv.is-in{opacity:1;transform:none;transition:opacity .8s var(--curva),transform 1.1s var(--curva),box-shadow .5s}
.js .acordeon .faq.rv.is-sale{opacity:0;transform:translate3d(0,-64px,0) scale(.94);transition:opacity .6s,transform .8s var(--curva)}
@media (max-width:760px){
  .faq summary{gap:12px;padding:15px 14px}
  .faq__n{width:30px;height:30px;font-size:11.5px}
  .faq__q{font-size:16px}
  .faq__mas{width:30px;height:30px}
  .faq__r{padding:0 16px 18px 56px;font-size:15.5px}
  .preguntas__foto{aspect-ratio:16/9}
  .js .acordeon .faq.rv{transform:translate3d(-40px,0,0) rotate(-1.5deg)}
  .js .acordeon .faq.rv[data-lado="der"]:not(.is-in):not(.is-sale){transform:translate3d(40px,0,0) rotate(1.5deg)}
}

/* ── Mapa: el mar ── */
.mapa .mar{fill:url(#mpAgua);opacity:.85}

/* ── Contacto: el frente nuevo (1,85:1) ── */
.ficha__foto{aspect-ratio:1.85/1}

/* ═══ 15/10 tarde: los videos nuevos son CLAROS (la casa al sol, la helada
   con el sol de frente): el velo de la izquierda llega más lejos y más
   oscuro, y los títulos llevan una sombra quieta (no se anima). Sólo en
   la compu: en el teléfono el texto va abajo de la caja, sobre liso. */
@media not all and (max-width:760px) and (orientation:portrait){
  .armado__cuadro::after{background:linear-gradient(90deg,rgba(20,22,24,.94) 0%,rgba(20,22,24,.8) 26%,rgba(20,22,24,.45) 44%,rgba(20,22,24,0) 62%),linear-gradient(0deg,rgba(28,30,32,.8),rgba(28,30,32,0) 22%),
    linear-gradient(180deg,rgba(20,22,24,.62),rgba(20,22,24,0) 18%)}   /* arriba: el menú sobre el cielo claro de la quinta (16/10) */
  .frio__velo{background:linear-gradient(90deg,rgba(20,22,24,.92) 0%,rgba(20,22,24,.76) 28%,rgba(20,22,24,.4) 46%,rgba(20,22,24,0) 64%),linear-gradient(0deg,rgba(28,30,32,.7),rgba(28,30,32,0) 30%)}
  .paso-hero .h1,.paso-frio .h1{text-shadow:0 2px 28px rgba(0,0,0,.5)}
  .paso-hero .bajada,.paso-frio .bajada{text-shadow:0 1px 14px rgba(0,0,0,.6)}
}
/* Colores: con la foto de la ventana puesta, la foto manda (era 5/6) */
@media (min-width:901px){
  .colores__grilla{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .ventana-color{box-shadow:0 40px 80px -40px rgba(60,40,20,.45)}
}

/* ═══ FONDOS DE FOTO en las secciones claras (15/10 tarde, Jope: «que no
   sean tan planas, como en Oriela»). Imágenes de Flow desenfocadas de
   antemano (fotos.py, FONDOS) bajo un velo claro: del lado del texto casi
   liso, del otro se ve la foto. Sólo con .con-fondos (main.js, después de
   «load»). «Por qué PVC» es muy alta: la foto va arriba y se funde. */
.con-fondos #por-que{background:
  linear-gradient(180deg,rgba(242,244,245,0) 0,rgba(242,244,245,.2) 340px,var(--aluminio) 860px),
  linear-gradient(90deg,rgba(242,244,245,.95) 0%,rgba(242,244,245,.86) 42%,rgba(242,244,245,.5) 100%),
  url(assets/img/fondo-porque.webp) 50% 0/max(100%,1600px) auto no-repeat,var(--aluminio)}
@media (max-width:860px){
  .con-fondos #por-que{background:
    linear-gradient(180deg,rgba(242,244,245,.62) 0,rgba(242,244,245,.82) 300px,var(--aluminio) 640px),
    url(assets/img/fondo-porque.webp) 50% 0/auto 640px no-repeat,var(--aluminio)}
}

/* ═══ 2 · EN SIMPLE: una foto por paso (16/10; antes la ventana dibujada y
   antes el reloj: las reglas .reloj__* de arriba quedan para la pista, el
   fondo, los pasos y la guía). main.js §9: la que entra se destapa desde
   abajo (clip-path), la de adentro se acerca y se corre (transform) y la
   barra de su paso se llena (scaleX). Sin JS se ve la última, quieta. */
.pfotos{position:relative;justify-self:center;width:min(100%,calc((100svh - var(--cab) - 90px) * .8));aspect-ratio:4/5;
  border-radius:22px;overflow:hidden;background:#1c1e20;box-shadow:0 50px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07)}
.pfotos::after{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(closest-side,rgba(1,200,220,.14),transparent 70%)}
.pfoto{position:absolute;inset:0;z-index:0;margin:0}   /* z-index: cada una es su propia capa (si no, el pie de la de abajo asoma encima de la de arriba) */
.pfoto img{display:block;width:100%;height:100%;object-fit:cover}
.js .pfoto{clip-path:inset(100% 0 0 0)}
.js .pfoto:first-child{clip-path:none}
.js .pfoto img{will-change:transform;transform-origin:50% 60%}
.pfoto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 20%,transparent 60%,rgba(0,0,0,.66))}
.pfoto figcaption{position:absolute;z-index:1;left:20px;right:20px;bottom:20px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.pfoto figcaption b{flex:none;display:grid;place-items:center;height:26px;padding:0 10px;border-radius:99px;background:var(--cian);color:#062331;font-weight:700;text-shadow:none}
.pfotos__barras{display:none}
.js .pfotos__barras{position:absolute;z-index:2;top:16px;left:16px;right:16px;display:flex;gap:6px;margin:0;padding:0;list-style:none}
.pfotos__barras li{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.pfotos__barras i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
@media (max-width:860px){
  .pfotos{order:-1;width:100%;aspect-ratio:auto;height:min(40svh,96vw);border-radius:18px}
  .pfoto figcaption{left:14px;right:14px;bottom:14px;font-size:10.5px;gap:9px}
  .pfoto figcaption b{height:22px;padding:0 8px}
  .js .pfotos__barras{top:12px;left:12px;right:12px}
  .js .reloj__guia{display:none}   /* las barras de la foto ya cuentan el avance; la línea quedaba bajo el WhatsApp */
}

/* ═══ LA PANTALLA DE CARGA, MÁS LARGA (16/10, Jope: «es muy corta») ═══
   Las alas del logo se abren desde su raíz, baja la aureola con un halo
   celeste, sube el nombre y después la bajada. Al salir (html.carga-sale)
   se apaga la marca, se prende una línea de luz en el medio y la pantalla
   se abre en dos hojas, como una corrediza, sobre la casa de la portada.
   Sólo transform y opacity. El mínimo de tiempo lo pone main.js §3. */
.carga{background:transparent;overflow:hidden;transition:visibility 0s linear 1.45s}
html.carga-sale .carga{opacity:1}
.carga__hoja{position:absolute;top:0;bottom:0;width:calc(50% + 1px);z-index:-1;transition:transform 1.05s cubic-bezier(.76,0,.24,1) .34s}
.carga__hoja--izq{left:0;background:radial-gradient(60vmax 46vmax at 100% 46%,rgba(1,200,220,.13),rgba(1,200,220,0) 62%),var(--fondo)}
.carga__hoja--der{right:0;background:radial-gradient(60vmax 46vmax at 0% 46%,rgba(1,200,220,.13),rgba(1,200,220,0) 62%),var(--fondo)}
.carga__luz{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:0;background:linear-gradient(180deg,rgba(1,200,220,0),#7fe3ee 30%,#fff 50%,#7fe3ee 70%,rgba(1,200,220,0));box-shadow:0 0 18px 2px rgba(1,200,220,.55);opacity:0;transform:scaleY(0)}
html.carga-sale .carga__hoja--izq{transform:translateX(-101%)}
html.carga-sale .carga__hoja--der{transform:translateX(101%)}
html.carga-sale .carga__luz{animation:luzSale 1.3s var(--curva) forwards}
@keyframes luzSale{0%{opacity:0;transform:scaleY(0)}25%{opacity:1;transform:scaleY(1)}55%{opacity:1}100%{opacity:0;transform:scaleY(1)}}
.carga__marca,.carga__barra,.carga__pct{transition:opacity .4s,transform .5s var(--curva)}
html.carga-sale .carga__marca,html.carga-sale .carga__barra,html.carga-sale .carga__pct{opacity:0;transform:scale(.94)}
.carga__logo{width:min(300px,66vw);animation:none;overflow:visible}
.carga__logo g{transform-box:fill-box}
.cl-ala{opacity:0;animation:alaAbre 1.15s cubic-bezier(.3,.9,.3,1.12) .15s forwards}
.cl-ala--izq{transform-origin:100% 92%;--giro:40deg}
.cl-ala--der{transform-origin:0% 92%;--giro:-40deg}
@keyframes alaAbre{0%{opacity:0;transform:rotate(var(--giro)) scale(.62)}35%{opacity:1}100%{opacity:1;transform:none}}
.cl-aureola{opacity:0;filter:drop-shadow(0 0 7px rgba(1,200,220,.9));animation:aureolaBaja .8s var(--curva) .75s forwards,aureolaLate 2.4s ease-in-out 1.6s infinite}
@keyframes aureolaBaja{0%{opacity:0;transform:translateY(-34px) scale(.8)}100%{opacity:1;transform:none}}
@keyframes aureolaLate{0%,100%{opacity:1}50%{opacity:.72}}
.cl-nombre,.cl-rubro{opacity:0;animation:nombreSube .8s var(--curva) 1.05s forwards}
.cl-rubro{animation-delay:1.35s}
@keyframes nombreSube{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
.carga__rubro{opacity:0;animation:nombreSube .8s var(--curva) 1.6s forwards}
.carga__barra{opacity:0;animation:aparece .6s linear .5s forwards}
.carga__pct{opacity:0;animation:aparece .6s linear .6s forwards}
@keyframes aparece{to{opacity:1}}
html.carga-sale .carga__barra,html.carga-sale .carga__pct{animation:none}
html.carga-sale .paso-hero.is-on{transition-delay:.75s}
@media (prefers-reduced-motion:reduce){
  .cl-ala,.cl-aureola,.cl-nombre,.cl-rubro,.carga__rubro,.carga__barra,.carga__pct{animation:none;opacity:1}
  .carga__hoja{transition:none}
}

/* ═══ TÍTULOS QUE ENTRAN Y SALEN (16/10, Jope: «al título alguna entrada
   y salida», «al título una entrada buena») ═══
   main.js §19 parte cada [data-tv] en palabras (.tv-p recorta, .tv-i se
   mueve): suben girando apenas, de a una, al entrar; se van hacia arriba
   al salir por arriba y vuelven a esperar abajo si se sale por abajo.
   data-tv="subraya": además, una raya celeste se dibuja debajo del título
   (una sola: por palabra parecía un link). Sin JS, el título se ve quieto. Sólo transform y opacity. */
.tv-p{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .05em .14em;margin:-.04em -.05em -.14em}
.tv-i{display:inline-block;position:relative;transform:translate3d(0,108%,0) rotate(5deg);transform-origin:0 100%;opacity:0;
  transition:transform 1s var(--curva),opacity .6s;transition-delay:calc(var(--k,0) * 55ms)}
[data-tv].is-in .tv-i{transform:none;opacity:1}
[data-tv].is-sale .tv-i{transform:translate3d(0,-108%,0) rotate(-3deg);opacity:0;transition-duration:.65s,.45s;transition-delay:calc(var(--k,0) * 22ms)}
[data-tv="subraya"]::after{content:"";display:block;width:min(220px,46%);height:3px;margin-top:.32em;border-radius:3px;
  background:linear-gradient(90deg,var(--cian),rgba(127,227,238,0));box-shadow:0 0 18px rgba(1,200,220,.5);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s var(--curva) .55s}
[data-tv="subraya"].is-in::after{transform:scaleX(1)}
[data-tv="subraya"].is-sale::after{transform:scaleX(0);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.tv-i{transform:none;opacity:1;transition:none}}

/* ═══ QUÉ HACEMOS, más vivo (16/10) ═══ */
/* La marca de cada línea, arriba a la derecha (como texto: sus logos y
   colores no se tocan). */
.obra__marca{position:absolute;z-index:2;top:12px;right:12px;padding:6px 10px 5px;border-radius:999px;pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:#fff;background:rgba(14,16,18,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:760px){ .obra__marca{top:9px;right:9px;font-size:9px;padding:5px 8px 4px;letter-spacing:.12em} .obra--alta .obra__marca,.obra--cuadrada .obra__marca{max-width:calc(100% - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} }
/* Un halo celeste quieto detrás del mosaico: que la sección no sea un
   fondo plano. */
.productos{position:relative;isolation:isolate;overflow-x:clip}
.productos::before{content:"";position:absolute;z-index:-1;left:50%;top:22%;width:min(1100px,120vw);height:62%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(1,200,220,.16),rgba(1,200,220,.05) 55%,rgba(1,200,220,0))}

/* Portones: dos fotos y el texto al costado. */
.portones{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:center;margin-top:var(--gap,16px);
  padding:clamp(12px,1.4vw,16px);border-radius:20px;background:linear-gradient(135deg,rgba(1,200,220,.10),rgba(255,255,255,.03) 46%,rgba(217,164,106,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 70px -40px rgba(0,150,165,.6)}
.portones__txt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:clamp(4px,1.6vw,20px)}
.portones__n{font-family:var(--mono);font-size:12px;color:var(--cian);letter-spacing:.14em}
.portones__txt b{font-weight:800;font-stretch:108%;font-size:clamp(20px,2vw,26px);line-height:1.1;color:#fff}
.portones__txt>span:not(.portones__n){color:var(--gris-2);font-size:15px;line-height:1.45;margin-bottom:6px}
@media (max-width:860px){ .portones{grid-template-columns:1fr} .portones__txt{padding:4px 6px 8px} .portones__txt .btn{width:100%;justify-content:center} }

/* La cinta del showroom: pasa sola (sólo transform), se frena con el
   mouse o el foco y se pausa fuera de pantalla (main.js §19 bis). */
.vidriera{margin-top:clamp(28px,4vw,48px);overflow:hidden;border-radius:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vidriera__cinta{display:flex;gap:12px;width:max-content;animation:vidrieraCorre 70s linear infinite;animation-play-state:paused}
.vidriera.is-corre .vidriera__cinta{animation-play-state:running}
.vidriera:hover .vidriera__cinta,.vidriera:focus-within .vidriera__cinta{animation-play-state:paused}
@keyframes vidrieraCorre{to{transform:translate3d(calc(-50% - 6px),0,0)}}
.vidriera__foto{position:relative;flex:none;margin:0;height:clamp(150px,17vw,220px);border-radius:14px;overflow:hidden;background:#232629}
.vidriera__foto img{height:100%;width:auto;max-width:none;display:block}
.vidriera__foto figcaption{position:absolute;left:10px;right:auto;bottom:9px;width:auto;max-width:calc(100% - 20px);padding:5px 9px 4px;border-radius:999px;background:rgba(14,16,18,.62);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){ .vidriera{overflow-x:auto} .vidriera__cinta{animation:none} .vidriera__foto[aria-hidden]{display:none} }

/* ── Obras: Instagram con su logo (16/10, Jope: «poné el logo de Instagram
   con su dirección, que al tocar lleve directo»). El ícono es un dibujo de
   líneas (#i-insta), con el degradé de Instagram de fondo. ── */
.curva__insta{gap:12px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);opacity:1;transition:background .3s,transform .3s var(--curva)}
.curva__insta:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.curva__insta-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#fff;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);box-shadow:0 6px 18px -6px rgba(214,36,159,.7)}
.curva__insta-ico svg{width:22px;height:22px}
.curva__insta>span:nth-child(2){display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:15px}
.curva__insta small{font-weight:400;font-size:12px;color:#cfd6da;margin-bottom:2px}
.curva__insta .curva__insta-fl{width:16px;height:16px;opacity:.8}
@media (max-width:700px){ .curva__insta{width:auto} }

/* ═══ POR QUÉ PVC: las alas del logo en el fondo (16/10, Jope: «me gusta el
   fondo; le agregaría unas alas de ángel sobre lo que ya hay») ═══
   Dos alas grandes, celeste muy suave (degradé del #alaGradI/D: casi nada
   en la raíz, más en las puntas), detrás del título y las barras. main.js
   §20 las abre con el scroll (--a: 0 cerradas → 1 abiertas) y el svg de
   adentro respira despacio. Sólo transform. */
.ahorro{position:relative;isolation:isolate;overflow-x:clip}
.ahorro>.contenedor{position:relative;z-index:1}
.alas-fondo{position:absolute;z-index:0;left:50%;top:clamp(10px,3vw,48px);width:min(1240px,104vw);aspect-ratio:2.2/1;transform:translateX(-50%);pointer-events:none}
.ala{position:absolute;top:0;width:43.9%;--a:1}
.ala svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 18px rgba(1,200,220,.25))}
.ala--izq{right:50%;transform-origin:100% 92%;transform:translate3d(0,calc((1 - var(--a)) * 46px),0) rotate(calc((1 - var(--a)) * 22deg)) scale(calc(.86 + var(--a) * .14))}
.ala--der{left:50%;transform-origin:0 92%;transform:translate3d(0,calc((1 - var(--a)) * 46px),0) rotate(calc((1 - var(--a)) * -22deg)) scale(calc(.86 + var(--a) * .14))}
.ala--izq svg{transform-origin:100% 92%;animation:alaRespiraI 8s ease-in-out infinite}
.ala--der svg{transform-origin:0 92%;animation:alaRespiraD 8s ease-in-out infinite}
@keyframes alaRespiraI{0%,100%{transform:none}50%{transform:rotate(-2.6deg)}}
@keyframes alaRespiraD{0%,100%{transform:none}50%{transform:rotate(2.6deg)}}
@media (max-width:860px){
  .alas-fondo{top:8px;width:128vw;opacity:.85}
}
@media (prefers-reduced-motion:reduce){ .ala svg{animation:none} }
.js .ala{--a:0}
@media (prefers-reduced-motion:reduce){ .js .ala{--a:1} }

/* ═══ DVH, más color y la placa del gas con imagen (16/10) ═══
   Jope: «en el cuadro de menos gas y menos aire, en vez de un número, una
   imagen que lo explique» y «le falta un poco más de color sobre los
   cuadros». La placa del gas cruza invierno ↔ verano cada 3,5 s mientras se
   ve. Cada placa lleva su color (--pc): un filo de luz arriba, un halo en la
   esquina y el ícono del título; la foto grande, un filo celeste. */
.gas img{transition:none}
.gas .gas__verano{opacity:0;animation:gasCruza 7s ease-in-out infinite;animation-play-state:paused}
.placa--gas.is-in .gas__verano,.placa--gas.is-in .gas__etq{animation-play-state:running}
@keyframes gasCruza{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
.gas__etq{position:absolute;z-index:2;left:12px;bottom:10px;display:flex;flex-direction:column;gap:1px;color:#fff;font-size:12.5px;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.gas__etq i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;align-self:flex-start;padding:4px 8px 3px;border-radius:999px;margin-bottom:4px;text-shadow:none}
.gas__etq--inv i{background:#e8873a}
.gas__etq--ver i{background:#01c8dc}
.gas__etq--inv{animation:gasEtqInv 7s linear infinite;animation-play-state:paused}
.gas__etq--ver{opacity:0;animation:gasEtqVer 7s linear infinite;animation-play-state:paused}
@keyframes gasEtqInv{0%,40%{opacity:1}44%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes gasEtqVer{0%,44%{opacity:0}48%,88%{opacity:1}92%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .gas .gas__verano,.gas__etq--ver{animation:none;opacity:0} .gas__etq--inv{animation:none} }

.placa{--pc:#01c8dc;position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 16%,#25292c) 0%,#202326 46%,#1d2023 100%)}
.placa::before{content:"";position:absolute;z-index:-1;inset:auto -30% 55% auto;width:80%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 34%,transparent),transparent)}
.placa::after{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--pc),transparent);box-shadow:0 0 16px var(--pc);opacity:.85}
.placa h3{display:flex;align-items:center;gap:10px}
.placa h3::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 22%,transparent),0 0 14px var(--pc)}
.placa--gas{--pc:#ef8a3c}
.placa--ruido{--pc:#a98bf5}
.placa--vaho{--pc:#4fd1c5}
.placa--camaras{--pc:#01c8dc}
.bento__foto{box-shadow:0 0 0 1px rgba(1,200,220,.35),0 30px 80px -30px rgba(1,200,220,.45)}

/* ═══ PRESUPUESTO: la foto del pedido y un fondo con más presencia (16/10) ═══
   El pedido muestra el tipo elegido en el color elegido (assets/img/pedido/,
   desde adentro de una quinta en verano, con la pileta); las cotas de ancho
   y alto van encima. El fondo: el showroom desenfocado de antes, más una
   luz celeste y una cálida que se cruzan más fuertes (.cotizar::after; el
   ::before es el piso de .claro); el velo sobre el showroom, más liviano. */
.plano--foto{position:relative;aspect-ratio:3/2;overflow:hidden;padding:0;background:#1a1d1f}
.plano--foto .plano__svg{display:none}
.pedido-foto,.pedido-foto img{position:absolute;inset:0;width:100%;height:100%}
.pedido-foto img{object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .55s var(--curva),transform 1.2s var(--curva)}
.pedido-foto img.is-on{opacity:1;transform:none}
.pedido-cotas{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#fff}
.pedido-cotas span{position:absolute;display:flex;align-items:center;justify-content:center}
.pedido-cotas b{font-weight:500;padding:3px 8px 2px;border-radius:999px;background:rgba(0,150,165,.92);box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
.pc-ancho{left:14%;right:14%;top:12px;height:20px}
.pc-ancho::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(0,0,0,.4)}
.pc-ancho::after{content:"";position:absolute;inset:4px 0;border-left:1px solid rgba(255,255,255,.9);border-right:1px solid rgba(255,255,255,.9)}
.pc-ancho b{position:relative;z-index:1}
.pc-alto{right:12px;top:16%;bottom:16%;width:20px}
.pc-alto::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(0,0,0,.4)}
.pc-alto::after{content:"";position:absolute;inset:0 4px;border-top:1px solid rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.9)}
.pc-alto b{position:relative;z-index:1;writing-mode:vertical-rl;padding:8px 3px}
.pedido-ilus{position:absolute;left:10px;bottom:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.7)}

.cotizar::after{background:radial-gradient(40% 50% at 10% 16%,rgba(1,200,220,.26),transparent 70%),radial-gradient(38% 46% at 94% 80%,rgba(217,164,106,.24),transparent 70%),radial-gradient(50% 30% at 50% 100%,rgba(0,150,165,.14),transparent 70%)}
.cotizar{background:linear-gradient(180deg,rgba(251,252,252,.8),rgba(242,244,245,.86)),url(assets/img/fondo-coti.webp) center/cover no-repeat,var(--blanco)}

/* ═══ CATÁLOGO DE COLORES, más premium (16/10, Jope: «alguna imagen con las
   franjas de cada color o algo con textura de fondo… contemplando que se
   vean bien las imágenes») ═══
   Detrás de la foto, una «carta de colores» con las ocho franjas (el color
   medio medido de cada muestra REHAU, el mismo de TINTAS en main.js) y una
   veta finita encima; asoma girada por abajo y a la izquierda como un
   muestrario apoyado. La franja del color elegido se levanta (main.js §8
   escribe --sel en .colores__vista). El fondo: luz cálida y un grano fino. */
.colores{position:relative;isolation:isolate;overflow-x:clip;
  background:radial-gradient(50% 60% at 78% 40%,rgba(217,164,106,.16),transparent 70%),radial-gradient(40% 50% at 8% 10%,rgba(1,200,220,.12),transparent 70%),
  repeating-linear-gradient(45deg,rgba(28,30,32,.018) 0 2px,transparent 2px 7px),var(--aluminio,#f2f4f5)}
.colores__vista{--sel:0}
.colores__vista{padding-bottom:clamp(84px,9.4vw,132px)}
.carta{position:absolute;z-index:2;left:7%;right:7%;bottom:0;height:clamp(96px,11vw,150px);display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,.7vw,9px);pointer-events:none}
.carta i{--n:0;flex:1;max-width:64px;height:100%;position:relative;border-radius:10px 10px 6px 6px;overflow:hidden;background:var(--c);
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 16px 30px -14px rgba(40,30,20,.6);transform-origin:50% 120%;
  transform:rotate(calc(var(--n) * 4.5deg)) translateY(calc(var(--n) * var(--n) * 2px));transition:transform .7s var(--curva)}
/* 16/10: seis colores (Pablo dejó de trabajar Wengué y Sapelli) */
.carta i:nth-child(1){--n:-2.5}.carta i:nth-child(2){--n:-1.5}.carta i:nth-child(3){--n:-.5}
.carta i:nth-child(4){--n:.5}.carta i:nth-child(5){--n:1.5}.carta i:nth-child(6){--n:2.5}
.carta i::before{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 5px,rgba(0,0,0,.14) 5px 6px,transparent 6px 11px)}
.carta i::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 40%,rgba(0,0,0,.18))}
.carta i.is-sel{transform:rotate(calc(var(--n) * 4.5deg)) translateY(calc(var(--n) * var(--n) * 2px - 26px));box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(0,150,165,.55),0 22px 34px -12px rgba(0,150,165,.5)}
.ventana-color{z-index:1}
@media (max-width:900px){ .colores__vista{padding-bottom:88px} .carta{left:4%;right:4%;height:78px} }
@media (prefers-reduced-motion:reduce){ .carta i{transition:none} }


/* En el teléfono el WhatsApp flotante cae sobre la píldora de Instagram de Obras: se le deja lugar. */
@media (max-width:760px){ .curva__pie{padding-right:76px} .curva__insta{padding-right:12px} .curva__insta>span:nth-child(2){font-size:14px} }

/* ═══ CARTA COMPLETA REHAU (16/10): las 20 muestras oficiales ═══ */
.carta-rehau{margin-top:clamp(48px,6vw,80px)}
.carta-rehau__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:18px}
.carta-rehau__cab .volanta{margin-bottom:0}
.carta-rehau__cab p:last-child{color:var(--gris);font-size:14.5px;max-width:34em}
.carta-rehau__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px 10px}
.carta-rehau__lista li{display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.2;color:var(--tinta)}
.carta-rehau__lista img{width:100%;height:46px;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px rgba(19,24,27,.12),0 10px 18px -12px rgba(19,24,27,.5);transition:transform .4s var(--curva)}
.carta-rehau__lista li:hover img{transform:translateY(-3px) scale(1.04)}
@media (max-width:1100px){ .carta-rehau__lista{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:560px){ .carta-rehau__lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px} .carta-rehau__lista li{font-size:11px} .carta-rehau__lista img{height:38px} }

.ventana-color figcaption{top:16px;bottom:auto}

/* ═══════════════════════════════════════════════════════════════════════
   16/10 (3) — LA TERCERA REVISIÓN DE JOPE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Portada, paso 3: confianza (ya no «en el color que elijas») ── */
.chips-hero--confia li{padding:9px 16px 9px 9px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s var(--curva)}
.chips-hero--confia i{display:grid;place-items:center;background:linear-gradient(135deg,#3fdcec,#01a9bc);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 16px rgba(1,200,220,.55)}
.chips-hero--confia i svg{width:14px;height:14px;color:#fff}
.paso-hero.is-on .chips-hero--confia li{opacity:1;transform:none}
.paso-hero.is-on .chips-hero--confia li:nth-child(1){transition-delay:.25s}
.paso-hero.is-on .chips-hero--confia li:nth-child(2){transition-delay:.35s}
.paso-hero.is-on .chips-hero--confia li:nth-child(3){transition-delay:.45s}
.paso-hero.is-on .chips-hero--confia li:nth-child(4){transition-delay:.55s}

/* ── Las alas del logo que se cierran y se abren cada tanto (cabecera y
   el emblema de Preguntas). Cada ala gira sobre su raíz (la punta de
   adentro, abajo) y se angosta: se pliega hacia la aureola. Sólo transform. */
.vuela{transform-box:fill-box;animation:aleteoI 9s cubic-bezier(.45,0,.25,1) infinite}
.vuela--izq{transform-origin:99% 86%}
.vuela--der{transform-origin:1% 86%;animation-name:aleteoD}
@keyframes aleteoI{0%,64%,100%{transform:none}71%{transform:rotate(16deg) scaleX(.56)}78%{transform:rotate(-3deg) scaleX(1.02)}83%{transform:rotate(9deg) scaleX(.76)}89%{transform:none}}
@keyframes aleteoD{0%,64%,100%{transform:none}71%{transform:rotate(-16deg) scaleX(.56)}78%{transform:rotate(3deg) scaleX(1.02)}83%{transform:rotate(-9deg) scaleX(.76)}89%{transform:none}}
.cab__logo{overflow:visible}
@media (prefers-reduced-motion:reduce){ .vuela{animation:none} }

/* ── POR QUÉ PVC: fondo premium. La sombra de una ventana y de las hojas
   sobre una pared de cal, al sol (Higgsfield, fotos.py 'fondo/porque'),
   bajo un velo que la deja respirar arriba y se funde al aluminio abajo.
   Las alas pasan a ser de luz: blancas, con el filo celeste. */
.con-fondos #por-que{background:
  linear-gradient(180deg,rgba(244,246,247,.06) 0,rgba(244,246,247,.3) 460px,rgba(242,244,245,.88) 1050px,var(--aluminio) 1400px),
  linear-gradient(90deg,rgba(247,248,248,.55) 0%,rgba(247,248,248,.16) 55%,rgba(247,248,248,0) 100%),
  url(assets/img/fondo/porque.webp) 50% 0/max(100%,1800px) auto no-repeat,var(--aluminio)}
@media (max-width:860px){
  .con-fondos #por-que{background:
    linear-gradient(180deg,rgba(244,246,247,.35) 0,rgba(244,246,247,.6) 380px,rgba(242,244,245,.94) 760px,var(--aluminio) 980px),
    url(assets/img/fondo/porque-cel.webp) 50% 0/100% auto no-repeat,var(--aluminio)}
}
.ala svg{filter:drop-shadow(0 0 1.5px rgba(1,200,220,.45)) drop-shadow(0 14px 34px rgba(1,200,220,.22))}

.seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.seg button{border:0;background:none;color:var(--gris-2);font:inherit;font-size:14px;font-weight:650;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:var(--cian);color:var(--tinta);box-shadow:0 6px 18px -8px rgba(1,200,220,.9)}
.seg button:focus-visible{outline:2px solid #7fe3ee;outline-offset:2px}

/* La cinta del showroom: cada foto se abre en el visor. */
.vidriera__abrir{display:block;height:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in}
.vidriera__abrir img{transition:transform 1s var(--curva)}
.vidriera__abrir:hover img{transform:scale(1.05)}
.vidriera__abrir:focus-visible{outline:2px solid #7fe3ee;outline-offset:-2px;border-radius:14px}
.vidriera__foto figcaption span{display:none}
.vidriera__foto figcaption{pointer-events:none}

/* ── PRESUPUESTO: fondo premium. La mesa del que mide (planos, cinta, el
   perfil, muestras de color), con velo más fuerte en el centro, donde van
   las tarjetas, y la foto viva en los bordes. */
.con-fondos .cotizar{background:
  radial-gradient(64% 62% at 50% 46%,rgba(250,250,248,.84),rgba(250,250,248,.5) 100%),
  url(assets/img/fondo/coti.webp) 50% 50%/cover no-repeat,var(--blanco)}
@media (max-width:860px){
  .con-fondos .cotizar{background:linear-gradient(180deg,rgba(250,250,248,.7),rgba(250,250,248,.86) 40%,rgba(250,250,248,.92)),url(assets/img/fondo/coti-cel.webp) 50% 0/100% auto repeat-y,var(--blanco)}
}

/* ── PREGUNTAS: el ángel, sutil. Fondo de plumas en el aire sobre petróleo
   (fotos.py 'fondo/faq'), plumas que caen despacio, el emblema derecho
   arriba del título y las preguntas en vidrio oscuro, sin colores: un filo
   de luz arriba, el número fino y una aureola que se enciende al abrir. */
.preguntas{position:relative;isolation:isolate;overflow-x:clip;
  background:radial-gradient(46% 42% at 12% 12%,rgba(1,200,220,.22),transparent 70%),linear-gradient(165deg,#0d3346 0%,#0b2230 52%,#0f1a21 100%)}
.con-fondos .preguntas{background:
  linear-gradient(90deg,rgba(7,22,31,.9) 0%,rgba(7,22,31,.66) 40%,rgba(7,22,31,.42) 70%,rgba(7,22,31,.5) 100%),
  url(assets/img/fondo/faq.webp) 50% 50%/cover no-repeat,#0b2230}
@media (max-width:860px){
  .con-fondos .preguntas{background:linear-gradient(180deg,rgba(7,22,31,.35) 0,rgba(7,22,31,.78) 420px,rgba(7,22,31,.94) 760px),url(assets/img/fondo/faq-cel.webp) 50% 0/100% auto no-repeat,#0b2230}
}
.preguntas>.contenedor{position:relative;z-index:1}
.preguntas .preguntas__txt{color:#bcd0d9}
.preguntas .h2{color:#fff}
.preguntas .h2 em{color:#a9e3fa}
.preguntas .preguntas__foto{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 70px -30px rgba(0,0,0,.7)}
.preguntas__emblema{display:block;width:92px;height:auto;margin:0 0 18px;overflow:visible;fill:#e9f8ff;filter:drop-shadow(0 0 10px rgba(127,227,238,.55))}
.preguntas__emblema .vuela{animation-duration:11s;animation-delay:-3s}
.emblema__aureola{fill:#bfe9fb}
.preguntas__plumas{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.preguntas__plumas i{position:absolute;top:-80px;left:var(--l);width:calc(22px * var(--s));color:#eaf7fd;opacity:0;
  animation:plumaCae var(--d) linear infinite;animation-delay:var(--w);animation-play-state:paused}
.preguntas.is-vista .preguntas__plumas i{animation-play-state:running}
.preguntas__plumas svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 6px rgba(234,247,253,.5))}
@keyframes plumaCae{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(calc(var(--r) * 20deg))}
  8%{opacity:.34}
  50%{transform:translate3d(calc(var(--r) * 46px),55vh,0) rotate(calc(var(--r) * -16deg))}
  90%{opacity:.26}
  100%{opacity:0;transform:translate3d(calc(var(--r) * -10px),112vh,0) rotate(calc(var(--r) * 24deg))}}
@media (prefers-reduced-motion:reduce){ .preguntas__plumas{display:none} }
.preguntas .faq{position:relative;overflow:hidden;color:#f3f7f9;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 44px -34px rgba(0,0,0,.8);transition:box-shadow .5s,background .5s}
.preguntas .faq::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(233,248,255,.9),transparent);
  opacity:.25;transform:scaleX(.35);transition:opacity .6s,transform .9s var(--curva);pointer-events:none}
.preguntas .faq:hover::before,.preguntas .faq[open]::before{opacity:.85;transform:none}
.preguntas .faq__n{width:auto;height:auto;padding-right:14px;border-radius:0;background:none;font-size:12px;letter-spacing:.12em;color:rgba(160,236,243,.75);box-shadow:inset -1px 0 0 rgba(255,255,255,.12)}
.preguntas .faq__q{color:#fff;font-weight:650}
.preguntas .faq__mas{width:30px;height:30px;background:none;box-shadow:inset 0 0 0 1.5px rgba(160,236,243,.5);transition:transform .5s var(--curva),box-shadow .4s}
.preguntas .faq__mas::before,.preguntas .faq__mas::after{width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#dff4fd}
.preguntas .faq summary:hover .faq__mas{background:none;box-shadow:inset 0 0 0 1.5px #bfe9fb,0 0 16px rgba(127,227,238,.5)}
.preguntas .faq[open]{background:radial-gradient(120% 160% at 0 0,rgba(127,227,238,.13),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(160,236,243,.28),0 30px 60px -36px rgba(1,200,220,.45)}
.preguntas .faq[open] .faq__n{background:none;color:#bfe9fb}
.preguntas .faq[open] .faq__mas{background:none;transform:rotate(135deg);box-shadow:inset 0 0 0 1.5px #dff4fd,0 0 0 5px rgba(127,227,238,.12),0 0 22px rgba(127,227,238,.6)}
.preguntas .faq[open] .faq__mas::before,.preguntas .faq[open] .faq__mas::after{background:#fff}
.preguntas .faq__r{padding-left:76px}
.preguntas .faq__r p{color:#c3d3da}
@media (max-width:760px){ .preguntas .faq__r{padding-left:16px} .preguntas__emblema{width:76px} }
/* las alas de Por qué PVC: de luz, con un filo celeste finito */
.ala svg use{stroke:rgba(1,200,220,.55);stroke-width:.55;stroke-linejoin:round}
.ala svg{filter:drop-shadow(0 0 1px rgba(1,200,220,.35)) drop-shadow(0 18px 38px rgba(0,150,165,.18))}

/* ── Qué hacemos: los 14 modelos de puerta de PVC (de su web vieja) ── */
.modelos{margin-top:clamp(28px,4vw,48px);padding:clamp(18px,2.4vw,30px) 0 clamp(10px,1.4vw,16px);border-radius:20px;
  background:radial-gradient(60% 90% at 20% 0,rgba(197,141,79,.16),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.modelos__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 clamp(18px,2.4vw,30px);margin-bottom:16px}
.modelos__cab>div:first-child{display:flex;flex-direction:column;gap:6px}
.modelos__cab b{font-weight:800;font-stretch:108%;font-size:clamp(20px,2vw,26px);line-height:1.1;color:#fff}
.modelos__cab span:not(.portones__n){color:var(--gris-2);font-size:15px}
.modelos__flechas{display:flex;gap:8px;flex:none}
.modelos__flechas button{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;transition:background .3s}
.modelos__flechas button:hover{background:rgba(1,200,220,.25)}
.modelos__flechas svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.modelos__vista{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.modelos__vista::-webkit-scrollbar{display:none}
.modelos__lista{list-style:none;margin:0;padding:6px clamp(18px,2.4vw,30px) 8px;display:flex;gap:clamp(12px,1.4vw,18px);width:max-content}
.modelos__lista li{scroll-snap-align:start}
.modelos__lista a{display:flex;flex-direction:column;align-items:center;gap:10px;width:clamp(112px,10.5vw,150px);text-decoration:none;color:#fff}
.modelos__foto{display:block;width:100%;padding:12px 14px 0;border-radius:14px 14px 4px 4px;
  background:radial-gradient(80% 60% at 50% 18%,rgba(255,236,206,.22),transparent 72%),linear-gradient(180deg,#2c3034,#202326);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.modelos__foto img{display:block;width:100%;height:auto;box-shadow:0 18px 28px -14px rgba(0,0,0,.8);transition:transform .6s var(--curva)}
.modelos__lista a:hover .modelos__foto img,.modelos__lista a:focus-visible .modelos__foto img{transform:translateY(-6px)}
.modelos__lista a:focus-visible{outline:2px solid #7fe3ee;outline-offset:4px;border-radius:14px}
.modelos__lista b{font-weight:700;font-size:14.5px}
@media (max-width:760px){ .modelos__flechas{display:none} }
/* las puertas ya salen todas de 300 × ~629 (puertas-catalogo.py): mismo alto sin forzar */
/* las alas de Por qué PVC: luz, sin contorno */
.ala svg use{stroke:none}
.ala svg{filter:drop-shadow(0 0 18px rgba(255,255,255,.95)) drop-shadow(0 0 2px rgba(127,227,238,.55))}

/* ═══════════════════════════════════════════════════════════════════════
   16/10 (5) — CUARTA REVISIÓN DE JOPE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Por qué PVC: el fondo de las cuatro razones. La luz de una ventana
   sobre una pared curva, quieta mientras se recorren (sticky adentro de
   una capa del alto del bloque, a todo el ancho), fundida arriba y abajo. */
.razones{position:relative}
.razones__fondo{position:absolute;z-index:-1;top:-140px;bottom:-140px;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 220px,#000 calc(100% - 220px),transparent);mask-image:linear-gradient(180deg,transparent,#000 220px,#000 calc(100% - 220px),transparent)}
.razones__fondo>div{position:sticky;top:0;height:100vh;background:var(--aluminio)}
.con-fondos .razones__fondo>div{background:linear-gradient(90deg,rgba(244,246,247,.28),rgba(244,246,247,.12) 45%,rgba(244,246,247,.62) 75%),url(assets/img/fondo/razones.webp) 50% 50%/cover no-repeat,var(--aluminio)}
@media (max-width:860px){
  .con-fondos .razones__fondo>div{background:linear-gradient(180deg,rgba(244,246,247,.45),rgba(244,246,247,.62)),url(assets/img/fondo/razones-cel.webp) 50% 50%/cover no-repeat,var(--aluminio)}
}

/* ── Qué hacemos: cada tarjeta lleva a lo suyo ── */
/* 16/10 (7), Jope: «ponele un poco de color, quizás ese mismo celeste»:
   el celeste de El Angel lleno, letra oscura (7:1) y un halo celeste quieto. */
.obra__ir{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 14px;border-radius:999px;
  background:var(--cian);box-shadow:0 8px 22px -8px rgba(1,200,220,.75),inset 0 1px 0 rgba(255,255,255,.35);color:var(--tinta);text-decoration:none;font-size:13.5px;font-weight:700;
  transition:background .3s,color .3s}
.obra__ir svg{width:15px;height:15px;transition:transform .35s var(--curva)}
.obra__ir:hover,.obra__ir:focus-visible{background:#fff;color:var(--tinta)}
.obra__ir:hover svg{transform:translateX(3px)}
@media (max-width:700px){ .obra__ir{margin-top:8px;padding:6px 11px;font-size:12px} }

/* ── Qué hacemos: el cartel de portones (sin fotos ni dibujo) ── */
.porton-cartel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(18px,3vw,44px);align-items:center;
  margin-top:var(--gap,16px);padding:clamp(24px,3.4vw,46px);border-radius:24px;color:#fff;
  background:radial-gradient(70% 120% at 0 0,rgba(127,227,238,.35),transparent 60%),radial-gradient(60% 100% at 100% 100%,rgba(217,164,106,.28),transparent 65%),linear-gradient(120deg,#0b6f9c,#0a4f72 55%,#123446);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px -40px rgba(1,200,220,.6)}
.porton-cartel__marca{position:absolute;z-index:-1;right:-2%;bottom:-.22em;font-weight:900;font-stretch:125%;font-size:clamp(80px,13vw,200px);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);white-space:nowrap;pointer-events:none;animation:cartelMarca 18s ease-in-out infinite alternate}
@keyframes cartelMarca{from{transform:translateX(0)}to{transform:translateX(-8%)}}
.porton-cartel__luz{position:absolute;z-index:-1;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-120%) skewX(-12deg);animation:cartelLuz 6s ease-in-out infinite 1.5s;pointer-events:none}
@keyframes cartelLuz{0%{transform:translateX(-120%) skewX(-12deg)}45%,100%{transform:translateX(420%) skewX(-12deg)}}
.porton-cartel__etq{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#bfe9fb;margin-bottom:12px}
.porton-cartel h3{font-weight:850;font-stretch:112%;font-size:clamp(28px,3.4vw,46px);line-height:1.02;letter-spacing:-.01em;margin-bottom:14px}
.porton-cartel h3 em{display:block;font-style:normal;font-weight:400;color:#bfe9fb}
.porton-cartel__txt p{font-size:17px;line-height:1.5;color:#dbeef7;max-width:30em}
.porton-cartel__chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.porton-cartel__chips li{padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:650;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.porton-cartel__pedido{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.2vw,26px);border-radius:20px;background:rgba(6,26,38,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.porton-cartel__paso{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#bfe9fb;margin:0}
.porton-cartel__pedido .seg{display:flex}
.porton-cartel__pedido .seg button{flex:1;color:#dbeef7}
.porton-cartel__pedido .seg button[aria-pressed="true"]{background:#fff;color:#0a4f72;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.porton-cartel__medidas{display:flex;align-items:end;gap:8px}
.porton-cartel__medidas>span{padding-bottom:12px;color:#bfe9fb}
.porton-cartel__medidas label{flex:1;position:relative;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:#bfe9fb}
.porton-cartel__medidas input{width:100%;height:46px;padding:0 38px 0 14px;border-radius:12px;border:0;background:rgba(255,255,255,.95);color:var(--tinta);font:inherit;font-size:17px;font-family:var(--mono)}
.porton-cartel__medidas input:focus{outline:2px solid #7fe3ee;outline-offset:2px}
.porton-cartel__medidas i{position:absolute;right:12px;bottom:14px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--gris)}
.porton-cartel__btn{justify-content:center;width:100%;animation:cartelBtn 3.2s ease-in-out infinite}
@keyframes cartelBtn{0%,70%,100%{transform:none}78%{transform:scale(1.035)}86%{transform:none}}
.porton-cartel__pedido small{font-size:12.5px;color:#bcd6e2;text-align:center}
@media (max-width:860px){ .porton-cartel{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .porton-cartel__marca,.porton-cartel__luz,.porton-cartel__btn{animation:none} }

/* ── Showroom y contacto: la captura de Google Maps con la ubicación real ── */
.mapa-g{--px:50%;--py:61%;position:relative;display:block;margin-top:clamp(36px,5vw,64px);border-radius:24px;overflow:hidden;text-decoration:none;color:var(--tinta);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 90px -50px rgba(1,200,220,.55)}
.mapa-g img{display:block;width:100%;height:auto;transition:transform 1.4s var(--curva)}
.mapa-g:hover img{transform:scale(1.025)}
.mapa-g__etq{position:absolute;left:var(--px);top:var(--py);display:flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:999px;background:#fff;
  transform:translate(-50%,calc(-100% - 52px));box-shadow:0 18px 40px -14px rgba(8,40,60,.6),0 0 0 1px rgba(0,150,165,.12);white-space:nowrap}
.mapa-g__etq::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;background:#fff;transform:rotate(45deg);border-radius:2px}
.mapa-g__etq svg{width:38px;height:auto;color:var(--logo);fill:currentColor}
.mapa-g__etq b{font-weight:800;font-size:15px}
.mapa-g__etq span{font-size:13px;color:var(--gris)}
.mapa-g__btn{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;background:var(--petroleo);color:#fff;font-weight:700;font-size:15px;
  box-shadow:0 12px 28px -10px rgba(0,150,165,.9)}
.mapa-g__btn svg{width:16px;height:16px;transition:transform .35s var(--curva)}
.mapa-g:hover .mapa-g__btn svg{transform:translateX(4px)}
.mapa-g__atrib{position:absolute;left:12px;bottom:10px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.85);font-size:11px;color:#3c4043}
.mapa-g__pie{margin:14px 4px 0;font-size:14px;color:var(--gris-2)}
@media (max-width:700px){
  .mapa-g{--py:43%;border-radius:18px}
  .mapa-g__etq{padding:7px 12px 7px 8px} .mapa-g__etq svg{width:30px} .mapa-g__etq span{display:none}
  .mapa-g__btn{left:12px;right:12px;bottom:12px;justify-content:center}
  .mapa-g__atrib{top:10px;bottom:auto}
}
.porton-cartel__btn{white-space:nowrap}
@media (max-width:420px){ .porton-cartel__btn{font-size:15px;padding:0 16px} .porton-cartel__pedido{padding:16px} }

/* 16/10 (6): «Del campo a tu casa» pasó de banda quieta a video con el
   scroll (.frio--casa). En la compu el texto va abajo a la izquierda, como
   en la banda, con el velo de la banda: el de los videos claros llega al
   64 % y tapaba media casa. */
@media not all and (max-width:760px) and (orientation:portrait){
  .frio--casa .frio__velo,.frio--arbol .frio__velo{background:linear-gradient(90deg,rgba(18,20,22,.76) 0%,rgba(18,20,22,.38) 36%,rgba(18,20,22,0) 58%),linear-gradient(0deg,rgba(18,20,22,.66) 0%,rgba(18,20,22,0) 46%)}
  .frio--casa .frio__txt,.frio--arbol .frio__txt{align-items:end;padding-bottom:clamp(48px,9vh,96px)}   /* 16/10 (8): el árbol, igual que la casa */
}

/* ═══════════════════════════════════════════════════════════════════════
   16/10 (7) — QUINTA REVISIÓN DE JOPE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El perfil REHAU «en rayos X». Un panel oscuro FIJO (sticky) mientras
   se baja una pista de siete tramos; main.js §21 pone data-paso (1–7) y
   cada paso enciende su pieza en el corte. Sólo transform/opacity. ── */
.perfil-rehau{position:relative;margin-top:clamp(34px,4.5vw,60px)}
.js .perfil-rehau{height:calc(100vh + 7 * 34vh)}
.pr-escena{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;color:#eaf4f9;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(12px,3vw,48px);align-items:center;
  padding:clamp(18px,3vw,44px) clamp(18px,3.4vw,52px);
  background:radial-gradient(70% 85% at 30% 58%,#123a4d 0%,#0d2029 46%,#0a1217 100%);
  box-shadow:0 0 0 1px rgba(127,227,238,.16),0 70px 120px -60px rgba(4,30,45,.95)}
.js .pr-escena{position:sticky;top:calc(var(--cab) + 14px);height:calc(100vh - var(--cab) - 28px);min-height:540px}
/* luz: dos manchas que respiran muy lento (sólo transform y opacity) */
.pr-luz{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pr-luz i{position:absolute;border-radius:50%;opacity:.55}
.pr-luz i:first-child{left:4%;top:20%;width:46%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(1,200,220,.38),rgba(1,200,220,0));animation:prRespira 9s ease-in-out infinite}
.pr-luz i:last-child{right:-8%;bottom:-20%;width:52%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,160,90,.16),rgba(255,160,90,0));animation:prRespira 11s ease-in-out infinite reverse}
@keyframes prRespira{50%{transform:translate3d(3%,-4%,0) scale(1.08);opacity:.85}}
.pr-escena::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 30%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* el panel de texto */
.pr-panel{position:relative;min-width:0}
.pr-volanta{color:#7fe3ee;margin-bottom:10px}
.pr-titulo{font-weight:800;font-stretch:110%;font-size:clamp(24px,2.5vw,36px);line-height:1.06;color:#fff;margin:0 0 clamp(14px,2.4vh,28px)}
.pr-titulo em{font-style:normal;font-weight:400;color:#7fe3ee}
.pr-actual{position:relative;min-height:clamp(170px,26vh,230px)}
.pr-num{display:flex;align-items:baseline;gap:6px;line-height:.8}
/* sin background-clip:text: Safari lo dibuja vacío en una capa que se anima */
.pr-num b{font-weight:800;font-stretch:120%;font-size:clamp(64px,7.6vw,118px);letter-spacing:-.03em;color:rgba(1,200,220,.14);-webkit-text-stroke:1.5px rgba(127,227,238,.85)}
.pr-num small{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:#7f97a3}
.pr-actual__t{display:block;margin:12px 0 8px;font-weight:800;font-stretch:108%;font-size:clamp(21px,2vw,28px);line-height:1.1;color:#fff}
.pr-actual__d{margin:0;max-width:34em;font-size:16.5px;line-height:1.5;color:#b8c9d2}
.perfil-rehau.is-cambia .pr-num b,.perfil-rehau.is-cambia .pr-actual__t,.perfil-rehau.is-cambia .pr-actual__d{animation:prEntra .7s var(--curva) both}
.perfil-rehau.is-cambia .pr-actual__t{animation-delay:.05s}
.perfil-rehau.is-cambia .pr-actual__d{animation-delay:.1s}
@keyframes prEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* los siete: un riel de segmentos que se llenan, con el nombre abajo */
.pr-lista{list-style:none;margin:clamp(14px,2.4vh,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.pr-lista button{width:100%;padding:8px 0 4px;border:0;background:none;cursor:pointer;text-align:left;color:#7f97a3;font:500 11px/1.2 var(--mono);letter-spacing:.08em}
.pr-lista button i{display:block;height:3px;border-radius:3px;margin-bottom:8px;background:rgba(127,227,238,.18);overflow:hidden;position:relative}
.pr-lista button i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#01c8dc,#8ceef6);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--curva)}
.pr-lista button.is-hecho i::after,.pr-lista button[aria-pressed="true"] i::after{transform:none}
.pr-lista button[aria-pressed="true"]{color:#fff}
.pr-lista button:hover{color:#cdeaf6}
.pr-lista button:focus-visible{outline:2px solid #7fe3ee;outline-offset:3px;border-radius:4px}
.pr-pie{margin:clamp(14px,2.2vh,24px) 0 0;font-size:14px;line-height:1.45;color:#8fa6b2}
.pr-pie b{color:#fff}
.js .pr-datos{display:none}
.pr-datos{margin:18px 0 0;display:grid;gap:10px}
.pr-datos dt{font-weight:800;color:#fff}
.pr-datos dd{margin:2px 0 0;color:#b8c9d2;font-size:15px}
html:not(.js) .pr-actual,html:not(.js) .pr-lista{display:none}

/* compu baja (laptops de 768 de alto): todo un poco más chico */
@media (min-width:761px) and (max-height:820px){
  .pr-titulo{font-size:clamp(22px,2.1vw,30px)}
  .pr-num b{font-size:clamp(56px,6vw,90px)}
  .pr-actual__d{font-size:15.5px}
}
/* tablet y teléfono: el corte arriba, el texto abajo, todo en una pantalla */
@media (max-width:960px){
  .js .perfil-rehau{height:calc(100svh + 7 * 30svh)}
  .pr-escena{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:8px;border-radius:24px;padding:14px 16px 16px}
  .js .pr-escena{top:calc(var(--cab) + 8px);height:calc(100svh - var(--cab) - 16px);min-height:0}
  .pr-fig{height:auto;min-height:0}
  .pr-volanta{font-size:10.5px;margin-bottom:4px}
  .pr-titulo{font-size:clamp(18px,4.8vw,26px);margin-bottom:10px}
  .pr-actual{min-height:0}
  .pr-num b{font-size:clamp(38px,10vw,56px);-webkit-text-stroke-width:1.2px}
  .pr-num{position:absolute;right:0;top:-4px}
  .pr-actual__t{margin:0 0 6px;padding-right:clamp(98px,28vw,130px);font-size:clamp(18px,4.6vw,22px)}
  .pr-actual__d{font-size:14.5px;line-height:1.45}
  .pr-lista{margin-top:12px;gap:4px}
  .pr-lista button{padding:10px 0 0;font-size:0}
  .pr-lista button i{margin:0}
  .pr-pie{font-size:12.5px;margin-top:10px}
}
@media (max-width:960px) and (max-height:700px){ .pr-pie{display:none} .pr-titulo{font-size:17px} }
@media (prefers-reduced-motion:reduce){
  .perfil-rehau *,.perfil-rehau *::before,.perfil-rehau *::after{animation:none!important;transition:none!important}
}

/* ── Dónde trabajamos: mapa de papel, sin la cuadrícula ni la mesa que se
   inclinaba (Jope: «la cuadrilla que se mueve, muy básico»). ── */
.mapa{background:#f1e6d1;border-radius:26px;box-shadow:0 0 0 1px rgba(120,90,50,.12),0 40px 80px -40px rgba(60,40,20,.45),inset 0 0 0 6px rgba(255,255,255,.55)}
.js .mapa-mesa .mapa.rv{transform:translateY(34px) scale(.97);opacity:0}
.js .mapa-mesa .mapa.rv.is-in{transform:none;opacity:1;transition:opacity .9s var(--curva),transform 1.2s var(--curva)}
.mapa-mesa::after{display:none}
.mapa .camino{stroke:#b5895a;stroke-width:1.3;stroke-dasharray:2 5;stroke-linecap:round;opacity:.75}
.mapa .relieve path{fill:none;stroke:#b39b75;stroke-width:1;opacity:.55}
.mapa .relieve path:nth-child(n+4){stroke:#9f8460}
.mapa .rosa path{fill:#c9b28c}.mapa .rosa .rosa__n{fill:var(--petroleo)}
.mapa .rosa text,.mapa .escala text{font-family:var(--mono);font-size:11px;fill:#8a7454}
.mapa .escala path{fill:none;stroke:#8a7454;stroke-width:1.5}
.mapa .viaje{fill:var(--cian);opacity:0;filter:drop-shadow(0 0 4px rgba(1,200,220,.9))}
.mapa.is-in .viaje{animation:viaje 6.6s cubic-bezier(.45,.05,.4,1) infinite}
@keyframes viaje{0%{transform:translate(0,0);opacity:0}8%{opacity:1}52%{transform:translate(var(--dx),var(--dy));opacity:1}62%,100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.mapa .punto circle{fill:#3b2f22}
.mapa .punto text{fill:#2b241b;stroke:rgba(251,247,239,.92)}
@media (prefers-reduced-motion:reduce){ .mapa.is-in .viaje{animation:none} }

/* 16/10 (7): fuera el «piso» de líneas en perspectiva que avanzaba al fondo
   de las secciones claras (venía de Don Tito; Jope: «la cuadrilla que se
   mueve, no me gusta, es muy básico»). Quedan las dos luces quietas. */
.claro::before{display:none}
/* (El fondo de «Dónde trabajamos» del 16/10 (7), el campo dorado desenfocado,
   lo reemplazó la ruta del 16/10 (8): ver «SEXTA REVISIÓN».) */
.mapa .relieve path{opacity:.38}

/* ── Showroom y contacto, rediseñado (16/10 (7)): un solo bloque, el mapa
   más chico con la foto del local encima, el formulario plegado y un fondo
   con el showroom desenfocado, una luz celeste y las alas del logo. ── */
.contacto{position:relative;isolation:isolate;overflow-x:clip;padding-block:clamp(64px,9vw,120px);background:#14181b}
.contacto__fondo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 40%,rgba(1,200,220,.22),transparent 65%),radial-gradient(50% 60% at 8% 90%,rgba(240,163,90,.10),transparent 70%),linear-gradient(180deg,#121619,#171c1f)}
.con-fondos .contacto__fondo{background:
  radial-gradient(60% 70% at 78% 40%,rgba(1,200,220,.24),transparent 65%),radial-gradient(50% 60% at 8% 90%,rgba(240,163,90,.12),transparent 70%),
  linear-gradient(180deg,rgba(18,22,25,.93),rgba(18,22,25,.86) 50%,rgba(18,22,25,.95)),
  url(assets/img/fondo-coti.webp) 50% 50%/cover no-repeat,#14181b}
.contacto__alas{position:absolute;right:-6%;top:6%;width:min(70vw,980px);height:auto;fill:rgba(255,255,255,.035)}
.contacto__grilla{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:start;gap:clamp(28px,5vw,72px)}
.contacto__bajada{color:var(--gris-2);margin-top:18px;max-width:34em}
.contacto .acciones{margin-top:24px}
.contacto .ficha{margin-top:28px;padding:20px 22px;border-radius:20px;background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -40px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.contacto .ficha__estado{margin-bottom:8px}
.contacto .horario{font-size:14.5px}
.contacto .horario th,.contacto .horario td{padding:7px 0}
.contacto .ficha__datos{margin-top:14px;gap:10px}
.contacto .ficha__datos li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:15px}
.contacto .ficha__datos li svg{width:20px;height:20px;fill:none;stroke:var(--cian);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contacto .ficha__datos li svg use{fill:var(--cian);stroke:none}
.contacto .ficha__datos b{font-weight:600;min-width:0;overflow-wrap:anywhere}
.contacto .ficha__datos a{font-size:13px;font-weight:700;color:var(--cian);text-decoration:none;padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(1,200,220,.35);white-space:nowrap}
.contacto .ficha__datos a:hover{background:rgba(1,200,220,.14)}
.redes{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.redes a{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;color:#fff;text-decoration:none;font-weight:700;font-size:14px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .3s,transform .3s var(--curva)}
.redes a:hover{background:rgba(1,200,220,.18);transform:translateY(-2px)}
.redes svg{width:20px;height:20px;color:#fff}
/* el formulario por mail, plegado */
.consulta-plegable{margin-top:16px;border-radius:18px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.consulta-plegable summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;font-weight:700;font-size:15.5px}
.consulta-plegable summary::-webkit-details-marker{display:none}
.consulta-plegable summary svg{width:20px;height:20px;fill:none;stroke:var(--cian);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.consulta-plegable summary i{margin-left:auto;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);position:relative;flex:none}
.consulta-plegable summary i::before,.consulta-plegable summary i::after{content:"";position:absolute;left:6px;right:6px;top:10px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--curva)}
.consulta-plegable summary i::after{transform:rotate(90deg)}
.consulta-plegable[open] summary i::after{transform:rotate(0)}
.consulta-plegable .consulta{margin:0;padding:0 18px 18px;background:none;box-shadow:none}
/* el lugar: mapa más chico, la foto del local apoyada encima */
.contacto__lugar{position:relative;padding-bottom:clamp(40px,6vw,70px)}
.contacto .mapa-g{margin-top:0;aspect-ratio:1/1;border-radius:26px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 90px -40px rgba(0,0,0,.85),0 0 80px -30px rgba(1,200,220,.45)}
.contacto .mapa-g picture,.contacto .mapa-g img{position:absolute;inset:0;width:100%;height:100%}
.contacto .mapa-g img{object-fit:cover;object-position:50% 61%}
.contacto .mapa-g__btn{right:16px;bottom:16px}
.contacto .mapa-g__atrib{left:12px;top:12px;bottom:auto}
.contacto__local{position:absolute;left:-7%;bottom:0;width:52%;margin:0;padding:8px 8px 10px;border-radius:16px;background:#fff;transform:rotate(-3.5deg);
  box-shadow:0 30px 50px -24px rgba(0,0,0,.7)}
.contacto__local img{display:block;width:100%;height:auto;aspect-ratio:1.85/1;object-fit:cover;border-radius:10px}
.contacto__local figcaption{margin-top:7px;font-size:12.5px;font-weight:700;color:var(--tinta);text-align:center}
.mapa-g__pie{display:none}
@media (max-width:960px){
  .contacto__grilla{grid-template-columns:minmax(0,1fr)}
  .contacto__lugar{max-width:560px}
}
@media (max-width:700px){
  .contacto{padding-block:64px 56px}
  .contacto .h2{font-size:clamp(28px,8vw,38px)}
  .contacto__bajada{font-size:15.5px}
  .contacto .acciones{margin-top:18px}
  .contacto .acciones .btn{flex:1 1 auto;justify-content:center}
  .contacto .ficha{margin-top:20px;padding:16px}
  .contacto .ficha__datos li{font-size:14px;gap:10px}
  .contacto .ficha__datos a{padding:4px 9px;font-size:12px}
  .contacto .mapa-g{aspect-ratio:4/4.2}
  .contacto .mapa-g img{object-position:50% 43%}
  .contacto .mapa-g__btn{left:auto;right:12px;bottom:12px}
  .contacto__local{left:-2%;width:56%;padding:6px 6px 8px}
  .contacto__local figcaption{font-size:11px}
  .redes a{flex:1;justify-content:center}
}

/* ── El pie: el logo con luz (como el de Tardaluz) y las redes ── */
.pie{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,8vw,96px) 0 100px;border-top:1px solid var(--linea-2);background:#0f1214}
.pie__brillo{position:absolute;left:50%;top:-10%;width:min(1100px,140vw);aspect-ratio:2/1;margin-left:calc(min(1100px,140vw) / -2);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(1,200,220,.20),rgba(1,200,220,0));animation:pieBrillo 7s ease-in-out infinite}
@keyframes pieBrillo{50%{opacity:.55;transform:scale(1.08)}}
.pie__marca{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(40px,6vw,64px)}
.pie__logo{position:relative;display:block;width:clamp(200px,24vw,300px);aspect-ratio:438.6/330.8;color:#fff;margin-bottom:clamp(64px,7.5vw,92px)}
.pie__svg,.pie__reflejo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:#fff}
.pie__svg{filter:drop-shadow(0 0 10px rgba(127,227,238,.55)) drop-shadow(0 0 28px rgba(1,200,220,.35))}
.pie__svg .vuela{animation-duration:8s}
.pie__aureola{fill:#bfeaff;animation:pieAureola 3.6s ease-in-out infinite}
@keyframes pieAureola{50%{opacity:.55}}
.pie__halo{position:absolute;left:50%;top:30%;width:140%;aspect-ratio:1;margin:-70% 0 0 -70%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(1,200,220,.42),rgba(1,200,220,.12) 55%,rgba(1,200,220,0));animation:pieHalo 4.8s ease-in-out infinite}
@keyframes pieHalo{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.04)}}
/* la franja de luz, recortada a la forma del logo */
.pie__luz{position:absolute;inset:0;overflow:hidden;-webkit-mask:url(assets/img/logo/logo-completo.svg) center/100% 100% no-repeat;mask:url(assets/img/logo/logo-completo.svg) center/100% 100% no-repeat}
.pie__luz i{position:absolute;top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(100deg,transparent 0%,rgba(127,224,255,0) 20%,rgba(200,242,255,.95) 50%,rgba(127,224,255,0) 80%,transparent 100%);
  transform:translateX(-120%) skewX(-12deg);animation:pieLuz 6.5s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes pieLuz{0%,8%{transform:translateX(-120%) skewX(-12deg)}48%,100%{transform:translateX(330%) skewX(-12deg)}}
/* el reflejo: el logo dado vuelta, apagado y que se desvanece */
.pie__reflejo{top:100%;bottom:auto;height:100%;transform:scaleY(-1);transform-origin:50% 50%;margin-top:4px;opacity:.16;
  -webkit-mask-image:linear-gradient(0deg,transparent 70%,#000 100%);mask-image:linear-gradient(0deg,transparent 70%,#000 100%)}
.pie__lema{margin:0;font-size:14px;letter-spacing:.06em;color:#9fb2bc}
.pie__redes{list-style:none;display:flex;gap:12px;margin:22px 0 0;padding:0}
.pie__redes a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .3s,transform .35s var(--curva),box-shadow .3s}
.pie__redes a:hover,.pie__redes a:focus-visible{background:var(--cian);color:var(--tinta);transform:translateY(-3px);box-shadow:0 12px 26px -10px rgba(1,200,220,.8)}
.pie__redes svg{width:24px;height:24px}
.pie .marcas{margin-bottom:28px}
.pie__fila{justify-content:center;text-align:center;flex-direction:column;gap:8px}
@media (prefers-reduced-motion:reduce){ .pie__brillo,.pie__halo,.pie__aureola,.pie__luz i{animation:none} }
.contacto .ficha__datos li a{grid-column:auto}

/* ── Teléfono: los videos ENTEROS y SIN MARCO (16/10 (7), Jope: «quiero que
   se vean completos, que no estén enmarcados»). El cuadro 16:9 entero de
   borde a borde (archivos *-m.mp4, 1280×720, el cuadro completo: los -cel
   eran el centro 4:3), sin esquinas, sin sombra y sin el cuadro desenfocado
   detrás; el texto abajo. ── */
@media (max-width:760px) and (orientation:portrait){
  .frio__escena::before,.armado__escena::before{content:none}
  .frio__video{left:0;right:0;width:100%;aspect-ratio:16/9;border-radius:0;box-shadow:none;background-size:cover;
    top:calc(var(--cab) + max(20px,(100svh - var(--cab) - 56.25vw - 320px) / 2))}
  .frio__txt{padding-top:calc(var(--cab) + max(20px,(100svh - var(--cab) - 56.25vw - 320px) / 2) + 56.25vw + 30px)}
  .armado__cuadro{left:0;right:0;aspect-ratio:16/9;top:calc(var(--cab) + max(20px,(100svh - var(--cab) - 56.25vw - 380px) / 2))}
  .armado__video{border-radius:0;box-shadow:none}
}

/* ── Teléfono: «Elegí el color» compacto (16/10 (7), Jope: «achicá las cosas
   para que quien elige los colores lo vea, está muy grande»). El título, la
   foto y justo abajo las seis muestras chicas (3 × 2): se toca y se ve el
   cambio sin bajar. El abanico de muestras (decorativo) no va. ── */
@media (max-width:760px){
  .colores__grilla{gap:0}
  .colores__txt{display:contents}
  .colores__txt>.volanta{order:-4;margin-bottom:8px}
  .colores__txt>.h2{order:-3;margin-bottom:16px;font-size:clamp(28px,8vw,36px)}
  .colores__vista{order:-2;padding-bottom:0}
  .colores__vista .carta{display:none}
  .muestras{order:-1;margin-top:12px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .muestra{padding:8px 8px;column-gap:7px;border-radius:12px}
  .muestra i{width:20px;height:20px}
  .muestra b{font-size:12.5px;line-height:1.15}
  .colores__txt>p:not(.volanta):not(.nota){order:1;margin-top:16px;font-size:15px}
  .colores__txt>.nota{order:2;margin-top:8px}
}
/* …y armado como una placa de cine: el título ARRIBA del video, el video en
   el medio de la pantalla y la bajada ABAJO (con el texto todo abajo
   quedaba medio teléfono vacío). --vtop = dónde empieza el video. */
@media (max-width:760px) and (orientation:portrait){
  .frio{--vtop:calc(var(--cab) + max(160px,(100svh - var(--cab) - 56.25vw) / 2 + 14px))}
  .frio__video{top:var(--vtop)}
  .frio__velo{display:none}
  .frio__txt{padding:0;display:block}
  .paso-frio{position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:calc(var(--vtop) - 18px);max-width:none;
    display:flex;flex-direction:column;justify-content:flex-end}
  .paso-frio .volanta{margin-bottom:10px}
  .paso-frio .bajada{position:absolute;left:0;right:0;top:calc(100% + 18px + 56.25vw + 22px);margin:0;font-size:15.5px}
}
@media (max-width:760px) and (orientation:portrait) and (max-height:700px){
  .frio .h1--dos{font-size:clamp(26px,8vw,32px)}
}
.pie__reflejo,.pie__halo,.pie__luz{pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════════
   16/10 (8) — SEXTA REVISIÓN DE JOPE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Los logos con luz (Jope: «más iluminación, como al final de la
   página»; arriba: «que la intensidad suba y baje»). Sólo opacity y
   transform animados; los filtros quedan quietos. ── */
.carga__emblema{position:relative;display:block;width:min(300px,66vw);margin:0 auto;isolation:isolate}
.carga__emblema .carga__logo{display:block;width:100%;filter:drop-shadow(0 0 8px rgba(127,227,238,.55)) drop-shadow(0 0 24px rgba(1,200,220,.35))}
.carga__halo{position:absolute;left:50%;top:34%;width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(1,200,220,.42),rgba(1,200,220,.12) 55%,rgba(1,200,220,0));
  animation:cargaHaloEntra 1.2s var(--curva) .7s forwards,pieHalo 4.2s ease-in-out 1.9s infinite}
@keyframes cargaHaloEntra{0%{opacity:0;transform:scale(.6)}100%{opacity:.8;transform:scale(.96)}}
.carga__destello{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:url(assets/img/logo/logo-completo.svg) center/100% 100% no-repeat;mask:url(assets/img/logo/logo-completo.svg) center/100% 100% no-repeat}
.carga__destello i{position:absolute;top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(100deg,transparent 0%,rgba(127,224,255,0) 20%,rgba(214,246,255,.95) 50%,rgba(127,224,255,0) 80%,transparent 100%);
  transform:translateX(-120%) skewX(-12deg);animation:cargaLuz 3.2s cubic-bezier(.45,.05,.35,1) 1.5s infinite}
@keyframes cargaLuz{0%{transform:translateX(-120%) skewX(-12deg)}55%,100%{transform:translateX(330%) skewX(-12deg)}}
.cl-aureola{fill:#bfeaff}

.cab__emblema{position:relative;display:block;isolation:isolate}
.cab__marca .cab__logo{display:block}
.cab__marca .cab__logo--brillo{position:absolute;left:0;top:0;z-index:-1;color:#bfeaff;pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(127,227,238,.95)) drop-shadow(0 0 14px rgba(1,200,220,.85));
  opacity:.25;will-change:opacity;animation:cabBrillo 3.6s ease-in-out infinite}
@keyframes cabBrillo{0%,100%{opacity:.2}50%{opacity:1}}
.cab__luz{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:url(assets/img/logo/logo-horizontal.svg) center/100% 100% no-repeat;mask:url(assets/img/logo/logo-horizontal.svg) center/100% 100% no-repeat}
.cab__luz i{position:absolute;top:-40%;bottom:-40%;left:0;width:22%;background:linear-gradient(100deg,transparent 0%,rgba(127,224,255,0) 20%,rgba(214,246,255,.95) 50%,rgba(127,224,255,0) 80%,transparent 100%);
  transform:translateX(-130%) skewX(-14deg);animation:cabLuz 7.2s cubic-bezier(.45,.05,.35,1) 1.2s infinite}
@keyframes cabLuz{0%,4%{transform:translateX(-130%) skewX(-14deg)}40%,100%{transform:translateX(560%) skewX(-14deg)}}
@media (prefers-reduced-motion:reduce){ .carga__halo,.carga__destello i,.cab__logo--brillo,.cab__luz i{animation:none} .carga__halo{opacity:.8} }

/* ── Dónde trabajamos, sexta vuelta (Jope: «el mapa quedó muy básico,
   más realista o como estaba antes; y una imagen de fondo para que no
   quede tan plano»). El mapa es un RELIEVE REAL (SRTM) con las lagunas, el
   mar y las rutas de OpenStreetMap, dibujado en herramientas/mapa/ en la
   misma proyección que el SVG; las luces van POR LAS RUTAS (main.js §12).
   El fondo es una ruta en la pampa con las sierras, nítida, con velo claro
   sólo del lado del texto. La tarjeta vuelve a entrar inclinada, como
   la mesa de antes, y se endereza. ── */
.con-fondos #zona{background:
  linear-gradient(180deg,rgba(251,247,240,.5) 0%,rgba(251,247,240,0) 22%,rgba(251,247,240,0) 78%,rgba(251,247,240,.55) 100%),
  linear-gradient(90deg,rgba(251,247,240,.95) 0%,rgba(251,247,240,.88) 30%,rgba(251,247,240,.42) 52%,rgba(251,247,240,.06) 78%),
  url(assets/img/zona-ruta.webp) 50% 62%/cover no-repeat,#efe6d4}
@media (max-width:860px){
  .con-fondos #zona{background:
    linear-gradient(180deg,rgba(251,247,240,.94) 0%,rgba(251,247,240,.9) 44%,rgba(251,247,240,.35) 66%,rgba(251,247,240,.1) 100%),
    url(assets/img/zona-ruta-m.webp) 50% 100%/cover no-repeat,#efe6d4}
}
.zona .zona__pueblos li{background:rgba(255,255,255,.78);box-shadow:0 6px 18px -12px rgba(60,40,20,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.zona .zona__pueblos li.es-base{background:var(--petroleo)}
.mapa{background:#d8d4b0;border-radius:24px;box-shadow:0 0 0 1px rgba(255,255,255,.75),0 0 0 8px rgba(255,255,255,.28),0 60px 100px -46px rgba(30,24,14,.6)}
.js .mapa-mesa .mapa.rv{transform:translateY(40px) rotateX(26deg) scale(.94);opacity:0}
.js .mapa-mesa .mapa.rv.is-in{transform:none;opacity:1;transition:opacity .9s var(--curva),transform 1.6s var(--curva)}
.mapa .anillo{stroke:#fff;stroke-width:1.4;stroke-dasharray:2 6;stroke-linecap:round;opacity:.8}
.mapa .km{fill:#fff;stroke:rgba(30,36,40,.55);stroke-width:2.6px;font-size:10px}
.mapa .ruta-halo{fill:none;stroke:#fff;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 1s var(--curva) .5s}
.mapa .ruta-real{fill:none;stroke:#0f9fd8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 1s var(--curva) .7s}
.mapa.is-in .ruta-halo{opacity:.55}
.mapa.is-in .ruta-real{opacity:.9}
.mapa .luz-ruta .h{fill:#01c8dc;opacity:.28}.mapa .luz-ruta .h2{fill:#7fe3ee;opacity:.7}
.mapa .luz-ruta .c{fill:#fff}
.mapa .punto circle{fill:#fff;stroke:#1f2326;stroke-width:2}
.mapa .punto text{fill:#1c2124;stroke:rgba(255,255,255,.92);stroke-width:3.6px;font-size:12.5px}
.mapa .punto--base circle{fill:var(--cian);stroke:#fff;stroke-width:2.5}
.mapa .punto--base .onda{fill:none;stroke:#fff}
.mapa .punto--base text{font-size:14px}
.mapa .agua-nombre{fill:#fff;stroke:rgba(20,70,95,.55);stroke-width:2.4px;font-size:11px}
.mapa .rosa path{fill:rgba(255,255,255,.85)}.mapa .rosa .rosa__n{fill:var(--cian)}
.mapa .rosa text,.mapa .escala text{fill:#fff;paint-order:stroke;stroke:rgba(30,36,40,.5);stroke-width:2.4px}
.mapa .escala path{stroke:#fff}
.mapa__fuente{display:table;margin:14px 0 0 auto;padding:6px 11px;border-radius:9px;font-size:11px;line-height:1.4;color:#5d5446;background:rgba(251,247,240,.86);box-shadow:0 6px 18px -12px rgba(60,40,20,.5)}
@media (max-width:860px){ .mapa__fuente{margin-left:0} }
@media (max-width:640px){ .mapa .punto text{font-size:18px} .mapa .punto--base text{font-size:20px} .mapa .agua-nombre{font-size:14px} }

/* ═══════════════════════════════════════════════════════════════════════
   16/10 (10) — SÉPTIMA REVISIÓN DE JOPE
   1) La barra de arriba suma «Preguntas» y «Cómo llegar», también en el
      teléfono. Ahí son dos renglones: el logo chico y Presupuesto, y debajo
      las seis secciones (si no entran, se deslizan con un fundido en el
      borde; main.js §25 lleva a cada una y marca dónde estás).
   2) El presupuesto del teléfono entra en UNA pantalla, como en la compu:
      los cuatro pasos en una sola tarjeta, los nombres de los campos
      adentro de cada campo y la foto del pedido chica, al lado de su ficha.
   ═══════════════════════════════════════════════════════════════════════ */
.cab__nav a.is-activa{opacity:1}
.cab__nav a.is-activa::after{transform:scaleX(1)}
/* «Preguntas frecuentes» y «Por qué PVC» se acortan cuando no hay lugar:
   el primero abajo de 1100 (ahí la barra se aprieta), el segundo en el
   teléfono, donde así entran las seis en un renglón. */
@media (max-width:1100px){ .cab__nav a[href="#preguntas"] .cab__mas{display:none} }
@media (max-width:540px){ .cab__nav a[href="#por-que"] .cab__mas{display:none} }
@media (max-width:1180px) and (min-width:1001px){
  .cab{gap:18px}
  .cab__nav{gap:20px;font-size:14.5px}
  .cab__marca .cab__logo{height:34px}
}
@media (max-width:1000px){
  :root{--cab:70px}
  .cab{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 30px;grid-template-areas:"marca btn" "nav nav";align-items:center;gap:0 12px;height:var(--cab)}
  .cab__marca{grid-area:marca;justify-self:start}
  .cab__marca .cab__logo{height:25px}
  .cab .btn--chico{grid-area:btn;min-height:32px;padding:0 15px;font-size:13.5px}
  .cab__nav{grid-area:nav;position:relative;display:flex;justify-content:space-between;align-items:center;align-self:stretch;gap:18px;
    margin:0 calc(var(--gutter) * -1);padding:0 max(14px,var(--gutter));font-size:13px;white-space:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cab__nav::-webkit-scrollbar{display:none}
  .cab__nav a{flex:none;padding:5px 0 6px;opacity:.8}
  .cab__nav.is-mas-der{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .cab__nav.is-mas-izq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px)}
  .cab__nav.is-mas-izq.is-mas-der{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
}
@media (max-width:540px){ .cab__nav{gap:10px;font-size:12.5px} }
@media (max-width:380px){
  .cab__marca .cab__logo{height:23px}
  .cab .btn--chico{padding:0 13px;font-size:13px}
  .cab__nav{gap:8px;padding:0 12px;font-size:12px}
}
@media (max-width:350px){ .cab__nav{font-size:11.5px} }

/* El WhatsApp flotante se esconde mientras se ve el presupuesto (tiene su
   propio botón y en el teléfono le tapaba la punta). main.js §25. */
.flota-wsp.is-on.en-coti{transform:scale(0);pointer-events:none}

/* «Vidrio» y «Agregale» van en .coti__fila desde el 16/10 (10): en la
   compu y la tablet la fila no existe y su primer rótulo conserva el aire. */
.coti__fila{display:contents}
.coti__fila>.coti__sub:first-of-type{margin-top:18px}
@media (min-width:1101px){ .coti__fila>.coti__sub:first-of-type{margin-top:12px} }

@media (max-width:760px){
  .cotizar{padding:10px 0 14px}
  .cotizar .cabeza{margin-bottom:8px;gap:0}
  .cotizar .cabeza .volanta{margin-bottom:4px;font-size:11px}
  .cotizar .cabeza .h2{font-size:23px;line-height:1.06}
  .cotizar .cabeza__txt{display:none}
  .coti{gap:8px}

  /* los cuatro pasos, una sola tarjeta con filetes */
  .coti__form{gap:0;padding:1px 12px;border-radius:18px;background:#fff;
    box-shadow:0 1px 0 rgba(19,24,27,.04),0 22px 44px -30px rgba(0,150,165,.5),inset 0 0 0 1px rgba(19,24,27,.06)}
  .coti__paso,.coti__paso:focus-within{padding:7px 0 8px;border-radius:0;background:none;box-shadow:none;transform:none}
  .coti__paso+.coti__paso{border-top:1px solid rgba(19,24,27,.08)}
  .coti__paso legend{font-size:13px;margin-bottom:6px;gap:7px;line-height:1.2}
  .coti__paso legend span{width:18px;height:18px;font-size:10px;box-shadow:0 0 0 3px rgba(1,200,220,.12)}
  .coti__paso.is-listo legend span::after{font-size:11px}
  .coti__ayuda{font-size:12px;padding:0}
  .coti__sub{display:none}

  /* 1 · los tipos: cuatro arriba y tres abajo */
  .opciones--tipo{grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
  .opciones--tipo label{grid-column:span 3}
  .opciones--tipo label:nth-child(n+5){grid-column:span 4}
  .opciones--tipo span{min-height:44px;flex-direction:column;justify-content:center;text-align:center;padding:3px 3px;gap:2px;font-size:11px;line-height:1.05;border-radius:10px}
  .opciones--tipo svg{width:16px;height:16px}
  .opciones--tipo input:checked+span{transform:none;box-shadow:0 8px 18px -10px rgba(0,150,165,.85),0 0 0 2px rgba(1,200,220,.28)}
  .opciones--tipo input:checked+span::after{top:5px;right:5px;width:5px;height:5px}

  /* 2 · medidas en un renglón; el nombre de cada campo va adentro */
  .coti .medidas{flex-wrap:nowrap;gap:6px;align-items:center}
  .coti .medidas>.campo:not(.campo--cant){flex:1 1 0;min-width:0}
  .coti .campo>span{position:absolute;z-index:1;left:10px;top:6px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1;pointer-events:none}
  .coti .campo input{width:100%;height:40px;padding:12px 28px 0 10px;font-size:16px;border-radius:11px}
  .coti .campo input::placeholder{font-size:14px}
  .coti .campo em{bottom:9px;right:9px;font-size:11px}
  .coti .medidas__x{padding:0;font-size:16px}
  .coti .campo--cant{margin-left:0}
  .coti .campo--cant>span{left:50%;transform:translateX(-50%)}
  .coti .paso-num{height:40px;border-radius:11px}
  .coti .paso-num button{width:29px;font-size:18px}
  .coti .campo--cant .paso-num input{width:30px;height:100%;padding:12px 0 0;border-radius:0}
  .como-medir{grid-template-columns:84px 1fr;gap:10px;padding:10px;margin-top:8px}
  .como-medir svg{max-width:none}
  .como-medir ol{font-size:12px;gap:4px}

  /* 3 · colores de a tres; vidrio y colocación en un renglón */
  .opciones--color{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .opciones--color label{display:block}
  .opciones--color span{width:100%;min-height:29px;padding:0 6px;gap:6px;font-size:11.5px;line-height:1.05;border-radius:9px}
  .opciones--color i{width:19px!important;height:19px!important;flex:none}
  .coti__fila{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:12px}
  .opciones--seg{flex-wrap:nowrap;gap:2px;padding:3px}
  .opciones--seg span{min-height:30px;padding:0 9px;font-size:12.5px;gap:0}
  /* «recomendado» se apoya sobre el borde, arriba del DVH */
  .opciones--seg span small,.opciones--seg input:checked+span small{position:absolute;top:-9px;left:2px;z-index:1;font-size:7.5px;line-height:1.3;padding:1px 5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:var(--cian);color:var(--tinta)}
  .opciones--check span{min-height:30px;padding:0 11px;font-size:12.5px;gap:6px}
  .opciones--check span::before{width:14px;height:14px}

  /* 4 · nombre y localidad lado a lado */
  .coti .fila-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
  .coti .campo--txt input{height:40px;padding:12px 10px 0;font-size:16px}

  /* la ficha: la foto a la izquierda; a la derecha qué es y el botón */
  .coti__vista{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"foto ficha" "foto btn";gap:7px 11px;align-items:end;padding:8px;border-radius:18px}
  .coti__vista .plano{grid-area:foto;align-self:stretch;margin:0;border-radius:11px;aspect-ratio:auto;min-height:92px;transform:none}
  .pedido-ilus{left:6px;bottom:5px;font-size:7.5px;letter-spacing:.08em;white-space:nowrap}
  .coti__ficha{grid-area:ficha;align-self:start;margin:2px 0 0;gap:1px}
  .coti__etq{font-size:9.5px;letter-spacing:.14em}
  .coti__ficha b{font-size:14.5px;line-height:1.15}
  .coti__ficha span:last-child{font-size:11px}
  .pedido-cotas,.coti__vista .resumen,.coti__vista .nota,.coti__pedido{display:none}
  .coti__vista .btn--wsp{grid-area:btn;min-height:42px;padding:0 12px;gap:8px;font-size:14px;justify-content:center;transform:none}
  .coti__vista .btn--wsp svg{width:19px;height:19px}
}
/* pantallas bajas (Safari con la barra grande, iPhone SE): sin la volanta */
@media (max-width:760px) and (max-height:700px){
  .cotizar .cabeza .volanta{display:none}
  .cotizar{padding-top:8px}
  .cotizar .cabeza{margin-bottom:6px}
  .cotizar .cabeza .h2{font-size:21px}
  .coti__paso,.coti__paso:focus-within{padding:5px 0 6px}
  .coti__paso legend{margin-bottom:4px}
  .opciones--tipo span{min-height:40px;padding:2px 3px;font-size:10.5px}
  .coti__fila{margin-top:11px}
}
@media (max-width:380px){
  .coti__form{padding:1px 10px}
  .opciones--seg span{padding:0 7px;font-size:12px}
  .opciones--check span{padding:0 9px;font-size:12px}
  .coti__vista{grid-template-columns:96px minmax(0,1fr)}
  .coti__vista .btn--wsp{padding:0 10px;font-size:13.5px}
  .pedido-ilus{left:5px;font-size:6.8px;letter-spacing:.04em}
  .coti .campo input::placeholder{font-size:13px}
}



/* ═══ 17/10 — EL CORTE, EN FOTOS ═══════════════════════════════════════
   Jope: «¿fotos reales en vez de los dibujos de Por qué PVC?». El corte es
   una FOTO del perfil cortado (con el exterior y el living detrás) y en cada
   paso la «cámara» se acerca a su pieza; los pasos 3, 6 y 7 cambian a su
   foto (esquina y manija REALES de Pablo; la inclinada, generada).
   · .pr-cam es la foto entera (4:5) en «cover» sobre la figura: la miden
     los cqw/cqh de .pr-fig (container-type:size). --fy0 = de dónde se
     recorta arriba/abajo cuando la figura es más ancha que 4:5.
   · El acercamiento es SÓLO transform: scale(--s) con el punto (--fx,--fy)
     quieto (translate (1-s)·f). Las marcas viven adentro, en % de la foto, y
     se achican con scale(1/--s): siempre caen en su pieza y miden lo mismo. */
.pr-fig{position:relative;margin:0;height:100%;min-height:0;container-type:size;overflow:hidden;isolation:isolate;
  border-radius:22px;background:#0b1820;box-shadow:0 0 0 1px rgba(127,227,238,.14),0 30px 60px -36px rgba(0,0,0,.9)}
.pr-capa{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--curva)}
.pr-capa--corte{opacity:1}
[data-paso="3"] .pr-capa--corte,[data-paso="6"] .pr-capa--corte,[data-paso="7"] .pr-capa--corte{opacity:0}
[data-paso="3"] [data-capa="3"],[data-paso="6"] [data-capa="6"],[data-paso="7"] [data-capa="7"]{opacity:1}
.pr-cam{--s:1;--fx:50;--fy:50;--fy0:.5;position:absolute;left:0;top:0;width:100%;aspect-ratio:4/5;
  width:max(100cqw,80cqh);left:calc((100cqw - max(100cqw,80cqh)) / 2);top:calc((100cqh - max(125cqw,100cqh)) * var(--fy0));
  transform-origin:0 0;transform:translate(calc((1 - var(--s)) * var(--fx) * 1%),calc((1 - var(--s)) * var(--fy) * 1%)) scale(var(--s));
  transition:transform 1.25s var(--curva);will-change:transform}
.pr-cam picture,.pr-cam img{display:block;width:100%;height:100%}
.pr-cam img{object-fit:cover}
/* el corte: de cerca en cada pieza */
[data-paso="2"] .pr-capa--corte .pr-cam{--s:1.55;--fx:49;--fy:72}
[data-paso="4"] .pr-capa--corte .pr-cam{--s:1.4;--fx:50;--fy:64}
[data-paso="5"] .pr-capa--corte .pr-cam{--s:1.6;--fx:60;--fy:52}
/* las fotos llegan apenas más cerca y se asientan */
.pr-capa--foto .pr-cam{--s:1.08;--fx:50;--fy:45}
[data-paso="3"] [data-capa="3"] .pr-cam,[data-paso="6"] [data-capa="6"] .pr-cam,[data-paso="7"] [data-capa="7"] .pr-cam{--s:1}

/* las marcas: punto + cartel, de a una por paso */
.pr-pt{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2;opacity:0;transition:opacity .45s}
.pr-pt>span{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(calc(1 / var(--s)));transition:transform 1.25s var(--curva)}
.pr-pt i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(1,200,220,.6),0 2px 10px rgba(0,0,0,.55)}
.pr-pt i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid #8ceef6;opacity:0}
.pr-pt b{position:absolute;left:17px;top:0;transform:translateY(-50%);white-space:nowrap;padding:7px 11px 8px;border-radius:11px;
  background:rgba(7,19,26,.86);box-shadow:0 0 0 1px rgba(127,227,238,.28),0 10px 24px -10px rgba(0,0,0,.8);
  font:750 15px/1.15 var(--f);color:#fff;letter-spacing:.01em}
.pr-pt b small{display:block;margin-top:2px;font-weight:500;font-size:12.5px;color:#bfe3f3}
.pr-pt--izq b{left:auto;right:17px}
.pr-pt--aba b{left:0;top:17px;transform:translateX(-50%)}
.pr-pt--eco i{width:11px;height:11px;left:-5.5px;top:-5.5px}
[data-paso="1"] .pr-pt[data-n="1"],[data-paso="2"] .pr-pt[data-n="2"],[data-paso="3"] .pr-pt[data-n="3"],[data-paso="4"] .pr-pt[data-n="4"],
[data-paso="5"] .pr-pt[data-n="5"],[data-paso="6"] .pr-pt[data-n="6"],[data-paso="7"] .pr-pt[data-n="7"]{opacity:1;transition-delay:.45s}
[data-paso="1"] .pr-pt[data-n="1"] i::after,[data-paso="2"] .pr-pt[data-n="2"] i::after,[data-paso="3"] .pr-pt[data-n="3"] i::after,[data-paso="4"] .pr-pt[data-n="4"] i::after,
[data-paso="5"] .pr-pt[data-n="5"] i::after,[data-paso="6"] .pr-pt[data-n="6"] i::after,[data-paso="7"] .pr-pt[data-n="7"] i::after{animation:prPunto 2s ease-out infinite}
@keyframes prPunto{from{transform:scale(.45);opacity:.95}to{transform:scale(1.5);opacity:0}}

/* exterior / interior, arriba de cada lado (sólo en el corte) */
.pr-lado{position:absolute;top:14px;z-index:3;display:flex;flex-direction:column;gap:1px;padding:7px 12px 8px;border-radius:12px;
  background:rgba(7,19,26,.72);box-shadow:0 0 0 1px rgba(127,227,238,.2);
  font:800 13px/1.1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:opacity .5s}
.pr-lado em{font:500 16px/1.1 var(--mono);letter-spacing:0;font-style:normal;text-transform:none}
.pr-lado--ext{left:14px}
.pr-lado--ext em{color:#9ad6ff}
.pr-lado--int{right:14px;text-align:right}
.pr-lado--int em{color:#ffbd85}
[data-paso="3"] .pr-lado,[data-paso="6"] .pr-lado,[data-paso="7"] .pr-lado{opacity:0}
/* de dónde es cada foto */
.pr-nota{position:absolute;left:14px;bottom:12px;z-index:3;padding:4px 9px;border-radius:999px;background:rgba(7,19,26,.6);
  font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a9c4d1}
.pr-nota--real{color:#fff;background:rgba(7,19,26,.78)}
.pr-capa--foto .pr-nota--real{left:14px;top:14px;bottom:auto}

@media (max-width:960px){
  .pr-fig{border-radius:16px}
  .pr-capa--corte .pr-cam{--fy0:.72}
  .pr-pt b{font-size:13px;padding:5px 9px 6px;border-radius:9px}
  .pr-pt b small{font-size:11px}
  .pr-lado{top:10px;padding:5px 9px 6px;font-size:11px}
  .pr-lado em{font-size:13.5px}
  .pr-lado--ext{left:10px}
  .pr-lado--int{right:10px}
  .pr-nota{left:10px;bottom:8px;font-size:8.5px}
  .pr-capa--foto .pr-nota--real{left:10px;top:10px}
}
/* teléfonos angostos (360): los carteles que no entran al costado van abajo del punto */
@media (max-width:400px){
  .pr-pt--chico-aba b{left:0;right:auto;top:17px;transform:translateX(-50%)}
}

/* ═══ 17/10 (2) — FONDO DEL DVH, LA CAMIONETA Y EL SHOWROOM PAREJO ═══ */
/* DVH: el borde de un doble vidrio de noche, con escarcha afuera y la casa
   encendida detrás. Arriba de la sección y fundido al grafito; el velo es más
   fuerte a la izquierda (el título) y también cubre la luz de la derecha
   (ahí va la bajada). Sólo con .con-fondos (después de load). */
.con-fondos .dvh{background:
  linear-gradient(90deg,rgba(28,30,32,.82) 0%,rgba(28,30,32,.5) 45%,rgba(28,30,32,.46) 100%) 0 0/100% 56.25vw no-repeat,
  linear-gradient(180deg,rgba(35,38,41,0) 25%,var(--fondo-2) 100%) 0 0/100% 56.25vw no-repeat,
  url(assets/img/fondo/dvh.webp) 50% 0/100% auto no-repeat,
  var(--fondo-2)}
@media (max-width:860px){
  .con-fondos .dvh{background:
    linear-gradient(180deg,rgba(28,30,32,.6) 0,rgba(28,30,32,.82) 70vw,var(--fondo-2) 125vw) 0 0/100% 125vw no-repeat,
    url(assets/img/fondo/dvh-cel.webp) 50% 0/100% auto no-repeat,
    var(--fondo-2)}
}

/* La camioneta (17/10 (3), Jope: «la frase sobre la imagen, no aislada
   afuera»): el texto ENCIMA de la foto. Apaisado: la foto extendida a lo ancho
   (más campo a la izquierda), el texto a la izquierda sobre el campo y el
   cielo, la casa y la camioneta enteras a la derecha. Parado (teléfono, tablet
   parada): la foto alta, el título en el cielo y la bajada sobre el ripio.
   Arriba sale del azul de Preguntas (#08151f, el borde de abajo medido) y
   abajo se funde en el gris del Showroom. Vuelve a acercarse con el scroll
   como las otras bandas (main.js §18). */
.banda--camioneta{height:auto;aspect-ratio:1920/892;align-items:center;background:#0b1820;color:#fff}
.banda--camioneta .banda__foto img{object-position:100% 50%}
.banda--camioneta::after{background:
  linear-gradient(180deg,#08151f 0,rgba(8,21,31,.6) clamp(36px,3.6vw,64px),rgba(8,21,31,0) clamp(100px,11vw,170px)),
  linear-gradient(0deg,#1b1f22 0,rgba(27,31,34,.6) clamp(28px,3vw,50px),rgba(27,31,34,0) clamp(84px,9vw,140px)),
  linear-gradient(90deg,rgba(8,19,26,.86) 0%,rgba(8,19,26,.68) 22%,rgba(8,19,26,.28) 35%,rgba(8,19,26,0) 46%)}
.banda--camioneta .banda__txt{width:min(41%,680px);padding:clamp(84px,9vw,150px) 0 clamp(72px,8vw,130px) clamp(24px,5vw,96px)}
.banda--camioneta .volanta{color:#7fe3ee}
.banda--camioneta .volanta .nw{white-space:nowrap}   /* si no entra, se parte a la mitad */
.banda--camioneta .h2{font-size:clamp(30px,3.2vw,52px);color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.35)}
.banda--camioneta .h2 em{color:#a9e3fa}
.banda--camioneta .banda__bajada{margin-top:20px;max-width:26em;color:#dbe5ea;font-size:clamp(15px,1.15vw,17px);line-height:1.55;text-shadow:0 1px 14px rgba(0,0,0,.45)}
@media (max-aspect-ratio:1/1){
  .banda--camioneta{aspect-ratio:auto;height:min(156.25vw,100svh);min-height:520px;align-items:stretch}
  .banda--camioneta .banda__foto img{object-position:50% 100%}
  .banda--camioneta::after{background:
    linear-gradient(180deg,#08151f 0%,rgba(8,21,31,.82) 13%,rgba(8,21,31,.5) 27%,rgba(8,21,31,0) 43%),
    linear-gradient(0deg,#1b1f22 0%,rgba(27,31,34,.84) 10%,rgba(27,31,34,0) 27%)}
  .banda--camioneta .banda__txt{width:100%;max-width:var(--ancho);margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;
    padding:clamp(44px,8vw,96px) var(--gutter) clamp(20px,4vw,44px)}
  .banda--camioneta .h2{font-size:clamp(28px,6.4vw,50px);max-width:13em}
  .banda--camioneta .banda__bajada{margin-top:0;max-width:30em;font-size:clamp(15px,2vw,18px)}
}

/* ═══ 17/10 (3) — COSTURAS ENTRE SECCIONES ═══
   Jope: «que las transiciones entre secciones estén bien». <div class=
   "costura"> de alto cero entre dos secciones (ver el comentario del HTML):
   ::before tapa el final de la de arriba con --sube y ::after el principio de
   la de abajo con --baja. Sólo donde hay una FOTO o un VIDEO contra una
   sección oscura: clara contra oscura queda con el corte limpio. Va encima
   (z-index 6) y cae en el aire de las secciones o sobre la imagen; el alto se
   cambia por costura con --hs / --hb. */
.costura{position:relative;z-index:6;height:0;pointer-events:none}
.costura::before,.costura::after{content:"";position:absolute;left:0;right:0}
.costura::before{bottom:0;height:var(--hs,clamp(80px,10vw,150px));background:linear-gradient(180deg,transparent 0%,55%,var(--sube,transparent) 100%)}
.costura::after{top:0;height:var(--hb,clamp(80px,10vw,150px));background:linear-gradient(0deg,transparent 0%,55%,var(--baja,transparent) 100%)}
@media (max-width:760px) and (orientation:portrait){ .costura--video{display:none} }

/* Showroom: la foto del local ARRIBA y el mapa ABAJO, los dos a todo el
   ancho de la columna; en la compu el mapa se estira hasta terminar a la par
   de la columna de los datos (si se abre el formulario, crece hasta 620 px). */
.contacto__grilla{align-items:stretch}
.contacto__lugar{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);padding-bottom:0}
.contacto__local{position:relative;left:auto;bottom:auto;width:100%;margin:0;padding:0;border-radius:26px;overflow:hidden;background:#1d2226;transform:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 70px -40px rgba(0,0,0,.85)}
.contacto__local img{aspect-ratio:1.85/1;border-radius:0}
.contacto__local figcaption{position:absolute;left:14px;top:14px;margin:0;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.93);font-size:12.5px}   /* arriba: abajo tapaba el cartel */
.contacto .mapa-g{flex:1 1 0;aspect-ratio:auto;min-height:300px;max-height:620px}
@media (max-width:960px){
  .contacto__lugar{margin-top:6px}
  .contacto .mapa-g{flex:none;aspect-ratio:4/3;min-height:0;max-height:none}
}
@media (max-width:700px){
  .contacto__local,.contacto .mapa-g{border-radius:18px}
  .contacto__local figcaption{left:10px;top:10px;font-size:11px}
  .contacto .mapa-g{aspect-ratio:1/1}
}

/* ═══════════════════════════════════════════════════════════════════════
   19/10 — PALETA DE PABLO (punto 14: «sacale tanto negro… por mis colores
   turquesa, beige y gris suave»). Los tokens de arriba ya son claros; acá
   va lo que estaba escrito a mano en blanco sobre grafito. Regla: blanco
   SÓLO donde el texto va sobre una foto o un video; todo lo demás, tinta
   sobre hueso (.claro), gris suave (.oscuro) o beige.
   ═══════════════════════════════════════════════════════════════════════ */
body{background:var(--aluminio)}
.oscuro{color:var(--tinta)}
.oscuro .volanta{color:var(--petroleo)}
.oscuro .h2 em{color:var(--petroleo)}
.btn{background:var(--cian);color:var(--tinta);box-shadow:0 12px 28px -14px rgba(0,107,121,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.btn::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)}
.btn:focus-visible{outline-color:var(--petroleo)}
.btn--fantasma{color:var(--tinta);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(46,43,40,.22)}
.btn--wsp{color:#fff}
/* sobre un video (compu): vidrio claro con letra blanca, como antes */
@media not all and (max-width:760px) and (orientation:portrait){
  .frio{--gris-2:#e3dfd9;--texto-2:#f6f1e9;--linea-2:rgba(255,255,255,.16)}
  .frio .volanta{color:var(--cian)}
}

/* ── Cabecera: barra hueso, el logo en GRIS (Pablo, 14/10) ── */
.cab{color:var(--tinta)}
.cab::before{background:rgba(246,241,233,.88);box-shadow:0 1px 0 var(--linea),0 10px 30px -24px rgba(60,48,36,.5);opacity:1}
.cab__marca .cab__logo{color:var(--logo)}
.cab__marca .cab__logo--brillo{color:#9fe9f2;filter:drop-shadow(0 0 5px rgba(1,200,220,.55)) drop-shadow(0 0 12px rgba(1,200,220,.35))}
@keyframes cabBrillo{0%,100%{opacity:.1}50%{opacity:.55}}
.cab__nav a{opacity:.86}

/* ── Pantalla de carga: hueso, logo gris, la línea de luz turquesa ── */
.carga{color:var(--tinta)}
.carga__hoja--izq{background:radial-gradient(60vmax 46vmax at 100% 46%,rgba(1,200,220,.14),rgba(1,200,220,0) 62%),var(--aluminio)}
.carga__hoja--der{background:radial-gradient(60vmax 46vmax at 0% 46%,rgba(1,200,220,.14),rgba(1,200,220,0) 62%),var(--aluminio)}
.carga__luz{background:linear-gradient(180deg,rgba(1,200,220,0),#01c8dc 30%,#7fe6f0 50%,#01c8dc 70%,rgba(1,200,220,0));box-shadow:0 0 18px 2px rgba(1,200,220,.45)}
.carga__logo{color:var(--logo)}
.carga__emblema .carga__logo{filter:drop-shadow(0 0 10px rgba(1,200,220,.3))}
.cl-aureola{fill:var(--cian)}
.carga__halo{background:radial-gradient(closest-side,rgba(1,200,220,.3),rgba(1,200,220,.08) 55%,rgba(1,200,220,0))}
.carga__barra{background:rgba(46,43,40,.1)}

/* ── Portada: en la compu el texto va sobre una NIEBLA clara del lado
   izquierdo (letra tinta, «para toda la vida» en turquesa hondo) en vez del
   velo grafito; en el teléfono, abajo del video sobre hueso. ── */
.armado{background:var(--aluminio);color:var(--tinta)}
.armado .h1{color:var(--tinta)}
.armado .h1 em{color:var(--petroleo)}
.armado .volanta{color:var(--petroleo)}
.armado .bajada{color:var(--gris)}
.armado__video{background-color:var(--fondo-2)}
.chips-hero li{background:rgba(255,253,249,.72);box-shadow:inset 0 0 0 1px var(--linea),0 8px 20px -14px rgba(60,48,36,.45)}
.chips-hero--confia i{background:linear-gradient(135deg,#5fe0ec,#01a9bc);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 14px rgba(1,200,220,.45)}
.chips-hero--confia i svg{color:var(--tinta)}
.armado__regla i{background:rgba(46,43,40,.14)}
@media not all and (max-width:760px) and (orientation:portrait){
  .armado__cuadro::after{background:
    linear-gradient(90deg,rgba(246,241,233,.94) 0%,rgba(246,241,233,.86) 24%,rgba(246,241,233,.55) 40%,rgba(246,241,233,0) 58%),
    linear-gradient(0deg,rgba(246,241,233,.7),rgba(246,241,233,0) 20%)}
  .paso-hero .h1{text-shadow:0 1px 24px rgba(255,253,249,.6)}
  .paso-hero .bajada{text-shadow:none;color:#4e4841}
  .armado .btn--fantasma{background:rgba(255,253,249,.7)}
}
@media (max-width:760px) and (orientation:portrait){
  .armado__escena::before{filter:blur(26px) saturate(1.1);opacity:.4}
}

/* ── En simple: beige claro; los colores de cada paso, legibles sobre
   beige (el celeste claro y el ocre se iban: --led en el HTML) ── */
.simple{background:var(--arena)}
.reloj__fondo i:nth-child(1){--c:rgba(1,200,220,.18)}
.reloj__fondo i:nth-child(2){--c:rgba(147,139,129,.2)}
.reloj__fondo i:nth-child(3){--c:rgba(201,150,95,.2)}
.reloj__fondo::before{background:conic-gradient(from 0deg,transparent 0 70%,rgba(1,200,220,.16) 82%,rgba(255,255,255,.6) 86%,transparent 92%)}
.reloj__fondo::after{background:linear-gradient(rgba(46,43,40,.05) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(46,43,40,.05) 1px,transparent 1px) 0 0/48px 48px}
.rpaso h3{color:var(--tinta)}
.reloj__guia i{background:rgba(46,43,40,.12)}
.pfotos{background:var(--fondo-2);box-shadow:0 50px 90px -44px rgba(60,48,36,.55),0 0 0 1px rgba(46,43,40,.06)}

/* ── Qué hacemos: gris suave; las tarjetas siguen siendo fotos con su
   pie en blanco sobre un degradé cálido (no negro); las marcas, en una
   píldora clara ── */
.obra{background:var(--fondo-2);box-shadow:0 30px 60px -36px rgba(60,48,36,.55),0 2px 8px -4px rgba(60,48,36,.2)}
.obra::after{background:linear-gradient(to top,rgba(38,32,26,.8) 0%,rgba(38,32,26,.4) 26%,rgba(38,32,26,0) 48%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.obra__marca{color:var(--tinta);background:rgba(255,253,249,.88);box-shadow:0 4px 14px -6px rgba(38,32,26,.45)}
.productos::before{background:radial-gradient(closest-side,rgba(1,200,220,.14),rgba(1,200,220,.04) 55%,rgba(1,200,220,0))}
.obra__ir{color:var(--tinta);box-shadow:0 8px 22px -8px rgba(1,200,220,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.obra__ir:hover,.obra__ir:focus-visible{color:var(--tinta)}
.vidriera__foto{background:var(--fondo-2)}
.vidriera__foto figcaption{background:rgba(255,253,249,.9);color:var(--tinta)}
/* el cartel de portones: TURQUESA de su fachada, letra tinta */
.porton-cartel{color:var(--tinta);
  background:radial-gradient(70% 120% at 0 0,rgba(255,255,255,.45),transparent 60%),radial-gradient(60% 100% at 100% 100%,rgba(224,208,192,.7),transparent 65%),linear-gradient(120deg,#5fdcea,#2cc3d4 55%,#8fd8de);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 40px 80px -40px rgba(0,107,121,.55)}
.porton-cartel__marca{-webkit-text-stroke:1.5px rgba(46,43,40,.12)}
.porton-cartel__luz{background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent)}
.porton-cartel__etq,.porton-cartel__paso{color:#00525d}
.porton-cartel h3 em{color:#00525d}
.porton-cartel__txt p{color:#1f3a3e}
.porton-cartel__chips li{background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(46,43,40,.12)}
.porton-cartel__pedido{background:rgba(255,253,249,.82);box-shadow:inset 0 0 0 1px rgba(46,43,40,.08),0 20px 40px -24px rgba(0,82,93,.5)}
.porton-cartel__pedido .seg{background:rgba(46,43,40,.06);box-shadow:inset 0 0 0 1px rgba(46,43,40,.1)}
.porton-cartel__pedido .seg button{color:var(--gris)}
.porton-cartel__pedido .seg button[aria-pressed="true"]{background:var(--cian);color:var(--tinta)}
.porton-cartel__pedido small{color:var(--gris)}

/* ── El visor de fotos: claro ── */
.visor{background:rgba(246,241,233,.97);color:var(--tinta)}
.visor__cerrar,.visor__flecha{border-color:rgba(46,43,40,.22);color:var(--tinta)}
.visor__txt span{color:var(--petroleo)}
.visor__txt p{color:var(--gris)}
.visor__escena img{box-shadow:0 0 0 1px rgba(46,43,40,.08),0 30px 80px -30px rgba(60,48,36,.5)}
.porton-cartel__medidas label,.porton-cartel__medidas>span{color:var(--gris)}
.porton-cartel__medidas input{box-shadow:inset 0 0 0 1px rgba(46,43,40,.14)}
.porton-cartel__medidas input:focus{outline-color:var(--petroleo)}
/* el brillo del logo de la cabecera, más suave sobre la barra clara */
.cab__marca .cab__logo--brillo{filter:drop-shadow(0 0 4px rgba(1,200,220,.45))}
@keyframes cabBrillo{0%,100%{opacity:0}50%{opacity:.35}}

/* ═══ 19/10 — PUERTAS OBLAK: el catálogo completo (main.js §26) ═══
   La puerta oficial grande a la izquierda, sobre un piso de luz; a la
   derecha la línea, el modelo, los colores (el punto es el color medido en
   la foto), la descripción oficial y el pedido por WhatsApp; abajo la fila
   de modelos de la línea. En el teléfono se queda en DOS columnas (Jope:
   «que en el celular se vea igual que en la compu, para que no sea tan
   larga»): la puerta es angosta y entra al lado del texto. */
.oblak{background:var(--arena);padding:clamp(80px,10vw,140px) 0;overflow-x:clip}
.oblak .h2 em{color:var(--petroleo)}
.oblak .cabeza__txt{color:var(--gris)}
.ob__barra{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.ob__tipos{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,253,249,.7);box-shadow:inset 0 0 0 1px var(--linea)}
.ob__tipos button,.ob__lineas button{border:0;cursor:pointer;font:inherit;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.ob__tipos button{min-height:42px;padding:0 18px;border-radius:999px;background:none;font-weight:700;font-size:15px;color:var(--gris)}
.ob__tipos button small{font-weight:500;font-size:12.5px;opacity:.8}
.ob__tipos button[aria-pressed="true"]{background:var(--cian);color:var(--tinta);box-shadow:0 8px 20px -10px rgba(0,107,121,.7)}
.ob__lineas{display:flex;flex-wrap:wrap;gap:8px}
.ob__lineas button{min-height:38px;padding:0 14px;border-radius:999px;background:rgba(255,253,249,.55);box-shadow:inset 0 0 0 1px var(--linea);font-size:14px;font-weight:600;color:var(--tinta)}
.ob__lineas button small{font-family:var(--mono);font-size:11px;color:var(--gris);margin-left:2px}
.ob__lineas button[aria-pressed="true"]{background:var(--tinta);color:var(--aluminio);box-shadow:none}
.ob__lineas button[aria-pressed="true"] small{color:#cfc6ba}
.ob__vista{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"foto info" "foto modelos";gap:18px clamp(24px,4vw,64px);margin-top:clamp(22px,3vw,36px);align-items:start}
.ob__foto{grid-area:foto;position:relative;margin:0;height:clamp(420px,64vh,620px);border-radius:24px;overflow:hidden;
  background:radial-gradient(60% 46% at 50% 100%,rgba(147,139,129,.32),transparent 70%),radial-gradient(70% 60% at 50% 40%,#fffdf9,#efe6da 75%);
  box-shadow:inset 0 0 0 1px rgba(46,43,40,.06),0 40px 80px -50px rgba(60,48,36,.55)}
.ob__img{position:absolute;left:50%;bottom:7%;height:84%;width:auto;max-width:none;transform:translateX(-50%) translateY(10px) scale(.985);opacity:0;
  filter:drop-shadow(0 22px 26px rgba(46,38,30,.32));transition:opacity .55s var(--curva),transform .8s var(--curva)}
.ob__img.is-on{opacity:1;transform:translateX(-50%)}
.ob__sello{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.ob__info{grid-area:info;padding-top:4px}
.ob__linea{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--petroleo)}
.ob__modelo{font-weight:800;font-stretch:112%;font-size:clamp(28px,3.2vw,44px);line-height:1.02;letter-spacing:-.01em;margin:8px 0 16px}
.ob__colores{display:flex;flex-wrap:wrap;gap:8px}
.ob__colores button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 13px 0 7px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;color:var(--tinta);
  background:rgba(255,253,249,.7);box-shadow:inset 0 0 0 1px var(--linea);transition:box-shadow .3s,background .3s}
.ob__colores i{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(46,43,40,.18),0 2px 6px -2px rgba(46,43,40,.4)}
.ob__colores button[aria-checked="true"]{background:#fffdf9;box-shadow:inset 0 0 0 2px var(--petroleo),0 8px 20px -12px rgba(0,107,121,.6)}
.ob__desc{margin-top:18px;max-width:40em;font-size:15.5px;line-height:1.55;color:var(--gris)}
.ob__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px}
.ob__ficha{font-size:14.5px;font-weight:600;color:var(--petroleo);text-underline-offset:3px}
.ob__ficha[hidden]{display:none}
.ob__modelos-caja{grid-area:modelos;align-self:end;min-width:0}
.ob__cuenta{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.ob__modelos{list-style:none;margin:0;padding:4px 2px 10px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
.ob__modelos button{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;padding:10px 6px 8px;border:0;border-radius:16px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--tinta);
  background:rgba(255,253,249,.55);box-shadow:inset 0 0 0 1px var(--linea);transition:box-shadow .3s,background .3s,transform .35s var(--curva)}
.ob__modelos button:hover{transform:translateY(-3px)}
.ob__modelos img{height:118px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(46,38,30,.25))}
.ob__modelos span{line-height:1.15;text-align:center;font-weight:600}
.ob__modelos button[aria-pressed="true"]{background:#fffdf9;box-shadow:inset 0 0 0 2px var(--cian),0 12px 24px -16px rgba(0,107,121,.7)}
.ob__sinjs{margin-top:20px}
@media (max-width:760px){
  .ob__barra{flex-direction:column;flex-wrap:nowrap;align-items:stretch}   /* con wrap, cada renglón toma el ancho de la fila de líneas y «Interior» quedaba afuera */
  .ob__tipos{display:flex}
  .ob__tipos button{flex:1;padding:0 10px;font-size:14px}
  .ob__lineas{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter);scrollbar-width:none}
  .ob__lineas::-webkit-scrollbar{display:none}
  .ob__lineas button{flex:none;font-size:13.5px;padding:0 12px}
  .ob__vista{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:"foto info" "modelos modelos";gap:14px 14px}
  .ob__foto{height:min(112vw,470px);border-radius:18px}
  .ob__img{height:86%;bottom:6%}
  .ob__sello{left:10px;top:9px;font-size:9px}
  .ob__modelo{font-size:clamp(22px,6.4vw,28px);margin:6px 0 12px}
  .ob__colores{gap:6px}
  .ob__colores button{min-height:32px;padding:0 9px 0 5px;font-size:12.5px;gap:6px}
  .ob__colores i{width:20px;height:20px}
  .ob__desc{margin-top:12px;font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
  .ob__acciones{margin-top:14px;gap:10px}
  .ob__acciones .btn{min-height:44px;padding:0 14px;font-size:14px}
  .ob__ficha{font-size:13px}
  .ob__modelos{margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 10px}
  .ob__modelos button{width:72px}
  .ob__modelos img{height:96px}
}

/* ═══ 19/10 — ABERTURAS DE PVC: el panel de ventanas y puertas (main.js §27)
   Dibujos de líneas como los de la referencia de Pablo (hoja abierta en
   perspectiva, vidrio en turquesa suave); la hoja que se mueve se mece sola
   mientras el panel está abierto (sólo transform). ═══ */
.pvc-tipos{margin-top:var(--gap,16px);padding:clamp(18px,2.6vw,34px);border-radius:24px;background:#fffdf9;
  box-shadow:inset 0 0 0 1px rgba(46,43,40,.07),0 40px 80px -50px rgba(60,48,36,.5);
  opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .5s var(--curva)}
.pvc-tipos[hidden]{display:none}
.pvc-tipos.is-abierto{opacity:1;transform:none}
.pvc-tipos__cab{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px;margin-bottom:clamp(16px,2vw,26px);position:relative;padding-right:56px}
.pvc-tipos__cab>div:first-child{flex:1 1 320px}
.pvc-tipos__etq{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--petroleo)}
.pvc-tipos__cab h3{font-weight:800;font-stretch:112%;font-size:clamp(24px,2.6vw,36px);line-height:1.05;margin-top:8px}
.pvc-tipos__cab h3 em{font-style:normal;font-weight:300;color:var(--petroleo)}
.pvc-tipos__pestanas{display:inline-flex;padding:4px;border-radius:999px;background:var(--fondo);box-shadow:inset 0 0 0 1px var(--linea)}
.pvc-tipos__pestanas button{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:none;font:inherit;font-weight:700;font-size:15px;color:var(--gris);cursor:pointer;transition:background .3s,color .3s}
.pvc-tipos__pestanas button[aria-pressed="true"]{background:var(--cian);color:var(--tinta)}
.pvc-tipos__cerrar{position:absolute;right:0;top:0;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(46,43,40,.18);background:none;color:var(--tinta);cursor:pointer}
.pvc-tipos__cerrar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pvc-tipos__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pvc-tipos__lista[hidden]{display:none}
.pvc-tipos__lista[data-grupo="puertas"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.pvc-tipo{display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;border-radius:18px;background:var(--aluminio);box-shadow:inset 0 0 0 1px var(--linea)}
.pvc-tipo b{font-weight:800;font-size:16px;line-height:1.15;margin-top:6px}
.pvc-tipo span{font-size:13.5px;line-height:1.4;color:var(--gris);flex:1}
.pvc-tipo__coti{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 12px;border:0;border-radius:999px;background:var(--cian);color:var(--tinta);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(0,107,121,.7)}
.pvc-tipo__coti svg{width:14px;height:14px}
.pvc-tipo--foto img{width:100%;aspect-ratio:3/5;height:auto;object-fit:cover;border-radius:12px}
.pvc-tipos__pie{margin-top:16px;font-size:14px;color:var(--gris)}
.pvc-tipos__pie a{color:var(--petroleo);font-weight:700}
/* los dibujos */
.dib{display:block;width:100%;height:auto;aspect-ratio:120/150;overflow:visible}
.d-marco{fill:#fffdf9;stroke:var(--tinta);stroke-width:1.6}
.d-vano{fill:#e7e0d6;stroke:var(--tinta);stroke-width:.9}
.d-vano--osc{fill:#d6cdc1}
.d-hoja{fill:#f8f4ee;stroke:var(--tinta);stroke-width:1.3;stroke-linejoin:round}
.d-hoja--frente{fill:#fffdf9}
.d-vidrio{fill:rgba(1,200,220,.16);stroke:var(--tinta);stroke-width:.8;stroke-linejoin:round}
.d-manija{fill:var(--tinta)}
.d-flecha{fill:none;stroke:var(--petroleo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.d-guia{fill:none;stroke:var(--petroleo);stroke-width:1.1;stroke-dasharray:3 3}
.d-limite{fill:none;stroke:var(--gris);stroke-width:1;stroke-linecap:round}
.d-reflejo{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.d-tablero{fill:none;stroke:var(--tinta);stroke-width:.8;opacity:.55}
.d-piso{stroke:var(--piedra);stroke-width:1.2}
.d-mueve{transform-box:fill-box}
.d-mueve--x{transform-origin:50% 50%}
.d-mueve--inclina{transform-origin:50% 100%}
.d-mueve--abre{transform-origin:0 50%}
.d-mueve--abre-der{transform-origin:100% 50%}
@media (prefers-reduced-motion:no-preference){
  .pvc-tipos.is-abierto .d-mueve--x{animation:dCorre 5s ease-in-out infinite}
  .pvc-tipos.is-abierto .d-mueve--inclina{animation:dInclina 5s ease-in-out infinite}
  .pvc-tipos.is-abierto .d-mueve--abre,.pvc-tipos.is-abierto .d-mueve--abre-der{animation:dAbre 5s ease-in-out infinite}
  .pvc-tipos.is-abierto .d-mueve--brillo{animation:dBrillo 5s ease-in-out infinite}
  .pvc-tipo:nth-child(2) .d-mueve{animation-delay:-1s}.pvc-tipo:nth-child(3) .d-mueve{animation-delay:-2s}
  .pvc-tipo:nth-child(4) .d-mueve{animation-delay:-3s}.pvc-tipo:nth-child(5) .d-mueve{animation-delay:-4s}
}
@keyframes dCorre{0%,18%{transform:none}48%,72%{transform:translateX(-30%)}100%{transform:none}}
@keyframes dInclina{0%,18%{transform:none}48%,72%{transform:scaleY(.9)}100%{transform:none}}
@keyframes dAbre{0%,18%{transform:none}48%,72%{transform:scaleX(.72)}100%{transform:none}}
@keyframes dBrillo{0%,18%{transform:translateX(-12%);opacity:.3}50%{transform:translateX(12%);opacity:1}100%{transform:translateX(-12%);opacity:.3}}
@media (max-width:1000px){
  .pvc-tipos__lista{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pvc-tipos__lista[data-grupo="puertas"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .pvc-tipos{padding:16px 12px 14px;border-radius:18px}
  .pvc-tipos__cab{padding-right:48px;gap:12px}
  .pvc-tipos__pestanas{width:100%}
  .pvc-tipos__pestanas button{flex:1}
  .pvc-tipos__lista{gap:8px}
  .pvc-tipo{padding:10px 8px 9px;border-radius:14px}
  .pvc-tipo b{font-size:13.5px}
  .pvc-tipo span{font-size:11.5px;line-height:1.3}
  .pvc-tipo__coti{padding:6px 9px;font-size:12px;margin-top:6px}
}

/* ═══ 19/10 — LOS LOGOS OFICIALES (Pablo: «los logos de REHAU, ROTO, Oblak y
   Alcemar en la vidriera y donde corresponda, respetando sus colores»).
   Van tal cual: sin filtros ni cambios de color; sobre blanco cálido. ═══ */
.marca-logo{display:block;width:auto;max-width:none}
/* las razones de «Por qué PVC»: el logo en lugar de la palabra y del «0» */
.razon__dato--logo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:inherit;line-height:1;letter-spacing:0}
.razon__logo{display:block;height:clamp(40px,4.4vw,60px);width:auto;max-width:none}
.razon__dato--logo small{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
/* la etiqueta de cada tarjeta de «Qué hacemos» */
.obra__marca--logos{display:flex;align-items:center;gap:9px;padding:7px 11px;background:rgba(255,253,249,.94)}
.obra__marca--logos .marca-logo{height:15px}
.obra__marca--logos .marca-logo--oblak,.obra__marca--logos .marca-logo--alcemar{height:14px}
.obra__marca--logos i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
@media (max-width:760px){
  .obra__marca--logos{padding:5px 8px;gap:6px}
  .obra__marca--logos .marca-logo{height:11px}
  .obra__marca--logos .marca-logo--oblak,.obra__marca--logos .marca-logo--alcemar{height:10px}
  .obra__marca--logos i{display:none}
}
/* la cinta del showroom: el sello de la marca arriba de la foto */
.vidriera__sello{position:absolute;z-index:2;left:10px;top:9px;padding:5px 8px;border-radius:999px;background:rgba(255,253,249,.94);box-shadow:0 4px 12px -6px rgba(38,32,26,.5)}
.vidriera__sello .marca-logo{height:13px}
/* la fila de marcas debajo de la cinta */
.marcas-fila{list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.marcas-fila li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 10px 13px;border-radius:16px;background:#fffdf9;box-shadow:inset 0 0 0 1px var(--linea),0 14px 30px -24px rgba(60,48,36,.5)}
.marcas-fila .marca-logo{height:30px}
.marcas-fila .marca-logo--oblak{height:26px}
.marcas-fila .marca-logo--alcemar{height:26px}
.marcas-fila span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);text-align:center}
@media (max-width:760px){
  .marcas-fila{gap:6px}
  .marcas-fila li{padding:11px 4px 9px;gap:6px;border-radius:12px}
  .marcas-fila .marca-logo{height:17px;max-width:100%;object-fit:contain}
  .marcas-fila .marca-logo--oblak,.marcas-fila .marca-logo--alcemar{height:14px}
  .marcas-fila span{font-size:8.5px;letter-spacing:.06em}
}
/* Oblak: su logo en la volanta */
.oblak__volanta{gap:12px}
.oblak__logo{display:block;height:24px;width:auto}
/* el pie: los cuatro logos sobre beige */
.marcas{align-items:center}
.marcas li{color:var(--gris)}
.marcas .marca-logo{height:24px}
.marcas .marca-logo--oblak,.marcas .marca-logo--alcemar{height:21px}

/* ═══ 19/10 — MEDIOS DE PAGO Y DATA FISCAL (punto 19 de Pablo): el cartel de
   AFIP de su web, en texto (se lee y se escala); el QR, nítido. ═══ */
.pago{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.3fr);gap:14px;align-items:stretch;margin:0 0 30px}
.pago>*{border-radius:16px;background:rgba(255,253,249,.72);box-shadow:inset 0 0 0 1px var(--linea);padding:14px 16px}
.pago__aca{display:flex;align-items:center;gap:14px}
.pago__pin{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#5fe0ec,#01a9bc);box-shadow:0 8px 18px -10px rgba(0,107,121,.8)}
.pago__pin i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fffdf9;transform:rotate(45deg);font-style:normal;font-weight:800;font-size:14px;color:var(--tinta)}
.pago__aca p{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--tinta);text-align:left}
.pago__aca em{font-style:normal;color:var(--petroleo)}
.pago__oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pago__medios p{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);text-align:left}
.pago__medios ul{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.pago__medios li{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--tinta)}
.pago__medios svg{width:22px;height:22px;fill:none;stroke:var(--petroleo);stroke-width:1.6}
.pago__fiscal{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta);text-align:left}
.pago__fiscal img{flex:none;width:74px;height:74px;border-radius:6px;box-shadow:0 0 0 1px var(--linea)}
.pago__fiscal span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.25}
.pago__fiscal b{font-size:15px;font-family:var(--mono);letter-spacing:.02em}
.pago__fiscal small{font-size:11.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.pago__afip{margin-left:auto;align-items:flex-end;text-align:right}
.pago__afip b{font-family:var(--f);font-weight:900;font-stretch:120%;letter-spacing:.06em;color:var(--tinta)}
@media (max-width:900px){ .pago{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .pago__fiscal{grid-column:1/-1} }
@media (max-width:560px){
  .pago{grid-template-columns:minmax(0,1fr);gap:8px}
  .pago>*{padding:12px 13px}
  .pago__pin{width:46px;height:46px}.pago__pin i{width:33px;height:33px;font-size:12px}
  .pago__aca p{font-size:14px}
  .pago__fiscal img{width:64px;height:64px}
}

/* ═══ 19/10 — EL CELULAR MÁS CORTO (Jope: «algunas secciones en el celular
   que se vean igual que en la compu, para que no sean tantas pantallas; hoy
   tiene 65, achicar lo que se pueda»). Medido a 390 × 844: 43.105 px antes
   de esta ronda. Los tramos que se recorren con el scroll, más cortos (el
   video y los pasos van igual de enteros, sólo un poco más rápido), y las
   razones con la foto AL LADO del texto, como en la compu. ═══ */
@media (max-width:760px) and (orientation:portrait){
  .armado{height:280vh}            /* era 360 */
  .frio{height:210vh}              /* era 280 */
}
@media (max-width:760px){
  .js .reloj__pista{height:250vh}  /* era 320 */
  .js .perfil-rehau{height:calc(100svh + 7 * 22svh)}   /* era 7 × 30 */
  .razones__lista{gap:26px}
  .razon{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-rows:auto auto auto 1fr;column-gap:14px;align-items:start}
  .razon__foto{grid-column:1;grid-row:1/5;width:100%;max-height:none;margin:0;align-self:center}
  .razon>:not(.razon__foto){grid-column:2}
  .razon__dato--logo{margin:6px 0 10px;gap:6px}
  .razon__logo{height:30px}
  .razon__dato--logo small{font-size:10px;letter-spacing:.08em}
  .razon h3{font-size:19px;line-height:1.12}
  .razon p{font-size:14px;line-height:1.45;margin-top:6px}
  .razon .marca-pt b{display:none}   /* en la foto chica la etiqueta tapaba la pieza; el punto sigue */
  .porton-cartel__chips{display:none}   /* repetían el párrafo de arriba */
}

/* ═══ 19/10 — PALETA DE PABLO, el resto de la página ═══ */
/* Por qué PVC (hueso): los velos de las fotos de fondo, cálidos */
.con-fondos #por-que{background:
  linear-gradient(180deg,rgba(246,241,233,.06) 0,rgba(246,241,233,.32) 460px,rgba(246,241,233,.9) 1050px,var(--aluminio) 1400px),
  linear-gradient(90deg,rgba(246,241,233,.6) 0%,rgba(246,241,233,.18) 55%,rgba(246,241,233,0) 100%),
  url(assets/img/fondo/porque.webp) 50% 0/max(100%,1800px) auto no-repeat,var(--aluminio)}
@media (max-width:860px){
  .con-fondos #por-que{background:
    linear-gradient(180deg,rgba(246,241,233,.38) 0,rgba(246,241,233,.62) 380px,rgba(246,241,233,.95) 760px,var(--aluminio) 980px),
    url(assets/img/fondo/porque-cel.webp) 50% 0/100% auto no-repeat,var(--aluminio)}
}
.con-fondos .razones__fondo>div{background:linear-gradient(90deg,rgba(246,241,233,.3),rgba(246,241,233,.14) 45%,rgba(246,241,233,.64) 75%),url(assets/img/fondo/razones.webp) 50% 50%/cover no-repeat,var(--aluminio)}
@media (max-width:860px){
  .con-fondos .razones__fondo>div{background:linear-gradient(180deg,rgba(246,241,233,.5),rgba(246,241,233,.66)),url(assets/img/fondo/razones-cel.webp) 50% 50%/cover no-repeat,var(--aluminio)}
}
.razones__fondo>div{background:var(--aluminio)}
.barra__chip{color:var(--tinta)}
.marca-pt b{background:rgba(255,253,249,.94);color:var(--tinta);box-shadow:0 8px 22px -10px rgba(38,32,26,.55)}
.razones--fija .razones__fija{background:var(--fondo-2);box-shadow:0 50px 90px -40px rgba(60,48,36,.5)}
/* el panel del perfil REHAU: una placa clara con luz turquesa */
.pr-escena{color:var(--tinta);background:radial-gradient(70% 85% at 30% 58%,#fffdf9 0%,#f4ede3 58%,#ebe2d6 100%);
  box-shadow:inset 0 0 0 1px rgba(46,43,40,.07),0 60px 110px -60px rgba(60,48,36,.55)}
.pr-luz i:first-child{background:radial-gradient(closest-side,rgba(1,200,220,.26),rgba(1,200,220,0))}
.pr-volanta{color:var(--petroleo)}
.pr-titulo{color:var(--tinta)}
.pr-titulo em{color:var(--petroleo)}
.pr-num b{color:rgba(1,200,220,.12);-webkit-text-stroke:1.5px var(--petroleo)}
.pr-num small{color:var(--gris)}
.pr-actual__t{color:var(--tinta)}
.pr-actual__d{color:var(--gris)}
.pr-lista button{color:#8a8076}
.pr-lista button i{background:rgba(0,107,121,.14)}
.pr-lista button i::after{background:linear-gradient(90deg,var(--petroleo),var(--cian))}
.pr-lista button[aria-pressed="true"],.pr-lista button:hover{color:var(--tinta)}
.pr-lista button:focus-visible{outline-color:var(--petroleo)}
.pr-pie{color:var(--gris)}
.pr-pie b,.pr-datos dt{color:var(--tinta)}
.pr-datos dd{color:var(--gris)}
.pr-fig{background:var(--fondo-2);box-shadow:0 0 0 1px rgba(46,43,40,.08),0 30px 60px -36px rgba(60,48,36,.5)}
.pr-pt b{background:rgba(255,253,249,.94);color:var(--tinta);box-shadow:0 0 0 1px rgba(0,107,121,.18),0 10px 24px -10px rgba(38,32,26,.6)}
.pr-pt b small{color:var(--gris)}
.pr-lado{background:rgba(255,253,249,.9);color:var(--tinta)}
.pr-lado em{color:var(--petroleo)}
.pr-nota{background:rgba(255,253,249,.88);color:var(--gris)}
.pr-nota--real{background:rgba(255,253,249,.94);color:var(--petroleo)}

/* Colores (hueso) */
.colores__foto{background:var(--fondo-2)}
.colores__foto figcaption{background:rgba(255,253,249,.9);color:var(--tinta)}

/* DVH (gris suave): fuera la foto de noche de fondo (era oscura); las cuatro
   placas, claras con su color de arriba */
.dvh,.con-fondos .dvh{background:radial-gradient(60% 40% at 85% 0,rgba(1,200,220,.12),transparent 70%),radial-gradient(50% 40% at 0 100%,rgba(224,208,192,.6),transparent 70%),var(--fondo)}
.bento__foto{background:var(--fondo-2);box-shadow:0 50px 90px -50px rgba(60,48,36,.55)}
.bento__foto figcaption{background:rgba(255,253,249,.9)}
.bento__foto figcaption b{color:var(--tinta)}
.bento__foto figcaption span{color:var(--gris)}
.placa,.dvh .placa{color:var(--tinta);background:linear-gradient(160deg,color-mix(in srgb,var(--pc,#01c8dc) 12%,#fffdf9) 0%,#fffdf9 55%,#fbf7f1 100%);
  box-shadow:inset 0 0 0 1px rgba(46,43,40,.07),0 30px 60px -44px rgba(60,48,36,.55)}
.placa h3,.placa__num b{color:var(--tinta)}
.placa__viz{background:radial-gradient(80% 90% at 50% 100%,rgba(1,200,220,.12),transparent 70%),rgba(46,43,40,.04)}
.placa__viz--foto{background:var(--fondo-2)}
.placa__viz--foto::after{background:linear-gradient(180deg,transparent 60%,rgba(46,43,40,.22))}
.onda__vidrio::before,.onda__vidrio::after{background:rgba(0,107,121,.55);box-shadow:0 0 10px rgba(1,200,220,.4)}

/* Quiénes somos (arena): «La empresa» quieta y después el rollo */
.rollo{background:var(--arena);color:var(--tinta)}
.rollo .volanta{color:var(--petroleo)}
.rollo__fondo i{filter:blur(44px) saturate(1.05) brightness(1.08);opacity:0}
.rollo__fondo i.is-on{opacity:.4}
.rollo__fondo::after{background:radial-gradient(120% 80% at 50% 55%,transparent 30%,rgba(236,226,212,.85) 100%),linear-gradient(180deg,rgba(236,226,212,.7),transparent 32%,transparent 72%,rgba(236,226,212,.75))}
.rollo__franja{background-color:var(--fondo-2)}
.rollo__cuenta span{color:var(--tinta)}
.rollo__nombre span{color:var(--gris)}
.rollo__barra{background:rgba(46,43,40,.12)}
.empresa{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center;padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(20px,3vw,40px)}
/* 19/10 (2), Jope: «el texto no tiene el mismo color, un negro y después un
   gris: que quede uniforme, y el mismo tamaño; el título a una altura media».
   Todo el texto en tinta y en un solo cuerpo; el título, centrado al alto
   del texto (align-items:center). */
.empresa__txt{display:grid;gap:14px;font-size:clamp(16.5px,1.3vw,19px);line-height:1.6;color:var(--tinta)}
.empresa__txt a{color:var(--petroleo);font-weight:700}
@media (max-width:760px){
  .empresa{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:72px;padding-bottom:8px}
  .empresa__txt{gap:10px;font-size:15.5px;line-height:1.55}
}

/* Obras (gris suave): el fondo, la foto del frente desenfocada y clara */
.curva{background:var(--fondo);color:var(--tinta)}
.curva .volanta{color:var(--petroleo)}
.curva__fondo i{filter:blur(40px) saturate(1.05) brightness(1.08)}
.curva__fondo i.is-on{opacity:.42}
.curva__fondo::after{background:radial-gradient(120% 80% at 50% 50%,transparent 30%,rgba(232,229,224,.85) 100%),linear-gradient(180deg,rgba(232,229,224,.7),transparent 30%,transparent 70%,rgba(232,229,224,.75))}
.curva__franja{background-color:var(--fondo-2)}
.curva__nombre span{color:var(--petroleo)}
.curva__cuenta span{color:var(--tinta)}
.curva__insta{color:var(--tinta);background:#fffdf9;box-shadow:inset 0 0 0 1px var(--linea),0 12px 26px -16px rgba(60,48,36,.5)}
.curva__insta:hover{background:#fff}
.curva__insta small{color:var(--gris)}
/* el visor de las fotos de Obras y de Quiénes somos: claro */
.lupa{background:rgba(246,241,233,.97)}
.lupa img{box-shadow:0 30px 80px -30px rgba(60,48,36,.55)}
.lupa p{color:var(--tinta)}
.lupa__cerrar{background:rgba(46,43,40,.08);color:var(--tinta)}

/* Dónde trabajamos */
.zona__pueblos li.es-base{color:#fff}

/* Preguntas (arena): sin la foto oscura de plumas; las plumas que caen,
   en turquesa suave; las preguntas en tarjetas claras */
.preguntas,.con-fondos .preguntas{background:radial-gradient(46% 42% at 12% 12%,rgba(1,200,220,.16),transparent 70%),radial-gradient(40% 40% at 95% 85%,rgba(224,208,192,.7),transparent 70%),var(--arena)}
.preguntas .h2{color:var(--tinta)}
.preguntas .h2 em{color:var(--petroleo)}
.preguntas .volanta{color:var(--petroleo)}
.preguntas .preguntas__foto{box-shadow:0 30px 60px -36px rgba(60,48,36,.55)}
.preguntas__foto figcaption{background:rgba(255,253,249,.9);color:var(--tinta)}
.preguntas__emblema{fill:var(--logo);filter:drop-shadow(0 0 8px rgba(1,200,220,.35))}
.emblema__aureola{fill:var(--cian)}
.preguntas__plumas i{color:#7fd6df}
.preguntas__plumas svg{filter:none}
.preguntas .faq{color:var(--tinta);background:#fffdf9;box-shadow:inset 0 0 0 1px rgba(46,43,40,.08),0 20px 40px -30px rgba(60,48,36,.5)}
.preguntas .faq::before{background:linear-gradient(90deg,transparent,var(--cian),transparent)}
.preguntas .faq__n{color:var(--petroleo);box-shadow:inset -1px 0 0 rgba(46,43,40,.12)}
.preguntas .faq__q{color:var(--tinta)}
.preguntas .faq__mas{box-shadow:inset 0 0 0 1.5px rgba(0,107,121,.45)}
.preguntas .faq__mas::before,.preguntas .faq__mas::after{background:var(--petroleo)}
.preguntas .faq summary:hover .faq__mas{box-shadow:inset 0 0 0 1.5px var(--petroleo),0 0 14px rgba(1,200,220,.35)}
.preguntas .faq[open]{background:radial-gradient(120% 160% at 0 0,rgba(1,200,220,.12),transparent 55%),#fffdf9;box-shadow:inset 0 0 0 1px rgba(0,107,121,.25),0 26px 50px -34px rgba(0,107,121,.45)}
.preguntas .faq[open] .faq__n{color:var(--petroleo)}
.preguntas .faq[open] .faq__mas{box-shadow:inset 0 0 0 1.5px var(--petroleo),0 0 0 5px rgba(1,200,220,.12)}
.preguntas .faq[open] .faq__mas::before,.preguntas .faq[open] .faq__mas::after{background:var(--petroleo)}
.preguntas .faq__r p{color:var(--gris)}

/* La camioneta: como la portada, niebla clara del lado del texto y letra
   tinta; arriba sale del arena de Preguntas y abajo se funde en el gris
   suave del Showroom */
.banda--camioneta{background:var(--arena);color:var(--tinta)}
.banda--camioneta::after{background:
  linear-gradient(180deg,#ece2d4 0,rgba(236,226,212,.6) clamp(36px,3.6vw,64px),rgba(236,226,212,0) clamp(100px,11vw,170px)),
  linear-gradient(0deg,#e8e5e0 0,rgba(232,229,224,.6) clamp(28px,3vw,50px),rgba(232,229,224,0) clamp(84px,9vw,140px)),
  linear-gradient(90deg,rgba(246,241,233,.92) 0%,rgba(246,241,233,.78) 24%,rgba(246,241,233,.36) 38%,rgba(246,241,233,0) 50%)}
.banda--camioneta .volanta{color:var(--petroleo)}
.banda--camioneta .h2{color:var(--tinta);text-shadow:0 1px 22px rgba(255,253,249,.7)}
.banda--camioneta .h2 em{color:var(--petroleo)}
@media (max-aspect-ratio:1/1){
  .banda--camioneta::after{background:
    linear-gradient(180deg,#ece2d4 0%,rgba(236,226,212,.9) 13%,rgba(246,241,233,.62) 27%,rgba(246,241,233,0) 43%),
    linear-gradient(0deg,#e8e5e0 0%,rgba(232,229,224,.84) 10%,rgba(232,229,224,0) 27%)}
}

/* Showroom y contacto (gris suave): el showroom desenfocado bajo un velo
   claro; la ficha, los datos y el formulario en tarjetas claras */
.contacto{background:var(--fondo);color:var(--tinta)}
.contacto .volanta{color:var(--petroleo)}
.contacto__fondo{background:radial-gradient(60% 70% at 78% 40%,rgba(1,200,220,.16),transparent 65%),radial-gradient(50% 60% at 8% 90%,rgba(224,208,192,.7),transparent 70%),var(--fondo)}
.con-fondos .contacto__fondo{background:
  radial-gradient(60% 70% at 78% 40%,rgba(1,200,220,.16),transparent 65%),radial-gradient(50% 60% at 8% 90%,rgba(224,208,192,.6),transparent 70%),
  linear-gradient(180deg,rgba(232,229,224,.9),rgba(232,229,224,.84) 50%,rgba(232,229,224,.93)),
  url(assets/img/fondo-coti.webp) 50% 50%/cover no-repeat,var(--fondo)}
.contacto__alas{fill:rgba(46,43,40,.05)}
.contacto .ficha{background:#fffdf9;box-shadow:inset 0 0 0 1px rgba(46,43,40,.07),0 30px 60px -44px rgba(60,48,36,.55)}
.contacto .ficha__datos li svg{stroke:var(--petroleo)}
.contacto .ficha__datos li svg use{fill:var(--petroleo)}
.contacto .ficha__datos a{color:var(--petroleo);box-shadow:inset 0 0 0 1px rgba(0,107,121,.35)}
.contacto .ficha__datos a:hover{background:rgba(1,200,220,.12)}
.redes{border-top-color:var(--linea)}
.redes a{color:var(--tinta);background:var(--aluminio);box-shadow:inset 0 0 0 1px var(--linea)}
.redes svg{color:var(--tinta)}
.consulta-plegable{background:#fffdf9;box-shadow:inset 0 0 0 1px rgba(46,43,40,.08)}
.consulta-plegable summary i{box-shadow:inset 0 0 0 1px rgba(46,43,40,.3)}
.consulta-plegable summary i::before,.consulta-plegable summary i::after{background:var(--tinta)}
.consulta{background:transparent;box-shadow:none}
.consulta .campo--txt input,.consulta textarea{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1px rgba(46,43,40,.16)}
.contacto .mapa-g{box-shadow:0 0 0 1px rgba(46,43,40,.08),0 50px 90px -46px rgba(60,48,36,.6)}
.contacto__local{background:var(--fondo-2);box-shadow:0 0 0 1px rgba(46,43,40,.08),0 40px 70px -44px rgba(60,48,36,.6)}
.mapa-g__btn{background:var(--cian);color:var(--tinta)}

/* El pie: el beige de su pared, el logo en gris con la luz turquesa */
.pie{background:var(--beige);border-top-color:rgba(46,43,40,.1);color:var(--tinta)}
.pie__brillo{background:radial-gradient(closest-side,rgba(255,253,249,.55),rgba(255,253,249,0))}
.pie__logo{color:var(--logo)}
.pie__svg,.pie__reflejo{fill:var(--logo)}
.pie__svg{filter:drop-shadow(0 0 8px rgba(1,200,220,.3))}
.pie__aureola{fill:var(--cian)}
.pie__halo{background:radial-gradient(closest-side,rgba(1,200,220,.26),rgba(1,200,220,.08) 55%,rgba(1,200,220,0))}
.pie__reflejo{opacity:.1}
.pie__lema{color:var(--gris)}
.pie__redes a{color:var(--tinta);background:rgba(255,253,249,.6);box-shadow:inset 0 0 0 1px rgba(46,43,40,.14)}
.pie__redes a:hover,.pie__redes a:focus-visible{color:var(--tinta)}
.pie .marcas{border-bottom-color:rgba(46,43,40,.12)}
.pie__datos,.pie__hecho{color:#4e4841}
.pie a{color:inherit}
/* Los videos del medio (compu): en vez de la franja grafito, una sombra
   cálida SÓLO detrás del texto (Jope, 19/10: «velo gris cálido sólo detrás
   del texto»); los títulos siguen en blanco con su sombra quieta. */
@media not all and (max-width:760px) and (orientation:portrait){
  .frio__velo{background:radial-gradient(ellipse 62% 78% at 22% 52%,rgba(42,35,28,.74) 0%,rgba(42,35,28,.5) 42%,rgba(42,35,28,0) 76%),linear-gradient(0deg,rgba(42,35,28,.3),rgba(42,35,28,0) 24%)}
  .frio--casa .frio__velo,.frio--arbol .frio__velo{background:radial-gradient(ellipse 62% 70% at 22% 80%,rgba(42,35,28,.74) 0%,rgba(42,35,28,.48) 42%,rgba(42,35,28,0) 76%)}
}
/* En el teléfono parado el texto de los videos va arriba y abajo de la caja,
   sobre el fondo claro: tinta. */
@media (max-width:760px) and (orientation:portrait){
  .frio{background:var(--aluminio);color:var(--tinta)}
  .frio__escena{background:var(--aluminio)}
  .frio .h1{color:var(--tinta)}
  .frio .h1 em{color:var(--petroleo)}
  .frio .volanta{color:var(--petroleo)}
  .paso-frio .bajada{color:var(--gris)}
}
.barra__chip{color:#fff}   /* sobre el turquesa hondo de la barra de REHAU: blanco (5,9:1) */
@media not all and (max-width:760px) and (orientation:portrait){
  .frio .volanta{color:#e6fbfd;text-shadow:0 1px 12px rgba(30,24,18,.7)}
  .frio .volanta::before{opacity:.9}
}

/* ═══ 19/10 (2) — UN SOLO TURQUESA (Jope: «en varios títulos o subtítulos
   usaste otro color en vez del mismo turquesa… que sea siempre el mismo, el
   de la imagen gamadecolores, evitando el azul del cielo»). --petroleo ya
   vale el turquesa de la fachada (#01C8DC; medido otra vez: #00CADE al sol).
   El turquesa da 1,6:1 contra el hueso, así que:
   · títulos: la parte en turquesa va gruesa (800), no en 300;
   · volantas y etiquetas: píldora turquesa con la letra tinta (7,4:1);
   · letra chica y enlaces: tinta, con el turquesa de subrayado o de fondo;
   · donde había letra blanca sobre petróleo, va tinta sobre turquesa. ═══ */
.h1 em,.h2 em,.pvc-tipos__cab h3 em,.pr-titulo em,.porton-cartel h3 em{font-weight:800;font-stretch:inherit;color:var(--cian)}
.porton-cartel h3 em{color:inherit}

/* volantas: píldora turquesa (las de los videos también) */
.volanta{width:fit-content;max-width:100%;padding:6px 13px 5px;border-radius:14px;background:var(--cian);color:var(--tinta)!important;text-shadow:none!important;font-weight:500;
  box-shadow:0 8px 20px -12px rgba(0,150,165,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.volanta::before{width:6px;height:6px;border-radius:50%;background:var(--tinta);opacity:.8}
.oblak__volanta{padding-left:8px}
.oblak__volanta::before{display:none}
.oblak__logo{height:22px;padding:3px 8px;border-radius:999px;background:#fffdf9;box-sizing:content-box}

/* el menú: cada palabra sombreada de turquesa; la sección donde estás, llena */
.cab__nav{gap:8px}
.cab__nav a{opacity:1;padding:7px 13px;border-radius:999px;color:var(--tinta);font-weight:600;background:rgba(1,200,220,.16);
  box-shadow:inset 0 0 0 1px rgba(1,200,220,.5),0 4px 14px -6px rgba(1,200,220,.55);transition:background .3s,box-shadow .3s,transform .3s var(--curva)}
.cab__nav a::after{display:none}
.cab__nav a:hover{background:rgba(1,200,220,.34);transform:translateY(-1px)}
.cab__nav a.is-activa{background:var(--cian);box-shadow:0 6px 16px -6px rgba(0,150,165,.9),inset 0 1px 0 rgba(255,255,255,.4)}
.cab__nav a{white-space:nowrap;flex:none}
/* con píldoras ocupan más: se acortan antes (medido de 1001 a 1440: ninguna
   se parte en dos renglones ni pisa el logo o «Presupuesto») */
@media (max-width:1340px) and (min-width:1001px){ .cab__nav{gap:6px;font-size:14px} .cab__nav a{padding:6px 10px} .cab__nav a[href="#preguntas"] .cab__mas{display:none} }
@media (max-width:1100px) and (min-width:1001px){ .cab__nav{gap:4px;font-size:13.5px} .cab__nav a{padding:6px 9px} .cab__nav a[href="#por-que"] .cab__mas{display:none} }
@media (max-width:1000px){ .cab__nav{gap:6px} .cab__nav a{padding:4px 10px 5px} }
@media (max-width:540px){ .cab__nav{gap:4px} .cab__nav a{padding:3px 7px 4px} }

/* etiquetas chicas: la misma píldora, más chica */
.rpaso__n,.coti__etq,.ob__linea,.pvc-tipos__etq,.razon__n{display:inline-flex;width:fit-content;padding:4px 10px 3px;border-radius:999px;background:var(--cian);color:var(--tinta)!important;font-weight:500}

/* letra chica que iba en turquesa: tinta */
.razon__dato--logo small,.visor__txt span,.curva__nombre span,.pr-nota--real,.barra--rehau .barra__num,.coti__ficha b{color:var(--tinta)}
.horario tr.es-hoy th,.horario tr.es-hoy td{color:var(--tinta);font-weight:700;box-shadow:inset 0 -3px 0 rgba(1,200,220,.55)}
.mapa .km,.mapa .rosa .rosa__n{fill:var(--gris)}

/* enlaces: tinta con subrayado turquesa */
.ob__ficha,.pvc-tipos__pie a,.empresa__txt a,.coti__ayuda{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--cian);text-decoration-thickness:3px;text-underline-offset:4px}
.pago__aca em{color:var(--tinta);background:linear-gradient(transparent 58%,rgba(1,200,220,.55) 58%)}
.contacto .ficha__datos a{color:var(--tinta);background:rgba(1,200,220,.14);box-shadow:inset 0 0 0 1px rgba(1,200,220,.6)}
.contacto .ficha__datos a:hover{background:var(--cian)}

/* letra blanca sobre turquesa → tinta */
.obras-filtros button[aria-pressed="true"],.coti__paso legend span,.opciones input:checked+span,.opciones--tipo input:checked+span,
.zona__pueblos li.es-base,.zona .zona__pueblos li.es-base,.faq[open] .faq__n,.mapa-g__btn,.porton-cartel__pedido .seg button[aria-pressed="true"]{color:var(--tinta)}
.opciones--tipo input:checked+span{background:linear-gradient(160deg,#3fdcec,var(--cian))}
.opciones--tipo input:checked+span svg{color:var(--tinta);filter:none}
.coti__paso legend span{background:var(--cian)}
.opciones span small{background:rgba(1,200,220,.22);color:var(--tinta)}
.opciones--check input:checked+span{background:rgba(1,200,220,.18);color:var(--tinta)}
.paso-num button{color:var(--tinta)}
.preguntas .faq__n,.faq__n{color:var(--tinta);background:rgba(1,200,220,.2)}
.preguntas .faq[open] .faq__n{color:var(--tinta);background:var(--cian)}
.btn--wsp,.porton-cartel__btn{color:var(--tinta)}
.barra__chip,.gas__etq i{color:var(--tinta)}
.gas__etq--inv i{background:var(--beige)}
.opciones input:checked+span small{background:rgba(255,253,249,.6);color:var(--tinta)}
.pedido-cotas{color:var(--tinta)}
.pedido-cotas b{background:var(--cian)}
.zona__pueblos li.es-base small{color:var(--tinta);opacity:.85}
.pr-lado em{color:var(--tinta);font-weight:500;box-shadow:inset 0 -.38em 0 rgba(1,200,220,.4)}

/* En simple (19/10 (2), Jope: «los textos de los tres pasos están netamente
   en negro, ponele algo de su turquesa; que quede equilibrada»): la segunda
   mitad de cada título en turquesa, la etiqueta en píldora, un filo turquesa
   a la izquierda y las luces de fondo, las tres turquesa. El paso 3 no tiene
   párrafo (Pablo lo sacó): los pasos van centrados en su lugar, así no queda
   un hueco abajo del título. */
.rpaso{--led:var(--cian)}
.rpaso h3 em{font-style:normal;color:var(--cian)}
.js .rpaso{align-self:center;padding:6px 0 8px 24px;border-left:3px solid var(--cian);box-shadow:-14px 0 24px -22px rgba(1,200,220,.9)}
.rpaso p{color:var(--gris)}
.reloj__fondo i:nth-child(1){--c:rgba(1,200,220,.2)}
.reloj__fondo i:nth-child(2){--c:rgba(1,200,220,.15)}
.reloj__fondo i:nth-child(3){--c:rgba(1,200,220,.24)}

/* ═══ 19/10 (2) — EL PRESUPUESTO CON VARIOS ARTÍCULOS (main.js §10) ═══
   El material en el renglón del paso 1; «Agregar otra abertura» y la lista
   «En tu pedido» en la ficha, arriba del WhatsApp. ⚠ `.coti__paso legend
   span` pinta el círculo del número: el selector del material lo pisa con
   una clase más. */
.coti__paso legend .coti__material{display:inline-flex;width:auto;height:auto;margin-left:auto;padding:3px;gap:2px;border-radius:999px;background:rgba(46,43,40,.07);box-shadow:inset 0 0 0 1px var(--linea);
  font-family:var(--f);font-size:12.5px;font-weight:600;font-stretch:100%;color:var(--tinta);flex:none}
.coti__material label{position:relative;cursor:pointer}
.coti__material input{position:absolute;opacity:0;pointer-events:none}
.coti__paso legend .coti__material span{display:block;width:auto;height:auto;padding:5px 11px;border-radius:999px;background:none;box-shadow:none;color:var(--tinta);font:inherit;transition:background .25s,box-shadow .25s}
.coti__paso legend .coti__material input:checked+span{background:var(--cian);box-shadow:0 4px 12px -6px rgba(0,150,165,.9)}
.coti__paso legend .coti__material input:focus-visible+span{outline:2px solid var(--cian);outline-offset:2px}
.coti__material input:disabled+span{opacity:.4;cursor:default}
.opciones--color{transition:opacity .3s}
.opciones--color.is-apagado{opacity:.35;pointer-events:none}

.coti__lista{margin:14px 0 0;padding:12px 12px 6px;border-radius:16px;background:rgba(1,200,220,.1);box-shadow:inset 0 0 0 1px rgba(1,200,220,.4)}
.coti__lista[hidden]{display:none}
.coti__lista-tit{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.coti__items{list-style:none;margin:0;padding:0;counter-reset:item}
.coti__items li{counter-increment:item;display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(46,43,40,.1)}
.coti__items li:first-child{border-top:0}
.coti__items li::before{content:counter(item);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cian);font-family:var(--mono);font-size:11px;font-weight:500;color:var(--tinta)}
.coti__items li>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.coti__items b{font-size:14px;line-height:1.2;color:var(--tinta)}
.coti__items small{font-family:var(--mono);font-size:11px;color:var(--gris)}
.coti__quitar{flex:none;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:rgba(46,43,40,.07);color:var(--tinta);font-size:18px;line-height:1;cursor:pointer;transition:background .25s}
.coti__quitar:hover,.coti__quitar:focus-visible{background:rgba(46,43,40,.16)}
.coti__sumar{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:12px 0 10px;padding:0 14px;border:1.5px dashed rgba(1,200,220,.9);border-radius:999px;background:rgba(1,200,220,.08);
  color:var(--tinta);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--curva)}
.coti__sumar>span:first-child{font-size:19px;line-height:1;font-weight:500}
.coti__sumar:hover{background:rgba(1,200,220,.2);transform:translateY(-1px)}
.coti__sumar.is-ok{background:var(--cian);border-style:solid}
.coti__vista .plano,.coti__vista .resumen{transition:opacity .35s}
.coti__vista.is-borrador .plano,.coti__vista.is-borrador .resumen{opacity:.45}
/* con lista, el detalle de la de arriba se va (título y medida ya están en
   la ficha) y la lista se desliza adentro: el WhatsApp queda a la vista */
.coti__vista.con-lista .resumen{display:none}
.coti__items{max-height:clamp(96px,calc(100svh - 620px),214px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media (max-width:760px){
  .coti__paso legend .coti__material{font-size:11px;padding:2px}
  .coti__paso legend .coti__material span{padding:3px 8px}
  .coti__lista{grid-area:lista;margin:2px 0 0;padding:6px 10px 2px;border-radius:12px}
  .coti__lista-tit{display:none}
  .coti__items li{padding:5px 0;gap:8px}
  .coti__items li::before{width:18px;height:18px;font-size:10px}
  .coti__items b{font-size:12.5px}
  .coti__items small{font-size:10px}
  .coti__quitar{width:26px;height:26px;font-size:16px}
  /* «Agregar otra» va en el renglón de la etiqueta, a la derecha: no suma alto */
  .coti__vista{grid-template-areas:"foto ficha" "foto btn" "lista lista"}
  .coti__ficha{padding-top:1px}
  .coti__sumar{grid-area:ficha;justify-self:end;align-self:start;width:auto;min-height:22px;margin:0;padding:0 8px;gap:4px;font-size:11px;border-width:1px;position:relative;z-index:1}
  .coti__sumar>span:first-child{font-size:13px}
  .coti__sumar-mas{display:none}
  .coti__items{max-height:76px}
}
@media (max-width:380px){ .coti__paso legend .coti__material span{padding:3px 6px} }

/* ═══ 19/10 (2) — OBLAK DECO EN EL CATÁLOGO (main.js §26) ═══ */
.ob__img.es-ancha{top:50%;bottom:auto;width:88%;height:auto;max-width:88%;transform:translate(-50%,-50%) translateY(10px) scale(.985)}
.ob__img.es-ancha.is-on{transform:translate(-50%,-50%)}
.ob__sumar{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:1.5px dashed rgba(1,200,220,.9);border-radius:999px;background:rgba(1,200,220,.08);
  color:var(--tinta);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--curva)}
.ob__sumar>span:first-child{font-size:19px;line-height:1;font-weight:500}
.ob__sumar:hover{background:rgba(1,200,220,.2);transform:translateY(-1px)}
.ob__sumar.is-ok{background:var(--cian);border-style:solid}
.ob__ver-pedido{font-size:14.5px;font-weight:600;color:var(--tinta);text-decoration:underline;text-decoration-color:var(--cian);text-decoration-thickness:3px;text-underline-offset:4px}
.ob__ver-pedido[hidden]{display:none}
@media (max-width:760px){
  .ob__tipos button{padding:0 6px}
  .ob__tipos button small{display:none}
  .ob__sumar{min-height:44px;padding:0 12px;font-size:13.5px;gap:6px}
  .ob__ver-pedido{font-size:13px}
}

/* ═══ 20/10 · ACCESOS, OBLAK PEGADO, MENÚ NUEVO, BLINDEX Y REIKI ═══ */

/* Accesos de «Qué hacemos»: una fila de píldoras debajo del título, cada
   una a lo suyo (main.js §22 ter, §26, §27). Blancas con borde, para no
   confundirse con el menú (que es turquesa). */
.accesos{display:flex;flex-wrap:wrap;gap:8px;margin:calc(clamp(40px,5vw,64px) * -.5) 0 clamp(26px,3.4vw,40px)}
.accesos a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;border-radius:999px;background:#fffdf9;color:var(--tinta);
  font-size:14.5px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--linea),0 8px 18px -14px rgba(60,48,36,.55);transition:background-color .25s,transform .25s var(--curva)}
.accesos a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cian);box-shadow:0 0 0 3px rgba(1,200,220,.22)}
.accesos a:hover{background:rgba(1,200,220,.2);transform:translateY(-1px)}
.accesos a:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
@media (max-width:640px){
  .accesos{gap:6px;margin-top:-14px}
  .accesos a{padding:7px 12px 7px 10px;font-size:13px;gap:7px}
  .accesos a::before{width:6px;height:6px}
}

/* La tarjeta que trae un acceso se marca un momento: un aro turquesa que se
   prende y se apaga (sólo opacity). */
.obra::before,.porton-cartel::before{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 3px var(--cian),inset 0 0 0 6px rgba(1,200,220,.28)}
.obra.is-senalada::before,.porton-cartel.is-senalada::before{animation:senalada 2.4s ease-out both}
@keyframes senalada{0%{opacity:0}12%{opacity:1}30%{opacity:.35}46%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .obra.is-senalada::before,.porton-cartel.is-senalada::before{animation:none;opacity:1} }

/* Pie: Blindex con su logo oficial (el cuadrado rojo) y Reiki en texto. */
.marcas .marca-logo--blindex{height:30px}
.marcas li.marcas__txt{font-size:14px;letter-spacing:.16em}

/* Menú: «Sobre nosotros» se achica a «Nosotros» donde no entra. */
.cab__menos{display:none}
@media (max-width:540px){ .cab__nav a[href="#taller"] .cab__mas{display:none} .cab__nav a[href="#taller"] .cab__menos{display:inline} }

/* ═══ 21/10 · MENÚ SIN «SHOWROOM», «SOLICITAR PRESUPUESTO» CON LUZ, QUÉ HACEMOS REORDENADO ═══ */

/* «Solicitar presupuesto»: una luz turquesa detrás del botón que sube y
   baja cada tanto, y el brillo del botón lo cruza cuando la luz está arriba.
   La luz es una capa desenfocada QUIETA (el blur no se anima): se mueven
   sólo su opacity y su scale. El envoltorio existe porque .btn recorta
   (overflow:hidden) y la luz tiene que salir del borde. */
.cab__pide{position:relative;display:inline-flex;flex:none;isolation:isolate}
.cab__pide::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:999px;pointer-events:none;background:var(--cian);
  filter:blur(11px);opacity:.25;transform:scale(.92);animation:pide-luz 4.4s ease-in-out infinite}
@keyframes pide-luz{0%,58%,100%{opacity:.25;transform:scale(.92)}24%{opacity:1;transform:scale(1.12)}}
.btn--pide{font-weight:750;box-shadow:0 10px 26px -12px rgba(0,150,165,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--pide::after{animation:pide-brillo 4.4s ease-in-out infinite}
@keyframes pide-brillo{0%,10%{transform:translateX(-110%)}34%,100%{transform:translateX(110%)}}
@media (prefers-reduced-motion:reduce){
  .cab__pide::before{animation:none;opacity:.6;transform:none}
  .btn--pide::after{animation:none}
}
@media (max-width:1000px){
  .cab__pide{grid-area:btn;justify-self:end}
  .cab__pide::before{filter:blur(7px);inset:2px 0}
}

/* Qué hacemos: la cinta del showroom y los logos van pegados a las
   tarjetas; lo que viene después (los dibujos de PVC y el cartel de
   portones) se separa con más aire de la línea de texto. */
.obras__pie ~ .pvc-tipos,.obras__pie ~ .porton-cartel{margin-top:clamp(30px,4.2vw,52px)}
.pvc-tipos:not([hidden]) ~ .porton-cartel{margin-top:var(--gap,16px)}

/* Los logos: ahora cinco (Blindex con Reiki). En la compu, una fila; en
   el teléfono, tres arriba y dos centradas abajo. */
.marcas-fila{grid-template-columns:repeat(5,minmax(0,1fr))}
.marcas-fila .marca-logo--blindex{height:34px}
@media (max-width:640px){
  .marcas-fila{grid-template-columns:repeat(6,minmax(0,1fr))}
  .marcas-fila li{grid-column:span 2}
  .marcas-fila li:nth-child(4){grid-column:2/span 2}
  .marcas-fila .marca-logo--blindex{height:22px}
}

/* La barra con «Dónde trabajamos» y «Solicitar presupuesto» (medido 21/10):
   en un renglón entera recién desde 1600 px. Entre 1241 y 1599, más
   apretada; abajo de 1440 «Preguntas» y abajo de 1341 también «PVC» y
   «Nosotros». Entre 1001 y 1240, dos renglones como en el teléfono:
   logo y botón arriba, las secciones abajo (mide 70 px, igual que uno). */
@media (max-width:1599px) and (min-width:1241px){
  .cab{gap:16px}
  .cab__marca .cab__logo{height:34px}
  .cab .btn--chico{font-size:14px;padding:0 16px}
  .cab__nav{gap:6px;font-size:14px}
  .cab__nav a{padding:6px 10px}
}
@media (max-width:1439px) and (min-width:1241px){ .cab__nav a[href="#preguntas"] .cab__mas{display:none} }
@media (max-width:1340px) and (min-width:1241px){
  .cab__nav a[href="#por-que"] .cab__mas,.cab__nav a[href="#taller"] .cab__mas{display:none}
  .cab__nav a[href="#taller"] .cab__menos{display:inline}
}
@media (max-width:1240px) and (min-width:1001px){
  :root{--cab:70px}
  .cab{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 30px;grid-template-areas:"marca btn" "nav nav";align-items:center;gap:0 12px;height:var(--cab)}
  .cab__marca{grid-area:marca;justify-self:start}
  .cab__marca .cab__logo{height:28px}
  .cab__pide{grid-area:btn;justify-self:end}
  .cab__pide::before{filter:blur(7px);inset:2px 0}
  .cab .btn--chico{min-height:32px;padding:0 15px;font-size:13.5px}
  .cab__nav{grid-area:nav;position:relative;display:flex;justify-content:space-between;align-items:center;align-self:stretch;gap:6px;font-size:13.5px;white-space:nowrap}
  .cab__nav a{padding:4px 12px 5px}
  .cab__nav a[href="#por-que"] .cab__mas{display:inline}
}

/* ═══ 21/10 (2) · LO QUE CORRIGIÓ PABLO: OSCILOBATIENTE, PORTONES, OBLAK DECO ═══ */

/* La oscilobatiente con sus DOS aperturas, por turno (7 s): primero se
   inclina arriba (bisagra abajo), después abre como una puerta (bisagra a
   la izquierda). Dos grupos anidados, cada uno con su origen; las líneas
   del símbolo se encienden con su movimiento (sólo opacity). */
.d-sim{fill:none;stroke:var(--petroleo);stroke-width:1.2;stroke-dasharray:3.5 3;stroke-linejoin:round;opacity:.55}
.d-mueve--bascula{transform-origin:50% 100%}
.d-mueve--gira{transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .pvc-tipos.is-abierto .d-mueve--bascula{animation:dBascula 7s ease-in-out infinite}
  .pvc-tipos.is-abierto .d-mueve--gira{animation:dGira 7s ease-in-out infinite}
  .pvc-tipos.is-abierto .d-sim--bascula{animation:dSimB 7s ease-in-out infinite}
  .pvc-tipos.is-abierto .d-sim--gira{animation:dSimG 7s ease-in-out infinite}
  .pvc-tipos.is-abierto .pvc-tipo:nth-child(2) .d-sim{animation-delay:-1s}
}
@keyframes dBascula{0%,6%{transform:none}20%,34%{transform:scaleY(.86)}46%,100%{transform:none}}
@keyframes dGira{0%,52%{transform:none}66%,80%{transform:scaleX(.7)}92%,100%{transform:none}}
@keyframes dSimB{0%,4%{opacity:.35}14%,38%{opacity:1}48%,100%{opacity:.35}}
@keyframes dSimG{0%,50%{opacity:.35}60%,84%{opacity:1}94%,100%{opacity:.35}}

/* Portones: cuatro formas de abrir (Pablo, 21/10): de a dos en dos renglones. */
.porton-cartel__pedido .seg--cuatro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;border-radius:22px}

/* Oblak Deco: el texto de la línea y las medidas de la ficha oficial
   (Pablo, 21/10). Las medidas en celdas chicas; el dibujo de la ficha abajo. */
.ob__intro{margin:-4px 0 14px;max-width:40em;font-size:15px;line-height:1.5;color:var(--tinta)}
.ob__specs{margin-top:16px;max-width:36em}
.ob__specs dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.ob__specs dl div{padding:8px 10px 7px;border-radius:12px;background:#fffdf9;box-shadow:inset 0 0 0 1px var(--linea)}
.ob__specs dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.ob__specs dd{margin:2px 0 0;font-weight:750;font-size:15px;color:var(--tinta)}
.ob__corte{display:block;width:auto;max-width:100%;height:auto;max-height:96px;margin-top:12px;border-radius:10px;background:#fff;padding:6px;box-shadow:inset 0 0 0 1px var(--linea)}
@media (max-width:640px){
  .ob__intro{font-size:13.5px;margin-bottom:10px}
  .ob__specs dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .ob__specs dl div{padding:6px 8px 5px;border-radius:10px}
  .ob__specs dt{font-size:8.5px;letter-spacing:.06em}
  .ob__specs dd{font-size:13px}
  .ob__corte{max-height:80px}
  .ob__corte.es-tira{display:none}   /* el corte de los listones (8:1): en 200 px es una raya */
}
.ob__img.es-ancha{border-radius:12px}
.ob__corte:not(.es-tira){max-height:150px}
@media (max-width:640px){ .ob__corte:not(.es-tira){max-height:110px} }

/* ═══ 21/10 (3) · FORMULARIO: TRAMPA PARA ROBOTS Y PRIVACIDAD ═══ */
/* La trampa: fuera de la pantalla (no display:none: algunos robots se
   saltean los campos escondidos así). */
.consulta__trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.consulta{position:relative}
.consulta__privado{margin:-2px 0 0;font-size:12.5px;line-height:1.4;color:var(--gris)}

/* ═══ 21/10 (4) · LA RONDA 3 DE PABLO ═══
   Portada: sin el paso del medio, la pista se achica (era 420/360/280vh). */
.armado{height:330vh}
@media (max-width:760px) and (orientation:portrait){ .armado{height:220vh} }

/* La lluvia ya no se recorre con el scroll: un video que corre solo
   (main.js §5 bis). Una banda 16:9 a lo ancho, más baja que la pantalla en
   la compu; el cuadro 0 de fondo hasta que arranca. */
/* 22/10, Pablo: la lluvia abre con «¿Por qué elegir aberturas de PVC REHAU?».
   El video y su foto van en .lluvia-bucle__caja; el título encima (compu) o
   arriba de la caja (teléfono). */
.lluvia-bucle{position:relative;background:#1d2224}
.lluvia-bucle__caja{position:relative;height:min(56.25vw,86svh);overflow:hidden;background:#1d2224 url(assets/img/lluvia.webp) center/cover no-repeat}
.lluvia-bucle__velo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 56% 74% at 22% 50%,rgba(42,35,28,.74) 0%,rgba(42,35,28,.48) 44%,rgba(42,35,28,0) 78%)}
.lluvia-bucle__txt{position:absolute;z-index:2;inset:0;max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;pointer-events:none}
.lluvia-bucle__txt .h2{max-width:10.5em;color:#fff;font-size:clamp(34px,4.6vw,66px);text-shadow:0 2px 28px rgba(0,0,0,.45)}
.lluvia-bucle__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.lluvia-bucle__video.is-corre,.lluvia-bucle__video.a-mano{opacity:1}
.lluvia-bucle__video::-webkit-media-controls,.lluvia-bucle__video::-webkit-media-controls-start-playback-button{display:none!important}
@media (max-width:760px){
  .lluvia-bucle{background:var(--aluminio)}
  .lluvia-bucle__caja{height:56.25vw;background-image:url(assets/img/lluvia-m.webp)}
  .lluvia-bucle__velo{display:none}
  .lluvia-bucle__txt{position:static;display:block;padding:46px var(--gutter) 22px}
  .lluvia-bucle__txt .h2{max-width:none;color:var(--tinta);font-size:clamp(28px,8vw,34px);text-shadow:none}
}
.opciones--color[hidden]{display:none}

/* Tipologías REHAU: los dibujos del folleto (fondo blanco) en una tarjeta
   blanca, con los sistemas abajo. */
.pvc-tipos__lista--rehau{grid-template-columns:repeat(4,minmax(0,1fr))}
.pvc-tipos__lista--rehau[data-grupo="puertas"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.pvc-tipo--rehau{background:#fff}
.pvc-tipo--rehau img{display:block;width:100%;height:auto;aspect-ratio:600/427;object-fit:contain}
/* 23/10: las tipologías van con foto (4:3, a sangre en la tarjeta) */
.pvc-tipo--rehau img[src*="/rehau/f/"]{aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.pvc-tipo--rehau b small{display:block;font-weight:500;font-size:13px;color:var(--gris);margin-top:2px}
.pvc-tipo--rehau span{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;line-height:1.45}
/* Fichas técnicas: el corte del perfil (foto oficial) y los datos. */
.rehau-fichas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rehau-fichas[hidden]{display:none}
.rehau-ficha{display:grid;grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr);gap:16px;align-items:start;padding:14px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea)}
.rehau-ficha img{display:block;width:100%;height:auto;border-radius:12px;background:#eee}
.rehau-ficha__txt>b{display:block;font-weight:800;font-size:18px;line-height:1.15}
.rehau-ficha__txt>span{display:block;margin-top:2px;font-size:13.5px;color:var(--gris)}
.rehau-ficha dl{margin:10px 0 0;display:grid;gap:0}
.rehau-ficha dl div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--linea)}
.rehau-ficha dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);padding-top:2px}
.rehau-ficha dd{margin:0;font-size:13.5px;line-height:1.4;font-weight:600;color:var(--tinta)}
.pvc-tipos__pie .pvc-tipos__folleto{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--cian);color:var(--tinta);text-decoration:none}
@media (max-width:1000px){
  .pvc-tipos__lista--rehau,.pvc-tipos__lista--rehau[data-grupo="puertas"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rehau-fichas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pvc-tipos__lista--rehau,.pvc-tipos__lista--rehau[data-grupo="puertas"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pvc-tipo--rehau b small{font-size:11.5px}
  .pvc-tipo--rehau span{font-size:10px}
  .pvc-tipos__pestanas button{padding:0 8px;font-size:13.5px}
  .rehau-ficha{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:10px}
  .rehau-ficha__txt>b{font-size:16px}
  .rehau-ficha dl div{grid-template-columns:minmax(0,1fr);gap:1px;padding:5px 0}
  .rehau-ficha dd{font-size:12.5px}
}
/* Oblak: la ficha técnica de la línea, como botón (Pablo no la veía). */
.ob__acciones a.ob__ficha{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 20px;border-radius:999px;background:#fff;color:var(--tinta);font-size:15px;font-weight:750;text-decoration:none;box-shadow:inset 0 0 0 2px var(--cian),0 8px 20px -12px rgba(0,107,121,.6)}
.ob__acciones a.ob__ficha[hidden]{display:none}
.ob__ficha svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.ob__ficha small{font-weight:500;color:var(--gris)}
@media (max-width:640px){ .ob__acciones a.ob__ficha{min-height:44px;padding:0 14px;font-size:14px} }
/* Presupuesto: las opciones del portón (21/10, del cartel que se fue). */
.coti__porton[hidden]{display:none}
.coti__porton{margin-top:14px}
.opciones--cuatro{flex-wrap:wrap}
.opciones--cuatro{border-radius:22px}
@media (max-width:760px){ .pvc-tipos__mas{display:none} }

/* ═══ 21/10 (5) · LO QUE VIO JOPE DE LA RONDA 3 ═══ */
/* Los logos de las etiquetas de «Qué hacemos»: «.obra img» (la foto de la
   tarjeta: width 100 %, cover y la escala de entrada) también agarraba al
   logo y lo recortaba (el de REHAU salía sin la parte de arriba). */
.obra .obra__marca img.marca-logo{width:auto;object-fit:contain;transform:none!important;transition:none}
.obra__marca--logos{white-space:nowrap}
/* Cerramientos: el logo de Blindex (cuadrado rojo) y «Reiki» como estaba. */
.obra__marca--logos .marca-logo--blindex{height:24px;border-radius:2px}
.obra__marca--blindex{padding-top:5px;padding-bottom:5px}
.obra__marca--blindex i{font-family:var(--mono);color:var(--tinta)}
@media (max-width:760px){
  .obra__marca--logos .marca-logo--blindex{height:18px}
  .obra__marca--blindex i{display:inline}
}
/* El cartel de portones, ahora debajo del presupuesto. */
.cotizar .porton-cartel{margin-top:clamp(28px,4vw,56px)}
/* El celular, menos pantallas (21/10 (5), Jope: «achicá algunas cosas para
   que no sean tantas pantallas»). Medido a 390 × 844: 29.925 px (35,5
   pantallas) antes. Los tramos con scroll, más cortos (los videos y los
   pasos van enteros, sólo un poco más rápido; el rollo y las obras, en
   main.js §11 y §17); fuera la foto decorativa de las preguntas; el mapa
   del contacto, apaisado. */
@media (max-width:760px) and (orientation:portrait){
  .frio{height:175vh}              /* era 210 */
}
@media (max-width:760px){
  .js .reloj__pista{height:205vh}  /* era 250 */
  .js .perfil-rehau{height:calc(100svh + 7 * 16svh)}   /* era 7 × 22 */
  .preguntas__foto{display:none}
  .contacto .mapa-g{aspect-ratio:16/11}
}
/* Oblak Deco en el teléfono: el perfil y el zócalo (apaisados) arriba, a
   todo el ancho; en la columna angosta se veían de 120 px. */
@media (max-width:760px){
  .ob__vista.es-ancha{grid-template-columns:minmax(0,1fr);grid-template-areas:"foto" "info" "modelos"}
  .ob__vista.es-ancha .ob__foto{height:min(64vw,320px)}
  .ob__vista.es-ancha .ob__img.es-ancha{width:94%;max-width:94%}
}
/* Presupuesto en la compu: el paso 4 sube y queda pegado al 2 (21/10 (6),
   Jope: «que quede armónico con el 1, 2 y 3»). Antes la grilla iba por
   filas y el 4 empezaba a la altura del 3, con un hueco debajo del 2. La
   fila del medio es 1fr: absorbe lo que le sobra al 1 (o al 4). */
@media (min-width:1101px){
  .coti__form{grid-template-areas:"p1 p2" "p1 p4" "p3 p4";grid-template-rows:min-content 1fr auto}
  .coti__form>fieldset:nth-of-type(1){grid-area:p1}
  .coti__form>fieldset:nth-of-type(2){grid-area:p2}
  .coti__form>fieldset:nth-of-type(3){grid-area:p3}
  .coti__form>fieldset:nth-of-type(4){grid-area:p4;align-self:stretch}   /* termina parejo con el 3 */
}

/* ═══ 21/10 (6) · LO QUE VIO JOPE EN EL CELULAR ═══ */
@media (max-width:760px){
  /* Por qué PVC: los tres carteles de consumo, compactos (sin el ícono) */
  .barras{gap:8px}
  .barra{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:9px 12px 10px;border-radius:14px}
  .barra__ico{display:none}
  .barra__txt{grid-column:1/-1;font-size:13px;line-height:1.25}
  .barra__riel{grid-column:1/2;height:14px}
  .barra__num{font-size:16px}
  .barra--rehau .barra__num{font-size:20px}
  .barra__chip{font-size:9.5px;padding:3px 6px;left:calc(var(--v) * 100% + 8px)}

  /* DVH: las cuatro placas, más bajas */
  .bento{gap:9px}
  .bento__foto{aspect-ratio:16/9}
  .placa{grid-template-columns:96px minmax(0,1fr);column-gap:12px;padding:10px 12px 10px 10px;border-radius:16px}
  .placa__viz{height:78px;border-radius:10px}
  .placa h3{font-size:14.5px;gap:7px;line-height:1.2}
  .placa h3::before{width:7px;height:7px}
  .placa p{font-size:12.5px;line-height:1.4;margin-top:3px}
  .placa__num b{font-size:19px}
  .placa--gas svg{width:34px;height:34px}
  .gas__etq{font-size:9px}

  /* Dónde trabajamos: más junta, como en la compu (pueblos chicos; el mapa entero, debajo) */
  .zona{padding-top:56px;padding-bottom:50px}
  .zona__grilla{gap:22px}
  .zona__grilla>div>p:not(.volanta){margin-top:12px;font-size:14.5px}
  .zona__pueblos{margin-top:16px;gap:5px}
  .zona__pueblos li{font-size:12.5px;padding:5px 9px;gap:5px}
  .zona__pueblos li small{font-size:9.5px}
  .mapa__fuente{margin-top:8px;font-size:9.5px;padding:4px 8px}

  /* Preguntas frecuentes, más compactas */
  .preguntas{padding-top:56px;padding-bottom:50px}
  .preguntas__emblema{display:none}
  .preguntas__lado .btn{margin-top:14px}
  .acordeon{gap:7px}
  .faq summary{gap:10px;padding:11px 12px}
  .faq__q{font-size:14.5px}
  .preguntas .faq__n{font-size:10.5px;padding-right:10px}
  .preguntas .faq__mas,.faq__mas{width:26px;height:26px}

  /* Oblak: la foto entera (las Tekna son más anchas y se cortaban) y la
     sección más baja, para que se vean los modelos de abajo. La info se
     desarma (display:contents) y los botones van a lo ancho abajo. */
  .ob__img{width:auto;height:auto;max-width:92%;max-height:86%}
  .ob__vista{grid-template-areas:"foto linea" "foto modelo" "foto intro" "foto colores" "foto desc" "foto specs" "acc acc" "modelos modelos";
    grid-template-rows:none;gap:0 14px}
  .ob__info{display:contents}
  .ob__linea{grid-area:linea}.ob__modelo{grid-area:modelo}.ob__intro{grid-area:intro}.ob__colores{grid-area:colores}
  .ob__desc{grid-area:desc}.ob__specs{grid-area:specs}.ob__acciones{grid-area:acc}.ob__modelos-caja{grid-area:modelos}
  .ob__foto{height:auto;min-height:0;align-self:stretch}   /* mide lo que la info de al lado (la imagen va absoluta: no empuja) */
  .ob__modelo{margin:5px 0 9px}
  .ob__desc{margin-top:9px;font-size:12.5px;line-height:1.4;-webkit-line-clamp:5}
  .ob__acciones{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
  .ob__acciones .btn{flex:1 1 auto;min-height:42px}
  .ob__acciones a.ob__ficha{min-height:42px}
  .ob__sumar{flex:1 1 100%}
  .ob__modelos-caja{margin-top:14px}
  .ob__vista.es-ancha{grid-template-columns:minmax(0,1fr);grid-template-areas:"foto" "linea" "modelo" "intro" "colores" "desc" "specs" "acc" "modelos";grid-template-rows:none}
  .ob__vista.es-ancha .ob__foto{margin-bottom:12px}
}
/* Pie: «Sitio hecho por Hoppe Studio», un poco más a la vista */
.pie__hecho{font-size:14px;color:var(--tinta)}
.pie__hecho a{font-weight:750;color:var(--tinta);text-decoration:underline;text-decoration-color:var(--cian);text-decoration-thickness:2px;text-underline-offset:4px}

/* ═══ 21/10 (7) · LA TABLET, MÁS CORTA (Jope: «achicá la versión tablet») ═══
   Medido a 768 × 1024: 44.401 px (43,4 pantallas; el celular, 31). Entre 761
   y 1100 px los tramos con scroll usaban las medidas de la compu y las
   razones iban con la foto encima. Ahora: tramos como en el celular (un poco
   más largos), las razones con la foto al lado y el presupuesto en dos
   columnas. El rollo y las obras, en main.js §11 y §17. */
@media (min-width:761px) and (max-width:1100px){
  .armado{height:240vh}
  .frio{height:200vh}
  .js .reloj__pista{height:220vh}
  .js .perfil-rehau{height:calc(100svh + 7 * 18svh)}
  .razones__lista{gap:34px}
  .razon{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto auto 1fr;column-gap:26px;align-items:start}
  .razon__foto{grid-column:1;grid-row:1/5;width:100%;max-height:none;margin:0;align-self:center}
  .razon>:not(.razon__foto){grid-column:2}
  .razon__dato--logo{margin:6px 0 12px;gap:8px}
  .razon__logo{height:38px}
  .razon h3{font-size:24px;line-height:1.12}
  .razon p{font-size:15.5px;line-height:1.5;margin-top:8px}
  .coti__form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;
    grid-template-areas:"p1 p2" "p1 p4" "p3 p4";grid-template-rows:min-content 1fr auto}
  .coti__form>fieldset:nth-of-type(1){grid-area:p1}
  .coti__form>fieldset:nth-of-type(2){grid-area:p2}
  .coti__form>fieldset:nth-of-type(3){grid-area:p3}
  .coti__form>fieldset:nth-of-type(4){grid-area:p4;align-self:stretch}
  .coti__paso{padding:16px 16px 14px}
  .preguntas__emblema{display:none}
  .coti__paso legend span{flex:none}
  /* la ficha del pedido: la foto a la izquierda y el resumen con los botones a la derecha */
  .coti__vista{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:20px;align-items:start;align-content:start}
  .coti__vista>*{grid-column:2}
  .coti__vista>.coti__ficha{grid-column:1/-1}
  .coti__vista>.plano{grid-column:1;grid-row:2/6;margin:0}
  .coti__vista>.nota{grid-column:1/-1}
  .coti__vista>.resumen{margin-top:0}
}

/* ═══ 21/10 (8) · Oblak Deco en el teléfono: los modelos (Listón Ancho,
   Listón Fino, Perfil de terminación) en la columna de la foto, debajo de
   ella; antes quedaban al final, muy abajo, y el cuadro de la foto era
   casi todo vacío. Con una imagen apaisada (perfil, zócalo), en fila
   debajo de la foto. ═══ */
@media (max-width:760px){
  .ob__vista.es-deco{grid-template-areas:"foto linea" "foto modelo" "foto intro" "mods colores" "mods desc" "mods specs" "acc acc"}
  .ob__vista.es-deco .ob__modelos-caja{grid-area:mods;align-self:start;margin-top:10px}
  .ob__vista.es-deco .ob__cuenta{font-size:9.5px;letter-spacing:.08em;margin-bottom:6px}
  .ob__vista.es-deco:not(.es-ancha) .ob__modelos{flex-direction:column;gap:6px;margin:0;padding:0;overflow:visible}
  .ob__vista.es-deco:not(.es-ancha) .ob__modelos button{width:100%;flex-direction:row;justify-content:flex-start;gap:8px;padding:6px 8px;border-radius:12px;font-size:12px}
  .ob__vista.es-deco:not(.es-ancha) .ob__modelos img{height:44px;width:44px;flex:none}
  .ob__vista.es-deco:not(.es-ancha) .ob__modelos span{text-align:left}
  .ob__vista.es-deco.es-ancha{grid-template-areas:"foto" "mods" "linea" "modelo" "intro" "colores" "desc" "specs" "acc"}
  .ob__vista.es-deco.es-ancha .ob__modelos-caja{margin:0 0 12px}
  .ob__vista.es-deco.es-ancha .ob__modelos img{height:50px}
}
/* El DVH en el teléfono: el título partido arriba y abajo del video */
@media (max-width:760px) and (orientation:portrait){
  .paso-frio--partido .h1--dos em{position:absolute;left:0;right:0;top:calc(100% + 18px + 56.25vw + 22px);
    opacity:0;transform:translateY(24px);transition:opacity .7s var(--curva) .25s,transform .9s var(--curva) .25s}
  .paso-frio--partido.is-on .h1--dos em{opacity:1;transform:none}
}
/* Tipologías REHAU, fija: sin el lugar de la × */
.pvc-tipos__cab,.pvc-tipos .pvc-tipos__cab{padding-right:0}
/* el pie de Tipologías: la píldora del folleto pisaba «Ver los colores» en el renglón de abajo */
.pvc-tipos__pie{line-height:2.15}
.pvc-tipos__pie .pvc-tipos__folleto{line-height:1.3;margin:2px 0}
.pvc-tipos__colores{white-space:nowrap}

/* ═══ 21/10 (9) · EL CELULAR, MÁS JUNTO (Jope) ═══ */
@media (max-width:760px){
  /* Tipologías REHAU de a 4 por fila: el dibujo, el nombre y «Cotizar»;
     los sistemas de cada una están en la pestaña «Fichas técnicas». */
  .pvc-tipos__lista--rehau,.pvc-tipos__lista--rehau[data-grupo="puertas"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .pvc-tipo--rehau{padding:6px 5px 7px;gap:2px;border-radius:11px}
  .pvc-tipo--rehau b{font-size:10.5px;line-height:1.15;margin-top:3px;hyphens:auto;-webkit-hyphens:auto}
  .pvc-tipo--rehau b small{font-size:9px;line-height:1.15;margin-top:1px}
  .pvc-tipo--rehau span{display:none}
  .pvc-tipo--rehau .pvc-tipo__coti{align-self:stretch;justify-content:center;margin-top:auto;padding:5px 4px;font-size:10.5px;gap:3px}
  .pvc-tipo--rehau .pvc-tipo__coti svg{display:none}
  .pvc-tipo--rehau b{flex:1}
  /* 23/10 (2), Jope: las 2 fotos reales de puertas, más chicas (una columna
     cada una, como las demás tarjetas; antes ocupaban dos) */
  .pvc-tipos__lista--rehau .pvc-tipo--foto{grid-column:span 1;padding:6px 5px 7px;gap:2px;border-radius:11px}
  .pvc-tipos__lista--rehau .pvc-tipo--foto img{aspect-ratio:2/3;object-fit:cover;height:auto;border-radius:8px}
  .pvc-tipos__lista--rehau .pvc-tipo--foto b{font-size:10.5px;line-height:1.15;margin-top:3px}
  .pvc-tipos__lista--rehau .pvc-tipo--foto span{display:block;font-size:9px;line-height:1.2;color:var(--gris)}

  /* «Qué hacemos»: las 5 portadas en una pantalla. Filas de 84 px: la
     grande 2 × 2, las altas 1 × 3 y las dos anchas lado a lado 1 × 2. */
  .obras{grid-auto-rows:84px;gap:8px}
  .obra--grande{grid-column:span 2;grid-row:span 2}
  .obra--alta{grid-column:span 1;grid-row:span 3}
  .obra--ancha{grid-column:span 1;grid-row:span 2}
  .obra figcaption{padding:9px 10px 9px}
  .obra figcaption b,.obra--grande figcaption b{font-size:14px;gap:7px;line-height:1.12}
  .obra figcaption b::before{width:6px;height:6px}
  .obra--grande figcaption span{display:none}
  .obra__num{top:9px;left:11px;font-size:9.5px}
  .obra__ir{margin-top:6px;padding:5px 9px;font-size:11px;gap:5px}
  .obra__ir svg{width:12px;height:12px}
}

/* ═══ 21/10 (10) · Showroom y contacto en el teléfono, junto como en la
   compu (Jope): botones en una fila, ficha más ajustada y la foto del
   local y el mapa lado a lado. ═══ */
@media (max-width:760px){
  .contacto{padding-block:52px 44px}
  .contacto__grilla{gap:16px}
  .contacto__bajada{margin-top:10px;font-size:14px;line-height:1.5}
  .contacto .acciones{margin-top:14px;display:flex;flex-wrap:nowrap;gap:8px}
  .contacto .acciones .btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 10px;font-size:14px;white-space:nowrap}
  .contacto .ficha{margin-top:14px;padding:12px 14px}
  .contacto .ficha__estado{margin-bottom:4px;font-size:14px}
  .contacto .horario{font-size:13px}
  .contacto .horario th,.contacto .horario td{padding:5px 0}
  .contacto .ficha__datos{margin-top:8px;gap:6px}
  .contacto .ficha__datos li{gap:9px;font-size:13.5px}
  .contacto .ficha__datos li svg{width:17px;height:17px}
  .contacto .ficha__datos a{font-size:11.5px;padding:4px 8px}
  .redes{margin-top:10px;padding-top:10px}
  .consulta-plegable{margin-top:10px}
  .contacto__lugar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;max-width:none}
  .contacto__local{border-radius:16px;height:100%}
  .contacto__local img{height:100%;aspect-ratio:auto;object-fit:cover}
  .contacto .mapa-g{aspect-ratio:1/1;border-radius:16px}
  .contacto .mapa-g__btn{left:8px;right:8px;bottom:8px;min-height:36px;padding:0 10px;font-size:12.5px;justify-content:center}
  .contacto .mapa-g__atrib{font-size:8px;left:8px;top:8px;padding:2px 6px}
  .contacto__local img{object-position:82% 50%}   /* el cartel con el logo */
  .contacto__local figcaption{left:8px;top:8px;right:8px;padding:4px 8px;font-size:10px;line-height:1.25;text-align:left}
  .contacto .mapa-g__etq{display:none}            /* en el mapa chico tapaba los créditos; queda el pin */
}

/* ═══ 22/10 (2) · La carta completa en el pedido: una fila con flechas ═══
   Jope: «todos los colores, en una sola línea, con flechas a la derecha y a la
   izquierda para que el cliente vaya buscando». La fila se desliza (dedo,
   rueda o flechas; main.js §10 bis); las flechas se apagan en las puntas. */
.color-riel{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:12px;transition:opacity .3s}
.color-riel[hidden]{display:none}
.color-riel.is-apagado{opacity:.35;pointer-events:none}
.coti .color-riel .opciones--color{position:relative;flex:1 1 auto;min-width:0;display:flex!important;flex-wrap:nowrap;gap:6px;grid-template-columns:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:3px 2px;margin:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent)}
.coti .color-riel .opciones--color::-webkit-scrollbar{display:none}
.coti .color-riel .opciones--color label{flex:none;display:block;scroll-snap-align:start}
.coti .color-riel .opciones--color span{width:auto;min-height:40px;padding:0 13px 0 5px;gap:7px;font-size:12.5px;line-height:1.1;white-space:nowrap;border-radius:999px}
.coti .color-riel .opciones--color i{width:30px!important;height:30px!important;flex:none}
.color-riel__flecha{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea),0 4px 12px -6px rgba(46,43,40,.35);cursor:pointer;transition:opacity .2s,transform .2s}
.color-riel__flecha svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.color-riel__flecha:hover{transform:scale(1.06)}
.color-riel__flecha:disabled{opacity:.28;cursor:default;transform:none}
@media (max-width:760px){
  .color-riel{gap:4px;margin-bottom:8px}
  .color-riel__flecha{width:30px;height:30px}
  .coti .color-riel .opciones--color span{min-height:36px;font-size:12px;padding:0 11px 0 4px}
  .coti .color-riel .opciones--color i{width:26px!important;height:26px!important}
}
/* ⚠ Un fieldset mide por defecto lo que su contenido (min-inline-size:
   min-content) y una columna 1fr no baja de eso: la fila de 20 colores
   empujaba la grilla entera. */
.coti,.coti__form,.coti__form>*,.coti__paso{min-width:0;min-inline-size:0}
.color-riel{max-width:100%}

/* ── 22/10 (4), Jope: «Elegí el color» con la carta completa (20) ──────
   Las muestras van de a tres (compu) y el abanico de atrás lleva las 20
   franjas, más finas y menos abiertas. */
.carta--20{gap:clamp(2px,.3vw,4px)}
.carta--20 i{max-width:30px;border-radius:7px 7px 4px 4px;
  transform:rotate(calc(var(--n) * 1.5deg)) translateY(calc(var(--n) * var(--n) * .4px))}
.carta--20 i.is-sel{transform:rotate(calc(var(--n) * 1.5deg)) translateY(calc(var(--n) * var(--n) * .4px - 26px))}
.muestras--20{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.muestras--20 .muestra{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:7px;padding:11px 4px 10px;border-radius:12px}
.muestras--20 .muestra i{width:30px;height:30px;flex:none}
.muestras--20 .muestra b{font-size:12.5px;line-height:1.15;font-weight:700}
.carta--20{height:clamp(84px,9vw,124px)}
@media (max-width:760px){
  .muestras--20{gap:6px}
  .muestras--20 .muestra{padding:9px 3px 8px;gap:6px}
  .muestras--20 .muestra i{width:26px;height:26px}
  .muestras--20 .muestra b{font-size:11.5px}
}

/* ═══ 22/10 (5) · Celular: la foto del local ENTERA y el mapa abajo ═══
   Jope: «la foto al lado del mapa está recortada y no se lee bien
   "Aberturas"; que se vea bien aunque ocupe más; primero esa imagen y abajo
   el mapa del mismo tamaño». Las dos a todo el ancho y 1,85:1 (la foto
   entera, sin recorte); el mapa es la versión del teléfono con el pin en el
   medio. */
@media (max-width:760px){
  .contacto__lugar{display:flex;flex-direction:column;gap:10px}
  .contacto__local{height:auto}
  .contacto__local img{height:auto;aspect-ratio:1300/703;object-fit:cover;object-position:50% 50%}
  .contacto .mapa-g{aspect-ratio:1300/703;flex:none;min-height:0}
  .contacto .mapa-g img{object-position:50% 43%}
  .contacto__local figcaption{right:auto;padding:5px 10px;font-size:11px}
}

/* ═══ 22/10 (5) · Obras: con flechas, no con el scroll (main.js §17) ═══ */
.curva__flecha{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:56px;height:56px;margin-top:-28px;border:0;border-radius:50%;
  background:#fff;color:var(--tinta);cursor:pointer;box-shadow:inset 0 0 0 1px var(--linea),0 14px 30px -12px rgba(46,43,40,.55);transition:opacity .25s,transform .25s var(--curva)}
.curva__flecha[hidden]{display:none}
.curva__flecha--izq{left:clamp(16px,4vw,64px)}
.curva__flecha--der{right:clamp(16px,4vw,64px)}
.curva__flecha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.curva__flecha:hover{transform:scale(1.07);background:var(--cian);color:#fff}
.curva__flecha:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
.curva__flecha:disabled{opacity:.3;cursor:default;transform:none;background:#fff;color:var(--tinta)}
.curva-js .curva__vista{touch-action:pan-y}
@media (max-width:760px){
  .curva__flecha{width:44px;height:44px;margin-top:-22px}
  .curva__flecha svg{width:18px;height:18px}
  .curva__flecha--izq{left:10px}
  .curva__flecha--der{right:10px}
}

/* ═══ 22/10 (7) · Presupuesto: las 11 tipologías REHAU y Oblak (main.js §10, §10 ter) ═══
   Pablo: «en el paso 1, en PVC REHAU y aluminio faltan tipologías (son 11)»
   y «agregar Oblak al lado, con sus líneas de exterior, interior, Oblak Deco
   y sus colores». Las tipologías llevan el dibujo del folleto de REHAU. */
.coti__form [hidden]{display:none!important}
.coti__paso legend b{font:inherit}
.opciones--tipologias{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.opciones--tipologias span{min-height:0;gap:6px;padding:7px 6px 9px;font-size:12.5px;line-height:1.15;text-align:center}
.opciones--tipologias img{display:block;width:100%;max-width:96px;height:auto;aspect-ratio:200/142;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 0 0 1px rgba(46,43,40,.08)}
.opciones--tipologias svg{width:100%;max-width:96px;height:auto;aspect-ratio:200/142;padding:12px 0;border-radius:8px;background:#fff;box-shadow:0 0 0 1px rgba(46,43,40,.08)}
.opciones--tipologias input:checked+span img,.opciones--tipologias input:checked+span svg{box-shadow:0 0 0 2px #fff}
/* Oblak */
.coti__form.es-oblak .medidas>.campo:not(.campo--cant),.coti__form.es-oblak .medidas__x,.coti__form.es-oblak .coti__ayuda,.coti__form.es-oblak .como-medir{display:none!important}
.coti__oblak .coti__sub{margin:12px 0 7px}
.opciones--ob-tipo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.opciones--ob-tipo span{text-align:center;font-size:13.5px;line-height:1.15}
.opciones--ob-linea,.opciones--ob-color{display:flex;flex-wrap:wrap;gap:6px}
.opciones--ob-linea label,.opciones--ob-color label,.opciones--ob-modelo label{position:relative;cursor:pointer}
.coti__oblak input{position:absolute;opacity:0;pointer-events:none}
.opciones--ob-linea span,.opciones--ob-color span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea);font-size:13.5px;font-weight:650;color:var(--tinta);transition:background .25s,box-shadow .25s}
.opciones--ob-linea small{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--gris)}
.opciones--ob-color i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.coti__oblak input:checked+span{background:var(--cian);box-shadow:0 6px 14px -8px rgba(0,150,165,.9)}
.coti__oblak input:checked+span small{color:var(--tinta)}
.coti__oblak input:focus-visible+span{outline:2px solid var(--cian);outline-offset:2px}
.opciones--ob-modelo{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;scrollbar-width:thin;min-width:0}
.opciones--ob-modelo span{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:6px 4px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea);scroll-snap-align:start;transition:background .25s,box-shadow .25s}
.opciones--ob-modelo img{display:block;width:auto;height:64px;max-width:56px;object-fit:contain}
.opciones--ob-modelo b{font-size:11px;line-height:1.1;text-align:center;font-weight:700;color:var(--tinta);word-break:break-word}
.coti__ob-carga{font-size:13px;color:var(--gris);margin:0}
.coti__oblak{min-width:0}
.pedido-foto.es-oblak{background:linear-gradient(180deg,#fbf8f3,#efe8dd)}
.pedido-foto.es-oblak img{object-fit:contain;padding:14px}
/* 22/10 (8): las tipologías sin foto propia muestran el dibujo de REHAU, entero sobre blanco */
.pedido-foto.es-dibujo{background:#fff}
.pedido-foto.es-dibujo img{object-fit:contain;padding:8% 10% 12%}
.pedido-foto.es-dibujo~.pedido-ilus{color:rgba(46,43,40,.6);text-shadow:none}
@media (max-width:760px){
  .opciones--tipologias{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .opciones--tipologias label,.opciones--tipologias label:nth-child(n+5){grid-column:auto}
  .opciones--tipologias span{flex-direction:column;justify-content:flex-start;text-align:center;padding:4px 3px 6px;gap:3px;font-size:10.5px;line-height:1.08;min-height:0}
  .opciones--tipologias img,.opciones--tipologias svg{max-width:none}
  .opciones--ob-tipo span{font-size:12px;padding:6px 4px}
  .opciones--ob-linea span,.opciones--ob-color span{padding:6px 10px;font-size:12.5px}
}
/* El paso 1 creció (14 tipos u Oblak): va solo a la izquierda y el 2, el 3 y
   el 4 se apilan a la derecha (el 4 termina parejo con el 1). El selector de
   material pasa abajo del título si no entra al lado. */
.coti__paso legend{flex-wrap:wrap;row-gap:8px}
.coti__paso legend>span:first-child{flex:none}
@media (min-width:761px){
  .coti__form{grid-template-areas:"p1 p2" "p1 p3" "p1 p4";grid-template-rows:min-content min-content 1fr}
  .coti__form>fieldset:nth-of-type(4){grid-area:p4;align-self:stretch}
}
.coti__vista.es-oblak .pedido-cotas{display:none}
.coti__form.es-oblak .medidas{display:flex;justify-content:flex-start}
.coti__form.es-oblak .medidas .campo--cant{margin-left:0;grid-column:auto}

/* 23/10: la línea que reemplaza al cartel de Portones, abajo del presupuesto */
.coti__llega{display:table;margin:clamp(22px,3vw,36px) auto 0;max-width:min(100%,46ch);padding:12px 24px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 8px 28px rgba(46,43,40,.12),0 0 0 1px rgba(1,200,220,.35);text-align:center;font-weight:700;font-size:clamp(16px,1.5vw,20px);line-height:1.3;color:var(--tinta)}
@media (max-width:760px){.coti__llega{border-radius:22px;padding:12px 18px}}