/* ==========================================================================
   Comparador de Patinetes — sistema visual
   Una sola hoja, sin framework y sin compilar. Organizada por secciones.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Tema OSCURO. Nada de negro puro (#000): un negro absoluto con texto blanco
     produce un contraste que vibra y cansa. Se usa un casi-negro azulado, que
     es lo que da sensacion de profundidad. */
  --t-900:#f2f6fa;   /* el texto mas fuerte: casi blanco, no blanco puro */
  --t-700:#c9d4de;
  --t-500:#93a3b1;
  --t-400:#74838f;
  --t-300:#5a6772;

  --papel:#0b0e13;    /* fondo de la pagina */
  --papel-2:#12171f;  /* superficies: tarjetas, cabecera */
  --papel-3:#1a212b;  /* superficies elevadas y cabeceras de tabla */
  --linea:#232c38;
  --linea-fuerte:#33404f;

  /* Panel claro SOLO para las fotos. Las imagenes de Amazon vienen recortadas
     sobre blanco: sobre fondo oscuro se verian como recuadros que deslumbran.
     Ponerlas sobre un panel claro es deliberado, no una incoherencia. */
  --panel-foto:#f4f6f8;

  /* Naranja de marca. Sobre fondo casi negro hay que subir el tono: un naranja
     "de catalogo" (#e07b00) se apaga y baja del contraste minimo legible. */
  --marca:#f5a524;
  --marca-osc:#e0921a;
  --marca-clara:#2a1d09;
  --marca-borde:#4f3611;

  /* El naranja de Amazon es MAS SATURADO y va con degradado y texto oscuro:
     es lo que mantiene el boton de compra distinguible del texto de marca,
     ahora que los dos son naranjas. Si algun dia se confunden, lo que hay que
     cambiar es el color de marca, no el del boton: el de Amazon se reconoce. */
  --amazon:#ff9900;
  --amazon-osc:#e88b00;

  --alerta:#f0b45c;
  --alerta-fondo:#2a1f0f;
  --alerta-borde:#4a3718;
  --malo:#f4796d;
  --malo-fondo:#2a1412;
  --malo-borde:#4d221e;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem;

  /* En oscuro una sombra apenas se ve: lo que separa una superficie del fondo
     es un borde claro arriba (luz) mas la sombra. Por eso llevan el inset. */
  --sombra-1:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
  --sombra-2:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --sombra-3:0 12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);

  --ancho:1180px;
  --fuente:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-tit:"Fraunces", Georgia, "Times New Roman", serif;
}

/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fuente);
  font-size:16px;
  line-height:1.65;
  color:var(--t-700);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--marca);text-decoration:none;transition:color .15s}
a:hover{color:var(--marca-osc)}
button{font-family:inherit}

h1,h2,h3,h4{
  font-family:var(--fuente-tit);
  font-weight:600;
  color:var(--t-900);
  line-height:1.18;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}
h1{font-size:clamp(2rem,4.2vw,3.1rem)}
h2{font-size:clamp(1.45rem,2.6vw,2rem)}
h3{font-size:1.06rem;font-family:var(--fuente);font-weight:650;letter-spacing:-.01em}
p{margin:0 0 1em}

::selection{background:var(--marca-clara);color:var(--marca-osc)}
:focus-visible{outline:2.5px solid var(--marca);outline-offset:3px;border-radius:4px}

.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
.bloque{padding-block:clamp(2.4rem,5vw,4.2rem)}
.bloque-texto{max-width:68ch}
.sub{color:var(--t-500);font-size:1.03rem;max-width:66ch;margin:-.35em 0 var(--s4)}
.nota{font-size:.83rem;color:var(--t-400);line-height:1.6;max-width:76ch;margin-top:var(--s2)}
.sin-dato{color:var(--t-300)}
.rellenar{background:var(--alerta-fondo);border-left:3px solid var(--alerta);
  padding:.9rem 1.1rem;border-radius:var(--r-sm);color:var(--alerta)}

.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;background:var(--papel-3);color:var(--t-900);padding:.7rem 1rem;z-index:99;
  box-shadow:var(--sombra-2);border-radius:var(--r-sm)}

/* --- 3. Cabecera --------------------------------------------------------- */
.cabecera{
  position:sticky;top:0;z-index:40;
  background:rgba(11,14,19,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea);
}
.cabecera-fila{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);min-height:66px}
.logo{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--fuente-tit);font-size:1.14rem;font-weight:650;
  color:var(--t-900);letter-spacing:-.025em;
}
.logo:hover{color:var(--t-900)}
.logo-texto{display:flex;flex-direction:column;line-height:1.12}
.logo-texto b{font-weight:650}
.logo-texto small{
  font-family:var(--fuente);font-size:.63rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--t-400);
}
.pie-lema{font-family:var(--fuente);font-size:.78rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--t-400)}
/* El icono es ahora un dibujo con fondo transparente, no un emoji sobre color:
   nada de fondo ni de sombra detrás, que lo ensuciarían. */
.logo-icono{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.pie-marca .logo-icono{width:34px;height:34px;vertical-align:middle;display:inline-block}
.pie-marca{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.nav{display:flex;gap:.3rem;flex-wrap:wrap;order:2}
.nav a{
  color:var(--t-500);font-size:.9rem;font-weight:500;
  padding:.42rem .72rem;border-radius:99px;transition:background .15s,color .15s;
}
.nav a:hover{background:var(--papel-3);color:var(--t-900)}

.aviso-barra{
  margin:0;padding:.5rem 1rem;text-align:center;
  background:var(--marca-clara);color:var(--marca);border-bottom:1px solid var(--marca-borde);
  font-size:.775rem;letter-spacing:.012em;
}
.aviso-barra b{color:var(--t-900);font-weight:600}

/* --- 4. Botones ---------------------------------------------------------- */
.btn-principal,.btn-secundario,.btn-comprar,.btn-comparar{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.82rem 1.35rem;border-radius:var(--r-sm);
  font-weight:600;font-size:.925rem;line-height:1.2;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform .12s ease, box-shadow .18s ease, background .15s;
}
.btn-principal:active,.btn-comprar:active,.btn-secundario:active{transform:translateY(1px)}

.btn-principal{background:var(--marca);color:#1c1200;box-shadow:0 2px 10px rgba(245,165,36,.28)}
.btn-principal:hover{background:var(--marca-osc);color:#1c1200;box-shadow:0 4px 16px rgba(245,165,36,.35)}

.btn-secundario{background:var(--papel-3);color:var(--t-900);border-color:var(--linea-fuerte)}
.btn-secundario:hover{border-color:var(--t-400);color:var(--t-900);background:var(--papel-2)}

/* El naranja de Amazon: reconocible al instante, solo aqui */
.btn-comprar{
  width:100%;background:linear-gradient(180deg,#ffad33,var(--amazon));
  color:#1a1200;border-color:var(--amazon-osc);
  box-shadow:0 1px 2px rgba(120,70,0,.18);
}
.btn-comprar:hover{background:linear-gradient(180deg,#ffbb55,#ffa31a);color:#1a1200}
.btn-sm{padding:.6rem .95rem;font-size:.86rem}

.btn-comparar{background:var(--papel-3);color:var(--t-700);border-color:var(--linea-fuerte);width:100%;margin-top:.6rem}
.btn-comparar:hover{border-color:var(--marca);color:var(--marca)}
.btn-comparar[data-activo="1"]{background:var(--marca-clara);border-color:var(--marca-borde);color:var(--marca-osc)}

/* --- 5. Hero ------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(245,165,36,.13) 0%, transparent 62%),
    radial-gradient(900px 400px at 92% 0%, rgba(69,130,236,.12) 0%, transparent 58%),
    linear-gradient(180deg,#1a1409,var(--papel));
  border-bottom:1px solid var(--linea);
  padding-block:clamp(3rem,7vw,5.4rem);
}
.hero::after{  /* rejilla tenue: da profundidad sin ruido visual */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000,transparent 72%);
}
.hero>*{position:relative;z-index:1}

/* Hero con foto: la imagen va detrás y se oscurece con un degradado para que el
   texto encima siga siendo legible. Sin ese velo, un titular blanco sobre una
   foto clara no hay quien lo lea. */
.hero-con-foto{padding-block:clamp(4rem,10vw,8rem)}
.hero-foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.42;
  mask-image:linear-gradient(90deg,transparent 8%,#000 55%);
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 55%);
}
.hero-con-foto::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,var(--papel) 18%,rgba(11,14,19,.75) 55%,rgba(11,14,19,.5) 100%);
}
.hero-con-foto::after{opacity:.28}
@media (max-width:760px){
  .hero-foto{opacity:.22;mask-image:none;-webkit-mask-image:none}
  .hero-con-foto::before{background:linear-gradient(180deg,rgba(11,14,19,.82),var(--papel))}
}
.hero h1{max-width:16ch;margin-bottom:.42em}
.hero h1 em{font-style:normal;color:var(--marca);position:relative;white-space:nowrap}
.hero-sub{font-size:clamp(1rem,1.6vw,1.14rem);color:var(--t-500);max-width:58ch;margin-bottom:var(--s4)}
.hero-btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:var(--s4)}
.hero-datos{display:flex;gap:clamp(1.4rem,4vw,2.8rem);flex-wrap:wrap;
  padding-top:var(--s3);border-top:1px solid var(--linea);max-width:640px}
.hero-dato b{display:block;font-family:var(--fuente-tit);font-size:1.85rem;
  color:var(--t-900);line-height:1.1;letter-spacing:-.02em}
.hero-dato span{font-size:.79rem;color:var(--t-400);text-transform:uppercase;letter-spacing:.07em}

/* En pantallas anchas el hero se partía en dos mitades: el titular (16ch) dejaba
   casi 1.000 px vacíos a su derecha y la foto, enmascarada hacia ese lado,
   quedaba como un bloque aparte. Medido a 1885 px de ancho. A partir de 1100 px
   se centra la composición entera y el velo pasa a ser vertical y uniforme: con
   el texto ya no pegado a la izquierda, un degradado lateral lo dejaría sobre la
   parte clara de la foto y sin contraste. */
/* --- Transicion al cambiar de pagina ------------------------------------
   Con esto el navegador funde una pagina con la siguiente en vez de dar el
   salto seco de siempre. Solo funciona entre paginas del propio sitio (a
   Amazon no aplica) y solo en navegadores que lo soportan (Chrome y Edge hoy);
   en el resto se navega como toda la vida, sin romper nada.
   Va fuera del bloque de reducir movimiento y se anula abajo a proposito. */
@view-transition { navigation: auto; }

::view-transition-old(root){
  animation:vt-sale .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){
  animation:vt-entra .42s cubic-bezier(0,0,.2,1) both}
@keyframes vt-sale{to{opacity:0;transform:translateY(-14px) scale(.99)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(22px) scale(.995)}}

/* La cabecera no debe deslizarse con el resto: si viaja aparte, se queda
   quieta y la pagina se mueve por debajo. Se ve mucho mas cuidado. */
.cabecera{view-transition-name:cabecera}
::view-transition-old(cabecera),
::view-transition-new(cabecera){animation:none;mix-blend-mode:normal}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Flecha discreta al pie del hero. Si la portada ocupa la pantalla justa, hace
   falta decir que hay mas abajo; sin ella parece que la web acaba ahi. */
.hero-mas{display:none}
@media (min-width:1100px){
  /* El hero llena la pantalla MENOS la cabecera (sticky, 67 px medidos). Antes
     acababa a media altura y por debajo asomaba la seccion siguiente cortada a
     mitad de una linea: da sensacion de descuido nada mas abrir la web.
     `svh` es la altura util real en movil; `vh` queda de respaldo. */
  .hero-con-foto{
    min-height:calc(100vh - 67px);
    min-height:calc(100svh - 67px);
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(3rem,6vw,5rem);
    position:relative;
  }
  .hero-mas{display:block;position:absolute;left:50%;bottom:1.5rem;
    transform:translateX(-50%);z-index:1;color:var(--t-400);
    font-size:1.5rem;line-height:1;text-decoration:none;
    animation:hero-baja 2.4s ease-in-out infinite}
  .hero-mas:hover{color:var(--marca)}
  @keyframes hero-baja{
    0%,100%{transform:translate(-50%,0)}
    50%{transform:translate(-50%,6px)}
  }
  .hero-con-foto{text-align:center}
  .hero-con-foto h1{max-width:22ch;margin-inline:auto}
  .hero-con-foto .hero-sub{margin-inline:auto}
  .hero-con-foto .hero-btns{justify-content:center}
  .hero-con-foto .hero-datos{justify-content:center;margin-inline:auto}
  .hero-con-foto .hero-foto{
    mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
  }
  .hero-con-foto::before{
    background:linear-gradient(180deg,rgba(11,14,19,.62) 0%,rgba(11,14,19,.78) 55%,var(--papel) 100%);
  }
}

/* --- 6. Tarjetas de producto -------------------------------------------- */
.rejilla{display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tarjeta{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--r-md);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .2s;
}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--linea-fuerte)}
.tarjeta-img{display:block;padding:1.1rem;background:var(--panel-foto);border-bottom:1px solid var(--linea)}
.tarjeta-img img{height:172px;width:auto;max-width:100%;object-fit:contain;margin-inline:auto;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.tarjeta:hover .tarjeta-img img{transform:scale(1.045)}
.tarjeta-cuerpo{display:flex;flex-direction:column;flex:1;padding:0 1.05rem 1.05rem}
.tarjeta-marca{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-400);margin:0 0 .3rem}
.tarjeta h3{font-size:.9rem;line-height:1.4;margin:0 0 .75rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta h3 a{color:var(--t-900)}
.tarjeta h3 a:hover{color:var(--marca)}
.tarjeta-specs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  padding:.6rem 0;margin:0 0 .7rem;border-block:1px solid var(--linea)}
.tarjeta-specs li{text-align:center;padding-inline:2px}
.tarjeta-specs li+li{border-left:1px solid var(--linea)}
.tarjeta-specs b{display:block;font-size:.9rem;font-weight:650;color:var(--t-900)}
.tarjeta-specs span{font-size:.63rem;color:var(--t-400);text-transform:uppercase;letter-spacing:.06em}
.tarjeta-precio{font-family:var(--fuente-tit);font-size:1.32rem;font-weight:650;
  color:var(--t-900);margin:.2rem 0 .75rem;display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.tarjeta-cuerpo .btn-comprar{margin-top:auto}
.precio-antes{font-family:var(--fuente);font-size:.85rem;color:var(--t-400);font-weight:400}

.chip{display:inline-flex;align-items:center;gap:.28rem;font-size:.7rem;font-weight:650;
  padding:.24rem .6rem;border-radius:99px;letter-spacing:.01em;margin-bottom:.55rem;width:fit-content}
.chip-dgt{background:var(--marca-clara);color:var(--marca-osc);border:1px solid var(--marca-borde)}
.chip-nodgt{background:var(--malo-fondo);color:var(--malo);border:1px solid var(--malo-borde)}
.chip-oferta{background:var(--malo);color:#2a1412;font-size:.72rem;padding:.18rem .5rem}
.chip-verif{background:var(--marca-clara);color:var(--marca-osc);font-size:.66rem;
  padding:.1rem .45rem;border-radius:99px;font-weight:600}

/* --- 6b. Accesorios ------------------------------------------------------ */
.acc-lema{font-family:var(--fuente);font-size:.86rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--marca);
  margin:-.6em 0 1.1rem}
.acc-foto{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-md);border:1px solid var(--linea);margin:0 0 var(--s4)}
.acc-indice{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--linea)}
.acc-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;
  border-radius:99px;background:var(--papel-2);border:1px solid var(--linea);
  color:var(--t-700);font-size:.86rem;font-weight:500}
.acc-chip:hover{border-color:var(--marca);color:var(--marca);text-decoration:none}
.acc-chip span{font-size:.74rem;color:var(--t-400);font-weight:700}
.acc-bloque{margin:var(--s5) 0 var(--s3);padding-top:var(--s3);
  border-top:2px solid var(--marca-borde)}
.acc-bloque:first-of-type{margin-top:0;border-top:0;padding-top:0}
.acc-bloque-tit{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.15rem}
.acc-bloque-sub{color:var(--t-400);font-size:.95rem;margin:0}
.acc-seccion{margin-bottom:var(--s4);scroll-margin-top:96px}
.acc-cat-tit{font-family:var(--fuente-tit);font-size:1.25rem;font-weight:600;
  color:var(--t-900);margin:0 0 .5rem;letter-spacing:-.01em}
/* La nota va destacada porque es la razon de ser de la seccion: avisar antes
   de que alguien compre algo que no le sirve. */
.acc-nota{background:var(--marca-clara);border-left:3px solid var(--marca);
  padding:.85rem 1.1rem;border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.9rem;color:var(--t-700);max-width:78ch;margin:0 0 1.3rem}
.acc-nota b{color:var(--t-900)}
.tarjeta.acc .tarjeta-img{padding:.9rem}
.tarjeta.acc .tarjeta-img img{height:135px;width:auto;max-width:100%;object-fit:contain;margin-inline:auto}
.tarjeta.acc h3{font-size:.85rem;-webkit-line-clamp:3}
.acc-val{margin:0 0 .35rem;font-size:.82rem;color:var(--alerta);font-weight:650}
.acc-val span{color:var(--t-400);font-weight:400}
.tarjeta.acc .tarjeta-precio{font-size:1.1rem;margin:.1rem 0 .6rem}
.recordatorio{background:var(--alerta-fondo);border:1px solid var(--alerta-borde);
  border-radius:var(--r-md);padding:1.15rem 1.35rem;border-top:1px solid var(--alerta-borde)}
.recordatorio h2{font-size:1.1rem;color:var(--alerta);margin-bottom:.4rem}
.recordatorio p{margin:0 0 .5rem;font-size:.92rem}
.recordatorio p:last-child{margin-bottom:0}

/* --- 7. Categorias ------------------------------------------------------- */
.cats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.cat-card{
  position:relative;display:block;padding:1.35rem 1.25rem;overflow:hidden;
  background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--r-md);color:var(--t-900);
  transition:transform .18s, box-shadow .2s, border-color .2s;
}
.cat-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--marca);transform:scaleY(0);transform-origin:bottom;transition:transform .22s}
.cat-card:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--linea-fuerte);color:var(--t-900)}
.cat-card:hover::before{transform:scaleY(1)}
.cat-card h3{margin:0 0 .15rem;font-size:1.02rem}
.cat-card p{margin:0;color:var(--t-400);font-size:.83rem}

/* --- 8. Ficha ------------------------------------------------------------ */
.miga{font-size:.79rem;color:var(--t-400);padding:1.1rem 0 .3rem}
.miga a{color:var(--t-400)}
.miga a:hover{color:var(--marca)}
.ficha{padding-bottom:var(--s6)}
.ficha-top{display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:start;margin-bottom:var(--s4)}
.ficha-galeria{position:sticky;top:88px}
.ficha-img{width:100%;height:400px;object-fit:contain;padding:1.6rem;background:var(--panel-foto);
  border:1px solid var(--linea);border-radius:var(--r-lg)}
.ficha-thumbs{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.ficha-thumbs img{width:70px;height:70px;object-fit:contain;padding:.35rem;background:var(--panel-foto);
  border:1px solid var(--linea);border-radius:var(--r-sm);cursor:pointer;transition:border-color .15s}
.ficha-thumbs img:hover{border-color:var(--marca)}

/* --- Visor de fotos a pantalla completa (zoom de la ficha) ---------------
   La foto de la ficha se ve a 400 px de alto como mucho, y las de Amazon
   vienen a mucha más resolución: sin esto, el detalle que ya está descargado
   no se puede mirar. El aviso "Pulsa para ampliar" va visible, no oculto tras
   un hover, porque en un móvil no hay hover que valga. */
.ficha-img{cursor:zoom-in}
.ficha-lupa{display:flex;align-items:center;justify-content:center;gap:.4rem;
  margin:.5rem 0 0;font-size:.8rem;color:var(--t-400)}
/* `overflow:auto` + `margin:auto` en la imagen, en vez de centrar con
   align-items: con align-items:center y una imagen mas alta que la pantalla, el
   navegador recorta por arriba y NO deja subir el scroll. Comprobado ampliando
   una foto de 500 px a 1.000 en una ventana de 900 de alto. */
.visor{position:fixed;inset:0;z-index:200;display:flex;overflow:auto;
  overscroll-behavior:contain;
  background:rgba(8,10,14,.94);padding:clamp(12px,3vw,32px)}
.visor[hidden]{display:none}
.visor-img{margin:auto;max-width:100%;max-height:100%;object-fit:contain;
  background:#fff;border-radius:var(--r-md);cursor:zoom-in}
/* El tamano ampliado lo fija el JS en pixeles sobre el tamano REAL de cada
   foto. Con `transform:scale` la caja no crece, asi que no aparecia barra de
   desplazamiento y lo que se salia era imposible de mirar. */
.visor-img.ampliada{max-width:none;max-height:none;cursor:zoom-out}
.visor-cerrar,.visor-nav{position:absolute;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(255,255,255,.22);
  background:rgba(20,24,32,.82);color:#fff;border-radius:99px;cursor:pointer;
  font-size:1.5rem;line-height:1;padding:0}
.visor-cerrar{top:14px;right:14px;width:46px;height:46px}
.visor-nav{top:50%;transform:translateY(-50%);width:52px;height:52px}
.visor-ant{left:14px}
.visor-sig{right:14px}
.visor-cerrar:hover,.visor-nav:hover{background:var(--marca);color:#151515;
  border-color:var(--marca)}
.visor-cuenta{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.72);font-size:.82rem;letter-spacing:.06em}
body.sin-scroll{overflow:hidden}
@media (max-width:600px){
  .visor-nav{width:44px;height:44px;font-size:1.25rem}
}
/* Aviso de ficha con pocos datos. Con el color de alerta, no en rojo de error:
   no es un fallo del producto ni nuestro, es informacion que el vendedor no
   publica — y decirlo es parte de la promesa de la portada. */
.aviso-datos{background:var(--papel-2);border:1px solid var(--linea);
  border-left:3px solid var(--alerta);border-radius:var(--r-sm);
  padding:.95rem 1.1rem;margin:0 0 1.1rem;font-size:.9rem;color:var(--t-700)}
.aviso-datos p{margin:0 0 .55rem;line-height:1.6}
.aviso-datos p:last-child{margin-bottom:0}
/* Etiqueta con los km al final de cada línea del mapa. Sin ella habría que
   pinchar la línea para saber cuánto mide. */
.km-punta span{display:inline-block;white-space:nowrap;
  background:rgba(12,15,20,.94);border:1.5px solid;border-radius:99px;
  padding:.16rem .55rem;font-size:.72rem;font-weight:500;color:#e8ecf2;
  transform:translate(9px,-50%);box-shadow:0 3px 10px -3px rgba(0,0,0,.8)}
.km-punta b{font-weight:750;color:#fff}

/* Marca de reseña traducida. Va en la cabecera, junto al nombre: quien lee
   tiene que saber que ese texto no es literalmente lo que se publicó. */
.resena-trad{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t-400);border:1px solid var(--linea);border-radius:99px;
  padding:.1rem .5rem;margin-left:.15rem;white-space:nowrap}
.resena-trad-no{color:var(--t-500)}
.resena-orig{margin:.35rem 0 0}
.resena-orig summary{font-size:.78rem;color:var(--t-400);cursor:pointer;
  list-style:none}
.resena-orig summary::-webkit-details-marker{display:none}
.resena-orig summary::before{content:"▸ ";color:var(--t-400)}
.resena-orig[open] summary::before{content:"▾ "}
.resena-orig p{font-size:.85rem;color:var(--t-400);margin:.4rem 0 0;
  padding-left:.7rem;border-left:2px solid var(--linea);font-style:italic}

/* Ayuda del boton de comparar: sin ella, el boton guardaba algo y no se sabia
   ni para que ni donde verlo. */
.comparar-ayuda{font-size:.82rem;color:var(--t-400);line-height:1.55;
  margin:.55rem 0 0}
.comparar-ayuda a{color:var(--t-500)}
.comparar-ayuda a.comparar-ir{color:var(--marca);font-weight:650}

/* --- Animaciones -------------------------------------------------------
   Regla que las gobierna a todas: el contenido se ve SIEMPRE, animado o no.
   Nada aparece "solo al terminar la animacion" — si el JS falla o el
   navegador no soporta el observador, `.aparece` se queda visible y ya esta.
   Y todo se apaga con la preferencia de reducir movimiento (al final). */
@media (prefers-reduced-motion:no-preference){
  /* Entrada mas marcada: con 18 px y opacidad sola no se notaba. Ahora sube
     mas, arranca algo encogida y el escalonado llega a 6 tarjetas. */
  .aparece{opacity:0;transform:translateY(34px) scale(.97);
    transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.44,1)}
  .aparece.visible{opacity:1;transform:none}
  .aparece:nth-child(2){transition-delay:.08s}
  .aparece:nth-child(3){transition-delay:.16s}
  .aparece:nth-child(4){transition-delay:.24s}
  .aparece:nth-child(5){transition-delay:.32s}
  .aparece:nth-child(6){transition-delay:.40s}

  .tarjeta{transition:transform .3s cubic-bezier(.16,.84,.44,1),
                      border-color .3s ease,box-shadow .3s ease}
  .tarjeta:hover{transform:translateY(-8px) scale(1.015);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.75);border-color:var(--marca)}
  .tarjeta-img img{transition:transform .6s cubic-bezier(.16,.84,.44,1)}
  .tarjeta:hover .tarjeta-img img{transform:scale(1.09)}

  .btn-principal,.btn-comprar,.btn-secundario,.btn-comparar{
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
  .btn-principal:hover,.btn-comprar:hover{transform:translateY(-2px)}

  /* El boton de comprar: destello al pasar y hundido al pulsar. Es el clic que
     da dinero — conviene que se note que responde. El destello va con
     ::after y `overflow:hidden`, sin tocar el texto del boton. */
  .btn-comprar{position:relative;overflow:hidden}
  .btn-comprar::after{content:"";position:absolute;top:0;bottom:0;width:45%;
    left:-60%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-18deg)}
  .btn-comprar:hover::after{animation:destello .75s ease}
  @keyframes destello{to{left:130%}}
  .btn-comprar:active,.btn-principal:active{transform:scale(.97)}
  .btn-comprar:hover{box-shadow:0 10px 26px -10px rgba(245,165,36,.85)}

  /* Al salir hacia Amazon, la pagina se atenua un instante: da sensacion de
     "vamos allá" sin retrasar la navegacion (el enlace se abre igual). */
  body.saliendo{animation:salida .35s ease forwards}
  @keyframes salida{to{opacity:.55;transform:scale(.994)}}

  .hero h1,.hero-sub,.hero-btns,.hero-datos{
    animation:hero-entra .7s cubic-bezier(.22,.61,.36,1) both}
  .hero-sub{animation-delay:.1s}
  .hero-btns{animation-delay:.2s}
  .hero-datos{animation-delay:.3s}
  @keyframes hero-entra{from{opacity:0;transform:translateY(16px)}
                        to{opacity:1;transform:none}}
}

/* Nota de los compradores en la tarjeta. Tres colores porque un 3,4 y un 4,6
   no dicen lo mismo, y en gris ambos pasan desapercibidos. */
.tarjeta-nota{display:flex;align-items:baseline;gap:.4rem;margin:-.15rem 0 .5rem;
  font-size:.86rem;font-weight:650}
.tarjeta-nota span{font-size:.76rem;font-weight:400;color:var(--t-400)}
.nota-alta{color:var(--alerta)}
.nota-media{color:var(--t-500)}
.nota-baja{color:var(--t-500)}
.nota-baja::after{content:"nota baja";margin-left:.1rem;font-size:.7rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t-400);border:1px solid var(--linea);border-radius:99px;
  padding:.05rem .4rem}
.nota-sin{color:var(--t-400);font-weight:400;font-size:.8rem}
.ficha-marca{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--t-400);margin:0 0 .45rem}
.ficha-head h1{font-size:clamp(1.35rem,2.4vw,1.9rem);margin-bottom:.55rem}
.ficha-rating{color:var(--alerta);font-weight:650;margin:0 0 .9rem;font-size:.95rem}
.ficha-rating span{color:var(--t-400);font-weight:400;font-size:.85rem}
.ficha-precio{font-family:var(--fuente-tit);font-size:2.4rem;font-weight:650;color:var(--t-900);
  margin:.7rem 0 .15rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;letter-spacing:-.02em}
.ficha-precio-nota{font-size:.775rem;color:var(--t-400);margin:0 0 1.1rem}
.confianza{margin-top:1.1rem;padding:.95rem 1.15rem;background:var(--papel-2);
  border:1px solid var(--linea);border-left:3px solid var(--marca);
  border-radius:0 var(--r-sm) var(--r-sm) 0}
.confianza p{margin:0 0 .6rem;font-size:.855rem;line-height:1.6;color:var(--t-500)}
.confianza p:last-child{margin-bottom:0}
.confianza b{color:var(--t-900)}
.ficha-bloque{padding-block:var(--s4);border-top:1px solid var(--linea)}
.ficha-bloque>h2{margin-bottom:.9rem}
.bullets{padding-left:1.1rem;color:var(--t-500)}
.bullets li{margin-bottom:.55rem}
.cta-final{max-width:400px;margin:var(--s4) auto}

.ficha-dgt{padding:1.3rem 1.5rem;border-radius:var(--r-md);margin-top:var(--s3)}
.ficha-dgt h2{font-size:1.12rem;margin:0 0 .45rem}
.ficha-dgt p{margin:0;font-size:.94rem}
.dgt-si{background:var(--marca-clara);border:1px solid var(--marca-borde);color:var(--marca-osc)}
.dgt-si h2{color:var(--marca-osc)}
.dgt-nd{background:var(--alerta-fondo);border:1px solid var(--alerta-borde);color:var(--alerta)}
.dgt-nd h2{color:var(--alerta)}
.dgt-no{background:var(--malo-fondo);border:1px solid var(--malo-borde);color:var(--malo)}
.dgt-no h2{color:var(--malo)}

/* --- 9. Tabla de specs --------------------------------------------------- */
.tabla-specs{width:100%;border-collapse:collapse;font-size:.925rem}
.tabla-specs th,.tabla-specs td{padding:.7rem .95rem;text-align:left;border-bottom:1px solid var(--linea)}
.tabla-specs th{font-weight:450;color:var(--t-500);width:52%}
.tabla-specs td{font-weight:600;color:var(--t-900)}
.grupo-spec td{
  background:var(--papel-3);font-family:var(--fuente);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t-500);padding:.5rem .95rem;
}
.fuente-ext{
  display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.02em;
  padding:.1rem .42rem;border-radius:99px;margin-left:.35rem;vertical-align:middle;
  background:#132033;color:#7fb0ff;border:1px solid #24395a;white-space:nowrap;
}
a.fuente-ext:hover{background:#e0eaf9;color:#1d4ed8}
.specs-extra{margin-top:1rem;border:1px solid var(--linea);border-radius:var(--r-sm);overflow:hidden}
.specs-extra summary{padding:.75rem 1rem;cursor:pointer;font-size:.88rem;font-weight:600;
  color:var(--t-500);background:var(--papel-2);user-select:none}
.specs-extra summary:hover{color:var(--marca)}
.specs-extra .tabla-specs{font-size:.86rem}

/* --- 10. Radar ----------------------------------------------------------- */
.radar-caja{display:flex;justify-content:center;padding:.5rem 0}
.radar{width:min(100%,380px);height:auto;overflow:visible}
.radar-rejilla circle,.radar-rejilla line{fill:none;stroke:var(--linea);stroke-width:1}
.radar-area{fill:rgba(245,165,36,.15);stroke:var(--marca);stroke-width:2;stroke-linejoin:round}
.radar-punto{fill:var(--marca)}
.radar-etq text{font-size:9.5px;fill:var(--t-400);font-family:var(--fuente)}
.radar-etq .val{font-weight:700;fill:var(--t-900)}

/* --- 11. Editorial, pros/contras, resenas -------------------------------- */
.editorial{max-width:70ch;color:var(--t-700)}
.editorial p{margin-bottom:1em}
.editorial b{color:var(--t-900)}
.pros-contras{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin:var(--s3) 0}
.pros,.contras{padding:1.15rem 1.3rem;border-radius:var(--r-md);border:1px solid}
.pros{background:var(--marca-clara);border-color:var(--marca-borde)}
.contras{background:var(--alerta-fondo);border-color:var(--alerta-borde)}
.pros h3,.contras h3{margin:0 0 .6rem;font-size:.79rem;letter-spacing:.1em;text-transform:uppercase}
.pros h3{color:var(--marca-osc)} .contras h3{color:var(--alerta)}
.pros ul,.contras ul{margin:0;padding-left:1.05rem;font-size:.9rem}
.pros li,.contras li{margin-bottom:.45rem}
.ideal-para{background:var(--papel-2);border-left:3px solid var(--marca);
  padding:.85rem 1.1rem;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.95rem;margin:0}

.resenas{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.resena{border:1px solid var(--linea);border-radius:var(--r-md);padding:1.05rem 1.2rem;background:var(--papel-2)}
.resena-cab{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 .35rem;font-size:.87rem}
.resena-estrellas{color:var(--alerta);font-weight:650}
.resena-tit{font-weight:650;color:var(--t-900);margin:0 0 .3rem;font-size:.95rem}
.resena-txt{margin:0 0 .4rem;font-size:.9rem;color:var(--t-500)}
.resena-fecha{margin:0;font-size:.76rem;color:var(--t-300)}

/* --- 12. Guias ----------------------------------------------------------- */
.guia-intro{max-width:70ch;color:var(--t-500);margin-bottom:var(--s4);font-size:1.02rem}
.guia-intro b{color:var(--t-900)}
.guia-lista{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.guia-item{display:grid;grid-template-columns:auto 96px 1fr;gap:1.1rem;align-items:center;
  border:1px solid var(--linea);border-radius:var(--r-md);padding:1.05rem 1.2rem;background:var(--papel-2);
  transition:box-shadow .2s,border-color .2s}
.guia-item:hover{box-shadow:var(--sombra-1);border-color:var(--linea-fuerte)}
.guia-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--marca);color:#1c1200;font-weight:700;font-size:.88rem}
.guia-item:first-child .guia-num{background:linear-gradient(145deg,var(--marca),var(--marca-osc))}
.guia-foto{width:96px;height:96px;object-fit:contain;background:var(--papel-2);border-radius:var(--r-sm);padding:.4rem}
.guia-item h3{margin:0 0 .25rem;font-size:.99rem}
.guia-item h3 a{color:var(--t-900)}
.guia-item h3 a:hover{color:var(--marca)}
.guia-razon{margin:0 0 .4rem;color:var(--t-400);font-size:.85rem}
.guia-precio{font-weight:700;margin:0 0 .55rem;font-size:1.02rem;color:var(--t-900)}
.guia-item .btn-comprar{width:auto;display:inline-flex}

/* --- 12b. Artículos ------------------------------------------------------ */
.art-rejilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.art-card{display:flex;flex-direction:column;background:var(--papel-2);
  border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .2s}
.art-card:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--linea-fuerte)}
.art-card-img img{width:100%;height:170px;object-fit:cover}
.art-card-cuerpo{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1}
.art-card h3{font-family:var(--fuente-tit);font-size:1.1rem;line-height:1.28;margin:.15rem 0 .5rem}
.art-card h3 a{color:var(--t-900)}
.art-card h3 a:hover{color:var(--marca)}
.art-card-resumen{color:var(--t-500);font-size:.9rem;margin:0 0 1rem;flex:1}
.art-card-mas{font-size:.87rem;font-weight:600}
.art-meta{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:0 0 .35rem;
  font-size:.75rem;color:var(--t-400)}
.chip-cat{background:var(--marca-clara);color:var(--marca);border:1px solid var(--marca-borde);
  margin:0;font-size:.68rem}

.articulo{max-width:1180px}
.art-cab{max-width:44rem;margin-bottom:var(--s3)}
.art-cab h1{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:.35em}
.art-resumen{font-size:1.1rem;color:var(--t-500);line-height:1.6;margin:0}
.art-portada{width:100%;max-height:430px;object-fit:cover;border-radius:var(--r-lg);
  border:1px solid var(--linea);margin-bottom:var(--s4)}

/* Medida de lectura: mas de ~70 caracteres por linea se lee mal en texto largo */
.art-cuerpo{max-width:44rem;font-size:1.045rem;line-height:1.78;color:var(--t-700)}
.art-cuerpo .entradilla{font-size:1.14rem;line-height:1.68;color:var(--t-900);
  padding-left:1.1rem;border-left:3px solid var(--marca);margin-bottom:var(--s4)}
.art-cuerpo h2{font-size:1.55rem;margin:2.3rem 0 .7rem;scroll-margin-top:90px}
.art-cuerpo h3{font-family:var(--fuente-tit);font-size:1.18rem;font-weight:600;margin:1.7rem 0 .5rem}
.art-cuerpo ul,.art-cuerpo ol{padding-left:1.3rem;margin-bottom:1.2em}
.art-cuerpo li{margin-bottom:.55em}
.art-cuerpo b{color:var(--t-900);font-weight:650}
.art-cuerpo a{text-decoration:underline;text-underline-offset:3px}
.separador{border:0;border-top:1px solid var(--linea);margin:2.6rem 0}

.dato-clave{background:linear-gradient(160deg,var(--marca-clara),var(--papel-2));
  border:1px solid var(--marca-borde);border-radius:var(--r-md);
  padding:1.3rem 1.5rem;margin:1.9rem 0}
.dato-clave h3{margin:0 0 .45rem;font-size:1.03rem;color:var(--marca);font-family:var(--fuente);
  font-weight:700;letter-spacing:.01em}
.dato-clave p:last-child{margin-bottom:0}

.tabla-fechas{width:100%;border-collapse:collapse;font-size:.93rem;margin:1.6rem 0;
  display:block;overflow-x:auto}
.tabla-fechas th,.tabla-fechas td{padding:.7rem .9rem;text-align:left;
  border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-fechas thead th{background:var(--papel-3);font-size:.79rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--t-500);font-weight:700}
.tabla-fechas td:first-child{white-space:nowrap;color:var(--t-900);font-weight:600}

.art-fuentes{max-width:44rem;margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--linea)}
.art-fuentes h2{font-size:1.15rem}
.art-fuentes ul{padding-left:1.2rem;font-size:.9rem}
.art-fuentes li{margin-bottom:.45rem}
.art-relacionados{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--linea)}

/* --- 13. Comparador ------------------------------------------------------ */
.comp-selectores{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));
  margin-bottom:var(--s4)}
.comp-selectores select{
  width:100%;padding:.72rem .85rem;border:1px solid var(--linea-fuerte);border-radius:var(--r-sm);
  font-family:inherit;font-size:.875rem;background:var(--papel-3);color:var(--t-700);cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%236b7b8d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:12px;
  padding-right:2rem;
}
.comp-selectores select:focus{border-color:var(--marca)}
/* Un desplegable ya elegido lleva su color en el borde izquierdo, el mismo que
   su línea en el gráfico y su columna en la tabla. */
.comp-selectores select.comp-elegido{font-weight:600;color:var(--t-900)}
.comp-punto{display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:.4rem;vertical-align:middle;flex:0 0 auto}
/* El desplegable nativo hereda el fondo del sistema en algunos navegadores y
   quedaba texto claro sobre blanco. Se fuerzan los colores de las opciones. */
.comp-selectores select option,
.comp-selectores select optgroup{background:var(--papel-2);color:var(--t-700)}
.comp-selectores select optgroup{color:var(--marca);font-weight:700;font-style:normal}
.comp-selectores select option{padding:.3rem}
.comp-ayuda{font-size:.84rem;color:var(--t-400);margin:-.6rem 0 1.4rem}
.comp-salida{overflow-x:auto;-webkit-overflow-scrolling:touch}
.comp-radar-caja{display:flex;justify-content:center;margin-bottom:var(--s4)}
.comp-leyenda{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-bottom:var(--s3);font-size:.84rem}
.comp-leyenda span{display:inline-flex;align-items:center;gap:.4rem;color:var(--t-500)}
.comp-leyenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.tabla-comp{width:100%;border-collapse:separate;border-spacing:0;font-size:.885rem;min-width:640px}
.tabla-comp th,.tabla-comp td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-comp thead th{background:var(--papel-2);position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--linea-fuerte);font-size:.85rem;font-weight:650}
.tabla-comp tbody th{font-weight:450;color:var(--t-500);width:180px;background:var(--papel)}
.tabla-comp .mejor{background:var(--marca-clara);font-weight:700;color:var(--marca-osc);
  box-shadow:inset 2px 0 0 var(--marca)}
.comp-img{height:78px;object-fit:contain;margin-bottom:.5rem}
.comp-vacio{text-align:center;padding:var(--s5) var(--s2);border:1px dashed var(--linea-fuerte);
  border-radius:var(--r-md);background:var(--papel-2);color:var(--t-400)}

/* --- 14. Filtros de categoria -------------------------------------------- */
.filtros{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;margin-bottom:var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--linea)}
.filtros label{font-size:.83rem;color:var(--t-400);font-weight:500}
.filtros select{padding:.5rem .8rem;border:1px solid var(--linea-fuerte);border-radius:var(--r-sm);
  font-family:inherit;font-size:.86rem;background:var(--papel-3);color:var(--t-700);cursor:pointer}
.filtros select:focus{border-color:var(--marca)}

/* --- 14b. Mapa de autonomía ---------------------------------------------- */
.mapa-bloque{padding-block:var(--s4);border-top:1px solid var(--linea)}
.mapa-barra{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-bottom:.9rem}
.mapa-buscar{display:flex;gap:.4rem;flex:1;min-width:230px}
.mapa-buscar input{flex:1;padding:.62rem .85rem;border:1px solid var(--linea-fuerte);
  border-radius:var(--r-sm);font-family:inherit;font-size:.88rem}
.mapa-buscar input:focus{border-color:var(--marca);outline:none}
.segmentado{display:inline-flex;background:var(--papel-3);border-radius:var(--r-sm);padding:3px;gap:2px}
.segmentado button{
  border:0;background:transparent;padding:.5rem .9rem;border-radius:6px;cursor:pointer;
  font-size:.84rem;font-weight:600;color:var(--t-500);transition:background .15s,color .15s;
}
.segmentado button[aria-pressed="true"]{background:var(--papel);color:var(--t-900);box-shadow:var(--sombra-1)}
.mapa-buscar label{align-self:center;font-size:.82rem;font-weight:650;color:var(--t-400);
  min-width:46px;text-transform:uppercase;letter-spacing:.06em}
.mapa-destino{margin-bottom:.9rem}

.mapa-veredicto:not(:empty){margin-top:1rem;padding:1.1rem 1.3rem;background:var(--papel-2);
  border:1px solid var(--linea);border-radius:var(--r-md)}
.mapa-veredicto h3{margin:0 0 .8rem;font-family:var(--fuente-tit);font-size:1.15rem}
.veredictos{list-style:none;padding:0;margin:0 0 .6rem;display:grid;gap:.6rem}
.veredictos li{display:grid;gap:.15rem;padding:.75rem .95rem;border-radius:var(--r-sm);
  border-left:3px solid var(--linea-fuerte);background:var(--papel-3);font-size:.9rem}
.veredictos b{color:var(--t-900)}
.v-estado{font-weight:700;font-size:.92rem}
.v-cifra{font-size:.8rem;color:var(--t-400)}
.v-bien{border-left-color:var(--marca);background:var(--marca-clara)}
.v-bien .v-estado{color:var(--marca)}
.v-justo{border-left-color:var(--alerta);background:var(--alerta-fondo)}
.v-justo .v-estado{color:var(--alerta)}
.v-mal{border-left-color:var(--malo);background:var(--malo-fondo)}
.v-mal .v-estado{color:var(--malo)}

.mapa-lienzo{
  height:clamp(320px,52vh,470px);border-radius:var(--r-md);
  border:1px solid var(--linea);background:var(--papel-3);z-index:0;
}
.mapa-leyenda{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem;font-size:.84rem;color:var(--t-500)}
.mapa-leyenda span{display:inline-flex;align-items:center;gap:.42rem}
.mapa-leyenda i{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.mapa-leyenda b{color:var(--alerta);font-weight:600}
.mapa-aviso:not(:empty){margin-top:.7rem;padding:.65rem .9rem;background:var(--alerta-fondo);
  border:1px solid var(--alerta-borde);border-radius:var(--r-sm);color:var(--alerta);font-size:.83rem}
.leaflet-container{font-family:var(--fuente)}
.leaflet-control-attribution{font-size:.66rem!important;background:rgba(11,14,19,.8)!important;color:var(--t-400)!important}
.leaflet-control-attribution a{color:var(--t-500)!important}
.leaflet-bar a{background:var(--papel-2)!important;color:var(--t-700)!important;border-color:var(--linea)!important}
.leaflet-bar a:hover{background:var(--papel-3)!important}

/* --- 14bis. Planificador de ruta ----------------------------------------- */
.plan-form{background:var(--papel-2);border:1px solid var(--linea);
  border-radius:var(--r-md);padding:1.4rem 1.5rem;margin-bottom:1.2rem}
.plan-campos{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-bottom:1rem}
.plan-opciones{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-bottom:1.2rem}
.plan-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;
  font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--t-400)}
.plan-form input,.plan-form select{
  padding:.68rem .85rem;border:1px solid var(--linea-fuerte);border-radius:var(--r-sm);
  background:var(--papel-3);color:var(--t-900);font-family:inherit;font-size:.92rem;
  font-weight:400;text-transform:none;letter-spacing:0}
.plan-form input:focus,.plan-form select:focus{border-color:var(--marca);outline:none}
.plan-form option{background:var(--papel-2);color:var(--t-700)}

.plan-resumen{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  background:var(--marca-clara);border:1px solid var(--marca-borde);
  border-radius:var(--r-md);padding:1.2rem 1.3rem;margin-bottom:1.6rem}
.plan-cifra{text-align:center}
.plan-cifra b{display:block;font-family:var(--fuente-tit);font-size:1.5rem;color:var(--t-900);line-height:1.1}
.plan-cifra span{font-size:.72rem;color:var(--t-400);text-transform:uppercase;letter-spacing:.05em}
.plan-tit{font-size:1.3rem;margin-bottom:1rem}
.plan-lista{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.plan-item{display:grid;grid-template-columns:104px 1fr;gap:1.1rem;align-items:center;
  background:var(--papel-2);border:1px solid var(--linea);border-left:4px solid var(--linea-fuerte);
  border-radius:var(--r-md);padding:1rem 1.2rem}
.plan-item.v-bien{border-left-color:var(--marca)}
.plan-item.v-justo{border-left-color:var(--alerta)}
.plan-img{width:104px;height:104px;object-fit:contain;background:var(--panel-foto);
  border-radius:var(--r-sm);padding:.4rem}
.plan-datos h3{font-size:1rem;margin:0 0 .3rem}
.plan-datos h3 a{color:var(--t-900)}
.plan-veredicto{margin:0 0 .3rem;font-weight:700;font-size:.95rem;color:var(--marca)}
.v-justo .plan-veredicto{color:var(--alerta)}
.plan-veredicto span{font-weight:400;font-size:.83rem;color:var(--t-400)}
.plan-aviso{margin:0 0 .3rem;font-size:.84rem;color:var(--alerta)}
.plan-coste{margin:0 0 .6rem;font-size:.88rem;color:var(--t-500)}
.plan-datos .btn-comprar{width:auto;display:inline-flex}
#plan-mapa{margin-top:1.4rem}
@media (max-width:600px){
  .plan-item{grid-template-columns:1fr}
  .plan-img{width:100%;height:130px}
}

/* --- 14c. Buscador de talleres ------------------------------------------- */
.talleres-barra{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.talleres-barra .mapa-buscar{flex:1;min-width:250px}
.talleres-estado{font-size:.88rem;margin:0 0 1rem;min-height:1.2em}
.talleres-estado.cargando{color:var(--t-500)}
.talleres-estado.error{color:var(--alerta);background:var(--alerta-fondo);
  border:1px solid var(--alerta-borde);border-radius:var(--r-sm);padding:.6rem .9rem}
.talleres-panel{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:start}
.talleres-panel .mapa-lienzo{height:clamp(360px,60vh,560px);position:sticky;top:88px}
.talleres-col{max-height:clamp(360px,60vh,560px);overflow-y:auto;padding-right:.3rem}
.talleres-resumen{font-size:.88rem;color:var(--t-500);margin:0 0 .8rem}
.talleres-lista{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.taller{display:grid;grid-template-columns:auto 1fr;gap:.9rem;background:var(--papel-2);
  border:1px solid var(--linea);border-radius:var(--r-md);padding:.9rem 1rem;
  cursor:pointer;transition:border-color .18s,background .18s}
.taller:hover{border-color:var(--marca-borde);background:var(--papel-3)}
.taller-num{width:26px;height:26px;border-radius:50%;background:var(--papel-3);
  color:var(--t-500);display:grid;place-items:center;font-size:.78rem;font-weight:700}
.taller h3{margin:0 0 .3rem;font-size:.97rem}
.taller-meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 .35rem}
.taller-km{font-size:.8rem;color:var(--marca);font-weight:650}
.taller-meta .chip{margin:0;font-size:.66rem}
.chip-nd{background:var(--papel-3);color:var(--t-400);border:1px solid var(--linea-fuerte)}
/* Niveles del buscador de talleres: verde lleno = tienda de patinetes,
   verde suave = bici con taller, gris = bici sin confirmar, azul = motos */
.chip-n1{background:var(--marca);color:#1c1200;border:1px solid var(--marca)}
.chip-n2{background:var(--marca-clara);color:var(--marca);border:1px solid var(--marca-borde)}
.chip-n3{background:var(--papel-3);color:var(--t-500);border:1px solid var(--linea-fuerte)}
.chip-n4{background:#132033;color:#7fb0ff;border:1px solid #24395a}
.taller-dir,.taller-horario{margin:0 0 .25rem;font-size:.83rem;color:var(--t-500)}
.taller-acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.taller-accion{font-size:.79rem;padding:.32rem .65rem;border-radius:99px;
  background:var(--papel-3);border:1px solid var(--linea-fuerte);color:var(--t-700)}
.taller-accion:hover{border-color:var(--marca);color:var(--marca);text-decoration:none}
@media (max-width:860px){
  .talleres-panel{grid-template-columns:1fr}
  .talleres-panel .mapa-lienzo{position:static;height:340px}
  .talleres-col{max-height:none;overflow:visible}
}

/* --- 15. Pie ------------------------------------------------------------- */
.pie{background:var(--papel-2);border-top:1px solid var(--linea);color:var(--t-500);padding-block:var(--s5) var(--s4);margin-top:var(--s6)}
.pie-marca{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fuente-tit);
  font-size:1.08rem;color:var(--t-900);margin-bottom:.9rem}
/* Al quitar la barra de arriba, este pasa a ser el aviso principal de
   afiliados: por eso va destacado y no en letra pequeña. El texto legal
   completo va justo debajo, y cada botón de compra lleva además el suyo. */
.pie-destacado{background:var(--marca-clara);border:1px solid var(--marca-borde);
  border-radius:var(--r-sm);padding:.8rem 1.1rem;margin:0 0 .9rem;
  font-size:.9rem;color:var(--t-700);max-width:78ch}
.pie-destacado b{color:var(--marca)}
.pie-aviso{font-size:.8rem;max-width:78ch;margin:0 0 1.3rem;line-height:1.65}
.pie-nav{display:flex;gap:1.3rem;flex-wrap:wrap;margin-bottom:1.1rem;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.09)}
.pie-nav a{font-size:.85rem;color:var(--t-700)}
.pie-nav a:hover{color:var(--marca)}
.pie-firma{font-size:.77rem;color:var(--t-400);margin:0}

/* --- 16. Responsive ------------------------------------------------------ */
@media (max-width:900px){
  .ficha-top{grid-template-columns:1fr}
  .ficha-galeria{position:static}
  .ficha-img{height:320px;padding:1.1rem}
}
@media (max-width:640px){
  .cabecera-fila{min-height:auto;padding-block:.7rem;flex-direction:column;align-items:flex-start;gap:.5rem}
  .nav{gap:.15rem;margin-left:-.72rem}
  /* 44 px minimos de zona pulsable (WCAG 2.5.5). Medido en un iPhone:
     los enlaces del menu quedaban en 34 px de alto y se fallaba el toque.
     Se gana altura con padding, sin tocar el tamano de letra. */
  .nav a{padding:.7rem .6rem;font-size:.85rem;
    min-height:44px;display:inline-flex;align-items:center}
  .pie-nav a{padding:.5rem 0;min-height:44px;display:inline-flex;align-items:center}
  .hero-datos{gap:1.2rem}
  .hero-dato b{font-size:1.5rem}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
  .tarjeta-img{padding:.7rem}
  .tarjeta-img img{height:126px}
  .tarjeta-cuerpo{padding:0 .8rem .8rem}
  .tarjeta-specs b{font-size:.8rem}
  .guia-item{grid-template-columns:auto 1fr;gap:.8rem}
  .guia-foto{display:none}
  .ficha-precio{font-size:1.85rem}
}

/* --- 17. Accesibilidad --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .tarjeta:hover{transform:none}
  .tarjeta:hover .tarjeta-img img{transform:none}
}
@media print{
  .cabecera,.aviso-barra,.pie,.btn-comprar,.btn-comparar{display:none}
}

/* En movil, el boton de compra pequeno (tarjetas y "parecidos") se quedaba en
   38 px de alto. Es el boton que da la comision: por debajo de 44 px se falla
   el toque y se pierde el clic. */
@media (max-width:760px){
  .btn-comprar.btn-sm,.btn-comparar{min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
}

/* --- Microfono para dictar en los campos de direccion -------------------
   El boton lo inserta voz.js SOLO si el navegador sabe reconocer voz, asi que
   este estilo puede no llegar a usarse nunca en Firefox o Safari. */
.campo-voz{position:relative;display:block;flex:1 1 auto;min-width:0}
.campo-voz input{width:100%;padding-right:2.9rem}
.btn-voz{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--t-400);padding:0;
  transition:background .15s,color .15s}
.btn-voz svg{fill:currentColor}
.btn-voz:hover{background:var(--papel-3);color:var(--t-900)}
.btn-voz:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
/* Escuchando: rojo y latido, para que se vea que el microfono esta abierto */
.btn-voz.escuchando{background:#d8443a;color:#fff;animation:voz-late 1.1s ease-in-out infinite}
@keyframes voz-late{0%,100%{box-shadow:0 0 0 0 rgba(216,68,58,.55)}
                    70%{box-shadow:0 0 0 9px rgba(216,68,58,0)}}
input.dictando{border-color:#d8443a}
@media (prefers-reduced-motion:reduce){
  .btn-voz.escuchando{animation:none}
}
@media (max-width:760px){
  /* 44 px de zona pulsable tambien aqui */
  .btn-voz{width:44px;height:44px;right:.2rem}
  .campo-voz input{padding-right:3.2rem}
}

/* --- Buscador de la cabecera -------------------------------------------
   Estaba el catalogo entero y ninguna forma de buscar en el. Los datos ya
   viajan en la pagina, asi que buscar no cuesta ni una peticion. */
/* En reposo es solo una lupa. El menu tiene 8 enlaces y el contenedor 1180 px
   utiles: con un campo abierto siempre, "Como elegimos" se caia a una segunda
   linea. Al pulsar la lupa el campo se despliega FLOTANDO sobre la cabecera,
   sin empujar el menu (si empujaba, el menu se partia mientras buscabas). */
.buscador{position:relative;order:3;margin-left:auto;display:flex;
  align-items:center;justify-content:flex-end;width:40px;flex:0 0 40px}
.busc-lupa{width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--linea);border-radius:99px;
  background:var(--papel-2);color:var(--t-500);cursor:pointer;padding:0;
  flex:0 0 auto;transition:background .15s,color .15s}
.busc-lupa:hover{background:var(--papel-3);color:var(--t-900)}
.busc-lupa svg{fill:currentColor}
.buscador .campo-voz,.buscador input{position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:0;opacity:0;pointer-events:none}
.buscador input{padding:0;border:0;background:var(--papel-2);color:var(--t-900);
  font-size:.88rem;font-family:inherit;border-radius:99px;
  transition:width .28s cubic-bezier(.16,.84,.44,1),opacity .2s,padding .28s}
.buscador.abierto .campo-voz{width:290px;opacity:1;pointer-events:auto}
.buscador.abierto input{position:relative;top:auto;transform:none;
  width:100%;padding:.55rem 2.9rem .55rem .95rem;
  border:1px solid var(--marca);opacity:1;pointer-events:auto}
/* Con el campo abierto la lupa sobra: el sitio de la derecha es del microfono */
.buscador.abierto .busc-lupa{display:none}
.buscador input::placeholder{color:var(--t-400)}
.buscador input:focus{outline:none}
/* La "x" que Chrome pinta en los campos de busqueda se comia el sitio del
   microfono y ademas duplicaba una funcion que ya hace la tecla Escape. */
.buscador input::-webkit-search-cancel-button{display:none}
.busc-panel{position:absolute;top:calc(100% + .45rem);right:0;width:330px;
  max-width:min(330px,calc(100vw - 2rem));z-index:60;
  background:var(--papel-2);border:1px solid var(--linea);
  border-radius:var(--r-md);box-shadow:0 18px 44px -16px rgba(0,0,0,.8);
  overflow:hidden;max-height:min(70vh,430px);overflow-y:auto}
.busc-panel[hidden]{display:none}
.busc-item{display:grid;grid-template-columns:1fr auto;gap:.1rem .7rem;
  padding:.6rem .85rem;border-bottom:1px solid var(--linea);text-decoration:none}
.busc-item:last-child{border-bottom:0}
.busc-item:hover,.busc-item.activo{background:var(--papel-3)}
.busc-marca{grid-column:1;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--t-400)}
.busc-nombre{grid-column:1;font-size:.86rem;color:var(--t-900);line-height:1.35}
.busc-precio{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-weight:700;color:var(--marca);font-size:.9rem;white-space:nowrap}
.busc-vacio{margin:0;padding:.9rem;font-size:.86rem;color:var(--t-500)}

@media (max-width:900px){
  /* En movil no hay sitio para desplegables: el campo va siempre abierto,
     en su propia linea debajo del logo. */
  .buscador{order:3;flex:1 1 100%;width:auto;margin:.5rem 0 0;
    justify-content:stretch}
  .buscador .campo-voz,.buscador.abierto .campo-voz{position:relative;
    right:auto;top:auto;transform:none;width:100%;opacity:1;pointer-events:auto}
  .buscador input,.buscador.abierto input{position:relative;top:auto;
    transform:none;width:100%;opacity:1;pointer-events:auto;
    padding:.7rem 3.4rem .7rem .95rem;font-size:16px;
    border:1px solid var(--linea)}
  .busc-lupa{display:none}
  .busc-panel{width:auto;left:0;right:0;max-width:none}  /* 16px: evita que el
      movil haga zoom al enfocar el campo, que descoloca toda la pagina */
}

/* ── Escuchar la pagina en voz alta ────────────────────────────────────────
   Va justo debajo del titular: es donde se decide si leer o escuchar.
   Discreto de serie; solo canta cuando esta sonando. Los colores salen de las
   variables del tema oscuro, no van a mano. */
.leer-barra{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  margin:.9rem 0 1.4rem}
/* display:flex le gana al hidden del navegador. Sin esta linea, esconder la
   barra en el comparador no hacia absolutamente nada. */
.leer-barra[hidden]{display:none}
/* El "Parar" flotante: aparece solo cuando el boton de arriba se ha ido de la
   pantalla. Se queda a la izquierda porque abajo a la derecha ya vive el
   avatar del tour (avatar-tour.css, right:20px) y no se pueden pisar. */
.leer-flotante{position:fixed;left:16px;bottom:20px;z-index:55;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem 1rem;border-radius:999px;cursor:pointer;
  background:var(--marca);color:#12171f;border:0;
  font:inherit;font-size:.88rem;font-weight:700;line-height:1;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  animation:lf-entra .22s ease}
.leer-flotante[hidden]{display:none}
.leer-flotante:hover{background:var(--marca-osc)}
.leer-flotante:focus-visible{outline:2px solid var(--t-900);outline-offset:3px}
.leer-flotante .lf-icono{display:inline-flex}
@keyframes lf-entra{from{opacity:0;transform:translateY(8px)}
                    to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.leer-flotante{animation:none}}
.btn-leer{display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .95rem;border-radius:999px;cursor:pointer;
  background:var(--papel-2);color:var(--t-800);
  border:1px solid var(--linea-fuerte);
  font:inherit;font-size:.9rem;font-weight:600;line-height:1;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn-leer:hover{background:var(--papel-3);border-color:var(--marca-borde);
  color:var(--t-900)}
.btn-leer:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.btn-leer .bl-icono{display:inline-flex;color:var(--marca)}
.btn-leer .bl-paso{font-variant-numeric:tabular-nums;font-weight:500;
  font-size:.8rem;opacity:.75}
/* --t-300 sobre este fondo da 3.3:1 y la nota se volvia invisible (medido en
   la web publicada). --t-400 son 4.96:1: cumple el minimo y sigue siendo una
   nota discreta, sin competir con el boton de al lado (--t-500 daba 7.5:1 y
   cantaba mas que el propio boton). */
.leer-nota{font-size:.78rem;color:var(--t-400)}

/* Elegir voz. Solo sale si el aparato tiene mas de una en espanol: la calidad
   la pone el dispositivo, no la web, asi que lo unico util que se puede
   ofrecer es probar las suyas. */
.leer-voz{font:inherit;font-size:.82rem;
  padding:.34rem 1.7rem .34rem .6rem;border-radius:999px;cursor:pointer;
  color:var(--t-700);background-color:var(--papel-2);
  border:1px solid var(--linea-fuerte);
  /* La flechita va en el fondo: la del sistema se pinta a su aire en cada
     navegador y en oscuro sale casi invisible. */
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%2393a3b1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;
  background-size:11px}
.leer-voz[hidden]{display:none}
.leer-voz:hover{border-color:var(--marca-borde);color:var(--t-900)}
.leer-voz:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
/* El desplegable desplegado lo pinta el sistema: sin esto, en Windows sale
   texto claro sobre fondo claro y no se lee ninguna opcion. */
.leer-voz option{background:var(--papel-2);color:var(--t-900)}

/* Sonando: el boton se tine de marca y las ondas del icono laten. Con dos
   ondas desfasadas se lee "esta saliendo sonido" sin ninguna palabra. */
.btn-leer.sonando{background:var(--marca-clara);border-color:var(--marca);
  color:var(--marca)}
.btn-leer.sonando .bl-icono{color:var(--marca)}
.btn-leer.sonando .bl-onda{animation:bl-late 1.15s ease-in-out infinite}
.btn-leer.sonando .bl-onda2{animation:bl-late 1.15s ease-in-out .28s infinite}
@keyframes bl-late{0%,100%{opacity:.25}50%{opacity:1}}

/* Por donde va la lectura. Un filo naranja a la izquierda y un fondo apenas
   insinuado: se sigue el hilo sin que el texto deje de leerse comodo. */
.leyendo-ahora{position:relative;border-radius:var(--r-sm);
  background:var(--marca-clara);
  box-shadow:-3px 0 0 0 var(--marca);
  /* El aire se compensa con margen negativo: si no, el texto da un salto
     cada vez que la lectura avanza de parrafo. */
  padding:.35rem .7rem;margin:-.35rem -.7rem;
  transition:background .25s ease}
tr.leyendo-ahora{box-shadow:none;outline:2px solid var(--marca);
  outline-offset:-2px}

/* Quien pide menos movimiento no ve el latido; el color sigue diciendolo. */
@media (prefers-reduced-motion:reduce){
  .btn-leer.sonando .bl-onda,
  .btn-leer.sonando .bl-onda2{animation:none;opacity:1}
  .leyendo-ahora{transition:none}
}

/* ══ "Ayúdame a elegir": la encuesta con el copiloto ══════════════════════
   Va con web/encuesta.js. Los colores salen de las variables del tema: si
   algún día cambia la paleta de la web, esto cambia con ella. */
.encuesta-capa{position:fixed;inset:0;z-index:120;display:flex;
  align-items:center;justify-content:center;padding:1rem;
  background:rgba(4,6,10,.72);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease}
.encuesta-capa.abierta{opacity:1}
body.encuesta-abierta{overflow:hidden}

.encuesta-caja{position:relative;width:min(720px,100%);
  max-height:min(92vh,860px);overflow:auto;
  background:var(--papel-2);border:1px solid var(--linea-fuerte);
  border-radius:var(--r-lg);box-shadow:var(--sombra-3);
  padding:1.5rem 1.5rem 1.75rem;
  transform:translateY(14px) scale(.98);transition:transform .24s ease}
.encuesta-capa.abierta .encuesta-caja{transform:none}

.enc-cerrar{position:absolute;top:.6rem;right:.7rem;z-index:2;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:transparent;border:0;color:var(--t-500);
  font-size:1.5rem;line-height:1}
.enc-cerrar:hover{background:var(--papel-3);color:var(--t-900)}

/* ── la pista por la que avanza el patinete ── */
.enc-pista{position:relative;height:4px;border-radius:999px;
  background:var(--papel-3);margin:.4rem 0 2.4rem}
.enc-avance{height:100%;width:0;border-radius:999px;
  background:var(--marca);transition:width .35s ease}
.enc-patin{position:absolute;top:-14px;left:0;font-size:20px;
  transform:translateX(-50%);transition:left .35s ease}

/* ── el copiloto ── */
.enc-copiloto{position:relative;height:64px;margin:-.6rem 0 .5rem;
  display:flex;align-items:center;justify-content:center}
.enc-cara{font-size:42px;line-height:1;display:inline-block;
  transform-origin:50% 80%}
.enc-pega{position:absolute;left:50%;top:2px;font-size:22px;opacity:0;
  pointer-events:none}
.enc-pega.suelta{animation:enc-pega .85s ease-out}
@keyframes enc-pega{
  0%{opacity:0;transform:translate(-50%,6px) scale(.5)}
  30%{opacity:1;transform:translate(-50%,-16px) scale(1.2)}
  100%{opacity:0;transform:translate(-50%,-42px) scale(1)}}

.enc-bocadillo{position:absolute;left:50%;bottom:-6px;
  transform:translateX(-50%) translateY(6px);
  max-width:min(420px,88%);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
  padding:.34rem .8rem;border-radius:999px;
  background:var(--papel-3);border:1px solid var(--linea-fuerte);
  color:var(--t-800);font-size:.86rem;font-weight:600;
  opacity:0;transition:opacity .18s ease, transform .18s ease}
.enc-copiloto.hablando .enc-bocadillo{opacity:1;transform:translateX(-50%)}

/* Los siete gestos. Exagerados a propósito: es un dibujo animado, no una
   interfaz seria. Se ríen del TRABAJO que da cada respuesta, nunca de quien
   contesta: ninguna respuesta es mala, solo unas dan más faena que otras. */
@keyframes g-asiente{0%,100%{transform:rotate(0) translateY(0)}
  30%{transform:rotate(6deg) translateY(4px)}
  60%{transform:rotate(-3deg) translateY(-2px)}}
@keyframes g-salta{0%,100%{transform:translateY(0) scale(1)}
  25%{transform:translateY(-20px) scale(1.14) rotate(-8deg)}
  50%{transform:translateY(0) scale(.92)}
  70%{transform:translateY(-9px) scale(1.05)}}
@keyframes g-acelera{0%{transform:translateX(0)}
  25%{transform:translateX(-14px) rotate(-10deg)}
  60%{transform:translateX(22px) rotate(9deg) scale(1.08)}
  100%{transform:translateX(0)}}
@keyframes g-relaja{0%,100%{transform:rotate(0)}
  40%{transform:rotate(-12deg) translateY(3px) scale(1.03)}
  70%{transform:rotate(-6deg)}}
@keyframes g-ladea{0%,100%{transform:rotate(0)}
  35%{transform:rotate(-18deg)}70%{transform:rotate(-11deg)}}
@keyframes g-tiembla{0%,100%{transform:translateX(0)}
  10%,30%,50%,70%{transform:translateX(-6px) rotate(-4deg)}
  20%,40%,60%,80%{transform:translateX(6px) rotate(4deg)}}
@keyframes g-explota{0%{transform:scale(1)}
  20%{transform:scale(1.35) rotate(-12deg)}
  40%{transform:scale(.86) rotate(10deg)}
  60%{transform:scale(1.22) rotate(-7deg)}
  80%{transform:scale(.96) rotate(3deg)}
  100%{transform:scale(1)}}
.enc-cara.g-asiente{animation:g-asiente .62s ease}
.enc-cara.g-salta{animation:g-salta .78s cubic-bezier(.28,.84,.42,1)}
.enc-cara.g-acelera{animation:g-acelera .72s ease}
.enc-cara.g-relaja{animation:g-relaja .62s ease}
.enc-cara.g-ladea{animation:g-ladea .64s ease}
.enc-cara.g-tiembla{animation:g-tiembla .8s ease}
.enc-cara.g-explota{animation:g-explota .98s cubic-bezier(.3,1.4,.5,1)}

/* ── preguntas ── */
.enc-cuenta{margin:0;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--marca);font-weight:700}
.enc-cuerpo h2{margin:.35rem 0 .3rem;font-size:clamp(1.35rem,3.4vw,1.85rem)}
.enc-pie{margin:0 0 1.15rem;color:var(--t-500);font-size:.92rem}

.enc-opciones{display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.enc-op{display:flex;align-items:center;gap:.8rem;text-align:left;
  padding:.9rem 1rem;border-radius:var(--r-md);cursor:pointer;
  background:var(--papel-3);border:1px solid var(--linea);
  color:var(--t-900);font:inherit;
  animation:enc-entra .3s ease both;
  transition:transform .14s ease,border-color .14s ease,background .14s ease}
@keyframes enc-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
.enc-op:hover{transform:translateY(-2px);border-color:var(--marca);
  background:var(--marca-clara)}
.enc-op:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.enc-op.elegida{border-color:var(--marca);background:var(--marca-clara);
  transform:scale(.97)}
.enc-icono{font-size:26px;line-height:1;flex:0 0 auto}
.enc-txt{font-weight:600;line-height:1.25}
.enc-txt small{display:block;font-weight:400;font-size:.8rem;
  color:var(--t-500);margin-top:.15rem}
.enc-atras{margin-top:1.1rem;background:none;border:0;cursor:pointer;
  color:var(--t-500);font:inherit;font-size:.88rem;padding:.3rem 0}
.enc-atras:hover{color:var(--t-900)}

/* ── calculando ── */
.enc-calculando{text-align:center;padding:2.2rem 0 2.6rem;color:var(--t-500)}
.enc-rueda{display:inline-block;font-size:40px;animation:enc-gira .9s linear infinite}
@keyframes enc-gira{to{transform:rotate(360deg)}}

/* ── resultado ── */
.enc-lista{display:grid;gap:.85rem;margin:1.1rem 0}
.enc-tarjeta{display:grid;grid-template-columns:104px 1fr;gap:.9rem;
  padding:.85rem;border-radius:var(--r-md);
  background:var(--papel-3);border:1px solid var(--linea);
  animation:enc-entra .35s ease both}
.enc-tarjeta:first-child{border-color:var(--marca-borde)}
.enc-medalla{grid-column:1/-1;font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;color:var(--marca)}
.enc-foto{display:block;background:var(--panel-foto);border-radius:var(--r-sm);
  padding:.35rem;align-self:start}
.enc-foto img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.enc-marca{margin:0;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t-500)}
.enc-datos h3{margin:.1rem 0 .3rem;font-size:1rem;line-height:1.3}
.enc-datos h3 a{color:var(--t-900);text-decoration:none}
.enc-datos h3 a:hover{color:var(--marca)}
.enc-precio{margin:0 0 .5rem;font-size:1.2rem;font-weight:700;color:var(--marca)}
.enc-razones,.enc-avisos{margin:0 0 .55rem;padding-left:1.05rem;
  font-size:.86rem;line-height:1.45}
.enc-razones{color:var(--t-700)}
.enc-avisos{color:var(--alerta)}
.enc-botones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.enc-amazon{display:inline-block;padding:.55rem 1rem;border-radius:var(--r-sm);
  background:var(--amazon);color:#12171f;font-weight:700;font-size:.9rem;
  text-decoration:none}
.enc-amazon:hover{background:var(--amazon-osc)}
.enc-ficha,.enc-otra{display:inline-block;padding:.55rem 1rem;
  border-radius:var(--r-sm);cursor:pointer;
  background:var(--papel-2);border:1px solid var(--linea-fuerte);
  color:var(--t-800);font:inherit;font-size:.9rem;font-weight:600;
  text-decoration:none}
.enc-ficha:hover,.enc-otra:hover{border-color:var(--marca);color:var(--t-900)}
.enc-legal{font-size:.78rem;color:var(--t-400);line-height:1.5;margin:.8rem 0 0}

@media (max-width:560px){
  .encuesta-caja{padding:1.1rem 1rem 1.4rem}
  .enc-tarjeta{grid-template-columns:76px 1fr}
  .enc-bocadillo{font-size:.8rem;white-space:normal;text-align:center}
}
/* Sin baile para quien ha pedido menos movimiento: la frase se sigue leyendo,
   que es donde está la gracia — lo que se quita es el mareo. */
@media (prefers-reduced-motion:reduce){
  .enc-cara,.enc-pega,.enc-rueda,.enc-op,.enc-tarjeta{animation:none!important}
  .encuesta-capa,.encuesta-caja,.enc-avance,.enc-patin{transition:none}
}