/* ==========================================================================
   Hero orbital — carrusel 3D "liquid glass" de plataformas (index.php)
   Todas las clases usan el prefijo oh- para no chocar con premium-theme.css
   ========================================================================== */
/* Los tokens se alinean con el tema del sitio (premium-theme.css):
   fondo #0d1220, textos #f0f4ff / #8fa3c0, cristal rgba(255,255,255,.055),
   accion principal en el dorado de marca #f6c445. */
:root{
  --oh-void:#0d1220;
  --oh-void-deep:#070b14;
  --oh-panel-line:rgba(255,255,255,.13);
  --oh-ink:#f0f4ff;
  --oh-ink-dim:#8fa3c0;
  --oh-ink-faint:#4d6080;
  --oh-signal:#a9c3e0;
  --oh-signal-bright:#d7e5f4;
  --oh-gold:#f6c445;
  --oh-gold-ink:#2a1e05;
  --oh-radius-card:1.1rem;
  --oh-ease-out:cubic-bezier(.19,1,.22,1);
  --oh-ease-soft:cubic-bezier(.4,0,.2,1);
}

.oh-stage{
  position:relative;
  min-height:min(92vh, 56rem);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  background:var(--oh-void);
  color:var(--oh-ink);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* auto, no antialiased. En macOS "antialiased" solo adelgaza el trazo, pero
     en Chrome sobre Windows apaga el suavizado subpixel (LCD) y deja escala de
     grises: a 64px del titulo no se nota, a 11px de la descripcion de la
     tarjeta es lo que se veia borroso. Se hereda desde body, asi que hay que
     devolverlo explicitamente, no basta con quitar la linea. */
  -webkit-font-smoothing:auto;
  border-radius:0 0 1.75rem 1.75rem;
}

.oh-sky{ position:absolute; inset:0; z-index:0; background:var(--oh-void); }
.oh-nebula{
  position:absolute; inset:-10%;
  opacity:0;
  transition:opacity .9s var(--oh-ease-soft);
  filter:saturate(1.1);
}
.oh-nebula.is-front{ opacity:.6; }
.oh-floor{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(7,11,20,.35) 0%, rgba(7,11,20,0) 26%, rgba(7,11,20,0) 58%, rgba(7,11,20,.85) 100%),
    radial-gradient(120% 90% at 50% 8%, rgba(7,11,20,0) 0%, rgba(7,11,20,.55) 100%);
}
/* canvas es elemento reemplazado: con width:auto usa su tamano intrinseco (300x150)
   e ignora right/bottom. Hay que dar width/height explicitos o no se estira. */
canvas.oh-stars{
  position:absolute; left:-8%; top:-4%; width:116%; height:108%;
  z-index:1; opacity:.8;
}
.oh-grain{
  position:absolute; inset:-50%; z-index:2; opacity:.045; pointer-events:none;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* 120px libera la barra de navegacion fija (.nav position:fixed) */
.oh-copy{
  position:relative; z-index:5; flex:none;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:120px 1.5rem 0;
}
.oh-mask{ overflow:hidden; display:block; }
.oh-eyebrow{
  font-family:'Space Mono', monospace; font-size:.72rem; font-weight:700;
  letter-spacing:.34em; color:var(--oh-signal); text-transform:uppercase;
}
.oh-eyebrow::before{ content:'◦ '; }
/* ---------- altura reservada del bloque de texto ----------
   El titulo y la descripcion los reescribe el JS en cada giro, y cada
   plataforma trae textos de largo distinto: "VIKIRAKUTEN" con una linea de
   descripcion frente a "HITS DE PARAMOUNT SIN GARANTIA" con cuatro. El bloque
   crecia y empujaba el carrusel hacia abajo, asi que las flechas cambiaban de
   sitio entre una tarjeta y la siguiente y habia que recolocar el raton.

   Se reserva altura para DOS lineas en ambos y se recorta lo que sobre. Al ser
   min-height en "em", la reserva escala sola con el font-size (que es un
   clamp con vw), asi que sigue siendo exacta en cualquier ancho de pantalla.
   Consecuencia aceptada: con textos cortos queda algo de aire debajo; a cambio
   el carrusel no se mueve nunca. */
.oh-title{
  margin:.45rem 0 0; font-family:'Unbounded', sans-serif; font-weight:900;
  font-size:clamp(2.1rem, 1rem + 5.6vw, 4.6rem); line-height:.98; letter-spacing:-.01em;
  color:var(--oh-ink);
  min-height:1.96em;              /* 2 lineas x .98 de interlineado */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.oh-rule{
  display:block; width:3.1rem; height:3px; border-radius:2px; margin:.75rem auto 0;
  background:var(--oh-signal); transition:background-color .5s var(--oh-ease-soft);
}
.oh-lede{
  margin:.75rem auto 0; max-width:34rem; font-size:clamp(.86rem, .8rem + .2vw, .98rem);
  line-height:1.5; color:var(--oh-ink-dim);
  min-height:3em;                 /* 2 lineas x 1.5 de interlineado */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.oh-meta{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:.85rem; font-family:'Space Mono', monospace; font-size:.8rem;
  color:var(--oh-ink-dim); font-variant-numeric:tabular-nums;
}
.oh-meta b{ color:var(--oh-ink); font-weight:700; }

/* ---------- color por cifra ----------
   Las cuatro cifras del hero iban todas en el mismo tono y se leian como un
   bloque. Un color por significado deja ver de un vistazo que es cada una:
   precio, stock de la plataforma en pantalla, catalogo disponible y agotadas.
   Los IDs son los que rellena js/orbit-hero.js al girar el carrusel. */
.oh-meta #ohMetaPrecio{ color:var(--oh-gold, #f6c445); }
.oh-meta #ohMetaStock{ color:#4ade80; }
.oh-availability .oh-num-stock{ color:#38bdf8; }
.oh-availability .oh-num-agotadas{ color:#f87171; }
.oh-divider{ width:1px; height:.9em; background:var(--oh-panel-line); }
.oh-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.75rem; margin-top:1.15rem; }
.oh-cta-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.5rem; border-radius:99px; border:0; cursor:pointer;
  background:var(--oh-gold); color:var(--oh-gold-ink);
  font-family:'Inter',sans-serif; font-weight:800; font-size:.9rem;
  box-shadow:0 .9rem 2rem -.7rem rgba(246,196,69,.45);
  transition:transform .25s var(--oh-ease-out), box-shadow .25s var(--oh-ease-out);
}
.oh-cta-primary:hover{ transform:translateY(-2px); box-shadow:0 1.2rem 2.4rem -.8rem rgba(246,196,69,.55); }
.oh-cta-primary:active{ transform:translateY(0) scale(.98); }
.oh-cta-ghost{
  display:inline-flex; align-items:center; text-decoration:none;
  padding:.8rem 1.05rem; border-radius:99px; border:1px solid var(--oh-panel-line);
  background:transparent; color:var(--oh-ink-dim); font-family:'Inter',sans-serif;
  font-weight:700; font-size:.82rem; cursor:pointer;
}
.oh-cta-ghost:hover{ color:var(--oh-ink); border-color:rgba(246,247,255,.28); }

/* ---------- BUSCADOR: icono en la barra fija, panel desplegable ---------- */
.oh-navfind{ position:relative; display:flex; align-items:center; }
.oh-navfind-toggle{
  width:2.25rem; height:2.25rem; padding:0; border-radius:50%;
  border:1px solid var(--oh-panel-line); background:rgba(255,255,255,.05);
  color:var(--oh-ink-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s, background-color .2s, border-color .2s;
}
.oh-navfind-toggle svg{ width:1.05rem; height:1.05rem; }
.oh-navfind-toggle:hover{ color:var(--oh-ink); background:rgba(255,255,255,.1); }
.oh-navfind-toggle[aria-expanded="true"]{
  color:var(--oh-signal-ink); background:var(--oh-signal); border-color:var(--oh-signal);
}
.oh-navfind-panel{
  position:absolute; top:calc(100% + .6rem); right:0; z-index:120;
  width:min(20rem, calc(100vw - 2rem));
}
.oh-navfind-panel[hidden]{ display:none; }

.oh-find-box{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-radius:99px;
  background:rgba(255,255,255,.055); border:1px solid var(--oh-panel-line);
  backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .2s, background-color .2s;
}
.oh-find-box:focus-within{ border-color:var(--oh-signal); background:rgba(255,255,255,.08); }
.oh-find-icon{ width:1rem; height:1rem; flex:none; color:var(--oh-ink-faint); }
.oh-find-box input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  color:var(--oh-ink); font-family:'Inter',sans-serif; font-size:.85rem;
}
.oh-find-box input::placeholder{ color:var(--oh-ink-faint); }
.oh-find-clear{
  flex:none; width:1.25rem; height:1.25rem; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:var(--oh-ink-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.oh-find-clear svg{ width:.7rem; height:.7rem; }
/* display:flex de arriba le gana al [hidden] del navegador; hay que repetirlo */
.oh-find-clear[hidden], .oh-find-results[hidden]{ display:none; }
.oh-find-results{
  position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:7;
  margin:0; padding:.3rem; list-style:none;
  border-radius:.9rem; border:1px solid var(--oh-panel-line);
  background:rgba(10,14,24,.96); backdrop-filter:blur(18px);
  box-shadow:0 1.4rem 2.6rem -1rem rgba(0,0,0,.7);
  max-height:14rem; overflow-y:auto; text-align:left;
}
.oh-find-results li{ margin:0; }
.oh-find-results button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .6rem; border:0; border-radius:.6rem; background:transparent;
  color:var(--oh-ink); font-family:'Inter',sans-serif; font-size:.82rem; font-weight:600;
  text-align:left; cursor:pointer;
}
.oh-find-results button:hover,
.oh-find-results button:focus-visible{ background:rgba(255,255,255,.08); outline:none; }
.oh-find-results .oh-find-stock{
  flex:none; font-family:'Space Mono', monospace; font-size:.62rem; color:var(--oh-ink-dim);
  font-variant-numeric:tabular-nums;
}
.oh-find-empty{ padding:.6rem; font-size:.78rem; color:var(--oh-ink-dim); text-align:center; }

.oh-availability{
  margin:.6rem 0 0; font-family:'Space Mono', monospace;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--oh-ink-faint);
}
.oh-availability b{ color:var(--oh-ink-dim); }

/* ---------- filtro del orbital ----------
   Deja mirar por categoria y, sobre todo, ver las AGOTADAS: son plataformas
   que se venden, y ocultarlas siempre hacia parecer que no se ofrecen.
   Discreto a proposito: es una herramienta, no debe competir con el titulo. */
.oh-filtro{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:.7rem auto 0;
  padding:.3rem .35rem .3rem .7rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
.oh-filtro-label{
  font-family:'Space Mono', monospace;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oh-ink-faint);
}
/* appearance:none quita el estilo nativo del navegador, que en Windows pinta
   un <select> gris claro que sobre el hero oscuro se ve como un parche. */
.oh-filtro-select{
  appearance:none; -webkit-appearance:none;
  border:0; outline:0; cursor:pointer;
  padding:.25rem 1.6rem .25rem .55rem;
  border-radius:999px;
  background:transparent;
  color:#fff;
  font-family:'Space Mono', monospace;
  font-size:.66rem; letter-spacing:.06em; font-weight:700;
  /* flecha dibujada en el propio fondo: no hace falta otro elemento */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .45rem center;
  background-size:.7rem;
}
.oh-filtro-select:focus-visible{ outline:2px solid var(--oh-accent, #f6c445); outline-offset:2px; }
/* El desplegable nativo se pinta con los colores del sistema: se fuerzan
   oscuros para que las opciones no salgan en blanco sobre blanco. */
.oh-filtro-select option{ background:#131a2a; color:#f0f4ff; }
.oh-filtro-ir{
  border:0; cursor:pointer; border-radius:999px;
  padding:.25rem .7rem; font-size:.66rem; font-weight:800;
  background:var(--oh-accent, #f6c445); color:#2a1e05;
}

/* firma de marca entre el texto y el carrusel */
.oh-brandmark{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  width:min(24rem, 84vw); margin:.9rem auto 0;
}
.oh-brandmark-line{
  flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--oh-panel-line), transparent);
}
.oh-brandmark-text{
  flex:none;
  font-family:'Unbounded', sans-serif; font-weight:800;
  font-size:.72rem; letter-spacing:.26em; text-indent:.26em;
  color:var(--oh-ink); white-space:nowrap;
}
.oh-brandmark-text em{ font-style:normal; color:var(--oh-gold); }

.oh-orbit-zone{
  position:relative; z-index:4; flex:1 1 auto; min-height:0;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(.4rem, 1.2vh, .9rem) 0 clamp(1rem, 3vh, 1.6rem);
}
.oh-orbit-wrap{
  position:relative; width:min(86rem, 97vw); height:min(48vh, 23rem);
  touch-action:none; outline:none;
}
/* Sin perspective ni preserve-3d: el arco se dibuja con transformaciones 2D
   (ver render() en orbit-hero.js). Con 3D, Chrome/Edge rasterizaban cada
   tarjeta a baja resolucion y la estiraban, y en PC (pantallas de densidad
   1x o con zoom/escalado de Windows) el texto salia borroso. En 2D el
   navegador vuelve a dibujar la tarjeta a su tamano final y queda nitida.
   z-index:1 crea un contexto de apilado propio: las tarjetas usan z-index
   para el orden de adelante/atras y asi no tapan las flechas. */
.oh-orbit-ring{ position:absolute; inset:0; z-index:1; }

.oh-card{
  /* Origen en 0,0 a proposito: con left/top:50% el navegador resolvia la mitad
     de un contenedor de ancho impar y dejaba la tarjeta en x=402.98, un desfase
     subpixel que obliga a remuestrear la capa y desenfoca el texto. El centrado
     lo hace el translate3d entero de orbit-hero.js. */
  position:absolute; left:0; top:0;
  /* Mas ancho real que antes: la perspectiva ahora amplia solo ~1.17x en vez
     de 1.4x, asi que el tamano en pantalla se consigue con pixeles de
     maquetacion (nitidos) y no estirando la imagen rasterizada. */
  width:clamp(13rem, 15vw, 17rem);
  padding:0 0 .7rem; margin:0;
  border-radius:var(--oh-radius-card);
  border:1px solid var(--oh-panel-line);
  /* Fondo casi opaco y SIN backdrop-filter. El blur obligaba al navegador a
     rasterizar cada tarjeta en una capa aparte y el texto perdia definicion;
     y con el fondo semitransparente se transparentaba la tarjeta de atras,
     dejando ver sus bordes a traves de la de adelante. */
  background:
    linear-gradient(155deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.02) 42%, rgba(255,255,255,.06) 100%),
    #131a2a;
  overflow:hidden;
  text-align:left;
  cursor:grab; color:var(--oh-ink); font-family:'Inter', sans-serif;
  transition:transform .6s var(--oh-ease-out), opacity .6s var(--oh-ease-out), border-color .3s, box-shadow .3s;
  transform-origin:50% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 22px 44px -18px rgba(0,0,0,.65);
}
/* Brillo de cristal. Sin mix-blend-mode: el modo de fusion obliga al navegador
   a rasterizar la tarjeta en un grupo de composicion aparte, y ahi el texto
   pierde el suavizado subpixel. Al quitarlo, el blanco se rebaja para que el
   brillo siga siendo sutil y no un velo. */
.oh-card::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(122deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 68%, rgba(255,255,255,.05) 100%);
}
/* capa de atenuacion para las tarjetas laterales: reemplaza a
   filter:brightness(), que volvia borroso el texto */
.oh-card::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:#070b14;
  opacity:var(--oh-dim, 0);
  transition:opacity .6s var(--oh-ease-out);
}
.oh-card:active{ cursor:grabbing; }
.oh-card.is-active{
  border-color:rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 30px 60px -16px color-mix(in srgb, var(--oh-tint, var(--oh-signal)) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--oh-tint, var(--oh-signal)) 42%, transparent);
}
/* la imagen es lo que vende: se le da altura real, no una franja */
.oh-card-hero{ position:relative; height:6.5rem; overflow:hidden; display:flex; align-items:flex-end; padding:.5rem .65rem; }
.oh-card-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.oh-card-hero .oh-hero-fallback{ position:absolute; inset:0; z-index:0; }
.oh-card-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(4,5,10,.6) 100%);
}
.oh-card-hero .oh-badge{
  position:relative; z-index:1;
  width:1.7rem; height:1.7rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Unbounded', sans-serif; font-weight:800; font-size:.76rem;
  /* La letra toma el tinte de la propia tarjeta (--oh-tint, que fija
     buildCard en js/orbit-hero.js), asi la "C" de Canva sale morada como su
     degradado y cada plataforma queda identificada por su color.

     El circulo se oscurece de .32 a .58 y se le anade sombra al texto: el
     distintivo va sobre la caratula, y un color medio sobre una imagen clara
     se perdia. Sobre el fondo oscuro los tintes de PALETTE contrastan bien. */
  background:rgba(8,10,16,.58);
  color:var(--oh-tint, #fff);
  border:1px solid rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
/* z-index 2: por encima del brillo ::after (z-index 1). Con el mismo valor el
   pseudoelemento se pintaba DESPUES y dejaba el velo blanco sobre el texto,
   bajandole el contraste. Sigue por debajo del atenuador ::before (z-index 3),
   que debe cubrirlo todo en las tarjetas laterales. */
.oh-card-body{ position:relative; z-index:2; padding:.55rem .65rem 0; display:flex; flex-direction:column; gap:.32rem; }
.oh-card-title{ display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.oh-card-title h3{ margin:0; font-size:.86rem; font-weight:800; letter-spacing:-.01em; line-height:1.15; color:#fff; }
.oh-card-desc{
  margin:0; font-size:.7rem; line-height:1.35; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.oh-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-top:.05rem; }
.oh-card-price{ font-family:'Space Mono', monospace; line-height:1.1; }
/* la cifra en el dorado de marca: es el dato que decide la compra */
.oh-card-price .oh-amount{ font-size:.95rem; font-weight:700; color:var(--oh-gold); font-variant-numeric:tabular-nums; }
.oh-card-price small{ display:block; font-size:.56rem; color:#fff; letter-spacing:.02em; }
/* stock en su propia fila al pie de la tarjeta.
   Borde negro fino + luz interior arriba: le da relieve, como hundido. */
.oh-card-stock{
  /* es un <button>: hay que anular los estilos propios del control y darle
     el ancho completo que tenia como bloque */
  appearance:none; -webkit-appearance:none;
  display:block; width:100%;
  /* pointer, no el grab de la tarjeta: es la accion que lleva al acceso */
  cursor:pointer;
  transition:background-color .2s, border-color .2s, transform .12s;
  margin-top:.35rem; text-align:center;
  font-family:'Space Mono', monospace; font-size:.55rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  font-variant-numeric:tabular-nums;
  padding:.3rem .4rem; border-radius:.5rem;
  /* Mismo amarillo y letra oscura del boton "Crear cuenta", igual en todas
     las tarjetas (tambien con poco stock o agotadas) para que se lea facil. */
  color:#07111e; background:#f6c445;
  border:1px solid rgba(255,238,168,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 6px rgba(246,196,69,.25);
}
.oh-card-stock b{ font-size:.78rem; font-weight:800; color:#07111e; }
.oh-card-stock.low{ color:#07111e; background:#f6c445; border-color:rgba(255,238,168,.45); }
.oh-card-stock.low b{ color:#07111e; }
/* respuesta al puntero: solo en la tarjeta del frente, que es la unica que se
   puede pulsar comodamente; en las laterales el atenuador ya la apaga */
.oh-card.is-active .oh-card-stock:hover,
.oh-card.is-active .oh-card-stock.low:hover{
  background:#ffb400; color:#04101d; border-color:rgba(255,238,168,.6);
}
.oh-card-stock:active{ transform:translateY(1px); }
.oh-card-stock:focus-visible{ outline:2px solid var(--oh-gold); outline-offset:2px; }
.oh-card:focus-visible{ outline:2px solid var(--oh-signal); outline-offset:4px; }

.oh-arc-btn{
  position:absolute; top:50%; z-index:5; transform:translateY(-50%);
  width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(10,12,18,.5); backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  color:var(--oh-ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background-color .2s, transform .2s;
}
.oh-arc-btn:hover{ background:rgba(10,12,18,.75); transform:translateY(calc(-50% - 1px)); }
.oh-arc-btn svg{ width:1.05rem; height:1.05rem; }
/* Flechas pegadas a los bordes de la PANTALLA, no del contenedor: el
   contenedor mide maximo 86rem y en pantallas anchas las flechas quedaban
   encima de las tarjetas. (100% - 100vw)/2 es la distancia del borde del
   contenedor al borde de la ventana. */
.oh-arc-prev{ left:calc((100% - 100vw) / 2 + clamp(.6rem, 1.8vw, 2rem)); }
.oh-arc-next{ right:calc((100% - 100vw) / 2 + clamp(.6rem, 1.8vw, 2rem)); }

/* Solo en pantalla completa: a 17rem de ancho la tarjeta quedaba casi
   cuadrada y se veia achatada. Se alarga por la imagen (no por el ancho),
   asi la geometria del arco no cambia: radius() solo usa el ancho. */
@media (min-width:1200px){
  .oh-card-hero{ height:9.5rem; }
  .oh-card{ padding-bottom:.85rem; }
  .oh-card-body{ gap:.4rem; }
  .oh-card-desc{ -webkit-line-clamp:3; }   /* hay altura para la tercera linea */
  /* La tarjeta mide 272px de ancho: a 11px la descripcion quedaba diminuta y
     el texto pequeno es lo que peor aguanta el suavizado. */
  .oh-card-title h3{ font-size:1rem; }
  .oh-card-desc{ font-size:.8rem; }
  .oh-card-price .oh-amount{ font-size:1.15rem; }
  .oh-card-price small{ font-size:.62rem; }
  .oh-card-stock{ font-size:.62rem; }
  .oh-card-stock b{ font-size:.88rem; }
}

@media (max-width:768px){
  .oh-stage{ min-height:auto; border-radius:0 0 1.5rem 1.5rem; }
  .oh-copy{ padding:108px 1.15rem 0; }
  .oh-title{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .oh-lede{ font-size:.82rem; max-width:26rem; }
  .oh-meta{ font-size:.72rem; gap:.7rem; }
  /* buscador compacto en telefono: solo el icono en la barra */
  .oh-navfind-toggle{ width:2rem; height:2rem; }
  .oh-navfind-toggle svg{ width:.95rem; height:.95rem; }
  /* anclado al ancho de la pantalla: colgando del icono se salia por la izquierda */
  .oh-navfind-panel{
    position:fixed; top:4rem; left:.75rem; right:.75rem; width:auto;
  }
  .oh-find-box{ padding:.38rem .6rem; gap:.4rem; }
  .oh-find-box input{ font-size:.78rem; }
  .oh-find-icon{ width:.85rem; height:.85rem; }
  .oh-find-results{ max-height:11rem; }
  .oh-find-results button{ font-size:.76rem; padding:.45rem .5rem; }
  .oh-availability{ font-size:.6rem; margin-top:.45rem; }
  .oh-brandmark{ width:min(17rem, 80vw); gap:.6rem; margin-top:.7rem; }
  .oh-brandmark-text{ font-size:.62rem; letter-spacing:.22em; text-indent:.22em; }
  .oh-actions{ margin-top:1rem; }
  .oh-cta-primary, .oh-cta-ghost{ font-size:.82rem; padding:.7rem 1.15rem; }
  /* aire suficiente para que la tarjeta ampliada no invada el texto de arriba */
  .oh-orbit-zone{ padding:1.4rem 0 .8rem; }
  .oh-orbit-wrap{ height:22.5rem; }
  /* la perspectiva amplia ~1.45x: con 9.2rem la central queda cerca de 210px
     en una pantalla de 375 y las vecinas asoman a los lados */
  .oh-card{ width:11rem; padding-bottom:.6rem; }
  .oh-card-hero{ height:5.6rem; padding:.45rem .55rem; }
  .oh-card-hero .oh-badge{ width:1.7rem; height:1.7rem; font-size:.76rem; }
  .oh-card-body{ padding:.5rem .55rem 0; gap:.28rem; }
  .oh-card-title h3{ font-size:.72rem; }
  .oh-card-desc{ font-size:.6rem; -webkit-line-clamp:2; }
  .oh-card-price .oh-amount{ font-size:.8rem; }
  .oh-card-price small{ font-size:.48rem; }
  .oh-card-stock{ font-size:.5rem; padding:.26rem .35rem; margin-top:.32rem; letter-spacing:.04em; }
  .oh-card-stock b{ font-size:.68rem; }
  /* en movil las flechas van debajo del carrusel: sobre los lados taparian
     las tarjetas vecinas. El anillo se acorta para dejarles ese espacio. */
  .oh-orbit-ring{ bottom:3.4rem; }
  .oh-arc-btn{ width:2.4rem; height:2.4rem; top:auto; bottom:0; transform:none; }
  .oh-arc-btn:hover{ transform:none; }
  .oh-arc-prev{ left:calc(50% - 3.2rem); }
  .oh-arc-next{ right:calc(50% - 3.2rem); }

}

/* ---------- TELEFONO EN HORIZONTAL ----------
   Un iPhone acostado mide ~844x390: el ancho pasa de 768px, asi que NO entra
   en el bloque de arriba y tomaba las medidas de escritorio con 390px de alto.
   Por eso el titulo quedaba bajo la barra y las tarjetas invadian el texto.
   Se filtra por orientacion + altura, no por ancho. */
@media (orientation:landscape) and (max-height:560px){
  .oh-stage{ min-height:auto; border-radius:0 0 1.25rem 1.25rem; }
  .oh-copy{ padding:74px 1rem 0; }
  .oh-title{ font-size:clamp(1.35rem, 3.6vw, 2.1rem); }
  .oh-lede{ display:none; }
  .oh-rule{ margin-top:.45rem; height:2px; width:2.4rem; }
  .oh-meta{ font-size:.65rem; gap:.6rem; margin-top:.45rem; }
  .oh-availability{ font-size:.55rem; margin-top:.35rem; }
  .oh-orbit-zone{ padding:.8rem 0 .5rem; }
  .oh-orbit-wrap{ height:13.5rem; }
  .oh-card{ width:6rem; padding-bottom:.4rem; }
  .oh-card-hero{ height:2.4rem; padding:.3rem .4rem; }
  .oh-card-hero .oh-badge{ width:1.2rem; height:1.2rem; font-size:.52rem; }
  .oh-card-body{ padding:.35rem .4rem 0; gap:.2rem; }
  .oh-card-title h3{ font-size:.54rem; }
  .oh-card-desc{ display:none; }          /* no hay altura para la descripcion */
  .oh-card-price .oh-amount{ font-size:.58rem; }
  .oh-card-price small{ font-size:.38rem; }
  .oh-card-stock{ font-size:.4rem; padding:.18rem .25rem; margin-top:.22rem; }
  .oh-card-stock b{ font-size:.54rem; }
  .oh-arc-btn{ width:2rem; height:2rem; top:50%; bottom:auto; transform:translateY(-50%); }
  .oh-arc-prev{ left:.3rem; }
  .oh-arc-next{ right:.3rem; }
  .oh-orbit-ring{ bottom:0; }
}

@media (max-height:700px) and (min-width:769px) and (orientation:portrait){ .oh-lede{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .oh-card, .oh-nebula, .oh-cta-primary{ transition:none !important; }
}

/* entrada, una sola vez */
.oh-copy.oh-enter .oh-mask > *{ transform:translateY(115%); }
.oh-copy.oh-enter.oh-play .oh-eyebrow, .oh-copy.oh-enter.oh-play .oh-title{ transition:transform .8s var(--oh-ease-out); }
.oh-copy.oh-enter.oh-play .oh-mask > *{ transform:translateY(0); }
.oh-copy.oh-enter .oh-rule{ transform:scaleX(0); transform-origin:0 50%; }
.oh-copy.oh-enter.oh-play .oh-rule{ transition:transform .6s var(--oh-ease-out) .35s; transform:scaleX(1); }
.oh-copy.oh-enter .oh-lede, .oh-copy.oh-enter .oh-meta, .oh-copy.oh-enter .oh-actions{ opacity:0; }
.oh-copy.oh-enter.oh-play .oh-lede{ transition:opacity .6s var(--oh-ease-soft) .45s; opacity:1; }
.oh-copy.oh-enter.oh-play .oh-meta{ transition:opacity .6s var(--oh-ease-soft) .55s; opacity:1; }
.oh-copy.oh-enter.oh-play .oh-actions{ transition:opacity .6s var(--oh-ease-soft) .62s; opacity:1; }