/* ============================================================
   SANTIAGO RZR v3.0 — PREMIUM IDENTITY SYSTEM
   Capa visual adicional: cursor, grain, topografía, parallax,
   3D, contadores, footer dramático, preloader, scroll progress,
   ripple, showroom, comparador, slider antes/después, elevación.
   Se carga después de theme.css para extender sin sobrescribir.
   ============================================================ */

:root{
  --sra-amber:#f0a623;
  --sra-amber-2:#ffb838;
  --sra-live:#3bea96;
  --sra-grad-brand:linear-gradient(135deg,var(--sra-brand),var(--sra-amber));
  --sra-grad-dust:linear-gradient(180deg,rgba(240,166,35,.06),transparent 50%);
  --sra-tile:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.015) 49%,rgba(255,255,255,.015) 51%,transparent 52%);
}

/* --- Grano fotográfico global --- */
body:after{
  content:'';
  position:fixed;
  z-index:2;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:var(--sra-grain,none),radial-gradient(circle at 25% 35%,rgba(255,255,255,.15) 0 .5px,transparent 1px),radial-gradient(circle at 75% 65%,rgba(255,255,255,.1) 0 .5px,transparent 1px);
  background-size:auto,4px 4px,6px 6px;
  mix-blend-mode:overlay;
}
body.sra-grain-off:after{display:none}

/* --- Patrón topográfico en secciones oscuras --- */
.sra-hero-v3,.sra-reviews,.sra-trust,.sra-vehicle-selection,.sra-booking-gate,.sra-home-cta{
  background-image:var(--sra-tile)!important;
  background-size:42px 42px;
}

/* --- Cursor personalizado (anillo decorativo, el cursor del sistema permanece) --- */
@media(hover:hover) and (pointer:fine){
  .sra-cursor{
    position:fixed;z-index:99999;top:0;left:0;
    width:32px;height:32px;margin:-16px 0 0 -16px;
    border:1.5px solid var(--sra-brand);border-radius:50%;
    pointer-events:none;
    transition:width .2s ease,height .2s ease,margin .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease;
    mix-blend-mode:difference;will-change:transform;
  }
  .sra-cursor.is-hover{
    width:52px;height:52px;margin:-26px 0 0 -26px;
    background:rgba(227,6,19,.15);border-color:var(--sra-amber);
  }
  .sra-cursor.is-text{
    width:3px;height:24px;margin:-12px 0 0 -1px;
    border-radius:1px;background:var(--sra-brand);border:0;
  }
  .sra-cursor-dot{
    position:fixed;z-index:99999;top:0;left:0;
    width:4px;height:4px;margin:-2px 0 0 -2px;
    background:var(--sra-brand);border-radius:50%;
    pointer-events:none;will-change:transform;
  }
}
@media(hover:none),(pointer:coarse){.sra-cursor,.sra-cursor-dot{display:none!important}}

/* --- Preloader de marca --- */
.sra-preloader{
  position:fixed;z-index:100000;inset:0;
  display:grid;place-items:center;
  background:#08090a;
  transition:opacity .5s ease,visibility .5s ease;
}
.sra-preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.sra-preloader-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.sra-preloader-logo{max-width:180px;filter:brightness(1.1)}
.sra-preloader-bar{
  width:160px;height:2px;
  background:rgba(255,255,255,.1);
  overflow:hidden;border-radius:1px;
}
.sra-preloader-bar span{
  display:block;height:100%;
  background:var(--sra-grad-brand);
  transform:scaleX(0);transform-origin:left;
  animation:sraPreloadFill 1.4s ease-out forwards;
}
@keyframes sraPreloadFill{to{transform:scaleX(1)}}
.sra-preloader-text{
  color:var(--sra-muted);font-size:.62rem;
  font-weight:800;letter-spacing:.2em;text-transform:uppercase;
}

/* --- Barra de progreso de scroll global --- */
.sra-scroll-progress{
  position:fixed;z-index:9997;top:0;left:0;
  width:100%;height:3px;background:transparent;pointer-events:none;
}
.sra-scroll-progress span{
  display:block;height:100%;
  background:var(--sra-grad-brand);
  transform:scaleX(0);transform-origin:left;will-change:transform;
}
body.admin-bar .sra-scroll-progress{top:32px}

/* --- Hero parallax 3D --- */
.sra-hero-v3{perspective:1200px}
.sra-hero-parallax{position:absolute;inset:-5%;z-index:-3;will-change:transform}
.sra-hero-parallax>div{
  position:absolute;inset:0;
  background-position:center;background-size:cover;will-change:transform;
}
.sra-hero-parallax .sra-parallax-back{transform:translateZ(-80px) scale(1.15);z-index:1}
.sra-hero-parallax .sra-parallax-mid{transform:translateZ(-30px) scale(1.08);z-index:2}
.sra-hero-parallax .sra-parallax-front{transform:translateZ(0);z-index:3}
.sra-hero-parallax img{position:absolute;object-fit:cover}
.sra-hero-parallax .sra-parallax-mid img{
  bottom:0;max-width:50%;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
.sra-hero-dust{
  position:absolute;z-index:4;inset:0;pointer-events:none;
  opacity:.15;
  background:radial-gradient(ellipse at 70% 80%,rgba(240,166,35,.3),transparent 50%);
  mix-blend-mode:screen;
}
@media(max-width:782px){.sra-hero-parallax .sra-parallax-mid img{max-width:70%}}
@media(prefers-reduced-motion:reduce){.sra-hero-parallax>div{transform:none!important}}

/* --- Contadores animados --- */
.sra-count-up{display:inline-block;font-variant-numeric:tabular-nums}
.sra-hero-stats strong.sra-has-suffix:after{
  content:attr(data-suffix);
  font-size:.5em;margin-left:2px;color:var(--sra-amber);
}

/* --- Tarjetas de unidades con inclinación 3D --- */
.sra-vehicle-card{transform-style:preserve-3d;perspective:1000px}
.sra-vehicle-card.sra-tilt{
  transition:transform .15s ease-out,box-shadow .45s ease,border-color .3s ease;
}
.sra-vehicle-card.sra-tilt .sra-vehicle-media img{transform:translateZ(20px)}
.sra-vehicle-card.sra-tilt .sra-vehicle-body{transform:translateZ(15px)}
.sra-vehicle-card.sra-tilt .sra-vehicle-badges{transform:translateZ(40px)}
@media(prefers-reduced-motion:reduce){
  .sra-vehicle-card.sra-tilt .sra-vehicle-media img,
  .sra-vehicle-card.sra-tilt .sra-vehicle-body,
  .sra-vehicle-card.sra-tilt .sra-vehicle-badges{transform:none}
}

/* --- Botones con ripple --- */
.sra-btn,.wp-element-button{overflow:hidden;position:relative}
.sra-ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.3);
  transform:scale(0);
  animation:sraRipple .6s ease-out;pointer-events:none;
}
@keyframes sraRipple{to{transform:scale(4);opacity:0}}
@media(prefers-reduced-motion:reduce){.sra-ripple{display:none}}

/* --- Links con underline animado --- */
.sra-text-link,.sra-service-card a,.sra-footer a:not(.sra-brand-logo):not(.wp-element-button){position:relative}
.sra-text-link:after,.sra-service-card a:after{
  content:'';position:absolute;right:0;bottom:-2px;left:0;
  height:1px;background:var(--sra-brand);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.sra-text-link:hover:after,.sra-service-card:hover a:after{transform:scaleX(1)}

/* --- Sección de modalidades --- */
.sra-services{position:relative}
.sra-service-grid{position:relative}

/* --- Banner de aventura con scroll horizontal --- */
.sra-adventure-scroll{position:relative;overflow:hidden;min-height:500px}
.sra-adventure-scroll-track{display:flex;gap:0;height:100%;will-change:transform}
.sra-adventure-slide{
  flex:0 0 100%;position:relative;min-height:500px;
  background-position:center;background-size:cover;
}
.sra-adventure-slide:before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,7,9,.96),rgba(5,7,9,.4) 60%,rgba(5,7,9,.15));
}
.sra-adventure-slide .sra-container{
  position:relative;z-index:2;display:flex;align-items:center;min-height:500px;
}
.sra-adventure-nav{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:5;
}
.sra-adventure-nav button{
  width:30px;height:3px;border:0;
  background:rgba(255,255,255,.3);cursor:pointer;
  transition:background .3s ease;
}
.sra-adventure-nav button.is-active{background:var(--sra-brand)}
@media(max-width:782px){
  .sra-adventure-scroll{min-height:400px}
  .sra-adventure-slide{min-height:400px}
}

/* --- Footer dramático --- */
.sra-footer{position:relative;padding-top:0;overflow:hidden}
.sra-footer-mountains{
  width:100%;height:120px;margin-bottom:-1px;
  filter:drop-shadow(0 -5px 10px rgba(0,0,0,.3));
}
.sra-footer-mountains svg{display:block;width:100%;height:100%}
.sra-footer-brand{
  font-family:var(--sra-display);
  font-size:clamp(4rem,16vw,16rem);
  line-height:.85;letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  text-align:center;margin:40px 0 20px;
  pointer-events:none;user-select:none;overflow:hidden;white-space:nowrap;
}
.sra-footer-brand:after{
  content:'4×4';display:block;font-size:.3em;
  -webkit-text-stroke:0;color:var(--sra-brand);letter-spacing:.1em;
}

/* --- Divisores de sección con sierra --- */
.sra-mountain-divider{position:relative;height:60px;overflow:hidden;line-height:0}
.sra-mountain-divider svg{position:absolute;bottom:0;width:100%;height:100%}

/* --- Badge "EN VIVO" para disponibilidad --- */
.sra-vehicle-badges .sra-availability.is-available{position:relative}
.sra-vehicle-badges .sra-availability.is-available:after{
  content:'LIVE';position:absolute;top:-5px;right:-5px;
  padding:1px 4px;background:var(--sra-live);color:#0b0d0f;
  font-size:.4rem;font-weight:900;border-radius:2px;letter-spacing:.05em;
}

/* --- Comparador de unidades --- */
.sra-compare-bar{
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
  padding:12px 18px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
}
.sra-compare-bar button{
  padding:8px 16px;border:1px solid var(--sra-brand);
  background:transparent;color:var(--sra-brand);
  font-size:.65rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;border-radius:4px;
  transition:background .2s ease,color .2s ease;
}
.sra-compare-bar button:hover{background:var(--sra-brand);color:#fff}
.sra-compare-bar span{color:var(--sra-muted);font-size:.7rem}
.sra-compare-overlay{
  position:fixed;z-index:9000;inset:0;display:none;place-items:center;
  padding:40px;background:rgba(2,4,6,.92);backdrop-filter:blur(12px);
}
.sra-compare-overlay.is-open{display:grid}
.sra-compare-panel{
  width:min(1100px,100%);max-height:80vh;overflow:auto;
  background:#12161b;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:32px;position:relative;
}
.sra-compare-panel h2{font-family:var(--sra-display);font-size:2rem;margin:0 0 24px}
.sra-compare-table{width:100%;border-collapse:collapse}
.sra-compare-table th,.sra-compare-table td{
  padding:14px 16px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:.82rem;
}
.sra-compare-table th{
  color:var(--sra-amber);font-weight:900;text-transform:uppercase;
  font-size:.65rem;letter-spacing:.1em;
}
.sra-compare-close{
  position:absolute;top:20px;right:20px;
  width:42px;height:42px;border:1px solid rgba(255,255,255,.25);
  border-radius:50%;background:rgba(4,6,8,.7);
  color:#fff;font-size:1.5rem;cursor:pointer;
}
.sra-compare-close:hover{border-color:var(--sra-brand);background:var(--sra-brand)}

/* --- Slider antes/después --- */
.sra-compare-slider{position:relative;overflow:hidden;border-radius:12px;user-select:none}
.sra-compare-slider img{display:block;width:100%;height:auto}
.sra-compare-before,.sra-compare-after{
  position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;
}
.sra-compare-after{clip-path:inset(0 0 0 50%)}
.sra-compare-after img{position:absolute;top:0;left:0;width:100%;max-width:none}
.sra-compare-handle{
  position:absolute;top:0;left:50%;width:3px;height:100%;
  background:var(--sra-brand);cursor:ew-resize;z-index:2;
}
.sra-compare-handle:after{
  content:'⇄';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--sra-brand);color:#fff;font-size:1.2rem;
}
.sra-compare-label{
  position:absolute;top:16px;padding:6px 12px;
  background:rgba(0,0,0,.7);color:#fff;
  font-size:.65rem;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;border-radius:4px;z-index:3;
}
.sra-compare-label-before{left:16px}
.sra-compare-label-after{right:16px}

/* --- Perfil de elevación SVG --- */
.sra-elevation-profile{
  position:relative;padding:24px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
}
.sra-elevation-profile svg{width:100%;height:auto;display:block}
.sra-elevation-path{
  fill:none;stroke:var(--sra-brand);stroke-width:2;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 2s ease;
}
.sra-elevation-profile.is-visible .sra-elevation-path{stroke-dashoffset:0}
.sra-elevation-fill{fill:url(#sraElevGrad);opacity:0;transition:opacity 1s ease .5s}
.sra-elevation-profile.is-visible .sra-elevation-fill{opacity:.15}

/* --- View Transitions API --- */
@supports(view-transition-name:none){
  ::view-transition-old(root),::view-transition-new(root){
    animation-duration:.3s;animation-timing-function:ease;
  }
}

/* --- Ken Burns ampliado --- */
@keyframes sraKenBurns{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.08) translate(-1%,-1%)}
}
.sra-adventure,.sra-page-hero{
  animation:sraKenBurns 18s ease-in-out infinite alternate,sraBannerDrift 16s ease-in-out infinite alternate;
}
@media(prefers-reduced-motion:reduce){
  .sra-adventure,.sra-page-hero{animation:none!important}
}

/* --- Hover de iconos de servicio con rotación 3D --- */
.sra-service-icon{transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s ease}
.sra-service-card:hover .sra-service-icon{transform:rotate(180deg);border-color:var(--sra-amber)}
@media(prefers-reduced-motion:reduce){.sra-service-card:hover .sra-service-icon{transform:none}}

/* --- Galería de vehículo (showroom) --- */
.sra-vehicle-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.sra-vehicle-gallery img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:4px;cursor:pointer;transition:opacity .2s ease;
}
.sra-vehicle-gallery img:hover{opacity:.7}
.sra-vehicle-lightbox{
  position:fixed;z-index:9500;inset:0;display:none;place-items:center;
  padding:40px;background:rgba(2,4,6,.95);backdrop-filter:blur(16px);
}
.sra-vehicle-lightbox.is-open{display:grid}
.sra-vehicle-lightbox img{
  max-width:90vw;max-height:80vh;border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.sra-vehicle-lightbox>button{
  position:absolute;top:24px;right:24px;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.25);
  border-radius:50%;background:rgba(4,6,8,.7);
  color:#fff;font-size:1.5rem;cursor:pointer;
}
.sra-vehicle-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border:1px solid rgba(255,255,255,.25);
  border-radius:50%;background:rgba(4,6,8,.7);
  color:#fff;font-size:1.5rem;cursor:pointer;display:grid;place-items:center;
}
.sra-vehicle-lightbox-prev{left:24px}
.sra-vehicle-lightbox-next{right:24px}
.sra-vehicle-lightbox-nav:hover{border-color:var(--sra-brand);background:var(--sra-brand)}

/* --- Badges de dificultad --- */
.sra-difficulty{display:inline-flex;gap:3px;align-items:center}
.sra-difficulty i{width:4px;height:14px;background:rgba(255,255,255,.15);border-radius:1px}
.sra-difficulty i:nth-child(-n+1){background:var(--sra-live)}
.sra-difficulty.is-medium i:nth-child(-n+2){background:var(--sra-amber)}
.sra-difficulty.is-high i:nth-child(-n+3){background:var(--sra-brand)}
.sra-difficulty.is-extreme i{background:var(--sra-brand)}
.sra-difficulty.is-extreme i:nth-child(4){background:var(--sra-amber);animation:sraPulse 1.5s infinite}

/* --- Sección CTA final con video --- */
.sra-home-cta{position:relative}

/* --- Responsive v3.0 --- */
@media(max-width:782px){
  .sra-footer-brand{font-size:clamp(3rem,18vw,8rem)}
  .sra-footer-mountains{height:60px}
  .sra-vehicle-gallery{grid-template-columns:repeat(3,1fr)}
  .sra-compare-overlay{padding:20px}
  .sra-compare-panel{padding:20px}
}
@media(max-width:520px){
  .sra-vehicle-gallery{grid-template-columns:repeat(2,1fr)}
  .sra-footer-brand{font-size:clamp(2.5rem,20vw,6rem)}
  .sra-preloader-logo{max-width:140px}
}
@media(prefers-reduced-motion:reduce){
  .sra-hero-dust,.sra-vehicle-badges .sra-availability.is-available:after{animation:none!important}
  .sra-preloader-bar span{animation:none;transform:scaleX(1)}
  .sra-preloader{transition:none}
  .sra-adventure,.sra-page-hero{animation:none!important}
}