/* ============================================================
   duqe — estilos de la portada (front-page) y plantillas de página
   Extraído del prototipo "duqe — Editorial.html"
   ============================================================ */

/* ---------- marco de teléfono con captura real ----------
   El teléfono es un aro rojo alrededor de la pantalla, y nada más. Antes de
   esto había un chasis oscuro de 8 px con el aro rojo por dentro, y era lo
   peor de los dos mundos: rojo por dentro y negro por fuera, un doble marco
   que no existe en ninguna pieza de marketing.

   El grosor no es a ojo. Midiendo la primera captura de la ficha (1320 px de
   ancho), el aro rojo son 16 px sobre un móvil de 1112: el 1,44 % del ancho.
   Aplicado al .device de 288 px de la web salen 4,1 px, de donde vienen los
   4 px de abajo. Al reducirse el teléfono en móvil, el aro se reduce con él.

   La sombra se conserva: en las capturas de Play el móvil va sobre un fondo
   con textura y aquí flota sobre papel liso, así que sin ella quedaría pegado.

   Como es una forma sin texto encima, usa el rojo de marca puro (--red) y no
   el de letra. Es el mismo criterio que el cuadrado del logotipo. */
.device {
  flex: none;
  padding: 4px;
  background: var(--red);
  border-radius: 38px;
  box-shadow:
    0 44px 80px -34px rgba(20,16,10,.5),
    0 14px 32px -20px rgba(20,16,10,.4);
}
.device img {
  width: 100%; display: block;
  border-radius: 34px;
}

/* En pantallas pequeñas el teléfono baja de 288 px a unos 190, así que el aro
   se afina para mantener esa misma proporción del 1,4 %. */
@media (max-width: 700px) {
  .device { padding: 3px; border-radius: 30px; }
  .device img { border-radius: 27px; }
}

/* HERO */
.hero { padding: clamp(36px, 6vw, 84px) 0 clamp(44px, 7vw, 104px); position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
.hero__ey { display:flex; align-items:center; gap: 14px; margin-bottom: 28px; }
/* La rayita del eyebrow es lo primero que se ve al cargar la página. Va en el
   rojo de marca porque es una FORMA (un filete de 1 px), no letra: ahí el
   4,00:1 de --red sobra —WCAG pide 3:1 a los elementos gráficos— y da el tono
   de la casa sin gastar ni un píxel de texto. */
.hero__ey .ln { height:1px; width: 54px; background: var(--red); }
.hero h1 { font-size: clamp(38px, 4.8vw, 88px); font-weight: 800; line-height: 1.0; margin-bottom: 30px; }
.hero h1 .nb { white-space: nowrap; }
/* La palabra marcada con *asteriscos* en el Personalizador.
   Hasta septiembre de 2026 esto era un color-mix al 26 % de la tinta: #bdbcba
   sobre el papel, o sea 1,82:1. Era el PEOR texto de toda la portada y estaba
   justo en la palabra que lleva el significado de la frase ("una *verdadera*
   herramienta"). El diseño decía "esta palabra importa" y el color decía lo
   contrario. Con --red pasa a 4,00:1 y, como el titular va de 38 a 88 px,
   entra de sobra en el umbral de texto grande de WCAG (3:1). Deja de ser una
   palabra apagada para ser una palabra acentuada, que es lo que se quería. */
.hero h1 .outline { color: var(--red); }
.hero__lead { margin-bottom: 36px; }
.hero__cta { display:flex; align-items:center; gap: 16px; flex-wrap: wrap; }
.hero__phones { position: relative; display:flex; justify-content:center; align-items:center; min-height: 600px; }
.hero__phones .device:nth-child(1){ transform: rotate(-4deg) translateY(12px); z-index:2; width: 288px; }
.hero__phones .device:nth-child(2){ transform: rotate(4deg) translate(-8px,-14px); margin-left:-70px; z-index:1; width: 270px; }
/* La línea de datos del hero ("Tareas · Notas · Proyectos", etc.).
   ------------------------------------------------------------------
   Era `position:absolute; left:0; bottom:0`, y eso la rompía en escritorio.
   Un elemento absoluto se posiciona contra el ancestro POSICIONADO más
   cercano, y aquí ese ancestro no era el .wrap que lleva el gutter de 72 px:
   era .hero (que tiene position:relative). Así que `left:0` significaba "el
   borde izquierdo del navegador", no "el borde de la columna de texto": la
   línea se salía 72 px de la retícula y quedaba a 3 px de la franja negra del
   manifiesto. En móvil no se veía porque más abajo se devolvía a static.
   La arreglamos quitando el truco: es un bloque más del flujo, con su propio
   margen superior. Así respeta el gutter por definición, sin depender de
   quién esté posicionado. */
.hero__tick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin-top: clamp(28px, 4vw, 56px);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.hero__tick b { color: var(--ink); font-weight: 700; }

.rule { height:1px; background: var(--line-strong); }
.rule--soft { background: var(--line); }

/* manifesto */
.manifesto { background: var(--ink); color: var(--paper); padding: clamp(42px, 5.5vw, 80px) 0; }
.manifesto__inner { display:flex; flex-direction:column; gap: 28px; }
/* El eyebrow del manifiesto ("EL CAMBIO") es el ÚNICO eyebrow de la portada
   que puede ir en rojo sin concesiones: sobre la tinta, --red da 4,71:1, que
   cumple AA incluso a 13 px. Los eyebrows sobre papel se quedan en gris,
   porque ahí el mismo rojo se queda en 4,00:1 y suspendería. */
.manifesto .eyebrow { color: var(--red); }
.manifesto h2 { font-size: clamp(28px, 4vw, 58px); font-weight: 700; line-height: 1.06; max-width: 24ch; }
/* Misma historia que el .outline del hero: la palabra marcada estaba
   translúcida (3,43:1) en vez de acentuada. Sobre negro el rojo va cómodo. */
.manifesto h2 em { font-style: normal; color: var(--red); }
.manifesto ::selection { background: var(--paper); color: var(--ink); }

/* features */
.features { padding: var(--sec) 0; }

/* .sec-head era un flex con space-between. Con un h2 de 17ch a la izquierda y
   un párrafo de 34ch a la derecha dentro de una fila de 1.296 px, quedaban
   ~620 px de cañón vacío en medio: los dos bloques se leían como si no
   tuvieran nada que ver. Con una rejilla de dos columnas el hueco es el gap y
   nada más, y el enlace "ver todas" sigue pegado a la derecha. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(40px, 6vw, 72px);
}
.sec-head h2 { font-size: clamp(32px, 4.6vw, 62px); font-weight: 800; max-width: 17ch; }
.sec-head p { color: var(--muted); max-width: 34ch; }
.sec-head .seemore { font-family: var(--font-display); font-weight: 700; font-size: 16px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; justify-self: end; }

.feat { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(22px,2.4vw,38px) 0; border-top: 1px solid var(--line); }
.feat:last-child { border-bottom: 1px solid var(--line); }
/* Los 01 / 02 / 03 / 04. Iban en --faint (2,55:1 con el gris de antes) y a
   14 px, o sea: texto pequeño que suspendía AA. Pasan a --red-ink (5,63:1),
   que es el rojo con letra. Bajan por la página como un pulso editorial:
   superficie mínima, carácter máximo. */
.feat__num { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--red-ink); letter-spacing: 0.06em; display:block; margin-bottom: 16px; }
.feat__txt h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 700; margin-bottom: 16px; }
.feat__txt p { color: var(--ink-2); max-width: 42ch; }
/* La caja gris ocupaba media fila (unos 616 px) para enseñar un teléfono de
   230: el 64 % del rectángulo era gris vacío. Ahora la caja se ajusta al
   teléfono y se centra en su columna, así que es un tapete y no un vacío.
   De paso la fila baja unos 30 px de alto, que también se agradece. */
.feat__media {
  background: var(--paper-2);
  border-radius: 24px;
  padding: clamp(22px,2.4vw,32px) clamp(18px,2vw,26px);
  display:flex; justify-content:center; align-items:center;
  width: min(100%, 300px);
  margin-inline: auto;
}
.feat--rev .feat__media { order: -1; }
/* max-width: 100% y no 78%: ahora la caja ya está ajustada al teléfono, así
   que un tope porcentual solo serviría para encogerlo otra vez. */
.feat__media .device { width: 288px; max-width: 100%; }

/* stats */
.stats { background: var(--paper-2); padding: var(--sec) 0; }
.stats__head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 80px); }
/* Antes iba como style="" en el HTML de front-page.php. Vive mejor aquí. */
.stats__head .eyebrow { display: block; margin-bottom: 22px; }
.stats__head h2 { font-size: clamp(30px, 4vw, 54px); font-weight: 800; line-height: 1.08; }
/* Tercera y última palabra marcada de la portada ("Nos lo está *quitando*").
   Estaba en 1,81:1. El titular es de 22 a 32 px en Montserrat 800, y a partir
   de 18,66 px en negrita WCAG lo considera texto grande: los 3,63:1 de --red
   sobre --paper-2 cumplen. */
.stats__head h2 em { font-style: normal; color: var(--red); }
.stats__grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.stat { background: var(--paper-2); padding: clamp(26px,3vw,40px) clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap: 10px; min-height: 230px; }
.stat__k { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.stat__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 5.4vw, 72px); line-height: 0.9; letter-spacing: -0.03em; margin-top: auto; }
.stat__v small { font-size: 0.4em; font-weight: 700; }
.stat__d { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
/* El pie de la sección de cifras: una frase de cierre de marca y, debajo, la
   nota bibliográfica.
   ------------------------------------------------------------------
   Estaban invertidas, y por especificidad. `.stats__foot p` (0-1-1) le ganaba
   a `.sources` de base.css (0-1-0), así que la nota de fuentes se pintaba en
   Montserrat 700 a 30 px —más grande que la frase a la que acompaña, y con
   más texto: cuatro líneas contra dos— heredando de .sources solo el color
   tenue. Resultado: el bloque más grande del pie era una nota al pie, y
   encima la menos legible de la página (2,31:1).
   Ahora la frase manda y la nota es una nota, separada por un filete. */
.stats__foot { display: block; margin-top: clamp(32px, 4vw, 48px); }
.stats__foot > p:first-child {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.02em;
  line-height: 1.15; max-width: 22ch;
}
.stats__foot p.sources {
  font-family: var(--font-body); font-weight: 400;
  font-size: 13px; line-height: 1.6; letter-spacing: 0;
  color: var(--muted);          /* 4,60:1 sobre --paper-2 → cumple AA */
  max-width: 62ch;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* blog teaser */
section.blog { padding: var(--sec) 0; }

/* CTA */
.cta { padding: var(--sec-lg) 0 var(--sec); text-align:center; }
/* Cuando el blog y el CTA se tocan comparten fondo (papel), así que sus dos
   paddings se leen como una sola banda vacía: 116 px del blog + 152 px del
   CTA daban un agujero de 268. Al tocarse, la frontera se cuenta una vez.
   Si no hay entradas publicadas la sección del blog no se imprime y el CTA
   queda pegado a las cifras, que sí cambian de fondo: ahí la escala grande
   sirve para marcar el cambio de tono, y por eso se deja como valor base. */
section.blog + .cta { padding-top: var(--sec); }
.cta h2 { font-size: clamp(44px, 7.6vw, 116px); font-weight: 800; margin-bottom: 18px; }
.cta p { color: var(--muted); margin-bottom: 40px; font-size: 19px; }
.cta__row { display:flex; justify-content:center; gap: 16px; flex-wrap: wrap; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 60px; }
.foot__top { display:flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; margin-bottom: 60px; }
.foot__brand { font-family: var(--font-display); font-weight: 800; font-size: 60px; letter-spacing: -0.05em; line-height: 0.8; }
.foot__links { display:flex; gap: 48px; flex-wrap: wrap; }
.foot__col { display:flex; flex-direction: column; gap: 12px; }
.foot__col .h { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 4px; }
.foot__col a { color: var(--ink-2); font-weight: 500; transition: color .2s; }
.foot__col a:hover { color: var(--ink); }
.foot__bottom { display:flex; justify-content: space-between; align-items:center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__phones { min-height: 520px; margin-top: 10px; }
  /* .hero__tick ya no necesita volver a static aquí: nunca sale del flujo. */
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .seemore { justify-self: start; }
  .feat { grid-template-columns: 1fr; gap: 24px; }
  .feat--rev .feat__media { order: 0; }
  .stats__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Tamaño FLUIDO: los teléfonos se miden como % del ancho de pantalla,
     así se adaptan a CUALQUIER móvil sin salirse. clamp(mín, ideal, máx)
     evita que sean diminutos en pantallas muy estrechas o enormes en tablets
     pequeñas. El conjunto (dos solapados) siempre cabe con margen. */
  .hero__phones { min-height: 0; max-width: 100%; overflow: visible; padding: 8px 0 16px; }
  .hero__phones .device:nth-child(1){ width: clamp(140px, 44vw, 210px); }
  .hero__phones .device:nth-child(2){ width: clamp(130px, 41vw, 196px); margin-left: clamp(-46px, -10vw, -32px); }
}

/* ============================================================
   Footer del blog / entrada (antes inline) — usado en home.php,
   single.php y la plantilla de página
   ============================================================ */
.foot--simple { margin-top: clamp(60px,9vw,120px); }
.foot--simple .foot__brand { font-size: 48px; margin-bottom: 28px; }

/* "Sigue leyendo" en la entrada individual */
.more { padding: clamp(40px,6vw,80px) 0; border-top: 1px solid var(--line); }
.more h4 { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }

/* ============================================================
   Plantilla flexible de página (page-ancha) — para "¿Qué es duqe?"
   y futuras páginas escritas con bloques de Gutenberg
   ============================================================ */
.pagehead { padding: clamp(24px, 3.5vw, 48px) 0 clamp(20px, 3vw, 36px); }
.pagehead .eyebrow { display:block; margin-bottom: 22px; }
.pagehead h1 { font-size: clamp(32px, 3.8vw, 72px); font-weight: 800; line-height: 0.94; letter-spacing: -0.03em; }
.pagehead .lead { margin-top: 26px; }

/* Página 404: botones de acción en fila */
.error404__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.pagehead--404 { padding-bottom: clamp(60px, 9vw, 120px); }

.page-body { padding: clamp(20px, 3vw, 40px) 0 clamp(60px, 9vw, 120px); }
/* Aquí había un `.page-body .prose { max-width: 760px; }`. Se ha BORRADO a
   propósito: con especificidad 0-2-0 le ganaba al max-width de .legal-prose y
   pisaba la escala tipográfica del contenido largo. .prose se define y se
   mantiene en help.css / blog.css; la portada no tiene por qué opinar. */
/* permite que ciertos bloques de Gutenberg se salgan a lo ancho si el usuario los marca como "ancho completo" */
.page-body .alignwide { max-width: 1180px; margin-inline: auto; }
.page-body .alignfull { max-width: none; }

/* utilidades reutilizables para que el usuario pueda recrear secciones desde bloques HTML si quiere */
.section { padding: clamp(48px, 7vw, 100px) 0; }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
/* --faint dejó de ser el gris claro de antes (ahora es #736e68, pensado para
   texto tenue SOBRE CLARO). Sobre la tinta el que vale es --faint-on-dark,
   que es exactamente el gris que tenía esta regla y da 7,40:1. */
.section--ink .eyebrow { color: var(--faint-on-dark); }

/* ============================================================
   AJUSTES DE TAMAÑO (duqe) — portada menos abrumadora
   Sobreescriben los tamaños de arriba. Para volver al diseño
   original, elimina este bloque.
   ============================================================ */

/* Hero: titular principal (~dos tercios) */
.hero { padding: clamp(16px, 2vw, 32px) 0 clamp(40px, 5vw, 72px); }
.hero h1 { font-size: clamp(38px, 4.8vw, 88px); line-height: 1.02; margin-bottom: 24px; }
.hero__lead { font-size: clamp(16px, 1vw, 18px); }
@media (min-width: 561px) {
  .hero__phones { min-height: 460px; }
}

/* ------------------------------------------------------------------
   Y CON EL TAMAÑO, EL INTERLINEADO
   Este bloque bajó todos los titulares (el h2 de sección de 62 a 34 px, el
   h3 de las funciones de 40 a 26) pero no tocó ni un line-height. El valor
   que hereda todo de base.css es 1.0, y 1.0 es un valor de DISPLAY: está
   pensado para un titular de 88 px que ocupa una o dos líneas. Aplicado a un
   subtítulo de 34 px que ocupa cuatro, los descendentes de una línea chocan
   con las mayúsculas de la siguiente ("la j de *empuje* casi toca la m de
   metas"). Regla: cuanto más pequeño el titular, más aire entre líneas.
   Se ponen aquí, junto al tamaño que los provoca, para que la próxima vez
   que alguien cambie un font-size vea el line-height al lado.
   ------------------------------------------------------------------ */

/* Franja manifiesto */
.manifesto h2 { font-size: clamp(22px, 2.2vw, 34px); line-height: 1.22; }

/* Títulos de sección (Funciones, Del blog) */
.sec-head h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; }

/* Funciones: título de cada bloque */
.feat__txt h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.feat__media .device { width: 230px; }

/* Cifras: título de la sección y valores grandes */
.stats__head h2 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.14; }
/* El número grande sí es display puro: una línea, y el 0.9 le sienta bien. */
.stat__v { font-size: clamp(32px, 3vw, 44px); }
.stat { min-height: 200px; }

/* CTA final: era lo más gigante (hasta 116px) → mucho menor */
.cta h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.06; }
/* El subtítulo iba a todo el ancho de la columna centrada y partía con la
   segunda línea mucho más corta que la primera. `text-wrap: balance` reparte
   las líneas por igual cuando de verdad hacen falta dos.

   La medida era de 30ch y estaba de más: a 16 px son unos 240 px, así que en
   un escritorio partía en dos una frase que cabía de sobra en una línea, y
   quedaba «Gratis para Android. Sin / anuncios, sin distracciones.». Con 52ch
   entra entera donde hay sitio y sigue partiendo bien en el móvil, que es
   donde el ajuste hacía falta. */
.cta p { font-size: 16px; max-width: min(52ch, 100%); margin-inline: auto; text-wrap: balance; }

/* ============================================================
   AJUSTES DEL FOOTER (duqe) — más compacto
   Mismo footer completo en portada, blog, entradas y páginas.
   ============================================================ */
.foot { padding: 40px 0 36px; }
.foot__top { margin-bottom: 32px; }
.foot__brand { font-size: 34px; margin-bottom: 0; }

/* Tres columnas en el footer (Producto / Recursos / Legal) */
.foot__links { gap: clamp(28px, 4vw, 56px); }
@media (max-width: 720px) {
  /* En móvil: la marca arriba y las columnas en rejilla de 2 (o 1 si no caben) */
  .foot__top { flex-direction: column; gap: 32px; }
  .foot__links { gap: 28px 40px; }
  .foot__col { min-width: 120px; }
}

/* ============================================================
   PROTECCIÓN MÓVIL — evitar que el texto largo se salga
   ============================================================ */
@media (max-width: 560px) {
  /* El texto del hero y titulares nunca debe tocar/salirse del borde */
  .hero h1, .manifesto h2, .sec-head h2, .stats__head h2, .cta h2,
  .feat__txt h3, .hero__lead, .feat__txt p {
    overflow-wrap: break-word; word-break: normal; hyphens: auto;
  }
  /* El grid del hero ocupa el ancho disponible sin forzar más */
  .hero__grid, .feat, .stats__grid { max-width: 100%; }
  .hero__grid > *, .feat > * { min-width: 0; }
}

/* ============================================================
   LA REJILLA DE "DEL BLOG" CON POCAS ENTRADAS
   ------------------------------------------------------------
   .posts (blog.css) dibuja sus líneas divisorias con el truco clásico de
   "fondo del contenedor + gap de 1 px". Funciona con tres tarjetas. Con una
   sola entrada publicada, las columnas 2 y 3 no tienen ningún .post que las
   tape y el fondo --line queda a la vista: un rectángulo gris vacío de
   862 × 225 px, dos tercios del ancho útil de la página.

   Se arregla en el tema y no esperando a que se publiquen más entradas:
   front-page.php cuenta las que hay de verdad y añade .posts--1 o .posts--2.
   Con una queda una tarjeta ancha que se lee como una decisión editorial
   ("la última del blog, destacada") y no como un fallo.

   Va dentro de un min-width a propósito. Por debajo de 900 px, blog.css ya
   colapsa .posts a una columna con `.posts { grid-template-columns: 1fr }`,
   que tiene especificidad 0-1-0; si estas reglas fuesen sueltas, su 0-2-0 le
   ganaría y en un móvil se verían dos columnas apretadas. Acotándolas al
   escritorio no pueden pisar nada.

   Solo se aplican dentro de .blog, que es la sección de la portada: el
   listado del blog (home.php / index.php) y las relacionadas de single.php
   no llevan esa clase y quedan fuera. Si algún día blog.css define
   .posts--1 / .posts--2 de forma general, este bloque sobra y se puede
   borrar entero.
   ============================================================ */
@media (min-width: 901px) {
  .blog .posts--1 { grid-template-columns: 1fr; }
  .blog .posts--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   MÓVIL: la portada medía 8.212 px de scroll (más de diez pantallas)
   ------------------------------------------------------------
   El 44 % de ese scroll eran las cuatro funciones, y casi todo el bulto era
   la captura: un pantallazo completo de Android a 230 px de ancho se ve al
   40 % de su tamaño real, así que ocupa 550 px de alto para no dejar leer ni
   un texto de la app. Aquí se recorta el gasto. El arreglo BUENO es de
   contenido —recortar las capturas a 4:5 sobre la parte relevante de cada
   pantalla, para que se vean el doble de grandes ocupando la mitad—, pero
   mientras tanto esto quita unos 400 px de página.
   ============================================================ */

@media (max-width: 980px) {
  /* min-height y margin-top:auto existen para alinear los seis números en la
     rejilla de tres columnas del escritorio. En una sola columna no alinean
     nada: solo dejan ~60 px de agujero entre la descripción y el número, seis
     veces seguidas. Se desactivan donde dejan de tener sentido. */
  .stat { min-height: 0; }
  .stat__v { margin-top: 8px; }
}

@media (max-width: 700px) {
  .feat__media { width: min(100%, 260px); padding: 22px 18px; border-radius: 18px; }
  /* Solo el ancho. El relleno y el radio los pone la regla general del
     .device, que es la que mantiene el aro rojo en el 1,4 % del ancho; aquí
     había un padding de 6 px heredado de cuando el teléfono llevaba chasis
     oscuro, y sobre un móvil de 190 px daba un aro del doble de grueso que el
     de los demás. */
  .feat__media .device { width: 190px; }
}

@media (max-width: 560px) {
  /* Los dos botones del hero se apilaban por el flex-wrap y quedaban con
     anchos distintos (uno de ~205 px y otro de ~240), alineados a la
     izquierda: se lee como un descuido, no como un diseño. En rejilla ocupan
     los dos el ancho completo. */
  .hero__cta { display: grid; gap: 12px; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* La línea de datos mantenía un gap de 28 px, así que los tres grupos se
     repartían el ancho y cada uno se partía en dos líneas ("Tareas · Notas· /
     Proyectos"). Con los grupos indivisibles y menos separación, fluye como
     una lista continua que rompe donde le toca. */
  .hero__tick { gap: 4px 14px; margin-top: 26px; }
  .hero__tick span { white-space: nowrap; }
}