/* Guía de cuidados (/cuidados/). Hereda tokens y primitivas de css/marca.css y
   los componentes de sitio de css/style.css; reutiliza `.field`, `.choice-row` y
   `.choice-btn`, que no son del wizard sino del sistema de formularios.

   La página es de LECTURA con un control arriba. Todo el contenido está en el
   HTML servido —el mismo criterio que /preguntas/— y lo único que hace el
   JavaScript es marcar en cuál etapa estás. Por eso nada de acá esconde texto:
   la etapa activa se resalta, las demás no se apagan. */

/* Mismo ancho que las preguntas: es texto para leer de corrido, y 780px es lo
   que deja la línea en el rango cómodo sin que el ojo se pierda al volver. El
   `padding-top` chico y no el `--sp-6` de `.section`, porque arriba no hay
   sección anterior sino el nav, que ya puso su hueco con `.pagina-main`. */
.cuidados-section { max-width: 780px; padding-top: 1.5rem; }

/* ---------- De dónde salen las pautas ---------- */
/* Con la barra cian a la izquierda, el mismo recurso con el que el formulario de
   piercings cuelga la explicación de cada procedimiento: una nota atada a lo que
   tiene al lado, no una tarjeta suelta. */
.cuidados-fuente {
  border-left: 3px solid var(--cian);
  padding-left: 1rem;
  margin-bottom: var(--sp-4);
  color: var(--hueso-tenue);
  font-size: var(--t-chico);
  line-height: 1.6;
  max-width: 62ch;
}
.cuidados-fuente strong { color: var(--hueso); font-weight: 700; }
/* El bloque pinta todo su texto en gris tenue, así que los dos enlaces —el
   Instagram del dermatólogo y el WhatsApp del estudio— heredaban ese gris y
   salían indistinguibles de lo que tienen alrededor. Mismo caso que el cierre
   de más abajo. */
.cuidados-fuente a { color: var(--cian); text-decoration: underline; }

/* ---------- El selector de fecha ---------- */
/* Esto sí es tarjeta: es el único control de la página y tiene que leerse como
   una cosa aparte del texto. No hay tarjetas anidadas —la página no vive dentro
   de ninguna—, así que no se rompe la regla del sistema. */
.cuidados-fecha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-2) var(--sp-3);
  background: var(--negro-2);
  border: 3px solid var(--negro-3);
  border-radius: var(--radio);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* `[hidden]` necesita su propia regla porque la clase declara `display`, y una
   clase que declara `display` le gana al `[hidden] { display: none }` del
   navegador. Es la trampa que este proyecto ya pagó dos veces —`.perfo-campo` y
   `.field`— y por eso la regla va pegada a la clase que la causa. El selector
   nace oculto y lo destapa js/cuidados.js: sin JavaScript no se muestra un campo
   que no va a hacer nada. */
.cuidados-fecha[hidden] { display: none; }

/* `flex: 0 1 auto` y no una base de 15rem: el campo mide lo que mide el control
   de fecha y no reclama una franja que después queda medio vacía. */
.cuidados-fecha .field { flex: 0 1 auto; min-width: 0; }

.cuidados-fecha input[type="date"] {
  /* El calendario nativo se pinta según el esquema declarado: sin esto sale el
     panel blanco de sistema encima de una página negra. Mismo tratamiento que
     `.field select` en style.css. */
  color-scheme: dark;

  /* **El ancho se ajusta al contenido, y esto es el arreglo, no un detalle.**
     `marca.css` pone `input, select, textarea { width: 100% }`, que es lo
     correcto para un campo de texto y lo incorrecto para uno de fecha: el
     control mide 162px de contenido y se estiraba a los 281 de la tarjeta,
     dejando el "dd/mm/aaaa" pegado a la izquierda y el ícono del calendario
     clavado en el borde derecho, con más de cien píxeles de nada en medio. Se
     leía como un campo descuadrado. Con `fit-content` el ícono queda pegado a
     la fecha y el bloque entra en el mismo ritmo compacto que los botones de
     abajo. El `max-width` es la red: si un idioma escribe la fecha más larga,
     crece hasta el ancho de la tarjeta y no se sale. */
  width: fit-content;
  max-width: 100%;
}
/* Acá vivía un `min-height: 3rem` puesto por si iOS no le daba altura propia al
   campo. Se midió y no hacía lo que decía hacer: lo llevaba de 47 a 48 cuando
   los botones de al lado miden 49, así que no emparejaba nada. No hace falta —
   la fila alinea por abajo (`align-items: flex-end`), así que un pixel de
   diferencia de alto no se ve, y 47 pasa de sobra el mínimo táctil. */

.cuidados-atajos { display: flex; flex-direction: column; gap: .4rem; }
/* Micro en mayúsculas, igual que cualquier etiqueta de control del sistema. */
.cuidados-atajos-label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hueso-tenue);
}
/* Los atajos se quedan con el `padding` de `.choice-btn` tal cual. Se probó
   achicarlo para emparejarlos con el campo de fecha y quedaban en 43px de alto:
   un pixel por debajo del mínimo táctil del sitio, y `.choice-btn` no está en el
   bloque de `pointer: coarse` de style.css justamente porque de fábrica ya lo
   pasa (medido: 49px). El campo de fecha queda en 48 y esa diferencia de un
   pixel no se persigue: la altura del botón la decide la interlínea de Archivo,
   así que fijarla a mano sería un número que envejece con la fuente. */

/* La membrana va en su propia fila y no como una tercera columna: es otra
   pregunta, no una variante de la fecha, y apretadas las tres el campo de fecha
   bajaba de su base flexible. El filete de arriba es el mismo recurso con el que
   el sistema separa dentro de una superficie. */
.cuidados-membrana {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  border-top: 2px solid var(--negro-3); padding-top: 1rem;
}
/* **Los cuatro botones de la tarjeta miden lo mismo, y hace falta decirlo en una
   regla sola.** Con sus anchos propios salían 83 / 88 / 67 / 74: cuatro medidas
   distintas en dos filas pegadas se leen como descuido. Se probó `flex: 1 1 0`
   sobre los atajos y no alcanza —el mínimo automático de un ítem flex es su
   min-content, y "Ayer" con su padding pide 88, más que el reparto—, así que el
   par seguía desnivelado. 5.5rem son esos 88: el más ancho manda y los otros
   tres lo alcanzan. Es un mínimo y no un ancho, así que una etiqueta más larga
   crece en vez de recortarse; lo que se pierde en ese caso es la simetría, no
   el texto. */
.cuidados-fecha .choice-btn { min-width: 5.5rem; }

/* El resultado toma la fila entera: un nombre de etapa largo junto al campo
   partía la tarjeta en tres columnas desparejas. */
.cuidados-resultado {
  flex-basis: 100%;
  margin: 0;
  color: var(--hueso-tenue);
  font-size: var(--t-chico);
  line-height: 1.55;
}
.cuidados-resultado:empty { display: none; }
.cuidados-resultado strong { color: var(--amarillo); font-weight: 700; }
.cuidados-resultado a { color: var(--cian); }

/* ---------- La nota de la membrana ---------- */
/* Misma barra cian que la nota de procedencia. Va con más aire abajo porque es
   lo último antes de la línea de tiempo, y quien salió con membrana tiene que
   chocarse con ella antes de leer "dejalo destapado" en la primera etapa. */
/* **El aire antes de la línea de tiempo NO lo pone esta nota**, y es una lección
   pagada: lo ponía, y cuando la nota pasó a mostrarse solo a quien contesta que
   sí usó membrana, el hueco se desplomó de 64px a 24 para todos los demás —o
   sea, para casi todo el mundo—. El espacio de una sección no puede depender de
   un bloque que puede no estar. Ahora lo pide la línea de tiempo (`margin-top`
   abajo) y la nota no aporta margen inferior: sin ella, los márgenes del marco y
   de la línea colapsan al mayor y el hueco es el de siempre. */
.cuidados-membrana-nota {
  border-left: 3px solid var(--cian);
  padding-left: 1rem;
  margin: 0;
  color: var(--hueso-tenue);
  line-height: 1.65;
  max-width: 68ch;
}
/* La clase de arriba NO declara `display`, así que hoy el `[hidden]` que le pone
   js/cuidados.js funciona solo. Esta línea es el seguro: en este proyecto la
   trampa ya se cobró dos veces —`.perfo-campo` y `.field`—, y basta con que
   alguien le agregue un `display: flex` a la nota para que el atributo deje de
   esconder nada, en silencio y sin ningún síntoma. */
.cuidados-membrana-nota[hidden] { display: none; }
.cuidados-membrana-nota p { margin: 0 0 .7rem; }
.cuidados-membrana-nota strong { color: var(--hueso); font-weight: 700; }
.cuidados-membrana-nota a { color: var(--cian); text-decoration: underline; }

/* La foto va chica y a la izquierda, no a todo el ancho de la nota: es una
   referencia de "¿se ve así la mía?", no una pieza que haya que contemplar. A
   280px la película arrugada y el líquido debajo se distinguen sin competirle al
   texto que la explica. */
.cuidados-membrana-foto { margin: .9rem 0 0; max-width: 280px; }
.cuidados-membrana-foto img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--negro-3); border-radius: var(--radio);
}
.cuidados-membrana-foto figcaption {
  margin-top: .5rem;
  font-size: var(--t-micro); line-height: 1.5; color: var(--hueso-tenue);
}

/* ---------- El marco: lo que enmarca a toda la guía ---------- */
/* Va entre la nota de procedencia y el selector de fecha, y el margen de abajo
   iguala al de arriba para que los tres bloques del encabezado respiren igual. */
.cuidados-marco {
  border-top: 2px solid var(--negro-3);
  border-bottom: 2px solid var(--negro-3);
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-4);
}
.cuidados-marco p { margin: 0 0 .7rem; color: var(--hueso-tenue); line-height: 1.65; max-width: 68ch; }
.cuidados-marco p:last-child { margin-bottom: 0; }
.cuidados-marco strong { color: var(--hueso); font-weight: 700; }

/* ---------- La línea de tiempo ---------- */
/* Es un `<ol>` de verdad: las etapas van en orden y ese orden es información.
   El riel de la izquierda es el hilo que las une; el marcador de cada etapa es
   un cuadrado, no un círculo — el sistema es anguloso y acá el círculo no
   cumpliría ninguna función. */
.cuidados-linea { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }

.etapa {
  position: relative;
  padding-left: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-left: 3px solid var(--negro-3);
  transition: border-color .25s;

  /* El tamaño del marcador y su posición salen de acá y no de números sueltos
     repartidos por el archivo. Tres reglas los usan —el marcador, el tramo de
     riel de la última etapa y el centrado horizontal—, y antes cada una
     llevaba su propia constante: al crecer el marcador de 15 a 26px hubo que
     acordarse de las tres, y el `top` se quedó con el valor viejo. El
     resultado fue el logo 18px por debajo del título, medido. */
  --marcador: 26px;
  /* Centrado sobre la PRIMERA LÍNEA del título, no sobre la etapa: los títulos
     de dos renglones tienen que alinearse igual que los de uno. La altura de
     esa línea es el cuerpo del `<h2>` por su interlineado. */
  --marcador-top: calc((var(--t-h3) * 1.25 - var(--marcador)) / 2);
}
/* La última no arrastra el riel hasta el bloque siguiente: la línea termina con
   la última etapa, que es lo que dice que ahí se acabó. */
.etapa:last-child { border-left-color: transparent; padding-bottom: var(--sp-4); }
/* …pero su marcador sí tiene que seguir sobre el eje del riel, así que se le
   devuelve un pedacito de línea del alto del propio marcador. */
/* El alto llega hasta abajo del marcador, calculado desde las mismas dos
   variables: así el tramo sigue al marcador si alguien le cambia el tamaño. */
.etapa:last-child::after {
  content: ""; position: absolute; left: -3px; top: 0; width: 3px;
  height: calc(var(--marcador-top) + var(--marcador));
  background: var(--negro-3);
}

/* El marcador es la cara de Maxito, no un cuadrado (estudio, 2026-08-29).
   Sigue el mismo criterio de contraste que tenía el cuadradito: el riel se
   queda en negro-3 —1.23:1 sobre negro, que es lo correcto para un separador—
   y el marcador es lo que marca el compás. Subir el riel lo volvería una barra
   de acento, que es otra cosa.

   Los dos estados salen de UNA sola imagen, no de dos archivos: el logo ya es
   amarillo, así que el estado activo es la imagen tal cual y el inactivo la
   misma en gris. Con dos archivos habría que acordarse de reemplazar los dos
   el día que cambie el logo.

   Mide 26px y no 15: la cara tiene ojos, gorro y pecas, y por debajo de ~24px
   deja de leerse como una cara y se vuelve una mancha.

   El `brightness(.85)` está medido, no elegido a ojo: se dibujó el logo en un
   canvas con este mismo filtro y se muestrearon los píxeles. En gris puro el
   logo queda en 181 y sus píxeles más claros en 191 —más brillante que el
   texto secundario—; con .85 el máximo cae en 164, que es exactamente la
   luminancia de `--hueso-tenue`. O sea que el marcador pesa lo mismo que
   pesaba el cuadradito, que es lo que la decisión de contraste de arriba
   pedía. Sin el ajuste el marcador se va a 244 y le grita más fuerte a la
   página que la etapa encendida.

   **El fondo en `--negro` no es decorativo: es lo que corta el riel.** El logo
   es de línea con el interior transparente, así que sin fondo la línea de
   3px se ve POR DENTRO de la cara —el marcador se pinta encima del borde, pero
   por los huecos igual se asoma—. Con el fondo opaco el riel se interrumpe
   los 26px del marcador y la cara queda limpia, que es lo que hacía el
   cuadradito de antes por ser sólido. */
.etapa::before {
  content: "";
  position: absolute;
  /* Centrado sobre el riel: media cara a la izquierda, menos la mitad de los
     3px del propio riel. */
  left: calc(var(--marcador) / -2 - 1.5px);
  top: var(--marcador-top);
  width: var(--marcador); height: var(--marcador);
  /* Por encima del tramo de riel que la ÚLTIMA etapa dibuja con `::after`.
     Sin esto el logo de "Del mes en adelante" salía atravesado y los otros
     cuatro no: entre dos pseudo-elementos posicionados sin `z-index` gana el
     que va después en el documento, y `::after` va después. El fondo opaco
     tapa el borde de las demás etapas, pero no a un hermano que se pinta
     encima. */
  z-index: 1;
  background: var(--negro) url("../assets/logo-mark.png") center / contain no-repeat;
  filter: grayscale(1) brightness(.85);
  transition: filter .25s;
}

/* La etapa en la que estás. Riel y marcador en amarillo, y el marcador con la
   sombra dura del sistema: es el mismo vocabulario del chip activo. Nada se
   apaga alrededor — el resto de la línea de tiempo se sigue leyendo entera. */
.etapa.is-ahora { border-left-color: var(--amarillo); }
/* `filter: none` y no simplemente quitar la regla: el estado de reposo usa
   `filter` para el gris, y `filter` no se acumula —se reemplaza—, así que la
   etapa encendida necesita apagarlo para que la cara vuelva a su amarillo.

   **El marcador NO lleva la sombra dura roja** (estudio, 2026-09-02). Desde
   que tiene fondo opaco su silueta es el cuadrado, así que la sombra salía
   como un bloque rojo de 26px detrás de la cara en vez de seguir el dibujo:
   parecía un recuadro alrededor del logo, no la sombra pintada a mano del
   sistema. La etapa encendida ya se distingue por dos cosas —el riel en
   amarillo y la cara a color contra las grises—, y eso alcanza. */
.etapa.is-ahora::before {
  filter: none;
}
/* Si la última etapa es la activa, su tramo de riel acompaña. */
.etapa.is-ahora:last-child::after { background: var(--amarillo); }

/* ---------- Etapas plegables ---------- */
/* Cada etapa es un `<details>` y no un div con un botón hecho a mano: el
   navegador ya trae el plegado, el foco, la tecla Enter y el estado
   `aria-expanded` — y además funciona sin JavaScript, que importa porque esta
   guía la lee gente con el tatuaje recién hecho y una mano ocupada.

   **Arrancan TODAS abiertas.** Solo se pliegan cuando alguien elige una fecha,
   que es cuando una etapa pasa a ser la suya y las otras, contexto. Quien entra
   a leer la guía de corrido la encuentra entera, como siempre. */
.etapa-caja { border: 0; }
/* El triángulo nativo se apaga en los dos dialectos: Safari todavía pide
   `::-webkit-details-marker` y no entiende `list-style` acá. */
.etapa-titulo::-webkit-details-marker { display: none; }
.etapa-titulo { list-style: none; }

.etapa-titulo {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  cursor: pointer;
  margin-bottom: var(--sp-2);
}
/* El área de toque llega hasta el borde derecho del bloque, no solo al texto:
   apuntarle a un título de dos líneas con el pulgar es incómodo si solo los
   glifos responden. */
.etapa-titulo > h2 { flex: 1; margin-bottom: 0; }
.etapa-titulo:focus-visible {
  outline: 3px solid var(--amarillo); outline-offset: 4px; border-radius: var(--radio);
}

/* Chevron de un solo trazo, como todos los íconos del sistema. Apunta abajo
   cerrado y arriba abierto: la dirección dice hacia dónde se va a mover el
   contenido, no dónde está. */
.etapa-chevron {
  flex: none; margin-top: .35rem;
  fill: none; stroke: var(--hueso-tenue); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s, stroke .2s;
}
.etapa-caja[open] .etapa-chevron { transform: rotate(180deg); }
.etapa-titulo:hover .etapa-chevron { stroke: var(--amarillo); }
.etapa.is-ahora .etapa-chevron { stroke: var(--amarillo); }

/* Plegada, la etapa no necesita todo el aire que separa una de otra. */
.etapa:has(.etapa-caja:not([open])) { padding-bottom: var(--sp-3); }

.etapa h2 {
  font-family: var(--font-rotulo); font-weight: 400; color: var(--amarillo);
  font-size: var(--t-h3); line-height: 1.25; margin-bottom: var(--sp-2);
}

/* "Estás acá · día 8". Va DENTRO del `<h2>` y detrás del texto, nunca encima:
   arriba sería un eyebrow, y el sistema no los usa. Es el chip activo del
   sistema, con su sombra dura roja. */
.etapa-ahora {
  display: inline-block;
  margin-left: .6rem;
  vertical-align: .18em;
  padding: .3rem .6rem;
  background: var(--amarillo); color: var(--negro);
  border-radius: var(--radio);
  box-shadow: 3px 3px 0 var(--rojo);
  font-family: var(--font-texto); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.etapa-ahora[hidden] { display: none; }

/* Los rótulos internos ("Cómo se ve", "Qué hacer") en cian y sin cursiva: es
   exactamente el tratamiento que ya tienen los subtítulos de los cuidados en
   /preguntas/, y el cian es el color con el que este sistema separa. */
.etapa h3 {
  font-family: var(--font-texto); font-weight: 600; color: var(--cian);
  font-size: var(--t-chico); letter-spacing: .01em;
  margin: var(--sp-2) 0 .5rem;
}
.etapa-cuerpo > h3:first-of-type { margin-top: 0; }
.etapa p { margin: 0; color: var(--hueso-tenue); line-height: 1.65; max-width: 68ch; }
.etapa strong { color: var(--hueso); font-weight: 700; }

/* Las dos listas comparten todo menos el color del cuadradito: el amarillo
   marca lo que hay que hacer y el gris lo que no. El texto del `h3` de arriba es
   el que dice cuál es cuál — el color solo acompaña, nunca es el único portador
   del significado. Sin emoji y sin glifos: el sistema no los usa. */
.etapa ul { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.etapa li { position: relative; padding-left: 1.15rem; margin-bottom: .6rem; color: var(--hueso-tenue); line-height: 1.6; }
.etapa li:last-child { margin-bottom: 0; }
.etapa li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px;
}
.lista-si li::before { background: var(--amarillo); }
.lista-no li::before { background: var(--hueso-tenue); }

/* ---------- La prueba del dermatólogo, plegada ---------- */
/* Toma prestado el vocabulario de `.filters-mas` (style.css): borde punteado,
   micro en mayúsculas, cian, y un galón dibujado con dos bordes que gira al
   abrir. **El punteado es lo que dice qué es.** Con el borde sólido de un chip
   se leería como un control de la guía; punteado se lee como "hay algo más
   detrás", que es exactamente lo que hay: respaldo, no instrucción. */
.cuidados-prueba { margin-top: .6rem; }

.cuidados-prueba > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-texto); font-weight: 700; font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .8rem;
  border: 2px dashed var(--negro-3); border-radius: var(--radio);
  color: var(--cian); cursor: pointer;
  transition: border-color .2s, color .2s;
}
/* El triangulito nativo se saca por los dos caminos que existen: `list-style`
   cubre a los navegadores modernos y el pseudo-elemento con prefijo a Safari,
   que lo ignora. Sin los dos, el galón propio queda al lado del de fábrica. */
.cuidados-prueba > summary { list-style: none; }
.cuidados-prueba > summary::-webkit-details-marker { display: none; }

.cuidados-prueba > summary:hover,
.cuidados-prueba > summary:focus-visible { border-color: var(--cian); color: var(--cian-luz); }

.cuidados-prueba > summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.cuidados-prueba[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

/* Abierto, el texto se cuelga de una barra cian: el mismo recurso de la nota de
   procedencia de arriba, y lo que lo ata al punto que respalda en vez de
   dejarlo flotando como un párrafo más de la etapa. */
.cuidados-prueba > p {
  margin: .7rem 0 0; padding-left: 1rem;
  border-left: 3px solid var(--cian-oscuro);
  color: var(--hueso-tenue); font-size: var(--t-chico); line-height: 1.6;
  max-width: 62ch;
}
.cuidados-prueba a { color: var(--cian); text-decoration: underline; }

/* Cerrado el pliegue mide 38 de alto, igual que medía `.filters-mas` antes de su
   mínimo táctil. La condición es el tipo de puntero y no el ancho, como en todo
   el sitio: lo que decide el tamaño de un blanco es con qué se toca. */
@media (pointer: coarse) {
  .cuidados-prueba > summary { min-height: 44px; }
}

/* ---------- Lo que decide un médico ---------- */
.cuidados-medico {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--negro-3);
}
.cuidados-medico > h2 {
  font-family: var(--font-rotulo); font-weight: 400; color: var(--amarillo);
  font-size: var(--t-h3); margin-bottom: var(--sp-3);
}
.cuidados-medico-item + .cuidados-medico-item { margin-top: var(--sp-3); }
.cuidados-medico-item h3 {
  font-family: var(--font-texto); font-weight: 700; color: var(--hueso);
  font-size: var(--t-cuerpo); line-height: 1.3; margin-bottom: .5rem;
}
.cuidados-medico-item p { margin: 0; color: var(--hueso-tenue); line-height: 1.65; max-width: 68ch; }
.cuidados-medico-item strong { color: var(--hueso); font-weight: 700; }

/* ---------- El cierre ---------- */
/* Se reutiliza `.faq-cierre` de style.css. El enlace de texto que va al lado
   del botón necesitaba cian y subrayado para no salir igual que la prosa; esa
   regla **vivía acá y se mudó a style.css** el 2026-08-09, cuando el estudio
   encontró el mismo defecto en las cinco respuestas de /preguntas/. Era el
   mismo bug en dos páginas, así que la corrección es una sola y global.
   Buscala junto a `.faq-item a` en style.css. */

/* ---------- Angosto ---------- */
@media (max-width: 560px) {
  /* Apilados, el `align-items: flex-end` de escritorio ya no alinea nada útil:
     cada grupo va en su renglón. `stretch` NO los ensancha —el eje transversal
     de una fila es el vertical, y el ancho lo sigue mandando el contenido—, y
     eso está bien: los dos grupos de botones se quedan a su ancho natural en
     vez de estirarse a media pantalla. Lo que sí hace falta es que dentro de
     cada grupo los botones midan lo mismo (ver abajo). */
  .cuidados-fecha { align-items: stretch; }

  /* El chip "Estás acá" no cabe en el renglón del título en un teléfono: con él
     dentro, el h2 de la etapa más larga se partía en cuatro líneas. Baja a
     renglón propio, que es lo que hace `display: block` con el margen izquierdo
     a cero. */
  .etapa-ahora { display: block; width: fit-content; margin-left: 0; margin-top: .6rem; vertical-align: baseline; }
}