/* ---- Tokens de marca: valores fijos, NO se tocan ---- */
:root {
  --primario: #111111;
  --tinta: #0C0C0C;
  --acento: #FF3B6B;
  --papel: #FFFFFF;
  --texto: #16150F; /* solo para la paleta del editor de bloques (theme.json); el color de texto real del sitio sale de --en-superficie */
  --texto-suave: #6E6A5E;

  /* ---- Roles de superficie ---- */
  --superficie: var(--papel);
  --panel: #F4F4F5;
  --en-superficie: var(--primario);
  --en-superficie-suave: var(--texto-suave);
  --borde-suave: #E7E7E9;
  --realce: var(--acento);        /* fondo de píldora o filete; NUNCA texto sobre claro */
  --en-realce: var(--primario);   /* lo que se escribe encima del rosa */

  /* ---- Layout ---- */
  --aire-lateral: 24px;
  --ancho-max: 1440px;
  --panel-radio: 40px;
  --tarjeta-radio: 24px;
  --gap: 32px;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --texto-familia: 'Inter', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

[data-tema="oscuro"] {
  --superficie: var(--tinta);
  --panel: #161616;
  --en-superficie: var(--papel);
  --en-superficie-suave: rgba(255, 255, 255, 0.65);
  --borde-suave: rgba(255, 255, 255, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--superficie);
  color: var(--en-superficie);
  font-family: var(--texto-familia);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; }

.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-inline: var(--aire-lateral);
}

/* Panel redondeado: la firma visual de la referencia */
.panel {
  background: var(--panel);
  border-radius: var(--panel-radio);
  padding: 56px 48px;
  margin: 48px 0;
}

.meta {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 24px;
  color: var(--en-superficie-suave);
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  width: auto; height: auto;
  padding: 12px 20px;
  background: var(--superficie);
  color: var(--en-superficie);
  z-index: 100;
}

:focus-visible { outline: 3px solid var(--realce); outline-offset: 2px; }

@media (max-width: 900px) {
  :root { --aire-lateral: 16px; --gap: 20px; --panel-radio: 24px; }
  .panel { padding: 32px 20px; margin: 32px 0; }
}

/* ---- Redes sociales ---- */
.redes { display: flex; align-items: center; gap: 14px; list-style: none; margin: 0; padding: 0; }
.redes__enlace {
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit; transition: color .15s ease;
}
.redes__enlace:hover, .redes__enlace:focus-visible { color: var(--realce); }
.redes--header .redes__enlace svg { width: 18px; height: 18px; }
.redes--footer .redes__enlace svg { width: 22px; height: 22px; }

@media (max-width: 900px) { .redes__enlace { min-width: 44px; min-height: 44px; } }

/* ---- Grillas ---- */
.grilla { display: grid; gap: var(--gap); }
.grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grilla--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1200px) { .grilla--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grilla--3, .grilla--4, .grilla--5 { grid-template-columns: 1fr; } }

/* ---- Encabezado de sección ---- */
.encabezado-seccion {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 32px;
}
.encabezado-seccion__titulo { font-size: 36px; line-height: 40px; font-weight: 600; }
.encabezado-seccion__bajada {
  font-size: 20px; line-height: 28px; margin: 8px 0 0;
  color: var(--en-superficie-suave);
}
@media (max-width: 760px) {
  .encabezado-seccion__titulo { font-size: 26px; line-height: 30px; }
  .encabezado-seccion__bajada { font-size: 16px; line-height: 24px; }
}

/* ---- Píldora ---- */
.pildora {
  display: inline-block; width: fit-content;
  font-family: var(--display); font-size: 16px; line-height: 24px; font-weight: 500;
  padding: 4px 14px; border-radius: 999px;
  background: var(--realce); color: var(--en-realce);
  text-decoration: none; white-space: nowrap;
}
.pildora:hover { filter: brightness(.94); }
.pildora--hueca {
  background: transparent; color: var(--en-superficie);
  border: 1px solid var(--borde-suave);
}
/* Sin consumidor en PHP hoy (front-page.php ya no marca ninguna píldora como activa:
   son enlaces de navegación, no filtros, y ninguna representa el estado actual de la página).
   Se deja para cuando archive.php marque la categoría actual dentro de una fila de píldoras. */
.pildora--activa { background: var(--en-superficie); color: var(--superficie); }

/* ---- Tarjeta vertical ---- */
.tarjeta { display: flex; flex-direction: column; gap: 14px; }
.tarjeta__media { position: relative; }        /* NO es un <a> */
.tarjeta__imagen-link { display: block; }      /* si queda inline, el borde dibuja una franja vacía */
.tarjeta__media img {
  aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
  border-radius: var(--tarjeta-radio);
  background: var(--borde-suave);
}
/* Los placeholders del seed son fondo --acento sólido (mismo rosa que el
   fondo de la píldora): sin una sombra propia, la píldora se funde con la
   foto y pierde toda forma de chip — mismo tipo de bug que el negro sobre
   negro que ya advierte PRODUCT.md, pero en rosa. La sombra la separa de
   CUALQUIER foto, no solo de este placeholder. Bug real de la Tarea 10. */
.tarjeta__media .pildora { position: absolute; top: 14px; left: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.tarjeta__titular { font-size: 16px; line-height: 24px; font-weight: 600; }
.tarjeta__titular a { text-decoration: none; }
.tarjeta__titular a:hover { text-decoration: underline; text-decoration-color: var(--realce); }

/* ---- Tarjeta horizontal ---- */
.tarjeta-h {
  display: grid; grid-template-columns: 1fr 160px; gap: 20px; align-items: center;
  background: var(--superficie); border-radius: var(--tarjeta-radio);
  border: 1px solid var(--borde-suave); padding: 20px;
}
.tarjeta-h__cuerpo { display: flex; flex-direction: column; gap: 8px; }
.tarjeta-h__titular { font-size: 18px; line-height: 26px; font-weight: 600; }
.tarjeta-h__titular a { text-decoration: none; }
.tarjeta-h__media a { display: block; }
.tarjeta-h__media img {
  aspect-ratio: 1 / 1; object-fit: cover; width: 100%;
  border-radius: 16px; background: var(--borde-suave);
}
@media (max-width: 600px) { .tarjeta-h { grid-template-columns: 1fr 100px; padding: 14px; } }

/* ---- Tarjeta de categoría ---- */
.tarjeta-categoria { text-decoration: none; display: block; }
.tarjeta-categoria__media img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  border-radius: var(--tarjeta-radio); background: var(--borde-suave);
}
.tarjeta-categoria__pie { display: flex; align-items: center; gap: 10px; padding-top: 12px; }
.tarjeta-categoria__pie strong { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; }
.tarjeta-categoria__pie em { font-style: normal; display: block; }
.punto { width: 20px; height: 20px; border-radius: 50%; background: var(--realce); flex-shrink: 0; }

/* ---- Paginación ---- */
.pagination { margin: 48px 0; font-family: var(--display); font-weight: 600; }
.pagination .page-numbers {
  display: inline-block; padding: 8px 16px; margin-right: 8px;
  border: 1px solid var(--borde-suave); border-radius: 999px; text-decoration: none;
}
.pagination .page-numbers.current {
  background: var(--realce); color: var(--en-realce); border-color: var(--realce);
}

/* ---- Cabecera: una barra clara, no sticky ---- */
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde-suave); }
.cabecera__fila { display: flex; align-items: center; gap: 28px; min-height: 80px; }

.cabecera__marca {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.cabecera__marca img { height: 30px; width: auto; }
.cabecera__marca span {
  font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}

.cabecera__menu { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.cabecera__menu a {
  font-family: var(--display); font-size: 16px; line-height: 24px; font-weight: 500;
  text-decoration: none;
}
/* NUNCA color:var(--realce) acá: .cabecera__fondo cambia de --papel (claro) a
   --tinta (oscuro), y el rosa como texto sobre --papel da 3,45:1 (no llega a
   4,5:1). El subrayado rosa sí vale como elemento gráfico (>=3:1) en los dos
   temas — bug real encontrado en la revisión visual de la Tarea 10. */
.cabecera__menu a:hover {
  text-decoration: underline; text-decoration-color: var(--realce); text-decoration-thickness: 2px;
}

.cabecera__acciones { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.cabecera__busqueda input {
  /* --borde-suave (pensado para separadores decorativos) da 1,2:1 sobre
     --superficie en los dos temas: no llega al 3:1 que pide un borde de
     campo de formulario (elemento gráfico funcional, no decorativo).
     --en-superficie-suave sí cumple (>=5:1 en los dos temas, ya validado
     como color de meta) — bug real encontrado en la revisión de la Tarea 10. */
  background: transparent; border: 1px solid var(--en-superficie-suave); border-radius: 999px;
  color: var(--en-superficie); font-family: var(--texto-familia); font-size: 14px;
  padding: 9px 16px; width: 170px;
}
.cabecera__boton-icono, .cabecera__hamburguesa {
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: 6px; display: inline-flex; align-items: center;
}
.cabecera__boton-icono svg, .cabecera__hamburguesa svg { width: 22px; height: 22px; }

.cabecera__boton-icono .icono-luna { display: none; }
[data-tema="oscuro"] .cabecera__boton-icono .icono-sol { display: none; }
[data-tema="oscuro"] .cabecera__boton-icono .icono-luna { display: inline; }

.cabecera__panel { border-top: 1px solid var(--borde-suave); padding: 16px 0 24px; }
.cabecera__busqueda--panel { margin-bottom: 16px; }
.cabecera__busqueda--panel input { width: 100%; }
.cabecera__menu--panel { flex-direction: column; align-items: flex-start; gap: 14px; }
.cabecera__menu--panel a { font-size: 20px; }

/* El display:none va DESPUÉS del bloque combinado de los botones: con la
   misma especificidad gana la última regla. Declarado antes, la hamburguesa
   queda visible en desktop junto al nav y le roba el espacio al logo. */
.cabecera__hamburguesa { display: none; }

/* El nav de 9 categorías más la marca y las acciones no entra por debajo de
   ~1150px: el corte va acá, no en 900, o la página scrollea en horizontal. */
@media (max-width: 1150px) {
  .cabecera__hamburguesa { display: inline-flex; }
  .cabecera__nav { display: none; }
  .cabecera__busqueda:not(.cabecera__busqueda--panel) { display: none; }
}

/* ---- Pie ---- */
.pie { background: var(--primario); color: var(--papel); margin-top: 80px; padding: 56px 0 40px; }
.pie__interior { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.pie__marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.pie__marca img { height: 34px; width: auto; }
.pie__marca span { font-family: var(--display); font-size: 24px; font-weight: 700; }
.pie__secciones ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.pie__secciones a { font-family: var(--display); font-size: 14px; font-weight: 500; text-decoration: none; }
.pie__secciones a:hover { color: var(--realce); }   /* rosa sobre negro: 5,67:1, válido */
.pie__legal { color: rgba(255, 255, 255, .65); margin: 0; }

/* El pie es SIEMPRE oscuro, en los dos temas: el foco tiene que verse ahí. */
.pie :focus-visible { outline-color: var(--realce); }

/* ---- Cabecera: ajuste de ancho para las 9 categorías ----
   Con los 9 nombres reales (incluido "Entretenimiento"), la fila necesita
   ~1305px para no desbordar — más que el breakpoint de hamburguesa (1150px).
   En vez de correr ese breakpoint (que dejaría el nav de escritorio
   prácticamente inutilizable), se angosta el espaciado. Verificado con el
   browser que esto cierra el desborde en 1151–1399px. */
@media (max-width: 1400px) {
  .cabecera__fila { gap: 16px; }
  .cabecera__menu { gap: 12px; }
  .cabecera__busqueda:not(.cabecera__busqueda--panel) input { width: 120px; }
}

/* ---- Cabecera: logo negro/blanco según el tema ----
   La cabecera hereda var(--superficie), que pasa a --tinta en modo oscuro:
   el logo negro (mono-negra.svg) queda invisible sobre ese fondo. Se
   togglean dos <img> con el mismo patrón que los íconos sol/luna. */
.cabecera__marca-logo--oscuro { display: none; }
[data-tema="oscuro"] .cabecera__marca-logo--claro { display: none; }
[data-tema="oscuro"] .cabecera__marca-logo--oscuro { display: inline; }

/* ---- Franja de cotización ---- */
.franja-dolar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--borde-suave); border-radius: var(--tarjeta-radio);
  padding: 18px 24px; margin: 40px 0;
}
.franja-dolar p { margin: 0; }
.franja-dolar__cifra {
  font-family: var(--display); font-size: 28px; line-height: 32px; font-weight: 700;
}
.franja-dolar__cifra span { font-size: 15px; font-weight: 500; color: var(--en-superficie-suave); }

/* ---- Tarjeta de Facebook ---- */
.tarjeta-fb {
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--tarjeta-radio); padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.tarjeta-fb__texto { font-family: var(--display); font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; }
.tarjeta-fb__texto a { text-decoration: none; }
.tarjeta-fb__texto a:hover { text-decoration: underline; text-decoration-color: var(--realce); }

/* ---- Hero: foto a la derecha, tarjeta montada por la izquierda ----
   NOTA: la primera versión de esta regla usaba CSS Grid (2 columnas) con la
   tarjeta en la columna 1 y un margin-right negativo para "empujarla" sobre
   la foto. No funciona: un grid item con justify-self:start ancla su borde
   IZQUIERDO al inicio del área y el margin-right (al ser el último margen
   de la fila) no reposiciona la caja — se verificó con el browser que
   cambiar ese valor no movía la tarjeta ni un píxel. La superposición real
   se logra sacando la tarjeta del flujo (position:absolute) sobre un
   contenedor relativo, con un ancho que a propósito excede el punto donde
   arranca la foto. */
.hero { margin: 40px 0 64px; }
.hero__cuerpo {
  position: relative; display: flex; justify-content: flex-end; align-items: center;
  min-height: 420px;   /* fallback si alguna vez no hay foto destacada */
}
.hero__imagen { display: block; width: 50%; }
.hero__imagen img {
  width: 100%; height: clamp(260px, 40vh, 420px); object-fit: cover;
  border-radius: var(--tarjeta-radio); background: var(--borde-suave);
}
.hero__tarjeta {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 2;
  /* La foto ocupa el 50% del ancho (.hero__imagen), así que el punto donde
     arranca la foto está siempre a la mitad del contenedor. Un ancho de
     "50% + Npx" hace que la tarjeta desborde sobre la foto exactamente Npx,
     sin importar el ancho real del contenedor (852px a 1392px según el
     viewport) — ver la nota de arriba sobre por qué no se puede lograr esto
     con grid + margin negativo. */
  width: calc(50% + 96px);
  max-width: 800px;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--tarjeta-radio);
  padding: 36px 40px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .08);
}
.hero__titular { font-size: 34px; line-height: 40px; font-weight: 700; }
.hero__titular a { text-decoration: none; }
.hero__titular a:hover { text-decoration: underline; text-decoration-color: var(--realce); }

@media (max-width: 900px) {
  .hero__cuerpo { display: block; min-height: 0; }
  .hero__imagen { width: 100%; }
  .hero__tarjeta {
    position: static; transform: none; width: 100%; margin-top: -48px; padding: 24px;
  }
  .hero__titular { font-size: 24px; line-height: 30px; }
}

/* ---- Lo más visto ---- */
.mas-visto { margin: 64px 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.mas-visto__cuerpo { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gap); align-items: start; }
.mas-visto__lista { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .mas-visto__cuerpo { grid-template-columns: 1fr; } }

/* ---- Nota ---- */
.nota { padding-top: 48px; }
.nota__encabezado {
  max-width: 760px; margin: 0 auto 32px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.nota__titular { font-size: 40px; line-height: 46px; font-weight: 700; }
.nota__bajada {
  font-size: 20px; line-height: 30px; margin: 0;
  color: var(--en-superficie-suave);
}
.nota__foto { margin: 0 0 40px; }
.nota__foto img {
  width: 100%; border-radius: var(--panel-radio);
  aspect-ratio: 16 / 9; object-fit: cover; background: var(--borde-suave);
}
.nota__foto figcaption { padding-top: 10px; }
.nota__cuerpo { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 30px; }
.nota__cuerpo p { margin: 0 0 24px; }
.nota__cuerpo a { color: var(--en-superficie); text-decoration-color: var(--realce); }

.vacio { padding: 48px 0; }

@media (max-width: 760px) {
  .nota__titular { font-size: 28px; line-height: 34px; }
  .nota__bajada { font-size: 17px; line-height: 26px; }
}