/* =========================================================================
   Todas las historias. La misma voz que la portada: papel, filetes en vez de
   sombras y una prueba real por historia, cada una con su tratamiento (la
   pantalla entera, la captura que asoma, el celular, el padrón). El texto
   manda: el título-resultado es lo más grande de cada fila.

   Filtros sin JavaScript: radios del mismo grupo y :has(). Se filtra por lo
   que el dueño quiere resolver (la plata, WhatsApp, los papeles, vender
   online, tu propio sitio); cada filtro deja dos historias o más y una línea
   dice cuáles. Sin :has() los filtros no se dibujan y se ven las ocho.

   Dos niveles con el mismo filtro: las cuatro con prueba (captura o
   ilustración) y, debajo, las automatizaciones más compactas, donde lo
   visual es la cadena real de herramientas.

   Contraste (además de los de base.css):
     tinta-2 #4A5568 sobre marco #ECE6D9 (etiqueta) ..... 6,0
     hueso sobre navy (filtro elegido) ................. 16,08
   ========================================================================= */
.todas {
  --marco: #ECE6D9;                         /* papel un escalón más hondo */
  --radio-marco: 20px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(1.5rem, 0.75rem + 2vw, 2.75rem) var(--margen) 0;
}

.todas-antetitulo {
  margin-bottom: 0.9rem;
  font-size: var(--t-chico);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--enlace);
}
.todas-titulo {
  max-width: 20ch;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);      /* 36 → 56: menos que el hero (68) */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.todas-bajada {
  margin-top: 1.25rem;
  max-width: 36em;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--tinta-2);
}

/* -------------------------------------------------------------------------
   Filtros. El radio cubre toda la píldora (transparente), así el blanco
   táctil es la píldora entera; el foco del teclado se dibuja en la píldora.
   ------------------------------------------------------------------------- */
.filtros {
  display: none;                            /* sólo con :has(), abajo */
  min-width: 0;
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 0 0;
  padding: 0;
  border: 0;
}
.filtros-rotulo {
  margin-bottom: 0.7rem;
  padding: 0;
  font-size: var(--t-chico);
  font-weight: 650;
  color: var(--tinta-2);
}
.filtros-opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.filtro { position: relative; display: inline-flex; }
.filtro input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.filtro-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;                      /* 44 px */
  padding: 0.5rem 1rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgb(10 22 40 / .24);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
  transition:
    background-color var(--t-hover) ease,
    color var(--t-hover) ease,
    box-shadow var(--t-hover) ease,
    scale var(--t-presion) var(--ease-out);
}
.filtro input:checked + .filtro-rotulo {
  background: var(--navy);
  color: var(--hueso);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.filtro input:focus-visible + .filtro-rotulo { outline: 3px solid var(--foco); outline-offset: 3px; }
.filtro input:active + .filtro-rotulo { scale: var(--presion); }

@media (hover: hover) and (pointer: fine) {
  .filtro:hover input:not(:checked) + .filtro-rotulo { box-shadow: inset 0 0 0 1.5px var(--tinta); }
}

/* Celular: las seis opciones a la vista, sin desplazar de costado. El
   rótulo se acorta (lo que va en .filtro-largo se oculta) y la fila se
   parte en renglones. En escritorio quedan como están. */
@media (max-width: 47.99rem) {
  .filtros-opciones { gap: 0.4rem; }
  .filtro-largo { display: none; }
  .filtro-rotulo { white-space: nowrap; }
}

/* Qué quedó: una línea por filtro, sólo se ve la del elegido (abajo, con
   :has()). Está dentro de un aria-live: al cambiar, el lector la anuncia. */
.filtros-estado {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.filtros-estado p { display: none; }
.filtros-estado strong { font-weight: 700; color: var(--tinta); }

/* El filtro de verdad: las reglas :has() de cada término las genera el tema
   (franciscoprog_css_filtros() en functions.php) a partir de la taxonomía
   «problema», y van en un <style> pegado a esta hoja. */

/* -------------------------------------------------------------------------
   Las historias. Filetes arriba y abajo de cada una (no entre vecinas): con
   cualquier filtro, la primera que queda no se lleva una raya de más.
   ------------------------------------------------------------------------- */
.fichas {
  margin: clamp(1.5rem, 1rem + 1vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}
.ficha { border-bottom: 1px solid var(--linea); }

.ficha-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 1.5rem clamp(2rem, 0.5rem + 4.5vw, 5.5rem);
  padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

/* En bloque (no flex): el número arranca la misma línea que el cliente aunque
   el nombre sea largo y corte. */
.ficha-cliente {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta-2);
}
.ficha-numero {
  margin-right: 0.75rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--enlace);
}
.ficha-titulo {
  margin-top: 0.75rem;
  max-width: 24ch;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);      /* 24 → 36 */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.ficha-cambio {
  margin-top: 0.85rem;
  max-width: 34em;
  line-height: 1.55;
  color: var(--tinta-2);
}

/* Lo que además hace el sistema para ese cliente: una raya turquesa corta
   por renglón, sin viñetas ni cajas. */
.ficha-suma { display: grid; gap: 0.4rem; margin-top: 0.85rem; max-width: 34em; }
.ficha-suma li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.5;
  color: var(--tinta-2);
}
.ficha-suma li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.74em;
  width: 0.65rem;
  height: 2px;
  border-radius: 1px;
  background: var(--acento);
}

/* Las etiquetas son texto, no cajas: los nombres de los filtros separados
   con un punto medio que queda al final del renglón, nunca al principio.
   La que coincide con el filtro elegido se subraya (arriba, con :has()). */
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin-top: 1rem; }
.etiquetas li {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta-2);
  transition: color var(--t-hover) ease;
}
.etiquetas li:not(:last-child)::after {
  content: "·";
  content: "·" / "";
  display: inline-block;                    /* así el subrayado no lo alcanza */
  margin-inline: 0.5em;
  color: var(--tenue);
}

/* Enlaces de texto, como en la portada: subrayado que se engrosa en turquesa
   y la flecha que avanza. El foco del teclado hace lo mismo que el puntero. */
.ficha-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.75rem;
  margin-top: 0.9rem;
}
.enlace-ficha {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  color: var(--tinta);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.enlace-ficha--sitio { font-weight: 550; color: var(--tinta-2); }
.enlace-ficha svg {
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--enlace);
  transition: translate var(--t-rodar) var(--ease-out);
}
.enlace-ficha:focus-visible { text-decoration-color: var(--acento); }
.enlace-ficha:focus-visible svg { translate: 3px 0; }
.enlace-ficha--sitio:focus-visible svg { translate: 2px -2px; }

/* La prueba. Un marco de papel hondo con la misma proporción para todas; lo
   que cambia es cómo entra cada una: la pantalla del mostrador entera, la
   sala de Survivo y el celular de Torino asomando desde abajo, el padrón. */
.ficha-figura figcaption {
  margin-top: 0.6rem;
  font-size: var(--t-chico);
  color: var(--tenue);
}
.ficha-marco {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 16 / 11;
  min-height: 0;
  padding: clamp(1rem, 0.5rem + 2vw, 2rem) clamp(1rem, 0.5rem + 2vw, 2rem) 0;
  border-radius: var(--radio-marco);
  background: var(--marco);
  overflow: clip;
}
.ficha-marco img,
.padron {
  flex: none;
  box-shadow:
    0 0 0 1px rgb(10 22 40 / .08),
    0 18px 40px -24px rgb(10 22 40 / .4);
  transform-origin: 50% 0;
  transition: scale 700ms var(--ease-out);
}
.ficha-marco img { width: 100%; border-radius: 10px; }

.ficha-figura--pantalla .ficha-marco { align-items: center; padding-bottom: clamp(1rem, 0.5rem + 2vw, 2rem); }
.ficha-figura--pantalla img { transform-origin: 50% 50%; }
.ficha-figura--vertical img { width: 72%; max-width: 20rem; }
.ficha-figura--celular img { width: 44%; max-width: 11rem; border-radius: 22px; }

/* El padrón de la asociación: filas anónimas; las cuotas sin pagar, en turquesa */
.padron {
  width: 100%;
  max-width: 22rem;
  padding-bottom: 0.35rem;
  border-radius: 12px;
  background: #FBF9F4;
  font-size: 0.9375rem;
  line-height: 1.3;
}
.padron-cabeza,
.padron li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
}
.padron-cabeza {
  border-bottom: 1px solid var(--linea);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--tenue);
}
.padron li + li { border-top: 1px solid rgb(10 22 40 / .06); }
.padron-socio { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.padron-avatar { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--linea); }
.padron-estado {
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tenue);
  white-space: nowrap;
}
.padron .debe { background: rgb(0 184 169 / .08); }
.padron .debe .padron-estado { background: var(--acento); color: var(--navy); }

/* -------------------------------------------------------------------------
   Segundo nivel: las automatizaciones sin captura. Más compactas (menos aire,
   título más chico) y en la columna de la prueba, la cadena de herramientas:
   logo y nombre, unidos por una raya. En escritorio baja en vertical, como
   un flujo; en el celular va de corrido y corta renglón si hace falta.
   ------------------------------------------------------------------------- */
.ficha--breve .ficha-cuerpo {
  row-gap: 1.1rem;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.ficha--breve .ficha-titulo {
  margin-top: 0.55rem;
  max-width: 30ch;
  font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.625rem);  /* 20 → 26 */
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.ficha--breve .ficha-cambio { margin-top: 0.6rem; }
.ficha--breve .etiquetas { margin-top: 0.9rem; }

.cadenas { display: grid; justify-items: start; gap: 0.6rem; }
.cadena-rotulo {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--tenue);
}
.cadena + .cadena-rotulo { margin-top: 0.5rem; }
.cadena {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}
.cadena li { display: inline-flex; align-items: center; gap: 0.5rem; }
.cadena li + li::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 1.5px;
  border-radius: 1px;
  background: rgb(10 22 40 / .3);
}
.cadena img,
.cadena-ia,
.cadena-sin-logo { flex: none; width: 1.25rem; height: 1.25rem; }
/* Los logos de comun/logos vienen en hueso, para el capítulo navy de la
   portada; sobre papel se pasan a tinta oscura sin tocar los archivos. */
.cadena img { object-fit: contain; filter: brightness(0); }
/* OpenAI no tiene logo: un distintivo de texto, del tamaño de un ícono */
.cadena-ia {
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--navy);
  color: var(--hueso);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
}
/* Sin archivo de logo: va el nombre, con un nodo neutro para que alinee */
.cadena-sin-logo { display: grid; place-items: center; }
.cadena-sin-logo::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--tenue);
}

@media (min-width: 60rem) {
  .ficha--breve .cadena { flex-direction: column; align-items: flex-start; gap: 0.95rem; }
  .ficha--breve .cadena li { position: relative; }
  .ficha--breve .cadena li + li::before {
    position: absolute;
    left: calc(0.625rem - 0.75px);
    bottom: calc(100% + 0.15rem);
    width: 1.5px;
    height: 0.65rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .enlace-ficha:hover { text-decoration-color: var(--acento); }
  .enlace-ficha:hover svg { translate: 3px 0; }
  .enlace-ficha--sitio:hover svg { translate: 2px -2px; }
  .ficha:hover .ficha-marco img,
  .ficha:hover .padron { scale: 1.02; }
}

/* Celular y tableta: una columna; la prueba arriba, como portada de cada
   historia (sólo visual: en el DOM y para el teclado el texto va primero). */
@media (max-width: 59.99rem) {
  .ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ficha-figura { order: -1; max-width: 34rem; }
  .ficha-marco { aspect-ratio: 16 / 10; }
}
@media (max-width: 30rem) {
  .padron li, .padron-cabeza { padding-inline: 0.75rem; }
  .filtro-rotulo { padding-inline: 0.85rem; }

  /* En el celular el texto va antes que la prueba: número, cliente y título;
     después la imagen; después el cambio, las etiquetas y los enlaces. La
     caja del texto se disuelve (contents) para poder intercalar la figura. */
  .ficha-cuerpo { row-gap: 0; }
  .ficha-texto { display: contents; }
  .ficha-cliente,
  .ficha-titulo,
  .ficha-figura { order: -1; }
  .ficha-figura { margin-top: 1.25rem; }
  .ficha-cambio { margin-top: 1.1rem; }

  /* Las compactas igual: la cadena va donde iría la prueba, bajo el título */
  .ficha--breve .ficha-cuerpo { row-gap: 0; }
  .ficha--breve .cadenas { order: -1; margin-top: 0.9rem; }
  .ficha--breve .ficha-cambio { margin-top: 0.9rem; }

  /* Lógica Control: entera no se lee a este ancho. Se recorta a la franja
     verde «¡Bienvenido/a!». La caja de la imagen es más angosta que la
     captura (380 de 960 px de ancho), así cover la agranda hasta que esos
     380 px llenan el ancho y object-position elige la franja (x 352–732);
     el margen negativo sube la imagen hasta la fila 372 y el marco corta. */
  .ficha-figura--pantalla .ficha-marco {
    display: flow-root;                     /* sin esto el margen negativo se sale del marco */
    aspect-ratio: auto;
    padding: 0;
  }
  .ficha-figura--pantalla img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 493;
    margin-top: -98%;
    border-radius: 0;
    object-fit: cover;
    object-position: 60.7% 0;
    box-shadow: none;
  }
}

/* -------------------------------------------------------------------------
   Movimiento. La cabeza llega una vez al cargar; al filtrar, las historias
   que vuelven entran suaves (@starting-style); ligado al scroll, el marco se
   destapa y el texto se asienta. Todo dentro de «no-preference»; lo ligado
   al scroll, además, sólo donde hay scroll timelines. Nada espera a un
   observer: sin soporte, todo está quieto y a la vista.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .todas-cabeza > *,
  .filtros { animation: llega 700ms var(--ease-out) both; }
  .todas-cabeza > :nth-child(2) { animation-delay: 70ms; }
  .todas-cabeza > :nth-child(3) { animation-delay: 140ms; }
  .filtros { animation-delay: 210ms; }

  .ficha { transition: opacity 320ms ease, translate 420ms var(--ease-out); }
  @starting-style {
    .ficha { opacity: 0; translate: 0 0.75rem; }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ficha-marco {
      animation: marco-se-destapa linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .ficha-texto {
      animation: texto-se-asienta linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes llega { from { opacity: 0; translate: 0 14px; } }
@keyframes marco-se-destapa {
  from { clip-path: inset(8% 5% 0 5% round var(--radio-marco)); }   /* sin translate: nunca pisa el epígrafe */
  to { clip-path: inset(0 round var(--radio-marco)); }
}
@keyframes texto-se-asienta { from { translate: 0 1.5rem; } }

/* Cabecera en tableta: como en la portada, «Quién soy» sólo en escritorio */
@media (max-width: 63.99rem) {
  .navegacion .solo-escritorio { display: none; }
}

/* =========================================================================
   Cierre: la pregunta y el único llamado, antes del pie (igual al de la
   portada).
   ========================================================================= */
.cierre {
  --foco: var(--turquesa);
  margin-top: clamp(4rem, 2.5rem + 5vw, 8rem);
  padding-block: clamp(4rem, 2.5rem + 5.5vw, 8.5rem);
  background: var(--navy);
  color: var(--hueso);
}
.cierre-interior {
  display: grid;
  justify-items: start;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--margen);
}
.cierre-antetitulo {
  margin-bottom: 1rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  font-weight: 600;
  color: var(--turquesa);
}
.cierre-titulo {
  max-width: 12ch;
  font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.cierre-bajada {
  margin-top: 1.25rem;
  max-width: 34em;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--niebla);
}
.cierre-incluye {
  margin-top: 1rem;
  max-width: 38em;
  padding-left: 1rem;
  border-left: 2px solid var(--turquesa);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hueso);
}
.cierre .pendiente { color: var(--bruma); }
.boton--grande {
  margin-top: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  min-height: 3.75rem;
  --relleno-x: 1.75rem;
  font-size: 1.1875rem;
}
@media (max-width: 30rem) { .boton--grande { width: 100%; } }

/* =========================================================================
   Barra fija de WhatsApp, sólo en el celular (igual a la de la portada). Sin
   JS está siempre; con JS (clase .io) aparece cuando no se ve el botón del
   cierre. scroll-padding-bottom: el foco nunca queda debajo (WCAG 2.4.11).
   ========================================================================= */
.barra-whatsapp { display: none; }
@media (max-width: 47.99rem) {
  :root { --alto-barra: 3.25rem; }
  html { scroll-padding-bottom: calc(var(--alto-barra) + 1.5rem); }
  .pie { padding-bottom: calc(var(--alto-barra) + 1rem + env(safe-area-inset-bottom, 0px)); }
  .barra-whatsapp {
    position: fixed;
    z-index: 10;
    left: var(--margen);
    right: var(--margen);
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: var(--alto-barra);
    padding: 0.5rem 1rem;
    border-radius: var(--radio);
    background: var(--navy);
    color: var(--hueso);
    box-shadow: 0 10px 24px -12px rgb(10 22 40 / .55);
    font-size: 1rem;
    font-weight: 650;
    text-decoration: none;
    transition: translate 260ms var(--ease-out), opacity 200ms ease, visibility 0s linear 0s;
  }
  .barra-whatsapp svg { flex: none; width: 1.25em; height: 1.25em; color: var(--turquesa); }
  .io .barra-whatsapp:not(.a-la-vista) {
    translate: 0 calc(100% + 1rem);
    opacity: 0;
    visibility: hidden;
    transition: translate 260ms var(--ease-out), opacity 200ms ease, visibility 0s linear 260ms;
  }
}