/* Páginas por sector (/sectores/ y /sectores/<slug>/, sectores.js). Van encima de
   css/naxia-producto.css, del que toman las variables (--np-*), la columna de 72rem, el botón,
   los títulos de sección y las preguntas en acordeón.

   Reglas de Nutlope/hallmark: nada de una tarjeta tras otra. Los procesos van en un índice de
   filas numeradas, las fases en una tubería con una línea que las une, "cuándo no" en una lista
   con filetes y las lecturas en filas. La seda (js/seda.js) solo en la cabecera.
   Movimiento con la escala de naxia-producto.css (250 ms entrar, 350 salir, 500 apariciones).
   Colores solo con variables del tema: funcionan en claro y en oscuro. */

.sc { font-size: 0.9375rem; }
.sc-ancla { scroll-margin-top: 5rem; }

/* ---------- Cabecera sobre la seda ---------- */
.sc-hero { padding-top: clamp(7.5rem, 13vw, 10rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); background: var(--np-papel); }
.sc-hero .seda-lienzo { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
/* Velo del color de la página para que el texto se lea en los dos temas sin tapar la tela. */
.sc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(var(--c-black) / 0.4) 0%, rgb(var(--c-black) / 0.58) 60%, rgb(var(--c-black) / 0.62) 100%); }
@media (max-width: 1023px) { .sc-hero::after { background: rgb(var(--c-black) / 0.55); } }
/* En claro, velo más fino: la seda tiene que notarse (CLAUDE.md, "Efecto seda"). */
:root[data-theme="light"] .sc-hero::after { background: linear-gradient(90deg, rgb(var(--c-black) / 0.12) 0%, rgb(var(--c-black) / 0.3) 60%, rgb(var(--c-black) / 0.38) 100%); }
@media (max-width: 1023px) { :root[data-theme="light"] .sc-hero::after { background: rgb(var(--c-black) / 0.3); } }
.sc-hero + .np-seccion { border-top-color: transparent; padding-top: clamp(3rem, 6vw, 4.5rem); }

.sc-migas { font-size: 0.8125rem; color: var(--np-suave); margin-bottom: 2rem; }
.sc-migas ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sc-migas a { transition: color var(--np-sale) var(--np-ease); }
.sc-migas a:hover { color: var(--np-tinta); transition-duration: var(--np-entra); }
.sc-migas [aria-current] { color: var(--np-texto-2); }

.sc-hero-rejilla { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .sc-hero-rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: start; } }
.sc-h1 { font-family: var(--np-display); font-weight: 300; font-size: clamp(2.125rem, 1.55rem + 1.9vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; color: var(--np-tinta); overflow-wrap: break-word; }
.sc-entrada { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.7; font-weight: 300; color: var(--np-texto-2); text-wrap: pretty; max-width: 34rem; }
.sc-entrada strong { font-weight: 500; color: var(--np-tinta); }
.sc-acciones { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.sc-enlace-suave { font-size: 0.875rem; color: var(--np-texto-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--np-linea-fuerte); transition: color var(--np-sale) var(--np-ease), text-decoration-color var(--np-sale) var(--np-ease); }
.sc-enlace-suave:hover { color: var(--np-tinta); text-decoration-color: currentColor; transition-duration: var(--np-entra); }

/* Tres datos al pie de la cabecera, en filas con filete y sin iconos. */
.sc-franja { margin-top: clamp(3rem, 7vw, 4.5rem); display: grid; border-top: 1px solid var(--np-linea-fuerte); }
.sc-franja li { padding: 0.9rem 0; font-size: 0.875rem; color: var(--np-texto-2); }
.sc-franja li + li { border-top: 1px solid var(--np-linea); }
@media (min-width: 768px) {
  .sc-franja { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-franja li { padding-block: 1.1rem 0.2rem; }
  .sc-franja li + li { border-top: 0; border-left: 1px solid var(--np-linea); padding-left: 1.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .sc-hero-rejilla > * { animation: np-sube var(--np-aparece) var(--np-ease) backwards; }
  .sc-hero-rejilla > :nth-child(2) { animation-delay: 80ms; }
  .sc-franja { animation: np-funde 700ms var(--np-ease) 240ms backwards; }
}

/* ---------- Cabecera de cada sección: título y una frase ---------- */
.sc-cabeza { display: grid; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sc-cabeza p, .sc-lateral { color: var(--np-suave); line-height: 1.7; max-width: 34rem; }
.sc-lateral { margin-top: 1rem; }
@media (min-width: 1024px) { .sc-cabeza { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 4rem; } .sc-cabeza p { padding-top: 0.35rem; } }

.sc-num { font-size: 0.8125rem; color: var(--np-tenue); font-variant-numeric: tabular-nums; }

/* ---------- Procesos: índice de filas numeradas ---------- */
.sc-procesos { border-bottom: 1px solid var(--np-linea); }
.sc-proceso { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.35rem 1rem; padding: 1.5rem 0; border-top: 1px solid var(--np-linea); }
.sc-proceso .sc-num { padding-top: 0.2rem; grid-row: span 3; }
.sc-proceso-titulo { font-family: var(--np-display); font-weight: 400; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--np-tinta); }
.sc-proceso-texto { color: var(--np-suave); line-height: 1.7; max-width: 40rem; }
.sc-conecta { font-size: 0.8125rem; color: rgb(var(--np-acento)); }
@media (min-width: 1024px) {
  .sc-proceso { grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3.5fr); align-items: baseline; gap: 2rem; padding: 1.75rem 0; }
  .sc-proceso .sc-num { grid-row: auto; padding-top: 0; }
  .sc-conecta { text-align: left; text-wrap: balance; }
}

/* ---------- Fases: tubería con una línea que une los puntos ---------- */
.sc-fases { display: grid; gap: 0; position: relative; }
.sc-fase { position: relative; padding: 0 0 1.75rem 1.75rem; }
/* La línea vertical en móvil, de punto a punto. */
.sc-fase::before { content: ""; position: absolute; left: 4px; top: 0.6rem; bottom: -0.6rem; width: 1px; background: var(--np-linea-fuerte); }
.sc-fase:last-child::before { display: none; }
.sc-fase-punto { position: absolute; left: 0; top: 0.35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--np-papel-2); border: 1px solid rgb(var(--np-acento)); }
.sc-fase:last-child .sc-fase-punto { background: rgb(var(--np-acento)); }
.sc-fase-titulo { margin-top: 0.35rem; font-family: var(--np-display); font-weight: 400; font-size: 1.125rem; letter-spacing: -0.015em; color: var(--np-tinta); }
.sc-fase p { margin-top: 0.4rem; color: var(--np-suave); line-height: 1.65; max-width: 30rem; }
@media (min-width: 900px) {
  .sc-fases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .sc-fase { padding: 1.75rem 0 0; }
  .sc-fase::before { left: 0; right: -2rem; top: 4px; bottom: auto; width: auto; height: 1px; }
  .sc-fase-punto { top: 0; }
}
.sc-nota { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--np-linea); color: var(--np-suave); line-height: 1.7; }
.sc-nota strong { color: var(--np-tinta); font-weight: 500; }

/* ---------- Cuándo no somos la opción ---------- */
.sc-no { border-bottom: 1px solid var(--np-linea); }
.sc-no li { position: relative; padding: 1.1rem 0 1.1rem 1.75rem; border-top: 1px solid var(--np-linea); color: var(--np-texto-2); line-height: 1.7; }
/* Una raya corta de filete, no un icono. */
.sc-no li::before { content: ""; position: absolute; left: 0; top: 1.95rem; width: 0.75rem; height: 1px; background: var(--np-suave); }

/* ---------- Lecturas ---------- */
.sc-lecturas { border-top: 1px solid var(--np-linea); }
.sc-lectura { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.05rem 0; border-bottom: 1px solid var(--np-linea); color: var(--np-texto-2); transition: color var(--np-sale) var(--np-ease); }
.sc-lectura:hover { color: var(--np-tinta); transition-duration: var(--np-entra); }
.sc-lectura .np-mas { flex: none; }
.sc-lectura:hover .np-punta { transform: translateX(3px); transition-duration: var(--np-entra); }
.sc-lectura:hover .np-asta { transform: translateX(3px) scaleX(1); transition-duration: var(--np-entra); }
.sc-otros { margin-top: 2.5rem; }
.sc-otros p { font-size: 0.875rem; color: var(--np-suave); line-height: 1.7; }
.sc-otros a { color: var(--np-texto-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--np-linea-fuerte); transition: color var(--np-sale) var(--np-ease); }
.sc-otros a:hover { color: rgb(var(--np-acento)); transition-duration: var(--np-entra); }

/* ---------- Índice de sectores (/sectores/) ---------- */
.sc-h2-indice { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc-indice { border-bottom: 1px solid var(--np-linea); }
.sc-fila { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; padding: 1.4rem 0; transition: background-color var(--np-sale) var(--np-ease); }
/* El filete va en un pseudoelemento: así queda a la medida de la columna aunque el fondo del hover sobresalga. */
.sc-fila::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--np-linea); }
.sc-fila:hover { background: rgb(var(--np-acento) / 0.045); transition-duration: var(--np-entra); }
.sc-fila-nombre { font-family: var(--np-display); font-weight: 400; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); letter-spacing: -0.015em; color: var(--np-tinta); transition: transform var(--np-sale) var(--np-ease); }
.sc-fila-linea { display: block; margin-top: 0.2rem; font-family: var(--np-cuerpo); font-size: 0.8125rem; letter-spacing: 0; color: rgb(var(--np-acento)); }
.sc-fila-texto { grid-column: 1; color: var(--np-suave); line-height: 1.65; }
.sc-fila .np-mas { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.sc-fila:hover .np-punta { transform: translateX(3px); transition-duration: var(--np-entra); }
.sc-fila:hover .np-asta { transform: translateX(3px) scaleX(1); transition-duration: var(--np-entra); }
@media (min-width: 900px) {
  .sc-fila { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 2rem; align-items: baseline; gap: 2rem; margin-inline: -1rem; padding: 1.6rem 1rem; }
  .sc-fila-texto { grid-column: 2; }
  .sc-fila::before { left: 1rem; right: 1rem; }
  .sc-fila .np-mas { grid-column: 3; grid-row: auto; justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .sc-fila:hover .sc-fila-nombre { transform: translateX(6px); transition-duration: var(--np-entra); }
}
.sc-texto p { max-width: 40rem; color: var(--np-suave); line-height: 1.75; }
.sc-texto p + p { margin-top: 1rem; }

/* ---------- Llamada final, sin seda (la seda ya está arriba) ---------- */
.sc-cierre { padding-block: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--np-linea); background: var(--np-papel); }
.sc-cierre-cuerpo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.sc-cierre-titulo { font-family: var(--np-display); font-weight: 300; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.25; letter-spacing: -0.025em; max-width: 30rem; text-wrap: balance; color: var(--np-tinta); }
.sc-fecha { font-size: 0.8125rem; color: var(--np-tenue); }

.sc a:focus-visible { outline: 2px solid rgb(var(--np-acento)); outline-offset: 3px; }