:root{
    --ink:#0e0e12;
    --ink-2:#17161b;
    --ink-3:#201f26;
    --gold:#cda558;
    --gold-bright:#e8c785;
    --crimson:#d1382c;
    --chalk:#f4f0e6;
    --steel:#9a9184;
    --line: rgba(244,240,230,0.12);
    --shadow: 0 24px 60px -20px rgba(0,0,0,0.65);
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Space Mono', 'SFMono-Regular', Menlo, monospace;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background: var(--ink);
    color: var(--chalk);
    font-family: var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body.menu-open{ overflow:hidden; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  img,svg,picture{ max-width:100%; display:block; }
  picture img{ width:100%; height:100%; }
  a{ color:inherit; }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,56px);
  }

  /* ---------- SKIP LINK ---------- */
  .skip-link{
    position:absolute; left:12px; top:-60px; z-index:200;
    background:var(--gold); color:#1a1508; font-family:var(--font-mono);
    font-size:0.8rem; font-weight:700; text-decoration:none;
    padding:0.8em 1.2em; border-radius:8px; transition:top 0.2s ease;
  }
  .skip-link:focus{ top:12px; }

  .eyebrow{
    font-family:var(--font-mono);
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:0.72rem;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:0.6em;
  }
  .eyebrow::before{
    content:"";
    width:20px;
    height:2px;
    background:var(--gold);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:0;
    text-wrap:balance;
    margin:0;
    line-height:1.05;
  }

  h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); color:var(--chalk); }
  h3{ font-size:clamp(1.3rem,2.2vw,1.6rem); color:var(--chalk); }
  p{ margin:0; }

  .btn{
    font-family:var(--font-mono);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.8rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.6em;
    min-height:44px;
    padding:0.95em 1.6em;
    border-radius:999px;
    text-decoration:none;
    border:2px solid transparent;
    cursor:pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  }
  .btn-primary{ background:var(--gold); color:#1a1508; }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(205,165,88,0.55); background:var(--gold-bright); }
  .btn-ghost{ background:transparent; color:var(--chalk); border-color:var(--line); }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
  .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
    outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(14,14,18,0.86);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .header-particles{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0;
  }
  nav{
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:space-between;
    gap:1em;
    padding:14px clamp(20px,5vw,56px);
  }
  .logo{ display:flex; align-items:center; gap:0.7em; }
  .logo img{ width:38px; height:38px; border-radius:50%; }
  .logo-text{
    font-family:var(--font-display);
    font-size:1.3rem;
    letter-spacing:0.01em;
  }
  .logo-text b{ color:var(--gold); font-weight:600; }
  .nav-right{ display:flex; align-items:center; gap:1.6em; }
  .navlinks{
    display:flex; gap:2.2em; list-style:none; margin:0; padding:0;
    font-family:var(--font-mono); font-size:0.76rem;
    text-transform:uppercase; letter-spacing:0.08em;
  }
  .navlinks a{ text-decoration:none; color:var(--steel); transition:color 0.2s ease; position:relative; }
  .navlinks a:hover{ color:var(--gold); }
  @media (max-width:820px){ .navlinks{ display:none; } .nav-right .btn{ display:none; } }

  /* ---------- HAMBURGER ---------- */
  .hamburger{
    display:none;
    width:44px; height:44px; padding:0;
    border:1px solid var(--line); border-radius:10px; background:transparent;
    cursor:pointer; align-items:center; justify-content:center;
    flex-direction:column; gap:5px;
  }
  .hamburger span{ display:block; width:20px; height:2px; background:var(--chalk); transition:transform 0.25s ease, opacity 0.25s ease; }
  .hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  @media (max-width:820px){ .hamburger{ display:flex; } }

  /* ---------- MOBILE MENU PANEL ---------- */
  .mobile-menu-overlay{
    position:fixed; inset:0; z-index:98;
    background:rgba(8,8,10,0.6);
    opacity:0; pointer-events:none;
    transition:opacity 0.25s ease;
  }
  .mobile-menu-overlay.is-open{ opacity:1; pointer-events:auto; }

  .mobile-menu{
    position:fixed; top:0; right:0; bottom:0; z-index:99;
    width:min(84vw, 340px);
    background:var(--ink-2); border-left:1px solid var(--line);
    padding:24px 24px 32px;
    display:flex; flex-direction:column; gap:1.6em;
    transform:translateX(100%);
    transition:transform 0.3s ease;
    overflow-y:auto;
  }
  .mobile-menu.is-open{ transform:translateX(0); }
  .mobile-menu-head{ display:flex; justify-content:space-between; align-items:center; }
  .mobile-menu-close{
    width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:transparent;
    color:var(--chalk); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .mobile-menu-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.3em; }
  .mobile-menu-links a{
    display:block; padding:0.9em 0.2em; text-decoration:none; color:var(--chalk);
    font-family:var(--font-mono); font-size:0.95rem; text-transform:uppercase; letter-spacing:0.05em;
    border-bottom:1px solid var(--line);
  }
  .mobile-menu-links a:hover, .mobile-menu-links a:focus-visible{ color:var(--gold); }
  .mobile-menu .btn{ width:100%; }

  @media (prefers-reduced-motion: reduce){
    .mobile-menu{ transition:none; }
    .mobile-menu-overlay{ transition:none; }
  }

  /* =========================================================
     HERO v2 — nueva composición
     ========================================================= */
  .hero-v2{
    position:relative;
    overflow:hidden;
    padding:clamp(48px,8vw,84px) 0 clamp(56px,9vw,96px);
    background:
      /* luz dorada principal, detras del grupo de balones */
      radial-gradient(ellipse 46% 56% at 66% 44%, rgba(205,165,88,0.20), transparent 64%),
      /* "piso": banda calida cerca de la base + horizonte tenue, atraviesa
         todo el ancho del hero, asi que no puede dejar bordes rectangulares */
      linear-gradient(to bottom, transparent 68%, rgba(205,165,88,0.05) 84%, rgba(205,165,88,0.02) 92%, transparent 100%),
      radial-gradient(ellipse 44% 16% at 62% 96%, rgba(205,165,88,0.14), transparent 72%),
      linear-gradient(160deg, #141319 0%, #0c0c10 46%, #0a0a0d 100%);
  }
  /* textura ambiental muy sutil (ruido fino) + lineas diagonales doradas
     tenues + acento diagonal rojo oscuro detras del grupo de balones,
     todo CSS, nada de imagenes */
  .hero-v2::before{
    content:"";
    position:absolute; inset:0; pointer-events:none;
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px),
      repeating-linear-gradient(115deg, rgba(205,165,88,0.05) 0px, rgba(205,165,88,0.05) 1px, transparent 1px, transparent 130px);
    opacity:0.6;
  }
  .hero-v2::after{
    content:"";
    position:absolute; pointer-events:none;
    top:-10%; right:-10%; width:75%; height:130%;
    background:linear-gradient(100deg, transparent 40%, rgba(122,26,26,0.24) 47%, rgba(122,26,26,0.12) 53%, transparent 60%);
    transform:rotate(-6deg);
  }
  .hv2-sweep{
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(100deg, transparent 30%, rgba(232,199,133,0.16) 48%, transparent 66%);
    transform:translateX(-120%);
    opacity:0;
  }
  .hero-v2.hv2-run .hv2-sweep{
    animation: hv2SweepMove 1.05s cubic-bezier(.22,.61,.36,1) 0.05s 1 both;
  }
  @keyframes hv2SweepMove{
    0%{ transform:translateX(-120%); opacity:0; }
    12%{ opacity:0.9; }
    60%{ opacity:0.4; }
    100%{ transform:translateX(120%); opacity:0; }
  }

  /* .wrap ancho normal en el resto del sitio; solo AQUI, dentro del hero,
     lo ensanchamos un poco para poder darle a la composicion de balones
     los 620-760px de ancho pedidos en 1440px sin comerle espacio al texto.
     No afecta ningun otro .wrap del sitio (selector scoped a .hero-v2). */
  .hero-v2 .wrap{ max-width:1400px; }

  .hv2-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns: minmax(0,0.42fr) minmax(0,0.58fr); /* texto ~42% / balones ~58% */
    gap:clamp(8px,1.5vw,24px); /* gap chico: acerca el grupo al texto y quita el vacio central */
    align-items:center;
  }

  /* ---- columna de texto ---- */
  .hv2-copy{ max-width:46ch; }
  .hv2-eyebrow-wrap{ opacity:0; transform:translateX(-14px); }
  .hero-v2.hv2-run .hv2-eyebrow-wrap{ animation: hv2FadeRight 0.5s cubic-bezier(.22,.61,.36,1) 0.04s 1 both; }

  .hv2-title{
    font-family:var(--font-display); font-weight:700;
    /* --hv2-fit lo calcula el navegador (ver site.js): normalmente vale 1 y
       no cambia nada; solo baja si con la letra realmente cargada alguna
       linea no cabe. Asi el titulo siempre queda en 3 lineas: con la letra
       cargada, con la de respaldo, o con cualquier otra que se use a futuro. */
    --hv2-fit: 1;
    font-size: calc(clamp(2.3rem, 2.4vw + 2.2rem, 5.6rem) * var(--hv2-fit));
    line-height:0.98;
    margin-top:0.3em;
    letter-spacing:-0.01em;
    text-transform:uppercase;
  }
  .hv2-title-line{ display:block; overflow:hidden; }
  .hv2-title-line span{ display:block; transform:translateY(105%); }
  .hero-v2.hv2-run .hv2-title-line span{
    animation: hv2RiseIn 0.6s cubic-bezier(.22,.61,.36,1) 1;
    animation-fill-mode:both;
  }
  .hero-v2.hv2-run .hv2-title-line:nth-child(1) span{ animation-delay:0.12s; }
  .hero-v2.hv2-run .hv2-title-line:nth-child(2) span{ animation-delay:0.20s; }
  .hero-v2.hv2-run .hv2-title-line:nth-child(3) span{ animation-delay:0.28s; }
  .hv2-title em{ font-style:normal; color:var(--gold); }

  .hv2-tagline{
    margin-top:1em;
    font-family:var(--font-mono);
    font-size:0.82rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
    opacity:0; transform:translateY(10px);
  }
  .hero-v2.hv2-run .hv2-tagline{ animation: hv2FadeUp 0.5s cubic-bezier(.22,.61,.36,1) 0.40s 1 both; }

  .hv2-price{
    margin-top:0.7em;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:clamp(1.7rem,3vw,2.1rem);
    color:var(--gold-bright);
    opacity:0; transform:translateY(10px);
  }
  .hero-v2.hv2-run .hv2-price{ animation: hv2FadeUp 0.5s cubic-bezier(.22,.61,.36,1) 0.48s 1 both; }

  .hv2-actions{
    display:flex; gap:1em; flex-wrap:wrap; margin-top:1.6em;
    opacity:0; transform:translateY(10px);
  }
  .hero-v2.hv2-run .hv2-actions{ animation: hv2FadeUp 0.5s cubic-bezier(.22,.61,.36,1) 0.56s 1 both; }

  @keyframes hv2FadeRight{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:translateX(0); } }
  @keyframes hv2FadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes hv2RiseIn{ from{ transform:translateY(105%); } to{ transform:translateY(0); } }

  /* ---- escenario de balones ---- */
  .hv2-stage{
    position:relative;
    width:100%; /* explicito: sin esto, el auto-margin de abajo anula el
                   stretch por defecto del grid item y, como sus unicos
                   hijos son position:absolute (sin tamaño intrinseco),
                   colapsa a 0x0 */
    /* Proporcion tomada del boceto: el grupo de balones ahi mide 853x649px
       (relacion 1/0.76), no un cuadrado. */
    aspect-ratio: 1 / 0.76;
    max-width:770px; /* ~620-760px pedidos, medido en una pantalla de 1440px
                         con .hero-v2 .wrap ensanchado arriba */
    margin:0 auto;
    perspective:1000px;
  }
  /* Iluminacion dorada centrada DETRAS del balon principal (su centro cae en
     43.5% / 36% del stage, ver posiciones mas abajo) + una base de piso que
     conecta el grupo con el fondo. Ambas 100% CSS y detras de los balones
     (z-index 0; los balones van de 1 a 4). */
  .hv2-stage::before{
    content:"";
    position:absolute; z-index:0; pointer-events:none;
    left:43.5%; top:36%; width:96%; height:124%;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(232,199,133,0.26), rgba(205,165,88,0.10) 42%, transparent 60%);
    filter:blur(10px);
  }
  /* Sombra ambiental / base bajo el grupo. IMPORTANTE: los gradientes van
     centrados bien adentro de la caja y llegan a transparent antes de
     tocar cualquier borde. Con la elipse anclada "at 50% 100%" el degradado
     seguia siendo opaco justo sobre el borde inferior de la caja y se veia
     un rectangulo recortado sobre el fondo. */
  .hv2-stage::after{
    content:"";
    position:absolute; z-index:0; pointer-events:none;
    left:-8%; right:-8%; bottom:-16%; height:44%;
    background:
      radial-gradient(ellipse 52% 40% at 50% 52%, rgba(205,165,88,0.15), transparent 68%),
      radial-gradient(ellipse 62% 44% at 50% 56%, rgba(0,0,0,0.55), transparent 70%);
  }
  /* Cada balón se arma en 3 capas independientes para que ninguna se pise:
     1) .hv2-ball (boton, posicion absoluta) -> animacion de ENTRADA (CSS, una vez)
     2) .hv2-ball-hover (div)                -> escala en hover/focus (CSS, transicion)
     3) .hv2-ball-live (div)                 -> flotacion + parallax (JS, cada frame)
     Así la entrada, el hover y la flotación/parallax nunca compiten por la
     misma propiedad transform del mismo elemento. */
  .hv2-ball{
    position:absolute;
    aspect-ratio:1/1; /* ancho define el alto: circulos perfectos, nunca deformados */
    border:0; background:none; padding:0; margin:0; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    border-radius:50%;
    opacity:0;
    display:block;
  }
  .hv2-ball-hover{
    display:block; width:100%; height:100%;
    transition: transform 0.22s ease;
  }
  .hv2-ball:hover .hv2-ball-hover, .hv2-ball:focus-visible .hv2-ball-hover{
    transform:scale(1.035);
  }
  .hv2-ball-live{
    display:block; width:100%; height:100%;
    will-change:transform;
  }
  /* Sombra propia de cada balon: mas grande/profunda en la dorada (con un
     resplandor dorado sutil sumado), un poco mas suave en las otras tres.
     Sigue el contorno real (drop-shadow, no box-shadow), asi que no deja
     "cuadros" visibles alrededor del recorte transparente. */
  .hv2-ball img{
    width:100%; height:100%; border-radius:50%;
    filter:drop-shadow(0 16px 22px rgba(0,0,0,0.5));
    transition: filter 0.25s ease;
  }
  .hv2-dorada img{
    filter:
      drop-shadow(0 30px 44px rgba(0,0,0,0.62))
      drop-shadow(0 0 30px rgba(205,165,88,0.30));
  }
  .hv2-dorada:hover img, .hv2-dorada:focus-visible img{
    filter:
      drop-shadow(0 36px 50px rgba(0,0,0,0.66))
      drop-shadow(0 0 40px rgba(205,165,88,0.4));
  }
  .hv2-ball-ring{
    position:absolute; inset:-6%;
    border-radius:50%;
    box-shadow:0 0 0 0 rgba(232,199,133,0);
    transition: box-shadow 0.25s ease;
    pointer-events:none;
  }
  .hv2-ball:hover .hv2-ball-ring, .hv2-ball:focus-visible .hv2-ball-ring{
    box-shadow:0 0 0 2px rgba(232,199,133,0.55), 0 0 24px 4px rgba(232,199,133,0.18);
  }
  .hv2-ball:hover img, .hv2-ball:focus-visible img{
    filter:drop-shadow(0 24px 30px rgba(0,0,0,0.58));
  }
  .hv2-ball-label{
    position:absolute; left:50%; bottom:-1.9em; transform:translateX(-50%);
    font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--chalk); background:rgba(14,14,18,0.75); border:1px solid var(--line);
    padding:0.35em 0.7em; border-radius:999px; white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease;
    z-index:5;
  }
  .hv2-ball:hover .hv2-ball-label, .hv2-ball:focus-visible .hv2-ball-label{ opacity:1; transform:translate(-50%,-2px); }

  /* Posiciones — escritorio. Derivadas midiendo el boceto: alli el grupo
     mide 853x649 y los centros estan en (63%,43.5%) dorada, (83.7%,36%)
     estrellas, (49%,72%) tricolor, (81.7%,70.5%) plata. Reescalado al stage
     y acercando un poco los tres chicos para dejar la superposicion en el
     8-18% pedido (en el boceto los balones casi solo se rozan).
     Profundidad: tricolor delante de la dorada, dorada delante de
     estrellas y plata. */
  .hv2-dorada{    width:55%; left:16%; top:0%;    z-index:3; }
  .hv2-estrellas{ width:35%; left:65%; top:2.5%;  z-index:2; }
  .hv2-tricolor{  width:35%; left:0%;  top:54%;   z-index:4; }
  .hv2-plata{     width:35%; left:58%; top:48%;   z-index:1; }

  /* Orden pedido: texto -> tricolor (abajo-izq) -> plata (abajo-der) ->
     estrellas (arriba-der) -> dorada al final, en su posicion protagonista.
     "both" al final de cada shorthand es obligatorio: sin el, el shorthand
     resetea animation-fill-mode a "none" y el balon vuelve a opacity:0 en
     cuanto termina su animacion. */
  .hero-v2.hv2-run .hv2-tricolor{  animation: hv2InTricolor  0.52s cubic-bezier(.2,.65,.3,1) 0.40s 1 both; }
  .hero-v2.hv2-run .hv2-plata{     animation: hv2InPlata     0.52s cubic-bezier(.2,.65,.3,1) 0.53s 1 both; }
  .hero-v2.hv2-run .hv2-estrellas{ animation: hv2InEstrellas 0.52s cubic-bezier(.2,.65,.3,1) 0.66s 1 both; }
  .hero-v2.hv2-run .hv2-dorada{    animation: hv2InDorada    0.56s cubic-bezier(.18,.7,.3,1)  0.78s 1 both; }

  @keyframes hv2InTricolor{
    from{ opacity:0; transform:translate(-16%,14%) scale(0.82) rotate(-6deg); }
    to{ opacity:1; transform:translate(0,0) scale(1) rotate(0deg); }
  }
  @keyframes hv2InPlata{
    from{ opacity:0; transform:translate(14%,16%) scale(0.82) rotate(6deg); }
    to{ opacity:1; transform:translate(0,0) scale(1) rotate(0deg); }
  }
  @keyframes hv2InEstrellas{
    from{ opacity:0; transform:translate(14%,-16%) scale(0.82) rotate(5deg); }
    to{ opacity:1; transform:translate(0,0) scale(1) rotate(0deg); }
  }
  @keyframes hv2InDorada{
    from{ opacity:0; transform:translate(0,8%) scale(0.74) rotate(0deg); }
    to{ opacity:1; transform:translate(0,0) scale(1) rotate(0deg); }
  }

  /* La flotación posterior y el parallax por cursor se calculan en JS (un
     único rAF por balón, ver script) y se escriben en .hv2-ball-live para no
     pelear con la animación de entrada ni con el hover. Se pausan solos
     cuando la pestaña no está visible (el propio loop lo revisa). */

  /* aterrizaje: chispas doradas puntuales, una sola vez */
  .hv2-spark{
    position:absolute; width:5px; height:5px; border-radius:50%;
    background:radial-gradient(circle, rgba(232,199,133,0.95), rgba(232,199,133,0));
    pointer-events:none; opacity:0;
    animation: hv2Spark 0.85s ease-out forwards;
  }
  @keyframes hv2Spark{
    0%{ opacity:0; transform:translate(0,0) scale(0.4); }
    18%{ opacity:1; }
    100%{ opacity:0; transform:var(--hv2-spark-end) scale(1); }
  }

  @media (prefers-reduced-motion: reduce){
    .hv2-sweep{ display:none; }
    .hv2-eyebrow-wrap, .hv2-title-line span, .hv2-tagline, .hv2-price, .hv2-actions, .hv2-ball{
      animation:none !important; opacity:1 !important; transform:none !important;
    }
  }

  /* Movil: no reproducir la misma distribucion diagonal de escritorio.
     Grupo compacto de 4 balones, dorada un poco mas grande y centrada,
     los otros tres alrededor, sin ocultar ninguno y sin overflow. */
  /* Movil: texto arriba, luego el grupo compacto. Se conservan las mismas
     proporciones relativas (son porcentajes del stage), solo cambia el
     tamaño del stage; asi la dorada sigue siendo la mas grande y ninguno
     queda oculto ni se sale de pantalla. */
  @media (max-width:900px){
    .hero-v2 .wrap{ max-width:1180px; } /* vuelve al ancho normal del sitio en movil */
    .hv2-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
    .hv2-copy{ max-width:none; text-align:left; }
    .hv2-stage{ max-width:460px; margin-top:clamp(26px,5vw,38px); }
  }

  /* ---------- MOVIL < 640px ----------
     Solo ritmo vertical y encaje. No cambia la composicion del grupo (las
     posiciones siguen siendo las mismas porque son % del stage), ni los
     colores, textos, tipografia ni la animacion. */
  @media (max-width:640px){
    /* menos aire vertical: los balones entran antes en pantalla */
    .hero-v2{ padding:30px 0 40px; }
    .hv2-title{ margin-top:0.25em; }
    .hv2-tagline{ margin-top:0.8em; }
    .hv2-price{ margin-top:0.5em; }
    .hv2-actions{ margin-top:1.1em; gap:0.7em; }
    .hv2-stage{ max-width:400px; margin-top:16px; }

    /* Los dos botones se apilan cuando no caben (flex-wrap ya lo hace).
       A pantalla angosta se estiran a todo el ancho para que no queden dos
       pildoras de distinto largo, manteniendo los 44px minimos de altura. */
    .hv2-actions .btn{ flex:1 1 200px; }

    /* La etiqueta del nombre del modelo, que en escritorio cuelga por debajo
       del balon, se recorta al borde del stage en pantallas chicas. Aqui la
       ponemos por dentro para que nunca desborde. */
    .hv2-ball-label{ bottom:auto; top:50%; transform:translate(-50%,-50%); font-size:0.6rem; }
    .hv2-ball:hover .hv2-ball-label, .hv2-ball:focus-visible .hv2-ball-label{ transform:translate(-50%,-50%); }
  }

  /* Muy angosto (320-380): un poco menos de padding lateral dentro del hero
     para que el grupo respire, y titulo levemente mas chico.
     El tamano se multiplica por --hv2-fit igual que en el resto de pantallas.
     Antes esta regla ponia un tamano fijo y anulaba el ajuste automatico; por
     eso "REVOLUCIONAR", que es mas larga que la frase anterior, se cortaba a
     320px por mucho que el guardian intentara reducirla. */
  @media (max-width:380px){
    .hero-v2 .wrap{ padding-left:16px; padding-right:16px; }
    .hv2-title{ font-size:calc(2.35rem * var(--hv2-fit)); }
    .hv2-price{ font-size:1.6rem; }

    /* NAV: a 320px "REVOLUTION SPORT" no cabe junto al logo y la hamburguesa,
       se partia en dos lineas y estiraba el encabezado ~25px. Se achica lo
       justo para que entre en una sola linea. */
    nav{ padding-left:16px; padding-right:16px; }
    .logo{ gap:0.5em; min-width:0; }
    .logo-text{ font-size:1.02rem; white-space:nowrap; }
    .logo img{ width:32px; height:32px; }
  }

  /* Pantallas chicas Y bajas (tipo 320x568): recorta un poco mas el aire
     vertical para que el grupo de balones asome sin tener que desplazarse. */
  @media (max-width:640px) and (max-height:700px){
    .hero-v2{ padding:20px 0 28px; }
    .hv2-actions{ margin-top:0.9em; }
    .hv2-stage{ margin-top:10px; }
  }
  /* ---------- SECTION SHELL ---------- */
  section{ position:relative; padding:clamp(64px,9vw,110px) 0; }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:2em; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,52px);
  }
  .section-head h2{ margin-top:0.35em; }
  .section-note{ max-width:34ch; color:var(--steel); font-size:0.95rem; }

  .divider{
    height:56px; background:var(--ink-2);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
  }

  /* ---------- PRODUCTS ---------- */
  .lineup{ background:var(--ink-2); }
  .cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
  /* el encabezado es sticky: sin esto, al saltar desde un balon del hero
     la tarjeta queda por debajo de la barra superior */
  .card{ scroll-margin-top:96px; }
  @media (max-width:820px){ .cards{ grid-template-columns:1fr; } }

  .card{
    background:var(--ink);
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    display:flex; flex-direction:column;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .card:hover{ transform:translateY(-6px); border-color:var(--gold); }
  .card-photo{ aspect-ratio:1/1; overflow:hidden; background:#f4f0e6; }
  .card-photo img{ width:100%; height:100%; object-fit:cover; }
  .card-body{ padding:1.7rem 1.7rem 1.9rem; display:flex; flex-direction:column; gap:1rem; }
  .card-tag{
    font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--crimson); background:rgba(209,56,44,0.12); padding:0.35em 0.7em; border-radius:999px;
    align-self:flex-start;
  }
  .card-tagline{ color:var(--steel); font-size:0.92rem; }
  .feature-list{
    list-style:none; margin:0; padding:0.9rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; gap:0.45rem;
    font-family:var(--font-mono); font-size:0.76rem; color:var(--steel);
  }
  .feature-list li{ display:flex; gap:0.6em; align-items:baseline; }
  .feature-list li::before{ content:"—"; color:var(--gold); }

  /* ---------- SPORT TAG / DETAILS ---------- */
  .sport-row{ display:flex; flex-direction:column; gap:0.6em; }
  .sport-tag{
    font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--gold); background:rgba(205,165,88,0.12); border:1px solid rgba(205,165,88,0.35);
    padding:0.35em 0.7em; border-radius:999px; align-self:flex-start;
  }
  .sport-details summary{
    cursor:pointer; font-family:var(--font-mono); font-size:0.74rem; color:var(--steel);
    text-transform:uppercase; letter-spacing:0.06em; list-style:none;
    display:inline-flex; align-items:center; gap:0.4em;
  }
  .sport-details summary::-webkit-details-marker{ display:none; }
  .sport-details summary::after{ content:"+"; color:var(--gold); font-size:1rem; line-height:1; }
  .sport-details[open] summary::after{ content:"–"; }
  .sport-details p{ margin-top:0.6em; color:var(--steel); font-size:0.85rem; line-height:1.55; }

  .price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1em; margin-top:auto; }
  .price{ font-family:var(--font-mono); font-size:1.5rem; color:var(--gold); font-variant-numeric: tabular-nums; }
  .price span{ font-size:0.68rem; color:var(--steel); display:block; margin-top:0.2em; text-transform:none; letter-spacing:0; }

  /* ---------- BENEFITS ---------- */
  .benefits-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  @media (max-width:900px){ .benefits-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .benefits-grid, .welcome-grid{ grid-template-columns:1fr; } }
  .benefit{ background:var(--ink); padding:2.1rem 1.5rem; display:flex; flex-direction:column; gap:0.8rem; }
  .benefit b{ font-family:var(--font-display); font-size:1.25rem; color:var(--gold); font-weight:600; }
  .benefit p{ color:var(--steel); font-size:0.88rem; }

  /* ---------- ORDER STEPS ---------- */
  .steps{ background:var(--ink-2); }
  .step-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  @media (max-width:820px){ .step-grid{ grid-template-columns:1fr; } }
  .step{ background:var(--ink); border:1px solid var(--line); border-radius:16px; padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:0.9rem; }
  .step-num{ font-family:var(--font-mono); font-size:0.8rem; color:var(--gold); letter-spacing:0.1em; }
  .step p{ color:var(--steel); font-size:0.92rem; }

  /* ---------- CONTACT ---------- */
  .cta{
    position:relative;
    background:linear-gradient(135deg, var(--ink-3), var(--ink));
    border-top:1px solid var(--line);
    overflow:hidden;
  }
  .cta::before{
    content:"";
    position:absolute; right:-10%; top:-30%; width:60%; aspect-ratio:1/1;
    background:radial-gradient(circle, rgba(205,165,88,0.14), transparent 65%);
  }
  .cta-inner{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:2.5em; flex-wrap:wrap; }
  .cta-copy{ max-width:40ch; }
  .cta-copy p{ color:var(--steel); margin-top:0.9em; }
  .cta-actions{ display:flex; gap:1em; flex-wrap:wrap; }
  .contact-line{ margin-top:2em; font-family:var(--font-mono); font-size:0.82rem; color:var(--steel); display:flex; gap:2em; flex-wrap:wrap; }
  .contact-line b{ color:var(--chalk); font-weight:400; }
  .avail-note{ margin-top:1.4em; font-size:0.8rem; color:var(--steel); font-style:italic; }

  /* ---------- FOOTER ---------- */
  footer.site{
    padding:2.2rem clamp(20px,5vw,56px);
    border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1em;
    font-family:var(--font-mono); font-size:0.7rem; color:var(--steel);
    text-transform:uppercase; letter-spacing:0.06em;
  }
  footer.site a{ text-decoration:none; color:var(--steel); }
  footer.site a:hover{ color:var(--gold); }
  .foot-links{ display:flex; gap:1.6em; flex-wrap:wrap; }

  /* ---------- REDES SOCIALES Y CORREO ----------
     Andres pidio que se vea el logo real de cada app, no una silueta. Asi que
     cada uno va en su azulejo: Instagram con su degradado y Facebook con su
     azul, los mismos que tienen los iconos en el telefono. Se reconocen de un
     vistazo, que es justo para lo que sirven.
     El azulejo es pequeno y va abajo, lejos del boton de WhatsApp, para que el
     color no le robe atencion al boton que de verdad vende. */
  .soc{
    display:inline-flex; align-items:center; gap:0.7em;
    color:var(--steel); text-decoration:none;
    font-family:var(--font-mono); font-size:0.8rem;
    transition:color 0.25s ease;
  }
  .soc:hover{ color:var(--chalk); }

  .soc-tile{
    width:34px; height:34px; flex:0 0 auto;
    border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:transform 0.25s cubic-bezier(.22,.61,.36,1), box-shadow 0.25s ease;
  }
  .soc-tile svg{ width:20px; height:20px; display:block; }

  /* El degradado de Instagram va en diagonal desde abajo a la izquierda, que es
     como lo tiene la app: amarillo, naranja, rosa y morado. */
  .soc-ig{
    background:radial-gradient(circle at 28% 105%,
      #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 62%, #285aeb 92%);
  }
  .soc-fb{ background:#1877f2; }

  .soc:hover .soc-tile{ transform:translateY(-3px); }
  .soc:hover .soc-ig{ box-shadow:0 6px 18px rgba(214,36,159,0.35); }
  .soc:hover .soc-fb{ box-shadow:0 6px 18px rgba(24,119,242,0.35); }
  .soc:focus-visible .soc-tile{ transform:translateY(-3px); }

  /* Sin animacion para quien la tenga desactivada en su sistema. */
  @media (prefers-reduced-motion: reduce){
    .soc-tile{ transition:none; }
    .soc:hover .soc-tile{ transform:none; }
  }

  /* ---------- APARTADO DE REDES ----------
     Antes esto era una linea suelta con el usuario de Instagram escrito
     (@revolutionsportcr). Se cambio por dos tarjetas porque el arroba de
     Space Mono se ve enorme y enroscado, y porque un cliente que no usa
     Instagram no sabe que un texto que empieza con @ es un enlace.
     Asi cada tarjeta dice a donde lleva y que hay que hacer. Sin arroba. */
  .redes-bloque{ margin-top:1.8em; }
  .redes-titulo{
    display:block; margin-bottom:0.9em;
    font-family:var(--font-mono); color:var(--steel);
    text-transform:uppercase; letter-spacing:0.08em; font-size:0.72rem;
  }

  .red-card{
    display:flex; align-items:center; gap:0.9em;
    padding:0.85em 1em;
    margin-bottom:0.7em;
    background:var(--ink);
    border:1px solid var(--line);
    border-radius:14px;
    text-decoration:none;
    /* 44px de alto minimo: es el tamano que necesita un dedo para acertar. */
    min-height:44px;
    transition:border-color 0.25s ease, transform 0.25s cubic-bezier(.22,.61,.36,1), background 0.25s ease;
  }
  .red-card:last-child{ margin-bottom:0; }
  .red-card:hover, .red-card:focus-visible{
    border-color:var(--gold);
    transform:translateY(-2px);
  }

  /* Una sola linea: el nombre de la red. La flecha ya dice que lleva a otro
     lado, asi que la instruccion escrita sobraba. */
  b.red-texto{
    min-width:0;
    font-family:var(--font-body); font-weight:600; font-size:0.95rem;
    color:var(--chalk); line-height:1.3;
  }

  /* La flecha se empuja al extremo y se corre un poco al pasar por encima:
     refuerza sin palabras que la tarjeta lleva a otro lado. */
  .red-flecha{
    margin-left:auto; padding-left:0.6em;
    color:var(--steel); font-size:1.1rem; line-height:1;
    transition:color 0.25s ease, transform 0.25s cubic-bezier(.22,.61,.36,1);
  }
  .red-card:hover .red-flecha, .red-card:focus-visible .red-flecha{
    color:var(--gold); transform:translateX(4px);
  }
  .red-card:hover .soc-tile{ transform:translateY(-2px); }
  .red-card:hover .soc-ig{ box-shadow:0 6px 18px rgba(214,36,159,0.35); }
  .red-card:hover .soc-fb{ box-shadow:0 6px 18px rgba(24,119,242,0.35); }

  @media (prefers-reduced-motion: reduce){
    .red-card, .red-flecha, .soc-tile{ transition:none; }
    .red-card:hover, .red-card:hover .red-flecha,
    .red-card:hover .soc-tile{ transform:none; }
  }

  /* En pantallas anchas las dos tarjetas caben lado a lado. */
  @media (min-width:1200px){
    .redes-bloque{ display:flex; flex-wrap:wrap; gap:0.7em; align-items:center; }
    .redes-titulo{ flex:0 0 100%; margin-bottom:0.2em; }
    .red-card{ flex:1 1 260px; margin-bottom:0; }
  }

  .foot-social{ display:flex; align-items:center; gap:1em; flex-wrap:wrap; }
  /* En el pie los azulejos van solos, sin texto al lado. */
  .foot-social .soc-tile{ width:28px; height:28px; border-radius:8px; }
  .foot-social .soc-tile svg{ width:16px; height:16px; }

  /* En movil el azulejo ya mide 34px; se le suma espacio alrededor para llegar
     a los 44px que necesita un dedo. Se usa el ANCHO de pantalla y no
     "(hover:none)", que no todos los navegadores responden bien. */
  @media (max-width:820px){
    .soc{ min-height:44px; }
    .social-line{ gap:1.4em; row-gap:0.4em; }
    .foot-social{ gap:0.9em; }
    .foot-social .soc{ min-width:44px; min-height:44px; justify-content:center; }
  }

  @media (max-width:640px){
    footer.site{ justify-content:flex-start; }
  }

  /* ---------- WELCOME ---------- */
  .welcome-copy{ max-width:64ch; color:var(--steel); font-size:1rem; margin-top:1.1em; }
  .welcome-copy b{ color:var(--chalk); font-weight:600; }
  .welcome-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:2.2rem; }
  @media (max-width:820px){ .welcome-grid{ grid-template-columns:1fr; } }

  /* ---------- ORDER FORM ---------- */
  .order-box{
    background:var(--ink); border:1px solid var(--line); border-radius:20px;
    padding:clamp(28px,4vw,44px); max-width:720px; margin:0 auto;
  }
  .order-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; }
  @media (max-width:640px){ .order-grid{ grid-template-columns:minmax(0,1fr); } }
  .field{ display:flex; flex-direction:column; gap:0.5em; min-width:0; }
  .field.full{ grid-column:1/-1; }
  .field label{
    font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel);
  }
  .field input, .field select, .field textarea{
    width:100%; min-width:0; max-width:100%;
    background:var(--ink-3); border:1px solid var(--line); border-radius:10px;
    padding:0.85em 1em; color:var(--chalk); font-family:var(--font-body); font-size:0.95rem;
    outline:none; transition:border-color 0.18s ease, box-shadow 0.18s ease;
    min-height:44px;
  }
  .field select{
    appearance:none; -webkit-appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position:calc(100% - 20px) center, calc(100% - 15px) center;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--gold); box-shadow:0 0 0 3px rgba(205,165,88,0.18);
  }
  .field textarea{ resize:vertical; min-height:5.5em; font-family:var(--font-body); }
  .field-error{
    font-family:var(--font-mono); font-size:0.72rem; color:var(--crimson); min-height:1.2em;
  }
  .field input:invalid[data-touched="true"], .field select:invalid[data-touched="true"], .field textarea:invalid[data-touched="true"]{
    border-color:var(--crimson);
  }

  .consent-field{
    grid-column:1/-1; display:flex; align-items:flex-start; gap:0.7em;
    font-size:0.85rem; color:var(--steel); line-height:1.5;
  }
  .consent-field input[type="checkbox"]{
    width:20px; height:20px; min-height:0; flex:none; margin-top:0.15em; accent-color:var(--gold);
  }
  .consent-field a{ color:var(--gold); text-decoration:underline; }

  .order-submit{ display:flex; justify-content:flex-end; margin-top:1.4rem; }
  .order-submit .btn{ border:none; }
  .form-note{ margin-top:1.1em; font-size:0.78rem; color:var(--steel); font-style:italic; }

  /* ---------- SHIPPING & PAYMENT ---------- */
  .shipping{ background:var(--ink-2); }
  .ship-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.4rem; }
  .ship-card{ background:var(--ink); border:1px solid var(--line); border-radius:16px; padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:0.9rem; }
  .ship-card p{ color:var(--steel); font-size:0.92rem; }
  .ship-card p b{ color:var(--chalk); font-weight:700; }

  .policy-box{
    margin-top:1.6rem; background:var(--ink); border:1px solid var(--line); border-radius:16px;
    padding:1.5rem 1.7rem;
  }
  .policy-box summary{
    cursor:pointer; font-family:var(--font-mono); font-size:0.82rem; color:var(--gold);
    text-transform:uppercase; letter-spacing:0.06em; list-style:none;
  }
  .policy-box summary::-webkit-details-marker{ display:none; }
  .policy-body{ margin-top:1.1em; display:flex; flex-direction:column; gap:0.9em; }
  .policy-body p{ color:var(--steel); font-size:0.9rem; line-height:1.6; }
  .policy-body p b{ color:var(--chalk); }


  /* extraido del unico atributo style="" que tenia el HTML, para poder
     usar una CSP sin 'unsafe-inline' en los estilos */
  .cta-title{ margin-top:0.3em; }

  /* ---------- Carrusel de fotos de producto ----------
     Vive dentro de .card-photo, que ya es un cuadrado con overflow:hidden.
     No cambia el tamaño ni la posicion de la tarjeta: solo lo que pasa
     adentro del mismo recuadro. */
  .carrusel{ position:relative; width:100%; height:100%; }

  .carrusel-pista{
    display:flex; width:100%; height:100%;
    transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }
  /* flex:0 0 100% y min-width:0 para que cada foto ocupe exactamente el
     ancho del recuadro y no la empuje el contenido (el mismo problema de
     desbordamiento que arreglamos en el formulario). */
  .carrusel-slide{ flex:0 0 100%; min-width:0; height:100%; }
  .carrusel-slide picture{ display:block; width:100%; height:100%; }

  .carrusel-flecha{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:999px;
    display:grid; place-items:center;
    background:rgba(14,14,18,0.55); color:#fff;
    border:1px solid rgba(255,255,255,0.22);
    cursor:pointer; padding:0; line-height:1;
    backdrop-filter: blur(6px);
    opacity:0; transition: opacity 0.2s ease, background 0.2s ease;
    z-index:2;
  }
  .carrusel-flecha svg{ width:18px; height:18px; display:block; }
  .carrusel-prev{ left:10px; }
  .carrusel-next{ right:10px; }
  .carrusel-flecha:hover{ background:rgba(14,14,18,0.8); }
  /* Se revelan al pasar el mouse por la tarjeta; con teclado aparecen al
     recibir foco, si no serian invisibles para quien navega sin mouse. */
  .card:hover .carrusel-flecha,
  .carrusel-flecha:focus-visible{ opacity:1; }
  .carrusel-flecha:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

  /* En tactil no hay hover: las flechas se quedan visibles y mas grandes,
     porque ahi son el unico indicio de que hay mas de una foto. */
  @media (hover:none), (pointer:coarse){
    .carrusel-flecha{ opacity:1; width:44px; height:44px; }
  }

  .carrusel-puntos{
    position:absolute; left:0; right:0; bottom:9px;
    display:flex; justify-content:center; gap:7px; z-index:2;
  }
  .carrusel-punto{
    width:26px; height:26px; padding:0; border:0; background:none;
    cursor:pointer; display:grid; place-items:center;
  }
  .carrusel-punto::before{
    content:""; width:7px; height:7px; border-radius:999px;
    background:rgba(14,14,18,0.3); border:1px solid rgba(255,255,255,0.5);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .carrusel-punto[aria-current="true"]::before{
    background:var(--gold); transform:scale(1.35); border-color:var(--gold);
  }
  .carrusel-punto:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; border-radius:999px; }

  /* Etiqueta del color visible.
     Va ABAJO, no arriba: el encabezado del sitio es fijo y tapaba la esquina
     superior de la foto en ciertas posiciones de scroll. Abajo a la izquierda
     queda libre y equilibra los puntos, que van centrados.
     Fondo casi opaco porque las fotos de producto son claras y con el fondo
     translucido el texto blanco se perdia. */
  .carrusel-etiqueta{
    position:absolute; left:10px; bottom:10px; z-index:3;
    font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.08em;
    text-transform:uppercase; color:#fff; line-height:1;
    background:rgba(14,14,18,0.88); border:1px solid rgba(255,255,255,0.22);
    padding:0.45em 0.75em; border-radius:999px;
    backdrop-filter: blur(6px);
  }

  @media (prefers-reduced-motion: reduce){
    .carrusel-pista{ transition:none; }
  }

  /* ---------- Ajuste del titulo del hero para la tipografia nueva ----------
     Si la letra que termina cargando es mas ancha de lo previsto, la linea mas
     larga ("REVOLUCIONAR") se parte en dos y el titulo pasa de 3 a 4 lineas. Pasa, por ejemplo, si
     Google Fonts falla y el visitante ve Georgia en vez de Playfair Display.
     Los numeros no son a ojo: se midio el ancho real que necesita la linea
     mas larga contra el ancho de la columna en cada tamano de pantalla.
     Solo aplica de 901px para arriba, que es donde el hero va a dos columnas;
     abajo de eso la columna es ancha y el titulo ya cabia sin tocar nada. */
  /* (El ajuste de tamano que hubo aca era para una tipografia mas ancha.
     Con Playfair Display el titulo cabe con el tamano original.) */

  /* ---------- Botones que llevan a WhatsApp ----------
     WhatsApp es el unico canal de venta del sitio, asi que conviene que esos
     botones se reconozcan sin leerlos: el icono hace ese trabajo.
     El verde de WhatsApp se usa SOLO en el boton final del pedido. Pintar de
     verde toda la pagina rompe la paleta negra y dorada; no usarlo en ningun
     lado desaprovecha el reflejo mas automatico que tiene la gente. */
  .wa-ico{ width:1.05em; height:1.05em; flex:0 0 auto; }

  /* El boton secundario del hero era casi invisible sobre el fondo oscuro:
     leia como texto, no como boton. Ahora tiene cuerpo, sin competir con el
     dorado principal. */
  .btn-ghost{
    background:rgba(200,162,74,0.10);
    border-color:rgba(200,162,74,0.75);
    color:#E4C87E;
  }
  .btn-ghost:hover{ background:rgba(200,162,74,0.20); color:#fff; border-color:var(--gold); }

  /* Envio final del pedido: aca la persona ya decidio comprar. */
  #pedido button[type=submit]{
    background:#25D366; color:#05230f; border-color:#25D366;
  }
  #pedido button[type=submit]:hover{
    background:#1ebe5a; box-shadow:0 12px 26px -10px rgba(37,211,102,0.55);
  }

  /* ---------- Franja de confianza ----------
     Son datos que la pagina YA decia, pero enterrados abajo. Subirlos al
     punto donde la persona decide comprar es lo que los hace servir. */
  .hv2-trust{
    display:flex; flex-wrap:wrap; gap:0.6rem 1.4rem;
    margin-top:1.5rem; padding-top:1.2rem;
    border-top:1px solid var(--line);
    font-family:var(--font-mono); font-size:0.68rem;
    letter-spacing:0.04em; text-transform:uppercase; color:var(--steel);
  }
  .hv2-trust li{ display:flex; align-items:center; gap:0.5em; list-style:none; }
  .hv2-trust svg{ width:14px; height:14px; color:var(--gold); flex:0 0 auto; }
  @media (max-width:640px){
    .hv2-trust{ font-size:0.62rem; gap:0.5rem 1rem; margin-top:1.2rem; padding-top:1rem; }
  }

  /* Aviso cuando no hay JavaScript. Va con clase y no con style="..." porque
     la CSP del sitio no permite estilos escritos dentro del HTML. */
  .aviso-sinjs{
    margin-top:1rem; padding:0.9rem 1rem;
    border:1px solid var(--gold); border-radius:12px; color:var(--chalk);
  }
  .aviso-sinjs a{ color:var(--gold); }

  /* ---------- Red de seguridad del hero ----------
     PROBLEMA: el eyebrow, el titulo, la bajada, el precio, los botones y los
     cuatro balones arrancan invisibles y solo aparecen cuando el JavaScript
     agrega la clase .hv2-run. Si el JS no corre, el hero queda VACIO: se ve
     el fondo negro y ningun producto.
     Pasa en tres casos reales: JavaScript desactivado, site.js que no carga
     por un fallo de red, y JavaScript lento (el hero tarda en aparecer).

     SOLUCION: una animacion de CSS puro que revela todo por su cuenta. El CSS
     no depende del JavaScript, asi que esto corre siempre.
     Cuando el JS SI funciona, las reglas .hero-v2.hv2-run son mas especificas
     y reemplazan estas por completo, asi que la entrada original no cambia.
     El retardo de 2.2s es mayor que la entrada normal (1.34s), por lo que en
     el camino normal esta red nunca llega a verse. */
  @keyframes hv2Rescate      { to{ opacity:1; } }
  @keyframes hv2RescateSubir { to{ opacity:1; transform:translateY(0); } }
  @keyframes hv2RescateLado  { to{ opacity:1; transform:translateX(0); } }
  @keyframes hv2RescateLinea { to{ transform:translateY(0); } }

  .hv2-eyebrow-wrap{ animation: hv2RescateLado  0.4s ease 2.2s both; }
  .hv2-title-line span{ animation: hv2RescateLinea 0.4s ease 2.2s both; }
  .hv2-tagline,
  .hv2-price,
  .hv2-actions{ animation: hv2RescateSubir 0.4s ease 2.2s both; }
  .hv2-ball{ animation: hv2Rescate 0.4s ease 2.2s both; }

  /* Si la persona pidio menos movimiento, aparece de una vez y sin esperar. */
  @media (prefers-reduced-motion: reduce){
    .hv2-eyebrow-wrap, .hv2-title-line span, .hv2-tagline,
    .hv2-price, .hv2-actions, .hv2-ball{
      opacity:1 !important; transform:none !important;
    }
  }


/* ================================================================
     CODEX PREMIUM PASS
     Se conserva el diseño original y se eleva con una sola idea:
     recorrido editorial + luz reactiva sobre la colección.
     ================================================================ */

  /* OMITIDO A PROPOSITO: la referencia cambiaba aqui los H2, H3 y los
     titulos de beneficios a Manrope 800. Andres pidio conservar la
     tipografia original del sitio, asi que esa regla no se traslada y
     todos los titulos siguen en Playfair Display, como estan publicados. */

  /* Línea de lectura: discreta en escritorio, ausente en móvil. */
  .premium-scroll-rail{
    position:fixed; right:18px; top:50%; z-index:45;
    width:18px; height:210px; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    opacity:0; transition:opacity .5s ease;
  }
  .premium-scroll-rail.is-visible{ opacity:1; }
  .premium-scroll-rail::before{
    content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
    background:rgba(244,240,230,.12);
  }
  .premium-scroll-progress{
    position:absolute; left:50%; top:0; width:2px; height:0;
    transform:translateX(-50%);
    background:linear-gradient(180deg,var(--gold-bright),var(--crimson));
    box-shadow:0 0 16px rgba(205,165,88,.45);
    border-radius:999px;
  }
  .premium-scroll-label{
    position:absolute; right:13px; top:50%; transform:translateY(-50%) rotate(-90deg);
    transform-origin:right center; white-space:nowrap;
    font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em;
    color:rgba(232,199,133,.72); text-transform:uppercase;
  }

  /* El menú comunica en qué parte de la página está el visitante. */
  .navlinks a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px;
    background:linear-gradient(90deg,var(--gold),var(--gold-bright));
    transition:right .28s ease;
  }
  .navlinks a:hover::after, .navlinks a.is-current::after{ right:0; }
  .navlinks a.is-current{ color:var(--gold-bright); }

  /* Cintillo editorial entre catálogo y beneficios. Es el gesto visual
     protagonista fuera de la portada; no agrega reclamos comerciales. */
  .premium-marquee{
    position:relative; z-index:2; overflow:hidden;
    border-top:1px solid rgba(205,165,88,.22);
    border-bottom:1px solid rgba(205,165,88,.22);
    background:
      linear-gradient(90deg,rgba(209,56,44,.08),transparent 25%,transparent 75%,rgba(205,165,88,.08)),
      #111015;
    padding:clamp(18px,2.4vw,30px) 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .premium-marquee-track{
    width:max-content; display:flex; align-items:center;
    animation:premiumMarquee 30s linear infinite;
    will-change:transform;
  }
  .premium-marquee-set{ display:flex; align-items:center; flex:none; }
  .premium-marquee-word{
    font-family:var(--font-display); font-size:clamp(1.2rem,2.7vw,2.4rem);
    font-weight:600; line-height:1; letter-spacing:-.025em; text-transform:uppercase;
    color:transparent; -webkit-text-stroke:1px rgba(244,240,230,.52);
    padding:0 .72em;
  }
  .premium-marquee-word:nth-child(4n+1){ color:var(--gold); -webkit-text-stroke:0; }
  .premium-marquee-dot{
    width:7px; height:7px; flex:none; border-radius:50%;
    background:var(--crimson); box-shadow:0 0 16px rgba(209,56,44,.5);
  }
  @keyframes premiumMarquee{ to{ transform:translateX(-50%); } }
  .premium-marquee:hover .premium-marquee-track{ animation-play-state:paused; }

  /* Iluminación que sigue al cursor dentro de la colección. */
  .lineup{ --premium-x:50%; --premium-y:28%; isolation:isolate; }
  .lineup::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(600px circle at var(--premium-x) var(--premium-y),rgba(205,165,88,.105),transparent 54%),
      radial-gradient(440px circle at calc(var(--premium-x) + 12%) calc(var(--premium-y) + 8%),rgba(209,56,44,.055),transparent 62%);
  }
  .lineup > .wrap{ position:relative; z-index:1; }

  .card{
    --card-x:50%; --card-y:28%;
    position:relative; isolation:isolate;
    box-shadow:0 18px 60px -45px rgba(0,0,0,.9);
  }
  .card::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(380px circle at var(--card-x) var(--card-y),rgba(232,199,133,.105),transparent 44%);
    opacity:0; transition:opacity .35s ease;
  }
  .card:hover::before, .card:focus-within::before{ opacity:1; }
  .card-photo, .card-body{ position:relative; z-index:1; }
  .card-photo img{ transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s ease; }
  .card:hover .card-photo img{ transform:scale(1.025); filter:saturate(1.04) contrast(1.02); }
  .card[data-premium-index]::after{
    content:attr(data-premium-index); position:absolute; z-index:4; right:14px; top:14px;
    min-width:34px; height:24px; padding:0 8px; display:grid; place-items:center;
    border:1px solid rgba(244,240,230,.2); border-radius:999px;
    background:rgba(14,14,18,.72); backdrop-filter:blur(9px);
    color:var(--gold-bright); font:700 .58rem/1 var(--font-mono); letter-spacing:.08em;
  }

  /* La quinta pieza cierra la colección como una ficha editorial horizontal.
     Aprovecha el ancho disponible y evita un hueco visual al final del catálogo. */
  @media (min-width:821px){
    .cards > .card:last-child{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
      align-items:stretch;
    }
    .cards > .card:last-child .card-photo{
      /* CORREGIDO respecto de la referencia.
         Venia con aspect-ratio:4/3 junto a min-height:100%. La altura de la
         fila la marca el texto, y la proporcion estiraba el ANCHO para
         cumplirla: la foto salia 76px fuera de su columna y se metia debajo
         del cuerpo de la tarjeta, tapando la flecha del carrusel. Con eso,
         en computadora no se podia pasar a la foto del chaleco naranja.
         La foto ahora llena exactamente su columna; la imagen de adentro ya
         usa object-fit:cover, asi que el encuadre se mantiene. */
      width:100%;
      max-width:100%;
      min-height:100%;
      aspect-ratio:auto;
    }
    .cards > .card:last-child .card-body{
      justify-content:center;
      padding:clamp(2rem,4vw,4rem);
    }
  }

  /* Entrada editorial: el contenido queda plenamente visible si JS falla. */
  html.premium-motion .premium-reveal{
    opacity:0; transform:translateY(22px);
    transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1);
  }
  html.premium-motion .premium-reveal.is-inview{ opacity:1; transform:none; }
  html.premium-motion .cards .card.premium-reveal:nth-child(even){ transition-delay:.08s; }

  /* Los bloques funcionales reaccionan como objetos físicos, sin cambiar
     su estructura ni competir con los productos. */
  .step, .benefit, .ship-card{
    transition:transform .28s ease,border-color .28s ease,background-color .28s ease;
  }
  .step:hover, .benefit:hover, .ship-card:hover{
    transform:translateY(-4px); border-color:rgba(205,165,88,.42);
    background-color:rgba(205,165,88,.035);
  }
  .order-box{ transition:border-color .35s ease,box-shadow .35s ease; }
  .order-box:focus-within{
    border-color:rgba(205,165,88,.55);
    box-shadow:0 24px 80px -42px rgba(205,165,88,.35);
  }
  .policy-box[open] .policy-body{ animation:premiumPolicy .35s ease both; }
  @keyframes premiumPolicy{ from{ opacity:0; transform:translateY(-7px); } }

  @media (max-width:820px){
    .premium-scroll-rail{ display:none; }
    .premium-marquee{ -webkit-mask-image:none; mask-image:none; }
    .card::before{ display:none; }
    .step:hover, .benefit:hover, .ship-card:hover{ transform:none; }
  }
  @media (prefers-reduced-motion:reduce){
    .premium-marquee-track{ animation:none; transform:translateX(-2%); }
    html.premium-motion .premium-reveal{ opacity:1; transform:none; filter:none; transition:none; }
    .card-photo img{ transition:none; }
    .card:hover .card-photo img{ transform:none; }
  }