/* NISPLY · apple.css — capa visual sobre site.css (se carga después).
   Rehecha el 29/10/2026 (noche): paleta grafito como el banner de LinkedIn, fondo de facetas de metal en las cabeceras
   (assets/img/facetas-*.svg, sale de deploy/facetas.py), esquinas generosas y botones en píldora.
   Movimiento contenido: nada se agranda al pasar el ratón, solo sube un par de píxeles. Índice:
     1. Tokens     2. Formas y movimiento     3. Facetas de metal     4. Portada y secciones
     5. Las dos líneas     6. Método     7. Redes sociales     8. Piezas de las páginas GRC y del formulario */

/* 1. Tokens: negros, grises y blancos; el azul queda solo en el logotipo ————————————————————————————————— */
:root {
  --background: #16171A;
  --foreground: #F2F3F5;
  --muted: #1E1F23;
  --border: #33353A;
  --primary: #F2F3F5;
  --primary-foreground: #0D0E10;
  --accent: #C8CCD2;          /* plata: líneas, anillo y detalles */
  --accent-2: #5E636B;
  --radius: 20px;             /* tarjetas, filas, preguntas, formularios */
  --radius-sm: 12px;          /* campos, avisos pequeños */
  --radius-pill: 999px;       /* botones y etiquetas */
  --spring: cubic-bezier(.2, .8, .2, 1);
  --facetas: url('/assets/img/facetas-oscuro.svg');
}
:root[data-theme="light"] {
  --background: #F7F7F8;
  --foreground: #121315;
  --muted: #ECEDEF;
  --border: rgba(0, 0, 0, .12);
  --primary: #121315;
  --primary-foreground: #FFFFFF;
  --accent: #3A3D43;
  --accent-2: #9CA1A8;
  --facetas: url('/assets/img/facetas-claro.svg');
}

/* 2. Formas y movimiento ———————————————————————————————————————————————————————————————————————————————— */
.btn, .icon-btn, .btn--sm { border-radius: var(--radius-pill); }
.card, .row-card, .cat, .about__stat, .form-card, .faq details, .cookies__in, .agenda__elegida, .linea { border-radius: var(--radius); }
input, textarea, select, .field input, .field textarea { border-radius: var(--radius-sm); }
.menu__panel { border-radius: 0 0 var(--radius) var(--radius); }
.site-header { background: color-mix(in oklab, var(--background) 86%, transparent); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
.cap__ico { border-radius: 50%; }
.cta { border-radius: calc(var(--radius) + 8px); }

.card, .row-card, .cat, .linea { transition: transform .35s var(--spring), border-color .25s, background-color .25s, box-shadow .25s; }
@media (hover: hover) and (pointer: fine) {
  .card:hover, .row-card:hover, .cat:hover, .linea:hover { transform: translateY(-3px); border-color: var(--fg-20); }
}
/* las tarjetas del método no son enlaces: sin hover que invite a pulsar */
.step:hover { transform: none; }

/* 3. Facetas de metal detrás de las cabeceras y de la llamada final ——————————————————————————————————————— */
.hero, .fund-hero, .cta { position: relative; isolation: isolate; overflow: clip; }
.hero::before, .fund-hero::before, .cta::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--facetas) 72% 50% / cover no-repeat;
}
/* velo del color de fondo: el texto queda sobre liso y las facetas asoman a la derecha y se funden abajo */
.hero::after, .fund-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 70%, var(--background)),
    linear-gradient(to right, var(--background) 8%, color-mix(in oklab, var(--background) 82%, transparent) 38%,
      color-mix(in oklab, var(--background) 25%, transparent) 70%, transparent);
}
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--background) 92%, transparent) 30%,
    color-mix(in oklab, var(--background) 55%, transparent));
}
@media (max-width: 767px) {
  .hero::before, .fund-hero::before { background-position: 80% 0; }
  .hero::after, .fund-hero::after {
    background: linear-gradient(to bottom, color-mix(in oklab, var(--background) 45%, transparent),
      color-mix(in oklab, var(--background) 88%, transparent) 45%, var(--background));
  }
}
/* los halos difusos de la versión azul ensucian el grafito: fuera */
.hero__orb, .cta__orb, .halo { display: none; }

/* 4. Portada y secciones: más compactas, para leer sin tanto desplazamiento —————————————————————————————— */
.hero__inner { min-height: 0; padding-block: clamp(5rem, 3rem + 8vw, 10rem) clamp(4.5rem, 3rem + 6vw, 8.5rem); }
.hero__content { max-width: 52rem; }
.hero .eyebrow { margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(2.375rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 1.75rem; }
.hero .lead { max-width: 40rem; margin-bottom: 2.5rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); color: var(--fg-70); }

.section__head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.section__head h2, .split__aside h2, .about h2, .contact h2,
.section__head h1, .split__aside h1, .about h1, .contact h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -.03em; }
.section__head > p:not(.eyebrow), .split__aside > p:not(.eyebrow):not(.sources) { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.cta h2 { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem); }

/* bloques en gris: fondo liso que marca el ritmo de la página (en oscuro y en claro) */
.section--muted, .about.section--muted { background: color-mix(in oklab, var(--muted) 70%, transparent); border-block: 1px solid var(--bd-30); }
:root[data-theme="light"] .section--muted, :root[data-theme="light"] .about.section--muted { background: var(--muted); }
.about::before, .about::after { display: none; }

/* Tarjetas: superficie gris con un filo de luz arriba, como una lámina de metal */
.card, .linea { background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%), var(--card-bg); }
:root[data-theme="light"] .card, :root[data-theme="light"] .linea { background: linear-gradient(180deg, #fff, rgba(255,255,255,.6)); }
.row-card::before, .cat::before { opacity: .05; }

/* 5. Las dos líneas de negocio en la portada ——————————————————————————————————————————————————————————— */
.lineas { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .lineas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.linea {
  display: flex; flex-direction: column; padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  border: 1px solid var(--bd-50);
}
.linea__para { margin: 0 0 1rem; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); }
.linea h3 { margin-bottom: 1rem; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.15; letter-spacing: -.025em; }
.linea > p:not(.linea__para) { color: var(--fg-70); line-height: 1.65; }
.linea__lista { list-style: none; display: grid; gap: .75rem; margin: 1.5rem 0 2rem; padding: 1.5rem 0 0; border-top: 1px solid var(--bd-50); }
.linea__lista li { position: relative; padding-left: 1.75rem; color: var(--fg-80); line-height: 1.55; }
.linea__lista li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: .75rem; height: .45rem;
  border-left: 1.75px solid var(--fg-60); border-bottom: 1.75px solid var(--fg-60); transform: rotate(-45deg);
}
.linea__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: auto; }
.linea__enlace { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 500; color: var(--fg-80); text-decoration: underline; text-decoration-color: var(--fg-30); text-underline-offset: .3em; }
.linea__enlace:hover { color: var(--foreground); text-decoration-color: currentColor; }

/* 6. Método: cuatro pasos en fila en pantallas anchas ——————————————————————————————————————————————————— */
@media (min-width: 640px) { .steps-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .steps-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-grid--4 .step { flex-direction: column; gap: 1.25rem; padding: 2rem; }
  .steps-grid--4 .step__n { font-size: 2.5rem; }
  .steps-grid--4 .step__body { padding-top: 0; }
  .steps-grid--4 .step h3 { font-size: 1.3125rem; line-height: 1.3; }
}
.step__n { color: var(--fg-30); }

/* 7. Redes sociales: «Síguenos» en Nosotros, iconos en el contacto y en el pie ———————————————————————————— */
.redes { margin-top: 2.5rem; }
.redes__tit { margin: 0 0 .875rem; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); }
.redes__lista { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; }
.redes__lista a {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: var(--fg-80); border: 1px solid var(--bd-50); background: var(--card-bg);
  transition: color .2s, border-color .2s, background-color .2s, transform .3s var(--spring);
}
.redes__lista a:hover { color: var(--foreground); border-color: var(--fg-30); transform: translateY(-2px); }
.redes__lista svg { width: 20px; height: 20px; }
.footer__col .red svg { width: 16px; height: 16px; opacity: .8; }
.reserva__canales { gap: .25rem 1.75rem; }

/* 8. Piezas de las páginas GRC y del formulario —————————————————————————————————————————————————————————— */
.lang-switch { width: auto; min-width: 40px; padding: 0 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; color: inherit; }

/* Aviso del programa de fundadores en el formulario de reserva (agenda.js lo enseña con ?programa=fundadores) */
.fundadores-aviso { margin: 4px 0 6px; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.fundadores-aviso p { margin: 0 0 .75rem; color: var(--fg-80); line-height: 1.55; }
.fundadores-aviso .check { margin: 0; }

/* Rejilla de dos tarjetas (GRC: los dos caminos) */
.card-grid--2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .card-grid--2 { grid-template-columns: 1fr 1fr; } }

/* Tarjeta entera clicable: el primer enlace la cubre; los demás enlaces quedan por encima y siguen funcionando */
.card--enlace { position: relative; cursor: pointer; }
.card--enlace .card__principal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card--enlace .cap__mas a:not(.card__principal) { position: relative; z-index: 2; }

/* Enlaces de las tarjetas como botones en píldora: el principal relleno y los demás con borde, en una misma fila */
.cap__mas { display: inline-block; margin: 1.4rem .85rem 0 0; }
.cap__mas a, .panel__enlace {
  display: inline-flex; align-items: center; gap: 6px; padding: .6rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--fg-20); color: var(--foreground); font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--spring);
}
.cap__mas a:hover, .panel__enlace:hover { background: var(--muted-60); border-color: var(--fg-30); transform: translateY(-1px); text-decoration: none; }
.cap__mas a.card__principal { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.cap__mas a.card__principal:hover { background: var(--fg-80); }
.cap__mas a span[aria-hidden] { transition: transform .3s var(--spring); }
.cap__mas a:hover span[aria-hidden] { transform: translateX(3px); }

/* Los módulos, arriba del todo en /grc/: un poco menos de aire encima */
.section--modulos { padding-top: calc(var(--header-h) + 2.5rem); }

@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn, .card, .row-card, .cat, .linea, .redes__lista a, .cap__mas a { transition: none; }
  .card:hover, .row-card:hover, .cat:hover, .linea:hover, .redes__lista a:hover { transform: none; }
}

/* ===================================================================================================================
   29/10/2026 (2.ª vuelta): cabecera, fondos por línea y bloques sin cajas
   =================================================================================================================== */

/* 9. Cabecera: el menú, pegado al logotipo y con «Inicio»; las redes, a la derecha junto al idioma y el tema ———— */
.site-header__bar { justify-content: flex-start; gap: 1rem; }
.nav { margin-left: 2.25rem; }
.header__end { margin-left: auto; }
.nav__links { display: none; }
@media (min-width: 1280px) { .nav__links { display: flex; gap: 2rem; } .menu { display: none; } }
@media (min-width: 1152px) and (max-width: 1279px) { .menu { display: block; } }
.nav__links a { position: relative; padding-block: .5rem; }
.nav__links a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--foreground);
}
.nav__redes { list-style: none; display: flex; align-items: center; gap: .125rem; margin: 0 .5rem 0 0; padding: 0 .75rem 0 0; border-right: 1px solid var(--bd-50); }
.nav__redes a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--fg-60); transition: color .2s, background-color .2s; }
.nav__redes a:hover { color: var(--foreground); background: var(--muted); }
.nav__redes svg { width: 16px; height: 16px; }
/* En el móvil los iconos de redes también van arriba (Urko, 30/10/2026), más juntos y sin la raya */
@media (max-width: 767px) { .nav__redes { gap: 0; margin: 0; padding: 0; border-right: 0; } .nav__redes a { width: 26px; height: 32px; } .nav__redes svg { width: 15px; height: 15px; }
  .header__end { gap: 0; } .header__end .icon-btn, .header__end .menu > summary { width: 34px; height: 34px; } }
@media (max-width: 380px) { .brand__logo { height: 22px; width: auto; } }
.card__line { display: none; }

/* 10. Fondos propios: GRC (láminas apiladas y prisma) y Consultora (pétalos que giran) ————————————————————— */
.hero--grc, .fund-hero { --facetas: url('/assets/img/facetas-grc-oscuro.svg'); }
.hero--consultora { --facetas: url('/assets/img/facetas-consultora-oscuro.svg'); }
:root[data-theme="light"] .hero--grc, :root[data-theme="light"] .fund-hero { --facetas: url('/assets/img/facetas-grc-claro.svg'); }
:root[data-theme="light"] .hero--consultora { --facetas: url('/assets/img/facetas-consultora-claro.svg'); }

/* Subtítulo de cada línea en la portada («La aplicación del ENS», «Consultoría de IA y seguridad») */
.linea__sub { margin: -.5rem 0 1rem; font-size: 1.0625rem; font-weight: 500; color: var(--fg-80); }

/* 11. Rasgos: filas con una raya encima, sin cajas (qué hace el Gestor ENS, cómo trabajamos) ———————————————— */
.rasgos { list-style: none; display: grid; gap: 0 3rem; margin: 0; padding: 0; }
@media (min-width: 768px) { .rasgos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rasgos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rasgos__item { padding: 1.75rem 0 2rem; border-top: 1px solid var(--bd-50); }
.rasgos__item h3 { margin: 0 0 .6rem; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.015em; }
.rasgos__item p { margin: 0; color: var(--fg-70); line-height: 1.6; }

/* 12. Perfiles: para quién es, una fila por perfil ——————————————————————————————————————————————————————— */
.perfiles { margin: 0; border-top: 1px solid var(--bd-50); }
.perfiles__fila { display: grid; gap: .5rem 3rem; padding: 1.75rem 0; border-bottom: 1px solid var(--bd-50); }
@media (min-width: 900px) { .perfiles__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; } }
.perfiles dt { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; }
.perfiles dd { margin: 0; color: var(--fg-70); font-size: 1.0625rem; line-height: 1.6; }

/* 13. Beneficios del Círculo de fundadores y lo que se pide a cambio —————————————————————————————————————— */
.beneficios { list-style: none; counter-reset: ben; display: grid; gap: 0 3rem; margin: 0; padding: 0; }
@media (min-width: 900px) { .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.beneficios__item { counter-increment: ben; position: relative; padding: 1.5rem 0 1.75rem 3.5rem; border-top: 1px solid var(--bd-50); }
.beneficios__item::before {
  content: counter(ben, decimal-leading-zero); position: absolute; left: 0; top: 1.45rem;
  font-size: 1.125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg-40);
}
.beneficios__item h3 { margin: 0 0 .4rem; font-size: 1.1875rem; letter-spacing: -.015em; }
.beneficios__item p { margin: 0; color: var(--fg-70); line-height: 1.6; }
.compromiso { margin-top: 2.5rem; padding: 1.75rem 2rem; border-radius: var(--radius); border: 1px dashed var(--fg-20); }
.compromiso h3 { margin: 0 0 .75rem; font-size: 1.125rem; }
.compromiso ul { margin: 0; padding-left: 1.1rem; color: var(--fg-70); line-height: 1.7; }

/* Bloque del Círculo de fundadores en /grc/: anillo a la izquierda y texto a lo ancho, no en una columna estrecha */
.cta--fund .cta__in.fund-resumen { max-width: 64rem; margin-inline: auto; text-align: left; }
.cta--fund .fund-resumen h2 { max-width: none; margin-inline: 0; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); }
.cta--fund .fund-resumen p { max-width: 40rem; margin-inline: 0; }
.cta--fund .fund-resumen .actions { justify-content: flex-start; }

/* ===================================================================================================================
   29/10/2026 (3.ª vuelta): bloques sencillos para GRC y Consultora
   =================================================================================================================== */

/* 14. Ventajas: icono en círculo, titular corto y una frase; cuatro en fila en pantallas anchas ———————————— */
.ventajas { list-style: none; display: grid; gap: 2.5rem 2rem; margin: 0; padding: 0; }
@media (min-width: 640px) { .ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ventajas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ventajas__ico {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.25rem; border-radius: 50%;
  color: var(--foreground); border: 1px solid var(--bd-50);
  background: linear-gradient(145deg, color-mix(in oklab, var(--foreground) 14%, transparent), color-mix(in oklab, var(--foreground) 3%, transparent));
}
.ventajas__ico svg { width: 24px; height: 24px; }
.ventajas__item h3 { margin: 0 0 .5rem; font-size: 1.3125rem; letter-spacing: -.02em; }
.ventajas__item p { margin: 0; color: var(--fg-70); line-height: 1.6; }

/* 15. Normas: una línea con cuatro paradas (disponible, en desarrollo, próximamente) ——————————————————————— */
.normas { list-style: none; position: relative; display: grid; gap: 1rem; margin: 0; padding: 0; }
@media (min-width: 768px) {
  .normas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .normas::before { content: ""; position: absolute; left: 0; right: 0; top: 2.6rem; height: 1px; background: var(--bd-50); }
}
.normas__item {
  position: relative; display: grid; gap: .35rem; padding: 1.5rem; border-radius: var(--radius);
  border: 1px solid var(--bd-50); background: var(--background);
}
.normas__marca { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; color: var(--fg-40); }
.normas__nombre { color: var(--fg-70); }
.normas__estado { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .875rem; color: var(--fg-60); }
.normas__estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-30); }
.normas__item--ok { border-color: var(--fg-30); background: linear-gradient(160deg, color-mix(in oklab, var(--foreground) 9%, transparent), transparent 60%), var(--background); }
.normas__item--ok .normas__marca { color: var(--foreground); }
.normas__item--ok .normas__estado { color: var(--foreground); }
.normas__item--ok .normas__estado::before { background: var(--success); box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent); }
.normas__item--dev .normas__estado::before { background: var(--pending-fg); }

/* 16. Empresas fundadoras dentro de /grc/: anillo y texto a la izquierda, ventajas a la derecha —————————————— */
.fundadores { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .fundadores { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 5rem; } }
.fundadores__cab .anillo { margin-bottom: 1.5rem; }
.fundadores__cab h2 { margin: 1rem 0 1.25rem; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -.03em; }
.fundadores__cab p { color: var(--fg-70); font-size: 1.0625rem; line-height: 1.65; }
.fundadores__pide { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--bd-50); font-size: .9375rem !important; color: var(--fg-60) !important; }
.fundadores .beneficios { grid-template-columns: 1fr; }
@media (min-width: 640px) { .fundadores .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fundadores__cab .anillo--grande { width: 150px; height: 150px; } .fundadores__cab .anillo--grande .anillo__n { font-size: 2.75rem; }

/* El tema claro no se deja oscurecer por el «modo oscuro automático» de Chrome/Edge ni por extensiones que lo
   imitan: sin esto, al pasar a claro el navegador volvía a pintar la página oscura y parecía que no cambiaba nada. */
:root[data-theme="light"] { color-scheme: only light; }

/* 17. Páginas interiores (Nosotros, Contacto, ENS, seguridad, IA): las facetas de su línea detrás del título,
   arriba a la derecha y fundiéndose hacia abajo, para que no se queden en liso ————————————————————————————— */
.page-fondo {
  position: absolute; inset: 0 0 auto 0; height: min(760px, 100%); z-index: 0; pointer-events: none;
  background: var(--facetas) 75% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent), linear-gradient(to right, transparent 15%, #000 70%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 35%, transparent), linear-gradient(to right, transparent 15%, #000 70%);
  mask-composite: intersect; opacity: .9;
}
.page-fondo--grc { --facetas: url('/assets/img/facetas-grc-oscuro.svg'); }
.page-fondo--consultora { --facetas: url('/assets/img/facetas-consultora-oscuro.svg'); }
:root[data-theme="light"] .page-fondo--grc { --facetas: url('/assets/img/facetas-grc-claro.svg'); }
:root[data-theme="light"] .page-fondo--consultora { --facetas: url('/assets/img/facetas-consultora-claro.svg'); }
section:has(> .page-fondo) { position: relative; isolation: isolate; overflow: clip; }
section:has(> .page-fondo) > .wrap { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .page-fondo { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%); }
}

/* 18. Empresas fundadoras (4.ª vuelta): título arriba; abajo, el círculo en su tarjeta y los privilegios en tarjetas
   que se iluminan al pasar el ratón. Sustituye al apartado 16. ———————————————————————————————————————————— */
.fundadores__cab { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.fundadores__cab h2 { max-width: 22ch; }
.fundadores { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 1024px) { .fundadores { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 2rem; } }
.fundadores__plazas {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  padding: 2.25rem 1.75rem; border-radius: var(--radius); border: 1px solid var(--bd-50);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--foreground) 10%, transparent), transparent 70%), var(--background);
}
.fundadores__plazas .anillo--grande { width: 200px; height: 200px; }
.fundadores__libres { margin: 0; color: var(--fg-80); font-weight: 500; }
.fundadores__pide { margin: 0 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--bd-50); font-size: .9375rem; line-height: 1.6; color: var(--fg-60); }

.privilegios { list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; }
@media (min-width: 640px) { .privilegios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.privilegios__item {
  position: relative; display: flex; align-items: flex-start; gap: 1rem; overflow: hidden;
  padding: 1.5rem 1.5rem 1.5rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--bd-50);
  background: var(--background);
  transition: transform .35s var(--spring), border-color .25s, background-color .25s;
}
/* raya de luz a la izquierda que aparece al pasar el ratón */
.privilegios__item::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px;
  background: linear-gradient(to bottom, transparent, var(--foreground), transparent);
  opacity: 0; transform: scaleY(.3); transition: opacity .3s, transform .45s var(--spring);
}
.privilegios__ico {
  display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px;
  color: var(--foreground); border: 1px solid var(--bd-50);
  background: linear-gradient(145deg, color-mix(in oklab, var(--foreground) 16%, transparent), color-mix(in oklab, var(--foreground) 3%, transparent));
  transition: transform .45s var(--spring), background-color .25s;
}
.privilegios__ico svg { width: 22px; height: 22px; }
.privilegios__item h3 { margin: .2rem 0 .35rem; font-size: 1.125rem; letter-spacing: -.015em; }
.privilegios__item p { margin: 0; color: var(--fg-70); line-height: 1.55; font-size: .9688rem; }
.privilegios__n {
  position: absolute; right: 1rem; bottom: .25rem; font-size: 3.25rem; font-weight: 600; line-height: 1;
  letter-spacing: -.05em; color: var(--fg-10); pointer-events: none; transition: color .3s;
}
@media (hover: hover) and (pointer: fine) {
  .privilegios__item:hover { transform: translateY(-3px); border-color: var(--fg-30); }
  .privilegios__item:hover::before { opacity: 1; transform: none; }
  .privilegios__item:hover .privilegios__ico { transform: rotate(-6deg) scale(1.06); }
  .privilegios__item:hover .privilegios__n { color: var(--fg-20); }
}
@media (prefers-reduced-motion: reduce) {
  .privilegios__item, .privilegios__item::before, .privilegios__ico { transition: none; }
  .privilegios__item:hover, .privilegios__item:hover .privilegios__ico { transform: none; }
}

/* Pasos de NISPLY Consultora con las mismas tarjetas numeradas: a lo ancho, tres por fila */
@media (min-width: 1024px) { .privilegios--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.privilegios__item { padding-right: 4.75rem; }

/* Los nombres de las dos líneas destacan dentro del texto de las cabeceras */
.hero .lead strong { color: var(--foreground); font-weight: 600; }

/* 19. Tarjetas de las dos líneas (portada y Consultora): al pasar el ratón, un pequeño zoom y una línea de luz
   que las recorre deprisa de arriba abajo, como un láser que las «escanea» ——————————————————————————————— */
.linea { position: relative; overflow: hidden; isolation: isolate; }
/* «scale» va aparte de «transform», que usa la animación de aparición (.reveal), y así no se pisan */
.linea, .js .linea.reveal { transition: opacity .4s var(--ease), transform .4s var(--ease), scale .45s var(--spring), border-color .25s; }
.linea::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--foreground) 85%, transparent) 50%, transparent);
  box-shadow: 0 0 18px 3px color-mix(in oklab, var(--foreground) 30%, transparent);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .linea:hover { scale: 1.02; border-color: var(--fg-30); }
  .linea:hover::after { animation: laser .9s cubic-bezier(.45, 0, .2, 1) 1; }
}
@keyframes laser {          /* «top» en % va por la altura de cada tarjeta, sea cual sea */
  0%   { opacity: 0; top: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; top: 100%; }
}
.hero .lead { max-width: 44rem; }