/* CISSAN BR · Movimiento y texto gris más grande
   Se carga DESPUÉS de /invertir/styles.css y solo cambia lo necesario:
   texto gris más grande, más movimiento y más fotos. */

/* ---------- Fuente de respaldo con medidas parecidas (evita saltos al cargar Archivo) ---------- */
/* Si Archivo no llega a tiempo en la primera visita, se queda la de respaldo (sin salto visual) */
@font-face{font-family:"Archivo";src:url("/invertir/fonts/archivo-latin.woff2") format("woff2");font-weight:400 800;font-stretch:100% 125%;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:104%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
body{font-family:"Archivo","Archivo Fallback",ui-sans-serif,sans-serif}

/* ---------- Texto gris más grande ---------- */
.lede{font-size:calc(clamp(1.25rem,1.15rem + .35vw,1.4rem) + 2px)}
.why-list p,.lot p,.timeline p,.faq-list .ans,.usa p,.closer p,.faq-side p,
.lead-ranges > p,.offer > p,.door-text,.section-head .lede{font-size:calc(1.14rem + 2px);line-height:1.6}
.range-opt .desc,.offer-list span,.versus-row .solo,.versus-row .us,.lot-meta{font-size:calc(1.06rem + 2px)}
.notice,.check{font-size:calc(1rem + 2px)}
.fineprint,.hero-media figcaption{font-size:calc(.98rem + 2px)}

/* ---------- Foto de portada con zoom lento ---------- */
.hero-media{overflow:hidden;border-radius:var(--r-lg)}
.hero-media img{animation:heroImg 900ms var(--ease-out) both,kenburns 16s ease-in-out 900ms infinite alternate}
/* zoom lento solo en la capa de la imagen */
.hero-media img{will-change:transform}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.5%,-1%)}}

/* ---------- Video vertical en la portada (/invertir/) ---------- */
.hero-phone{position:relative;justify-self:center;width:min(100%,270px,calc((100dvh - 200px) * 9 / 16))}
.hero-phone video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:28px;box-shadow:0 2px 4px rgba(31,41,55,.08),0 24px 40px -18px rgba(31,41,55,.4);animation:heroImg 900ms var(--ease-out) both}
.hero-phone .sound{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:var(--shadow)}
.hero-phone .sound:active{transform:translateX(-50%) scale(.97)}
@media (max-width:860px){.hero-phone{width:min(100%,240px)}}

/* ---------- Cifras que cuentan ---------- */
.stats{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.stat{background:var(--surface);padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.25rem;contain:layout paint}
.stat .n{font-size:calc(clamp(1.7rem,1.3rem + 1.2vw,2.4rem) + 2px);font-weight:760;font-stretch:112%;letter-spacing:-.02em;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1.1}
.stat .l{color:var(--muted);font-size:calc(1.02rem + 2px)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stats{grid-template-columns:1fr}}

/* ---------- Cinta en movimiento (una por página) ---------- */
.ribbon{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:1rem 0;contain:layout paint}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none}
.ribbon::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.ribbon::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.ribbon-track{display:flex;width:max-content;gap:2.5rem;animation:ribbon 38s linear infinite;will-change:transform}
.ribbon span{white-space:nowrap;font-weight:600;font-size:calc(1.05rem + 2px)}
/* la cinta y el zoom solo se mueven a la vista y con la página ya cargada (movimiento.js agrega .on) */
.ribbon-track,.hero-media img{animation-play-state:paused}
.ribbon.on .ribbon-track,.hero-media.on img{animation-play-state:running}
.ribbon.on:hover .ribbon-track{animation-play-state:paused}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* ---------- Galería de fotos ---------- */
.gallery{position:relative}
.gallery-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.75rem;scrollbar-width:thin}
.gallery-track figure{flex:none;scroll-snap-align:start;margin:0}
.gallery-track img{height:clamp(260px,22rem,420px);width:auto;border-radius:var(--r-lg);object-fit:cover;transition:transform 400ms var(--ease-out)}
.gallery-track figcaption{margin-top:.5rem;color:var(--muted);font-size:calc(1rem + 2px)}
.gallery-nav{display:flex;gap:.5rem;margin-top:.75rem}
.gallery-nav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.gallery-nav button:active{transform:scale(.95)}
.gallery-nav .ico{width:22px;height:22px}
.gallery-nav .prev .ico{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.gallery-nav button:hover{background:var(--ink);color:#fff}}

/* ---------- Fotos con zoom al pasar el mouse ---------- */
.lot img{transition:transform 500ms var(--ease-out)}
.lot.big,.lot:not(.lot-video){overflow:visible}
@media (hover:hover) and (pointer:fine){
  .lot img:hover,.gallery-track img:hover{transform:scale(1.025)}
  .door:hover img{transform:scale(1.04)}
}
.door{position:relative}
.door img{transition:transform 600ms var(--ease-out)}
.door > img{display:block}
.door{isolation:isolate}

/* ---------- Palabra que cambia en el titular (portada) ---------- */
.rotator{display:inline-grid;vertical-align:bottom;color:var(--accent)}
.rotator > span{grid-area:1/1;opacity:0;transform:translateY(.35em);animation:rotWord 7.5s var(--ease-out) infinite}
.rotator > span:nth-child(2){animation-delay:2.5s}
.rotator > span:nth-child(3){animation-delay:5s}
@keyframes rotWord{0%{opacity:0;transform:translateY(.35em)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-.35em)}}

/* ---------- Pulso suave en el botón principal (3 veces y se detiene) ---------- */
.pulse{animation:pulse 1.8s var(--ease-out) 2s 3}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,34,26,.45)}100%{box-shadow:0 0 0 14px rgba(200,34,26,0)}}

/* ---------- Revelado más marcado ---------- */
.js .rv{transform:translateY(28px)}
.js .rv-4{transition-delay:210ms}

/* ---------- Movimiento reducido: se quita el desplazamiento, queda el contenido ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-media img{animation:fadeOnly 600ms linear both}
  .ribbon-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:.5rem}
  .ribbon-track [aria-hidden="true"]{display:none}
  .rotator > span{animation:none}
  .rotator > span:first-child{opacity:1;transform:none}
  .pulse{animation:none}
  .lot img:hover,.gallery-track img:hover,.door:hover img{transform:none}
  .js .rv{transform:none}
}