/* =========================================================
   GIRYX HOME CSS (DARK default / CLEAN via body.theme-clean)
   - 100% funcional en /public/css/home.css
   - SIN {{ asset() }} (Blade NO procesa CSS estático)
   - UN SOLO FONDO (giryx-animated-bg)
   ========================================================= */

/* ===============================
   1) VARIABLES (DARK DEFAULT)
   =============================== */
:root{
  --gx-text: #faf7fa;
  --gx-muted: rgba(250,247,250,0.78);

  --gx-card-bg: rgba(15, 15, 15, 0.86);
  --gx-card-border: rgba(250, 247, 250, 0.10);

  --gx-shadow-1: 0 18px 45px rgba(0,0,0,0.75);
  --gx-shadow-2: inset 0 0 0 1px rgba(255,255,255,0.03);

  --gx-header-bg: rgba(10,10,10,0.55);
  --gx-header-border: rgba(250,247,250,0.08);

  --gx-toggle-bg: rgba(15,23,42,0.96);
  --gx-toggle-text: #e5e7eb;
  --gx-toggle-border: rgba(148,163,184,0.6);
}

/* ===============================
   2) VARIABLES (CLEAN)
   =============================== */
body.theme-clean{
  --gx-text: #111827;
  --gx-muted: #4b5563;

  --gx-card-bg: #ffffff;
  --gx-card-border: rgba(15,23,42,0.08);

  --gx-shadow-1: 0 18px 45px rgba(15,23,42,0.06);
  --gx-shadow-2: none;

  --gx-header-bg: rgba(255,255,255,0.96);
  --gx-header-border: rgba(15,23,42,0.08);

  --gx-toggle-bg: #ffffff;
  --gx-toggle-text: #0f172a;
  --gx-toggle-border: rgba(148,163,184,0.7);
}

/* ===============================
   3) BASE GLOBAL (sin doble fondo)
   =============================== */
html, body{ height: 100%; }

body{
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  color: var(--gx-text);
}

/* Desactiva viñeta vieja si existía */
body::before{ display:none !important; }

/* Texto global para tu root */
.gx-theme-text{ color: var(--gx-text) !important; }

/* ===============================
   4) FONDO ANIMADO (ÚNICO)
   IMPORTANTE: rutas reales a /public/images/...
   =============================== */
.giryx-animated-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* DARK default */
  background-image: url("/images/fondos/giryx-hero.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 120% 120%;

  transform: translateZ(0);
  will-change: background-position, background-size, filter;

  animation: giryxPanZoom 7s ease-in-out infinite alternate;
  filter: saturate(1.05) contrast(1.05);
}

/* Viñeta/overlay SOLO en dark */
.giryx-animated-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.58) 78%);
}

/* CLEAN: cambia imagen + elimina overlay oscuro */
body.theme-clean .giryx-animated-bg{
  background-image: url("/images/fondos/giryx-hero-clean.png");
  opacity: 0.78;
  filter: saturate(1.02) contrast(1.02);
}

body.theme-clean .giryx-animated-bg::after{ background:none; }

@keyframes giryxPanZoom{
  0%   { background-position: 46% 55%; background-size: 120% 120%; }
  50%  { background-position: 54% 45%; background-size: 128% 128%; }
  100% { background-position: 50% 52%; background-size: 122% 122%; }
}

@media (max-width: 768px){
  .giryx-animated-bg{
    background-size: cover;
    background-position: top;
    animation-duration: 9s;
  }
}
@media (prefers-reduced-motion: reduce){
  .giryx-animated-bg{ animation:none !important; }
}

/* ===============================
   5) HEADER / NAV
   =============================== */
.gx-main-header.gx-header--top,
.gx-main-header.gx-header--scrolled{
  background-color: var(--gx-header-bg);
  border-bottom-color: var(--gx-header-border);
}

body.theme-clean .gx-main-header.gx-header--top,
body.theme-clean .gx-main-header.gx-header--scrolled{
  box-shadow: 0 18px 40px rgba(15,23,42,0.10);
}

/* ===============================
   6) CARDS (si usás .gx-card)
   =============================== */
.gx-card{
  background: var(--gx-card-bg);
  border: 1px solid var(--gx-card-border);
  border-radius: 18px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: var(--gx-shadow-1), var(--gx-shadow-2);
}

body.theme-clean .gx-card{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.gx-card-title{ color: var(--gx-text); font-weight: 600; }
.gx-card-text{ color: var(--gx-muted); }

/* ===============================
   7) STRIP MARCAS
   =============================== */
.gx-brand-strip{
  position: relative;
  overflow: hidden;
  padding-block: 0.75rem;
}

.gx-brand-strip::before,
.gx-brand-strip::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:45px;
  pointer-events:none;
  z-index:10;
}

.gx-brand-strip::before{ left:0;  background: linear-gradient(to right, #0a0a0a, transparent); }
.gx-brand-strip::after{  right:0; background: linear-gradient(to left,  #0a0a0a, transparent); }

body.theme-clean .gx-brand-strip::before{ background: linear-gradient(to right, #f9fafb, transparent); }
body.theme-clean .gx-brand-strip::after{  background: linear-gradient(to left,  #f9fafb, transparent); }

.gx-brand-track{
  display:flex;
  width:max-content;
  align-items:center;
  animation: gxBrandScroll 35s linear infinite;
  will-change: transform;
}

.gx-brand-track-inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
}

.gx-brand-track-inner:first-child{ margin-right: 1.5rem; }
.gx-brand-strip:hover .gx-brand-track{ animation-play-state: paused; }

@keyframes gxBrandScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.gx-brand-logo{
  height:50px;
  width:auto;
  opacity:0.78;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.6));
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}
.gx-brand-logo:hover{
  opacity:1;
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.9));
}

@media (prefers-reduced-motion: reduce){
  .gx-brand-track{ animation: none !important; transform: none !important; }
}

/* ===============================
   8) STRIP ESCAPES
   =============================== */
.gx-escapes-strip{
  position:relative;
  overflow:hidden;
  padding-block:.5rem;
  margin-top:.5rem;
}

.gx-escapes-strip::before,
.gx-escapes-strip::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:55px;
  pointer-events:none;
  z-index:10;
}

.gx-escapes-strip::before{ left:0;  background: linear-gradient(to right, #050509, transparent); }
.gx-escapes-strip::after{  right:0; background: linear-gradient(to left,  #050509, transparent); }

body.theme-clean .gx-escapes-strip::before{ background: linear-gradient(to right, #f3f4f6, transparent); }
body.theme-clean .gx-escapes-strip::after{  background: linear-gradient(to left,  #f3f4f6, transparent); }

.gx-escapes-track{
  display:flex;
  width:max-content;
  align-items:stretch;
  animation: gxEscapesScroll 38s linear infinite;
  will-change: transform;
}
.gx-escapes-track-inner{
  display:flex;
  align-items:stretch;
  gap:1rem;
}
.gx-escapes-track-inner:first-child{ margin-right: 1rem; }
.gx-escapes-strip:hover .gx-escapes-track{ animation-play-state: paused; }

@keyframes gxEscapesScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Tile */
.gx-escapes-item{
  position:relative;
  flex: 0 0 230px;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;

  background:
    radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(to bottom, #15151f, #050509);

  box-shadow:
    0 18px 45px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(255,255,255,0.03);

  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.gx-escapes-item:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.95),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  filter: saturate(1.05);
}

body.theme-clean .gx-escapes-item{
  background:
    radial-gradient(circle at top, rgba(15,23,42,0.04), transparent 55%),
    linear-gradient(to bottom, #ffffff, #f3f4f6);
  box-shadow:
    0 16px 35px rgba(15,23,42,0.07),
    inset 0 0 0 1px rgba(15,23,42,0.03);
}

/* Overlay info */
.gx-escapes-info{
  position:absolute;
  inset-inline:0;
  bottom:0;
  padding:.55rem .7rem .6rem;
  background: linear-gradient(to top, rgba(0,0,0,0.90), rgba(0,0,0,0.4), transparent);
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
body.theme-clean .gx-escapes-info{
  background: linear-gradient(to top, rgba(255,255,255,0.92), rgba(255,255,255,0.55), transparent);
}

.gx-escapes-name{ font-size:.78rem; font-weight:600; line-height:1.2; color: var(--gx-text); }
.gx-escapes-cat{ font-size:.67rem; color: var(--gx-muted); }
.gx-escapes-price{ font-size:.75rem; font-weight:600; color:#c12b35; }

@media (max-width:768px){
  .gx-escapes-track{ animation-duration: 46s; }
}
@media (prefers-reduced-motion: reduce){
  .gx-escapes-track{ animation: none !important; transform:none !important; }
}

/* ===============================
   9) THEME TOGGLE BUTTON
   =============================== */
#gxThemeToggle{
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 95;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;

  background-color: var(--gx-toggle-bg);
  color: var(--gx-toggle-text);
  border: 1px solid var(--gx-toggle-border);

  box-shadow: 0 15px 30px rgba(0,0,0,0.45);
  cursor: pointer;

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
#gxThemeToggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

/* ===============================
   10) MODAL PANEL (clean)
   =============================== */
body.theme-clean #escapeModalPanel{
  background-color: #ffffff;
  border-color: rgba(15,23,42,0.12);
}

/* =========================================================
   11) CLEAN MODE OVERRIDES (para Tailwind hardcodeado en home)
   - Esto es lo que hace que el clean “se note” aunque tengas:
     text-[#faf7fa]/xx, bg-black/xx, border-[#faf7fa]/xx
   ========================================================= */
body.theme-clean .gx-page-root{ color:#111827 !important; }
body.theme-clean #hero,
body.theme-clean section,
body.theme-clean footer{ color:#111827 !important; }

/* Borders típicos */
body.theme-clean .border-\[\#faf7fa\]\/10,
body.theme-clean .border-\[\#faf7fa\]\/12,
body.theme-clean .border-\[\#faf7fa\]\/8,
body.theme-clean .border-\[\#faf7fa\]\/25,
body.theme-clean .border-\[\#faf7fa\]\/30,
body.theme-clean .border-\[\#faf7fa\]\/35,
body.theme-clean .border-\[\#faf7fa\]\/40{
  border-color: rgba(15,23,42,0.10) !important;
}

/* Textos hardcodeados */
body.theme-clean .text-\[\#faf7fa\]{ color:#111827 !important; }
body.theme-clean .text-\[\#faf7fa\]\/90{ color: rgba(17,24,39,0.90) !important; }
body.theme-clean .text-\[\#faf7fa\]\/85{ color: rgba(17,24,39,0.85) !important; }
body.theme-clean .text-\[\#faf7fa\]\/80{ color: rgba(17,24,39,0.80) !important; }
body.theme-clean .text-\[\#faf7fa\]\/75{ color: rgba(17,24,39,0.75) !important; }
body.theme-clean .text-\[\#faf7fa\]\/70{ color: rgba(17,24,39,0.70) !important; }
body.theme-clean .text-\[\#faf7fa\]\/60{ color: rgba(17,24,39,0.60) !important; }
body.theme-clean .text-\[\#faf7fa\]\/55{ color: rgba(17,24,39,0.55) !important; }
body.theme-clean .text-\[\#faf7fa\]\/50{ color: rgba(17,24,39,0.50) !important; }
body.theme-clean .text-\[\#faf7fa\]\/45{ color: rgba(17,24,39,0.45) !important; }
body.theme-clean .text-\[\#faf7fa\]\/40{ color: rgba(17,24,39,0.40) !important; }

/* Fondos negros transparentes → blancos */
body.theme-clean .bg-black\/80,
body.theme-clean .bg-black\/70,
body.theme-clean .bg-black\/60,
body.theme-clean .bg-black\/40{
  background-color: rgba(255,255,255,0.85) !important;
}

/* bg-[#050509] → blanco */
body.theme-clean .bg-\[\#050509\]{
  background-color: #ffffff !important;
}

/* Hero drop-shadows muy oscuros */
body.theme-clean #hero .drop-shadow-\[0_0_20px_rgba\(0\,0\,0\,0\.8\)\]{
  filter: none !important;
}

/* Ajuste sección marcas */
body.theme-clean #marcas{
  background-color: rgba(255,255,255,0.80) !important;
  border-top-color: rgba(15,23,42,0.10) !important;
}

/* Footer claro (si lo querés oscuro, borrá este bloque) */
body.theme-clean footer{
  background-color: #ffffff !important;
  border-top-color: rgba(15,23,42,0.10) !important;
}
body.theme-clean footer *{
  color: rgba(17,24,39,0.70) !important;
}
/* =========================================================
   12) ESCAPES PRO PATCH (Mobile snap + Glow + Reveal)
   Pegar al FINAL del home.css
   ========================================================= */

/* ---------- Reveal reusable ---------- */

/* ---------- Premium glow sin romper tu gx-escapes-item ---------- */
/* Usa variables de posición --mx/--my (las setea JS) */
.gx-escapes-item{
  position: relative; /* ya lo tenías, lo refuerzo */
  isolation: isolate;
}
.gx-escapes-item::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  pointer-events:none;
  opacity: 0;
  transition: opacity .25s ease;
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,50%),
      rgba(22,89,145,.18), transparent 45%),
    radial-gradient(420px circle at calc(var(--mx,50%) + 80px) calc(var(--my,50%) + 60px),
      rgba(193,43,53,.14), transparent 52%);
  z-index: 0;
}
.gx-escapes-item:hover::before{ opacity: 1; }

/* Asegura que contenido quede arriba del glow */
.gx-escapes-img-wrap,
.gx-escapes-info,
.gx-escapes-badge{ position: relative; z-index: 1; }

/* micro-mejora del hover (más “pro” sin exagerar) */

/* ---------- Mobile: reemplaza marquee por swipe snap ---------- */
/* En mobile el track infinito es menos usable: lo pasamos a scroll */
@media (max-width: 640px){

  /* anulamos animación y convertimos el contenedor en scroll horizontal */
  .gx-escapes-strip{
    padding-block: .25rem;
    overflow: visible; /* el scroll lo hace el track */
  }

  /* apagamos los fade laterales en mobile para que no “tapen” el swipe */
  .gx-escapes-strip::before,
  .gx-escapes-strip::after{
    display: none !important;
  }

  .gx-escapes-track{
    animation: none !important;
    transform: none !important;

    width: auto !important;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 10px;
    gap: 12px;
  }

  /* Pista duplicada: en mobile NO la mostramos (evita repetición) */
  .gx-escapes-track-inner[aria-hidden="true"]{
    display: none !important;
  }

  .gx-escapes-track-inner{
    display: flex;
    gap: 12px;
  }

  /* Card tamaño mobile (tap-friendly) */
  .gx-escapes-item{
    flex: 0 0 78%;
    scroll-snap-align: center;
    border-radius: 20px;
  }

  /* imagen un toque más alta en mobile */
  .gx-escapes-img-wrap{
    height: 190px;
  }

  /* scrollbar prolija */
  .gx-escapes-track::-webkit-scrollbar{ height: 8px; }
  .gx-escapes-track::-webkit-scrollbar-track{
    background: rgba(250,247,250,.08);
    border-radius: 999px;
  }
  .gx-escapes-track::-webkit-scrollbar-thumb{
    background: rgba(250,247,250,.18);
    border-radius: 999px;
  }

  body.theme-clean .gx-escapes-track::-webkit-scrollbar-track{
    background: rgba(15,23,42,.08);
  }
  body.theme-clean .gx-escapes-track::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,.18);
  }
}

/* ---------- Modal: sensación más premium (sin tocar tu HTML) ---------- */
#escapeModalPanel{
  will-change: transform, opacity;
}
#escapeModalBackdrop{
  will-change: opacity;
}

/* ---------- Preferencias de movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  .gx-escapes-item,
  .gx-escapes-item::before{
    transition: none !important;
  }
  .gx-escapes-item:hover{
    transform: none !important;
  }
}
/* =========================================================
   WEBFLOW-LIKE SCROLL REVEALS (PRO)
   ========================================================= */

/* Base */
.gx-wf {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(10px);
  transition-property: opacity, transform, filter;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(.2,.8,.2,1); /* feel webflow */
  will-change: opacity, transform, filter;
}

/* Visible */
.gx-wf.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Variants (ponés UNA) */
.gx-wf[data-anim="fade-up"] { transform: translate3d(0, 18px, 0); }
.gx-wf[data-anim="fade-down"] { transform: translate3d(0, -18px, 0); }
.gx-wf[data-anim="fade-left"] { transform: translate3d(18px, 0, 0); }
.gx-wf[data-anim="fade-right"] { transform: translate3d(-18px, 0, 0); }

.gx-wf[data-anim="zoom"] { transform: translate3d(0, 10px, 0) scale(.98); }
.gx-wf[data-anim="zoom"].is-in { transform: translate3d(0, 0, 0) scale(1); }

.gx-wf[data-anim="soft"] {
  transform: translate3d(0, 16px, 0) scale(.992);
  filter: blur(12px) saturate(.95);
}
.gx-wf[data-anim="soft"].is-in {
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0) saturate(1);
}

/* Stagger (JS setea --d) */
.gx-wf {
  transition-delay: var(--d, 0ms);
}

/* Optional: cuando reduce motion */
@media (prefers-reduced-motion: reduce){
  .gx-wf{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================================
   FRAMER-LIKE MOTION LAYER
   ========================================================= */

/* Spring-ish transitions */
.gx-motion {
  will-change: transform, filter;
  transform: translate3d(0,0,0);
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), filter 420ms cubic-bezier(.2,.9,.2,1);
}

.gx-motion:hover {
  transform: translate3d(0,-4px,0) scale(1.015);
  filter: saturate(1.02);
}

.gx-motion:active {
  transform: translate3d(0,-1px,0) scale(.995);
}

/* Tilt target (JS setea --rx --ry) */
.gx-tilt {
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), filter 420ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.gx-tilt:hover {
  filter: saturate(1.02);
}

/* Magnetic buttons (JS setea --mx --my) */
.gx-magnet {
  transform: translate3d(var(--mx,0px), var(--my,0px), 0);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

/* Subtle float for hero chips/cards */
@keyframes gxFloat {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-6px,0); }
  100% { transform: translate3d(0,0,0); }
}
.gx-float {
  animation: gxFloat 5.5s ease-in-out infinite;
  will-change: transform;
}

/* Parallax elements (JS setea --py) */
.gx-parallax {
  transform: translate3d(0, var(--py,0px), 0);
  will-change: transform;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .gx-motion, .gx-tilt, .gx-magnet, .gx-float, .gx-parallax{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}