/* iphoneduo.es — hoja de estilo.
   ────────────────────────────────────────────────────────────────────────────
   IDEA: EL PLIEGO. El Duo se abre en apaisado, con la proporción de un pasaporte.
   Un pasaporte se abre en dos hojas enfrentadas, y esa geometría es la del sitio:
   ficha a un lado, relato al otro, y entre ambas una BISAGRA visible (el filete
   de .panel). En móvil el pliego se cierra en una sola columna.

   COLOR. El «cielo nocturno» del aparato pasa de fondo a TINTA: es el color del
   producto usado como color de texto sobre papel. No hay acento cromático
   decorativo; el color lo ponen las fotos de las noticias y el propio aparato.

   TIPOGRAFÍA. Una sola familia, la del sistema. En un dispositivo Apple eso ES
   San Francisco —la tipografía de Apple— sin descargar nada, que es justo lo que
   exige la CSP self-only de public/_headers. Tres papeles, bien separados en
   tamaño, peso y tracking: display (grande, semibold, muy apretado, como pone
   Apple sus titulares), cuerpo a 17 px (su tamaño de cuerpo) y fuente a 13 px.

   El semáforo de fiabilidad se retiró el 09-09-2026: con 27 de 30 datos
   confirmados por Apple no informaba de nada. Por eso aquí no hay colores
   semánticos, solo la paleta del aparato. */
:root {
  --papel: #fbfbfd;
  --bg: #fbfbfd;
  --bg-card: #ffffff;
  --border: #dfe1e7;
  --filete: #e8eaee;         /* filete fino, para separar filas dentro de un bloque */
  --text: #0b0e14;           /* cielo nocturno, aquí como tinta */
  --text-dim: #6b7280;       /* titanio: metadatos y fuentes */
  --accent: #1f3a68;         /* azul tinta: el cielo nocturno subido de tono */
  --accent-soft: #2d5490;
  --titanio: #9aa1ad;
  --barra: rgba(251, 251, 253, 0.82);   /* cabecera fija translúcida */
  color-scheme: light;

  --paso-1: 0.8125rem;       /* 13 px — fuente, metadatos */
  --paso-2: 0.9375rem;       /* 15 px — texto secundario */
  --paso-3: 1.0625rem;       /* 17 px — cuerpo (el de Apple) */
  --paso-4: 1.375rem;
  --paso-5: 2rem;
  --display: clamp(2.75rem, 7vw, 4.25rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

img { max-width: 100%; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--paso-3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--text); color: var(--papel); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  /* Fija la altura: solo la portada lleva la cuenta atrás junto al menú, y sin
     esto la barra cambiaba de alto entre la portada y el resto de páginas —
     un salto visible cada vez que se navegaba entre una y otra. */
  min-height: 67px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--barra);
  backdrop-filter: blur(12px);
  z-index: 10;
}

.brand { font-weight: 600; letter-spacing: -0.022em; font-size: var(--paso-2); }
.brand .tld { color: var(--text-dim); font-weight: 400; }

.site-header nav a {
  color: var(--text-dim);
  text-decoration: none;
  margin-left: 1.2rem;
  font-size: var(--paso-2);
}
.site-header nav a:hover { color: var(--text); }

main { max-width: 940px; margin: 0 auto; padding: 0 1.5rem 5rem; }

.hero { padding: 4rem 0 2.5rem; }

/* El rótulo era una píldora en VERSALITAS sobre el titular: el adorno más
   repetido en páginas generadas, y encima no decía nada que el titular no
   dijera. Ahora es una línea de texto normal, en tinta, que sitúa el aparato. */
.kicker {
  display: block;
  font-size: var(--paso-2);
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}

.hero h1 {
  font-size: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--text);
}

.tagline {
  max-width: 36rem;   /* ~70 caracteres */
  margin: 1.1rem 0 0;
  color: var(--text-dim);
  font-size: var(--paso-4);
  line-height: 1.45;
  letter-spacing: -0.011em;
}
.tagline strong { color: var(--text); }

section { padding-top: 3rem; }
h2 { font-size: var(--paso-5); font-weight: 600; letter-spacing: -0.026em; margin-bottom: 0.4rem; line-height: 1.15; }
h3 { letter-spacing: -0.014em; }
.section-sub { color: var(--text-dim); margin-bottom: 1.6rem; max-width: 38rem; font-size: var(--paso-2); }

/* Destacado en X */
/* Columnas en vez de grid de filas: las tarjetas cambian mucho de altura (texto
   suelto de Reddit frente a foto o vídeo de X) y una grid de filas deja un hueco
   del tamaño de la tarjeta más alta de la fila bajo cada tarjeta corta. */
.xgrid {
  columns: 280px 2;
  column-gap: 1rem;
  margin-top: 1.2rem;
}
.xcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  margin-bottom: 1rem;
}
.xmedia { display: block; width: 100%; background: var(--filete); }
video.xmedia { max-height: 420px; }
.xphotos img { display: block; width: 100%; object-fit: cover; }
.xphotos-multi { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.xphotos-multi img { height: 100%; max-height: 220px; }
.xbody { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.xauthor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}
.xauthor img { width: 32px; height: 32px; border-radius: 50%; }
.xname { font-weight: 600; }
.xhandle { color: var(--text-dim); }
.xtext { color: var(--text-dim); font-size: 0.95rem; }
.xstats {
  display: flex;
  gap: 0.9rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}
.xlikes { color: var(--accent-soft); font-weight: 600; }
.xsource {
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0.35rem;
  font-size: var(--paso-1);
  letter-spacing: -0.005em;
}
.loading { color: var(--text-dim); }
.loading a, .news-foot a { color: var(--accent-soft); }

/* Noticia destacada (portada) */
.featured {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: 1rem;
}
.featured-media { position: relative; aspect-ratio: 16 / 9; background: var(--filete); }
.featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-body { padding: 1rem 1.2rem 1.3rem; }
.featured-body h3 {
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-top: 0.35rem;
}
.featured:hover h3 { color: var(--accent-soft); }

/* Parrilla de noticias con imagen */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.card-media { aspect-ratio: 16 / 10; background: var(--filete); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 0.8rem 0.95rem 1rem; }
.card-body h3 { font-size: 1rem; line-height: 1.35; margin-top: 0.3rem; font-weight: 600; }
/* Tarjeta sin foto: se compensa con un poco más de aire para no romper la parrilla. */
.news-card-sinfoto .card-body { padding-top: 1.1rem; }
.news-card-sinfoto { border-left: 3px solid var(--accent); }
.news-card:hover h3 { color: var(--accent-soft); }

.badge-duo {
  border-color: var(--accent);
  color: var(--accent-soft);
  font-weight: 600;
}

/* Timeline de noticias */
.timeline { list-style: none; position: relative; padding-left: 1.4rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline li {
  position: relative;
  padding: 0 0 1.4rem 0.8rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.item-thumb {
  flex: 0 0 118px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.item-thumb img {
  display: block;
  width: 118px;
  height: 78px;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.item-thumb:hover img { transform: scale(1.05); }
.item-body { min-width: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 58, 104, 0.15);
}
.timeline-loading::before { background: var(--text-dim) !important; }
.item-meta {
  font-size: 0.8rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.15rem;
}
.badge {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0.35rem;
  font-size: var(--paso-1);
  letter-spacing: -0.005em;
}
.timeline a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
}
.timeline a:hover { color: var(--accent-soft); }
.news-foot { color: var(--text-dim); font-size: 0.9rem; margin-top: 0.5rem; }
.news-foot a { color: var(--accent-soft); }

/* Tarjetas "qué sabemos" */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.3rem;
}
.card h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }
.card p { color: var(--text-dim); font-size: 0.95rem; }
.card strong { color: var(--text); }

.updated {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.updated time { color: var(--accent-soft); }

/* Tablas comparativas */
.table-wrap { overflow-x: auto; margin: 0.9rem 0 1.4rem; }
/* La tabla también es un documento: filete arriba, filas separadas por hairlines
   y sin caja alrededor. La cabecera llevaba un fondo naranja al 8 % heredado del
   tema viejo, que sobre papel salía color melocotón. */
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: var(--paso-2);
  border-top: 1px solid var(--text);
}
th, td { padding: 0.7rem 0.9rem 0.7rem 0; text-align: left; border-bottom: 1px solid var(--filete); vertical-align: top; }
thead th { color: var(--text); font-weight: 600; border-bottom-color: var(--border); }
tbody td { color: var(--text-dim); }
tbody td:first-child { color: var(--text); font-weight: 500; }
tbody tr:last-child td { border-bottom: none; }

.cronologia { list-style: none; margin: 0.6rem 0 1rem; padding-left: 1.1rem; }
.cronologia li {
  position: relative;
  padding-bottom: 0.7rem;
  color: var(--text-dim);
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  margin-left: 0.2rem;
}
.cronologia li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.cronologia strong { color: var(--text); }
.fuente-nota { font-size: 0.88rem; }

/* Texto largo (SEO + lectura) */
.prose h3 {
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.prose p {
  color: var(--text-dim);
  margin-bottom: 0.9rem;
  max-width: 62ch;
}
.prose strong { color: var(--text); }
.prose em { color: var(--accent-soft); font-style: normal; }

/* FAQ */
.faq details {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  margin-top: 0.8rem;
  padding: 0.9rem 1.2rem;
}
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--text-dim); margin-top: 0.6rem; }
.faq details strong { color: var(--text); }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 2rem 1.5rem 3rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.site-footer p { max-width: 640px; margin: 0 auto 0.6rem; }

@media (max-width: 520px) {
  .site-header nav a { margin-left: 0.8rem; font-size: 0.85rem; }
  .item-thumb { flex-basis: 92px; }
  .item-thumb img { width: 92px; height: 64px; }
}

/* ============ PANEL DE DOS COLUMNAS ============
   Escritorio: ficha fija a la izquierda + actualidad con scroll a la derecha.
   Móvil (que es la mayoría del tráfico): ficha ARRIBA y plegada por categorías,
   actualidad debajo. Se usa <details>, que Google sí indexa (a diferencia de las
   pestañas), así que el contenido de la ficha cuenta para posicionamiento. */
.panel { display: block; }
.ficha { margin-bottom: 2.5rem; }
.ficha h2 { margin-bottom: 0.3rem; }

/* La ficha era una pila de tarjetas redondeadas, todas con el mismo radio y la
   misma sombra: el patrón que hace que cualquier página parezca la misma página.
   Ahora es lo que de verdad es —un documento de especificaciones—: bloques
   separados por filetes, sin cajas, con el dato a un lado y su fuente debajo. */
.ficha-cat {
  border-top: 1px solid var(--text);
  margin-bottom: 1.6rem;
}
.ficha-cat > summary {
  cursor: pointer;
  padding: 0.7rem 0 0.55rem;
  font-weight: 600;
  font-size: var(--paso-2);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
}
.ficha-cat > summary::-webkit-details-marker { display: none; }
.ficha-cat > summary::after {
  content: "▾";
  color: var(--titanio);
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}
.ficha-cat[open] > summary::after { transform: rotate(180deg); }
.ficha-cuenta {
  margin-left: auto;
  color: var(--text-dim);
  font-weight: 400;
  font-size: var(--paso-1);
  font-variant-numeric: tabular-nums;
}

.ficha-lista { list-style: none; padding: 0; }
.ficha-item {
  padding: 0.8rem 0;
  border-top: 1px solid var(--filete);
}
.ficha-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: baseline;
  justify-content: space-between;
}
.ficha-nombre { font-size: var(--paso-2); color: var(--text-dim); }
.ficha-valor {
  font-weight: 600;
  font-size: var(--paso-3);
  text-align: right;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}
/* La fuente es el argumento del sitio, así que se ve: no es una nota al pie
   apagada, es una línea legible y enlazada bajo cada dato. */
.ficha-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  margin-top: 0.45rem;
  font-size: var(--paso-1);
}
.ficha-estado { font-weight: 600; }
.ficha-detalle {
  margin-top: 0.4rem;
  font-size: var(--paso-2);
  color: var(--text-dim);
  line-height: 1.55;
}
/* Único resto del sistema de fiabilidad: lo que Apple NO ha publicado. Se
   distingue bajando el tono y con una barra lateral tenue, sin color semántico:
   es una ausencia, no una categoría. */
/* Enlaces dentro del texto: el acento por sí solo no basta para distinguirlos del
   texto normal (2,17:1, por debajo del 3:1 que pide WCAG cuando el color es la
   única pista), así que llevan además subrayado. */
.prose a:not(.acc-boton), .faq a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:not(.acc-boton):hover, .faq a:hover { color: var(--text); text-decoration-color: var(--text); }

.ficha-item-pendiente .ficha-valor { color: var(--text-dim); font-weight: 400; font-style: italic; }

.ficha-pie { font-size: var(--paso-1); color: var(--text-dim); margin-top: 1.2rem; max-width: 34rem; }

@media (min-width: 1080px) {
  main { max-width: 1240px; }
  .panel {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  /* LA BISAGRA. El filete que separa las dos hojas del pliego. Es el único
     elemento decorativo de la página, y no es decorativo: es la geometría del
     aparato, que se abre en apaisado como un pasaporte. */
  .ficha {
    border-right: 1px solid var(--border);
    padding-right: 2.2rem;
    padding-top: 1.6rem;   /* respira bajo la cabecera fija, como la otra hoja */
    position: sticky;
    top: 72px;                 /* bajo la cabecera fija */
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    margin-bottom: 0;
    padding-right: 0.4rem;
  }
  .ficha::-webkit-scrollbar { width: 6px; }
  .ficha::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .ficha h2 { font-size: 1.25rem; }
  .actualidad section:first-child { padding-top: 0; }
}

/* Menú en móvil: una sola línea deslizable en vez de tres líneas apiladas */
@media (max-width: 720px) {
  .site-header { padding: 0.7rem 0.9rem; gap: 0.8rem; }
  .site-header nav {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { margin-left: 0; white-space: nowrap; font-size: 0.86rem; }
  .brand { font-size: 0.95rem; white-space: nowrap; }
  .hero { padding: 2.6rem 0 2rem; }
}

/* ====== Cabecera compacta dentro de la columna ======
   Antes ocupaba una pantalla entera casi vacía antes de llegar al contenido. */
.hero-col { text-align: left; padding: 1.6rem 0 1.2rem; }
.hero-col h1 { font-size: clamp(2.4rem, 6.5vw, 3.6rem); }
.hero-col .tagline { margin: 0.7rem 0 0; font-size: 1.1rem; max-width: 34rem; }
.hero-col .kicker { margin-bottom: 0.6rem; font-size: var(--paso-2); }
.hero-col .updated { margin-top: 0.7rem; }

/* ====== Ficha: la fila del documento ======
   Este bloque va DESPUÉS del de arriba a propósito y es el que manda. Cuidado al
   tocar el de arriba creyendo que se ve el efecto: durante un tiempo hubo dos
   definiciones de .ficha-nombre y la de aquí anulaba a la otra en silencio. */
.ficha-item {
  padding: 0.85rem 0 0.9rem;
  border-top: 1px solid var(--filete);
}
.ficha-fila { display: block; }
.ficha-nombre {
  display: block;
  font-size: var(--paso-2);
  color: var(--text-dim);
  letter-spacing: 0;
}
/* El dato, protagonista y en su propia línea: se lee de un vistazo */
.ficha-valor {
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.28;
  margin-top: 0.1rem;
  text-align: left;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
}
/* Detalle acotado a 2 líneas: el texto completo sigue en el HTML (y en el title) */
.ficha-detalle {
  margin-top: 0.35rem;
  font-size: var(--paso-2);
  line-height: 1.45;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ficha-meta { margin-top: 0.45rem; font-size: var(--paso-1); }
.ficha-fuente {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--titanio);
  text-underline-offset: 2px;
}
.ficha-fuente:hover { color: var(--text); text-decoration-color: var(--text); }

@media (min-width: 1080px) {
  .panel { grid-template-columns: 318px minmax(0, 1fr); gap: 2.2rem; }
  .ficha { top: 64px; max-height: calc(100vh - 84px); }
  .hero-col { padding-top: 1.2rem; }
  /* La actualidad arranca arriba, a la misma altura que la columna */
  .actualidad > section:first-child { padding-top: 1.6rem; }
}

/* Que cada tarjeta ocupe su altura y no se estire por la de al lado */
.news-grid { align-items: start; }

/* ====== Colocación en la parrilla (escritorio) ======
   Orden en el HTML: cabecera → ficha → actualidad. Así en MÓVIL se lee en ese
   orden natural (cabecera primero). En ESCRITORIO la parrilla recoloca: la ficha
   ocupa toda la columna izquierda desde arriba, y la cabecera encabeza la derecha. */
@media (min-width: 1080px) {
  .panel { grid-template-rows: auto 1fr; }
  .hero-col { grid-column: 2; grid-row: 1; padding-top: 1.4rem; }
  .ficha { grid-column: 1; grid-row: 1 / span 2; }
  .actualidad { grid-column: 2; grid-row: 2; }
  .actualidad > section:first-child { padding-top: 2.2rem; }
}

@media (min-width: 1080px) {
  /* Menos hueco entre la cabecera y el primer bloque de contenido */
  .hero-col { padding-bottom: 0.4rem; }
  .actualidad > section:first-child { padding-top: 1.4rem; }
}
.site-header { gap: 1rem; flex-wrap: wrap; }
.site-header nav { margin-left: auto; }

@media (max-width: 860px) {
  /* Móvil: marca y cuenta atrás arriba; el menú, deslizable debajo */
  .site-header { padding: 0.55rem 0.9rem 0.45rem; gap: 0.5rem 0.7rem; min-height: 80px; }
  .site-header nav { order: 3; flex-basis: 100%; margin-left: 0; }
}


/* Menos aire muerto entre la cabecera y el contenido */
/* ====== Datos de partida ======
   Eran cuatro tarjetas redondeadas idénticas: el kit de tarjetas que aparece en
   cualquier página y que aquí aplanaba justo lo que la gente viene a mirar.
   Ahora es una BANDA acotada por filetes, con las columnas separadas por líneas
   verticales —el mismo gesto de la bisagra— y cada cifra con su fuente debajo.
   Sin cajas, sin radio, sin sombra. */
.resumen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 2rem 0 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--border);
}
.resumen-dato {
  display: flex;
  flex-direction: column-reverse;   /* valor arriba, etiqueta debajo */
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 1rem 1.1rem 1.1rem 0;
  text-decoration: none;
  color: inherit;
}
.resumen-dato + .resumen-dato {
  border-left: 1px solid var(--filete);
  padding-left: 1.1rem;
}
.resumen-clave {
  font-size: var(--paso-1);
  color: var(--text-dim);
  line-height: 1.35;
}
.resumen-valor {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
}
a.resumen-dato .resumen-clave {
  text-decoration: underline;
  text-decoration-color: var(--filete);
  text-underline-offset: 2px;
}
a.resumen-dato:hover .resumen-valor { color: var(--accent); }
a.resumen-dato:hover .resumen-clave { text-decoration-color: var(--accent); }

@media (max-width: 720px) {
  .resumen { grid-template-columns: 1fr 1fr; }
  .resumen-dato { padding-right: 0.9rem; }
  .resumen-dato:nth-child(3) { border-left: 0; padding-left: 0; }
  .resumen-dato:nth-child(n+3) { border-top: 1px solid var(--filete); }
  .resumen-valor { font-size: 1.35rem; }
}

.hero-col { padding-bottom: 0; }
.hero-col .updated { margin-top: 0.5rem; font-size: 0.78rem; }
@media (min-width: 1080px) {
  .hero-col { padding-bottom: 0; }
  .actualidad > section:first-child { padding-top: 1.8rem; }
}


/* Ficha: misma lógica de orden. El estado se lee por el punto, no por la franja. */



/* Nombre largo (p. ej. «Venta en España desde el primer día»): el nombre envuelve
   pero la etiqueta de estado se mantiene arriba a la derecha, sin saltar de línea. */
.ficha-fila { flex-wrap: nowrap; align-items: flex-start; gap: 0.6rem; }
.ficha-nombre { line-height: 1.35; }

/* ====== Accesorios ====== */
.acc-nota {
  color: var(--text-dim);
  font-size: 0.88rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.2rem;
}
.acc-nota a { color: var(--accent-soft); }
.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
  align-items: start;
}
.acc-card {
  /* flex, no grid de filas: la imagen es opcional (no todas las filtraciones
     tienen foto) y con una grid de filas fijas un hijo de más desplaza el resto. */
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.95rem 1rem 1rem;
}
.acc-media {
  width: calc(100% + 2rem);
  margin: -0.95rem -1rem 0.2rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px 14px 0 0;
  background: var(--filete);
  display: block;
}
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.acc-tipo {
  font-size: var(--paso-1);
  color: var(--text-dim);
}
.acc-card h3 { font-size: 1.02rem; line-height: 1.3; font-weight: 600; }
.acc-resumen { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; flex: 1; }
.acc-meta { font-size: 0.72rem; }
.acc-fuente { color: var(--text-dim); text-decoration: none; border-bottom: 1px dotted var(--border); }
.acc-fuente:hover { color: var(--accent-soft); border-bottom-color: var(--accent-soft); }

/* Botones de tienda: solo aparecen cuando hay enlaces reales en src/accesorios.js */
.acc-compra { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.acc-boton {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent-soft);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.acc-boton small { font-weight: 400; font-size: 0.68rem; color: var(--text-dim); }
.acc-boton:hover { background: var(--text); color: var(--papel); }
.acc-aviso {
  margin-top: 1.1rem;
  font-size: 0.76rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
}
.acc-live { margin-top: 1.6rem; }
.acc-live h3 { font-size: 1.05rem; margin-bottom: 0.7rem; }

/* Ficha de marca recomendada (/fundas/, /protector-pantalla/): mientras no hay
   producto oficial del Duo, se cita la marca que la prensa recomienda hoy para
   un plegable real, con sus fuentes y un enlace a ESE producto, no a uno inventado. */
.acc-marca {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 1.2rem 0;
}
.acc-marca h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.acc-marca > p { color: var(--text-dim); margin-bottom: 0.8rem; max-width: none; }
.acc-marca-fuentes { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--text-dim); font-size: 0.85rem; }
.acc-marca-fuentes li { margin-bottom: 0.35rem; }
.acc-marca-fuentes a { color: var(--accent-soft); }

/* Ficha de producto REAL a la venta (/fundas/): a diferencia de las tarjetas de
   filtración, aquí lo que importa es la foto grande, el precio y comprar, como
   en una tienda — no una cita de prensa con una fecha pequeña debajo. */
.producto-grid { display: grid; gap: 1rem; margin: 1.2rem 0 1.6rem; }
.producto-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
}
.producto-imagen {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}
.producto-marca { font-size: var(--paso-1); color: var(--text-dim); }
.producto-nombre { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: 0.1rem 0 0.5rem; }
.producto-precio-fila { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.producto-precio { font-size: 1.5rem; font-weight: 700; color: var(--accent-soft); }
.producto-valoracion { font-size: 0.85rem; color: var(--text-dim); }
.producto-resumen { font-size: 0.88rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 0.6rem; }
.producto-resena {
  margin: 0 0 0.8rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--border);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-dim);
}
.producto-resena cite {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--text-dim);
  opacity: 0.8;
}
@media (max-width: 560px) {
  .producto-card { grid-template-columns: 1fr; }
  .producto-imagen { max-width: 200px; margin: 0 auto; }
}

/* Enlace desde una ficha de /accesorios/ a su guía específica (/fundas/…) */
.acc-mas-info { font-size: 0.82rem; margin-top: -0.1rem; }
.acc-mas-info a { color: var(--accent-soft); text-decoration: none; border-bottom: 1px dotted var(--accent-soft); }

/* Página secundaria (/accesorios/): una sola columna, lectura cómoda */
.pagina { max-width: 780px; }
.pagina .hero-col { text-align: left; padding: 1.4rem 0 0.6rem; }
.pagina .hero-col h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.migas { font-size: 0.78rem; color: var(--text-dim); padding-top: 1.2rem; }
.migas a { color: var(--accent-soft); text-decoration: none; }
.migas span { margin: 0 0.3rem; }
a.brand { text-decoration: none; color: var(--text); }
.acc-consejo {
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0 0.5rem 0.85rem;
  color: var(--text-dim);
  font-size: 0.92rem;
}
.acc-consejo strong { color: var(--text); }
.acc-mas { margin-top: 1.1rem; }

.lista-acerca { list-style: none; margin: 0.6rem 0 1rem; }
.lista-acerca li {
  color: var(--text-dim);
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 2px solid var(--border);
  margin-bottom: 0.25rem;
}
.lista-acerca strong { color: var(--text); }
.site-footer a { color: var(--accent-soft); }


/* ====== Escala en pantalla pequeña ======
   El h2 a 2rem competía con el h1 del titular en móvil: dos tamaños casi iguales
   seguidos leen como si no hubiera jerarquía, que era el reproche de partida. */
@media (max-width: 720px) {
  :root { --paso-5: 1.55rem; }
  .hero-col h1 { letter-spacing: -0.03em; }
  .ficha-valor { font-size: 1.12rem; }
  main { padding-left: 1.15rem; padding-right: 1.15rem; }
}

/* --titanio (2,52:1 sobre papel) NO llega a AA: se reserva para filetes, el
   subrayado de las fuentes y el chevron. Nunca para texto que haya que leer. */

/* ====== Tema oscuro ======
   Tres estados, en este orden y con estas guardas a propósito:
     1. :root            → claro, el que manda por defecto.
     2. @media dark      → sigue AL SISTEMA, salvo que el visitante haya elegido
                           claro a mano (de ahí el :not([data-tema="claro"])).
     3. [data-tema=...]  → la elección manual gana siempre, en los dos sentidos.
   Sin la guarda del punto 2, quien tuviera el sistema en oscuro no podría forzar
   el claro: el media query volvería a pisarlo.

   La preferencia se guarda en localStorage, NO en una cookie: es una preferencia
   de interfaz pedida por el propio visitante, así que no cambia nada del aviso de
   cookies (esta web sigue sin usar ninguna). Ver public/tema.js. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #0b0e14;
    --bg: #0b0e14;
    --bg-card: #12161f;
    --border: #2c3342;
    --filete: #1f2531;
    --text: #f5f3ef;
    --text-dim: #a0a7b4;
    --accent: #9ab6de;
    --accent-soft: #c6d8f0;
    --titanio: #5c6472;
    --barra: rgba(11, 14, 20, 0.85);
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --papel: #0b0e14;
  --bg: #0b0e14;
  --bg-card: #12161f;
  --border: #2c3342;
  --filete: #1f2531;
  --text: #f5f3ef;
  --text-dim: #a0a7b4;
  --accent: #9ab6de;
  --accent-soft: #c6d8f0;
  --titanio: #5c6472;
  --barra: rgba(11, 14, 20, 0.85);
  color-scheme: dark;
}

/* ====== Botón de tema ======
   El icono NO lo pone el JavaScript: lo decide el CSS con los mismos selectores
   del tema, así que sale bien pintado desde el primer fotograma aunque el JS
   tarde. Se muestra el destino del clic: luna sobre claro, sol sobre oscuro. */
.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 1.1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  flex: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tema:hover { color: var(--text); border-color: var(--text-dim); }
.tema svg { display: block; }
.tema .tema-sol, .tema .tema-rayos { display: none; }
.tema .tema-luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .tema-luna { display: none; }
  :root:not([data-tema="claro"]) .tema .tema-sol,
  :root:not([data-tema="claro"]) .tema .tema-rayos { display: block; }
}
:root[data-tema="oscuro"] .tema .tema-luna { display: none; }
:root[data-tema="oscuro"] .tema .tema-sol,
:root[data-tema="oscuro"] .tema .tema-rayos { display: block; }
:root[data-tema="claro"] .tema .tema-luna { display: block; }
:root[data-tema="claro"] .tema .tema-sol,
:root[data-tema="claro"] .tema .tema-rayos { display: none; }

@media (max-width: 860px) {
  .tema { margin-left: 0.6rem; width: 32px; height: 32px; }
}

/* ====== Cabecera con el botón de tema ======
   El menú ya lleva 11 entradas; al añadir el botón, la fila se partía en dos y la
   cabecera crecía de golpe. En escritorio la fila no envuelve y es el MENÚ el que
   cede: se encoge y, si hace falta, se desliza. El botón nunca se encoge (flex:
   none arriba), porque un control redondo aplastado se lee como un fallo. */
@media (min-width: 861px) {
  .site-header { flex-wrap: nowrap; }
  .site-header nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { margin-left: 1rem; }
}
/* En móvil el menú ya ocupa su propia línea (order: 3), así que el botón se queda
   arriba junto a la marca, que es donde se alcanza con el pulgar. */
@media (max-width: 860px) {
  .tema { order: 2; margin-left: auto; }
}