/* ============================================================
   Vultra — estilos compartidos por todas las páginas
   Antes vivían copiados dentro de cada .html. Al estar aquí,
   un cambio de color o de tipografía se hace UNA vez y afecta
   a toda la web. Si editas esto, sube solo este archivo.
   ============================================================ */
:root{
    --bg:#ffffff;
    --ink:#0a0a0a;
    --ink-soft:#555555;
    --ink-faint:#8a8a8a;
    --line:#e6e6e6;
    --surface:#f6f6f6;
    --surface-2:#efefef;
    --radius:14px;
    --maxw:1280px;
    --shadow:0 20px 50px rgba(0,0,0,.10);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:hidden;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--ink);color:#fff;}
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:#fff;}
  ::-webkit-scrollbar-thumb{background:var(--ink);border-radius:10px;border:2px solid #fff;}

  h1,h2,h3,.display{
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.02em;
    line-height:.95;
    margin:0;
    text-transform:uppercase;
  }
  h1{font-size:clamp(48px,9vw,120px);}
  h2{font-size:clamp(34px,5.5vw,64px);}
  h3{font-size:clamp(20px,2.6vw,28px);}
  p{margin:0;line-height:1.6;color:var(--ink-soft);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  section{padding:120px 0;position:relative;}
  @media (max-width:768px){section{padding:80px 0;}}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:16px 32px;border-radius:999px;border:2px solid var(--ink);
    background:var(--ink);color:#fff;font-weight:700;font-size:14px;
    letter-spacing:.06em;text-transform:uppercase;transition:transform .25s ease, background .25s ease, color .25s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn.ghost{background:transparent;color:var(--ink);}
  .btn.ghost:hover{background:var(--ink);color:#fff;}
  .btn[disabled]{opacity:.35;cursor:not-allowed;transform:none;background:var(--ink-faint);border-color:var(--ink-faint);}

  .eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:14px;display:block;
  }

  /* ---------- Nav ---------- */
  #nav{
    position:fixed;top:0;left:0;right:0;z-index:200;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 32px;transition:background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, padding .3s ease;
  }
  #nav.scrolled{
    background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--line);padding:14px 32px;
  }
  /* Logo real de Vultra, trazado sobre la foto de la tarjeta (el símbolo es
     una sola pieza: las dos barras se unen abajo formando la punta de la V).
     Aquí se deja sin el claim "Protein bar & supplements": a este tamaño
     quedaría en 4px y sería ilegible. El símbolo sale disparado hacia arriba
     y vuelve a entrar por abajo cada pocos segundos. */
  .logo{display:flex;align-items:center;}
  .logo svg{display:block;height:46px;width:auto;overflow:visible;transition:height .3s ease;}
  #nav.scrolled .logo svg{height:38px;}
  .logo .v-mark{transform-box:fill-box;transform-origin:50% 50%;}
  @media (prefers-reduced-motion:no-preference){
    .logo .v-mark{animation:vultraMark 5s ease-in-out infinite;}
  }
  @keyframes vultraMark{
    0%,55%{transform:translateY(0) scale(1);opacity:1;}
    70%{transform:translateY(-70px) scale(.9);opacity:0;}
    71%{transform:translateY(70px) scale(.9);opacity:0;}
    88%,100%{transform:translateY(0) scale(1);opacity:1;}
  }
  .nav-links{display:flex;gap:34px;align-items:center;}
  .nav-links a{font-size:14px;font-weight:600;letter-spacing:.03em;position:relative;}
  .nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--ink);transition:width .25s ease;}
  .nav-links a:hover::after{width:100%;}
  /* La página en la que estás, subrayada. Antes solo lo hacía Contáctanos,
     porque era la única con esta regla en su propia copia del CSS. */
  .nav-links a.current::after{width:100%;}
  .nav-links a.current{font-weight:800;}
  .nav-actions{display:flex;align-items:center;gap:18px;}
  .icon-btn{
    background:none;border:none;padding:8px;position:relative;display:flex;
    /* Sin color explícito, Safari en iPhone y iPad pinta los <button> con su
       azul de sistema, y como los iconos usan currentColor salían el carrito
       y la cuenta en azul mientras la lupa (que es un <a>) salía negra. */
    color:var(--ink);-webkit-appearance:none;appearance:none;
  }
  .icon-btn svg{width:22px;height:22px;}
  /* ── Acceso del personal: la marca de Vultra, animada ──
     Sustituye al candado. Gira sobre sí misma cada 7 s, con un ritmo distinto
     al del logo grande del nav (que salta cada 5 s) a propósito: si fueran
     iguales, las dos marcas de la misma barra se moverían a la vez y parecería
     un fallo. Va algo apagada porque no es un botón para el cliente; al pasar
     por encima se enciende. */
  .staff-btn{opacity:.7;transition:opacity .25s ease;}
  .staff-btn:hover,.staff-btn:focus-visible{opacity:1;}
  .staff-btn svg{width:21px;height:21px;display:block;overflow:visible;}
  .staff-btn .v-mark{
    fill:currentColor;
    transform-box:fill-box;transform-origin:50% 50%;
  }
  @media (prefers-reduced-motion:no-preference){
    .staff-btn .v-mark{animation:staffMark 7s cubic-bezier(.76,0,.24,1) infinite;}
  }
  @keyframes staffMark{
    0%,64%{transform:rotateY(0deg);}
    86%,100%{transform:rotateY(360deg);}
  }

  .badge{
    position:absolute;top:0;right:0;background:var(--ink);color:#fff;font-size:10px;font-weight:800;
    width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  }
  /* Sin esto el carrito enseñaba un "0" permanente estando vacío: el JS le
     pone el atributo hidden, pero el display:flex de arriba es del autor y le
     gana al [hidden] del navegador. */
  .badge[hidden]{display:none;}
  /* ── Menú del móvil ──
     Debajo de 860px el menú de siempre se oculta, y hasta ahora no había nada
     que lo sustituyera: desde el teléfono no se podía ir a Productos ni a
     Contáctanos. La hamburguesa abre un panel colgado de la propia barra. */
  .nav-toggle{display:none;background:none;border:none;color:var(--ink);-webkit-appearance:none;appearance:none;}
  .nav-toggle svg path{transition:transform .3s cubic-bezier(.65,0,.35,1),opacity .2s ease;transform-box:fill-box;transform-origin:50% 50%;}
  /* Abierta, las tres rayas se convierten en una X */
  .nav-toggle[aria-expanded="true"] .h-arriba{transform:translateY(5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .h-medio{opacity:0;}
  .nav-toggle[aria-expanded="true"] .h-abajo{transform:translateY(-5px) rotate(-45deg);}

  .nav-movil{
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    display:flex;flex-direction:column;padding:8px 0;
  }
  /* El atributo hidden no basta: el display:flex de arriba es del autor y le
     gana al [hidden] del navegador. */
  .nav-movil[hidden]{display:none;}
  .nav-movil a{
    padding:15px 32px;font-size:16px;font-weight:700;
    border-bottom:1px solid var(--line);
  }
  .nav-movil a:last-child{border-bottom:none;}
  .nav-movil a.current{background:var(--surface);}
  .nav-movil a.current::before{content:'';position:absolute;left:0;width:4px;height:100%;background:var(--ink);}
  .nav-movil a{position:relative;}
  /* El acceso del personal, separado y en gris: no es para el cliente. */
  .nav-movil-staff{
    margin-top:6px;border-top:1px solid var(--line);
    font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-faint);
  }
  @media (max-width:860px){
    .nav-links{display:none;}
    .nav-toggle{display:flex;}
    /* Logo más pequeño para que quepan los iconos y la hamburguesa sin
       amontonarse en un teléfono de 390px. */
    .logo svg{height:34px;}
    #nav.scrolled .logo svg{height:30px;}
    #nav{padding:14px 18px;}
    #nav.scrolled{padding:10px 18px;}
    .nav-actions{gap:8px;}
    .icon-btn{padding:6px;}
    /* El acceso del personal vive dentro del menú en pantalla pequeña */
    .staff-btn{display:none;}
    .nav-movil a{padding:15px 18px;}
  }
  @media (max-width:380px){
    .logo svg{height:30px;}
    .nav-actions{gap:4px;}
  }

  /* ---------- Hero ---------- */
  #hero{
    min-height:100vh;display:flex;flex-direction:column;padding-top:92px;
    background:var(--bg);overflow:hidden;
  }
  /* Zona del medio: ocupa todo lo que sobra hasta la franja de abajo. */
  .hero-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 24px 28px;}
  .hero-visual{position:relative;width:min(520px,76vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center;animation:heroVisualIn 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:.2s;}
  .hero-visual .ring{
    position:absolute;width:120%;height:120%;border:2px dashed var(--line);border-radius:50%;
    animation:ringSpin 44s linear infinite;
  }
  .hero-visual .ring-2{
    width:88%;height:88%;border:2px solid transparent;border-top-color:var(--ink);opacity:.3;
    animation:ringSpin 17s linear infinite reverse;
  }
  .hero-glow{
    position:absolute;width:76%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(10,10,10,.16),rgba(10,10,10,0) 70%);
    animation:glowPulse 7s ease-in-out infinite;
  }
  .hero-img-wrap{position:relative;width:100%;display:flex;align-items:center;justify-content:center;will-change:transform;}
  /* El logo sustituye a la foto del bote. Flota igual que flotaba la foto;
     la animación de los chevrones se deja solo en el logo de la barra de
     navegación, porque las dos a la vez se pisaban visualmente. */
  .hero-logo{
    width:62%;height:auto;display:block;
    filter:drop-shadow(0 30px 50px rgba(0,0,0,.18));
    animation:heroFloat 6.5s ease-in-out infinite;
  }
  @media (max-width:900px){.hero-logo{width:58%;}}
  @keyframes heroVisualIn{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:scale(1);}}
  @keyframes heroFloat{0%,100%{transform:translateY(-12px);}50%{transform:translateY(12px);}}
  @keyframes ringSpin{to{transform:rotate(360deg);}}
  @keyframes glowPulse{0%,100%{opacity:.5;transform:scale(.94);}50%{opacity:.85;transform:scale(1.07);}}
  @media (prefers-reduced-motion:reduce){
    .hero-visual{animation:none;opacity:1;transform:none;}
    .hero-logo,.hero-visual .ring,.hero-glow,.hero-tagline-strip .track{animation:none;}
  }
  .hero-tagline-strip{
    white-space:nowrap;overflow:hidden;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;
  }
  .hero-tagline-strip .track{display:inline-block;animation:marquee 22s linear infinite;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.08em;}
  .hero-tagline-strip .track span{margin:0 28px;color:var(--ink-faint);}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* El botón flotante de WhatsApp se quitó: ya hay un apartado propio para
     escribir por WhatsApp en Contáctanos, y en el móvil el botón tapaba
     justo los botones de abajo del todo. */

  /* ---------- Reveal ---------- */
  [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
  [data-reveal].in{opacity:1;transform:translateY(0);}
  [data-reveal="scale"]{transform:scale(.92);}
  [data-reveal="scale"].in{transform:scale(1);}
  .stagger > *{transition-delay:calc(var(--i,0) * 70ms);}

  /* ---------- Esto es Vultra ---------- */
  #esto-es-vultra{background:var(--bg);}
  .intro-block{max-width:760px;margin:0 auto;text-align:center;}
  .intro-block h2{margin-bottom:22px;}
  .intro-lead{font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,3vw,32px);letter-spacing:.02em;color:var(--ink);margin-bottom:18px;}
  .intro-text{font-size:17px;max-width:620px;margin:0 auto;}

  /* ---------- Reseñas de Google ---------- */
  #resenas{background:var(--surface);}
  #resenas[hidden]{display:none;}
  .reviews-head{text-align:center;margin-bottom:40px;}
  .reviews-head h2{margin-bottom:16px;}
  .reviews-score{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft);}
  .reviews-score strong{font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--ink);line-height:1;}
  .stars{display:inline-flex;gap:2px;}
  .stars svg{width:17px;height:17px;}
  .star-on{fill:var(--ink);}
  .star-off{fill:none;stroke:var(--ink-faint);stroke-width:1.5;}
  .reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
  .review-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:26px 24px;display:flex;flex-direction:column;gap:14px;
  }
  .review-top{display:flex;align-items:center;gap:12px;}
  .review-avatar{
    width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;
    background:var(--surface);
  }
  .review-avatar.initial{
    display:flex;align-items:center;justify-content:center;
    background:var(--ink);color:#fff;font-weight:800;font-size:16px;
  }
  .review-who{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .review-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .review-when{font-size:12px;color:var(--ink-faint);}
  .review-text{font-size:14px;line-height:1.65;color:var(--ink-soft);}
  .reviews-foot{text-align:center;margin-top:34px;}

  /* ---------- Cabecera de las páginas de categoría ---------- */
  .page-head{padding:132px 0 44px;background:var(--bg);}
  .page-head .wrap{text-align:center;}
  .migas{font-size:12.5px;color:var(--ink-faint);letter-spacing:.02em;margin-bottom:18px;}
  .migas a:hover{color:var(--ink);text-decoration:underline;}
  .migas span{margin:0 7px;opacity:.6;}
  .migas strong{color:var(--ink);font-weight:700;}
  .page-head h1{
    font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,7vw,86px);
    line-height:.95;letter-spacing:.01em;margin-bottom:16px;
  }
  .page-intro{font-size:17px;max-width:560px;color:var(--ink-soft);margin:0 auto;}
  @media (max-width:768px){.page-head{padding:112px 0 34px;}}

  /* ---------- Síguenos en Instagram ---------- */
  #instagram{background:var(--bg);}
  #instagram[hidden]{display:none;}
  .ig-head{text-align:center;max-width:620px;margin:0 auto 42px;}
  .ig-head h2{margin-bottom:14px;}
  .ig-sub{font-size:16px;color:var(--ink-soft);}
  /* 9:16 porque son reels. En móvil van de dos en dos: a una sola columna
     cada vídeo ocupa pantalla entera y hay que hacer scroll eterno. */
  /* auto-fill crea las columnas aunque no haya vídeos que meter dentro, así
     que con 2 vídeos en una pantalla ancha quedaban pegados a la izquierda y
     el resto en blanco. Centrando la rejilla, los que haya quedan en medio. */
  .reel-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;
    justify-content:center;
  }
  .reel{margin:0;position:relative;}
  .reel video{
    width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
    border-radius:var(--radius);background:var(--ink);
  }
  .reel figcaption{
    margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-soft);
  }
  .reel-sonido{
    position:absolute;top:12px;right:12px;
    width:38px;height:38px;border-radius:50%;border:none;
    background:rgba(10,10,10,.55);color:#fff;
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(6px);transition:background .2s ease;
  }
  .reel-sonido svg{width:18px;height:18px;}
  .reel-sonido:hover{background:rgba(10,10,10,.8);}
  .reel-sonido.activo{background:#fff;color:var(--ink);}
  @media (max-width:520px){
    .reel-grid{grid-template-columns:1fr 1fr;gap:12px;}
    .reel figcaption{font-size:13px;margin-top:9px;}
  }

  .horario{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px;}
  .horario th{text-align:left;font-weight:700;padding:7px 0;color:var(--ink);white-space:nowrap;}
  .horario td{text-align:right;padding:7px 0;color:var(--ink-soft);}
  .horario tr+tr th,.horario tr+tr td{border-top:1px solid var(--line);}
  /* En pantalla estrecha, "10:00 - 14:00 . 16:00 - 21:00" se partía dejando
     el "21:00" solo en una línea pegado a la derecha. Apilado se lee bien. */
  @media (max-width:430px){
    .horario th,.horario td{display:block;text-align:left;padding:3px 0;}
    .horario th{padding-top:11px;}
    .horario tr+tr td{border-top:0;}
    .horario tr:first-child th{padding-top:4px;}
  }

  /* ---------- Mapa grande ---------- */
  #mapa{background:var(--surface);}
  .mapa-head{text-align:center;margin-bottom:34px;}
  .mapa-caja{
    position:relative;width:100%;height:clamp(320px,52vh,560px);
    border-radius:var(--radius);overflow:hidden;
    border:1px solid var(--line);background:var(--bg);
  }
  .mapa-caja iframe{width:100%;height:100%;border:0;display:block;}
  .mapa-aviso{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:12px;
    padding:30px;text-align:center;background:var(--bg);
  }
  .mapa-aviso p{font-size:14px;max-width:420px;color:var(--ink-soft);}
  .mapa-aviso p strong{font-size:17px;color:var(--ink);}
  .mapa-aviso-botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px;}
  .mapa-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:22px;}
  .mapa-datos .find-card h3{font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:.02em;}

  /* ---------- Encuéntranos ---------- */
  #encuentranos{background:var(--surface);}
  .find-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
  .find-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:34px 30px;display:flex;flex-direction:column;gap:14px;
  }
  .find-card h2{font-size:clamp(26px,3.4vw,38px);margin:0;}
  .find-address{font-size:17px;line-height:1.7;font-weight:600;color:var(--ink);}
  .find-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:8px;}
  .find-note{font-size:13px;color:var(--ink-faint);}

  /* ---------- Products ---------- */
  #productos{background:var(--surface);}
  #productos[hidden]{display:none;}
  .products-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px;}
  .search-filter{display:flex;flex-direction:column;gap:18px;margin-bottom:44px;}
  .search-box{position:relative;max-width:480px;margin:0 auto;}
  .search-box input{
    width:100%;padding:16px 20px 16px 48px;border-radius:999px;border:2px solid var(--ink);
    font-size:15px;font-family:'Inter';background:#fff;
  }
  .search-box input:focus{outline:none;box-shadow:0 0 0 3px rgba(10,10,10,.12);}
  .search-box svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.55;}
  .filter-row{display:flex;flex-direction:column;align-items:center;gap:12px;}
  .filter-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  /* Vale para <a>, <span> y <button>: las pestañas de categoría son enlaces
     de verdad (para que Google las siga) pero se ven como los botones de antes. */
  .pill{
    display:inline-block;line-height:1;
    padding:12px 22px;border-radius:999px;border:2px solid var(--ink);background:transparent;
    color:var(--ink);cursor:pointer;
    font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:.25s ease;
  }
  /* El <span> es la categoría que aún no tiene página propia: no es pulsable. */
  span.pill{cursor:default;opacity:.55;}
  span.pill:hover{background:transparent;color:var(--ink);}
  .pill.active,.pill:hover{background:var(--ink);color:#fff;}
  .result-count{font-size:13px;color:var(--ink-faint);font-weight:600;}

  .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;}
  @media (max-width:599px){
    .wrap{padding:0 16px;}
    section{padding:60px 0;}
    .product-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .product-media img{width:85%;height:85%;}
    .product-info{padding:10px 10px 14px;gap:4px;}
    .product-name{font-size:13px;}
    .product-brand{font-size:10px;}
    .price{font-size:18px;}
    .mini-add{width:32px;height:32px;}
    .pill{padding:9px 16px;font-size:12px;}
    .search-filter{margin-bottom:28px;}
    .search-box input{padding:13px 16px 13px 42px;font-size:14px;}
    .page-head h1{margin-bottom:10px;}
    .page-intro{font-size:15px;}
    .cart-items{padding:80px 18px 16px;}
    .cart-upsell{padding:14px 18px;}
    .cart-item img{width:54px;height:54px;}
    .find-grid{grid-template-columns:1fr;}
    .mapa-datos{grid-template-columns:1fr;}
  }
  .product-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;
    transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;display:flex;flex-direction:column;
  }
  .product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);}
  .product-media{aspect-ratio:1/1;background:#fafafa;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .product-media img{width:78%;height:78%;object-fit:contain;transition:transform .5s cubic-bezier(.16,1,.3,1);}
  .product-card:hover .product-media img{transform:scale(1.08) rotate(-1deg);}
  .tag{
    position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:10px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;
  }
  .tag.status{left:auto;right:12px;background:#fff;color:var(--ink);border:1px solid var(--ink);}
  .product-info{padding:18px 18px 22px;display:flex;flex-direction:column;gap:6px;flex:1;}
  .product-brand{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
  /* Un producto sin marca dejaba su hueco vacío y el nombre y el precio se
     subían, desalineados de las tarjetas de al lado. El espacio se reserva
     igual. */
  .product-brand:empty::before{content:"\00a0";}
  .product-name{font-size:16px;font-weight:700;line-height:1.3;}
  .product-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:10px;}
  .price{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.02em;}
  .price.tbd{font-family:'Inter';font-size:12px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;}
  .mini-add{
    width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:#fff;
    display:flex;align-items:center;justify-content:center;transition:.25s ease;
    color:var(--ink);-webkit-appearance:none;appearance:none;   /* el "+" salía azul en iOS */
  }
  .mini-add:hover{background:var(--ink);color:#fff;}
  .empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ink-faint);}

  /* ---------- Product modal ---------- */
  .overlay{position:fixed;inset:0;background:rgba(10,10,10,.55);backdrop-filter:blur(4px);z-index:500;opacity:0;pointer-events:none;transition:opacity .35s ease;}
  .overlay.open{opacity:1;pointer-events:auto;}
  .modal{
    position:fixed;top:0;right:0;height:100%;width:min(100%,760px);background:#fff;z-index:501;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.16,1,.3,1);overflow-y:auto;
  }
  .modal.open{transform:translateX(0);}
  .modal-close{position:absolute;top:20px;right:20px;z-index:5;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);-webkit-appearance:none;appearance:none;}
  /* La ficha de producto ocupa toda la pantalla (no el cajón de 760px que
     usan carrito/checkout/cuenta) — inspirada en el diseño de proteina1.html
     que pidió el cliente, pero con foto en vez de animación 3D/AR pesada. */
  #product-modal{width:100%;}
  #product-modal .pd-body{padding:0 0 100px;}
  /* --accent y --accent-text se fijan inline en #product-modal por producto (color extraído de su foto) */

  .pd-hero{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:560px;}
  @media (max-width:900px){.pd-hero{grid-template-columns:1fr;min-height:0;}}
  .pd-left{padding:100px 48px 48px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
  @media (max-width:900px){.pd-left{padding:100px 24px 32px;}}
  /* El nombre de la marca gigante de fondo vive solo en esta columna (nunca
     detrás de la foto): el contenido real va en .pd-left-content, por encima
     (los hijos position:static de .pd-left se pintarían ENCIMA de un hijo
     position:absolute con z-index:0 si no se envuelven así — el fondo
     quedaría tapando el texto en vez de al revés). */
  .pd-left-content{position:relative;z-index:1;}
  /* Entrada en cascada de la ficha. Como openProductModal() reconstruye el
     HTML entero cada vez que se abre un producto, estas animaciones se
     reproducen solas en cada apertura y al cambiar de sabor, sin tener que
     añadir ni quitar clases desde JS. */
  .pd-left-content > *{animation:pdFadeUp .85s cubic-bezier(.16,1,.3,1) both;}
  .pd-left-content > *:nth-child(1){animation-delay:.10s;}
  .pd-left-content > *:nth-child(2){animation-delay:.18s;}
  .pd-left-content > *:nth-child(3){animation-delay:.26s;}
  .pd-left-content > *:nth-child(4){animation-delay:.34s;}
  .pd-left-content > *:nth-child(5){animation-delay:.42s;}
  .pd-left-content > *:nth-child(6){animation-delay:.50s;}
  .pd-left-content > *:nth-child(7){animation-delay:.58s;}
  .pd-left-content > *:nth-child(8){animation-delay:.66s;}
  .pd-badges .pd-badge{animation:pdPop .55s cubic-bezier(.16,1,.3,1) both;}
  .pd-badges .pd-badge:nth-child(1){animation-delay:.70s;}
  .pd-badges .pd-badge:nth-child(2){animation-delay:.78s;}
  .pd-badges .pd-badge:nth-child(3){animation-delay:.86s;}
  .pd-badges .pd-badge:nth-child(4){animation-delay:.94s;}
  @keyframes pdFadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
  @keyframes pdPop{from{opacity:0;transform:scale(.8);}to{opacity:1;transform:scale(1);}}
  @keyframes pdBrandLetter{from{opacity:0;transform:translateY(80px) rotate(8deg) scale(1.3);}to{opacity:1;transform:translateY(0) rotate(0deg) scale(1);}}
  @keyframes pdBrandDrift{0%,100%{transform:translateX(0);}50%{transform:translateX(-22px);}}
  @keyframes pdMediaIn{from{opacity:0;transform:scale(.88);}to{opacity:1;transform:scale(1);}}
  @keyframes pdFloat{0%,100%{transform:translateY(-10px);}50%{transform:translateY(10px);}}
  .pd-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;}
  .pd-eyebrow-dot{width:10px;height:10px;background:var(--accent,var(--ink));flex-shrink:0;}
  .pd-headline{font-size:clamp(34px,5vw,58px);line-height:.98;margin-bottom:20px;}
  .pd-desc{font-size:15px;max-width:440px;margin-bottom:22px;}
  .pd-price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;}
  .pd-price{font-family:'Bebas Neue',sans-serif;font-size:38px;}
  .pd-price.tbd{font-family:'Inter';font-size:14px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;}
  .pd-flavors{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
  .pd-flavor-btn{padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:12px;font-weight:700;}
  /* El botón elegido se pinta del color del propio producto (el acento sale
     de su foto), así que elegir la mochila coyote pone el botón coyote y la
     azul lo pone azul — igual que el botón de añadir al carrito. */
  .pd-flavor-btn.active{
    border-color:var(--accent,var(--ink));
    background:var(--accent,var(--ink));
    color:var(--accent-text,#fff);
  }
  .pd-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
  .pd-add-cart-btn{background:var(--accent,var(--ink));border-color:var(--accent,var(--ink));color:var(--accent-text,#fff);}
  .pd-stock-line{font-size:13px;color:var(--ink-soft);margin-bottom:18px;}
  .pd-badges{display:flex;flex-wrap:wrap;gap:8px;}
  .pd-badge{padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);}

  .pd-right{position:relative;background:linear-gradient(180deg,#fafafa,#f0f0f0);display:flex;flex-direction:column;}
  .pd-media{flex:1;min-height:360px;position:relative;overflow:hidden;}
  /* Palabra gigante de fondo (WHEY, CREATINA, MAGNESIO o la marca), detrás
     del titular en .pd-left — inspirado en el diseño de proteina1.html. El
     texto puede desbordar y recortarse en los bordes a propósito (efecto
     editorial de tipografía gigante): de ahí el overflow:hidden de .pd-left. */
  .pd-brand-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none;}
  /* Solo contorno, negro y muy fino (mismo recurso que el "DE VERDAD" del
     hero): relleno plano en color del producto quedaba apagado, y el trazo
     deja leer el titular que va encima aunque la palabra sea enorme.
     Selector de hijo directo (>) a propósito: las letras van en spans
     anidados y heredarían la opacidad, multiplicándola hasta casi desaparecer. */
  .pd-brand-bg > span{
    font-family:'Bebas Neue',sans-serif;font-weight:400;line-height:.85;letter-spacing:.01em;
    text-transform:uppercase;white-space:nowrap;
    color:transparent;-webkit-text-stroke:2.5px var(--ink);opacity:.32;
    animation:pdBrandDrift 11s ease-in-out 1.8s infinite;
  }
  /* Las letras entran una detrás de otra, girando y cayendo en su sitio. */
  .pd-brand-bg .ch{
    display:inline-block;transform-origin:50% 100%;
    animation:pdBrandLetter .95s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i,0) * 55ms);
  }
  .pd-viewer-zone{position:relative;z-index:1;height:100%;animation:pdMediaIn 1s cubic-bezier(.16,1,.3,1) both;animation-delay:.15s;}
  .viewer-fallback img{animation:pdFloat 6s ease-in-out infinite;}
  .pd-stat{animation:pdFadeUp .8s cubic-bezier(.16,1,.3,1) both;}
  .pd-stats .pd-stat:nth-child(1){animation-delay:.45s;}
  .pd-stats .pd-stat:nth-child(2){animation-delay:.55s;}
  .pd-stats .pd-stat:nth-child(3){animation-delay:.65s;}
  @media (prefers-reduced-motion:reduce){
    .pd-left-content > *,.pd-badges .pd-badge,.pd-brand-bg > span,.pd-brand-bg .ch,.pd-viewer-zone,.pd-stat{animation:none;}
    .pd-brand-bg > span{opacity:.32;}
    .viewer-fallback img,.pd-marquee .track{animation:none;}
  }
  #product-modal canvas{display:block;width:100%;height:100%;touch-action:none;}
  .viewer-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:12px;color:var(--ink-faint);letter-spacing:.04em;text-transform:uppercase;pointer-events:none;}
  .viewer-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
  .viewer-fallback img{max-height:80%;max-width:60%;object-fit:contain;}
  .pd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);}
  .pd-stat{background:#fff;padding:18px 14px;text-align:center;}
  .pd-stat strong{display:block;font-family:'Bebas Neue',sans-serif;font-size:30px;line-height:1;}
  .pd-stat strong .unit{font-family:'Inter';font-size:14px;font-weight:600;margin-left:1px;}
  .pd-stat-label{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px;}

  .pd-marquee{white-space:nowrap;overflow:hidden;background:var(--accent,var(--ink));padding:14px 0;}
  .pd-marquee .track{display:inline-block;animation:marquee 22s linear infinite;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:.06em;color:var(--accent-text,#fff);}
  .pd-marquee .track span{margin:0 24px;}

  .pd-nutrition-section{padding:56px 48px 0;max-width:720px;margin:0 auto;}
  @media (max-width:900px){.pd-nutrition-section{padding:40px 24px 0;}}
  .pd-nutrition-section h3{font-size:clamp(26px,4vw,36px);margin:8px 0 22px;}
  .pd-nutrition-section table{width:100%;border-collapse:collapse;font-size:14px;}
  .pd-nutrition-section th{text-align:left;padding:10px 0;border-bottom:2px solid var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
  .pd-nutrition-section th:not(:first-child),.pd-nutrition-section td:not(:first-child){text-align:right;}
  .pd-nutrition-section td{padding:10px 0;border-bottom:1px solid var(--line);}
  .pd-nutrition-section tr.highlight td{font-weight:800;background:rgba(0,0,0,.02);}
  .pd-bcaa-row{display:flex;gap:28px;flex-wrap:wrap;margin:22px 0;font-size:13px;}
  .pd-bcaa-row strong{display:block;font-size:16px;}
  .pd-nutrition-note{font-size:12px;color:var(--ink-faint);margin-top:18px;}

  .qty-row{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
  .qty-stepper{display:flex;align-items:center;border:2px solid var(--ink);border-radius:999px;overflow:hidden;}
  .qty-stepper button{width:40px;height:40px;background:#fff;border:none;font-size:18px;font-weight:700;}
  .qty-stepper button:hover{background:var(--surface);}
  .qty-stepper span{width:40px;text-align:center;font-weight:700;}

  /* ---------- Cart drawer ---------- */
  #cart-modal{width:min(100%,440px);display:flex;flex-direction:column;}
  .cart-items{flex:1;overflow-y:auto;padding:90px 26px 20px;}
  .cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
  .cart-item img{width:66px;height:66px;object-fit:contain;background:var(--surface);border-radius:10px;padding:6px;}
  .cart-item-info{flex:1;display:flex;flex-direction:column;gap:6px;}
  .cart-item-info .name{font-size:14px;font-weight:700;}
  .cart-item-info .row{display:flex;justify-content:space-between;align-items:center;}
  .cart-remove{background:none;border:none;font-size:12px;color:var(--ink-faint);text-decoration:underline;}
  .cart-footer{border-top:1px solid var(--line);padding:20px 26px 28px;background:#fff;}
  .cart-subtotal{display:flex;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:16px;}
  .cart-empty{padding:90px 26px;text-align:center;color:var(--ink-faint);}

  /* Upsell en carrito */
  .cart-upsell{padding:16px 26px;border-top:1px solid var(--line);}
  .cart-upsell-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:10px;}
  .cart-upsell-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .cart-upsell-item{display:flex;flex-direction:column;gap:5px;background:var(--surface);border-radius:10px;padding:10px;}
  .cart-upsell-item img{width:100%;aspect-ratio:1;object-fit:contain;}
  .cart-upsell-item .upsell-name{font-size:11px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .cart-upsell-item .upsell-price{font-size:12px;font-weight:700;}
  .cart-upsell-item .upsell-add{font-size:11px;padding:5px 8px;border-radius:6px;margin-top:auto;}

  /* ---------- Checkout ---------- */
  #checkout-modal .pd-body{padding:100px 32px 40px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .form-grid .full{grid-column:1/-1;}
  @media (max-width:520px){.form-grid{grid-template-columns:1fr;}}
  label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px;}
  input,select,textarea{
    width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:'Inter';font-size:14px;background:#fff;
  }
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);}
  .field{margin-bottom:16px;}
  .payment-note{background:var(--surface);border-radius:10px;padding:16px;font-size:13px;margin:20px 0;color:var(--ink-soft);}
  .order-success{padding:100px 32px;text-align:center;}
  .order-success .check{width:70px;height:70px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:30px;}
  .form-error{color:#b00020;font-size:13px;margin-top:10px;display:none;}

  /* ---------- Cuenta ---------- */
  .status-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
  .status-pendiente_pago{background:#fff4d6;color:#8a6400;}
  .status-confirmado{background:#e0eaff;color:#1d3fa0;}
  .status-enviado{background:#e6e0ff;color:#4b2fa0;}
  .status-entregado{background:#e6f5ec;color:#0a7a3d;}
  .status-cancelado{background:#fbe9eb;color:#b00020;}
  .auth-tabs{display:flex;gap:10px;margin-bottom:26px;}
  .link-btn{background:none;border:none;padding:0;font-size:13px;color:var(--ink-soft);text-decoration:underline;}
  .account-danger-zone{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);}
  .account-danger-zone p{font-size:12px;color:var(--ink-faint);margin-bottom:12px;}
  .btn-danger-outline{padding:10px 20px;border:2px solid #b00020;border-radius:999px;background:none;color:#b00020;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s;}
  .btn-danger-outline:hover{background:#b00020;color:#fff;}
  .btn-danger-outline:disabled{opacity:.4;cursor:not-allowed;}
  #account-modal .pd-body{padding:80px 28px 40px;}
  .account-header{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:20px;border-bottom:2px solid var(--ink);margin-bottom:22px;}
  .account-header h2{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:.02em;margin:0;}
  #account-tab-content{background:var(--surface);border-radius:14px;padding:22px;margin-top:18px;}
  .account-order{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;background:#fff;}
  .account-order-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--ink-soft);}
  .checkbox-row{display:flex;align-items:center;gap:10px;margin:18px 0;font-size:13px;color:var(--ink-soft);}
  .checkbox-row input{width:auto;}
  .wallet-row{display:flex;gap:10px;margin-bottom:22px;}
  .wallet-btn{flex:1;padding:13px;border-radius:10px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;}
  .wallet-btn.apple{background:#000;color:#fff;border:2px solid #000;}
  .wallet-btn.google{background:#fff;color:var(--ink);border:2px solid var(--ink);}
  .wallet-divider{text-align:center;color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;}
  .sim-note{text-align:center;color:var(--ink-faint);font-size:11px;margin-top:18px;}

  /* ---------- Testimonials skipped (no real reviews provided) ---------- */

  /* ---------- Footer ---------- */
  footer{background:var(--ink);color:rgba(255,255,255,.55);padding:34px 0;font-size:13px;}
  .footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
  .footer-links{display:flex;gap:22px;flex-wrap:wrap;}
  .footer-links a{color:rgba(255,255,255,.7);}
  .footer-links a:hover{color:#fff;}

  /* ---------- Cookie banner ---------- */
  #cookie-banner{
    position:fixed;left:20px;right:20px;bottom:20px;max-width:560px;background:#fff;border:1px solid var(--line);
    border-radius:16px;padding:22px;box-shadow:var(--shadow);z-index:600;display:none;
  }
  #cookie-banner p{font-size:13px;margin-bottom:14px;}
  #cookie-banner .row{display:flex;gap:10px;flex-wrap:wrap;}
  #cookie-banner .btn{padding:11px 22px;font-size:12px;}

  .counted{font-family:'Bebas Neue',sans-serif;font-size:44px;}

  /* ───────────────── Opiniones y estrellas ─────────────────
     Las estrellas se pintan dos veces, una encima de otra: las cinco grises
     de fondo y las cinco llenas recortadas al ancho que toca. Así un 4,3 se
     ve como cuatro estrellas y un trozo, sin redondear la media a 4 ni a 5. */
  .estrellas{position:relative;display:inline-block;line-height:0;flex-shrink:0;}
  /* Sin fill:currentColor el SVG se pinta NEGRO por defecto y el color del
     CSS no llega: las estrellas salían todas negras, llenas y vacías. */
  .estrellas svg{width:16px;height:16px;display:inline-block;fill:currentColor;}
  .estrellas.peq svg{width:13px;height:13px;}
  .est-fondo{display:block;white-space:nowrap;color:var(--line);}
  .est-lleno{
    display:block;white-space:nowrap;color:#f5a623;
    position:absolute;top:0;left:0;overflow:hidden;
  }
  @media (prefers-reduced-motion:no-preference){
    .est-lleno{transition:width .35s ease;}
  }

  /* La media junto al titular de la ficha: es un botón porque al tocarlo
     baja a las opiniones. */
  .pd-rating{
    display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
    background:none;border:0;padding:0;cursor:pointer;font:inherit;
    color:var(--ink-soft);font-size:13px;
  }
  .pd-rating[hidden]{display:none;}
  .pd-rating b{color:var(--ink);font-weight:800;}
  .pd-rating > span:not(.estrellas){text-decoration:underline;text-underline-offset:3px;}
  .rv-sin-aun{color:var(--ink-faint);}

  /* La media en la tarjeta del catálogo */
  .card-rating{
    display:flex;align-items:center;gap:6px;
    font-size:11.5px;color:var(--ink-faint);margin-top:4px;
  }

  /* El botón de preguntar por WhatsApp, dentro de la ficha */
  .pd-duda{display:inline-flex;align-items:center;gap:8px;}
  .pd-duda svg{flex-shrink:0;}

  .pd-reviews{padding:56px 48px 0;max-width:760px;margin:0 auto;}
  @media (max-width:900px){.pd-reviews{padding:40px 24px 0;}}
  .pd-reviews h3{font-size:clamp(26px,4vw,36px);margin:8px 0 18px;}

  /* El aviso que obliga la ley: cómo se comprueban las opiniones. Va a la
     vista, no escondido, y por eso lleva borde y fondo propios. */
  .rv-legal{
    font-size:12.5px;line-height:1.65;color:var(--ink-soft);
    background:var(--surface);border-left:3px solid var(--ink);
    padding:14px 16px;margin-bottom:28px;
  }
  .rv-legal b{color:var(--ink);}

  .rv-resumen{display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-bottom:28px;}
  .rv-nota-grande{display:flex;flex-direction:column;gap:6px;}
  .rv-nota-grande strong{font-family:'Bebas Neue',sans-serif;font-size:56px;line-height:.9;}
  /* El :not(.estrellas) es lo que arregla que la media saliera en gris.
     ".rv-nota-grande span" pesa más que ".est-lleno" (una clase + un elemento
     gana a una clase sola), así que le pisaba el color a las dos capas de
     estrellas y las dejaba grises aunque la nota fuera un 5,0. */
  .rv-nota-grande > span:not(.estrellas){font-size:12.5px;color:var(--ink-faint);}

  .rv-barras{display:flex;flex-direction:column;gap:5px;flex:1;min-width:190px;}
  .rv-barra-fila{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-faint);}
  .rv-barra-n{width:10px;text-align:right;}
  .rv-barra-pista{flex:1;height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden;}
  .rv-barra-llena{display:block;height:100%;background:#f5a623;border-radius:999px;}
  .rv-barra-num{width:22px;text-align:right;}

  .rv-vacio,.rv-cargando{font-size:14px;color:var(--ink-faint);margin-bottom:24px;}

  .rv-form,.rv-entrar{
    border:1px solid var(--line);padding:22px;margin-bottom:32px;
  }
  .rv-form h4{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
  .rv-entrar p{font-size:14px;margin-bottom:14px;}

  .rv-estrellas-input{display:flex;gap:4px;margin-bottom:14px;}
  .rv-estrella-btn{background:none;border:0;padding:3px;cursor:pointer;line-height:0;color:var(--ink);-webkit-appearance:none;appearance:none;}
  /* Vacías: blancas por dentro con el contorno negro, para que se vean como
     estrellas de verdad sobre el fondo blanco y se note que hay que pulsarlas.
     El relleno se queda dentro del trazo (paint-order) o el contorno se come
     la punta de cada pico. */
  .rv-estrella-btn svg{
    width:28px;height:28px;overflow:visible;
    fill:#fff;stroke:var(--ink);stroke-width:1.1;
    stroke-linejoin:round;paint-order:stroke fill;
  }
  .rv-estrella-btn.activa svg{fill:#f5a623;}
  @media (prefers-reduced-motion:no-preference){
    .rv-estrella-btn svg{transition:fill .15s ease;}
  }
  .rv-estrella-btn:hover svg{fill:#ffe2a8;}
  .rv-estrella-btn.activa:hover svg{fill:#f5a623;}

  .rv-form textarea{
    width:100%;border:1px solid var(--line);padding:12px;font:inherit;font-size:14px;
    resize:vertical;background:#fff;color:var(--ink);
  }
  .rv-form textarea:focus{outline:2px solid var(--ink);outline-offset:-2px;}
  .rv-form-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;}
  .rv-msg{font-size:12.5px;color:var(--ink-faint);}
  .rv-msg.mal{color:#c0392b;font-weight:700;}

  /* Lo que ve solo el autor si le ocultaron la suya: se le dice el motivo en
     vez de dejarle pensando por qué no sale. */
  .rv-oculta-aviso{
    font-size:12.5px;line-height:1.6;color:#8a6d00;
    background:#fff8e1;border-left:3px solid #f5a623;padding:12px 14px;margin-bottom:14px;
  }

  .rv-lista{display:flex;flex-direction:column;}
  .rv-item{padding:20px 0;border-top:1px solid var(--line);}
  .rv-item-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
  .rv-autor{font-size:13px;font-weight:800;}
  .rv-verificada{
    font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:#1a7f37;border:1px solid #1a7f37;border-radius:999px;padding:3px 9px;
  }
  .rv-fecha{font-size:11.5px;color:var(--ink-faint);margin-left:auto;}
  .rv-texto{font-size:14px;line-height:1.65;color:var(--ink-soft);}