/* Blog de Fenko: el índice con las guías y las reseñas, y cada artículo. Usa los colores, tipografías y botones de
   styles.css; acá va solo lo propio del blog. */

.blog { padding-block: clamp(32px, 5vw, 64px) 0; }
.migas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: 0.875rem; color: var(--slate); }
.migas a { display: inline-flex; align-items: center; min-height: 32px; }

/* Índice */
.blog__titulo { font: 600 min(clamp(2rem, 4.400vw, 3.250rem), 11vw)/1.100 var(--sora); letter-spacing: -0.030em; }
.blog__lead { max-width: 60ch; margin-top: 12px; font-size: 1.125rem; color: var(--slate); }
.blog__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: clamp(24px, 4vw, 40px); }
.tarjeta article {
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color 160ms ease-out, transform 160ms var(--ease);
}
.tarjeta__titulo { font: 600 1.250rem/1.250 var(--sora); letter-spacing: -0.015em; }
/* Toda la tarjeta lleva al artículo, sin repetir el enlace. */
.tarjeta__titulo a { text-decoration: none; }
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.tarjeta__titulo a:focus-visible { outline: none; }
.tarjeta article:has(a:focus-visible) { outline: 3px solid var(--night); outline-offset: 2px; }
.tarjeta p { color: var(--slate); }
.tarjeta__meta { margin-top: auto; font-size: 0.875rem; }
.tarjeta article:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .tarjeta article:hover { border-color: var(--night); } }

/* Reseñas */
.resenas { margin-top: var(--section); padding-block: var(--section); background: var(--ice); }
.resenas__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 62.5em) { .resenas__grid { grid-template-columns: 1.1fr 0.9fr; } }
.resenas__titulo { font: 600 min(clamp(1.750rem, 3vw, 2.500rem), 10vw)/1.150 var(--sora); letter-spacing: -0.025em; }
.resenas__lead { max-width: 52ch; margin-top: 10px; color: var(--slate); }
.resenas__vacio { margin-top: 24px; padding: 20px; border: 1px dashed var(--line-field); border-radius: 12px; color: var(--slate); }
.resenas__lista { display: grid; gap: 12px; margin-top: 24px; }
.resena { padding: 20px; border-radius: 12px; background: #fff; }
.resena__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.resena__estrellas { color: var(--amber); letter-spacing: 0.1em; }
.resena__fecha { margin-top: 8px; font-size: 0.8125rem; color: var(--slate); }

.resena-form { padding: clamp(20px, 3vw, 32px); border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -28px rgb(3 12 28 / 45%); }
.resena-form h3 { font: 600 1.375rem/1.200 var(--sora); }
.resena-form__calificacion { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.resena-form__calificacion legend { padding: 0; font-size: 0.875rem; font-weight: 500; color: var(--slate); }
.resena-form__estrellas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.resena-form__estrella {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line-field); border-radius: 8px; font-size: 0.9375rem; cursor: pointer;
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
.resena-form__estrella input { width: 18px; height: 18px; margin: 0; accent-color: var(--night); }
.resena-form__estrella:has(input:checked) { border-color: var(--night); background: var(--ice); }
.resena-form__estrella:has(input:focus-visible) { outline: 2px solid var(--night); outline-offset: 1px; }
.resena-form__calificacion:has([aria-invalid="true"]) .resena-form__estrella { border-color: var(--error); }
.resena-form .field textarea { field-sizing: content; min-height: 6.5em; }
.resena-form__error { margin-top: 8px; font-size: 0.875rem; font-weight: 600; color: var(--error); }
.resena-form__enviar { width: 100%; margin-top: 18px; }
/* Campo para robots: fuera de la vista y del teclado. */
.resena-form__trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.resena-form { position: relative; }
.resena-form__nota { margin-top: 12px; font-size: 0.9375rem; color: var(--slate); }
/* Los avisos quedan siempre en la página, vacíos, para que el lector de pantalla los anuncie al llenarse. */
.resena-form__error:empty, .resena-form__nota:empty { margin: 0; }

/* Artículo */
.articulo { max-width: calc(46rem + 2 * var(--pad)); padding-bottom: var(--section); }
.articulo__titulo { font: 600 min(clamp(1.875rem, 4vw, 2.875rem), 10vw)/1.120 var(--sora); letter-spacing: -0.028em; }
.articulo__meta { margin-top: 12px; font-size: 0.875rem; color: var(--slate); }
.articulo__resumen { margin-top: 24px; padding: 20px 24px; border-left: 4px solid var(--amber); border-radius: 0 8px 8px 0; background: var(--ice); font-size: 1.125rem; }
.articulo__cuerpo { margin-top: 32px; }
.articulo__cuerpo > * + * { margin-top: 1em; }
.articulo__cuerpo h2 { margin-top: 2em; font: 600 1.625rem/1.200 var(--sora); letter-spacing: -0.020em; }
.articulo__cuerpo h3 { margin-top: 1.6em; font: 600 1.250rem/1.250 var(--sora); }
.articulo__cuerpo ul, .articulo__cuerpo ol { padding-left: 1.3em; }
.articulo__cuerpo ul { list-style: disc; }
.articulo__cuerpo ol { list-style: decimal; }
.articulo__cuerpo li + li { margin-top: 0.4em; }
.articulo__cuerpo a, .articulo__fuentes a, .articulo__volver a { color: var(--ink-green); font-weight: 500; }
.articulo__faq { margin-top: 48px; }
.articulo__faq h2, .articulo__fuentes h2 { font: 600 1.500rem/1.200 var(--sora); }
.articulo__preguntas { margin-top: 12px; }
.articulo__preguntas details { border-bottom: 1px solid var(--line); }
.articulo__preguntas summary { display: flex; align-items: center; min-height: 56px; padding-block: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.articulo__preguntas summary::-webkit-details-marker { display: none; }
.articulo__preguntas p { padding-bottom: 16px; color: var(--slate); }
.articulo__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding: 24px; border-radius: 12px; background: var(--night); color: #fff; }
.articulo__cta p { font: 600 1.125rem/1.300 var(--sora); max-width: 32ch; }
.articulo__fuentes { margin-top: 40px; font-size: 0.9375rem; }
.articulo__fuentes ul { display: grid; gap: 8px; margin-top: 12px; padding-left: 1.2em; list-style: disc; }
.articulo__volver { margin-top: 32px; }

/* El pie del blog es corto: sin la barra del celular no necesita el espacio de abajo. */
.foot--blog { padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px)); }
.foot--blog .foot__base { padding-top: 0; }