/* ============================================================================
   SEGURATIS · ZONA DE CUERPO LARGO
   `parts/analisis.php` · maqueta «Ficha Cuerpo Largo» de Claude Design

   HOJA APARTE Y SIEMPRE CARGADA, por el mismo motivo que cuerpo.css: esta zona
   la pintan TRES plantillas —ficha de compañía, perfil de marca y madre de
   ramo— y cada una carga una hoja distinta. Metida en ficha.css, en las otras
   dos saldría sin columna, sin banda y sin índice.

   Aquí va la CAJA: la banda, la rejilla de dos columnas, el índice y el
   lateral. Los bloques de dentro son de cuerpo.css y no se tocan desde aquí.

   POR QUÉ LA BANDA CREMA. La ficha es una página comercial de once secciones y
   de pronto vienen 3.400 palabras de análisis. El cambio de fondo es lo que le
   dice al lector que ha pasado de «esto se vende» a «esto se explica»; sin él,
   el texto largo parece una sección comercial más. Es el mismo recurso que ya
   alterna secciones en el resto del theme, no un invento.
   ============================================================================ */

.analisis {
  padding: 24px 0 28px;
  background: var(--c-surface-2);
  border-top: var(--bd) solid var(--c-divider);
  border-bottom: var(--bd) solid var(--c-divider);
}

/* El rótulo va en azul marino, no en coral: no es una llamada a la acción,
   es la etiqueta de lo que viene. */
.analisis__eyebrow .eyebrow__bar  { background: var(--c-primary); }
.analisis__eyebrow .eyebrow__text { color: var(--c-primary); }

.analisis__h2         { margin-top: 13px; }
.analisis__entradilla { margin-top: 11px; }

.analisis__sello {
  display: flex; align-items: center; gap: 11px;
  margin-top: 16px; padding: 12px 14px;
  border-radius: var(--r); background: var(--c-white);
}
.analisis__sello-ico {
  flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-tag-soft);
}
.analisis__sello-txt strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--c-ink); }
.analisis__sello-txt .meta  { display: block; }

.analisis__cols  { margin-top: 22px; }
.analisis__firma { margin-top: 24px; }

/* ---- Índice ---------------------------------------------------------------
   Va DENTRO de la columna de texto y no en el lateral: en el lateral
   competiría con el formulario, que es lo que tiene que ganar ahí.

   En móvil es plegable —ocho apartados en lista son 400 px de scroll antes del
   primer párrafo— y viene abierto, que es como lo pide la maqueta. Se pliega
   con <details>, sin una línea de JavaScript.
   --------------------------------------------------------------------------- */
.analisis-toc {
  margin-bottom: 22px; padding: 15px 16px 16px;
  border-radius: var(--r); background: var(--c-white);
  border: var(--bd) solid var(--c-border);
}
.analisis-toc__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none;
}
.analisis-toc__cab::-webkit-details-marker { display: none; }

/* El signo lo pone el CSS y cambia solo al abrir: no hay estado que mantener. */
.analisis-toc__signo { font-size: 18px; font-weight: 700; line-height: 1; color: var(--c-action); }
.analisis-toc__signo::after       { content: "+"; }
[open] > .analisis-toc__cab .analisis-toc__signo::after { content: "−"; }

.analisis-toc__lista { display: grid; margin-top: 8px; }
.analisis-toc__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: var(--bd) solid var(--c-divider);
  font-size: 15px; font-weight: 600; color: var(--c-action-ink);
}
.analisis-toc__link span { color: var(--c-ink-4); }

/* El lateral en móvil no es lateral: va detrás del texto, que es donde el
   formulario tiene sentido una vez leído el análisis. El CTA de arriba ya lo
   sirve la barra fija. */
.analisis__lateral { margin-top: 18px; }

@media (min-width: 1024px) {
  .analisis { padding: 56px 0 64px; }

  .analisis__cabecera {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 48px; flex-wrap: wrap; row-gap: 20px;
  }
  /* 56ch para que la entradilla no se vaya a la anchura entera y la cabecera
     se lea de un vistazo. */
  .analisis__intro { max-width: 56ch; }
  .analisis__h2    { margin-top: 16px; }
  .analisis__sello { margin-top: 0; padding: 14px 18px; }

  /* La rejilla es la MISMA que la del cuerpo de la madre de ramo. No se copia
     por pereza: que las dos plantillas partan el ancho igual es lo que hace
     que se lean como el mismo sitio. */
  .analisis__cols {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 64px; align-items: start; margin-top: 36px;
  }
  /* 700 px es el ancho de lectura. La ficha era de una sola columna a 1232 y
     un texto corrido a esa anchura no se lee. */
  .analisis__texto { max-width: 700px; }

  .analisis-toc        { margin-bottom: 40px; padding: 24px 26px 26px; }
  .analisis-toc__lista { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .analisis-toc__link  { font-size: 15.5px; color: var(--c-ink); }
  .analisis-toc__link:hover { color: var(--c-action-ink); }
  /* En escritorio el índice no se pliega: cabe entero a dos columnas y el
     control sobraría. Se queda abierto y deja de responder al clic. */
  .analisis-toc__cab   { pointer-events: none; cursor: default; }
  .analisis-toc__signo { display: none; }

  .analisis__lateral        { margin-top: 0; }
  .analisis__lateral-sticky { position: sticky; top: 104px; }
}