/* ============ Base ============ */
:root{
  --acento:#e0563b;
  --acento-suave:color-mix(in srgb,var(--acento) 12%,#fff);
  --fondo:#faf6f0; --papel:#ffffff; --tinta:#1f1b17; --suave:#6e655c; --linea:#e9e1d6;
  --verde:#1f9d6b; --rojo:#c8432c; --amarillo:#f5b301;
  --radio:16px; --sombra:0 1px 2px rgba(31,27,23,.05),0 8px 24px -12px rgba(31,27,23,.18);
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.55 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h2{font-size:1.45rem}
p{margin:0 0 1em}
.saltar{position:absolute;left:-999px;top:0;background:var(--tinta);color:#fff;padding:8px 12px;z-index:99}
.saltar:focus{left:8px}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px;border-radius:6px}

/* ============ Cabecera ============ */
.aviso-top{background:var(--tinta);color:#f3ece3;font-size:.78rem;text-align:center;padding:6px 16px}
.aviso-top a{color:#fff;font-weight:600}
.cab{background:var(--papel);border-bottom:1px solid var(--linea);box-shadow:inset 0 3px 0 var(--acento);position:sticky;top:0;z-index:20}
.cab-in{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo{font-family:var(--serif);font-weight:700;font-size:1.3rem;text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.logo-punto{width:12px;height:12px;border-radius:50%;background:var(--acento);box-shadow:5px 5px 0 -1px var(--amarillo)}
.buscador{flex:1 1 220px;order:3;min-width:0}
.buscador input{width:100%;font:inherit;padding:10px 14px;border:1px solid var(--linea);border-radius:999px;background:var(--fondo)}
.cab-link{margin-left:auto;font-weight:600;font-size:.92rem;text-decoration:none;padding:8px 12px;border-radius:999px;background:var(--fondo)}
@media(min-width:760px){.buscador{order:0;max-width:420px}}
.cats{max-width:1180px;margin:0 auto;padding:0 16px 10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats a{flex:none;text-decoration:none;font-size:.9rem;padding:7px 13px;border-radius:999px;border:1px solid var(--linea);background:var(--papel);color:var(--tinta)}
.cats a.activa,.cats a:hover{background:var(--acento);color:#fff;border-color:var(--acento)}

/* ============ Hero ============ */
.hero{padding:40px 16px 16px}
.hero-in{max-width:1180px;margin:0 auto;background:linear-gradient(135deg,var(--papel) 55%,var(--acento-suave));border-radius:28px;padding:32px 24px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.hero-in::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--acento);opacity:.12}
.hero-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--acento);margin-bottom:.6em}
.hero h1{font-size:clamp(1.9rem,5.5vw,3.2rem);max-width:18ch}
.hero-txt{color:var(--suave);max-width:58ch;font-size:1.05rem}
.hero-tiendas{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-mas{font-size:.8rem;color:var(--suave)}
@media(min-width:760px){.hero-in{padding:56px 52px}}

/* ============ Secciones ============ */
.seccion{max-width:1180px;margin:0 auto;padding:28px 16px}
.seccion-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.seccion-cab h2{margin:0;padding-left:12px;border-left:4px solid var(--acento)}
.seccion-cab a{font-weight:600;color:var(--acento);text-decoration:none;font-size:.95rem}
.titulo-pag{font-size:clamp(1.7rem,5vw,2.6rem)}
.bajada{color:var(--suave);max-width:65ch}
.migas{font-size:.85rem;color:var(--suave);margin-bottom:10px}
.migas a{color:var(--suave)}
.vacio{background:var(--papel);border:1px dashed var(--linea);padding:24px;border-radius:var(--radio);color:var(--suave)}
.vacio-grande{text-align:center;padding:80px 16px}
.fecha{color:var(--suave);font-size:.88rem}

/* ============ Tarjetas ============ */
.rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:700px){.rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media(min-width:1000px){.rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tarjeta{background:var(--papel);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;transition:transform .2s}
.tarjeta:hover{transform:translateY(-3px)}
.tarjeta-img{position:relative;display:block;aspect-ratio:1;background:#fff;border-bottom:1px solid var(--linea)}
.tarjeta-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.tarjeta-cuerpo{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.tarjeta-meta{display:flex;justify-content:space-between;align-items:center;gap:6px}
.tarjeta h3{font-family:var(--sans);font-size:.92rem;font-weight:600;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta h3 a{text-decoration:none}
.tarjeta-val{font-size:.8rem;color:var(--suave)}
.tarjeta-precio{margin-top:auto;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tarjeta-precio strong{font-size:1.15rem}
.tarjeta-precio s,.precio-grande s{color:var(--suave);font-size:.85rem}
.chip-tienda{display:inline-block;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;letter-spacing:.01em}
.nota-mini{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 6px;border-radius:8px;background:var(--tinta);color:#fff;font-weight:700;font-size:.82rem}
.sello-desc{position:absolute;top:10px;left:10px;background:var(--acento);color:#fff;font-weight:700;font-size:.78rem;padding:4px 9px;border-radius:999px}
.comparar-check{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--suave);cursor:pointer;padding-top:4px;border-top:1px solid var(--linea)}
.comparar-check input{width:17px;height:17px;accent-color:var(--acento)}
.comparar-check.grande{font-size:.92rem;border:0;justify-content:center;padding-top:10px}

.estrellas{position:relative;display:inline-block;color:#d9d0c4;letter-spacing:1px;line-height:1;vertical-align:-1px}
.estrellas-llenas{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--amarillo)}

/* ============ Botones ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 .98rem var(--sans);padding:13px 20px;border-radius:12px;border:0;text-decoration:none;cursor:pointer;background:var(--tinta);color:#fff;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn-acento,.btn-comprar{background:var(--acento);color:#fff}
.btn-gris{background:#ece6dd;color:var(--suave);cursor:not-allowed}
.btn-chico{padding:9px 14px;font-size:.86rem;border-radius:10px}
.btn-bloque{width:100%}

/* ============ Categorías / comparativas ============ */
.rejilla-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.rejilla-cats{grid-template-columns:repeat(4,1fr)}}
.cat-card{background:var(--papel);border-radius:var(--radio);padding:18px;text-decoration:none;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:2px}
.cat-icono{font-size:1.8rem;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--acento-suave);margin-bottom:6px}
.cat-card small{color:var(--suave)}
.rejilla-comps{display:grid;gap:14px}
@media(min-width:700px){.rejilla-comps{grid-template-columns:repeat(3,1fr)}}
.comp-card{background:var(--papel);border-radius:var(--radio);padding:16px;text-decoration:none;box-shadow:var(--sombra)}
.comp-card-imgs{display:flex;gap:6px;margin-bottom:12px}
.comp-card-imgs img{flex:1;min-width:0;aspect-ratio:1;object-fit:contain;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:6px}
.comp-card h3{font-size:1.1rem;margin-bottom:4px}
.comp-card p{color:var(--suave);font-size:.88rem;margin:0}

/* ============ Filtros ============ */
.filtros{display:flex;flex-direction:column;gap:10px;margin:14px 0 20px}
.filtro-fila{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pastilla{font-size:.86rem;text-decoration:none;padding:7px 13px;border-radius:999px;border:1px solid var(--linea);background:var(--papel)}
.pastilla.on{background:var(--acento);border-color:var(--acento);color:#fff}
.orden{margin-left:auto;font-size:.86rem;color:var(--suave)}
.orden select{font:inherit;padding:7px 10px;border-radius:10px;border:1px solid var(--linea);background:var(--papel);margin-left:4px}

/* ============ Ficha ============ */
.ficha-top{display:grid;gap:24px}
@media(min-width:860px){.ficha-top{grid-template-columns:1.05fr 1fr;gap:40px;align-items:start}}
.galeria-main{position:relative;background:#fff;border-radius:22px;box-shadow:var(--sombra);aspect-ratio:1;overflow:hidden}
.galeria-main img{width:100%;height:100%;object-fit:contain;padding:20px}
.galeria-mini{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.galeria-mini button{flex:none;width:64px;height:64px;border:2px solid transparent;border-radius:12px;background:#fff;padding:4px;cursor:pointer}
.galeria-mini button.on{border-color:var(--acento)}
.galeria-mini img{width:100%;height:100%;object-fit:contain}
.ficha-meta{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.marca{font-size:.85rem;color:var(--suave);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.ficha h1{font-size:clamp(1.5rem,4.5vw,2.2rem)}
.ficha-val{color:var(--suave);font-size:.92rem}
.ficha-resumen{font-size:1.05rem}
.caja-compra{background:var(--papel);border-radius:20px;padding:18px;box-shadow:var(--sombra);margin:16px 0}
.precio-grande{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.precio-grande strong{font-size:2rem;font-family:var(--serif)}
.ahorro{background:#e5f5ee;color:var(--verde);font-weight:700;font-size:.8rem;padding:3px 9px;border-radius:999px}
.precio-nota{font-size:.8rem;color:var(--suave);margin:.4em 0 1em}
.ficha-resumen-caja{display:flex;gap:16px;align-items:center;background:var(--papel);border-radius:20px;padding:16px;border:1px solid var(--linea)}
.ficha-resumen-caja p{margin:0}
.nota-grande{flex:none;width:76px;height:76px;border-radius:20px;background:var(--tinta);color:#fff;display:grid;place-items:center;text-align:center;line-height:1}
.nota-grande span{font:700 1.8rem var(--serif)}
.nota-grande small{font-size:.66rem;opacity:.75;margin-top:-14px}
.ficha-cuerpo{display:grid;gap:18px;margin-top:28px}
.bloque{background:var(--papel);border-radius:22px;padding:22px;box-shadow:var(--sombra)}
.puntajes{display:grid;gap:18px;align-items:center}
@media(min-width:700px){.puntajes{grid-template-columns:320px 1fr}}
.radar{width:100%;max-width:320px;margin:0 auto;overflow:visible}
.radar-grid{fill:none;stroke:var(--linea);stroke-width:1}
.radar-area{fill-opacity:.18;stroke-width:2;stroke-linejoin:round}
.radar-label{font:600 11px var(--sans);fill:var(--suave)}
.barras{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.barras li{display:grid;grid-template-columns:110px 1fr 34px;align-items:center;gap:10px;font-size:.9rem}
.barras b{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--acento) var(--v),#efe8de var(--v))}
.barras em{font-style:normal;font-weight:700;text-align:right}
.pros-contras{display:grid;gap:18px}
@media(min-width:700px){.pros-contras{grid-template-columns:1fr 1fr}}
.lista-pro,.lista-contra{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.lista-pro li,.lista-contra li{padding-left:28px;position:relative}
.lista-pro li::before,.lista-contra li::before{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff}
.lista-pro li::before{content:"✓";background:var(--verde)}
.lista-contra li::before{content:"–";background:var(--rojo)}
.lista-pro.chica li,.lista-contra.chica li{font-size:.84rem;padding-left:22px}
.lista-pro.chica li::before,.lista-contra.chica li::before{width:16px;height:16px;font-size:.6rem}
.texto p{max-width:70ch}
.tabla-specs{width:100%;border-collapse:collapse}
.tabla-specs th,.tabla-specs td{text-align:left;padding:10px 4px;border-bottom:1px solid var(--linea);vertical-align:top;font-size:.94rem}
.tabla-specs th{color:var(--suave);font-weight:500;width:42%}
.veredicto{background:var(--tinta);color:#f6efe6}
.veredicto h2{color:#fff}
.veredicto p{font-size:1.08rem}
.compra-fija{position:fixed;left:0;right:0;bottom:0;background:var(--papel);border-top:1px solid var(--linea);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:15;box-shadow:0 -8px 24px -12px rgba(0,0,0,.2)}
.compra-fija div{display:flex;flex-direction:column;line-height:1.2}
.compra-fija strong{font-size:1.2rem}
.compra-fija small{color:var(--suave);font-size:.76rem}
body:has(.compra-fija) .pie{padding-bottom:90px}
@media(min-width:860px){.compra-fija{display:none}body:has(.compra-fija) .pie{padding-bottom:0}}

/* ============ Comparador ============ */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
.tabla-comp{border-collapse:separate;border-spacing:0;min-width:100%;background:var(--papel);border-radius:20px;box-shadow:var(--sombra);overflow:hidden}
.tabla-comp th,.tabla-comp td{padding:11px 12px;border-bottom:1px solid var(--linea);text-align:center;vertical-align:middle;font-size:.9rem;min-width:150px}
.tabla-comp tbody th{text-align:left;font-weight:600;color:var(--suave);font-size:.82rem;position:sticky;left:0;background:var(--papel);min-width:110px;max-width:130px;z-index:1;box-shadow:1px 0 0 var(--linea)}
.tabla-comp thead th{vertical-align:top;background:var(--papel);position:relative}
.tabla-comp thead th a{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.tabla-comp thead img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:12px;border:1px solid var(--linea);padding:6px}
.tabla-comp thead span{font-weight:600;font-size:.86rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tabla-comp .esquina{position:sticky;left:0;z-index:2;text-align:left;font-size:.78rem;color:var(--suave);font-weight:600}
.tabla-comp td.mejor{background:#e9f6ef;color:#145f42;font-weight:700}
.tabla-comp th.ganador,.tabla-comp th.actual{background:var(--acento-suave)}
.tabla-comp th.actual small{display:block;color:var(--acento);font-weight:700;margin-top:4px}
.tabla-comp .fila-sep th{background:var(--fondo);color:var(--tinta);font-family:var(--serif);font-size:1rem;position:static}
.tabla-comp td ul{text-align:left}
.tabla-comp.mini th,.tabla-comp.mini td{min-width:130px}
.tabla-comp.mini thead img{width:72px;height:72px}
.barra-mini{display:block;height:6px;border-radius:999px;background:#efe8de;margin:0 auto 5px;max-width:90px;overflow:hidden}
.barra-mini b{display:block;height:100%;background:var(--acento)}
.desc{color:var(--acento);font-weight:700}
.punto-serie{display:block;width:12px;height:12px;border-radius:50%;margin:8px auto 0}
.sello-ganador{display:inline-block;background:var(--amarillo);color:var(--tinta);font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;margin-bottom:6px}
.comp-radar{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;background:var(--papel);border-radius:22px;padding:18px;box-shadow:var(--sombra);margin-bottom:16px}
.leyenda{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.9rem;max-width:320px}
.leyenda i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.caja-ganador{display:flex;gap:16px;align-items:center;background:var(--papel);border-radius:22px;padding:16px;box-shadow:var(--sombra);margin:16px 0;border:2px solid var(--amarillo)}
.caja-ganador img{width:110px;height:110px;object-fit:contain;flex:none;background:#fff;border-radius:14px}
.caja-ganador h2{font-size:1.15rem;margin:0 0 4px}
.caja-ganador p{margin:0 0 10px;color:var(--suave)}
.similares .tabla-scroll{margin:0 -22px;padding:0 22px}

/* ============ Bandeja del comparador ============ */
.bandeja{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:flex;justify-content:center}
.bandeja[hidden]{display:none}
.bandeja-in{background:var(--tinta);color:#fff;border-radius:18px;padding:10px;display:flex;gap:10px;align-items:center;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);max-width:560px;width:100%}
.bandeja-items{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto}
.bandeja-items img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;flex:none}
.bandeja .btn{padding:11px 16px;white-space:nowrap}
.bandeja-x{background:none;border:0;color:#fff;font-size:1.1rem;padding:8px;cursor:pointer;opacity:.7}
body:has(.compra-fija) .bandeja{bottom:84px}
@media(min-width:860px){body:has(.compra-fija) .bandeja{bottom:12px}}

/* ============ Pie ============ */
.pie{background:var(--tinta);color:#cfc6bb;margin-top:40px}
.pie-in{max-width:1180px;margin:0 auto;padding:36px 16px;display:grid;gap:24px;font-size:.86rem}
@media(min-width:760px){.pie-in{grid-template-columns:1fr 2fr}}
.pie{border-top:4px solid var(--acento)}
.pie .logo{color:#fff}
.pie a{color:#fff}
.redes{display:flex;gap:14px}
.pie-legal p{margin-bottom:.7em}
.legal h2{margin-top:1.2em;font-size:1.25rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
