/* ==========================================================================
   HOFT — SECCIONES
   Composición editorial en blanco de marca. Minimalismo: filetes de 1px,
   mucho aire y jerarquía tipográfica; el color solo en los botones.
   ========================================================================== */

/* --- Placeholder de media -------------------------------------------------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background-color: color-mix(in srgb, var(--hoft-negro) 4%, transparent);
  border: 1px solid var(--color-linea);
  overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--font-mono);
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  padding: var(--esp-xs);
  text-align: center;
}
.ph--16-9 { aspect-ratio: 16 / 9; }
.ph--1-1 { aspect-ratio: 1 / 1; }
.ph--3-4 { aspect-ratio: 3 / 4; }

/* --- Portada de página ----------------------------------------------------- */
.portada {
  display: grid;
  gap: var(--esp-md);
  padding-block: var(--esp-md);
}
.portada__claim { max-width: 46ch; font-size: var(--txt-md); color: var(--color-texto-suave); }

@media (min-width: 1024px) {
  .portada { gap: var(--esp-lg); }
}

/* Filete de datos bajo la portada */
.datos {
  display: grid;
  gap: 0;
  margin-top: var(--esp-md);
}
.dato {
  display: grid;
  gap: var(--esp-3xs);
  padding-block: var(--esp-sm);
}
.dato dt,
.dato__etiqueta {
  font-family: var(--font-mono);
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.dato dd { margin: 0; }

@media (min-width: 768px) {
  .datos--fila {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--gap-grid);
  }
}

/* --- Destacados de portada (blog / release / podcast) ---------------------- */
.destacados { display: grid; gap: var(--esp-lg); grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .destacados { grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
}

.destacado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  padding-top: var(--esp-sm);
}
.destacado__media { aspect-ratio: 1 / 1; }
.destacado__media--cuadrada { aspect-ratio: 1 / 1; }
.destacado__titulo { font-size: var(--txt-lg); }
.destacado__cuerpo { flex: 1; color: var(--color-texto-suave); font-size: var(--txt-sm); }
.destacado__enlace {
  font-family: var(--font-mono);
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-linea-fuerte);
  padding-bottom: 2px;
  align-self: start;
  transition: border-color var(--dur-rapida) var(--ease);
}
.destacado__enlace:hover { border-color: var(--hoft-negro); }

/* --- Listado editorial (entradas, referencias, fechas) --------------------- */
.listado { display: grid; }

.entrada {
  display: grid;
  gap: var(--esp-2xs);
  padding-block: var(--esp-md);
}
.entrada__meta { display: flex; flex-wrap: wrap; gap: var(--esp-xs); }
.entrada__titulo { font-size: var(--txt-xl); max-width: 24ch; }
.entrada__extracto { max-width: var(--ancho-texto); color: var(--color-texto-suave); }

@media (min-width: 768px) {
  .entrada {
    grid-template-columns: 10rem minmax(0, 1fr) 8rem;
    align-items: baseline;
    gap: var(--gap-grid);
  }
  .entrada__titulo { font-size: var(--txt-lg); max-width: none; }
  .entrada__accion { justify-self: end; }
}

@media (min-width: 1440px) {
  .entrada { grid-template-columns: 14rem minmax(0, 1fr) 10rem; }
}

/* --- Fichas (roster, referencias del sello) -------------------------------- */
.ficha { display: grid; gap: var(--esp-xs); }
.ficha__media { aspect-ratio: 1 / 1; }
.ficha__media--cuadrada { aspect-ratio: 1 / 1; }
.ficha__nombre { font-size: var(--txt-md); }

/* --- Bloque de texto largo ------------------------------------------------- */
.texto-bloque { display: grid; gap: var(--esp-sm); max-width: var(--ancho-texto); }
.texto-bloque p { color: var(--color-texto-suave); font-size: var(--txt-md); }

/* --- Formulario ------------------------------------------------------------ */
.formulario { display: grid; gap: var(--esp-sm); }
.campo { display: grid; gap: var(--esp-3xs); }
.campo label {
  font-family: var(--font-mono);
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: 3rem;
  padding: var(--esp-xs);
  background: transparent;
  border: 1px solid var(--color-linea-fuerte);
  border-radius: var(--radio-0);
}
.campo textarea { min-height: 8rem; resize: vertical; }

@media (min-width: 768px) {
  .formulario--doble { grid-template-columns: repeat(2, 1fr); }
  .formulario--doble > .campo--ancho,
  .formulario--doble > .formulario__pie { grid-column: 1 / -1; }
}

/* --- Nota de trabajo (solo mientras hay placeholders) ---------------------- */
.nota-dev {
  font-family: var(--font-mono);
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  border-left: 2px solid var(--color-acento);
  padding-left: var(--esp-xs);
}

/* ==========================================================================
   BLOG — artículo y listado
   ========================================================================== */

/* --- Cabecera del artículo ------------------------------------------------ */
.articulo__cabecera {
  display: grid;
  gap: var(--esp-sm);
  margin-bottom: var(--esp-md);
}
.articulo__cabecera h1 { font-size: var(--txt-xl); max-width: 22ch; }
.articulo__entradilla {
  font-size: var(--txt-md);
  color: var(--color-texto-suave);
  max-width: var(--ancho-texto);
}

/* --- Cuerpo --------------------------------------------------------------- */
.articulo__cuerpo { display: grid; gap: var(--esp-sm); }
.articulo__cuerpo > * { max-width: var(--ancho-texto); }
.articulo__cuerpo > figure { max-width: 100%; }
.articulo__cuerpo p { font-size: var(--txt-md); }

.articulo__cuerpo h2 {
  font-size: var(--txt-xl);
  margin-top: var(--esp-lg);
  max-width: 24ch;
}

/* Fichas de tema en las entregas de Techno Classics */
.articulo__cuerpo h3.pista {
  font-size: var(--txt-md);
  margin-top: var(--esp-md);
  padding-top: var(--esp-2xs);
  text-transform: none;          /* respeta las comillas y el año del título */
  letter-spacing: 0;
}

/* --- Figuras -------------------------------------------------------------- */
.figura {
  display: grid;
  gap: var(--esp-2xs);
  margin-block: var(--esp-lg);
  justify-items: start;
}
.figura img {
  width: auto;
  max-width: min(100%, var(--img-ancho));
  max-height: var(--img-alto);
  background-color: color-mix(in srgb, var(--hoft-negro) 4%, transparent);
}
.figura figcaption {
  font-family: var(--font-mono);
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-texto-tenue);
  max-width: var(--ancho-texto);
}
.figura--portada { margin-block: 0 var(--esp-xl); }
.figura--portada img { max-width: 100%; max-height: var(--img-alto-portada); }

/* --- Llamadas y notas ------------------------------------------------------ */
.llamada {
  background-color: var(--color-acento);
  color: var(--hoft-negro);          /* sobre gama complementaria, texto negro */
  padding: var(--esp-sm) var(--esp-md);
  display: grid;
  gap: var(--esp-2xs);
  margin-block: var(--esp-md);
}
.llamada p { font-size: var(--txt-md); }
.llamada .nota-dev { border-color: var(--hoft-negro); color: var(--hoft-negro); }

.notas {
  margin-top: var(--esp-lg);
  padding-top: var(--esp-sm);
  display: grid;
  gap: var(--esp-2xs);
  font-size: var(--txt-sm);
  color: var(--color-texto-suave);
}
.notas ul { display: grid; gap: var(--esp-2xs); }
.notas li { padding-left: 1.1em; text-indent: -1.1em; }

/* --- Pie del artículo ------------------------------------------------------ */
.articulo__pie {
  display: grid;
  gap: var(--esp-md);
  margin-top: var(--esp-lg);
  padding-top: var(--esp-sm);
}
.articulo__serie { display: grid; gap: var(--esp-2xs); }
.articulo__serie .fila { gap: var(--esp-md); }

/* --- Listado del blog: cuadrícula de tarjetas -----------------------------
   Imagen arriba, texto debajo. Una columna en móvil y hasta cuatro en
   pantallas muy anchas.
   -------------------------------------------------------------------------- */
.rejilla-entradas {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(2, 1fr);   /* ya en móvil van de dos en dos */
  column-gap: var(--esp-sm);
}

@media (min-width: 480px) { .rejilla-entradas { column-gap: var(--gap-grid); } }
@media (min-width: 1024px) { .rejilla-entradas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1920px) { .rejilla-entradas { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
  display: grid;
  gap: var(--esp-2xs);
  align-content: start;
}

.tarjeta__media { display: block; overflow: hidden; }
.tarjeta__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: color-mix(in srgb, var(--hoft-negro) 4%, transparent);
  transition: opacity var(--dur-media) var(--ease);
}
.tarjeta__media:hover img { opacity: 0.82; }

.tarjeta__meta { margin-top: var(--esp-2xs); }
.tarjeta__titulo { font-size: var(--txt-md); }
.tarjeta__titulo a:hover { text-decoration: underline; text-underline-offset: 4px; }

.tarjeta__extracto {
  font-size: var(--txt-sm);
  color: var(--color-texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Destacado de portada con foto real ------------------------------------ */
.destacado__media--foto { display: block; overflow: hidden; }
.destacado__media--foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- Sección de portada -----------------------------------------------------
   Alineada a la izquierda como el resto de secciones: sin texto centrado ni
   min-height propio. El aire por encima y por debajo del bloque lo da solo el
   ritmo estándar de la sección (--esp-lg, igual arriba que abajo), así que la
   portada no lleva padding propio: sumarlo doblaría el hueco solo aquí.
   -------------------------------------------------------------------------- */
#inicio .portada { padding-block: 0; gap: var(--esp-md); }

/* Lema de portada. La primera línea hace de titular, así que va en Host Grotesk
   SemiBold: DM Mono solo tiene Medium instalada y el navegador habría fingido
   la negrita, que en esta tipografía se ve sucia. */
#inicio .portada__lema {
  font-family: var(--font-display);
  font-weight: var(--peso-semibold);
  font-size: var(--txt-2xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-texto);
}

#inicio .portada__claim {
  font-size: var(--txt-lg);
  max-width: 40ch;
}


/* En las fichas, el enlace final se ciñe a su texto: si no, el subrayado
   cruzaría la tarjeta entera bajo un texto centrado. */
#inicio .destacado__enlace { align-self: center; }