/* ==========================================================================
   index.css — (INDEX) | 1 PANEL (Compra tu ticket)
   ✅ Update: Panel de vidrio MÁS ALTO + ancho reducido (manteniendo originalidad)
   ========================================================================== */

/* ============================================================
   VARIABLES
============================================================ */
:root{
  --morado:#9b92ff;
  --azul:#3f8faa;
  --oscuro:#2b2b2b;
  --blanco:#ffffff;

  --buy:#6b0e17;
  --buy2:#8a1422;
  --res:#a59cff;
  --res2:#8d82ff;

  --stroke: rgba(255,255,255,.18);
  --stroke2: rgba(255,255,255,.12);
  --shadow: 0 18px 55px rgba(0,0,0,.25);
  --shadow2: 0 26px 85px rgba(0,0,0,.35);
  --shadow3: 0 14px 40px rgba(0,0,0,.22);

  --radius: 22px;
  --pill: 999px;

  --font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --pad: clamp(12px, 1.8vw, 26px);
  --gap: clamp(14px, 2vw, 26px);

  --t-sm: clamp(12px, 1.15vw, 16px);
  --t-md: clamp(14px, 1.25vw, 18px);
  --t-lg: clamp(16px, 1.45vw, 22px);
  --t-xl: clamp(18px, 1.9vw, 28px);
  --t-xxl: clamp(22px, 2.6vw, 40px);

  --wrap: min(1280px, 92vw);
  --wrap-wide: min(1500px, 92vw);

  --car-h: 240px;
  --logo-h: 140px;

  /* ✅ NUEVO: control del panel (vidrio) */
  --panel-w: min(980px, 90vw);                 /* 👈 reduce ancho del vidrio */
  --panel-h: clamp(420px, 56vh, 660px);        /* 👈 aumenta altura del vidrio */
}

/* ============================================================
   RESET / BASE
============================================================ */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color: var(--blanco);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background:
    radial-gradient(1200px 650px at 70% 15%, rgba(155,146,255,.20), transparent 55%),
    radial-gradient(900px 550px at 20% 80%, rgba(0,195,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.12)),
    var(--azul);
}

img{ max-width:100%; height:auto; display:block; }
.container{ width: var(--wrap); margin:0 auto; }

html.no-scroll,
html.no-scroll body{
  overflow: hidden !important;
}

/* ============================================================
   HUD CANVAS
============================================================ */
#hud{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}

/* ============================================================
   TOPBAR
============================================================ */
.topbar{
  height: clamp(74px, 7vw, 92px);
  background: linear-gradient(90deg, rgba(155,146,255,1), rgba(155,146,255,.92));
  border-bottom: 1px solid rgba(255,255,255,.16);
  position: sticky;
  top: 0;
  z-index: 120;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  will-change: transform;
  transition: transform .22s ease, box-shadow .22s ease;
}
.topbar.is-hidden{
  transform: translateY(-110%);
  box-shadow: none;
}

.topbar__inner{
  height:100%;
  width: var(--wrap-wide);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 0 var(--pad);
}

.topbar__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  user-select:none;
}
.topbar__title{
  font-size: clamp(14px, 1.2vw, 18px);
  opacity: .96;
  text-transform: uppercase;
}

.chip{
  padding: 8px 12px;
  border-radius: var(--pill);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  font-weight: 900;
  font-size: var(--t-sm);
}
.chip--alt{ background: rgba(255,255,255,.16); }

.topbar__cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--pill);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  font-size: var(--t-sm);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.topbar__cta:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.burger{
  width: 56px;
  height: 44px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:grid;
  gap: 7px;
  padding:0;
}
.burger span{
  height: 4px;
  width: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* ============================================================
   MENU OFFCANVAS
============================================================ */
.backdrop{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 30% 10%, rgba(0,255,255,.10), transparent 60%),
    rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 90;
}
.backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

.menu{
  position: fixed;
  left: 14px;
  top: 14px;
  height: calc(100% - 28px);
  width: min(380px, calc(100vw - 28px));

  background: linear-gradient(180deg, rgba(25,28,32,.55), rgba(10,12,14,.40));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;

  box-shadow:
    0 28px 90px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);

  transform: translateX(calc(-100% - 24px));
  transition: transform .22s ease;

  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.menu.is-open{ transform: translateX(0); }

.menu::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 220px at 18% 12%, rgba(155,146,255,.18), transparent 65%),
    radial-gradient(420px 240px at 92% 88%, rgba(0,255,255,.14), transparent 70%);
  pointer-events:none;
  opacity:.9;
}
.menu::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%, rgba(0,0,0,.18));
  pointer-events:none;
}
.menu > *{ position: relative; z-index: 1; }

.menu__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.menu__title{
  font-weight: 900;
  font-size: var(--t-md);
  letter-spacing: .2px;
  opacity: .96;
}
.menu__close{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.menu__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

.menu__nav{
  padding: 14px 14px 10px;
  display: grid;
  gap: 12px;
}
.menu__link{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);

  color:#fff;
  text-decoration:none;
  font-weight: 900;
  font-size: var(--t-md);

  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.menu__link i{ font-size: 18px; opacity: .95; }
.menu__link:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}
.menu__footer{
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  opacity: .88;
  font-size: var(--t-sm);
  background: rgba(0,0,0,.08);
}

/* GLASS base */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ============================================================
   HERO
============================================================ */
.hero{
  padding: calc(var(--pad) + 8px) 0 var(--pad);
}
.hero__grid{
  width: var(--wrap-wide);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
  padding: 0 var(--pad);
}

.panel{
  padding: var(--pad);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}
.panel:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 240px at 30% 0%, rgba(0,255,255,.16), transparent 60%),
    radial-gradient(520px 260px at 70% 100%, rgba(155,146,255,.20), transparent 60%);
  pointer-events:none;
}
.panel:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%, rgba(0,0,0,.10));
  pointer-events:none;
}
.panel > *{ position:relative; }

.panel--simple{
  display:grid;
  grid-template-rows: 1fr auto;
  align-items:center;
  justify-items:center;
  gap: clamp(10px, 1.4vw, 16px);

  /* ✅ MÁS ALTO (vidrio) */
  min-height: var(--panel-h);

  padding-bottom: clamp(14px, 1.8vw, 18px);
}

.simple__img{
  width: min(760px, 98%);
  max-height: clamp(300px, 40vh, 420px);
  object-fit: contain;

  /* 🔍 Escala */
  transform: scale(1.25);
  transform-origin: center center;

  /* 🌑 SOMBRA PRO (realista + profundidad) */
  filter:
    drop-shadow(0 22px 45px rgba(0,0,0,.35))
    drop-shadow(0 8px 18px rgba(0,0,0,.25));

  transition: transform .25s ease, filter .25s ease;
}


/* BOTONES */
.btn{
  width: min(520px, 92%);
  max-width: 520px;
  min-height: clamp(52px, 5.6vw, 62px);

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: var(--pill);
  border: 1px solid rgba(255,255,255,.22);
  text-decoration:none;
  font-weight: 900;
  font-size: clamp(14px, 1.7vw, 22px);

  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;

  align-self:end;
  justify-self:center;
}
.btn:hover{
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow: 0 26px 70px rgba(0,0,0,.30);
}
.btn:active{ transform: translateY(0px) scale(.99); }

.btn__spark{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(320px 160px at 22% 22%, rgba(0,255,255,.16), transparent 60%),
    radial-gradient(300px 180px at 82% 78%, rgba(155,146,255,.20), transparent 60%);
  pointer-events:none;
  opacity:.95;
}

.btn--buy{ background: linear-gradient(90deg, var(--buy), var(--buy2)); color:#fff; }

/* ============================================================
   ✅ SOLO 1 PANEL (CENTRADO)
============================================================ */
.hero__grid--single{
  grid-template-columns: 1fr !important;
  justify-items: center;
}
.panel--single{
  /* ✅ reduce ancho + mantiene vidrio */
  width: var(--panel-w);
  margin: 0 auto;
}

/* SOCIAL */
.social{ padding: 0 0 calc(var(--pad) + 8px); }
.social__content{
  width: var(--wrap-wide);
  margin: 0 auto;
  padding: var(--pad);
  text-align:center;
}
.social__title{
  margin: 0 0 12px;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.social__icons{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap:wrap;
  padding-bottom: 0;
}
.social__icon{
  width: clamp(44px, 4.2vw, 56px);
  height: clamp(44px, 4.2vw, 56px);
  display:grid;
  place-items:center;
  border-radius: 16px;

  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);

  color:#fff;
  font-size: clamp(22px, 2.1vw, 28px);
  text-decoration:none;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.social__icon:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 26px 70px rgba(0,0,0,.24);
}

/* FOOTER */
.footer{
  background: var(--oscuro);
  padding: 10px 10px;
  text-align:center;
}
.footer__line1{
  font-size: clamp(11px, 1.0vw, 14px);
  opacity:.95;
  margin-bottom: 6px;
  line-height: 1.25;
}
.footer__line2{
  opacity:.9;
  font-size: clamp(10px, 0.95vw, 13px);
  line-height: 1.25;
}
.footer a{
  color:#fff;
  font-weight:800;
  text-decoration:none;
  border-bottom: 2px solid rgba(255,255,255,.22);
}
.footer a:hover{ border-bottom-color: rgba(255,255,255,.60); }

/* WHATSAPP */
.whatsapp-float{
  position:fixed;
  right: clamp(12px, 1.6vw, 18px);
  left: auto;
  bottom: clamp(14px, 1.6vw, 18px);

  width: clamp(56px, 5vw, 66px);
  height: clamp(56px, 5vw, 66px);
  border-radius: 999px;

  display:grid;
  place-items:center;
  text-decoration:none;
  z-index: 9999;

  background: #25D366;
  border: 4px solid rgba(255,255,255,.65);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: transform .16s ease, filter .16s ease;
}
.whatsapp-float:hover{
  transform: translateY(-2px) scale(1.03);
  filter: saturate(1.06);
}
.whatsapp-float i{
  color:#fff;
  font-size: clamp(30px, 2.8vw, 36px);
  line-height: 1;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .topbar__inner{ width: var(--wrap); }
}

/* INDEX SIN SCROLL + TOPBAR INVISIBLE */
body.page-main{
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;

  display: flex;
  flex-direction: column;
  font-size: 13px;

  --social-lift: clamp(18px, 3.0vh, 34px);
  --social-title-gap: clamp(8px, 1.4vh, 14px);
  --social-icons-gap: clamp(10px, 1.4vh, 14px);
  --footer-gap: clamp(12px, 2.2vh, 20px);

  position: relative;
}

body.page-main .topbar{
  height: 56px !important;
  position: fixed !important;
  top:0; left:0; right:0;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 120;
}
body.page-main .topbar__brand,
body.page-main .topbar__cta{
  display:none !important;
}

body.page-main .topbar__inner{ padding-top: 8px; }
body.page-main .burger{ margin-top: 10px; }

body.page-main .hero{
  flex: 1 0 auto;
  padding-top: 62px !important;
  padding-bottom: 6px !important;

  display: flex;
  align-items: flex-start;
}
body.page-main .hero__grid{ gap: 14px !important; }

body.page-main .panel--simple{
  /* ✅ AÚN MÁS ALTO en la portada (para quitar “espacio vacío”) */
  min-height: clamp(460px, 62vh, 720px) !important;
  padding-top: 6px !important;
  padding-bottom: 10px !important;
  gap: 12px !important;
}
body.page-main .simple__img{
  max-height: var(--car-h) !important;
  width: auto;
  object-fit: contain;
  margin-top: -4px !important;
}
body.page-main .btn{
  /* opcional: un poco más ancho dentro del panel */
  width: min(520px, 86%) !important;

  min-height: 52px !important;
  font-size: clamp(14px, 1.2vw, 18px) !important;
  margin-top: -6px !important;
}

body.page-main .social{ flex: 0 0 auto; }
body.page-main .footer{
  flex: 0 0 auto;
  margin-top: auto !important;
}

@media (max-width: 600px){
  body.page-main{
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* SOLO redes sin glass (si lo quieres así) */
body.page-main .social .glass{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-main .social{
  margin-top: calc(var(--social-lift) * -1) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.page-main .social__content{
  padding-top: 10px !important;
  padding-bottom: 8px !important;
}
body.page-main .social__title{
  margin: 0 0 var(--social-title-gap) !important;
  line-height: 1.05;
}
body.page-main .social__icons{
  gap: var(--social-icons-gap) !important;
  padding-bottom: var(--footer-gap) !important;
}
body.page-main .social__icon{ transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce){
  .btn, .social__icon, .whatsapp-float, .topbar__cta, .menu__link, .topbar{
    transition: none !important;
  }
}

/* SUBMENU REDES */
.menu__link--toggle{ width: 100%; text-align: left; cursor: pointer; }
.menu__link--toggle .menu__linkLeft{ display: inline-flex; align-items: center; gap: 12px; }
.menu__chev{ margin-left: auto; opacity: .9; transition: transform .22s ease; }

.menu__sub{
  margin: -6px 6px 6px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  display: grid;
  gap: 10px;

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: top;
  transition:
    max-height .26s ease,
    opacity .18s ease,
    transform .22s ease;
  will-change: max-height, opacity, transform;
}
.menu__sub.is-open{
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
}
.menu__sub[hidden]{ display:block; max-height:0; opacity:0; }

.menu__sublink{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);

  color:#fff;
  text-decoration:none;
  font-weight: 800;
  font-size: var(--t-md);

  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.menu__sublink i{ width: 18px; text-align:center; opacity: .95; }
.menu__sublink:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
.menu__link--toggle.is-open .menu__chev{ transform: rotate(180deg); }

/* CLICK FX */
.btn,
.menu__link,
.menu__sublink,
.social__icon,
.menu__close,
.burger{
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease, filter .18s ease;
}
.btn:active,
.menu__link:active,
.menu__sublink:active,
.social__icon:active,
.menu__close:active,
.burger:active{
  transform: translateY(0) scale(.98);
  filter: brightness(1.08) saturate(1.22);
  box-shadow: 0 0 0 2px rgba(0,255,255,.25), 0 18px 55px rgba(0,0,0,.35);
}
.is-pressed{
  background: rgba(0,255,255,.16) !important;
  border-color: rgba(0,255,255,.42) !important;
  box-shadow: 0 0 0 2px rgba(0,255,255,.22), 0 24px 70px rgba(0,0,0,.28) !important;
}

/* FONDO */
body.page-main::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("images/titicaca.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  opacity: .50;
  filter: saturate(1.05) contrast(1.05);
}

/* FIX CAPAS */
body.page-main > :not(#hud):not(.menu):not(.backdrop):not(.whatsapp-float):not(.topbar){
  position: relative;
  z-index: 1;
}
body.page-main .menu{ z-index: 100; }
body.page-main .backdrop{ z-index: 90; }
body.page-main .topbar{ z-index: 120; }
body.page-main .whatsapp-float{ z-index: 9999; }

/* OCULTAR BURGER con menú abierto */
html.no-scroll #btnMenu,
html.no-scroll .burger{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
#btnMenu,
.burger{
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
html.no-scroll .topbar .burger{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}




/* ==========================================================================
   EXTENSIÓN RESPONSIVE UNIVERSAL (ADD-ON)
   ✔ No modifica estilos base
   ✔ Solo ajusta escalas y alturas según dispositivo
   ========================================================================== */

/* 📱 MÓVILES GAMA BAJA (Android antiguos / pantallas pequeñas) */
@media (max-width: 420px){
  :root{
    --panel-h: clamp(420px, 78vh, 520px);
    --panel-w: 96vw;
  }

  .simple__img{
    transform: scale(1.05) !important;
    max-height: 220px !important;
  }

  .btn{
    font-size: 15px !important;
  }
}

/* 📱 MÓVILES GAMA MEDIA / ALTA */
@media (min-width: 421px) and (max-width: 600px){
  :root{
    --panel-h: clamp(460px, 74vh, 580px);
    --panel-w: 94vw;
  }

  .simple__img{
    transform: scale(1.12) !important;
    max-height: 260px !important;
  }
}

/* 📱 TABLETS */
@media (min-width: 601px) and (max-width: 1024px){
  :root{
    --panel-h: clamp(520px, 68vh, 640px);
    --panel-w: min(860px, 92vw);
  }

  .simple__img{
    transform: scale(1.18) !important;
    max-height: 320px !important;
  }
}

/* 💻 FULL HD */
@media (min-width: 1280px){
  :root{
    --panel-h: clamp(620px, 62vh, 720px);
  }

  .simple__img{
    transform: scale(1.25) !important;
    max-height: 420px !important;
  }
}

/* 🖥️ QHD / 4K */
@media (min-width: 1900px){
  :root{
    --panel-h: clamp(720px, 70vh, 880px);
    --panel-w: min(1100px, 86vw);
  }

  .simple__img{
    transform: scale(1.35) !important;
    max-height: 520px !important;
  }
}

/* ⚙️ OPTIMIZACIÓN PARA DISPOSITIVOS LENTOS */
@media (prefers-reduced-motion: reduce){
  .simple__img{
    transition: none !important;
    transform: scale(1.1) !important;
  }

  .panel--simple:hover .simple__img{
    transform: scale(1.1) !important;
  }
}


/* ===========================
   360° HOVER — FIX REAL
=========================== */
.panel--simple{
  perspective: 1000px;
}

.panel--simple .simple__img{
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform 900ms cubic-bezier(.2,.9,.2,1),
    filter 250ms ease;
  will-change: transform;
}

/* Hover real */
.panel--simple:hover .simple__img{
  transform: rotateY(360deg) scale(1.25);
}

/* Evitar bugs en móviles */
@media (max-width: 900px){
  .panel--simple:hover .simple__img{
    transform: scale(1.15);
  }
}