:root{
  --terracota: #9C3A20;
  --serif: 'Fraunces', 'Prata', serif;
  --terracota-oscuro: #7C2D17;
  --hueso: #FBF9F6;
  --crema: #F3EADA;
  --crema-claro: #F6EFE3;
  --tinta: #29211A;
  --tinta-oscura: #211711;
  --tinta-suave: #4A4038;
  --gris-calido: #6F6357;
  --gris-claro: #757068;  /* corregido por contraste, venía #8B8177 */
  --estado-libre: #2F6B4E;
  --estado-reservada: #8A6420;  /* corregido por contraste, venía #A0762C */
  --whatsapp: #0F7A6D;  /* corregido por contraste, venía #128C7E */
  --ambar-texto: #6E5119;  /* corregido por contraste, venía #7A5A20 */
}

/* `sc-if` en el editor NO crea un nodo: rinde como fragmento. El envase que
   emite el transpilador sí lo crea, y eso rompe todo layout donde los hijos
   tenían que ser hermanos — en el encabezado, la navegación y el botón
   quedaban adentro de UN solo item de flex. `display:contents` borra la caja
   y deja pasar a los hijos, que es exactamente lo que hacía el fragmento.
   El !important del hidden le gana, así que ocultar sigue funcionando. */
[data-si]{display:contents}
[hidden]{display:none !important}

/* Los hover y foco que el editor guardaba en atributos propios. */
[data-fx~="fx-1"]:hover{color:var(--terracota);}
[data-fx~="fx-2"]:hover{background:var(--terracota-oscuro);}
[data-fx~="fx-3"]:hover{background:var(--terracota-oscuro);transform:translateY(-1px);}
[data-fx~="fx-4"]:hover{background:rgba(243,234,218,0.14);border-color:var(--crema);}
[data-fx~="fx-5"]:hover{border-color:var(--terracota);}
[data-fx~="fx-6"]:hover{color:var(--terracota-oscuro);}
[data-fx~="fx-7"]:hover{border-color:var(--terracota);color:var(--terracota);}
[data-fx~="fx-8"]:focus-visible{border-color:var(--terracota);}
[data-fx~="fx-9"]:hover{background:#fff;}
[data-fx~="fx-10"]:hover{border-color:var(--crema);background:rgba(243,234,218,0.07);}
[data-fx~="fx-11"]:hover{background:#0E7265;}
[data-fx~="fx-12"]:hover{background:rgba(243,234,218,0.25);}

/* El logotipo de La Torre está quemado adentro del render de portada. En
   pantalla angosta la imagen se recorta al centro y ese logotipo cae justo
   detrás del título. Subiendo el encuadre queda arriba, se lee como marca, y
   el título apoya limpio sobre el degradado. */
@media (max-width: 640px) {
  /* OJO CON EL EJE: la imagen es 16:9 y la caja del hero en celular es
     vertical, así que object-fit cover la recorta a lo ANCHO, no a lo alto. Mover el eje
     Y no hace nada — hay que correr la X. Con 22 % se ve el cuerpo del edificio
     y el logotipo queda fuera del recorte, así que el título se lee limpio. */
  .hero-img { object-position: 51% 45% !important; }  /* la marca del render, centrada */
}


/* ══════════════════════════════════════════════════════════════════════════
   La gramática editorial (rediseño 31/8): escala grande, aire y calma.
   La referencia es una web residencial de lujo que David trajo en video —
   serif enorme, poco texto por pantalla, secciones que respiran. Se aplica
   sobre la MISMA plomería (data-*): esto es vestuario, no cirugía.
   ══════════════════════════════════════════════════════════════════════════ */

.eyebrow{font-size:11px;letter-spacing:0.32em;text-transform:uppercase;color:var(--gris-calido);font-weight:500}
.eyebrow--clara{color:rgba(243,234,218,0.78)}

.titulo-editorial{font-family:var(--serif);font-weight:400;line-height:1.06;margin:0;color:var(--tinta)}
.titulo-editorial .acento{color:var(--terracota)}
.t-seccion{font-size:clamp(36px,5.5vw,72px)}
.t-manifiesto{font-size:clamp(26px,3.4vw,44px);line-height:1.3}
.t-hero{font-size:clamp(54px,12vw,160px);letter-spacing:0.12em;line-height:1;color:var(--crema)}

/* El hero respira: la imagen hace un paneo lento (no hay video real del
   edificio y no se inventa uno) y el texto entra escalonado una sola vez. */
@keyframes ken-burns{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.ken-burns{animation:ken-burns 24s ease-out both}
@keyframes hero-entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-entra{animation:hero-entra 1100ms cubic-bezier(0.22,1,0.36,1) both}
.hero-entra-2{animation:hero-entra 1100ms 260ms cubic-bezier(0.22,1,0.36,1) both}
.hero-entra-3{animation:hero-entra 1100ms 520ms cubic-bezier(0.22,1,0.36,1) both}
@keyframes cue-baja{0%,100%{transform:translateY(0);opacity:0.8}50%{transform:translateY(9px);opacity:0.35}}
.scroll-cue{animation:cue-baja 2.4s ease-in-out infinite}

/* El encabezado nace transparente sobre el hero y se vuelve sólido al pasar
   la portada (body.paso-el-hero lo pone un listener de scroll de una línea). */
.header-torre{position:fixed;top:0;left:0;right:0;z-index:120;background:transparent;border-bottom:1px solid transparent;transition:background 320ms ease,border-color 320ms ease,backdrop-filter 320ms ease;--nav-fg:var(--crema);--nav-sub:rgba(243,234,218,0.72)}
body.paso-el-hero .header-torre{background:rgba(251,249,246,0.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(41,33,26,0.12);--nav-fg:var(--tinta);--nav-sub:var(--gris-calido)}
.header-torre .marca{color:var(--nav-fg)}
.header-torre .marca-sub{color:var(--nav-sub)}
.header-torre .nav-link{color:var(--nav-fg);opacity:0.88}
.header-torre .nav-link:hover{opacity:1;color:var(--nav-fg)}
body.paso-el-hero .header-torre .nav-link:hover{color:var(--terracota)}

/* Las distancias del entorno, como fila fina y no como tarjetas. */
.fila-fina{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(243,234,218,0.22)}

@media (prefers-reduced-motion: reduce){
  .ken-burns,.hero-entra,.hero-entra-2,.hero-entra-3,.scroll-cue{animation:none}
}

/* El carrusel de tipologías: una fila que se desliza con snap. Las tarjetas
   traen su estilo inyectado desde app.js (cardBase/cardOn). */
.riel-tipos{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 4px 18px;margin:30px -4px 18px;scrollbar-width:thin}
.riel-tipos button:hover{border-color:var(--terracota)}

/* ══ La visita: la historia en scroll horizontal (reversión 31/8) ══ */
:root{--terracota-claro:#D98B6F}

.riel-historia{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:clamp(36px,5vh,54px) max(24px,calc((100vw - 1280px)/2 + 24px)) 26px;scrollbar-width:thin}
.panel-historia{position:relative;flex:0 0 auto;width:min(78vw,560px);border-radius:8px;overflow:hidden;scroll-snap-align:start;background:#2A1D15}
/* Los renders son todos 2200×1237 (16:9). Con una altura fija en vh, `cover`
   les comía un 16 %: se cortaba arriba y abajo. Con la proporción puesta, la
   caja mide exactamente lo que mide la imagen y no recorta nada. */
.panel-historia img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block}
.panel-pie{display:flex;gap:16px;align-items:flex-start;padding:18px 20px 22px;color:var(--crema)}
.panel-num{font-family:var(--serif);font-size:clamp(34px,4vw,52px);line-height:0.9;color:var(--terracota-claro)}
.panel-pie h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0}
.panel-pie p{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:rgba(243,234,218,0.78)}
.panel-cierre{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--terracota);min-height:min(52vh,430px);padding:30px}

/* Las tipologías, una por una: foto grande + texto, alternando de lado. */
.tipo-bloque{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.tipo-bloque:nth-child(even) .tipo-foto{order:2}
@media (max-width:820px){.tipo-bloque{grid-template-columns:1fr}.tipo-bloque:nth-child(even) .tipo-foto{order:0}}
.tipo-foto img{transition:transform 600ms cubic-bezier(0.22,1,0.36,1)}
.tipo-foto:hover img{transform:scale(1.025)}
@media (prefers-reduced-motion: reduce){.tipo-foto img{transition:none}.tipo-foto:hover img{transform:none}}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile first de verdad (QA 31/8). Los cuatro pecados que había en el
   celular: la nav desplegada en tres filas sobre el hero, los interludios
   16:9 reducidos a una franja lavada, la lámina del plano cortada al medio,
   y elegir una unidad sin ver que la ficha cambió.
   ══════════════════════════════════════════════════════════════════════════ */

/* El menú hamburguesa: la nav completa solo existe de 901px para arriba. */
.nav-burger{display:none}
@media (max-width:900px){
  .header-torre > div{flex-wrap:nowrap;padding:13px 18px}
  .nav-burger{display:grid;place-items:center;width:42px;height:42px;border:1px solid currentColor;border-radius:6px;background:none;color:var(--nav-fg);cursor:pointer;font-size:16px;flex:none}
  .nav-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--hueso);display:none !important;flex-direction:column;align-items:flex-start;gap:0;padding:86px 26px 26px;z-index:110}
  body.menu-abierto .nav-menu{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;align-items:flex-start !important;gap:0 !important;overflow-y:auto}
  .nav-menu .nav-link{font-family:var(--serif);font-size:26px;color:var(--tinta) !important;opacity:1;padding:13px 0;border-bottom:1px solid rgba(41,33,26,0.1);width:100%}
  body.menu-abierto .header-torre{background:var(--hueso);border-bottom:1px solid rgba(41,33,26,0.12);--nav-fg:var(--tinta);--nav-sub:var(--gris-calido)}
  body.menu-abierto{overflow:hidden}
  .cta-header{display:none}
  .cta-menu{display:block;width:100%;margin-top:22px;background:var(--terracota);color:var(--crema-claro) !important;border-radius:6px;padding:16px 18px;font-size:15.5px;font-weight:600;text-align:center;text-decoration:none;border-bottom:none !important;font-family:'Archivo',sans-serif !important}
}

/* El hero en el celular: menos tracking (se cortaba), sin los laterales. */
@media (max-width:640px){
  .eyebrow{letter-spacing:0.22em}
  .lateral-hero{display:none}
  .hero-pie{padding-bottom:56px !important}
}

/* Los interludios del brochure son apaisados: en pantalla vertical se
   muestran ENTEROS con su proporción, no como franja recortada. */
@media (max-width:820px){
  .interludio{height:auto !important;min-height:0 !important;aspect-ratio:16/9}
}

/* La lámina de la ficha: entera y prolija, nunca cortada al medio. */
.lamina-ficha{object-fit:contain !important;background:#fff;height:auto !important;aspect-ratio:16/9}

/* Los botones de unidad, compactos en el celular (el estilo base lo inyecta
   app.js; acá solo se achica el respiro para que la lista no sea infinita). */
@media (max-width:640px){
  .lista-unidades button{padding:10px 12px !important}
  .panel-historia{width:84vw}
  .t-manifiesto{font-size:clamp(22px,6.4vw,30px)}
}

/* Feedback al pulsar: todo lo apretable responde. Respeta reduced-motion. */
.fx-tap-g{transition:transform 130ms ease}
.fx-tap-g:active{transform:scale(0.97)}
@media (prefers-reduced-motion: reduce){.fx-tap-g,.fx-tap-g:active{transition:none;transform:none}}
/* El CTA del panel solo existe en el menú del celular. */
@media (min-width:901px){.cta-menu{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   RONDA DE CORRECCIONES · 31/8 (las de David sobre el celular)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 6 · EL BUG DEL MENÚ ───────────────────────────────────────────────────
   Con la página scrolleada, el header lleva `backdrop-filter`, y un ancestro
   con backdrop-filter SE VUELVE EL BLOQUE CONTENEDOR de sus descendientes
   `position:fixed`. El panel del menú quedaba encerrado en la franja de 62 px
   del header en vez de cubrir la pantalla: por eso arriba de la página abría
   bien y abajo aparecía cortado y no se podía usar. Mientras el menú está
   abierto, el header no filtra nada (ya tiene fondo sólido). */
body.menu-abierto .header-torre{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;transform:none !important;filter:none !important}

/* ── 4, 5 y 7 · EL MENÚ: jerarquía y movimiento ────────────────────────── */
@media (max-width:900px){
  .nav-menu{padding:96px 26px 34px;gap:0 !important;justify-content:flex-start}
  /* Los seis enlaces pesan igual y son grandes. El CTA es el chico. */
  .nav-menu .nav-link{font-size:clamp(27px,7.4vw,34px) !important;line-height:1.25;padding:15px 0 !important;letter-spacing:-0.01em}
  .nav-menu .nav-link.cta-menu{width:auto !important;align-self:flex-start;margin-top:26px !important;padding:12px 22px !important;font-size:13.5px !important;letter-spacing:0.02em;line-height:1.2}
  /* Entran escalonados cuando el panel abre. */
  .nav-menu > *{opacity:0;transform:translateY(14px)}
  body.menu-abierto .nav-menu > *{animation:menu-item 460ms cubic-bezier(0.22,1,0.36,1) both}
  body.menu-abierto .nav-menu > *:nth-child(1){animation-delay:40ms}
  body.menu-abierto .nav-menu > *:nth-child(2){animation-delay:80ms}
  body.menu-abierto .nav-menu > *:nth-child(3){animation-delay:120ms}
  body.menu-abierto .nav-menu > *:nth-child(4){animation-delay:160ms}
  body.menu-abierto .nav-menu > *:nth-child(5){animation-delay:200ms}
  body.menu-abierto .nav-menu > *:nth-child(6){animation-delay:240ms}
  body.menu-abierto .nav-menu > *:nth-child(7){animation-delay:280ms}
  body.menu-abierto .nav-menu > *:nth-child(8){animation-delay:320ms}
  .nav-menu{animation:menu-panel 300ms ease both}
  .nav-burger i{transition:transform 280ms cubic-bezier(0.22,1,0.36,1)}
  body.menu-abierto .nav-burger i{transform:rotate(90deg)}
}
@keyframes menu-item{to{opacity:1;transform:none}}
@keyframes menu-panel{from{opacity:0}to{opacity:1}}

/* ── 2 · LA TORRE SE FORMA AL ABRIR ───────────────────────────────────────
   Sin video del edificio, el render se descubre de abajo hacia arriba: la
   torre "crece" en un segundo y medio y recién ahí arranca el paneo lento. */
@keyframes torre-crece{from{clip-path:inset(100% 0 0 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:scale(1.02)}}
.hero-img{animation:torre-crece 1500ms cubic-bezier(0.16,1,0.3,1) both, ken-burns 24s 1500ms ease-out both}

/* ── 3 · EL WHATSAPP NO TAPA LA PORTADA ──────────────────────────────────
   Aparece recién cuando se deja el hero. En la portada no existe. */
.wa-flotante{opacity:0;visibility:hidden;transform:translateY(14px) scale(0.9);transition:opacity 300ms ease,transform 300ms cubic-bezier(0.22,1,0.36,1),visibility 300ms}
body.paso-el-hero .wa-flotante{opacity:1;visibility:visible;transform:none}

/* ── 10 · LAS UNIDADES, EN GRILLA Y SIN REPETIR PALABRAS ─────────────────
   El estado se lee por color (con su leyenda), no repitiendo "Libre" doce
   veces. Dos columnas: la lista entera entra de un vistazo. */
.lista-unidades{display:grid !important;grid-template-columns:repeat(2,1fr);gap:8px !important}
.lista-unidades button{flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;gap:2px !important;padding:12px 13px !important;min-height:74px}
@media (min-width:1100px){.lista-unidades{grid-template-columns:1fr}.lista-unidades button{flex-direction:row !important;align-items:center !important;justify-content:space-between !important;min-height:0}}

/* ── 12 · LA COCHERA: el render entero, y el texto donde no lo tape ──────
   El render es una franja de 2200×536. Tenía altura fija (hasta 340px) y el
   `cover` se comía casi un quinto del ANCHO: los autos quedaban cortados por
   la mitad. Encima el scale(1.04) recortaba otro 4 % sin que nadie lo pidiera.
   Ahora la caja toma la proporción de la imagen, así que no recorta nada, y
   el zoom del hover se fue: en un render de obra el encuadre es el dato. */
.bloque-cochera{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:2200/536;display:flex;align-items:flex-end}
.bloque-cochera img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bloque-cochera .cochera-txt{position:relative;box-sizing:border-box;padding:22px;color:var(--crema);background:linear-gradient(180deg,rgba(18,12,9,0) 0%,rgba(18,12,9,0.86) 58%);width:100%}
/* En pantalla angosta esa franja mide 90px de alto: el texto no entra encima
   sin taparlo. Se apila abajo, sobre el mismo fondo oscuro. */
@media (max-width:820px){
  .bloque-cochera{aspect-ratio:auto;display:block;background:var(--tinta-oscura)}
  .bloque-cochera img{position:static;width:100%;height:auto;aspect-ratio:2200/536}
  .bloque-cochera .cochera-txt{background:none;padding:16px 18px 20px}
}

/* ── 13 · LAS CUATRO TIPOLOGÍAS, HORIZONTALES Y PAREJAS ─────────────────*/
.riel-tipologias{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:8px 4px 22px;margin:36px -4px 0;scrollbar-width:thin}
.tipo-card{flex:0 0 auto;width:min(320px,80vw);scroll-snap-align:start;background:#fff;border:1px solid rgba(41,33,26,0.14);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:border-color 260ms ease,box-shadow 260ms ease,transform 260ms ease}
.tipo-card:hover{border-color:var(--terracota);box-shadow:0 14px 34px rgba(156,58,32,0.16);transform:translateY(-3px)}
.tipo-card > button:first-child{padding:0;border:none;background:none;cursor:zoom-in;display:block;overflow:hidden}
/* 4:3 sobre un render 16:9 se comía un cuarto de la imagen, y el zoom del
   hover otro 5 %. La proporción real, y el hover que ya no recorta. */
.tipo-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tipo-card .tipo-cuerpo{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.tipo-card .tipo-acciones{display:flex;gap:8px;margin-top:auto;padding-top:14px}

/* ── 9 · LA VISITA: progreso y entrada de cada capítulo ─────────────────*/
.panel-historia{transition:transform 420ms cubic-bezier(0.22,1,0.36,1)}
.panel-historia:hover{transform:translateY(-4px)}
.panel-historia img{transition:transform 900ms cubic-bezier(0.22,1,0.36,1)}
.panel-historia:hover img{transform:scale(1.04)}
.visita-guia{display:flex;align-items:center;gap:14px;max-width:1280px;margin:0 auto;padding:0 24px}
.visita-barra{flex:1;height:2px;background:rgba(243,234,218,0.2);border-radius:2px;overflow:hidden}
.visita-barra span{display:block;height:100%;width:12%;background:var(--terracota-claro);border-radius:2px;transition:width 220ms ease}

/* ── 14 · EL FOOTER, al patrón de Aires y Cañada ────────────────────────*/
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px}.foot-marca{grid-column:1/-1}}
@media (max-width:420px){.foot-grid{grid-template-columns:1fr}}
.foot-col h3{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--crema);margin:0 0 12px}
.foot-col a{display:block;color:rgba(243,234,218,0.72);text-decoration:none;font-size:13.5px;padding:6px 0;transition:color 180ms ease}
.foot-col a:hover{color:var(--crema)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;border-top:1px solid rgba(243,234,218,0.16);margin-top:34px;padding-top:20px;font-size:12px;color:rgba(243,234,218,0.6)}
.foot-ck{background:none;border:0;padding:8px 0;color:rgba(243,234,218,0.72);font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.foot-ck:hover{color:var(--crema)}

/* ── 15 · EL AVISO DE COOKIES ───────────────────────────────────────────
   Uno solo, consentimiento por navegación y un solo botón. Barra al pie en el
   celular, tarjeta abajo a la izquierda en escritorio, 44px de área táctil.

   OJO CON LO QUE HABÍA: `.ck-torre p` llevaba `flex:1 1 300px`, pensado para
   la fila del celular. En escritorio el contenedor pasa a COLUMNA, y en una
   columna el `flex-basis` se aplica a la ALTURA: dos renglones de texto
   quedaban en una caja de 392px de alto, casi media pantalla. Si algún día se
   vuelve a poner una base en flex, que sea `flex:1 1 auto` o que se resetee
   adentro del media query. */
.ck-torre{position:fixed;left:0;right:0;bottom:0;z-index:150}
.ck-torre .ck-in{background:var(--tinta-oscura);color:var(--crema);border-top:1px solid rgba(243,234,218,0.18);box-shadow:0 -8px 30px rgba(18,12,9,0.34);padding:14px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ck-torre p{flex:1 1 240px;margin:0;font-size:13.5px;line-height:1.5;color:rgba(243,234,218,0.88)}
.ck-torre p strong{color:var(--crema);font-weight:600}
.ck-torre .ck-btns{display:flex;flex:0 0 auto}
.ck-si{min-height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;font-size:13.5px;border-radius:4px;background:var(--crema);color:var(--tinta-oscura);border:1px solid var(--crema);padding:12px 26px;font-weight:600;transition:background 160ms ease}
.ck-si:hover{background:#fff}
@media (min-width:901px){
  .ck-torre{right:auto;left:20px;bottom:20px;max-width:min(420px,calc(100vw - 40px))}
  .ck-torre .ck-in{flex-direction:column;align-items:flex-start;gap:12px;padding:18px;border:1px solid rgba(243,234,218,0.18);border-radius:8px;box-shadow:0 14px 40px rgba(18,12,9,0.4)}
  .ck-torre p{flex:0 1 auto}
  .ck-torre .ck-btns{width:100%;justify-content:flex-end}
}
@media (max-width:560px){.ck-torre .ck-btns{width:100%}.ck-si{width:100%}}

@media (prefers-reduced-motion: reduce){
  .hero-img,.nav-menu,body.menu-abierto .nav-menu > *,.nav-burger i,
  .panel-historia,.tipo-card,.wa-flotante{animation:none !important;transition:none !important;transform:none !important;clip-path:none !important}
  .wa-flotante{opacity:1;visibility:visible}
}

/* ── 1 · EL HERO EN EL CELULAR ─────────────────────────────────────────────
   La marca del render es el titular: va centrada. Para que no choque con el
   texto, en el celular se cae el párrafo (dice lo mismo que el manifiesto de
   abajo), el titular se achica y el velo de abajo sube. */
@media (max-width:640px){
  .hero-desc{display:none}
  .hero-pie h1{font-size:23px !important;line-height:1.25 !important;margin-top:10px !important}
  .hero-scrim{background:linear-gradient(180deg,rgba(18,12,9,0.5) 0%,rgba(18,12,9,0.1) 26%,rgba(18,12,9,0.34) 52%,rgba(18,12,9,0.9) 78%,rgba(18,12,9,0.96) 100%) !important}
}
/* El render de la cochera trae el cartel "Cocheras | Disponibles" quemado a la
   izquierda: se encuadra a la derecha para que no choque con el título. */
.bloque-cochera img{object-position:28% center}  /* la franja recortada: los autos a la vista */