/* Ingletadoras.es — verde eléctrico + negro */
:root {
  --green: #00E676;
  --green-dark: #00B85C;
  --green-deep: #06331d;
  --black: #0A0A0A;
  --ink: #111614;
  --muted: #5b6660;
  --line: #e3e8e5;
  --bg: #f6f8f7;
  --white: #ffffff;
  --radius: 14px;
  --gutter: clamp(16px, 4vw, 32px);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Contenedor fluido: nunca anchos fijos */
.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 820px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 10px; font: 700 1rem/1 var(--font); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s, color .15s, border-color .15s; text-align: center; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.btn-primary { background: var(--green); color: var(--black); }
.btn-primary:hover { background: #33ff92; }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-sm { padding: .6rem 1rem; font-size: .9rem; white-space: nowrap; }
.brand-name { white-space: nowrap; }
@media (max-width: 360px) { .brand-name { font-size: 1rem; } .btn-sm { padding: .5rem .7rem; font-size: .8rem; } }
.btn-block { width: 100%; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--black); border-bottom: 1px solid rgba(0,230,118,.25); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--white); }
.brand-mark { width: 48px; height: 48px; flex: none; display: block; }
.brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.brand-name span { color: var(--green); }
.main-nav { display: flex; gap: 1.3rem; }
.main-nav a { color: #d7ddd9; text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.main-nav a:hover { color: var(--green); }

/* Hero con overlay verde oscuro semitransparente (18%) */
.hero { position: relative; isolation: isolate; color: var(--white); background: var(--black) url("../img/hero.svg") center / cover no-repeat; padding-block: clamp(56px, 10vw, 120px); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 77, 40, .18); }
.hero-inner { position: relative; }
.eyebrow { color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.9rem); max-width: 18ch; font-weight: 800; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero h1 em { font-style: normal; color: var(--green); }
.hero-sub { margin-top: 1.25rem; max-width: 56ch; font-size: clamp(1rem, 2.2vw, 1.2rem); color: #eef3f0; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-stats { list-style: none; padding: 0; margin: 2.75rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong { color: var(--green); font-size: 1.35rem; }
.hero-stats span { font-size: .85rem; color: #d7ddd9; }

/* Secciones */
.section { padding-block: clamp(48px, 8vw, 96px); }
.section-head { margin-bottom: 2.25rem; max-width: 62ch; }
.section-head h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.section-head p { margin-top: .75rem; color: var(--muted); }
.section-dark { background: var(--black); color: var(--white); }
.section-dark .section-head p { color: #b9c3bd; }

/* Tarjetas de producto */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.4rem; }
.product-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.product-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.1); transform: translateY(-3px); border-color: var(--green); }
.product-media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(circle at 70% 30%, #0f4a2a, var(--black) 70%); }
.product-media svg { width: 46%; height: auto; }
.product-editorial { margin: 0; padding: .5rem .75rem; background: rgba(0,230,118,.12); border-left: 3px solid var(--green); border-radius: 0 8px 8px 0; font-size: .85rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.product-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; gap: .75rem; }
.product-brand { font-size: .8rem; font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: .08em; }
.product-name { font-size: 1.35rem; font-weight: 800; }
.product-tagline { color: var(--muted); font-size: .95rem; }
.product-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .25rem 0; padding: .8rem 0; border-block: 1px solid var(--line); }
.product-specs div { text-align: center; }
.product-specs dt { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.product-specs dd { margin: 0; font-weight: 800; font-size: 1.05rem; }
.product-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .92rem; }
.product-highlights li { padding-left: 1.4rem; position: relative; }
.product-highlights li::before { content: ""; position: absolute; left: 0; top: .5em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--green); }
.product-cta { margin-top: auto; padding-top: .5rem; }
.product-cta { display: flex; flex-direction: column; gap: .6rem; }
/* Botón Amazon: naranja, hover negro (nunca verde). Por encima del enlace que cubre la tarjeta. */
.btn-amazon { position: relative; z-index: 2; background: #FF9900; color: #fff; border-color: #FF9900; }
.btn-amazon:hover, .btn-amazon:focus-visible { background: #000; border-color: #000; color: #fff; }
/* Ver detalles: gris oscuro; su ::after hace clicable toda la tarjeta. */
.btn-details { background: #333; color: #fff; border-color: #333; }
.btn-details:hover { background: #222; border-color: #222; color: #fff; }
.btn-details::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Pasos */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; }
.step { padding: 1.5rem; border: 1px solid rgba(0,230,118,.3); border-radius: var(--radius); background: #101512; }
.step-n { display: block; color: var(--green); font-weight: 800; font-size: 1.6rem; margin-bottom: .6rem; }
.step h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.step p { color: #b9c3bd; font-size: .95rem; }

/* FAQ */
.faq { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: .8rem; }
.faq summary { cursor: pointer; font-weight: 700; list-style-position: outside; }
.faq[open] { border-color: var(--green); }
.faq p { margin-top: .75rem; color: var(--muted); }

/* Footer: fondo oscuro, texto claro */
.site-footer { background: var(--black); color: #e6ece8; padding-top: clamp(40px, 6vw, 64px); border-top: 3px solid var(--green); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2rem; }
.footer-brand p, .footer-legal p { margin-top: 1rem; color: #b9c3bd; font-size: .92rem; }
.site-footer h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--green); margin-bottom: 1rem; }
.footer-legal p { margin-top: 0; }
.footer-nav { display: flex; flex-direction: column; gap: .5rem; }
.footer-nav a { color: #e6ece8; text-decoration: none; }
.footer-nav a:hover { color: var(--green); }
.footer-bottom { margin-top: 2.5rem; padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); color: #9aa6a0; font-size: .85rem; }

/* Exit popup */
.popup-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--gutter); background: rgba(10,10,10,.72); backdrop-filter: blur(3px); }
.popup-overlay[hidden] { display: none; }
.popup { position: relative; width: 100%; max-width: 480px; background: var(--black); color: var(--white); border: 1px solid var(--green); border-radius: 18px; padding: clamp(1.5rem, 5vw, 2.25rem); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.popup h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); margin-bottom: .75rem; }
.popup > p:not(.eyebrow):not(.popup-msg) { color: #cfd8d3; }
.popup-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: #cfd8d3; font-size: 2rem; line-height: 1; cursor: pointer; }
.popup-close:hover { color: var(--green); }
.popup-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.popup-form input { flex: 1 1 200px; min-width: 0; padding: .85rem 1rem; border-radius: 10px; border: 2px solid #2a332e; background: #141a17; color: var(--white); font: inherit; }
.popup-form input:focus { border-color: var(--green); }
.popup-msg { min-height: 1.4em; margin-top: .75rem; font-size: .9rem; color: var(--green); }
.popup-msg.error { color: #ff8a80; }

/* Responsive */
@media (max-width: 720px) {
  .hero-cta .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Imagen de producto (solo si image_url existe y carga) */
.product-media { border-bottom: 1px solid var(--line); }
.product-media:has(.product-img) > svg { display: none; }
.product-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; }

/* ================= Página de detalle ================= */
body.page-detail { background: #fff; }
#detalle { padding-block: 1.25rem 3rem; overflow-wrap: break-word; word-wrap: break-word; }
.d-back { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration: none; color: var(--ink); }
.d-back:hover { color: var(--green-dark); }
.d-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; margin-top: .5rem; }
.d-top:has(.d-main-full) { grid-template-columns: minmax(0, 1fr); }
.d-media img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; border: 0; background: none; }
.d-main { display: grid; gap: 2rem; min-width: 0; }
.d-brand { color: var(--green-dark); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.d-hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); margin: .25rem 0 .5rem; }
.d-editorial { color: #00A152; font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.3rem); line-height: 1.35; }
.d-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin: 1rem 0; }
.d-price-now { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; color: var(--black); }
.d-price-old { color: var(--muted); font-size: 1.15rem; }
.d-price-note { color: var(--muted); font-size: .8rem; margin: -.4rem 0 .9rem; }
.btn-lg { min-height: 52px; padding: 1rem 1.8rem; font-size: 1.1rem; }
.d-section h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: 1rem; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.spec-card { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; min-width: 0; }
.spec-icon { font-size: 1.5rem; flex: none; }
.spec-card dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.spec-card dd { margin: 0; font-weight: 800; font-size: 1.05rem; }
.scores { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; background: #fff; }
.scores-single { grid-template-columns: minmax(0, 1fr); }
.radar-wrap { width: 100%; max-width: 460px; margin-inline: auto; background: #fff; }
.radar-wrap canvas { max-width: 100%; }
.score-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.score-list li { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .65rem .9rem; }
.score-name { flex: 1; min-width: 0; font-weight: 600; }
.score-val { font-size: 1.1rem; }
.d-cta { display: flex; justify-content: center; margin: 2.25rem 0; }
.d-ideal { display: flex; gap: .6rem; font-size: 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; }
.d-section { margin-top: 2.25rem; }
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pc-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; }
.pc-card h3 { font-size: 1.1rem; margin-bottom: .75rem; }
.pc-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pc-card li { display: flex; gap: .6rem; align-items: flex-start; }
.pc-mark { font-weight: 800; flex: none; }
.pc-pros .pc-mark { color: #00B85C; }
.pc-cons .pc-mark { color: #E53935; }
.rev-head { font-size: 1.15rem; margin-bottom: .75rem; }
.rev-stars { color: #F5A200; letter-spacing: .1em; font-size: 1.3rem; }
.rev-count { color: var(--muted); }
.rev-quote { margin: 0; padding: 1.1rem 1.3rem; background: #f6f8f7; border-left: 4px solid var(--green); border-radius: 0 12px 12px 0; font-size: 1.05rem; font-style: italic; }
.d-desc { white-space: pre-line; max-width: 75ch; }
.d-empty { text-align: center; padding-block: 3rem; display: grid; gap: 1rem; justify-items: center; }

@media (max-width: 820px) {
  .d-top { grid-template-columns: minmax(0, 1fr); }
  .scores, .pc-grid { grid-template-columns: minmax(0, 1fr); }
  .btn-block-sm, .d-cta .btn { width: 100%; }
}
@media (max-width: 560px) {
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .btn { min-height: 48px; }
}

/* Otras ingletadoras (enlaces internos) */
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .75rem; }
.rel-list a { display: flex; flex-direction: column; gap: .2rem; min-height: 48px; padding: .8rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); }
.rel-list a:hover { border-color: var(--green); }
.rel-meta { font-size: .85rem; color: var(--muted); }

/* ================= Botón "Comparar este modelo" (ficha) ================= */
.d-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn-compare { background: transparent; color: #00A152; border: 2px solid #00E676; font-weight: 700; }
.btn-compare:hover, .btn-compare:focus-visible { background: rgba(0,230,118,.12); color: #007A3D; border-color: #00E676; }

/* ================= Comparador (siempre en claro) ================= */
.cmp-page { padding-block: 1.5rem 3.5rem; overflow-wrap: break-word; }
.cmp-page h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.cmp-intro { color: var(--muted); margin: .5rem 0 1.5rem; max-width: 62ch; }
.cmp-pickers { margin-bottom: 1.5rem; }
.cmp-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.cmp-slot { position: relative; min-width: 0; }
.cmp-label { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .35rem; }
.cmp-field { position: relative; }
.cmp-input { width: 100%; min-height: 48px; padding: .7rem 2.6rem .7rem .9rem; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.cmp-input:focus { border-color: #00E676; outline: none; box-shadow: 0 0 0 3px rgba(0,230,118,.25); }
.cmp-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cmp-clear:hover { background: #f1f3f2; color: #E53935; }
.cmp-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem; list-style: none; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.cmp-list[hidden] { display: none; }
.cmp-opt { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: 8px; cursor: pointer; }
.cmp-opt:hover, .cmp-opt.is-active { background: rgba(0,230,118,.14); }
.cmp-opt-meta { font-size: .8rem; color: var(--muted); }
.cmp-opt-empty { padding: .8rem; color: var(--muted); }
.cmp-add { margin-top: 1rem; min-height: 48px; background: #fff; color: #00A152; border: 2px dashed #00E676; font-weight: 700; }
.cmp-add:hover { background: rgba(0,230,118,.12); }
.cmp-hint { padding: 1.25rem; background: #f6f8f7; border-radius: 12px; color: var(--muted); }

.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cmp-table { --n: 2; width: 100%; min-width: calc(150px + var(--n) * 210px); table-layout: fixed; border-collapse: separate; border-spacing: 0; background: #fff; }
.cmp-table th, .cmp-table td { padding: .85rem 1rem; text-align: left; vertical-align: middle; background: #fff; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cmp-table td + td, .cmp-table th + td { border-left: 1px solid var(--line); }
.cmp-table .row-h { width: 150px; position: sticky; left: 0; z-index: 2; font-weight: 700; font-size: .9rem; box-shadow: 1px 0 0 var(--line); }
.row-ic { display: inline-block; width: 1.4em; }
.cmp-table .cmp-sec th { background: #f6f8f7; padding: .6rem 1rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #00A152; position: sticky; left: 0; }
.cmp-table .cmp-head-cell { vertical-align: top; text-align: center; padding-block: 1.1rem; }
.cmp-table .cmp-head th { vertical-align: top; }
.cmp-thumb { width: 120px; height: 120px; margin: 0 auto .75rem; border-radius: 12px; overflow: hidden; background: #f1f3f2; display: grid; place-items: center; }
.cmp-thumb img { width: 120px; height: 120px; object-fit: cover; display: block; }
.cmp-ph { display: grid; place-items: center; width: 100%; height: 100%; background: #f1f3f2; }
.cmp-ph svg { width: 48%; height: auto; stroke: #b4bcb7; }
.cmp-ph svg [fill] { fill: #b4bcb7; }
.cmp-name { display: block; font-weight: 800; color: var(--ink); text-decoration: none; margin-bottom: .15rem; }
.cmp-name:hover { color: #00A152; }
.cmp-brand { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
.cmp-feat { display: inline-block; margin-bottom: .6rem; padding: .2rem .55rem; background: #00E676; color: #0A0A0A; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.cmp-price { font-size: 1.5rem; font-weight: 800; color: #00A152; }
.cmp-old { color: var(--muted); }
.cmp-off { display: inline-block; padding: .15rem .45rem; background: #E53935; color: #fff; border-radius: 6px; font-size: .8rem; font-weight: 800; }
.cmp-range { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-weight: 700; font-size: .85rem; background: #eef1ef; color: #333; }
.cmp-range.range-bajo { background: #E3F8EC; color: #12733A; }
.cmp-range.range-medio { background: #FFF1D6; color: #8A5A00; }
.cmp-range.range-alto { background: #FDE5E5; color: #A4231F; }
.cmp-stars { color: #F5A200; letter-spacing: .08em; }
.cmp-count { color: var(--muted); }
.cmp-na { color: #a8b0ab; }
.cmp-best { color: #00A152; font-weight: 800; }
.cmp-bar { height: 8px; background: #e8ece9; border-radius: 999px; overflow: hidden; margin-bottom: .35rem; }
.cmp-bar span { display: block; height: 100%; width: 0; background: #00E676; border-radius: 999px; }
.cmp-score { font-weight: 600; }
.cmp-radar-row td { padding: 1.25rem 1rem; border-left: 0; }
.cmp-radar-box { max-width: 520px; margin: 0 auto; background: #fff; }
.cmp-legend { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; font-size: .9rem; }
.cmp-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .4rem; }
.cmp-dot-0 { background: #00E676; } .cmp-dot-1 { background: #2979FF; } .cmp-dot-2 { background: #FF6D00; } .cmp-dot-3 { background: #AA00FF; }
.cmp-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cmp-ul li { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; }
.cmp-mark { font-weight: 800; flex: none; }
.cmp-pros .cmp-mark { color: #00B85C; }
.cmp-cons .cmp-mark { color: #E53935; }
.cmp-table tr.cmp-tall td { vertical-align: top; }
.cmp-table tr.cmp-cta td { border-bottom: 0; }

/* Menú principal visible también en móvil (segunda fila desplazable) */
@media (max-width: 1100px) {
  .header-inner { flex-wrap: wrap; row-gap: 0; padding-block: .5rem 0; }
  .main-nav { display: flex; order: 3; width: 100%; gap: 1.1rem; overflow-x: auto; padding: .5rem 0 .65rem; white-space: nowrap; }
  .main-nav a[aria-current="page"] { color: var(--green); }
}
@media (max-width: 560px) {
  .cmp-table .row-h { width: 120px; font-size: .8rem; padding-inline: .6rem; }
  .cmp-table { min-width: calc(120px + var(--n) * 190px); }
  .d-actions .btn { width: 100%; }
}

/* ================= Test "Descubre tu ingletadora ideal" (diseño oscuro) ================= */
body.page-test { background: #0A0A0A; color: #fff; }
.test-page { padding-block: 1.25rem 3.5rem; overflow-wrap: break-word; }
.t-page-head { margin-bottom: 1.25rem; }
.t-page-head h1 { font-size: clamp(1.15rem, 3.5vw, 1.5rem); margin: 0 0 .3rem; }
.t-page-head p { color: #9aa6a0; margin: 0; max-width: 62ch; font-size: .95rem; }
.t-progress-top { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.t-count { color: #00E676; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.t-bar { height: 8px; background: #1e2622; border-radius: 999px; overflow: hidden; }
.t-bar-fill { display: block; height: 100%; width: 0; background: #00E676; border-radius: 999px; transition: width .35s ease; }
.t-stage { overflow-x: clip; }
.t-title { font-size: clamp(1.6rem, 5.4vw, 2.5rem); margin-bottom: 1.5rem; }
.t-options { display: grid; gap: .85rem; }
.t-opt { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 72px; padding: 1rem 1.2rem; background: #121816; border: 2px solid #24302a; border-radius: 14px; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.t-opt:hover, .t-opt:focus-visible { border-color: #00E676; background: #15201b; }
.t-opt:active { transform: scale(.99); }
.t-opt.is-selected { border-color: #00E676; background: rgba(0,230,118,.14); }
.t-ic { font-size: 2rem; flex: none; width: 2.4rem; text-align: center; }
.t-txt { display: grid; gap: .15rem; min-width: 0; }
.t-txt strong { font-size: 1.1rem; }
.t-txt span { color: #aab6af; font-size: .95rem; }
.t-nav { margin-top: 1.25rem; min-height: 48px; display: flex; }
.t-prev { min-height: 48px; padding: 0 .25rem; background: none; border: 0; color: #aab6af; font: inherit; font-weight: 700; cursor: pointer; }
.t-prev:hover, .t-prev:focus-visible { color: #00E676; }

@keyframes tIn-next { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes tIn-prev { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes tOut-next { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-56px); } }
@keyframes tOut-prev { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(56px); } }
.in-next { animation: tIn-next .3s ease both; }
.in-prev { animation: tIn-prev .3s ease both; }
.out-next { animation: tOut-next .2s ease both; }
.out-prev { animation: tOut-prev .2s ease both; }
@media (prefers-reduced-motion: reduce) { .in-next, .in-prev, .out-next, .out-prev { animation: none; } }

/* Resultados */
.r-profile { text-align: center; padding: 2rem 1.25rem; border: 1px solid rgba(0,230,118,.35); border-radius: 18px; background: linear-gradient(160deg, #10251b, #0f1512); }
.r-pemoji { display: block; font-size: 3.5rem; line-height: 1.1; }
.r-plabel { color: #aab6af; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-top: .5rem; }
.r-pname { color: #00E676; font-size: clamp(1.7rem, 6vw, 2.6rem); margin: .25rem 0 .75rem; }
.r-pdesc { color: #cfd8d3; max-width: 60ch; margin-inline: auto; font-size: 1.05rem; }
.r-note { margin-top: 1rem; padding: .85rem 1rem; background: rgba(255,193,7,.08); border-left: 3px solid #FFC107; border-radius: 0 10px 10px 0; color: #ffe08a; font-size: .95rem; }
.r-card { margin-top: 1.25rem; padding: 1.25rem; background: #121816; border: 1px solid #24302a; border-radius: 18px; }
.r-card.r-secondary { border-style: dashed; }
.r-kicker { color: #aab6af; font-weight: 700; margin-bottom: 1rem; }
.r-kicker-main { color: #00E676; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.r-body { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.r-img { aspect-ratio: 1 / 1; background: #fff; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.r-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; display: block; }
.r-info { min-width: 0; display: grid; gap: .75rem; }
.r-name { font-size: clamp(1.3rem, 4vw, 1.7rem); }
.r-edit { color: #aab6af; }
.r-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.r-now { font-size: 1.9rem; font-weight: 800; color: #00E676; }
.r-old { color: #8a958e; }
.r-stars { color: #F5A200; }
.r-count { color: #aab6af; }
.r-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.r-pill { display: inline-flex; gap: .4rem; align-items: center; padding: .35rem .8rem; background: #1b2420; border: 1px solid #2a362f; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.r-score p { margin-bottom: .4rem; }
.r-score strong { color: #00E676; }
.r-meter { height: 10px; background: #1e2622; border-radius: 999px; overflow: hidden; }
.r-meter span { display: block; height: 100%; width: 0; background: #00E676; border-radius: 999px; transition: width .6s ease; }
.r-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.r-actions .btn { min-height: 48px; }
.btn-gray { background: #333; color: #fff; border-color: #333; }
.btn-gray:hover, .btn-gray:focus-visible { background: #222; border-color: #222; color: #fff; }
.page-test .btn-amazon:hover { background: #000; border-color: #00E676; }
.r-again { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: center; }
.r-again .btn { min-height: 52px; }
.r-link { color: #aab6af; font-weight: 700; }
.r-link:hover { color: #00E676; }
@media (max-width: 640px) {
  .r-body { grid-template-columns: minmax(0, 1fr); }
  .r-img { max-width: 320px; margin-inline: auto; width: 100%; }
  .r-actions .btn { width: 100%; }
  .t-opt { padding: .9rem 1rem; }
}

/* La animacion de entrada desplaza la pantalla en horizontal: se recorta para no ampliar el area desplazable en movil */
#test-app { overflow-x: clip; }

/* ================= "¿Te llega el corte?" ================= */
.cx-page { padding-block: 1.5rem 3.5rem; overflow-wrap: break-word; }
.cx-page h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.cx-intro { color: var(--muted); margin: .5rem 0 1.5rem; max-width: 62ch; }
.cx-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.cx-wide { grid-column: 1 / -1; }
.cx-field { display: grid; gap: .35rem; min-width: 0; }
.cx-field label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cx-field input, .cx-field select { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.cx-field input:focus, .cx-field select:focus { border-color: #00E676; outline: none; box-shadow: 0 0 0 3px rgba(0,230,118,.25); }
.cx-actions .btn { width: 100%; }
.cx-error { grid-column: 1 / -1; margin: 0; padding: .7rem 1rem; background: #FDE5E5; color: #A4231F; border-radius: 10px; font-weight: 600; }
.cx-error[hidden] { display: none; }
#cx-result { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
.cx-card { padding: 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.cx-card h2 { font-size: 1.3rem; margin-bottom: .75rem; }
.cx-yes { border-color: #00E676; box-shadow: 0 0 0 3px rgba(0,230,118,.14); }
.cx-no { border-color: #E53935; box-shadow: 0 0 0 3px rgba(229,57,53,.1); }
.cx-verdict { font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-weight: 800; margin-bottom: .4rem; }
.cx-sentence { font-size: 1.05rem; margin-bottom: 1rem; }
.cx-diagram { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .5rem; margin-bottom: 1rem; }
.cx-svg { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; font-family: inherit; }
.cx-rows { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.cx-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cx-row .cx-mark { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: #fff; }
.cx-row.ok .cx-mark { background: #00B85C; }
.cx-row.ko .cx-mark { background: #E53935; }
.cx-lbl { display: grid; gap: .1rem; min-width: 0; }
.cx-lbl span { font-size: .85rem; color: var(--muted); }
.cx-note { font-weight: 700; font-size: .9rem; text-align: right; }
.cx-row.ok .cx-note { color: #00A152; }
.cx-row.ko .cx-note { color: #C62828; }
.cx-foot { font-size: .88rem; color: var(--muted); margin-bottom: .6rem; }
.cx-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.cx-btns .btn, .cx-alt-btns .btn { min-height: 48px; }
.cx-alts { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.cx-alt { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; }
.cx-alt-meta { display: block; font-size: .85rem; color: var(--muted); }
.cx-alt-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.cx-unknown { background: #f6f8f7; }
@media (max-width: 640px) {
  .cx-form { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .cx-row { grid-template-columns: auto minmax(0, 1fr); }
  .cx-note { grid-column: 2; text-align: left; }
  .cx-btns .btn, .cx-alt-btns, .cx-alt-btns .btn { width: 100%; }
}

/* ================= Páginas legales ================= */
.legal-page { max-width: 820px; padding-block: 1.5rem 3.5rem; overflow-wrap: break-word; }
.legal-page h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-bottom: .25rem; }
.legal-page h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.legal-page h3 { font-size: 1.05rem; margin: 1.25rem 0 .4rem; }
.legal-page p, .legal-page li { line-height: 1.7; }
.legal-page p { margin-bottom: .8rem; }
.legal-page ul { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .35rem; }
.legal-page a { color: #007A3D; text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: #00A152; }
.legal-updated { color: var(--muted); font-size: .9rem; margin-bottom: 1.25rem; }
.legal-table { width: 100%; border-collapse: collapse; margin: .75rem 0 1rem; font-size: .92rem; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { padding: .6rem .75rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { background: #f6f8f7; }
.legal-table code { background: #f1f3f2; padding: .1rem .35rem; border-radius: 4px; word-break: break-all; }

/* Enlaces legales en el pie */
.footer-legal-links { margin-top: .4rem; }
.footer-legal-links a { color: #cfd8d3; text-decoration: none; }
.footer-legal-links a:hover { color: #00E676; text-decoration: underline; }

/* Consentimiento del popup de suscripción */
.popup-consent { flex: 1 1 100%; display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: #cfd8d3; line-height: 1.45; cursor: pointer; }
.popup-consent input { flex: none; width: 20px; height: 20px; margin-top: .1rem; accent-color: #00E676; }
.popup-consent a { color: #00E676; }
.popup-legal { margin-top: .75rem; font-size: .75rem; color: #8a958e; line-height: 1.45; }

/* ================= Comparativas "X vs Y" ================= */
.vs-page { padding-block: 1.25rem 3.5rem; overflow-wrap: break-word; }
.vs-crumb { font-size: .9rem; color: var(--muted); margin-bottom: .75rem; }
.vs-crumb a { color: #007A3D; }
.vs-page h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); margin-bottom: .75rem; }
.vs-page h2 { font-size: clamp(1.25rem, 3.4vw, 1.6rem); margin-bottom: .9rem; }
.vs-intro { font-size: 1.05rem; line-height: 1.7; max-width: 75ch; margin-bottom: 1.5rem; }
.vs-intro a, .vs-more a, .vs-links a, .vs-page dd a { color: #007A3D; text-decoration: underline; text-underline-offset: 2px; }
.vs-section { margin-top: 2.25rem; }
.vs-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vs-choice { padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid #00E676; border-radius: 12px; line-height: 1.6; }
.vs-tally { margin-top: 1rem; color: var(--muted); }
.vs-note { margin-top: .75rem; font-size: .88rem; color: var(--muted); }
.vs-qa { margin: 0; display: grid; gap: .5rem 0; }
.vs-qa dt { font-weight: 800; margin-top: .6rem; }
.vs-qa dd { margin: 0; color: #2b3430; }
.vs-who, .vs-links { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; line-height: 1.6; }
.vs-cta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vs-cta-card { display: grid; gap: .6rem; align-content: start; padding: 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.vs-cta-card .btn { min-height: 48px; }
.vs-more { margin-top: 1rem; }
.vs-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.vs-card a { display: grid; gap: .3rem; height: 100%; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.vs-card a:hover { border-color: #00E676; box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.vs-card strong { font-size: 1.05rem; }
.vs-card span { font-size: .88rem; color: var(--muted); }
.d-comparativas { padding-block: 0 3rem; }
.d-comparativas h2 { font-size: clamp(1.25rem, 3.4vw, 1.6rem); margin-bottom: .9rem; }
.page-detail .cmp-table .cmp-head-cell { padding-inline: .75rem; }
@media (max-width: 720px) {
  .vs-choices, .vs-cta-row { grid-template-columns: minmax(0, 1fr); }
}

/* ================= Guías de compra ================= */
.g-byline { color: var(--muted); font-size: .9rem; margin: -.25rem 0 1rem; }
.g-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin: .5rem 0; }
.g-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.g-table th, .g-table td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.g-table thead th { background: #f6f8f7; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.g-table tbody th { font-weight: 700; }
.g-table a, .vs-page .g-list a, .vs-page p a, .g-item h3 a { color: #007A3D; }
.g-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; line-height: 1.65; }
.vs-page p { line-height: 1.7; }
.vs-section > p + p { margin-top: .75rem; }
.g-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: g; }
.g-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; counter-increment: g; }
.g-item .cmp-thumb { margin: 0; }
.g-item-body { display: grid; gap: .45rem; min-width: 0; }
.g-item h3 { font-size: 1.15rem; }
.g-item h3::before { content: counter(g) ". "; color: #00A152; }
.g-facts { font-weight: 600; font-size: .92rem; }
.g-rating { color: #8a6d00; font-size: .92rem; }
.g-btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.g-btns .btn { min-height: 48px; }
.g-method { margin-top: 2rem; padding: .9rem 1.1rem; background: #f6f8f7; border-left: 4px solid #00E676; border-radius: 0 10px 10px 0; font-size: .92rem; }
@media (max-width: 560px) {
  .g-item { grid-template-columns: minmax(0, 1fr); }
  .g-item .cmp-thumb { margin: 0 auto; }
  .g-btns .btn { width: 100%; }
}

/* Páginas de estado de la suscripción */
.susc-page { max-width: 640px; padding-block: 2.5rem 3.5rem; }
.susc-page h1 { margin-bottom: .75rem; }
.susc-page p { margin-bottom: 1rem; }
.susc-form { margin: 1.25rem 0; }
.susc-missing { padding: .8rem 1rem; background: #FDE5E5; color: #A4231F; border-radius: 10px; }

/* ---------- Filtros de la landing ---------- */
.product-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; }
.product-price { font-size: 1.35rem; font-weight: 800; color: var(--black); }
.product-price-old { color: var(--muted); font-size: .95rem; }
.product-rating { margin-left: auto; font-weight: 700; font-size: .95rem; }
.product-rating span[aria-hidden] { color: #f5a300; }
.product-rating small { color: var(--muted); font-weight: 500; }

.filters { margin-bottom: 1.5rem; }
.fl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.fl-toggle { padding: .6rem 1rem; font-size: .95rem; }
.fl-badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding-inline: .35rem; border-radius: 99px; background: var(--green); color: var(--black); font-size: .8rem; font-weight: 800; }
.fl-count { margin: 0; color: var(--muted); font-weight: 600; }
.fl-sort { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font-weight: 600; }
.fl-select { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font: inherit; max-width: 100%; }
.fl-select:focus-visible, .fl-range input:focus-visible, .fl-check input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.fl-panel { display: none; margin-top: 1rem; padding: 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem 1.5rem; }
.fl-panel.fl-open { display: grid; }
.fl-group { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: .35rem; align-content: start; }
.fl-group legend { padding: 0; margin-bottom: .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.fl-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .95rem; }
.fl-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--green-dark); flex: none; }
.fl-check small { margin-left: auto; color: var(--muted); }
.fl-laser { margin-top: .6rem; }
.fl-range input[type="range"] { width: 100%; accent-color: var(--green-dark); }
.fl-hint { margin: 0; font-size: .85rem; color: var(--muted); }
.fl-actions { display: flex; align-items: flex-end; }
.fl-empty { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius); display: grid; gap: .6rem; justify-items: center; }
.fl-empty p { margin: 0; }
@media (max-width: 820px) {
  .fl-sort { margin-left: 0; width: 100%; }
  .fl-sort .fl-select { flex: 1; }
  .fl-toggle { flex: none; }
}

/* Bloque diferenciador de la ficha (build/fichas.mjs) */
.d-extras { padding-block: 0 1.5rem; }
.d-extra { margin-top: 2.25rem; }
.d-extra h2 { font-size: clamp(1.25rem, 3.4vw, 1.6rem); margin-bottom: .9rem; }
.d-extra h3 { font-size: 1.05rem; margin: 1.1rem 0 .3rem; }
.d-extra p, .d-extra li { line-height: 1.65; }
.d-extra a { color: #007A3D; text-decoration: underline; text-underline-offset: 2px; }

/* Filtros compactos: las marcas (muchas) en varias columnas y el panel en filas cortas */
.fl-panel { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem 1.25rem; padding: .9rem 1.1rem; align-items: start; }
.fl-group-marca { grid-column: 1 / -1; }
.fl-group-marca .fl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .15rem 1rem; }
.fl-check { font-size: .9rem; padding-block: .1rem; }
.fl-actions { align-items: center; }

/* Filtros desplegables: una fila de botones; cada uno abre su menú */
.fl-panel { display: none; grid-template-columns: none; margin-top: .9rem; padding: 0; background: none; border: 0; flex-wrap: wrap; align-items: flex-start; gap: .6rem; }
.fl-panel.fl-open { display: flex; }
.fl-dd { position: relative; }
.fl-dd-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 99px; background: var(--white); color: var(--ink); font: 600 .92rem var(--font); cursor: pointer; transition: border-color .15s, background .15s; }
.fl-dd-btn:hover, .fl-dd-open .fl-dd-btn { border-color: var(--green-dark); }
.fl-dd-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.fl-dd-active .fl-dd-btn { background: rgba(0,230,118,.12); border-color: var(--green-dark); }
.fl-dd-n { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: .3rem; border-radius: 99px; background: var(--green); color: var(--black); font-size: .75rem; font-weight: 800; }
.fl-dd-arrow { font-size: .8rem; color: var(--muted); transition: transform .15s; }
.fl-dd-open .fl-dd-arrow { transform: rotate(180deg); }
.fl-dd-menu { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; min-width: 230px; max-width: min(92vw, 340px); max-height: 340px; overflow-y: auto; padding: .8rem 1rem; display: grid; gap: .35rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.fl-dd-menu[hidden] { display: none; }
.fl-dd-menu .fl-checks { display: grid; gap: .15rem; }
.fl-reset { align-self: center; padding: .55rem .6rem; border: 0; background: none; color: var(--muted); font: 600 .9rem var(--font); text-decoration: underline; cursor: pointer; }
.fl-reset:hover { color: var(--ink); }
@media (min-width: 821px) { .fl-toggle { display: none; } .fl-panel { display: flex; margin-top: .9rem; } }
@media (max-width: 820px) {
  .fl-dd-menu { left: 0; right: auto; }
  .fl-dd:nth-child(even) .fl-dd-menu { left: auto; right: 0; }
}
.fl-dd-n[hidden], .fl-badge[hidden] { display: none; }