/* =========================================================================
   ComparaSénior · Sistema de diseño
   Comparativas y guías de compra pensadas para mayores de 50.
   Objetivos: letra grande y legible, alto contraste, mucho aire,
   botones grandes y una estética cálida y de confianza (nada de plantilla).
   ========================================================================= */

/* ---- Tokens / variables ------------------------------------------------ */
:root{
  /* Marca */
  --pino:        #0e6b58;   /* verde pino, confianza y calma */
  --pino-osc:    #0a4b3e;
  --pino-claro:  #e7f2ee;
  --ambar:       #e08a1e;   /* acción "comprar", cálido */
  --ambar-osc:   #c4740f;
  --ambar-claro: #fdf1de;
  --oro:         #f2b04a;

  /* Neutros cálidos */
  --papel:   #faf7f2;       /* fondo general */
  --papel-2: #f2ece2;       /* secciones alternas */
  --blanco:  #ffffff;
  --tinta:   #22312e;       /* texto principal (alto contraste) */
  --tinta-2: #56635f;       /* texto secundario */
  --linea:   #e6ded2;       /* bordes suaves */
  --linea-2: #d8cebd;

  /* Estados */
  --exito:  #1f8a5b;
  --alerta: #b4681a;
  --estrella:#f4a51c;

  /* Tipografía */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Escala de texto (el control A-/A+ modifica --escala) */
  --escala: 1;
  --fs-base: calc(18px * var(--escala));

  /* Formas */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --sombra-s: 0 1px 2px rgba(34,49,46,.06), 0 2px 8px rgba(34,49,46,.05);
  --sombra-m: 0 6px 20px rgba(34,49,46,.09);
  --sombra-l: 0 18px 48px rgba(34,49,46,.14);
  --ancho: 1180px;
}

/* ---- Reset ligero ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--pino); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); line-height:1.15; color:var(--tinta); margin:0 0 .5em; font-weight:600; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem, 4.4vw, 3.1rem); }
h2{ font-size:clamp(1.55rem, 3vw, 2.25rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.5rem); }
p{ margin:0 0 1em; }
:focus-visible{ outline:3px solid var(--ambar); outline-offset:2px; border-radius:4px; }

/* ---- Utilidades -------------------------------------------------------- */
.contenedor{ width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto; }
.seccion{ padding:clamp(2.6rem,6vw,4.4rem) 0; }
.seccion--papel2{ background:var(--papel-2); }
.centrado{ text-align:center; }
.ojillo{ font-family:var(--sans); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; color:var(--pino); margin:0 0 .6rem; }
.plomo{ color:var(--tinta-2); font-size:1.06rem; max-width:60ch; }
.centrado .plomo{ margin-inline:auto; }
.oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- Botones ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border:2px solid transparent; border-radius:999px;
  padding:.85rem 1.5rem; font-weight:700; font-size:1rem;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  text-decoration:none; white-space:nowrap; line-height:1.1;
}
.btn:hover{ text-decoration:none; }
.btn--amazon{ background:var(--ambar); color:#3a2603; box-shadow:var(--sombra-s); }
.btn--amazon:hover{ background:var(--ambar-osc); color:#fff; transform:translateY(-2px); box-shadow:var(--sombra-m); }
.btn--primario{ background:var(--pino); color:#fff; }
.btn--primario:hover{ background:var(--pino-osc); transform:translateY(-2px); box-shadow:var(--sombra-m); }
.btn--linea{ background:transparent; color:var(--pino); border-color:var(--linea-2); }
.btn--linea:hover{ background:var(--pino-claro); border-color:var(--pino); }
.btn--grande{ padding:1.05rem 1.9rem; font-size:1.12rem; }
.btn--bloque{ width:100%; }
.btn svg{ width:1.15em; height:1.15em; flex:none; }

/* Iconos sueltos: evitar que los SVG sin tamaño se expandan al 100% */
.precio-box .nota svg,
.aviso-afiliados svg,
.volver svg,
.miga svg,
.hero-fig .flotante svg,
.review-puntos .mk svg,
.pc-col h3 svg{ width:1.3rem; height:1.3rem; flex:none; }
.hero-fig .flotante svg{ width:1.15rem; height:1.15rem; }
.cmp-vacio > div svg{ width:2.6rem; height:2.6rem; }

/* ---- Chips / etiquetas ------------------------------------------------- */
.chip{ display:inline-flex; align-items:center; gap:.4rem; background:var(--pino-claro);
  color:var(--pino-osc); border-radius:999px; padding:.32rem .8rem; font-size:.86rem; font-weight:600; }
.chip--dato{ background:#fff; border:1px solid var(--linea); color:var(--tinta); }
.badge{ display:inline-flex; align-items:center; gap:.35rem; background:var(--ambar); color:#3a2603;
  font-weight:800; font-size:.82rem; padding:.28rem .7rem; border-radius:8px; }
.badge--verde{ background:var(--pino); color:#fff; }
.badge--oferta{ background:#c62f2f; color:#fff; }

/* estrellas */
.estrellas{ display:inline-flex; align-items:center; gap:.4rem; color:var(--tinta-2); font-size:.95rem; }
.estrellas .icos{ color:var(--estrella); letter-spacing:1px; font-size:1.05rem; }

/* ============================ CABECERA ================================== */
.sitio-header{ position:sticky; top:0; z-index:60; background:rgba(250,247,242,.92);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--linea); }
.header-fila{ display:flex; align-items:center; gap:1.2rem; height:74px; }
.logo{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-weight:600;
  font-size:1.4rem; color:var(--tinta); text-decoration:none; letter-spacing:-.02em; }
.logo:hover{ text-decoration:none; }
.logo-marca span{ color:var(--pino); }
.logo-icono{ width:38px; height:38px; flex:none; }
.nav-princ{ display:flex; align-items:center; gap:.3rem; margin-left:auto; }
.nav-princ a{ color:var(--tinta); font-weight:600; padding:.55rem .8rem; border-radius:999px; font-size:.98rem; }
.nav-princ a:hover{ background:var(--pino-claro); color:var(--pino-osc); text-decoration:none; }
.nav-princ a.activo{ background:var(--pino); color:#fff; }
.header-acc{ display:flex; align-items:center; gap:.5rem; }
.txt-size{ display:flex; align-items:center; gap:.2rem; background:#fff; border:1px solid var(--linea);
  border-radius:999px; padding:.2rem; }
.txt-size button{ border:none; background:transparent; color:var(--pino); font-weight:800;
  width:34px; height:34px; border-radius:999px; line-height:1; }
.txt-size button:hover{ background:var(--pino-claro); }
.txt-size .a1{ font-size:.85rem; } .txt-size .a2{ font-size:1.15rem; }
.menu-btn{ display:none; border:1px solid var(--linea); background:#fff; border-radius:12px;
  width:46px; height:44px; align-items:center; justify-content:center; }
.menu-btn svg{ width:24px; height:24px; color:var(--tinta); }

/* menú móvil */
.nav-movil{ display:none; }
@media (max-width:900px){
  .nav-princ{ display:none; }
  .menu-btn{ display:flex; }
  .nav-movil.abierto{ display:block; border-top:1px solid var(--linea); background:var(--papel); }
  .nav-movil a{ display:block; padding:.9rem .2rem; color:var(--tinta); font-weight:600;
    border-bottom:1px solid var(--linea); }
  .nav-movil a:hover{ text-decoration:none; color:var(--pino); }
}

/* ============================ HERO ===================================== */
.hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(242,176,74,.22), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--papel) 100%); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;
  padding:clamp(2.4rem,6vw,4.6rem) 0 clamp(2.4rem,5vw,4rem); }
.hero h1{ margin-bottom:.35em; }
.hero .subrayado{ color:var(--pino); position:relative; white-space:nowrap; }
.hero-lista{ list-style:none; padding:0; margin:1.4rem 0 1.8rem; display:grid; gap:.55rem; }
.hero-lista li{ display:flex; gap:.6rem; align-items:flex-start; font-weight:500; }
.hero-lista .tick{ color:var(--pino); flex:none; margin-top:.15rem; }
.hero-acc{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero-fig{ position:relative; }
.hero-fig .marco{ background:#fff; border-radius:var(--r-xl); border:1px solid var(--linea);
  box-shadow:var(--sombra-l); padding:1.4rem; }
.hero-fig img{ border-radius:var(--r-l); width:100%; aspect-ratio:1/1; object-fit:contain; }
.hero-fig .flotante{ position:absolute; background:#fff; border:1px solid var(--linea);
  border-radius:var(--r-m); box-shadow:var(--sombra-m); padding:.7rem 1rem; font-weight:700; font-size:.92rem;
  display:flex; align-items:center; gap:.5rem; }
.hero-fig .flotante--tl{ top:8%; left:-4%; }
.hero-fig .flotante--br{ bottom:9%; right:-4%; color:var(--pino); }
.hero-conf{ display:flex; align-items:center; gap:1.4rem; margin-top:1.8rem; flex-wrap:wrap;
  color:var(--tinta-2); font-size:.9rem; }
.hero-conf b{ color:var(--tinta); }
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:2rem; }
  .hero-fig{ order:-1; max-width:440px; margin-inline:auto; }
  .hero-fig .flotante--tl{ left:2%; } .hero-fig .flotante--br{ right:2%; }
}

/* ==================== REJILLA DE PRODUCTOS ============================= */
.rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.5rem; }
.card{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sombra-s);
  transition:transform .16s ease, box-shadow .2s ease; position:relative; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-m); }
.card-media{ position:relative; background:linear-gradient(180deg,#fff,#f6f1e9); padding:1.4rem;
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.card-media img{ max-height:100%; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.card-flags{ position:absolute; top:.9rem; left:.9rem; display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.card-cuerpo{ padding:1.1rem 1.3rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.card-cat{ font-size:.8rem; font-weight:700; color:var(--pino); text-transform:uppercase; letter-spacing:.05em; }
.card h3{ font-size:1.18rem; margin:.3rem 0 .5rem; }
.card h3 a{ color:var(--tinta); }
.card h3 a:hover{ color:var(--pino); text-decoration:none; }
.card-specs{ list-style:none; padding:0; margin:.4rem 0 .9rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.card-specs li{ font-size:.82rem; background:var(--papel-2); border-radius:8px; padding:.25rem .55rem; color:var(--tinta-2); font-weight:600; }
.card-precio{ display:flex; align-items:baseline; gap:.6rem; margin:.2rem 0 .9rem; }
.card-precio .ahora{ font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--tinta); }
.card-precio .antes{ color:var(--tinta-2); text-decoration:line-through; font-size:1rem; }
.card-acc{ margin-top:auto; display:grid; gap:.55rem; }
.card-acc .fila2{ display:grid; grid-template-columns:1fr auto; gap:.55rem; }
.comparar-check{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:600;
  color:var(--tinta-2); background:var(--papel); border:1px dashed var(--linea-2); border-radius:999px;
  padding:.5rem .9rem; user-select:none; }
.comparar-check input{ width:1.15rem; height:1.15rem; accent-color:var(--pino); }
.comparar-check.marcado{ color:var(--pino-osc); background:var(--pino-claro); border-style:solid; border-color:var(--pino); }

/* ==================== CATEGORÍAS ======================================= */
.cats-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; }
.cat-card{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:1.5rem;
  display:flex; flex-direction:column; gap:.5rem; box-shadow:var(--sombra-s); transition:.16s; }
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--sombra-m); text-decoration:none; }
.cat-ico{ font-size:2.1rem; line-height:1; }
.cat-card h3{ margin:.2rem 0 0; }
.cat-card p{ color:var(--tinta-2); font-size:.95rem; margin:0; }
.cat-card .cuenta{ margin-top:auto; font-weight:700; color:var(--pino); font-size:.9rem; padding-top:.6rem; }

/* ==================== FICHA DE PRODUCTO ================================= */
.miga{ display:flex; gap:.5rem; flex-wrap:wrap; font-size:.9rem; color:var(--tinta-2); margin:1.4rem 0 1rem; }
.miga a{ color:var(--tinta-2); } .miga a:hover{ color:var(--pino); }
.ficha-top{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:start; }
.galeria .principal{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:1.6rem; box-shadow:var(--sombra-s); }
.galeria .principal img{ width:100%; aspect-ratio:1/1; object-fit:contain; }
.galeria .thumbs{ display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
.galeria .thumbs button{ width:74px; height:74px; border-radius:12px; border:2px solid var(--linea);
  background:#fff; padding:.3rem; overflow:hidden; }
.galeria .thumbs button.activo{ border-color:var(--pino); }
.galeria .thumbs img{ width:100%; height:100%; object-fit:contain; }

.ficha-info h1{ margin-bottom:.3em; }
.ficha-meta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem; }
.precio-box{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:1.4rem;
  box-shadow:var(--sombra-s); margin:1.2rem 0; }
.precio-box .fila{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.precio-box .ahora{ font-family:var(--serif); font-size:2.4rem; font-weight:600; }
.precio-box .antes{ text-decoration:line-through; color:var(--tinta-2); font-size:1.15rem; }
.precio-box .ahorro{ color:#c62f2f; font-weight:800; }
.precio-box .nota{ font-size:.82rem; color:var(--tinta-2); margin:.5rem 0 1rem; display:flex; gap:.4rem; align-items:flex-start; }
.precio-box .acc{ display:grid; gap:.6rem; }
.destacar-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 0; }

.bloque{ margin-top:2.6rem; }
.bloque > h2{ display:flex; align-items:center; gap:.6rem; }
.panel{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:clamp(1.3rem,3vw,2rem);
  box-shadow:var(--sombra-s); }
.panel-radar{ display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:2rem; align-items:center; }
.radar-leyenda{ display:grid; gap:.7rem; margin:0; padding:0; list-style:none; }
.radar-leyenda li{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-bottom:1px dashed var(--linea); padding-bottom:.55rem; }
.radar-leyenda .et{ display:flex; align-items:center; gap:.55rem; font-weight:600; }
.radar-leyenda .pt{ font-family:var(--serif); font-weight:600; font-size:1.15rem; }
.punto{ width:.9rem; height:.9rem; border-radius:50%; flex:none; }

/* tabla de especificaciones */
.tabla-specs{ width:100%; border-collapse:collapse; }
.tabla-specs th, .tabla-specs td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--linea); vertical-align:top; }
.tabla-specs tr:nth-child(even){ background:var(--papel); }
.tabla-specs th{ font-family:var(--sans); font-weight:600; color:var(--tinta-2); width:44%; font-size:.95rem; }
.tabla-specs td{ font-weight:600; }
.grupo-specs + .grupo-specs{ margin-top:1.4rem; }
.grupo-specs h3{ font-size:1.05rem; color:var(--pino-osc); margin:0 0 .3rem; }

/* pros y contras */
.pc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.pc-col{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:1.4rem 1.5rem; box-shadow:var(--sombra-s); }
.pc-col h3{ display:flex; align-items:center; gap:.5rem; }
.pc-col.pros h3{ color:var(--exito); } .pc-col.contras h3{ color:var(--alerta); }
.pc-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.pc-col li{ display:flex; gap:.6rem; align-items:flex-start; }
.pc-col .mk{ flex:none; width:1.4rem; height:1.4rem; border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:.9rem; margin-top:.1rem; }
.pros .mk{ background:#e3f4ea; color:var(--exito); }
.contras .mk{ background:#fbecdb; color:var(--alerta); }

/* reseñas */
.review-grid{ display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center; }
.review-nota{ text-align:center; background:var(--pino-claro); border-radius:var(--r-l); padding:1.6rem 2rem; }
.review-nota .n{ font-family:var(--serif); font-size:3.4rem; font-weight:600; color:var(--pino-osc); line-height:1; }
.review-barra{ height:12px; background:var(--papel-2); border-radius:999px; overflow:hidden; margin:.5rem 0; }
.review-barra > span{ display:block; height:100%; background:linear-gradient(90deg,var(--pino),var(--oro)); }
.review-puntos{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.review-puntos li{ display:flex; gap:.6rem; align-items:flex-start; }

.ideal{ background:linear-gradient(120deg,var(--pino-claro),#fff); border:1px solid var(--linea);
  border-left:5px solid var(--pino); border-radius:var(--r-m); padding:1.2rem 1.4rem; }
.ideal h3{ margin:0 0 .3rem; color:var(--pino-osc); }

@media (max-width:820px){
  .ficha-top{ grid-template-columns:1fr; gap:1.6rem; }
  .panel-radar{ grid-template-columns:1fr; }
  .pc-grid{ grid-template-columns:1fr; }
  .review-grid{ grid-template-columns:1fr; }
}

/* ==================== COMPARADOR ======================================= */
.cmp-picker{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:1.3rem 1.4rem;
  box-shadow:var(--sombra-s); }
.cmp-opts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.8rem; margin-top:1rem; }
.cmp-opt{ display:flex; gap:.7rem; align-items:center; border:2px solid var(--linea); border-radius:var(--r-m);
  padding:.6rem .8rem; background:var(--papel); }
.cmp-opt.sel{ border-color:var(--pino); background:var(--pino-claro); }
.cmp-opt img{ width:52px; height:52px; object-fit:contain; flex:none; }
.cmp-opt .n{ font-weight:700; font-size:.92rem; line-height:1.25; }
.cmp-opt input{ width:1.2rem; height:1.2rem; accent-color:var(--pino); margin-left:auto; flex:none; }

.cmp-vacio{ text-align:center; color:var(--tinta-2); padding:2rem 1rem; }
.cmp-radar-wrap{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:1.6rem;
  box-shadow:var(--sombra-s); display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center; }
.cmp-radar-ley{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.cmp-radar-ley li{ display:flex; align-items:center; gap:.5rem; font-weight:600; }

.cmp-tabla-scroll{ overflow-x:auto; border-radius:var(--r-l); border:1px solid var(--linea); box-shadow:var(--sombra-s); background:#fff; }
.cmp-tabla{ border-collapse:collapse; width:100%; min-width:640px; }
.cmp-tabla th, .cmp-tabla td{ padding:1rem 1.1rem; border-bottom:1px solid var(--linea); text-align:center; }
.cmp-tabla thead th{ position:sticky; top:0; background:#fff; }
.cmp-tabla th.fila-et, .cmp-tabla td.fila-et{ text-align:left; position:sticky; left:0; background:var(--papel);
  font-weight:600; color:var(--tinta-2); min-width:190px; z-index:1; }
.cmp-tabla .prod-cab{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.cmp-tabla .prod-cab img{ width:90px; height:90px; object-fit:contain; }
.cmp-tabla .prod-cab .nm{ font-weight:700; font-size:.95rem; }
.cmp-tabla td.mejor{ background:var(--pino-claro); position:relative; }
.cmp-tabla td.mejor .val{ color:var(--pino-osc); font-weight:800; }
.cmp-tabla td .val{ font-weight:700; }
.cmp-tabla .mejor-tag{ display:inline-block; font-size:.68rem; font-weight:800; color:#fff; background:var(--pino);
  border-radius:6px; padding:.05rem .35rem; margin-left:.3rem; vertical-align:middle; }
.cmp-tabla tr.fila-precio td{ font-family:var(--serif); font-size:1.25rem; }
.cmp-tabla .row-buy .btn{ width:100%; }
@media (max-width:820px){ .cmp-radar-wrap{ grid-template-columns:1fr; } }

/* ==================== GUÍAS / ARTÍCULO ================================= */
.articulo{ max-width:760px; margin-inline:auto; }
.articulo h2{ margin-top:2.2rem; }
.articulo h3{ margin-top:1.6rem; }
.articulo p, .articulo li{ font-size:1.08rem; }
.articulo ul, .articulo ol{ padding-left:1.2rem; display:grid; gap:.4rem; margin:0 0 1.2rem; }
.articulo .destacado{ background:var(--pino-claro); border-radius:var(--r-m); padding:1.2rem 1.4rem; margin:1.4rem 0;
  border-left:5px solid var(--pino); }
.faq details{ background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:.3rem 1.2rem; margin-bottom:.7rem; }
.faq summary{ cursor:pointer; font-weight:700; padding:.9rem 0; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"＋"; float:right; color:var(--pino); font-weight:800; }
.faq details[open] summary::after{ content:"−"; }
.mini-comparativa{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.4rem 0; }
@media (max-width:640px){ .mini-comparativa{ grid-template-columns:1fr; } }

/* ==================== OFERTAS =========================================== */
.oferta-cinta{ background:linear-gradient(90deg,var(--pino),var(--pino-osc)); color:#fff; border-radius:var(--r-l);
  padding:1.6rem 2rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.oferta-cinta h2{ color:#fff; margin:0; }
.oferta-cinta p{ color:#e7f2ee; margin:0; }

/* ==================== AVISO / LEGAL ==================================== */
.aviso-afiliados{ background:var(--ambar-claro); border:1px solid #efd7a8; border-radius:var(--r-m);
  padding:1rem 1.2rem; display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:#5c4410; }
.aviso-afiliados svg{ flex:none; margin-top:.15rem; }
.legal-cont{ max-width:760px; margin-inline:auto; }
.legal-cont h2{ margin-top:1.8rem; }

/* ============================ PIE ====================================== */
.sitio-footer{ background:var(--tinta); color:#cdd8d4; margin-top:2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:2rem; padding:3rem 0 2rem; }
.sitio-footer .logo{ color:#fff; }
.sitio-footer .logo-marca span{ color:var(--oro); }
.footer-col h4{ color:#fff; font-family:var(--sans); font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .9rem; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer-col a{ color:#cdd8d4; font-size:.95rem; } .footer-col a:hover{ color:#fff; }
.footer-disc{ font-size:.86rem; color:#9fb0ab; line-height:1.6; }
.footer-base{ border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 0; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-size:.85rem; color:#9fb0ab; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================ VARIOS =================================== */
.seccion-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.seccion-cab .txt{ max-width:60ch; }
.vacio-cat{ text-align:center; background:#fff; border:1px dashed var(--linea-2); border-radius:var(--r-l);
  padding:2.4rem 1.4rem; color:var(--tinta-2); }
.vacio-cat .ico{ font-size:2.4rem; }
.volver{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; margin-bottom:1rem; }

/* Barra flotante del comparador */
.barra-cmp{ position:fixed; left:50%; bottom:1.1rem; transform:translate(-50%, 160%);
  background:var(--tinta); color:#fff; border-radius:999px; padding:.6rem .7rem .6rem 1.4rem;
  display:flex; align-items:center; gap:.8rem; box-shadow:var(--sombra-l); z-index:70;
  transition:transform .28s cubic-bezier(.2,.8,.3,1); font-weight:600; max-width:calc(100% - 1.5rem); }
.barra-cmp.visible{ transform:translate(-50%, 0); }
.barra-cmp .cmp-num{ background:var(--oro); color:#3a2603; font-weight:800; width:2rem; height:2rem;
  border-radius:50%; display:grid; place-items:center; flex:none; }
.barra-cmp span:nth-child(2){ font-size:.95rem; }
@media (max-width:520px){ .barra-cmp span:nth-child(2){ display:none; } }

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