/* ==========================================================
   Bien Elegido · hoja de estilo común
   Tokens generados desde design-dna.json. No cambies colores
   sueltos: cambia el token y se actualiza toda la web.
   ========================================================== */
:root{
  --tinta:#1C1B19; --verde:#2C5A3E; --acento:#6EE7A8; --sobre-acento:#0E2A1B;
  --blanco:#FFFFFF; --fondo:#FBFAF7; --celda:#F7F6F3; --foto:#F4F2EE; --pie:#F3F1EC; --hero:#F3F6F2;
  --borde:#ECE9E2; --borde-fuerte:#D9D5CC;
  --txt-3:#6B675E; --txt-2:#5A564D; --txt:#4A4740; --texto-claro:#D6D2C8;
  --r-s:10px; --r-m:12px; --r-l:16px; --r-xl:18px; --pildora:999px;
  --sombra-baja:0 1px 2px rgba(28,27,25,.06);
  --sombra-media:0 8px 24px rgba(28,27,25,.10);
  --sombra-alta:0 24px 60px rgba(28,27,25,.18),0 2px 6px rgba(28,27,25,.08);
  --ease:cubic-bezier(.2,.7,.2,1); --t:200ms;
  --ancho:1200px; --fuente:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fuente);color:var(--tinta);background:var(--fondo);font-size:17px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--tinta)}a:hover{color:var(--txt)}
h1,h2,h3,h4{margin:0;color:var(--tinta)}
p{margin:0}
:focus-visible{outline:3px solid var(--verde);outline-offset:2px;border-radius:4px}
.solo-lector{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:var(--r-s);z-index:50}
.saltar:focus{left:8px;color:#fff}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.seccion{padding:72px 0;border-top:1px solid var(--borde)}
.seccion--blanca{background:var(--blanco)}
.seccion--hueso{background:var(--fondo)}
.seccion--oscura{background:var(--tinta);color:#fff;border-top:0}
.seccion--oscura h2{color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- Tipografía ---------- */
.titular{font-size:clamp(42px,6vw,68px);line-height:1.03;font-weight:800;letter-spacing:-.035em}
.h1-pagina{font-size:clamp(36px,4.6vw,54px);line-height:1.06;font-weight:800;letter-spacing:-.035em}
.h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.03em}
.h3{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.entradilla{font-size:19px;line-height:1.55;color:var(--txt);max-width:560px}
.texto{color:var(--txt)}
.pequeno{font-size:13px;color:var(--txt-3)}
.etiqueta{display:inline-flex;align-items:center;gap:6px;background:var(--hero);border:1px solid #DCE6DC;color:var(--verde);padding:4px 10px;border-radius:var(--pildora);font-size:13px;font-weight:600;text-decoration:none}
.meta-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--txt-2)}
.cabecera-seccion{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.cabecera-seccion p{margin-top:12px;max-width:660px;color:var(--txt)}
.enlace-flecha{font-weight:600;font-size:15px;padding:12px 0}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--pildora);font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:filter var(--t) var(--ease)}
.btn:hover{filter:brightness(.96)}
.btn--acento{background:var(--acento);color:var(--sobre-acento)}
.btn--acento:hover{color:var(--sobre-acento)}
.btn--oscuro{background:var(--tinta);color:#fff}
.btn--oscuro:hover{color:#fff}
.btn--grande{height:52px;padding:0 26px;font-size:16px;font-weight:700}
.btn-compra{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:var(--r-m);background:var(--acento);color:var(--sobre-acento);font-weight:700;font-size:15px;text-decoration:none;transition:filter var(--t) var(--ease)}
.btn-compra:hover{filter:brightness(.96);color:var(--sobre-acento)}
.botonera{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--borde)}
.cabecera__fila{display:flex;align-items:center;gap:16px 32px;padding:12px 24px;max-width:var(--ancho);margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);flex:0 0 auto}
/* Hueco del logotipo: sustituye el <span class="logo__hueco"> por <img src="assets/img/logo.svg" alt="Bien Elegido" width="160" height="36"> */
.logo__hueco{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px dashed var(--borde-fuerte);font-size:9px;font-weight:700;color:var(--txt-3);letter-spacing:.04em}
.logo__nombre{font-weight:800;font-size:20px;letter-spacing:-.02em}
.menu{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:15px;font-weight:500;flex:1 1 auto}
.menu a{text-decoration:none;padding:10px 0;display:inline-block}
.menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--tinta)}
.menu-boton{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--borde-fuerte);background:#fff;border-radius:var(--r-s);cursor:pointer;margin-left:auto}
.buscador{position:relative;flex:0 1 260px}
.buscador__campo{display:flex;align-items:center;gap:8px;border:1px solid var(--borde-fuerte);border-radius:var(--r-s);padding:0 10px;height:42px;background:#fff}
.buscador__campo:focus-within{border-color:var(--tinta)}
.buscador input{border:0;outline:none;font:inherit;font-size:15px;background:transparent;width:100%;color:var(--tinta);min-width:0}
.buscador__resultados{position:absolute;right:0;top:calc(100% + 6px);width:min(420px,calc(100vw - 32px));background:#fff;border:1px solid var(--borde);border-radius:var(--r-m);box-shadow:var(--sombra-media);padding:6px;margin:0;list-style:none;z-index:30}
.buscador__resultados[hidden]{display:none}
.buscador__resultados a{display:block;padding:10px 12px;border-radius:var(--r-s);text-decoration:none}
.buscador__resultados a:hover,.buscador__resultados a[aria-selected="true"]{background:var(--celda)}
.buscador__resultados strong{display:block;font-size:15px}
.buscador__resultados span{display:block;font-size:13px;color:var(--txt-3)}
.buscador__vacio{padding:12px;font-size:14px;color:var(--txt)}
@media (max-width:760px){
  .cabecera__fila{flex-wrap:wrap;padding:10px 16px}
  .menu-boton{display:inline-flex}
  .menu{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;border-top:1px solid var(--borde);padding-top:6px}
  .menu.abierto{display:flex}
  .menu a{padding:12px 0}
  .buscador{order:4;flex-basis:100%}
  .contenedor{padding:0 16px}
  .seccion{padding:56px 0}
}

/* ---------- Portada ---------- */
.portada{background:var(--hero)}
.portada__fila{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding:72px 24px 80px;max-width:var(--ancho);margin:0 auto}
.portada__texto{flex:1 1 420px;min-width:0}
.portada__texto .entradilla{margin-top:22px}
.portada__texto .botonera{margin-top:34px}
.sellos{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-size:14px;color:var(--txt-2);padding:0;list-style:none}
.sellos li{display:flex;align-items:center;gap:6px}
.portada__imagen{flex:1 1 440px;min-width:0;display:flex;justify-content:center}
.marco-ilustracion{width:100%;max-width:540px;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sombra-alta);background:#F6E6D3}
.marco-ilustracion svg{display:block;width:100%;height:auto}
@media (max-width:760px){.portada__fila{padding:48px 16px 56px;gap:32px}}

/* ---------- Tarjetas de producto ---------- */
.rejilla-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin-top:40px}
.rejilla-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:28px}
.producto{border:1px solid var(--borde);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:box-shadow var(--t) var(--ease)}
.producto:hover{box-shadow:var(--sombra-media)}
.producto__foto{position:relative;aspect-ratio:4/3;background:var(--foto);display:flex;align-items:center;justify-content:center;color:var(--txt-3);font-size:14px}
.producto__foto img{width:100%;height:100%;object-fit:contain;padding:18px}
.insignia{position:absolute;top:14px;left:14px;background:var(--tinta);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--pildora)}
.producto__cuerpo{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1}
.producto__marca{font-size:13px;font-weight:600;color:var(--txt-3)}
.producto__nombre{margin-top:4px}
.producto__desc{font-size:15px;line-height:1.5;color:var(--txt)}
.datos{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.datos div{background:var(--celda);border-radius:var(--r-s);padding:10px 4px}
.datos dt{font-size:12px;color:var(--txt-3)}
.datos dd{margin:2px 0 0;font-weight:700}
.ideal{font-size:14px;color:var(--verde);font-weight:600}
.nota-mini{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--txt)}
.nota-mini b{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:28px;border-radius:8px;background:var(--tinta);color:#fff;font-size:14px}
.producto .btn-compra{margin-top:auto}
.aviso-datos{margin-top:18px;font-size:13px;color:var(--txt-3)}

/* ---------- Secciones (ventanas) ---------- */
.ventana{text-decoration:none;color:var(--tinta);background:#fff;border:1px solid var(--borde);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:10px;transition:box-shadow var(--t) var(--ease)}
a.ventana:hover{box-shadow:var(--sombra-media);color:var(--tinta)}
.ventana--pronto{border-style:dashed;border-color:var(--borde-fuerte)}
.ventana__nombre{font-weight:700;font-size:18px}
.ventana__desc{font-size:14px;color:var(--txt-2)}
.ventana__cuenta{font-size:13px;font-weight:600;color:var(--verde)}

/* ---------- Banda de llamada ---------- */
.banda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding:64px 24px;max-width:var(--ancho);margin:0 auto}
.banda__texto{flex:1 1 480px;min-width:0}
.banda__texto p{margin-top:14px;font-size:17px;color:var(--texto-claro);max-width:560px}

/* ---------- Principios ---------- */
.principios{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;margin-top:32px}
.principio{display:flex;flex-direction:column;gap:10px}
.principio__num{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--verde);line-height:1}
.principio p{font-size:15px;color:var(--txt)}

/* ---------- Pie ---------- */
.pie{background:var(--pie);border-top:1px solid var(--borde);font-size:14px;color:var(--txt)}
.pie__fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;padding:48px 24px 24px;max-width:var(--ancho);margin:0 auto}
.pie h2{font-size:14px;font-weight:700;margin-bottom:10px}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pie a{text-decoration:none}.pie a:hover{text-decoration:underline}
.pie__legal{max-width:var(--ancho);margin:0 auto;padding:20px 24px 40px;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:10px;line-height:1.6}

/* ---------- Página de comparativa ---------- */
.migas{font-size:13px;color:var(--txt-3);padding-top:24px}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.migas li+li::before{content:"›";margin-right:6px;color:var(--borde-fuerte)}
.migas a{color:var(--txt-2);text-decoration:none}.migas a:hover{text-decoration:underline}
.intro{background:var(--hero)}
.intro__fila{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding:28px 24px 72px;max-width:var(--ancho);margin:0 auto}
.intro__texto{flex:1 1 460px;min-width:0}
.intro__texto .entradilla{margin-top:18px}
.intro__texto .meta-fila{margin-top:22px}
.intro__trio{flex:1 1 400px;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mini{background:#fff;border-radius:var(--r-l);box-shadow:var(--sombra-media);overflow:hidden;text-decoration:none;color:var(--tinta);display:flex;flex-direction:column}
.mini__foto{aspect-ratio:1/1;background:var(--foto);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--txt-3);text-align:center;padding:8px}
.mini__foto img{width:100%;height:100%;object-fit:contain}
.mini span{padding:10px 12px;font-size:13px;font-weight:600;line-height:1.3}
.respuesta-rapida{margin-top:26px;background:#fff;border:1px solid var(--borde);border-radius:var(--r-l);padding:18px 20px;font-size:16px;color:var(--txt)}
.respuesta-rapida strong{color:var(--tinta)}
.indice{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.indice a{display:inline-block;padding:8px 14px;border-radius:var(--pildora);border:1px solid var(--borde-fuerte);background:#fff;font-size:14px;font-weight:500;text-decoration:none}
.indice a:hover{border-color:var(--tinta)}

.perfiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:32px}
.perfil{background:#fff;border:1px solid var(--borde);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:12px}
.perfil__icono{width:44px;height:44px;border-radius:12px;background:var(--hero);display:flex;align-items:center;justify-content:center}
.perfil__si{font-size:15px;color:var(--txt)}
.perfil__elige{font-weight:700;font-size:18px}
.perfil a{font-size:14px;font-weight:600}

.tabla-caja{margin-top:28px;overflow-x:auto;border:1px solid var(--borde);border-radius:var(--r-l);background:#fff}
.tabla{width:100%;border-collapse:collapse;min-width:720px;font-size:15px}
.tabla th,.tabla td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--borde);vertical-align:top}
.tabla thead th{background:var(--celda);font-size:14px}
.tabla tbody th{font-weight:600;color:var(--txt-2);width:22%;position:sticky;left:0;background:#fff}
.tabla tbody tr:last-child th,.tabla tbody tr:last-child td{border-bottom:0}
.tabla .mejor{font-weight:700;color:var(--verde)}
.tabla--diferencias tr.igual{opacity:.4}
.tabla-controles{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.interruptor{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;cursor:pointer;min-height:44px}
.interruptor input{width:20px;height:20px;accent-color:var(--verde)}

.notas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px}
.nota{background:#fff;border:1px solid var(--borde);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:16px}
.nota__cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nota__global{display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;height:72px;border-radius:16px;background:var(--tinta);color:#fff;flex:0 0 auto}
.nota__global b{font-size:26px;line-height:1}
.nota__global span{font-size:11px;color:var(--texto-claro)}
.criterios{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.criterio{display:grid;grid-template-columns:130px 1fr 34px;align-items:center;gap:10px;font-size:14px;color:var(--txt)}
.barra{height:8px;background:var(--celda);border-radius:var(--pildora);overflow:hidden}
.barra i{display:block;height:100%;background:var(--verde);border-radius:var(--pildora)}
.criterio b{text-align:right;color:var(--tinta)}
.pros-contras{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px}
.pros-contras ul{margin:6px 0 0;padding-left:18px;color:var(--txt)}
.pros-contras h4{font-size:14px}
.veredicto{font-size:15px;color:var(--txt);border-top:1px solid var(--borde);padding-top:14px}
@media (max-width:520px){.pros-contras{grid-template-columns:1fr}.criterio{grid-template-columns:110px 1fr 30px}}

.ficha{border:1px solid var(--borde);border-radius:var(--r-l);background:#fff;margin-top:16px}
.ficha summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.ficha summary::-webkit-details-marker{display:none}
.ficha summary .h3{font-size:19px}
.ficha summary svg{transition:transform var(--t) var(--ease);flex:0 0 auto}
.ficha[open] summary svg{transform:rotate(180deg)}
.ficha__cuerpo{padding:0 22px 24px;display:grid;gap:22px}
.ficha__cuerpo h4{font-size:16px;margin-bottom:6px}
.ficha__cuerpo ul{margin:0;padding-left:20px;color:var(--txt);font-size:15px}
.ficha__cuerpo p{font-size:15px;color:var(--txt)}
.ficha__gancho{font-size:18px!important;color:var(--tinta)!important;font-weight:600}
.medidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.medidas div{background:var(--celda);border-radius:var(--r-s);padding:10px 12px}
.medidas dt{font-size:12px;color:var(--txt-3)}.medidas dd{margin:2px 0 0;font-weight:700;font-size:15px}

.preguntas{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.pregunta{border:1px solid var(--borde);border-radius:var(--r-l);background:#fff}
.pregunta summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;min-height:44px}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta p{padding:0 22px 20px;color:var(--txt);font-size:15px}

.regalo-rapido{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:28px}
.regalo-rapido div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);padding:20px}
.regalo-rapido b{display:block;color:#fff;font-size:17px}
.regalo-rapido span{display:block;color:var(--texto-claro);font-size:15px;margin-top:6px}

.aviso-afiliado{font-size:13px;color:var(--txt-2);background:#fff;border:1px solid var(--borde);border-radius:var(--r-m);padding:10px 14px;margin-top:20px;display:flex;gap:8px;align-items:flex-start}

/* ---------- Páginas legales ---------- */
.legal{max-width:760px;margin:0 auto;padding:40px 24px 80px}
.legal h1{font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-.03em}
.legal h2{font-size:22px;margin:32px 0 10px}
.legal p,.legal li{color:var(--txt);font-size:16px}
.legal p+p{margin-top:12px}
.relleno{background:#FFF6D6;padding:0 4px;border-radius:4px}

/* ---------- Bloques de guía (tipos de producto en la Home) ---------- */
.grupo-titulo{display:flex;align-items:center;gap:12px;margin:48px 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--verde)}
.grupo-titulo::after{content:"";flex:1;height:1px;background:var(--borde)}
.tipos{display:grid;gap:20px;margin-top:16px}
.tipo{background:#fff;border:1px solid var(--borde);border-radius:var(--r-l);padding:28px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px}
.tipo__texto{display:flex;flex-direction:column;gap:12px}
.tipo__gancho{font-size:15px;font-weight:600;color:var(--verde)}
.tipo__texto p{font-size:16px;color:var(--txt)}
.tipo__marcas{font-size:14px;color:var(--txt-2)}
.tipo__lado{background:var(--celda);border-radius:var(--r-m);padding:20px;display:flex;flex-direction:column;gap:14px;font-size:15px}
.tipo__lado h4{font-size:14px;margin-bottom:4px}
.tipo__lado ul{margin:0;padding-left:18px;color:var(--txt)}
.tipo__lado ul+h4{margin-top:4px}
@media (max-width:820px){.tipo{grid-template-columns:1fr;padding:22px}}
.ventajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:32px}
.ventaja{display:flex;flex-direction:column;gap:10px}
.ventaja__icono{width:48px;height:48px;border-radius:14px;background:var(--hero);display:flex;align-items:center;justify-content:center}
.ventaja p{font-size:15px;color:var(--txt)}
.texto-largo{max-width:760px}
.texto-largo p{font-size:17px;color:var(--txt);margin-top:14px}
.marcas-tira{margin-top:28px;font-size:15px;color:var(--txt-2);line-height:1.8}