@charset "UTF-8";
/* =============================================================================
   CASA AMABLE  ·  hoja de estilo única
   -----------------------------------------------------------------------------
    1. Tokens                    8. Portada
    2. Reset y base              9. Ficha de producto
    3. Utilidades               10. Comparador
    4. Tipografía               11. Guías y contenido editorial
    5. Componentes              12. Anuncios (solo huecos marcados)
    6. Cabecera y pie           13. Responsive
    7. Migas y cabeceras        14. Movimiento
   -----------------------------------------------------------------------------
   Paleta cálida, sin rojos de alarma: este contenido lo leen hijos e hijas
   preocupados, y el color no debe añadir tensión.
   ============================================================================= */


/* =============================================================================
   1. TOKENS
   ============================================================================= */
:root {
  /* Color */
  --papel:        #FBF8F3;
  --papel-2:      #F5F0E7;
  --papel-3:      #EFE8DB;
  --blanco:       #FFFFFF;
  --tinta:        #241F1B;
  --tinta-2:      #5D544A;
  --tinta-3:      #8A8075;
  --linea:        #E5DCCC;
  --linea-2:      #D6C9B4;

  --verde:        #2E6A5C;
  --verde-osc:    #215045;
  --verde-claro:  #E6F0EC;
  --verde-borde:  #BFD8CF;

  --terracota:    #B0563A;
  --terracota-cl: #FAEDE7;
  --ambar:        #B5791F;
  --ambar-cl:     #FBF1DC;

  /* Series del comparador */
  --serie-1: #2E6A5C;
  --serie-2: #B0563A;
  --serie-3: #4A6B96;
  --serie-4: #8A6A9E;
  --serie-5: #997B2E;

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

  /* Medidas */
  --contenedor: 1180px;
  --contenedor-estrecho: 760px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --radio-s: 8px;
  --radio:   14px;
  --radio-l: 22px;
  --radio-xl: 30px;

  /* Sombras cálidas */
  --sombra-s: 0 1px 2px rgba(66,51,33,.05), 0 2px 6px rgba(66,51,33,.04);
  --sombra:   0 2px 4px rgba(66,51,33,.045), 0 10px 26px -8px rgba(66,51,33,.10);
  --sombra-l: 0 4px 8px rgba(66,51,33,.05), 0 24px 50px -16px rgba(66,51,33,.16);

  /* Curvas */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);
}


/* =============================================================================
   2. RESET Y BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.sin-desplazamiento { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.018em;
  text-wrap: balance;
}

::selection { background: var(--verde-claro); color: var(--verde-osc); }

:focus-visible {
  outline: 2.5px solid var(--verde);
  outline-offset: 3px;
  border-radius: 5px;
}

.salto-contenido {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .7rem 1.15rem; background: var(--verde); color: #fff;
  border-radius: var(--radio-s); font-weight: 600;
}
.salto-contenido:focus { top: 1rem; }


/* =============================================================================
   3. UTILIDADES
   ============================================================================= */
.contenedor {
  width: 100%; max-width: var(--contenedor);
  margin-inline: auto; padding-inline: var(--gutter);
}
.contenedor--estrecho { max-width: calc(var(--contenedor-estrecho) + var(--gutter) * 2); }

.sr-solo, .solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.seccion { padding-block: clamp(2.6rem, 7vw, 4.6rem); }
.seccion--tenue { background: var(--papel-2); }
.seccion--categorias { padding-top: clamp(2rem, 5vw, 3.2rem); }

.seccion__cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.seccion__cabecera > :first-child { flex: 1 1 22rem; }
.seccion__titulo { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }
.seccion__intro {
  margin-top: .7rem; max-width: 58ch;
  color: var(--tinta-2); font-size: 1.01rem;
}
.seccion > .contenedor > .seccion__titulo + *:not(.seccion__intro),
.seccion > .contenedor > .seccion__intro + * { margin-top: 1.7rem; }

.rejilla { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }

.nota-precios {
  display: flex; gap: .4rem; align-items: flex-start;
  margin-top: 1.1rem; font-size: .78rem; color: var(--tinta-3); line-height: 1.5;
}
.nota-precios svg { flex: none; margin-top: 2px; }

.vacio-aviso, .aviso-suave {
  background: var(--blanco); border: 1px dashed var(--linea-2);
  border-radius: var(--radio); padding: 1.5rem 1.6rem;
  color: var(--tinta-2); font-size: .96rem;
}
.aviso-suave p + p { margin-top: .7rem; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--verde); margin-top: 1.1rem;
  border-bottom: 1.5px solid var(--verde-borde); padding-bottom: 2px;
}
.enlace-flecha svg { transition: transform .3s var(--ease-out); }
.enlace-flecha:hover svg { transform: translateX(4px); }

.vacio { color: var(--tinta-3); }


/* =============================================================================
   4. TIPOGRAFIA
   ============================================================================= */
.destacado-lead {
  font-size: clamp(1.05rem, 2.3vw, 1.2rem);
  color: var(--tinta-2); line-height: 1.6;
}

.prosa { color: var(--tinta-2); font-size: 1.03rem; line-height: 1.75; }
.prosa > * + * { margin-top: 1.05rem; }
.prosa h2 {
  font-size: clamp(1.32rem, 2.8vw, 1.62rem);
  color: var(--tinta); margin-top: 2.4rem;
}
.prosa h3 {
  font-size: clamp(1.08rem, 2.2vw, 1.22rem);
  color: var(--tinta); margin-top: 1.8rem;
}
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa em { font-style: italic; }
.prosa a {
  color: var(--verde-osc); font-weight: 500;
  border-bottom: 1.5px solid var(--verde-borde);
}
.prosa a:hover { border-bottom-color: var(--verde); }
.prosa ul, .prosa ol { padding-left: 1.25rem; }
.prosa li + li { margin-top: .55rem; }
.prosa ul li::marker { color: var(--verde-borde); }
.prosa--intro { font-size: 1.06rem; }
.prosa--legal { font-size: 1rem; }
.prosa--guia > p:first-of-type { font-size: 1.08rem; }

.prosa .lista-chequeo { list-style: none; padding-left: 0; display: grid; gap: .1rem; }
.prosa .lista-chequeo li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .6rem .9rem; border-radius: var(--radio-s);
  background: var(--blanco); border: 1px solid var(--linea);
  margin-top: .5rem;
}
.prosa .lista-chequeo li::before {
  content: ""; flex: none; width: 17px; height: 17px; margin-top: .28rem;
  border: 1.8px solid var(--verde-borde); border-radius: 4px; background: var(--papel);
}


/* =============================================================================
   5. COMPONENTES
   ============================================================================= */

/* --- Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.25rem;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              background-color .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__icono { flex: none; }

.btn--principal { background: var(--verde); color: #fff; box-shadow: var(--sombra-s); }
.btn--principal:hover { background: var(--verde-osc); box-shadow: var(--sombra); }

.btn--contorno { border-color: var(--linea-2); color: var(--tinta); background: var(--blanco); }
.btn--contorno:hover { border-color: var(--verde); color: var(--verde-osc); }

.btn--comprar {
  background: var(--ambar); color: #fff;
  box-shadow: 0 2px 4px rgba(140,92,20,.16), 0 10px 22px -10px rgba(140,92,20,.5);
}
.btn--comprar:hover { background: #9C6718; }

.btn--grande { padding: .95rem 1.7rem; font-size: 1.03rem; }
.btn--pequeno { padding: .52rem .95rem; font-size: .86rem; }
.btn--bloque { display: flex; width: 100%; }
.btn.es-inactivo { opacity: .45; pointer-events: none; }

/* --- Etiquetas ------------------------------------------------------------ */
.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .26rem .62rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .015em;
  white-space: nowrap;
}
.etiqueta--verde  { background: var(--verde-claro); color: var(--verde-osc); }
.etiqueta--ambar  { background: var(--ambar-cl); color: #8A5C12; }
.etiqueta--linea  { background: var(--papel-2); color: var(--tinta-2); border: 1px solid var(--linea); }

/* --- Estrellas ------------------------------------------------------------ */
.estrellas { display: inline-flex; align-items: center; gap: .5rem; }
.estrellas__iconos { position: relative; display: inline-block; line-height: 1; }
.estrellas__fondo { color: var(--linea-2); letter-spacing: .08em; }
.estrellas__frente {
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
  color: #E0A32B; letter-spacing: .08em;
}
.estrellas__texto { font-size: .85rem; color: var(--tinta-2); }

/* --- Precio --------------------------------------------------------------- */
.precio { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.precio__actual { font-size: 1.45rem; font-weight: 700; font-family: var(--display); color: var(--tinta); }
.precio__antes { font-size: .95rem; color: var(--tinta-3); text-decoration: line-through; }
.precio__nota {
  display: block; font-size: .78rem; color: var(--tinta-3);
  margin-top: .35rem; line-height: 1.45;
}
.precio--sin { font-size: 1rem; color: var(--tinta-2); font-weight: 600; }
.precio--compacto .precio__actual { font-size: 1.15rem; }

/* --- Sí / No -------------------------------------------------------------- */
.si-no { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .9rem; }
.si-no--si { color: var(--verde); }
.si-no--no { color: var(--tinta-3); font-weight: 500; }

/* --- Tarjeta de producto -------------------------------------------------- */
.tarjeta {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-l); overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              border-color .35s var(--ease-out);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-l); border-color: var(--verde-borde); }

.tarjeta__medio {
  position: relative; aspect-ratio: 4 / 3; background: var(--papel-2);
  display: grid; place-items: center; padding: 1.3rem; overflow: hidden;
}
.tarjeta__medio img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tarjeta__distintivo { position: absolute; top: .8rem; left: .8rem; z-index: 2; max-width: calc(100% - 1.6rem); }
.tarjeta__distintivo .etiqueta { white-space: normal; box-shadow: var(--sombra-s); }

.tarjeta__cuerpo { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.3rem 1.4rem; flex: 1; }
.tarjeta__tipo {
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde);
}
.tarjeta__titulo { font-size: 1.12rem; line-height: 1.3; }
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta__datos { display: flex; flex-wrap: wrap; gap: .35rem; }
.tarjeta__resumen { font-size: .91rem; color: var(--tinta-2); }
.tarjeta__pie {
  margin-top: auto; padding-top: .9rem; display: grid; gap: .6rem;
  border-top: 1px solid var(--linea);
}
.tarjeta__acciones { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.tarjeta__acciones .btn { position: relative; z-index: 2; }

/* --- Casilla "comparar" --------------------------------------------------- */
.comparar-check {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 600; color: var(--tinta-2); cursor: pointer;
  user-select: none;
}
.comparar-check input {
  width: 17px; height: 17px; accent-color: var(--verde); cursor: pointer; flex: none;
}
.comparar-check:hover { color: var(--verde-osc); }
.comparar-check--grande {
  margin-top: 1.1rem; padding: .75rem 1.05rem;
  border: 1.5px dashed var(--linea-2); border-radius: var(--radio);
  font-size: .92rem; width: 100%;
}
.comparar-check--grande span { display: inline-flex; align-items: center; gap: .45rem; }
.comparar-check--grande:hover { border-color: var(--verde-borde); background: var(--verde-claro); }


/* =============================================================================
   6. CABECERA Y PIE
   ============================================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,248,243,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.cabecera.es-compacta { border-bottom-color: var(--linea); box-shadow: var(--sombra-s); }
.cabecera__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; min-height: 68px;
}

.marca { display: inline-flex; align-items: center; gap: .65rem; flex: none; }
.marca__icono { flex: none; border-radius: 10px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nombre { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; }
.marca__lema { font-size: .72rem; color: var(--tinta-3); letter-spacing: .01em; }

.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; }
.nav__enlace {
  display: block; padding: .5rem .72rem; border-radius: 999px;
  font-size: .91rem; font-weight: 500; color: var(--tinta-2);
  transition: background-color .22s var(--ease-out), color .22s var(--ease-out);
}
.nav__enlace:hover { background: var(--papel-2); color: var(--tinta); }
.nav__enlace[aria-current="page"] { background: var(--verde-claro); color: var(--verde-osc); font-weight: 600; }

.cabecera__acciones { display: flex; align-items: center; gap: .6rem; flex: none; }
.cabecera__acciones .btn--principal { display: none; }

.menu-boton {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1.5px solid var(--linea-2); border-radius: 12px; color: var(--tinta);
  background: var(--blanco);
}
.menu-boton:hover { border-color: var(--verde-borde); color: var(--verde-osc); }

.menu-movil {
  display: none; padding: .6rem var(--gutter) 1.3rem;
  background: var(--papel); border-top: 1px solid var(--linea);
}
.menu-movil.es-visible { display: block; }
.menu-movil__lista { list-style: none; padding: 0; margin-bottom: 1rem; }
.menu-movil__enlace {
  display: block; padding: .82rem .2rem; font-size: 1.02rem; font-weight: 500;
  border-bottom: 1px solid var(--linea);
}
.menu-movil__enlace[aria-current="page"] { color: var(--verde-osc); font-weight: 600; }

/* --- Pie ------------------------------------------------------------------ */
.pie { background: var(--papel-3); border-top: 1px solid var(--linea); margin-top: clamp(2.5rem, 6vw, 4rem); }
.pie > .contenedor { padding-block: clamp(2.5rem, 6vw, 3.5rem) 2rem; }
.pie__rejilla { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
.pie__lema { font-size: .92rem; color: var(--tinta-2); margin-top: .9rem; max-width: 34ch; }
.pie__titulo { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: .85rem; }
.pie__lista { list-style: none; padding: 0; display: grid; gap: .55rem; }
.pie__lista a { font-size: .93rem; color: var(--tinta-2); }
.pie__lista a:hover { color: var(--verde-osc); text-decoration: underline; text-underline-offset: 3px; }

.pie__legal {
  margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--linea-2);
  display: grid; gap: .85rem;
  font-size: .81rem; line-height: 1.6; color: var(--tinta-3);
}
.pie__legal strong { color: var(--tinta-2); }


/* =============================================================================
   7. MIGAS Y CABECERAS DE SECCION
   ============================================================================= */
.migas { padding-block: 1rem .2rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; font-size: .82rem; color: var(--tinta-3); }
.migas li + li::before { content: "›"; margin-right: .4rem; color: var(--linea-2); }
.migas a { color: var(--tinta-2); }
.migas a:hover { color: var(--verde-osc); text-decoration: underline; text-underline-offset: 3px; }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 500; }

.cabecera-seccion { padding-block: clamp(1.8rem, 5vw, 3rem) clamp(1.2rem, 3vw, 1.8rem); }
.cabecera-seccion--compacta { padding-bottom: 1rem; }
.cabecera-seccion__icono {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  background: var(--verde-claro); color: var(--verde-osc);
}
.cabecera-seccion h1 { font-size: clamp(1.85rem, 4.6vw, 2.7rem); }
.cabecera-seccion__entrada {
  margin-top: 1rem; font-size: clamp(1rem, 2.2vw, 1.1rem);
  color: var(--tinta-2); max-width: 60ch;
}


/* =============================================================================
   8. PORTADA
   ============================================================================= */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.4rem, 6vw, 4.2rem) clamp(2.4rem, 6vw, 4rem);
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(46,106,92,.11), transparent 62%),
    radial-gradient(760px 420px at 2% 10%, rgba(176,86,58,.06), transparent 60%),
    var(--papel);
}
.hero__interior { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
.hero__antetitulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; color: var(--verde-osc);
  background: var(--verde-claro); padding: .4rem .85rem; border-radius: 999px;
}
.hero__texto h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); margin-top: 1.15rem; }
.hero__entrada {
  margin-top: 1.15rem; max-width: 46ch;
  font-size: clamp(1.02rem, 2.3vw, 1.15rem); color: var(--tinta-2);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero__sellos {
  list-style: none; padding: 0; margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linea); display: grid; gap: .7rem;
}
.hero__sellos li { display: flex; gap: .6rem; align-items: flex-start; font-size: .89rem; color: var(--tinta-2); }
.hero__sellos svg { color: var(--verde); flex: none; margin-top: 2px; }

.hero__figura { display: none; position: relative; height: 340px; }
.hero__anillo {
  position: absolute; inset: 12% 8%; border-radius: 50%;
  border: 1.5px dashed var(--verde-borde); opacity: .8;
}
.hero__tarjeta {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.05rem 1.3rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-l);
  box-shadow: var(--sombra-l); color: var(--verde-osc);
  font-size: .82rem; font-weight: 600;
}
.hero__tarjeta--1 { top: 6%;  left: 4%; }
.hero__tarjeta--2 { top: 40%; right: 2%; }
.hero__tarjeta--3 { bottom: 6%; left: 24%; }

.hueco-anuncio-portada { padding-top: .5rem; }

/* --- Tarjetas de categoría ------------------------------------------------ */
.rejilla-cat { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.tarjeta-cat {
  display: flex; align-items: center; gap: 1.05rem;
  padding: 1.2rem 1.3rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-l);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              border-color .3s var(--ease-out);
}
.tarjeta-cat:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--verde-borde); }
.tarjeta-cat__icono {
  flex: none; width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--verde-claro); color: var(--verde-osc);
}
.tarjeta-cat__texto { display: grid; gap: .25rem; }
.tarjeta-cat__nombre { font-family: var(--display); font-weight: 600; font-size: 1.08rem; }
.tarjeta-cat__resumen { font-size: .88rem; color: var(--tinta-2); }
.tarjeta-cat__flecha { flex: none; color: var(--verde); transition: transform .3s var(--ease-out); }
.tarjeta-cat:hover .tarjeta-cat__flecha { transform: translateX(4px); }

/* --- Bloque de confianza -------------------------------------------------- */
.seccion--confianza { background: var(--verde-osc); color: #F2F7F5; }
.confianza { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.confianza h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2rem); }
.confianza__texto p { margin-top: 1rem; color: #CFE0DA; font-size: .99rem; }
.confianza__texto .enlace-flecha { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.confianza__lista { list-style: none; padding: 0; display: grid; gap: .85rem; align-content: center; }
.confianza__lista li {
  padding: 1rem 1.15rem; border-radius: var(--radio);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  font-size: .92rem; color: #DCE9E5;
}
.confianza__lista strong { color: #fff; }

/* --- Tarjetas de guía ----------------------------------------------------- */
.rejilla-guias { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.tarjeta-guia {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  padding: 1.4rem 1.45rem; background: var(--blanco);
  border: 1px solid var(--linea); border-left: 4px solid var(--verde-borde);
  border-radius: var(--radio);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              border-left-color .3s var(--ease-out);
}
.tarjeta-guia:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-left-color: var(--verde); }
.tarjeta-guia .etiqueta { align-self: flex-start; }
.tarjeta-guia h2, .tarjeta-guia h3 { font-size: 1.12rem; line-height: 1.3; }
.tarjeta-guia p { font-size: .91rem; color: var(--tinta-2); }
.tarjeta-guia__pie {
  margin-top: auto; padding-top: .5rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--tinta-3);
}
.tarjeta-guia--fina { padding: 1.15rem 1.2rem; }


/* =============================================================================
   9. FICHA DE PRODUCTO
   ============================================================================= */
.ficha { padding-bottom: 1rem; }
.ficha__superior { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); grid-template-columns: 1fr; align-items: start; }

/* --- Galería -------------------------------------------------------------- */
.galeria { display: grid; gap: .75rem; }
.galeria__principal {
  aspect-ratio: 1 / 1; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-l);
  display: grid; place-items: center; padding: 1.4rem; overflow: hidden;
}
.galeria__principal img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.galeria--vacia .galeria__principal { color: var(--tinta-3); font-size: .9rem; background: var(--papel-2); }
.galeria__miniaturas { display: flex; gap: .5rem; flex-wrap: wrap; }
.galeria__mini {
  width: 62px; height: 62px; padding: .3rem; background: var(--blanco);
  border: 1.5px solid var(--linea); border-radius: var(--radio-s);
  display: grid; place-items: center; overflow: hidden;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.galeria__mini img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.galeria__mini:hover { border-color: var(--verde-borde); transform: translateY(-2px); }
.galeria__mini.es-activa { border-color: var(--verde); border-width: 2.5px; }

/* --- Resumen -------------------------------------------------------------- */
.ficha__tipo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--verde);
}
.ficha__titulo { font-size: clamp(1.6rem, 4vw, 2.25rem); margin-top: .6rem; }
.ficha__marca { font-size: .93rem; color: var(--tinta-2); margin-top: .5rem; }
.ficha__valoracion { margin-top: .85rem; }
.ficha__gancho {
  margin-top: 1rem; font-size: 1.03rem; color: var(--tinta-2);
  padding-left: .95rem; border-left: 3px solid var(--verde-borde);
}
.ficha__resumen .precio { margin-top: 1.35rem; }
.ficha__resumen .btn--comprar { margin-top: 1.1rem; }
.ficha__aviso-afiliado {
  display: flex; gap: .45rem; align-items: flex-start;
  margin-top: .8rem; font-size: .78rem; color: var(--tinta-3); line-height: 1.5;
}
.ficha__aviso-afiliado svg { flex: none; margin-top: 2px; }
.ficha__aviso-afiliado a { color: var(--verde-osc); text-decoration: underline; text-underline-offset: 2px; }
.ficha__claves { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }

/* --- Cuerpo --------------------------------------------------------------- */
.ficha__cuerpo { display: grid; gap: clamp(1.8rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
.ficha__principal { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); min-width: 0; }
.ficha__lateral { display: grid; gap: 1.5rem; min-width: 0; }

.bloque { min-width: 0; }
.bloque > h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-bottom: 1rem; }
.bloque__nota { font-size: .84rem; color: var(--tinta-3); margin-bottom: 1.1rem; line-height: 1.55; }
.bloque .prosa { margin-top: 1.1rem; }

/* --- Panel radar ---------------------------------------------------------- */
.radar-panel {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-l); padding: 1.4rem 1.35rem 1.6rem;
}
.radar-panel h2 { font-size: 1.2rem; }
.radar-panel__nota {
  margin-top: .55rem; font-size: .78rem; color: var(--tinta-3); line-height: 1.5;
}
.radar-panel__nota svg { display: inline; vertical-align: -2px; }
.radar-panel__nota a { color: var(--verde-osc); text-decoration: underline; text-underline-offset: 2px; }
.radar-panel__cuerpo { margin-top: .8rem; }
.radar-panel__grafico svg { width: 100%; height: auto; }

.radar-notas { display: grid; gap: .5rem; margin-top: .8rem; }
.radar-nota {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem;
  align-items: center; font-size: .84rem; color: var(--tinta-2);
}
.radar-nota__valor { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.radar-barra {
  grid-column: 1 / -1; height: 5px; border-radius: 999px;
  background: var(--papel-3); overflow: hidden;
}
.radar-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--verde); }

/* --- Pros y contras ------------------------------------------------------- */
.pros-contras { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.pros-contras__col { padding: 1.25rem 1.3rem; border-radius: var(--radio); border: 1px solid var(--linea); }
.pros-contras__col h3 { font-size: 1.02rem; margin-bottom: .8rem; }
.pros-contras__col ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.pros-contras__col li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; color: var(--tinta-2); }
.pros-contras__col svg { flex: none; margin-top: 3px; }
.pros-contras__col--pro { background: var(--verde-claro); border-color: var(--verde-borde); }
.pros-contras__col--pro h3 { color: var(--verde-osc); }
.pros-contras__col--pro svg { color: var(--verde); }
.pros-contras__col--contra { background: var(--papel-2); }
.pros-contras__col--contra svg { color: var(--tinta-3); }

.ideal-para {
  margin-top: 1.2rem; padding: 1.25rem 1.35rem;
  background: var(--ambar-cl); border: 1px solid #EBD9AE; border-radius: var(--radio);
}
.ideal-para h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; color: #7A5310; }
.ideal-para svg { color: #A97A1C; }
.ideal-para p { margin-top: .55rem; font-size: .96rem; color: var(--tinta-2); }

/* --- Llamadas a la compra ------------------------------------------------- */
.cta-intermedia {
  display: grid; gap: .75rem; justify-items: center; text-align: center;
  padding: 1.5rem 1.4rem; background: var(--papel-2);
  border: 1px solid var(--linea); border-radius: var(--radio-l);
}
.cta-intermedia .precio { justify-content: center; }
.cta-intermedia .btn { order: 2; }

.cta-final {
  display: grid; gap: 1rem; align-items: center;
  padding: 1.6rem 1.5rem; background: var(--verde-claro);
  border: 1px solid var(--verde-borde); border-radius: var(--radio-l);
}
.cta-final__titulo { font-family: var(--display); font-weight: 600; font-size: 1.12rem; margin-bottom: .5rem; }

/* --- Especificaciones ----------------------------------------------------- */
.especificaciones { display: grid; gap: 1.5rem; }
.especificaciones__grupo h3 {
  font-family: var(--sans); font-size: .77rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--verde);
  padding-bottom: .5rem; border-bottom: 1.5px solid var(--verde-borde); margin-bottom: .3rem;
}
.tabla-especs { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla-especs th, .tabla-especs td { padding: .68rem .3rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla-especs th { font-weight: 500; color: var(--tinta-2); width: 52%; }
.tabla-especs td { font-weight: 600; color: var(--tinta); }
.tabla-especs tr:last-child th, .tabla-especs tr:last-child td { border-bottom: 0; }

/* --- Reseñas -------------------------------------------------------------- */
.resenas { display: grid; gap: 1.4rem; }
.resenas__resumen {
  padding: 1.35rem 1.4rem; background: var(--papel-2);
  border-radius: var(--radio); border-left: 4px solid var(--verde-borde);
}
.resenas__resumen h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.resenas__resumen p { font-size: .97rem; color: var(--tinta-2); }
.resenas__lista { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.resena {
  padding: 1.1rem 1.2rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.resena__cabecera { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.resena__autor { font-weight: 600; font-size: .9rem; }
.resena blockquote p { font-size: .93rem; color: var(--tinta-2); }
.resena__meta { margin-top: .6rem; font-size: .76rem; color: var(--tinta-3); }
.resenas__fuente {
  display: flex; gap: .45rem; align-items: flex-start;
  font-size: .78rem; color: var(--tinta-3); line-height: 1.5;
}
.resenas__fuente svg { flex: none; margin-top: 2px; }


/* =============================================================================
   10. COMPARADOR
   ============================================================================= */
.seccion--seleccion { padding-top: clamp(1.4rem, 3vw, 2rem); }

.selector-comparar {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-l); padding: 1.4rem 1.4rem 1.6rem;
}
.selector-comparar__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.selector-comparar__cabecera h2 { font-size: 1.2rem; }
.selector-comparar__buscar {
  position: relative; display: flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border: 1.5px solid var(--linea-2);
  border-radius: 999px; color: var(--tinta-3); min-width: 16rem;
}
.selector-comparar__buscar:focus-within { border-color: var(--verde); color: var(--verde); }
.selector-comparar__buscar input {
  border: 0; background: none; font: inherit; font-size: .9rem;
  color: var(--tinta); width: 100%; outline: none;
}
.selector-comparar__grupos { display: grid; gap: 1.5rem; }

.grupo-comparar { border: 0; padding: 0; margin: 0; min-width: 0; }
.grupo-comparar legend {
  display: flex; align-items: center; gap: .5rem; padding: 0;
  font-family: var(--sans); font-size: .77rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--verde);
  margin-bottom: .8rem;
}
.grupo-comparar__cuenta {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem;
  background: var(--verde-claro); border-radius: 999px; font-size: .72rem; letter-spacing: 0;
}
.grupo-comparar__opciones { display: grid; gap: .6rem; grid-template-columns: 1fr; }

.opcion-comparar { cursor: pointer; }
.opcion-comparar input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion-comparar__caja {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .85rem; border: 1.5px solid var(--linea);
  border-radius: var(--radio); background: var(--papel);
  transition: border-color .22s var(--ease-out), background-color .22s var(--ease-out);
}
.opcion-comparar:hover .opcion-comparar__caja { border-color: var(--verde-borde); }
.opcion-comparar input:checked + .opcion-comparar__caja {
  border-color: var(--verde); background: var(--verde-claro); border-width: 2px;
}
.opcion-comparar input:focus-visible + .opcion-comparar__caja { outline: 2.5px solid var(--verde); outline-offset: 2px; }
.opcion-comparar__caja img {
  width: 46px; height: 46px; flex: none; object-fit: contain;
  background: var(--blanco); border-radius: var(--radio-s); padding: 3px;
  mix-blend-mode: multiply;
}
.opcion-comparar__texto { display: grid; gap: .1rem; min-width: 0; }
.opcion-comparar__texto strong { font-size: .91rem; line-height: 1.3; }
.opcion-comparar__texto span { font-size: .82rem; color: var(--tinta-2); }

.selector-comparar__aviso {
  margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radio-s);
  background: var(--ambar-cl); color: #7A5310; font-size: .87rem;
}

/* --- Resultado ------------------------------------------------------------ */
.comparativa__vacio {
  text-align: center; padding: clamp(2.5rem, 7vw, 4rem) 1.5rem;
  background: var(--blanco); border: 1px dashed var(--linea-2); border-radius: var(--radio-l);
}
.comparativa__vacio-icono { color: var(--verde-borde); display: flex; justify-content: center; margin-bottom: .8rem; }
.comparativa__vacio h2 { font-size: 1.3rem; }
.comparativa__vacio p { margin-top: .7rem; color: var(--tinta-2); max-width: 46ch; margin-inline: auto; font-size: .96rem; }

.comparativa__titulo { font-size: clamp(1.45rem, 3.4vw, 1.9rem); margin-bottom: 1.4rem; }

.comparativa__radar {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-l); padding: 1.5rem 1.4rem;
  margin-bottom: 1.6rem;
}
.comparativa__radar h2 { font-size: 1.2rem; }
.comparativa__radar-nota { margin-top: .5rem; font-size: .8rem; color: var(--tinta-3); }
.comparativa__radar-nota a { color: var(--verde-osc); text-decoration: underline; text-underline-offset: 2px; }
.comparativa__radar .radar { width: 100%; max-width: 520px; height: auto; margin: .8rem auto 0; }

.leyenda {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: .5rem 1.2rem; margin-top: .6rem;
}
.leyenda li { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--tinta-2); }
.leyenda__punto { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.comparativa__tabla-envoltorio {
  overflow-x: auto; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-l);
  -webkit-overflow-scrolling: touch;
}
.comparativa__tabla { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .91rem; }
.comparativa__tabla th, .comparativa__tabla td {
  padding: .72rem .85rem; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--linea);
}
.comparativa__tabla thead td { border-bottom: 0; }
.comparativa__tabla tbody th[scope="row"] {
  font-weight: 500; color: var(--tinta-2); background: var(--papel);
  position: sticky; left: 0; z-index: 2; min-width: 9.5rem;
  border-right: 1px solid var(--linea);
}
.comparativa__unidad { color: var(--tinta-3); font-size: .82rem; font-weight: 400; }

.comparativa__col { text-align: center; padding: 1.1rem .85rem 1rem; position: relative; min-width: 10.5rem; vertical-align: top; }
.comparativa__marcador { display: block; height: 4px; border-radius: 999px; margin-bottom: .8rem; }
.comparativa__quitar {
  position: absolute; top: .4rem; right: .4rem;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  background: var(--papel-2); color: var(--tinta-3);
}
.comparativa__quitar:hover { background: var(--terracota-cl); color: var(--terracota); }
.comparativa__foto { display: block; }
.comparativa__foto img {
  width: 84px; height: 84px; object-fit: contain; margin: 0 auto .6rem;
  mix-blend-mode: multiply;
}
.comparativa__nombre { display: block; font-family: var(--display); font-weight: 600; font-size: .97rem; line-height: 1.28; }
.comparativa__nombre:hover { color: var(--verde-osc); }
.comparativa__marca { display: block; font-size: .78rem; color: var(--tinta-3); margin-top: .25rem; }

.comparativa__tabla tbody td { text-align: center; font-weight: 600; color: var(--tinta); }
.comparativa__tabla tbody td.es-mejor {
  background: var(--verde-claro); color: var(--verde-osc);
  box-shadow: inset 0 0 0 1.5px var(--verde-borde);
}
.comparativa__tabla tbody td.es-mejor::after {
  content: " ★"; font-size: .72rem; color: var(--verde); vertical-align: 1px;
}
.comparativa__grupo th {
  background: var(--papel-2) !important; position: static !important;
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--verde);
  padding-block: .55rem;
}
.comparativa__precio { font-family: var(--display); font-size: 1.1rem; }
.comparativa__resenas { display: block; font-size: .76rem; color: var(--tinta-3); font-weight: 400; }
.comparativa__fila--compra td { padding: 1rem .85rem; }
.comparativa__pie { margin-top: .9rem; font-size: .79rem; color: var(--tinta-3); }

.nota-metodo {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: 1.4rem 1.45rem; background: var(--papel-2);
  border-radius: var(--radio); border: 1px solid var(--linea);
}
.nota-metodo h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.08rem; margin-bottom: .6rem; }
.nota-metodo svg { color: var(--verde); }
.nota-metodo p { font-size: .92rem; color: var(--tinta-2); }
.nota-metodo a { color: var(--verde-osc); text-decoration: underline; text-underline-offset: 2px; }

/* --- Barra flotante de comparación ---------------------------------------- */
.barra-comparar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 30px -16px rgba(66,51,33,.35);
  padding: .7rem var(--gutter);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
}
.barra-comparar__interior {
  max-width: var(--contenedor); margin-inline: auto;
  display: flex; align-items: center; gap: .7rem; flex-wrap: nowrap;
}
.barra-comparar__miniaturas {
  display: flex; gap: .4rem; overflow-x: auto; padding: 5px 5px 5px 0;
  scrollbar-width: none; flex: 0 1 auto; min-width: 0;
}
.barra-comparar__miniaturas::-webkit-scrollbar { display: none; }
.barra-comparar__mini { position: relative; }
.barra-comparar__mini img {
  width: 40px; height: 40px; object-fit: contain; padding: 3px;
  background: var(--papel-2); border-radius: var(--radio-s); mix-blend-mode: multiply;
}
.barra-comparar__quitar {
  position: absolute; top: -5px; right: -5px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--tinta-2); color: #fff; font-size: .78rem; line-height: 1;
  display: grid; place-items: center;
}
.barra-comparar__quitar:hover { background: var(--terracota); }
.barra-comparar__texto { font-size: .87rem; color: var(--tinta-2); flex: 1 1 auto; min-width: 0; }
.barra-comparar .btn { flex: none; white-space: nowrap; }

/* En movil la barra tiene que ser una sola linea baja: el texto explicativo
   sobra y el boton de vaciar se reduce a una cruz. */
@media (max-width: 719px) {
  .barra-comparar { padding-block: .55rem; }
  .barra-comparar__texto { display: none; }
  .barra-comparar__miniaturas { flex: 1 1 auto; }
  .barra-comparar [data-barra-vaciar] {
    flex: none; width: 42px; min-width: 42px; padding: 0; font-size: 0;
  }
  .barra-comparar [data-barra-vaciar]::before { content: "¹5"; font-size: 1rem; }
}


/* =============================================================================
   11. GUIAS Y CONTENIDO EDITORIAL
   ============================================================================= */
.guia__cabecera { padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 2.5vw, 1.5rem); }
.guia__cabecera h1 { font-size: clamp(1.9rem, 4.8vw, 2.85rem); margin-top: .9rem; }
.guia__entrada {
  margin-top: 1.1rem; font-size: clamp(1.03rem, 2.3vw, 1.15rem);
  color: var(--tinta-2); padding-left: 1rem; border-left: 3px solid var(--verde-borde);
}
.guia__meta {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: 1.1rem; font-size: .82rem; color: var(--tinta-3);
}
.guia__descargo {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-top: 2.2rem; padding: 1rem 1.15rem;
  background: var(--papel-2); border-radius: var(--radio);
  font-size: .84rem; color: var(--tinta-3); line-height: 1.55;
}
.guia__descargo svg { flex: none; margin-top: 2px; }

.faqs { margin-top: 2.4rem; display: grid; gap: .6rem; }
.faq {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden;
}
.faq summary {
  padding: 1rem 1.2rem; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-family: var(--sans); font-size: 1.3rem;
  color: var(--verde); transition: transform .25s var(--ease-out);
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--papel-2); }
.faq__cuerpo { padding: 0 1.2rem 1.2rem; }
.faq__cuerpo p { font-size: .95rem; color: var(--tinta-2); }

.descarga {
  display: grid; gap: 1.1rem; align-items: center;
  margin-top: 2.2rem; padding: 1.5rem 1.5rem;
  background: var(--verde-claro); border: 1px solid var(--verde-borde);
  border-radius: var(--radio-l);
}
.descarga h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; }
.descarga svg { color: var(--verde); }
.descarga p { margin-top: .5rem; font-size: .93rem; color: var(--tinta-2); }


/* =============================================================================
   12. ANUNCIOS  (solo huecos marcados — no hay publicidad real)
   ============================================================================= */
.anuncio {
  position: relative; display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, var(--papel-2) 0 10px, var(--papel-3) 10px 20px);
  border: 1.5px dashed var(--linea-2); border-radius: var(--radio);
  color: var(--tinta-3); text-align: center;
  margin-block: clamp(1.5rem, 4vw, 2.2rem);
}
.anuncio__etiqueta {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--tinta-3);
}
.anuncio__medida { font-size: .72rem; margin-top: .3rem; color: var(--tinta-3); opacity: .6; }
.anuncio--banner     { min-height: 96px; width: 100%; }
.anuncio--rectangulo { min-height: 250px; width: 100%; max-width: 340px; margin-inline: auto; }
.anuncio--lateral    { min-height: 380px; width: 100%; }

/* Aviso pequeño en una esquina */
.anuncio-esquina {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 95;
  width: min(300px, calc(100vw - 2rem));
  background: var(--blanco); border: 1.5px solid var(--linea-2);
  border-radius: var(--radio); box-shadow: var(--sombra-l);
  padding: .85rem .9rem .9rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.anuncio-esquina.es-visible { opacity: 1; transform: translateY(0); }
.anuncio-esquina__cerrar {
  position: absolute; top: .35rem; right: .35rem;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tinta-3); background: var(--papel-2);
}
.anuncio-esquina__cerrar:hover { background: var(--papel-3); color: var(--tinta); }
.anuncio-esquina__etiqueta {
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; color: var(--tinta-3);
}
.anuncio-esquina__hueco {
  margin-top: .5rem; min-height: 90px;
  display: grid; place-items: center; font-size: .72rem; color: var(--linea-2);
  background: repeating-linear-gradient(45deg, var(--papel-2) 0 10px, var(--papel-3) 10px 20px);
  border-radius: var(--radio-s);
}

/* Ventana emergente tras la descarga */
.anuncio-ventana {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(36,31,27,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .26s var(--ease-out);
}
.anuncio-ventana.es-visible { opacity: 1; }
.anuncio-ventana__caja {
  position: relative; width: min(420px, 100%);
  background: var(--blanco); border-radius: var(--radio-l);
  padding: 1.8rem 1.6rem 1.5rem; text-align: center;
  box-shadow: var(--sombra-l);
  transform: translateY(12px) scale(.98);
  transition: transform .26s var(--ease-out);
}
.anuncio-ventana.es-visible .anuncio-ventana__caja { transform: translateY(0) scale(1); }
.anuncio-ventana__cerrar {
  position: absolute; top: .7rem; right: .7rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--papel-2); color: var(--tinta-2);
}
.anuncio-ventana__cerrar:hover { background: var(--papel-3); color: var(--tinta); }
.anuncio-ventana__titulo { font-size: 1.25rem; }
.anuncio-ventana__texto { margin-top: .5rem; font-size: .92rem; color: var(--tinta-2); }
.anuncio-ventana__hueco {
  margin-top: 1.2rem; min-height: 220px;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--tinta-3);
  background: repeating-linear-gradient(45deg, var(--papel-2) 0 10px, var(--papel-3) 10px 20px);
  border: 1.5px dashed var(--linea-2); border-radius: var(--radio);
}
.anuncio-ventana__pie { margin-top: 1.1rem; }


/* Zonas tactiles comodas: en pantallas de dedo, ningun boton baja de 44 px.
   El publico de esta web tiene 45-65 anos y a veces la usa un mayor. */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .btn--pequeno { min-height: 44px; padding-inline: 1.1rem; }
  .comparar-check { min-height: 44px; }
  .comparar-check input { width: 20px; height: 20px; }
  .galeria__mini { width: 68px; height: 68px; }
  .nav__enlace { padding-block: .7rem; }
}


/* =============================================================================
   13. RESPONSIVE
   ============================================================================= */
@media (min-width: 540px) {
  .rejilla-guias { grid-template-columns: repeat(2, 1fr); }
  .grupo-comparar__opciones { grid-template-columns: repeat(2, 1fr); }
  .resenas__lista { grid-template-columns: repeat(2, 1fr); }
  .pros-contras { grid-template-columns: repeat(2, 1fr); }
  .cta-final { grid-template-columns: 1fr auto; }
  .cta-final .btn { width: auto; }
  .descarga { grid-template-columns: 1fr auto; }
}

@media (min-width: 720px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .rejilla-cat { grid-template-columns: repeat(2, 1fr); }
  .pie__rejilla { grid-template-columns: repeat(2, 1fr); }
  .confianza { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .cta-intermedia { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 1.5rem; }
  .cta-intermedia .btn { order: 0; }
  .cta-intermedia .btn--bloque { width: auto; }
}

@media (min-width: 960px) {
  .nav { display: block; }
  .cabecera__acciones .btn--principal { display: inline-flex; }
  .menu-boton { display: none; }
  .menu-movil { display: none !important; }

  .hero__interior { grid-template-columns: 1.15fr .85fr; }
  .hero__figura { display: block; }
  .hero__sellos { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

  .rejilla { grid-template-columns: repeat(3, 1fr); }
  .rejilla-cat { grid-template-columns: repeat(3, 1fr); }
  .rejilla-guias--indice { grid-template-columns: repeat(2, 1fr); }
  /* En portada son seis: de tres en tres quedan dos filas completas */
  .rejilla-guias--portada { grid-template-columns: repeat(3, 1fr); }
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  .ficha__superior { grid-template-columns: 1fr 1fr; }
  .ficha__cuerpo { grid-template-columns: minmax(0, 1fr) 320px; }
  .galeria__principal { padding: 2rem; }
}

@media (min-width: 1280px) {
  .ficha__cuerpo { grid-template-columns: minmax(0, 1fr) 350px; }
  .rejilla-guias { grid-template-columns: repeat(4, 1fr); }
  .rejilla-guias--indice { grid-template-columns: repeat(2, 1fr); }
  .rejilla-guias--portada { grid-template-columns: repeat(3, 1fr); }
}

/* El lateral de la ficha se queda pegado al desplazar, en pantallas grandes */
@media (min-width: 960px) {
  .ficha__lateral { position: sticky; top: 88px; }
}

/* Deja sitio a la barra flotante del comparador */
body:has(.barra-comparar:not([hidden])) .pie { padding-bottom: 4.5rem; }


/* =============================================================================
   14. MOVIMIENTO
   ============================================================================= */
@view-transition { navigation: auto; }

.seccion, .tarjeta, .tarjeta-cat, .tarjeta-guia, .bloque {
  opacity: 1;
}
.es-listo .seccion:not(.es-visible),
.es-listo .tarjeta:not(.es-visible),
.es-listo .tarjeta-cat:not(.es-visible),
.es-listo .tarjeta-guia:not(.es-visible),
.es-listo .bloque:not(.es-visible) {
  opacity: 0; transform: translateY(14px);
}
.es-listo .seccion, .es-listo .tarjeta, .es-listo .tarjeta-cat,
.es-listo .tarjeta-guia, .es-listo .bloque {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.es-listo .es-visible { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .es-listo .seccion, .es-listo .tarjeta, .es-listo .tarjeta-cat,
  .es-listo .tarjeta-guia, .es-listo .bloque { opacity: 1 !important; transform: none !important; }
}

@media print {
  .cabecera, .pie, .barra-comparar, .anuncio, .anuncio-esquina,
  .anuncio-ventana, .comparar-check, .salto-contenido { display: none !important; }
  body { background: #fff; }
}