/* ============================================================================
   SEGURATIS · ARTÍCULO
   static/mobile-articulo.html + static/desktop-articulo.html
   ============================================================================ */

/* Barra de progreso de lectura */
.progreso { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 3px; background: transparent; }
.progreso__barra { display: block; height: 100%; width: 0; background: var(--c-action); transition: width .1s linear; }

/* ---- 1 · Hero ------------------------------------------------------------ */
.art-hero        { padding: 14px 0 26px; }
.art-hero__migas { position: relative; z-index: 1; }
.art-hero__inner { position: relative; z-index: 1; }
.art-hero__blob--1 { top: 64px; right: 9%; width: 13px; height: 13px; background: var(--c-blob-warm); }
.art-hero__blob--2 { top: 58%; right: 27%; width: 10px; height: 10px; background: var(--c-blob-cool); animation-delay: .8s; }

.art-hero__cat    { margin-top: 14px; }
.art-hero__h1     { margin-top: 14px; }
.art-hero__lead   { margin-top: 14px; }
.art-hero__byline { margin-top: 18px; flex-wrap: wrap; }

.art-hero__foto  { margin-top: 20px; }
.art-hero__foto img { width: 100%; border-radius: var(--r); aspect-ratio: 16 / 10; object-fit: cover; }
.art-hero__ph    { aspect-ratio: 16 / 10; }

@media (min-width: 1024px) {
  .art-hero { padding: 16px 0 0; }
  .art-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 64px; align-items: center; padding-top: 30px; padding-bottom: 46px;
  }
  .art-hero__cat    { margin-top: 0; padding: 7px 13px; }
  .art-hero__h1     { margin-top: 20px; max-width: 22ch; }
  .art-hero__lead   { margin-top: 20px; max-width: 62ch; font-size: 19px; }
  .art-hero__byline { margin-top: 22px; font-size: 14px; }
  .art-hero__byline .byline__avatar { width: 36px; height: 36px; font-size: 12px; }
  .art-hero__foto   { margin-top: 0; }
}

/* ---- 2 · Cuerpo ---------------------------------------------------------- */
.art-cuerpo        { padding: 26px var(--pad-x-m) 0; }
.art-cuerpo__texto { display: block; }

.art-resumen        { margin-bottom: 16px; }
.art-resumen__lista { display: grid; gap: 10px; margin-top: 14px; }
.art-resumen__item  { display: flex; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--c-summary-body); }
.art-resumen__item span { font-weight: 800; color: var(--c-positive); }

/* Índice · lo rellena comportamiento.js */
.art-toc { padding: 20px; border-radius: var(--r); background: var(--c-surface-2); }
.art-toc[hidden] { display: none; }
/* El div lo crea comportamiento.js al colgar los enlaces. */
.art-toc > div { display: grid; gap: 2px; margin-top: 10px; }
/* Los enlaces del índice van en coral de texto, no en tinta: es la única
   lista de la página en la que el color señala «esto se pulsa». La flecha es
   decorativa, por eso se pinta desde CSS y no la escribe el JS. */
.art-toc__link,
.art-toc a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: var(--bd) solid var(--c-border-soft);
  font-size: 15.5px; font-weight: 600; color: var(--c-action-ink);
}
.art-toc a::after { content: "↓"; flex: 0 0 auto; font-weight: 400; color: var(--c-ink-3); }
.art-toc a:hover { color: var(--c-action-strong); }

.art-bloque      { padding-top: 36px; }
.art-bloque__h2  { margin: 0; font-size: 25px; line-height: 1.14; letter-spacing: -.028em; font-weight: 800; }
.art-bloque__h3  { margin: 0 0 16px; font-size: 21px; line-height: 1.16; letter-spacing: -.024em; font-weight: 800; }
.art-texto       { margin-top: 14px; }
.art-texto p     { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--c-ink-article); text-wrap: pretty; }
.art-texto p:first-child { margin-top: 0; }
.art-texto ul,
.art-texto ol    { margin: 14px 0 0; padding-left: 22px; }
.art-texto li    { margin-top: 8px; font-size: 16.5px; line-height: 1.65; color: var(--c-ink-article); }
.art-texto a     { text-decoration: underline; }
.art-texto strong { color: var(--c-ink); }

.art-def         { margin-top: 20px; }
.art-def__txt    { display: block; }
.art-def__que    { font-size: 12px; letter-spacing: .08em; }
.art-def__termino{ margin-top: 5px; font-size: 16px; font-weight: 800; color: var(--c-ink); }
.art-def__glosario { margin-top: 10px; font-size: 14px; }
.art-nota        { margin-top: 20px; }
.art-nota__cta   { margin-top: 14px; }
.art-cita        { margin-top: 24px; }

/* Tabla dentro del artículo */
.art-tabla          { margin: 24px 0 0; }
.art-tabla__caption { margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.art-tabla__scroll  { overflow-x: auto; border: var(--bd) solid var(--c-border); border-radius: var(--r); }
.art-tabla__tabla   { width: 100%; border-collapse: collapse; }
.art-tabla__tabla th,
.art-tabla__tabla td { padding: 12px 14px; font-size: 15px; line-height: 1.4; text-align: left; }
.art-tabla__tabla thead th { background: var(--c-primary); color: var(--c-white); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.art-tabla__tabla tbody tr { border-top: var(--bd) solid var(--c-divider); }
.art-tabla__tabla tbody tr:nth-child(even) { background: var(--c-row-alt); }
.art-tabla__tabla tbody th { font-weight: 700; color: var(--c-ink); }
.art-tabla__tabla tbody td { font-weight: 600; color: var(--c-ink-2); }

/* Lista de pasos */
.art-pasos__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.art-paso     { display: flex; gap: 14px; }
.art-paso__num{ background: var(--c-primary); color: var(--c-white); }
.art-paso__txt{ flex: 1 1 auto; padding-top: 6px; font-size: 16px; line-height: 1.6; color: var(--c-ink-article); }

/* Pros y contras · dos cajas blancas, una debajo de otra en móvil.
   El verde es SOLO del check y el rojo SOLO del aspa: el texto de la caja
   negativa no se pinta de rojo, se apaga a --c-ink-2. */
.art-proscons__grid  { display: grid; gap: 10px; }
.art-proscons__caja  {
  padding: 18px; border-radius: var(--r);
  background: var(--c-white); border: var(--bd) solid var(--c-border);
  box-shadow: var(--sh-card);
}
.art-proscons__titulo { font-size: 16.5px; font-weight: 800; color: var(--c-ink); }
.art-proscons__lista  { display: grid; gap: 9px; margin-top: 12px; }
.art-proscons__item   { display: flex; gap: 9px; font-size: 15.5px; line-height: 1.45; color: var(--c-ink-article); }
.art-proscons__caja--no .art-proscons__item { color: var(--c-ink-2); }
.art-proscons__marca      { flex: 0 0 auto; font-weight: 800; color: var(--c-positive); }
.art-proscons__marca--no  { color: var(--c-negative); }

/* Top de productos */
.art-top__intro { margin-bottom: 16px; font-size: 16px; line-height: 1.6; color: var(--c-ink-2); }
.art-top__lista { display: grid; gap: 10px; }
.art-top__item  { display: flex; align-items: center; gap: 14px; padding: 16px; }
.art-top__puesto {
  flex: 0 0 32px; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-white); font-size: 15px; font-weight: 800;
}
.art-top__txt   { flex: 1 1 auto; display: block; min-width: 0; }
.art-top__marca { display: block; font-size: 17px; font-weight: 800; color: var(--c-ink); }
.art-top__claim { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--c-ink-2); }
.art-top__dato  { flex: 0 0 auto; text-align: right; }
.art-top__precio{ display: block; font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--c-primary); }

.art-form { padding-top: 36px; }

.art-lateral { padding: 26px 0 0; }

/* Móvil: el orden del DOM ya es el de la maqueta —cuerpo, formulario, autoría—
   así que aquí no hay nada que reordenar. El cierre solo necesita su aire. */
.art-cierre  { padding: 28px 0 0; }

/* El bloque de cierre trae su propio .wrap porque en otras plantillas es una
   sección a todo el ancho. Aquí ya va dentro de una columna con padding: sin
   esto se queda más estrecho que la autoría y las fuentes. */
.art-cierre .cta-cierre .wrap { max-width: none; padding: 0; }

@media (min-width: 1024px) {
  .art-cuerpo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 0 64px; align-items: start;
    max-width: var(--max-w); margin: 0 auto; padding: 56px var(--pad-x-d) 0;
  }
  /* Dos filas en la columna izquierda (cuerpo y cierre) y el lateral ocupando
     las dos: así el formulario sigue sticky durante todo el artículo y la
     autoría vuelve a quedar debajo del texto, como en la maqueta desktop. */
  .art-cuerpo__texto { grid-column: 1; grid-row: 1; max-width: 720px; }
  .art-cierre        { grid-column: 1; grid-row: 2; padding: 0; max-width: 720px; }
  .art-lateral       { grid-column: 2; grid-row: 1 / span 2; }

  .art-resumen       { padding: 28px; }
  .art-resumen__item { font-size: 17.5px; }
  .art-toc           { margin-top: 16px; padding: 26px; }
  .art-toc a         { padding: 13px 0; }

  .art-bloque     { padding-top: 48px; }
  .art-bloque__h2 { font-size: 36px; line-height: 1.12; letter-spacing: -.03em; }
  .art-bloque__h3 { font-size: 26px; letter-spacing: -.026em; }
  .art-texto p    { margin-top: 20px; font-size: 18px; line-height: 1.7; }
  .art-texto li   { font-size: 18px; line-height: 1.7; }

  .art-def__que      { font-size: 12.5px; }
  .art-def__termino  { margin-top: 6px; font-size: 19px; }
  .art-def__glosario { margin-top: 12px; font-size: 15.5px; }

  .art-tabla__tabla th,
  .art-tabla__tabla td { padding: 15px 22px; font-size: 16px; }

  /* En desktop caben las dos cajas al lado. Sin sombra: en la maqueta de
     escritorio estas dos solo llevan el borde. */
  .art-proscons__grid   { grid-template-columns: 1fr 1fr; gap: 16px; }
  .art-proscons__caja   { padding: 26px; box-shadow: none; }
  .art-proscons__titulo { font-size: 19px; }
  .art-proscons__lista  { gap: 11px; margin-top: 16px; }
  .art-proscons__item   { gap: 10px; font-size: 16.5px; line-height: 1.5; }

  .art-top__item   { padding: 20px 22px; }
  .art-top__marca  { font-size: 19px; }
  .art-top__precio { font-size: 24px; }

  .art-lateral        { padding: 0; align-self: stretch; }
  .art-lateral__sticky{ position: sticky; top: 96px; }
}

/* ---- 3 · Lo más leído ----------------------------------------------------
   Lista numerada, sin foto. En móvil son filas separadas por una línea; en
   desktop, cinco tarjetas crema. El número es decorativo: --c-ink-5. */
.art-mas       { padding: 30px 0 0; }
.art-mas__h2   { font-size: 25px; line-height: 1.14; letter-spacing: -.028em; }
.art-mas__grid { display: grid; gap: 0; margin-top: 12px; }
.art-mini      { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: var(--bd) solid var(--c-divider); }
.art-mini__n   { flex: 0 0 26px; font-size: 15px; font-weight: 800; color: var(--c-ink-5); }
.art-mini__txt { flex: 1 1 auto; display: block; min-width: 0; }
.art-mini__titulo { display: block; font-size: 15.5px; line-height: 1.35; font-weight: 700; color: var(--c-ink); }
.art-mini__cat    { display: block; margin-top: 3px; font-size: 12.5px; }
.art-mini:hover .art-mini__titulo { color: var(--c-action-ink); }

@media (min-width: 1024px) {
  .art-mas       { margin-top: 72px; padding: 0; }
  .art-mas__h2   { font-size: 34px; line-height: 1.12; letter-spacing: -.03em; }
  .art-mas__grid { grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 24px; }
  .art-mini      {
    display: block; padding: 22px; border-top: 0;
    border-radius: var(--r); background: var(--c-surface-2);
    transition: background-color .16s ease-out;
  }
  .art-mini:hover  { background: var(--c-cta-bg); }
  .art-mini__n     { display: block; font-size: 20px; color: var(--c-ink-3); }
  .art-mini__titulo{ margin-top: 12px; font-size: 16.5px; line-height: 1.4; }
  .art-mini__cat   { margin-top: 8px; font-size: 13px; }
}

/* ---- 4 · Relacionados ---------------------------------------------------- */
.art-relacionados      { padding: 30px 0 0; }
.art-relacionados__h2  { font-size: 22px; line-height: 1.16; letter-spacing: -.025em; }
.art-relacionados__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.art-relacionados__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

/* Tarjeta de guía relacionada · foto 16:10 + titular + fecha */
.art-rel {
  display: block; border-radius: var(--r); overflow: hidden;
  background: var(--c-white); border: var(--bd) solid var(--c-border);
  transition: var(--t-lift), border-color .16s ease-out;
}
.art-rel:hover { border-color: var(--c-action); transform: var(--lift); }
.art-rel__foto { display: flex; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; align-items: flex-end; padding: 8px; }
/* El padding es para la etiqueta del placeholder. En una foto de verdad deja
   un marco de fondo alrededor, así que se quita (misma treta que home.css:
   `img.clase` pesa más que la clase sola y no depende del orden). */
img.art-rel__foto { padding: 0; }
.art-rel__txt  { display: block; padding: 12px; }
.art-rel__titulo { display: block; font-size: 14.5px; line-height: 1.3; font-weight: 700; color: var(--c-ink); }
.art-rel__fecha  { display: block; margin-top: 5px; font-size: 12px; }
/* «Ver todo el blog» en desktop, «Ver todo» en el ancho de móvil.
   display:block y no el inline-flex de .link-action: el trozo variable es un
   <span> y como item de flex se le comía el espacio de delante («Ver todoel
   blog»). Aquí la flecha es texto, no un glifo aparte, así que no hace falta. */
.art-relacionados__cab .link-action { display: block; flex: 0 0 auto; white-space: nowrap; font-size: 14.5px; }
.art-relacionados__mas { display: none; }

@media (min-width: 1024px) {
  .art-relacionados { margin-top: 72px; padding: 0; }
  .art-relacionados__cab  { gap: 24px; }
  .art-relacionados__h2   { font-size: 34px; line-height: 1.12; letter-spacing: -.03em; }
  .art-relacionados__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
  .art-rel__foto   { padding: 10px; }
  .art-rel__txt    { padding: 20px; }
  .art-rel__titulo { font-size: 17px; line-height: 1.35; }
  .art-rel__fecha  { margin-top: 8px; font-size: 13px; }
  .art-relacionados__cab .link-action { font-size: 16px; }
  .art-relacionados__mas { display: inline; }
}