/* ══════════════════════════════════════════════════════════════
   CAPA VISUAL — fotografía, profundidad y movimiento (08-sep-2026)
   Fotos: biblioteca oficial Ironman 4x4 (la marca #1 del catálogo).
   Se carga DESPUÉS de styles.css: no reemplaza el sistema, lo eleva.
   Para revertir: quitar el <link> de visual.css en index.html.
   ══════════════════════════════════════════════════════════════ */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --sombra-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.34);
  --sombra-2:0 2px 4px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.5);
}
.grano-tex{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

/* ── 1. HERO CINEMATOGRÁFICO ────────────────────────────────── */
.hero{min-height:min(88vh,840px);background:#08080A;display:block;position:relative;
  border-bottom:none;isolation:isolate}
.hero::after{display:none}

/* Una capa de foto por slide: crossfade + Ken Burns lento */
.hero-bg{position:absolute;inset:0;opacity:0;transition:opacity 1.15s var(--ease);
  will-change:opacity;z-index:0;overflow:hidden}
.hero-bg.on{opacity:1}
.hero-bg i{position:absolute;inset:-2%;display:block;background-size:cover;
  background-position:var(--pos,center);transform:scale(1.02)}
.hero-bg.on i{animation:kenburns 15s linear forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}

/* Velo: legible a la izquierda, la foto respira a la derecha */
.hero-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(8,8,10,.95) 0%,rgba(8,8,10,.86) 26%,rgba(8,8,10,.42) 58%,rgba(8,8,10,.12) 78%,rgba(8,8,10,.5) 100%),
    linear-gradient(to top,rgba(8,8,10,.96) 0%,rgba(8,8,10,.3) 26%,transparent 52%),
    radial-gradient(ellipse 70% 60% at 78% 42%,rgba(243,156,18,.13),transparent 70%)}
.hero-grano{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay}

.hero-in{position:relative;z-index:3;max-width:var(--max);width:100%;margin:0 auto;
  padding:clamp(90px,13vh,150px) 24px clamp(110px,14vh,140px);
  min-height:min(88vh,840px);display:flex;flex-direction:column;justify-content:center}
.hero-txt{max-width:660px}

/* Kicker con regla ámbar que se dibuja */
.hero-kicker{display:flex;align-items:center;gap:13px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ambar);font-weight:700;margin-bottom:20px}
.hero-kicker::before{content:"";width:38px;height:2px;background:var(--grad);
  transform-origin:left;animation:regla .7s var(--ease) both}
@keyframes regla{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero h1{font-size:clamp(42px,7.2vw,88px);line-height:.92;margin:0 0 22px;
  letter-spacing:-.018em;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln>span{display:block;animation:sube .85s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.09s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.18s}
@keyframes sube{from{transform:translateY(104%)}to{transform:translateY(0)}}

.hero p{font-size:clamp(15px,1.25vw,18.5px);color:#C9C9D2;max-width:520px;
  margin:0 0 32px;line-height:1.62;animation:fadeup .8s var(--ease) .26s both;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-btns{animation:fadeup .8s var(--ease) .36s both}
.hero-btns .btn-1{box-shadow:0 8px 30px rgba(243,156,18,.3)}
.hero-btns .btn-2{background:rgba(255,255,255,.06);backdrop-filter:blur(9px);
  border-color:rgba(245,243,239,.28)}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Sellos: lo que el cliente peruano pregunta antes de comprar */
.hero-sellos{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(245,243,239,.13);max-width:600px;
  animation:fadeup .8s var(--ease) .46s both}
.hero-sello{display:flex;align-items:center;gap:8px;font-size:12px;color:#B4B4BE;letter-spacing:.02em}
.hero-sello b{color:var(--hueso);font-weight:600}
.hero-sello::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ambar);box-shadow:0 0 10px rgba(243,156,18,.9);flex-shrink:0}

/* Navegación de slides: barras con progreso real */
.hero-nav{position:absolute;z-index:4;left:0;right:0;bottom:34px;
  max-width:var(--max);margin:0 auto;padding:0 24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-dots{position:static;transform:none;display:flex;gap:10px;align-items:center}
.hero-dot{width:52px;height:3px;background:rgba(245,243,239,.22);border-radius:2px;
  position:relative;overflow:hidden;transition:.3s var(--ease)}
.hero-dot::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ambar)}
.hero-dot:hover{background:rgba(245,243,239,.42)}
.hero-dot.on{width:96px;background:rgba(245,243,239,.2)}
.hero-dot.on::after{animation:barra 7s linear forwards}
@keyframes barra{from{width:0}to{width:100%}}
.hero-num{font-family:var(--tit);font-size:12px;letter-spacing:.2em;color:var(--gris);margin-right:8px}
.hero-num b{color:var(--ambar);font-size:15px}

/* Señal de scroll */
.hero-scroll{display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-2);
  animation:fadeup .8s var(--ease) .7s both}
.hero-scroll i{display:block;width:1px;height:34px;
  background:linear-gradient(to bottom,transparent,rgba(243,156,18,.8));position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;width:1px;height:12px;
  background:var(--hueso);animation:baja 1.9s var(--ease) infinite}
@keyframes baja{0%{top:-12px;opacity:0}35%{opacity:1}100%{top:34px;opacity:0}}

/* ── 2. TARJETAS DE CATEGORÍA CON FOTO ──────────────────────── */
.cats{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cat-card{padding:0;min-height:224px;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--carbon-2);
  transition:transform .38s var(--ease),border-color .3s,box-shadow .38s}
.cat-card .foto{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.01);transition:transform .7s var(--ease),filter .4s;
  filter:saturate(.82) contrast(1.04)}
.cat-card .capa{position:absolute;inset:0;transition:.4s;
  background:linear-gradient(to top,rgba(8,8,10,.95) 8%,rgba(8,8,10,.62) 46%,rgba(8,8,10,.2) 100%)}
.cat-card .cbody{position:relative;z-index:2;padding:20px}
.cat-card .emo{font-size:19px;margin:0 0 8px;display:block;opacity:.85;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.cat-card h3{font-size:17px;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.cat-card .n{font-size:11px;color:#A9A9B4;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.cat-card .flecha{position:absolute;top:16px;right:16px;z-index:2;width:30px;height:30px;
  border-radius:50%;border:1px solid rgba(245,243,239,.28);display:grid;place-items:center;
  font-size:13px;color:var(--hueso);opacity:0;transform:translate(-6px,6px);
  transition:.32s var(--ease);background:rgba(8,8,10,.4);backdrop-filter:blur(6px)}
.cat-card:hover{transform:translateY(-5px);border-color:var(--ambar);box-shadow:var(--sombra-2)}
.cat-card:hover .foto{transform:scale(1.09);filter:saturate(1.05) contrast(1.06)}
.cat-card:hover .capa{background:linear-gradient(to top,rgba(8,8,10,.92) 6%,rgba(90,52,4,.36) 55%,rgba(8,8,10,.14) 100%)}
.cat-card:hover .flecha{opacity:1;transform:none;border-color:var(--ambar);background:var(--ambar);color:#000}
.cat-card::before{z-index:3;width:3px}

/* ── 3. BANDA DE AMBIENTE ───────────────────────────────────── */
.banda{position:relative;overflow:hidden;border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);isolation:isolate;background:#08080A}
.banda .foto{position:absolute;inset:0;background-size:cover;background-position:center 58%;
  transform:scale(1.05);transition:transform 1.8s var(--ease);filter:saturate(.88)}
.banda.rev-on .foto{transform:scale(1)}
.banda .capa{position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.8) 40%,rgba(8,8,10,.3) 72%,rgba(8,8,10,.55) 100%)}
.banda .grano{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay}
.banda-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
  padding:clamp(64px,9vw,112px) 24px}
.banda-txt{max-width:560px}
.banda h2{font-size:clamp(28px,4vw,46px);line-height:.98;margin:14px 0 16px}
.banda h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.banda p{color:#C4C4CE;font-size:16px;line-height:1.65;margin-bottom:28px;max-width:480px}
.banda-datos{display:flex;gap:36px;flex-wrap:wrap;margin-bottom:30px}
.banda-dato .v{font-family:var(--tit);font-size:34px;line-height:1;color:var(--ambar)}
.banda-dato .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:6px}
.banda-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ── 4. SELECTOR DE VEHÍCULO CON MÁS PRESENCIA ──────────────── */
.selector{background:linear-gradient(135deg,#17171B,#0C0C0E 70%);
  box-shadow:var(--sombra-1);position:relative;overflow:hidden}
.selector::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.selector::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(243,156,18,.1),transparent 68%);pointer-events:none}

/* ── 5. DOBLE (tiendas / B2B) CON FOTO ──────────────────────── */
.doble-c{position:relative;overflow:hidden;min-height:268px;display:flex;
  flex-direction:column;justify-content:flex-end;transition:.34s var(--ease)}
.doble-c .foto{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.02);transition:transform .8s var(--ease);filter:saturate(.72)}
.doble-c .capa{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,10,.96) 12%,rgba(8,8,10,.74) 55%,rgba(8,8,10,.36) 100%)}
.doble-c>.kicker,.doble-c>h3,.doble-c>p,.doble-c>a{position:relative;z-index:2}
.doble-c:hover{transform:translateY(-3px);box-shadow:var(--sombra-2)}
.doble-c:hover .foto{transform:scale(1.08)}

/* ── 6. CONFIANZA ───────────────────────────────────────────── */
.confianza{background:linear-gradient(180deg,var(--carbon-2),var(--carbon))}
.conf-item{background:rgba(255,255,255,.022);border:1px solid var(--linea);
  border-radius:var(--r);padding:24px;transition:.28s var(--ease)}
.conf-item:hover{border-color:rgba(243,156,18,.5);background:rgba(243,156,18,.045);transform:translateY(-2px)}
.conf-item .emo{font-size:24px}

/* ── 7. PROFUNDIDAD GENERAL ─────────────────────────────────── */
/* Placeholder de producto: mientras no haya foto real por SKU, que al menos
   se lea como un estudio oscuro y no como una caja vacía. */
.pimg{background:radial-gradient(ellipse 80% 70% at 50% 38%,#26262C,#131317 72%)}
.pimg::before{content:"";position:absolute;inset:0;z-index:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
/* OJO: nada de `.pimg>*{position:relative}` — pisaría el position:absolute
   de .pbadges y .marca-logo y los mandaría al flujo. Solo el emoji lo necesita. */
.pimg .emo{position:relative;z-index:1;opacity:.3;filter:grayscale(.55)}
.gal-main{background:radial-gradient(ellipse 80% 70% at 50% 40%,#26262C,#131317 72%)}

/* Cuando SÍ hay foto de fábrica (fondo blanco de estudio), la celda deja de ser
   un hueco blanco y pasa a ser una "mesa de luz" en hueso de marca:
   - multiply funde el blanco del recorte con la placa, sin halo,
   - contain en vez de cover: ningún producto sale cortado,
   - viñeta inferior para que la placa no flote sobre el carbón. */
/* La placa arranca en blanco puro donde se apoya el producto y solo se apaga
   al pie: así el recorte de estudio funde sin costura y una foto de ambiente
   (las de la ficha son lifestyle) no queda teñida — por eso NADA de multiply. */
/* SIEMPRE `>`: dentro de .pimg también vive el <img> del logo de marca
   (.marca-logo > .mlogo > img). Sin el hijo directo, el logo heredaba
   object-fit/padding y se veía como un bloque verde sólido. */
.pimg:has(>img){background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 58%,#F1EEE9 100%)}
.pimg:has(>img)::before{display:none}
.pimg:has(>img)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 -26px 34px -26px rgba(20,16,10,.26),inset 0 0 0 1px rgba(20,16,10,.07)}
.pimg>img{object-fit:contain;padding:12px;transition:transform .45s var(--ease)}
.pcard:hover .pimg>img{transform:scale(1.05)}
.gal-main:has(>img){background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 62%,#F1EEE9 100%)}
.gal-main>img{object-fit:contain;padding:22px}
.gal-thumb.foto{background:#FFFFFF}
.gal-thumb.foto>img{object-fit:contain;padding:4px}
.pimg{overflow:hidden}
/* El chip de marca conserva su placa hueso: varios logos de fábrica traen fondo
   oscuro horneado (Ironman), así que sin placa se verían como un bloque negro.
   Solo sube de capa para quedar sobre la viñeta y se aclara el texto suelto. */
.pimg:has(>img) .marca-logo,
.pimg:has(>img) .pbadges{z-index:3}
.pimg:has(>img) .marca-logo .mlogo{border:1px solid rgba(20,16,10,.12)}
.pimg:has(>img) .marca{color:#5A564E}

.pcard{transition:transform .3s var(--ease),border-color .25s,box-shadow .3s}
.pcard:hover{border-color:rgba(243,156,18,.45);box-shadow:var(--sombra-2)}
.btn-1:hover{box-shadow:0 6px 22px rgba(243,156,18,.36)}
.marcas-tira .mlogo{transition:.28s var(--ease)}
.marcas-tira a:hover .mlogo{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.5)}

/* ── 8. REVELADO AL SCROLL (solo si hay JS) ─────────────────── */
.js-rev .rev{opacity:0;transform:translateY(22px);
  transition:opacity .72s var(--ease),transform .72s var(--ease)}
.js-rev .rev.rev-on{opacity:1;transform:none}
.js-rev .rev-hijo>*{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-rev .rev-hijo.rev-on>*{opacity:1;transform:none}
.js-rev .rev-hijo.rev-on>*:nth-child(1){transition-delay:.02s}
.js-rev .rev-hijo.rev-on>*:nth-child(2){transition-delay:.07s}
.js-rev .rev-hijo.rev-on>*:nth-child(3){transition-delay:.12s}
.js-rev .rev-hijo.rev-on>*:nth-child(4){transition-delay:.17s}
.js-rev .rev-hijo.rev-on>*:nth-child(5){transition-delay:.21s}
.js-rev .rev-hijo.rev-on>*:nth-child(6){transition-delay:.25s}
.js-rev .rev-hijo.rev-on>*:nth-child(7){transition-delay:.29s}
.js-rev .rev-hijo.rev-on>*:nth-child(8){transition-delay:.33s}

/* ── 9. RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){
  .hero,.hero-in{min-height:min(84vh,700px)}
  /* En vertical el texto baja al pie, así que el velo pesa abajo y la foto
     respira arriba. Un solo degradado: apilar dos apagaba la imagen entera. */
  .hero-velo{background:
    linear-gradient(to top,rgba(8,8,10,.97) 6%,rgba(8,8,10,.93) 44%,rgba(8,8,10,.6) 62%,rgba(8,8,10,.22) 84%,rgba(8,8,10,.1) 100%)}
  .hero-bg i{background-position:50% 36% !important}
  .hero-in{justify-content:flex-end;padding-bottom:118px}
  .banda .capa{background:linear-gradient(to top,rgba(8,8,10,.96) 10%,rgba(8,8,10,.78) 55%,rgba(8,8,10,.5) 100%)}
}
@media(max-width:760px){
  /* La nav se desplaza en horizontal: un degradado a la derecha lo avisa. */
  .nav{position:relative}
  .nav::after{content:"";position:absolute;right:0;top:0;bottom:0;width:44px;
    background:linear-gradient(to left,#000 22%,transparent);pointer-events:none;z-index:2}
  .hero h1{font-size:clamp(34px,10vw,52px)}
  .hero p{font-size:15px;margin-bottom:24px}
  .hero-sellos{gap:12px 18px;margin-top:24px;padding-top:16px}
  .hero-sello{font-size:11px}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{width:100%}
  .hero-nav{bottom:20px;padding:0 16px}
  .hero-scroll{display:none}
  .hero-dot{width:34px}
  .hero-dot.on{width:58px}
  .cat-card{min-height:184px}
  .cats{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
  .banda-datos{gap:24px}
  .banda-dato .v{font-size:27px}
  .selector{padding:24px 20px}
}

/* ── 10. Accesibilidad: sin movimiento si el sistema lo pide ── */
@media(prefers-reduced-motion:reduce){
  /* animation-delay también a 0: si solo se acorta la duración, el escalonado
     de .26s/.36s/.46s sigue dejando el hero en su estado inicial (invisible). */
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0s !important}
  .js-rev .rev,.js-rev .rev-hijo>*{opacity:1 !important;transform:none !important}
  .hero p,.hero-btns,.hero-sellos,.hero-scroll{opacity:1 !important;transform:none !important}
  .hero h1 .ln>span{transform:none !important}
}

/* ══════════════════════════════════════════════════════════════════
   10-sep-2026 — Auditoría de ciberseguridad
   El panel "CRM Twenty" es una herramienta INTERNA: renderiza el
   payload de cada cotización con los datos personales del cliente
   (nombre, teléfono, email, empresa). No puede estar accesible en la
   web pública. app.js añade la clase .publico al <html> cuando NO
   estamos en localhost / red interna.
   ══════════════════════════════════════════════════════════════════ */
html.publico .crm-toggle,
html.publico .crm-panel { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   12-sep-2026 — Pantalla de entrada (splash)
   Antes, lo primero que veía el cliente era un emoji 🏜️ con "Cargando
   catálogo…". Ahora entra la marca: logo sobre carbón, una barra ámbar
   que avanza como un horizonte y una línea de copy. Se pinta desde el
   HTML para que exista en el primer frame; app.js le pone .fuera.
   ══════════════════════════════════════════════════════════════════ */
.splash{position:fixed;inset:0;z-index:9999;background:var(--carbon);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .45s ease,visibility .45s ease}
/* El degradado de marca, muy tenue, para que el fondo no sea un negro plano. */
.splash::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 62%,rgba(243,156,18,.10),transparent 70%)}
.splash.fuera{opacity:0;visibility:hidden}
.splash-in{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:22px;padding:0 24px;text-align:center}
.splash-logo{height:74px;width:auto;opacity:0;animation:splashLogo .7s ease .05s forwards}
.splash-barra{width:190px;height:2px;background:var(--linea);
  border-radius:2px;overflow:hidden}
.splash-barra i{display:block;height:100%;width:40%;border-radius:2px;
  background:var(--grad);animation:splashBarra 1.15s ease-in-out infinite}
.splash-txt{font-family:var(--tit);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gris);margin:0}
@keyframes splashLogo{from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}}
/* La barra cruza de lado a lado: lectura de "avance", no de porcentaje real
   (el fetch no reporta progreso, así que un % sería mentira).
   El recorrido termina en 250% (= 40% de ancho × 250% ≈ el borde derecho): con un
   rango mayor el relleno quedaba fuera del riel y se veía una barra vacía. */
@keyframes splashBarra{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media(max-width:520px){.splash-logo{height:56px}.splash-barra{width:150px}}
/* Sin animación: el logo se queda quieto y visible, nunca invisible. */
@media(prefers-reduced-motion:reduce){
  .splash-logo{opacity:1 !important;animation:none !important}
  .splash-barra i{width:100% !important;animation:none !important}
}