/* ══════════════════════════════════════════════════════════════════
   V5 · FASE 2 — hoja de servicios

   Molde: /solutions de hugeinc.com, con las clases y los tokens del
   sistema (styles.css, no se toca). styles.css es huge.css sin editar:
   solo trae las clases utilitarias que Huge usa de verdad, asi que
   estas reglas propias solo consumen tokens (var(--...)) que existen
   siempre como variables de tema, nunca clases inventadas.
   Ver NOTAS-V5.md.
══════════════════════════════════════════════════════════════════ */

/* ── 1 · Hero oscuro de las seis paginas viejas de servicio ── */
.vieja-hero{
  position:relative; min-height:64svh; display:flex; align-items:flex-end;
  padding-top:calc(var(--header-height) + var(--spacing-16));
  padding-bottom:var(--spacing-16);
  overflow:clip; background:var(--color-base-dark);
}
.vieja-hero__medio{ position:absolute; inset:0; z-index:-2; }
.vieja-hero__medio img{ width:100%; height:100%; object-fit:cover; display:block; }
.vieja-hero__velo{ position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,.58); }

/* ── 2 · Bloque de texto a dos columnas, por modulo ── */
.modulo-bloque{
  padding-block:var(--spacing-8);
  border-top:1px solid var(--theme-border-subtle);
  display:grid; gap:var(--spacing-6);
}
.modulo-bloque:first-child{ border-top:none; }
@media (min-width:64rem){
  .modulo-bloque{ grid-template-columns:3fr 7fr; gap:var(--spacing-8); }
}
.modulo-campos{ display:flex; flex-direction:column; gap:var(--spacing-6); }
.modulo-campo__etiqueta{
  text-transform:uppercase; letter-spacing:.06em;
  font-size:var(--text-body-small); font-weight:600; color:var(--theme-text-secondary);
}
.modulo-campo__valor{ margin-top:.5em; font-size:var(--text-body); color:var(--theme-text-primary); max-width:65ch; }

/* ── 3 · El metodo, lista de cinco pasos ── */
.metodo-paso{
  display:grid; gap:var(--spacing-5);
  padding-block:var(--spacing-8);
  border-top:1px solid var(--theme-border-subtle);
}
.metodo-paso:first-child{ border-top:none; }
@media (min-width:64rem){
  .metodo-paso{ grid-template-columns:1fr 2fr 7fr; align-items:baseline; }
}
.metodo-paso__num{ color:var(--theme-cta); }
.metodo-paso__texto{ margin-top:var(--spacing-5); max-width:62ch; color:var(--theme-text-secondary); }
@media (min-width:64rem){ .metodo-paso__texto{ margin-top:0; } }

/* ── 4 · Preguntas, acordeon ── */
.faq-item{ border-top:1px solid var(--theme-border-subtle); }
.faq-item:last-child{ border-bottom:1px solid var(--theme-border-subtle); }
.faq-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-6);
  padding-block:var(--spacing-6); background:transparent; border:none; cursor:pointer;
  text-align:left; color:var(--theme-text-primary); font:inherit;
}
.faq-toggle__icono{ flex-shrink:0; transition:transform .4s var(--ease-osmo); color:var(--theme-cta); }
.faq-item[data-faq-open] .faq-toggle__icono{ transform:rotate(45deg); }
.faq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease-osmo); }
.faq-item[data-faq-open] .faq-panel{ grid-template-rows:1fr; }
.faq-panel__inner{ overflow:hidden; }
.faq-panel__texto{ padding-bottom:var(--spacing-6); max-width:62ch; color:var(--theme-text-secondary); }

/* ── 5 · Pila compacta de cierre (seis paginas viejas) ── */
.compacta-lista{ display:flex; flex-direction:column; }
.compacta-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--spacing-6);
  padding-block:var(--spacing-6); border-top:1px solid var(--theme-border-subtle);
  transition:color .3s var(--ease-osmo);
}
.compacta-item:last-child{ border-bottom:1px solid var(--theme-border-subtle); }
.compacta-item:hover{ color:var(--theme-cta); }
.compacta-item__num{ color:var(--theme-text-secondary); }

/* ── 6 · Reducido de movimiento ── */
@media (prefers-reduced-motion:reduce){
  .faq-toggle__icono, .faq-panel{ transition:none; }
}