/* ==========================================================================
   Ergosetup · 3-componentes.css
   Piezas reutilizables: cabecera, botones, tarjetas, insignias, tablas,
   galería, barras de valoración y bloques de fuentes.
   ========================================================================== */

/* ==========================================================================
   Cabecera y navegación
   ========================================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.cabecera__interior {
  height: var(--alto-cabecera);
  display: flex; align-items: center; gap: var(--e-5);
}

.logo {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 1.2rem; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; flex-shrink: 0;
}
.logo:hover { color: var(--ink); }
.logo__marca { display: block; width: 30px; height: 30px; flex-shrink: 0; }
.logo__texto small {
  display: block; font-family: var(--fuente-texto);
  font-size: 9.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  line-height: 1; margin-top: 2px;
}

/* Toda la navegacion se agrupa a la derecha: primero las categorias y, pegados
   a ellas, los dos accesos destacados (guias y comparador). El margen
   automatico empuja el bloque entero, asi que el aire queda entre el logo y
   las categorias, no dentro de la navegacion. */
.nav { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: var(--e-4); }
.nav__lista {
  display: flex; align-items: center; gap: var(--e-2);
  list-style: none; margin: 0; padding: 0;
}
.nav__lista a {
  display: block; padding: var(--e-2) var(--e-3);
  font-size: var(--t-base); font-weight: 550;
  color: var(--ink-2); text-decoration: none;
  border-radius: var(--r-md); transition: var(--transicion);
  white-space: nowrap;
}
.nav__lista a:hover { color: var(--ink); background: var(--surface-2); }
.nav__lista a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }

/* Guias y comparador no son categorias: se pintan como botones para que se
   lean como un destino distinto y no como el sexto elemento de la fila. */
.nav__destacado {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); padding: var(--e-2) var(--e-4);
}
.nav__lista a.nav__destacado:hover {
  background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line);
}
.nav__lista a.nav__destacado[aria-current="page"] { border-color: var(--brand-line); }

/* Boton de menu */
.boton-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--ink-2);
  cursor: pointer; transition: var(--transicion);
}
.boton-icono:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-fuerte); }
.boton-icono svg { width: 18px; height: 18px; }

.cabecera__menu { display: none; }

/* Franja intermedia: caben las dos filas, pero justas. Se recorta el aire
   antes que dejar que la barra desborde. */
@media (min-width: 901px) and (max-width: 1080px) {
  .cabecera__interior { gap: var(--e-3); }
  .nav { gap: var(--e-3); }
  .nav__lista a { padding: var(--e-2); }
  .nav__destacado { padding: var(--e-2) var(--e-3); }
  .logo__texto small { display: none; }
}

/* Navegación en móvil: el menú se despliega bajo la cabecera */
@media (max-width: 900px) {
  .cabecera__menu { display: inline-flex; margin-left: auto; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sombra-2);
    padding: var(--e-3) var(--e-4) var(--e-5);
    display: none;
    flex-direction: column; align-items: stretch; gap: var(--e-3);
  }
  .nav[data-abierto="true"] { display: flex; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__lista a { padding: var(--e-3) var(--e-4); font-size: var(--t-md); }
  .nav__lista--destacados {
    padding-top: var(--e-3); border-top: 1px solid var(--line);
  }
  .nav__destacado { text-align: center; }
}

/* ==========================================================================
   Botones
   ========================================================================== */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  font-family: var(--fuente-texto);
  font-size: var(--t-base); font-weight: 600;
  line-height: 1.3; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; transition: var(--transicion);
}
.boton svg { width: 16px; height: 16px; flex-shrink: 0; }

.boton--primario { background: var(--brand); color: #fff; box-shadow: var(--sombra-1); }
.boton--primario:hover { background: var(--brand-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--sombra-2); }

.boton--secundario { background: var(--surface); color: var(--ink); border-color: var(--line-fuerte); }
.boton--secundario:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }

.boton--fantasma { background: transparent; color: var(--brand); padding-inline: var(--e-2); }
.boton--fantasma:hover { color: var(--brand-hover); text-decoration: underline; }

/* Botón de compra: la única llamada a la acción en color ámbar del sitio */
.boton-comprar {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  width: 100%;
  padding: var(--e-4) var(--e-5);
  background: linear-gradient(180deg, var(--cta) 0%, var(--cta-hover) 100%);
  color: #fff; text-decoration: none;
  font-family: var(--fuente-titulo);
  font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em;
  border: 0; border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
  transition: var(--transicion);
}
.boton-comprar:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--sombra-3); filter: brightness(1.06); }
.boton-comprar:active { transform: translateY(0); }
.boton-comprar svg { width: 18px; height: 18px; }
.boton-comprar--pequeno { padding: var(--e-3) var(--e-4); font-size: var(--t-base); }

.nota-afiliado {
  display: block; margin-top: var(--e-2);
  font-size: var(--t-xs); color: var(--ink-3); text-align: center; line-height: 1.45;
}

/* ==========================================================================
   Insignias y etiquetas
   ========================================================================== */
.insignia {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 3px 9px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r-full); white-space: nowrap;
}
.insignia--marca  { background: var(--brand-soft); color: var(--brand); }
.insignia--bien   { background: var(--bien-soft);  color: var(--bien); }
.insignia--mal    { background: var(--mal-soft);   color: var(--mal); }
.insignia--neutro { background: var(--neutro-soft);color: var(--neutro); }
.insignia--aviso  { background: var(--aviso-soft); color: var(--aviso); }
.insignia--cta    { background: var(--cta-soft);   color: var(--cta); }

.etiqueta-categoria {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand);
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.tarjeta {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: var(--transicion);
}

/* Enlace "estirado": cubre toda la tarjeta para que se pueda hacer clic en
   cualquier punto (imagen, precio, texto de "Ver comparativa"...) y no
   solo en el pequeno enlace del titulo. Los enlaces genuinamente
   independientes que pueda haber dentro de la tarjeta (el titulo, la
   etiqueta de categoria) van con z-index superior para que sigan siendo
   clicables por su cuenta si se pulsa justo encima de ellos. */
.enlace-tarjeta { position: absolute; inset: 0; z-index: 1; }
.tarjeta-producto__titulo a,
.etiqueta-categoria,
.tarjeta-producto .boton-comprar { position: relative; z-index: 2; }
.tarjeta--enlace:hover {
  border-color: var(--brand-line);
  box-shadow: var(--sombra-2);
  transform: translateY(-3px);
}
.tarjeta__cuerpo { padding: var(--e-5); }

/* --- Tarjeta de producto ------------------------------------------------- */
.tarjeta-producto { display: flex; flex-direction: column; height: 100%; }
/* La imagen va en posicion absoluta a proposito. Las fotos de Amazon son
   cuadradas de 1500 px: si se dejan en flujo normal, su tamano intrinseco
   fuerza el alto del contenedor y rompe el aspect-ratio, dejando tarjetas
   de alturas distintas en la misma fila. */
.tarjeta-producto__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;                 /* las fotos de producto vienen sobre blanco */
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* La imagen NO se escala al pasar el cursor (ver nota mas abajo sobre el
   hover). Ademas, la imagen se ancla hacia la ZONA INFERIOR del marco en
   lugar de centrarse en el medio: la insignia "Recomendado" / descuento
   ocupa la esquina superior izquierda con position:absolute, y un centrado
   vertical puro dejaba solo ~2px de margen con fotos anchas (el teclado),
   tocando o solapando la insignia. Reservando siempre un hueco fijo arriba
   (via max-height mas bajo que el ancho disponible) la imagen nunca invade
   esa esquina, sea cual sea la proporcion de la foto. */
.tarjeta-producto__media img {
  position: absolute;
  left: 0; right: 0; bottom: 6%; top: auto;
  margin-inline: auto;
  max-width: 78%; max-height: 62%;
  width: auto; height: auto; object-fit: contain;
}

.tarjeta-producto__marcas {
  position: absolute; top: var(--e-3); left: var(--e-3);
  display: flex; flex-wrap: wrap; gap: var(--e-2);
}

.tarjeta-producto__cuerpo {
  padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-3);
  flex: 1;
}
.tarjeta-producto__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-lg); font-weight: 600; line-height: 1.25;
  margin: 0;
}
.tarjeta-producto__titulo a { color: var(--ink); text-decoration: none; }
.tarjeta-producto__titulo a:hover { color: var(--brand); }
.tarjeta-producto__extracto {
  font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; margin: 0;
}
.tarjeta-producto__pie {
  margin-top: auto; padding-top: var(--e-3);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-3); border-top: 1px solid var(--line);
}

/* --- Precio -------------------------------------------------------------- */
.precio { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.precio__actual {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); line-height: 1;
}
.precio__anterior { font-size: var(--t-sm); color: var(--ink-3); text-decoration: line-through; }
.precio__nota { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--e-1); }

/* --- Valoración en estrellas -------------------------------------------- */
.valoracion { display: inline-flex; align-items: center; gap: var(--e-2); }
.estrellas { position: relative; display: inline-block; flex-shrink: 0; line-height: 1; }
.estrellas__fondo, .estrellas__relleno { display: block; white-space: nowrap; font-size: 15px; letter-spacing: 1px; }
.estrellas__fondo { color: var(--line-fuerte); }
.estrellas__relleno {
  position: absolute; inset: 0; overflow: hidden;
  color: var(--cta); width: var(--relleno, 0%);
}
.valoracion__cifra { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.valoracion__num   { font-size: var(--t-sm); color: var(--ink-3); }

/* Histograma de estrellas */
.histograma { display: grid; gap: var(--e-2); }
.histograma__fila { display: grid; grid-template-columns: 3.4em 1fr 2.8em; align-items: center; gap: var(--e-3); }
.histograma__etiqueta { font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.histograma__barra { height: 9px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; }
.histograma__valor { height: 100%; background: var(--cta); border-radius: var(--r-full); }
.histograma__pct { font-size: var(--t-sm); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tablas
   ========================================================================== */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.tabla caption { text-align: left; font-size: var(--t-sm); color: var(--ink-3); padding-bottom: var(--e-3); }
.tabla th, .tabla td { padding: var(--e-3) var(--e-4); text-align: left; vertical-align: top; }
.tabla thead th {
  font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-2); background: var(--surface-2);
  border-bottom: 1px solid var(--line-fuerte);
  position: sticky; top: 0;
}
.tabla tbody tr { border-bottom: 1px solid var(--line); }
.tabla tbody tr:last-child { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--surface-2); }
.tabla th[scope="row"] { font-weight: 550; color: var(--ink-2); width: 42%; }
.tabla td { color: var(--ink); }

.tabla-envoltorio {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.tabla-envoltorio .scroll-x { max-width: 100%; }

/* ==========================================================================
   Bloques de aviso, nota y fuente
   ========================================================================== */
.aviso {
  display: flex; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--aviso-soft);
  border: 1px solid var(--aviso-line);
  border-radius: var(--r-md);
  font-size: var(--t-base); line-height: 1.6;
  color: var(--ink);
}
.aviso__icono { flex-shrink: 0; width: 20px; height: 20px; color: var(--aviso); margin-top: 2px; }
.aviso--marca { background: var(--brand-soft); border-color: var(--brand-line); }
.aviso--marca .aviso__icono { color: var(--brand); }

.nota-metodo {
  font-size: var(--t-sm); color: var(--ink-3);
  line-height: 1.6; padding-left: var(--e-4);
  border-left: 2px solid var(--line-fuerte);
}

/* Cita de fuente con enlace verificable */
.fuente {
  display: block;
  padding: var(--e-4) var(--e-5);
  background: var(--surface-2);
  border-radius: var(--r-md);
  border-left: 3px solid var(--brand);
  font-size: var(--t-sm); line-height: 1.6;
}
.fuente__tipo {
  display: inline-block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); margin-bottom: var(--e-2);
}
.fuente__titulo { font-weight: 600; color: var(--ink); display: block; margin-bottom: 2px; }
.fuente__meta { color: var(--ink-3); display: block; }
.fuente__matiz { display: block; margin-top: var(--e-2); color: var(--ink-2); font-style: italic; }

/* Lista de referencias al pie de guías y comparativas */
.referencias { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); counter-reset: ref; }
.referencias li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-3);
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin: 0;
}
.referencias li::before {
  counter-increment: ref; content: counter(ref);
  display: grid; place-items: center;
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand);
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700;
}

/* ==========================================================================
   Galería de producto
   ========================================================================== */
.galeria { display: grid; gap: var(--e-3); }
.galeria__principal {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* Mismo motivo que en la tarjeta: la imagen no debe dictar el alto de la caja */
.galeria__principal img {
  position: absolute; inset: 0; margin: auto;
  max-width: 84%; max-height: 84%;
  width: auto; height: auto; object-fit: contain;
}
.galeria__contador {
  position: absolute; bottom: var(--e-3); right: var(--e-3);
  padding: 3px 10px; border-radius: var(--r-full);
  background: rgba(20,24,28,.7); color: #fff;
  font-size: var(--t-xs); font-variant-numeric: tabular-nums;
}
.galeria__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: var(--r-full); cursor: pointer; color: #14181C;
  box-shadow: var(--sombra-1); transition: var(--transicion);
}
.galeria__flecha:hover { background: #fff; box-shadow: var(--sombra-2); }
.galeria__flecha--prev { left: var(--e-3); }
.galeria__flecha--sig  { right: var(--e-3); }
.galeria__flecha svg { width: 18px; height: 18px; }

.galeria__miniaturas {
  display: flex; gap: var(--e-2);
  overflow-x: auto; padding-bottom: var(--e-2);
  scrollbar-width: thin;
}
.galeria__miniatura {
  flex: 0 0 auto;
  width: 66px; height: 66px;
  background: #fff; padding: 5px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: var(--transicion);
  overflow: hidden;
}
/* width y height al 100% con object-fit contain, en lugar de max-*: las
   imagenes de Amazon son mas altas que anchas y con max-height se salian
   de la caja de 66 px. */
.galeria__miniatura img { width: 100%; height: 100%; object-fit: contain; }
.galeria__miniatura:hover { border-color: var(--line-fuerte); }
.galeria__miniatura[aria-current="true"] {
  border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft);
}

/* ==========================================================================
   Listas de pros y contras
   ========================================================================== */
.pros-contras { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
.panel-lista {
  padding: var(--e-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.panel-lista--pros   { border-left: 3px solid var(--bien); }
.panel-lista--contras{ border-left: 3px solid var(--mal); }
.panel-lista h3 {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-md); margin-bottom: var(--e-4);
}
.panel-lista h3 svg { width: 18px; height: 18px; }
.panel-lista--pros h3 svg { color: var(--bien); }
.panel-lista--contras h3 svg { color: var(--mal); }
.panel-lista ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.panel-lista li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-3);
  font-size: var(--t-base); line-height: 1.55; margin: 0; color: var(--ink-2);
}
.panel-lista li::before {
  content: ""; width: 16px; height: 16px; margin-top: 3px;
  background-repeat: no-repeat; background-size: contain; flex-shrink: 0;
}
.panel-lista--pros li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230E7C5A'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.panel-lista--contras li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23B03F2E'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Pie de página
   ========================================================================== */
.pie {
  margin-top: var(--e-9);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: var(--e-7) var(--e-5);
}
/* El min() de los minmax es necesario: sin el, los minimos de 240 y 160 px
   suman mas que el ancho disponible en un movil de 375 px y el pie provocaba
   scroll horizontal en toda la pagina. */
.pie__rejilla {
  display: grid; gap: var(--e-6);
  grid-template-columns:
    minmax(min(240px, 100%), 1.4fr)
    repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  padding-bottom: var(--e-6);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__intro { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .pie__rejilla { grid-template-columns: 1fr; gap: var(--e-5); }
}
.pie__intro p { font-size: var(--t-base); color: var(--ink-2); margin-top: var(--e-3); max-width: 40ch; }
.pie h3 {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--e-3);
}
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.pie ul a { color: var(--ink-2); text-decoration: none; font-size: var(--t-base); }
.pie ul a:hover { color: var(--brand); text-decoration: underline; }

.pie__legal {
  padding-top: var(--e-5);
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  align-items: center; justify-content: space-between;
  font-size: var(--t-sm); color: var(--ink-3);
}
.pie__aviso-afiliado {
  margin-top: var(--e-4); padding: var(--e-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6;
}

/* ==========================================================================
   Migas de pan
   ========================================================================== */
.migas { padding-block: var(--e-4); font-size: var(--t-sm); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: 0; margin: 0; }
.migas li { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--ink-3); }
.migas li:not(:last-child)::after { content: "/"; color: var(--line-fuerte); }
.migas a { color: var(--ink-2); text-decoration: none; }
.migas a:hover { color: var(--brand); text-decoration: underline; }