/* electrobikes — estilos compartidos ES/EN.
   Los estilos de layout viven inline en el HTML (fidelidad 1:1 con el diseño);
   acá va lo que necesita clases: fuentes, estados hover/abierto/resaltado,
   selector de idioma, accesibilidad y reduced-motion. */

/* --- fuentes self-hosted (sin CDN) --- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/space-grotesk-600.woff2') format('woff2');
}

/* --- base --- */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; background: #0B0B0C; }
::selection { background: #D4FF3D; color: #0B0B0C; }
@keyframes ebSpark { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }

/* nav links: visibles desde 720px (antes lo hacía JS con resize) */
[data-nav-links] { display: none; }
@media (min-width: 720px) { [data-nav-links] { display: flex !important; } }

/* --- hover (solo dispositivos con puntero) --- */
@media (hover:hover) {
  .eb-cta-primary:hover { background: #e4ff6b !important; transform: translateY(-2px); }
  .eb-cta-ghost:hover { border-color: #F2F3F0 !important; color: #F2F3F0 !important; }
  .eb-nav-link:hover { color: #F2F3F0 !important; }
  .eb-card:hover { border-color: rgba(212,255,61,0.35) !important; transform: translateY(-4px); }
  .eb-foot-link:hover { color: #F2F3F0 !important; }
  .eb-row:hover { background: rgba(242,243,240,0.03); }
  .eb-toggle:hover { border-color: #D4FF3D !important; }
  .eb-lang summary:hover { border-color: #D4FF3D; }
  .eb-lang a:hover { background: rgba(242,243,240,0.06); }
}

/* --- comparador: filas expandibles --- */
.eb-row { cursor: pointer; border-top: 1px solid rgba(242,243,240,0.07); transition: background .3s ease; }
.eb-note { display: none; padding: 0 clamp(16px,2.5vw,28px) clamp(16px,2vw,22px);
           font-size: 13px; color: #6E727A; line-height: 1.55; max-width: 62ch; }
.eb-row.open .eb-note { display: block; }
.eb-mark::before { content: '+'; }
.eb-row.open .eb-mark::before { content: '\2013'; }

/* --- comparador: modo "resaltar diferencias" --- */
.eb-val { color: #F2F3F0; }
.eb-badge { display: none; font-size: 10px; font-family: 'Inter', sans-serif; font-weight: 600;
            color: #0B0B0C; background: #D4FF3D; border-radius: 4px; padding: 2px 6px; letter-spacing: 0; }
.eb-cmp.hl .eb-val.win  { color: #D4FF3D; }
.eb-cmp.hl .eb-val.lose { color: #6E727A; }
.eb-cmp.hl .eb-val.win .eb-badge { display: inline-block; }

/* --- head-to-head: tarjeta con miniatura recuadrada abajo a la derecha --- */
.eb-cmp-cardtext { position: absolute; left: 20px; bottom: 18px; right: 184px; }
.eb-cmp-cardname { font-family: 'Space Grotesk', ui-sans-serif, sans-serif; font-weight: 600;
                   letter-spacing: -0.04em; font-size: clamp(18px, 2.4vw, 28px); color: #F2F3F0;
                   line-height: 1; text-transform: lowercase; }
.eb-cmp-thumb { position: absolute; right: 16px; bottom: 16px; width: 152px; height: 152px;
                object-fit: contain; background: rgba(242,243,240,0.04);
                border: 1px solid rgba(212,255,61,0.35); border-radius: 12px;
                padding: 8px; box-sizing: border-box; }
@media (max-width: 620px) {
  .eb-cmp-thumb { width: 92px; height: 92px; right: 10px; bottom: 10px; padding: 6px; border-radius: 10px; }
  .eb-cmp-cardtext { left: 12px; bottom: 12px; right: 110px; }
  .eb-cmp-cardname { font-size: 15px; }
}

/* botón "otras 2 / new pair": recarga el head-to-head con un par nuevo */
.eb-shuffle { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: transparent;
              border: 1px solid rgba(242,243,240,0.18); border-radius: 999px; padding: 12px 18px;
              font-family: 'Inter', sans-serif; font-size: 14px; color: #F2F3F0;
              transition: border-color .35s ease, color .35s ease; }
.eb-shuffle svg { transition: transform .5s ease; }
.eb-shuffle.loading { opacity: 0.55; pointer-events: none; }
.eb-shuffle.loading svg { animation: ebSpin .8s linear infinite; }
@keyframes ebSpin { to { transform: rotate(360deg); } }
@media (hover:hover) {
  .eb-shuffle:hover { border-color: #D4FF3D; color: #D4FF3D; }
  .eb-shuffle:hover svg { transform: rotate(-140deg); }
}

/* --- sección "voces": carrusel de reseñas reales de Amazon ---
   3 tarjetas horizontales por página, navegación vertical (arriba/abajo) + dots.
   Cada página se apila absoluta dentro del viewport; el activo entra deslizando
   desde abajo. La altura del viewport la ajusta el JS a la página activa. */
.eb-rev-viewport { position: relative; overflow: hidden;
                   transition: height .45s cubic-bezier(.2,.8,.2,1); }
.eb-rev-page { position: absolute; top: 0; left: 0; width: 100%;
               display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
               gap: clamp(28px, 4vw, 56px);
               opacity: 0; transform: translateY(34px); pointer-events: none;
               transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.eb-rev-page.active { opacity: 1; transform: none; pointer-events: auto; }
.eb-rev-card { margin: 0; }

/* cita = resumen de Amazon (~350-470 chars) en cuerpo legible; autor = producto */
.eb-rev-quote { margin: 0 0 20px; font-family: 'Space Grotesk', ui-sans-serif, sans-serif; font-weight: 500;
                letter-spacing: -0.02em; line-height: 1.42; font-size: clamp(15px, 1.5vw, 18px); color: #F2F3F0; }
.eb-rev-cap { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.eb-rev-name { font-weight: 700; color: #D4FF3D; text-decoration: none; letter-spacing: -0.01em;
               line-height: 1.3; transition: opacity .25s ease; }
.eb-rev-rating { color: #6E727A; font-size: 13px; }
@media (hover:hover) { .eb-rev-name:hover { opacity: 0.82; text-decoration: underline; } }

/* navegación vertical (arriba/abajo) + dots de página */
.eb-rev-nav { display: flex; align-items: center; justify-content: center; gap: 16px;
              margin-top: clamp(28px, 4vw, 44px); }
.eb-rev-arrow { width: 44px; height: 44px; border-radius: 999px; cursor: pointer; padding: 0;
                display: inline-flex; align-items: center; justify-content: center;
                background: transparent; border: 1px solid rgba(242,243,240,0.18); color: #F2F3F0;
                transition: border-color .25s ease, color .25s ease, opacity .25s ease; }
.eb-rev-arrow:disabled { opacity: 0.28; cursor: default; }
@media (hover:hover) { .eb-rev-arrow:not(:disabled):hover { border-color: #D4FF3D; color: #D4FF3D; } }
.eb-rev-dots { display: inline-flex; align-items: center; gap: 9px; }
.eb-rev-dot { width: 9px; height: 9px; border-radius: 999px; cursor: pointer; padding: 0;
              background: rgba(242,243,240,0.22); border: none;
              transition: background .25s ease, transform .25s ease; }
.eb-rev-dot.active { background: #D4FF3D; transform: scale(1.25); }

/* --- footer: links en una sola linea (contact · disclosure · reviews · privacy) --- */
.eb-foot-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                gap: 10px 28px; text-align: center; font-size: 14px;
                margin: 0 auto;
                font-family: 'Space Grotesk', ui-sans-serif, sans-serif; letter-spacing: -0.02em; }
.eb-foot-link2 { color: #D4FF3D; text-decoration: none; font-weight: 500;
                 transition: color .3s ease; }
.eb-foot-link2:hover { color: #F2F3F0; }
.eb-foot-copy { color: #6E727A;
                font-family: 'Space Grotesk', ui-sans-serif, sans-serif; letter-spacing: -0.02em; }
.eb-foot-copy a { color: #D4FF3D; text-decoration: none; transition: color .3s ease; }
.eb-foot-copy a:hover { color: #F2F3F0; }
@media (max-width: 560px) {
  .eb-foot-grid { gap: 8px 18px; }
}

/* toggle del resaltado */
.eb-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; background: transparent;
             border: 1px solid rgba(242,243,240,0.18); border-radius: 999px; padding: 12px 20px;
             font-family: 'Inter', sans-serif; font-size: 14px; color: #F2F3F0; transition: border-color .35s ease; }
.eb-toggle .eb-track { width: 34px; height: 18px; border-radius: 999px; background: rgba(242,243,240,0.18);
                       position: relative; transition: background .3s ease; display: inline-block; }
.eb-toggle .eb-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px;
                      background: #0B0B0C; transition: left .3s ease; }
.eb-toggle.on .eb-track { background: #D4FF3D; }
.eb-toggle.on .eb-knob { left: 18px; }

/* --- selector de idioma (banderas) --- */
.eb-lang { position: relative; }
.eb-lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
                   padding: 8px 12px; border: 1px solid rgba(242,243,240,0.18); border-radius: 999px;
                   font-size: 13px; color: #F2F3F0; transition: border-color .35s ease; user-select: none; }
.eb-lang summary::-webkit-details-marker { display: none; }
.eb-lang svg { display: block; border-radius: 2px; }
.eb-lang .eb-caret { font-size: 9px; color: #6E727A; }
.eb-lang > div { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px;
                 background: rgba(23,24,27,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
                 border: 1px solid rgba(242,243,240,0.1); border-radius: 14px; padding: 6px; z-index: 60; }
.eb-lang a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
             text-decoration: none; color: #F2F3F0; font-size: 14px; }
.eb-lang a .eb-check { margin-left: auto; color: #D4FF3D; font-size: 12px; }
.eb-lang-label { display: inline; }
@media (max-width: 480px) { .eb-lang-label { display: none; } }  /* solo bandera en mobile */

/* --- mobile (celulares iOS/Android) -------------------------------------
   El layout base ya es fluido (clamp + auto-fit + flex-wrap), pero el
   comparador de 3 columnas queda apretado en pantallas chicas. En <=620px
   se reacomoda: la especificación pasa ARRIBA (fila completa) y los dos
   valores quedan lado a lado. Se usa !important para pisar estilos inline. */
@media (max-width: 620px) {
  /* header del comparador: fuera la celda "especificación", 2 motos lado a lado */
  .eb-cmp-head { grid-template-columns: 1fr 1fr !important; }
  .eb-cmp-speclabel { display: none !important; }

  /* filas: label arriba a lo ancho, valores abajo en 2 columnas */
  .eb-row > div:first-child { grid-template-columns: 1fr 1fr !important; }
  .eb-row > div:first-child > div:first-child { grid-column: 1 / -1; padding-bottom: 4px !important; }
  .eb-row .eb-val { border-left: none !important; padding-top: 4px !important; flex-wrap: wrap; }
  .eb-row .eb-val + .eb-val { border-left: 1px solid rgba(242,243,240,0.07) !important; }
}

/* nav pill compacta en pantallas muy angostas */
@media (max-width: 420px) {
  nav .eb-cta-primary { font-size: 12px !important; padding: 9px 13px !important; }
  nav > div { padding-left: 14px !important; gap: 8px !important; }
  nav > div > a[href="#top"] { font-size: 15px !important; }
}

/* --- táctil: sin flash gris al tocar (Android) ni delay --- */
a, button, .eb-row { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* --- accesibilidad --- */
:focus-visible { outline: 2px solid #D4FF3D; outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}