/* SECCION: como-te-ayudo · fondo blanco (mockup final, materiales/mockup-final/)
   Rótulo, título con "todo tú." resaltado en Acid Yellow y el párrafo a lo ancho (dos líneas en escritorio).
   Debajo, cuatro columnas iguales (dos en celular y tableta). Cada columna: caja cuadrada Soft White de radio 20
   con el isotipo al 42 % y el nombre con una palabra en bold; en Charlas la caja es la foto con el nombre en
   blanco sobre un velo Midnight (sin sombra de texto). Bajo la caja: la pregunta, el nombre subrayado, la
   descripción y el enlace con flecha, alineado abajo en todas las columnas.
   Producto sin URL: el enlace va gris y sin clic con la etiqueta "Muy pronto" (estilos comunes en base.css).
   Entrada (main.js): el resaltado se pinta de izquierda a derecha; las columnas aparecen en su lugar (opacidad y
   escala). Hover solo en columnas con data-activa y con puntero fino: la caja a Ice Blue 100, el isotipo sube 4 px,
   la foto de Charlas se acerca apenas. Con "reducir movimiento" y sin JS: resaltado pintado y columnas visibles. Solo usa variables de tokens.css. */

.como-te-ayudo {
  padding: var(--space-8) max(var(--gutter), calc((100% - var(--ancho-max)) / 2 + var(--gutter)));
}

/* ---------- Intro ---------- */
.como-te-ayudo__intro { margin-bottom: var(--space-5); }

.como-te-ayudo__titulo {
  font-size: var(--t-headline);
  line-height: 1.05;
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-headline);
  /* sin text-wrap: balance: en celular el corte aprobado es "Deja de hacerlo / todo tú." */
}

.como-te-ayudo__resalte { /* marcador Acid Yellow detrás del texto (el texto sigue en Midnight) */
  position: relative;
  z-index: 0; /* el trazo va detrás del texto y no detrás de la página */
  padding: 0 2px;
  white-space: nowrap; /* "todo tú." nunca se parte: así el trazo es una sola pieza */
}
.como-te-ayudo__resalte::before { /* el trazo: misma franja que el resaltado de Lo que cambió (58 % a 92 % del alto) */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 58% 0 8%;
  background: var(--energia);
  transform-origin: left center;
  transition: transform var(--t-marcador) var(--ease);
}

.como-te-ayudo__texto { /* a lo ancho, a propósito (mockup): máximo dos líneas en escritorio */
  margin-top: var(--space-3);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Columnas ---------- */
.como-te-ayudo__fila {
  display: grid;
  --entre-filas: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--entre-filas) var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.como-te-ayudo__producto { display: flex; flex-direction: column; }

/* Las cinco partes de cada columna (caja, pregunta, nombre, descripción, enlace) se alinean con las de al lado,
   aunque una descripción sea más larga o un enlace ocupe dos líneas. Navegadores viejos: columna simple. */
@supports (grid-template-rows: subgrid) {
  /* el aire entre filas de productos va en cada producto: un row-gap de la rejilla se metería entre sus partes */
  .como-te-ayudo__fila { row-gap: 0; }
  .como-te-ayudo__producto { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--entre-filas); }
  .como-te-ayudo__producto:nth-last-child(-n + 2) { margin-bottom: 0; }
  .como-te-ayudo__accion, .como-te-ayudo__enlace { align-self: start; justify-self: start; }
}

/* ---------- Caja ---------- */
.como-te-ayudo__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 1;
  margin-bottom: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--panel);
}
.como-te-ayudo__isotipo { width: 42%; height: 42%; }

.como-te-ayudo__marca {
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: var(--tracking-title);
  text-align: center;
}
.como-te-ayudo__marca b { font-weight: var(--peso-semibold); }

/* Charlas: la foto llena la caja; el nombre va abajo a la izquierda sobre el velo Midnight */
.como-te-ayudo__caja--foto { justify-content: flex-end; align-items: flex-start; isolation: isolate; } /* Safari: la foto que se acerca no asoma por las esquinas */
.como-te-ayudo__caja--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--velo-noche-0) 30%, var(--velo-noche-medio) 60%, var(--velo-noche-fuerte) 100%); /* la receta del velo del tríptico: el nombre queda AA sobre la pantalla iluminada */
}
.como-te-ayudo__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.como-te-ayudo__caja--foto .como-te-ayudo__marca {
  position: relative;
  z-index: 1;
  padding: 0 12px 12px;
  color: var(--tinta-noche);
  text-align: left;
}

/* ---------- Texto bajo la caja ---------- */
.como-te-ayudo__pregunta {
  margin-bottom: var(--space-2);
  font-size: 0.6875rem;
  line-height: 1.35;
  font-weight: var(--peso-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--tinta-suave);
}

.como-te-ayudo__nombre {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: var(--peso-semibold);
  letter-spacing: var(--tracking-title);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.como-te-ayudo__descripcion {
  flex: 1; /* empuja el enlace al pie: los cuatro quedan alineados */
  margin-bottom: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ---------- Enlace con flecha ---------- */
.como-te-ayudo__accion { gap: 0 var(--space-3); }
/* Debajo del enlace: pegada a él, no al aire de su área táctil. Al lado: el margen es parejo y sigue centrada */
.como-te-ayudo__accion .pronto__etiqueta { margin-block: -6px; }

.como-te-ayudo__enlace { /* en bloque de línea: si el texto se parte, la flecha se queda pegada a la última palabra */
  display: inline-block;
  padding: 12px 0; /* área táctil de 44 px */
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: var(--peso-semibold);
  text-align: left;
  color: var(--cta);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}
.como-te-ayudo__flecha {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 2px; /* más el espacio que no se parte del HTML: la flecha nunca queda sola en una línea */
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.como-te-ayudo__enlace--pronto { color: var(--tinta-suave); cursor: not-allowed; }

@media (hover: hover) and (pointer: fine) {
  a.como-te-ayudo__enlace:hover { color: var(--cta-hover); }
}

/* ---------- Tableta (dos columnas más holgadas) ---------- */
@media (min-width: 600px) {
  .como-te-ayudo__texto { font-size: 1.0625rem; }
  .como-te-ayudo__fila { --entre-filas: var(--space-6); column-gap: var(--space-4); }
  .como-te-ayudo__caja { gap: 20px; margin-bottom: var(--space-4); }
  .como-te-ayudo__marca { font-size: 1.5625rem; }
  .como-te-ayudo__caja--foto .como-te-ayudo__marca { padding: 0 18px 16px; }
  .como-te-ayudo__pregunta { font-size: var(--t-eyebrow); }
  .como-te-ayudo__nombre { font-size: 1.375rem; }
  .como-te-ayudo__descripcion { font-size: 0.90625rem; line-height: 1.6; }
  .como-te-ayudo__enlace { font-size: 0.90625rem; }
}

/* ---------- Escritorio: cuatro columnas ---------- */
@media (min-width: 900px) {
  .como-te-ayudo { padding-block: calc(var(--space-9) + var(--space-4)) calc(var(--space-9) + var(--space-3)); }
  .como-te-ayudo__intro { margin-bottom: var(--space-6); }
  .como-te-ayudo__texto { margin-top: 20px; font-size: 1.125rem; }
  .como-te-ayudo__fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .como-te-ayudo__producto { margin-bottom: 0; } /* una sola fila */
}

/* Con 4 columnas entre 900 y ~1100 px las cajas son chicas: el nombre baja un poco para no partirse */
@media (min-width: 900px) and (max-width: 1099px) {
  .como-te-ayudo__marca { font-size: 1.25rem; }
}

/* ---------- Hover: solo columnas con data-activa (producto con destino), solo con puntero fino, sin sombras ----------
   Hoy solo Charlas lo tiene. Las cajas "Muy pronto" se quedan quietas: un hover invitaría a tocar algo que no
   responde. Al activar un producto, su <li> recibe data-activa y este hover se enciende solo. */
@media (hover: hover) and (pointer: fine) {
  [data-activa] .como-te-ayudo__caja { transition: background-color var(--t-hover-caja) ease; }
  [data-activa] .como-te-ayudo__isotipo,
  [data-activa] .como-te-ayudo__foto { transition: transform var(--t-hover-caja) ease; }
  .como-te-ayudo__producto[data-activa]:hover .como-te-ayudo__caja { background-color: var(--superficie-hover); }
  .como-te-ayudo__producto[data-activa]:hover .como-te-ayudo__isotipo { transform: translateY(var(--hover-elevar)); }
  .como-te-ayudo__producto[data-activa]:hover .como-te-ayudo__foto { transform: scale(1.03); }
}

/* ---------- Entrada (la anima main.js): oculta solo con JS, con rescate a los 4 s si el JS falla ---------- */
.js .como-te-ayudo__resalte::before { transform: scaleX(0); animation: marcador-rescate 0s 4s forwards; }
.js .como-te-ayudo__resalte[data-armado]::before { animation: none; } /* main.js ya lo tiene: sin rescate */
.js .como-te-ayudo__resalte.esta-pintado::before { transform: none; }
.js .como-te-ayudo__producto { visibility: hidden; animation: rescate 0s 4s forwards; }
@keyframes marcador-rescate { to { transform: none; } }

/* Menos movimiento: resaltado ya pintado, columnas visibles y el hover sin transición ni desplazamiento */
@media (prefers-reduced-motion: reduce) {
  .js .como-te-ayudo__resalte::before { transform: none; transition: none; animation: none; }
  .js .como-te-ayudo__producto { visibility: visible; animation: none; }
  [data-activa] .como-te-ayudo__caja,
  [data-activa] .como-te-ayudo__isotipo,
  [data-activa] .como-te-ayudo__foto { transition: none; }
  .como-te-ayudo__producto[data-activa]:hover .como-te-ayudo__isotipo,
  .como-te-ayudo__producto[data-activa]:hover .como-te-ayudo__foto { transform: none; }
}