/* ===== REMEDIA — página: ¿Esto Es Para Ti? =====
   Solo secciones de esta página.
   Todo selector prefijado con .page-esto-es-para-ti o .sec--*
   ===================================== */

/* ===== 00 · INTRO ==========================================
   H1 + subtítulo, alineados a la izquierda (no centrados como el
   hero del home) — así se ve en la referencia. */

.sec--intro {
  padding-bottom: var(--sp-5);   /* ⚠️ CONFIRMAR: aproximado, menor que el estándar para acercarlo a Perfiles */
}

.sec--intro__title {
  margin-bottom: var(--sp-3);
}

.sec--intro__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-xl);
  color: var(--c-text-muted);
}

.sec--intro__subtitle + .sec--intro__subtitle {
  margin-top: var(--sp-3);
}

/* ===== PERFILES (los 4 públicos) ==============================
   Título + descripción + imagen SIEMPRE visibles — no hay nada que
   abrir para verlos. Lo único que colapsa es "La intervención"
   (qué hacemos con ese perfil), con un <details>/<summary> nativo
   propio — sin JS: el navegador da el toggle, el estado accesible
   y el teclado gratis. El ícono +/− es puro CSS sobre [open].

   Diagramas: se reutilizan los mismos 4 SVG de home (publico-*.svg),
   solo que más grandes. El lado del diagrama alterna par/impar
   escribiendo las columnas en distinto orden en el HTML (mismo
   criterio que 03 · PROBLEMA del home).

   ⚠️ CONFIRMAR: "La intervención" cerrada por defecto en las 3
   referencias legibles se ve con el ícono en "−" (abierta) — puede
   ser solo cómo se documentó, no el estado real de la página. Se
   deja cerrada por defecto, el criterio más neutral. */

.sec--perfiles__list {
  border-top: 1px solid var(--c-line);
}

.perfil {
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}

/* Alineado arriba a propósito: si el diagrama y el texto tuvieran
   distinta altura con align-items:center, el texto quedaría centrado
   verticalmente y además se recorrería entero cada vez que se abre
   "La intervención". Con flex-start, el texto arranca siempre en el
   mismo punto y lo único que crece hacia abajo es la intervención. */
.perfil__row {
  align-items: flex-start;
}

.perfil__media { text-align: center; }

.perfil__diagram {
  width: 100%;
  max-width: 336px;   /* 420px - 20%, a pedido de Abel. Columna intacta */
  margin-inline: auto;   /* la img es display:block (base.css) — text-align:center del padre no la centra sola */
}

.perfil__title {
  font-style: italic;   /* mismo tratamiento que "La intervención", ver referencia */
  margin-bottom: var(--sp-3);
}

.perfil__desc + .perfil__desc {
  margin-top: var(--sp-3);
}

/* --- "La intervención": único elemento colapsable del perfil --- */
.perfil__intervencion {
  margin-top: var(--sp-5);
}

/* La línea verde va en el toggle (no en los bullets) para que se vea
   siempre, con el bloque colapsado o abierto — ver referencia. */
.perfil__intervencion-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-accent);
  cursor: pointer;
  list-style: none;
}

.perfil__intervencion-toggle::-webkit-details-marker { display: none; }
.perfil__intervencion-toggle::marker { content: none; }

.perfil__intervencion-title {
  flex: 1;
  font-style: italic;
  font-size: var(--fs-h4);
}

/* Ícono +/-: dos barras superpuestas, la vertical desaparece con [open] */
.perfil__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.perfil__icon::before,
.perfil__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--c-text);
  transform: translate(-50%, -50%);
}
.perfil__icon::before { width: 16px; height: 1px; }
.perfil__icon::after  { width: 1px; height: 16px; }
.perfil__intervencion[open] .perfil__icon::after { display: none; }

.perfil__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.perfil__bullets li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
}

.perfil__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-accent);
}

.perfil__bullets strong {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

@media (max-width: 991.98px) {
  /* Imagen siempre primero, sin importar el par/impar de desktop
     (order-lg-1/2 solo aplica desde lg) — se fuerza con order. */
  .perfil__media {
    order: -1;
    margin-bottom: var(--sp-4);
  }

  /* 25% más pequeña que en desktop, solo en móvil, centrada. */
  .perfil__diagram {
    max-width: 252px;   /* 336px - 25% */
  }
}

/* ===== MARQUEE (envoltura) ====================================
   Acá el .marquee no viene precedido de un título propio (a
   diferencia del home, donde vive dentro de .sec--adapta con su
   texto arriba) — el padding-block del .sec ya separa lo suficiente,
   así que se anula el margin-top propio del componente para no
   duplicar el espacio. */

.sec--marquee-wrap {
  padding-block: var(--sp-6);   /* ⚠️ CONFIRMAR: menor que el estándar del .sec porque aquí es una franja aislada */
}

.sec--marquee-wrap__title {
  margin-bottom: var(--sp-2);   /* mismo criterio que sec--adapta__title en home.css */
}

.sec--marquee-wrap__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
}
/* El margin-top propio del .marquee (main.css) ya separa del texto de
   arriba — no se anula como antes, cuando la franja no tenía título. */

/* El componente .sec--pruebas / .prueba (LAS 3 PRUEBAS) se movió a
   main.css §COMPONENTE PRUEBAS — ahora lo reusa también
   el-problema.css (sec--pruebas). El color del cierre ya sale de
   var(--c-accent), así que cambia solo por página, sin CSS nuevo. */