/*
	Theme Name: Nereida Child
	Template: nereida-theme
	Description: Child theme de Nereida. Aquí vive la web.
	Author: Nereida Studio
	Author URI: https://nereidastudio.com
	Version: 5.0.3
	License: GNU General Public License v3 or later.
*/


/* =======================================================================
   FUENTE: Satoshi Variable (self-hosted)
   ======================================================================= */

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}


/* =======================================================================
   VARIABLES
   ======================================================================= */

:root {

  /* ── Tipografía ──────────────────────────────────────────────────── */
  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ── Colores · Familia azul (paleta principal) ───────────────────── */
  --color-bg:          #EBF8FF;  /* fondo base de la página */
  --color-foam:        #F5FBFF;  /* variante apenas más blanca */
  --color-paper:       #FFFFFF;  /* tarjetas blancas */
  --color-blue:        #82D7FF;  /* azul de marca saturado */
  --color-blue-text:   #0093D9;  /* itálicas accent sobre claro */
  --color-blue-soft:   #C7ECFF;  /* placeholder, reserva */
  --color-blue-deep:   #102A5C;  /* dark intermedio (Stack/SEO técnico) */
  --color-blue-footer: #12336A;  /* fondo del footer */
  --color-ink:         #070035;  /* tinta principal, texto y CTAs sólidos */

  /* ── Colores · Texto sobre claro ─────────────────────────────────── */
  --color-ink-soft:    rgba(7, 0, 53, 0.70);   /* texto secundario */
  --color-muted:       rgba(7, 0, 53, 0.52);   /* kickers, labels, números */
  --color-faint:       rgba(7, 0, 53, 0.32);   /* placeholders */
  --color-line:        rgba(7, 0, 53, 0.08);   /* separadores sutiles */
  --color-line-strong: rgba(7, 0, 53, 0.16);   /* separadores principales */

  /* ── Colores · Texto sobre dark (footer + block--deep) ───────────── */
  --color-on-blue:        #EBF8FF;
  --color-on-blue-soft:   rgba(235, 248, 255, 0.72);
  --color-on-blue-muted:  rgba(235, 248, 255, 0.50);
  --color-line-on-blue:   rgba(235, 248, 255, 0.16);

  /* ── Colores · Detalle puntual (lila, sólo cards específicas) ───── */
  --color-lilac-soft:   #E4DCFF;  /* tarjeta "Más allá de lo básico" */
  --color-lilac-accent: #6B4FBF;  /* hovers dentro de cards lila */

  /* ── Estados ─────────────────────────────────────────────────────── */
  --color-focus:   var(--color-blue);
  --color-success: #22C55E;
  --color-error:   #DC2626;

  /* ── Layout · Spacing base ────────────────────────────────────────── */
  --gutter: clamp(20px, 2.6vw, 48px);  /* padding lateral del header fixed */
  --gap:    clamp(20px, 3.5vw, 80px);  /* margin entre bloques (block, hero-image) */

  /* ── Layout · Radios ─────────────────────────────────────────────── */
  --radius-block: clamp(28px, 3.4vw, 56px);  /* bloques grandes (block, hero image) */
  --radius-card:  clamp(20px, 2.4vw, 40px);  /* cards internas, figuras laterales */
  --radius-pill:  999px;                     /* pills, botones, toggles */

  /* ── Sombras (reserva, usadas con moderación) ────────────────────── */
  --shadow-sm: 0 2px 8px  rgba(7, 0, 53, 0.04);
  --shadow-md: 0 4px 16px rgba(7, 0, 53, 0.06);
  --shadow-lg: 0 8px 32px rgba(7, 0, 53, 0.08);
  --shadow-xl: 0 16px 48px rgba(7, 0, 53, 0.10);

  /* ── Easings ─────────────────────────────────────────────────────── */
  --ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Menu (hamburger + off-canvas timing) ────────────────────────── */
  --n-menu-dur:  850ms;
  --n-menu-ease: cubic-bezier(.2, 1, .2, 1);

  /* ── Botones (consumidos por widget Nereida Button via fallback) ── */
  --n-btn-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --n-btn-ease-inout:   cubic-bezier(0.4, 0, 0, 1);
  --n-btn-ease-elastic: cubic-bezier(0.34, 2.5, 0.64, 1);
  --n-btn-radius:       100px;


  /* =======================================================================
     ALIAS LEGACY
     Mantienen compatibilidad con código anterior a v5.0.0 (widget Nereida
     Button, header, motion). Sustituir en el código que los use cuando
     toque y eliminar de aquí en una versión futura.
     ======================================================================= */

  --color-bg-card:    var(--color-paper);
  --color-bg-soft:    var(--color-blue-soft);
  --color-bg-medium:  var(--color-blue);
  --color-bg-dark:    var(--color-ink);
  --color-text:       var(--color-ink);
  --color-text-body:  var(--color-ink-soft);
  --color-text-muted: var(--color-muted);
  --color-text-white: var(--color-on-blue);
  --color-border:     var(--color-line-strong);
  --color-accent:     var(--color-blue);
  --color-link:       var(--color-blue-text);
  --color-link-hover: var(--color-ink);

  --radius:    24px;  /* legacy fijo, mantener mientras haya widgets que lo usen */
  --radius-sm: 8px;
  --radius-xs: 4px;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  var(--ease-out);

  --space-side:     var(--gutter);
  --space-section:  clamp(80px, 9vw, 180px);
  --space-gap:      var(--gap);
  --space-gap-sm:   clamp(16px, 1.5vw, 32px);
  --space-card:     clamp(24px, 2vw, 32px);
  --space-hero-top: clamp(64px, 8vw, 96px);
  --visual-min:     clamp(250px, calc(250px + (450 - 250) * ((100vw - 360px) / (1024 - 360))), 450px);
}


/* =======================================================================
   GLOBALS · Tag-level
   Lo que es global por tag y no debe duplicarse en V4 Classes.
   ======================================================================= */

html {
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

html, body {
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-weight: 420;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  font-feature-settings: "ss03" 1, "ss01" 1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
  font-weight: 500;
}

p {
  text-wrap: pretty;
}


/* ── Itálica accent (delicada, dentro de titulares) ─────────────────
   Se aplica de dos formas:
   1. Explícita con clase: <em class="accent">palabra</em>
   2. Implícita dentro de un heading: <h2>... <em>palabra</em> ...</h2>
      La segunda permite usar el botón "cursiva" del widget Heading de
      Elementor V4 (que no permite añadir clases) y obtener el accent
      automáticamente. Si en algún momento se necesita una cursiva
      con función real (énfasis literal), usar <i> en su lugar.
   ─────────────────────────────────────────────────────────────── */

em.accent,
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-blue-text);
  letter-spacing: -0.02em;
}

/* Accent invertida según contexto del bloque que lo envuelve */
.block--sky em.accent,
.block--sky :where(h1, h2, h3, h4) em {
  color: var(--color-ink);
  opacity: 0.55;
}

.block--deep em.accent,
.block--deep :where(h1, h2, h3, h4) em,
.block--footer em.accent,
.block--footer :where(h1, h2, h3, h4) em {
  color: var(--color-blue);
}


/* ── Links dentro de párrafos (excluye botones Elementor) ──────────── */

p a:where(:not(.elementor-button):not([class*="elementor-button"])) {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--color-line-strong);
  text-decoration-skip-ink: auto;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

p a:where(:not(.elementor-button)):hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

p a:where(:not(.elementor-button)):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}


/* ── Selección de texto ────────────────────────────────────────────── */

::selection {
  background: var(--color-blue);
  color: var(--color-ink);
}


/* =======================================================================
   HEADER
   ======================================================================= */

/* Header. En el top de la página es transparente. En cuanto hay
   scroll (>50px), se activa el glass propio para que el menú sea
   legible sobre cualquier contenido. Comportamiento de scroll:
   se oculta al scroll-down y reaparece (con glass) al scroll-up.

   IMPORTANTE: z-index alto explícito. El backdrop-filter del .scrolled
   crea stacking context propio en el header, lo que puede dejarlo por
   debajo del .n-mainnav-backdrop (que vive en body con z-index 40)
   si el header no tiene su propio z-index. El 999 asegura que el
   header, el menú y los paneles desplegables quedan siempre por
   encima del backdrop blur. */
#nereida-header {
  z-index: 999;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  padding-top: 16px;
  padding-bottom: 16px;
  transition:
    transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),
    background-color 0.3s ease,
    border-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

#nereida-header.scrolled {
  background-color: rgba(255, 255, 255, 0.42);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--color-line);
}

/* Cuando hay un panel del menú abierto, el header pierde su glass.
   El backdrop blur del .n-mainnav-backdrop ya cubre todo el viewport
   de forma continua, así que mantener un fondo extra en el header
   crearía una franja visible "partiendo" el desenfoque. Al cerrar el
   panel, body.n-panel-open desaparece y el glass vuelve. */
body.n-panel-open #nereida-header.scrolled {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

#nereida-header.nav-up {
  transform: translateY(-100%);
}

#nereida-header.nav-down {
  transform: translateY(0);
}


/* =======================================================================
   MAIN NAV (v2)
   El nav vive como widget HTML en el header de V4. El logo va en un
   widget aparte. El nav se monta en plano: items con swap vertical en
   hover, paneles overlay para Desarrollo y Captación, backdrop blur
   del resto de la página al abrir un panel.
   ======================================================================= */

/* Nav a la derecha (plano, sin pill) */
.n-mainnav-list {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 36px);
}

.n-mainnav-link {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  /* Defensivos: anular cualquier focus/active de browser o Elementor
     que pinte fondos no deseados. */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Buttons (Desarrollo, Captación) tienen estilos propios de user
   agent. Además, los ajustes globales de botones de Elementor V4
   (Site Settings > Buttons) aplican font-family y font-size con
   selectores específicos que ganan a las clases. Forzamos con
   !important porque estos buttons NO deben verse como botones,
   sino como links del menú. Es la única vía limpia para que el
   menú sea independiente de los estilos globales del CTA. */
button.n-mainnav-link,
.n-mainnav-trigger {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
}

/* Spans internos del swap vertical: heredan font del padre */
.n-mainnav-link-text,
.n-mainnav-link-text > span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.n-mainnav-link:focus,
.n-mainnav-link:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.n-mainnav-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Texto con swap vertical en hover ───────────────────────────────
   Dos copias del texto apiladas dentro de un wrapper con overflow
   hidden. En hover, ambas suben 100% — la primera sale, la segunda
   ocupa su sitio. Sin cambio de color, solo movimiento. */
.n-mainnav-link-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
  height: 1.15em;
  line-height: 1.15em;
  vertical-align: middle;
}

.n-mainnav-link-text > span {
  display: block;
  height: 1.15em;
  line-height: 1.15em;
  transition: transform 0.45s var(--ease);
}

.n-mainnav-link:hover .n-mainnav-link-text > span,
.n-mainnav-trigger[aria-expanded="true"] .n-mainnav-link-text > span {
  transform: translateY(-100%);
}

/* ── Defensivos: anular cualquier estilo de Elementor o browser que
   pinte fondos no deseados (rojo, blanco, hover, focus, active). El
   menú es texto puro, sin fondos. */
.n-mainnav-link,
.n-mainnav-link:hover,
.n-mainnav-link:active,
.n-mainnav-link:focus,
.n-mainnav-link:focus-visible,
.n-mainnav-trigger,
.n-mainnav-trigger:hover,
.n-mainnav-trigger:active,
.n-mainnav-trigger:focus,
.n-mainnav-trigger:focus-visible,
.n-mainnav-trigger[aria-expanded="true"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-ink) !important;
}

@media (max-width: 920px) {
  .n-mainnav-list {
    display: none;
  }
}

/* ── nav-list es relative para anclar los paneles ──────────────────
   Los paneles son siblings de los triggers dentro del nav-list, lo
   que permite alinearlos siempre a la derecha del menú con right:0,
   independientemente de qué trigger los abre. */
.n-mainnav-list {
  position: relative;
}

.n-mainnav-trigger {
  position: relative;
  cursor: pointer;
}

/* ── Panel desplegable (alineado a la derecha del nav-list) ─────── */
.n-mainnav-panel {
  position: absolute;
  top: calc(100% + 22px);
  right: 0;
  width: clamp(620px, 50vw, 780px);
  max-width: 92vw;
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}

.n-mainnav-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.n-mainnav-panel-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
  background: var(--color-paper);
  border-radius: 26px;
  padding: clamp(14px, 1.4vw, 20px);
  box-shadow: 0 30px 70px -28px rgba(7, 0, 53, 0.22),
              0 6px 20px -10px rgba(7, 0, 53, 0.10);
}

/* Feature card: servicio principal de la sección */
.n-mainnav-panel-feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(22px, 2vw, 32px);
  background: var(--color-bg);
  border-radius: 20px;
  color: var(--color-ink);
  text-decoration: none;
  transition: background 0.3s ease;
  min-height: 240px;
}

.n-mainnav-panel-feature:hover {
  background: var(--color-blue-soft);
}

.n-mainnav-panel-feature-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.n-mainnav-panel-feature-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
  margin-top: auto;
}

.n-mainnav-panel-feature-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-blue-text);
  letter-spacing: -0.024em;
}

.n-mainnav-panel-feature-arrow {
  width: 18px;
  height: 18px;
  color: var(--color-ink);
  opacity: 0.45;
  transition: transform 0.35s var(--ease), opacity 0.3s ease;
  flex-shrink: 0;
}

.n-mainnav-panel-feature:hover .n-mainnav-panel-feature-arrow {
  opacity: 1;
  transform: translate(3px, -3px);
}

.n-mainnav-panel-feature-desc {
  font-size: 13.5px;
  color: var(--color-ink-soft);
  line-height: 1.5;
  max-width: 30ch;
  letter-spacing: -0.005em;
}

/* Lista de servicios secundarios */
.n-mainnav-panel-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.n-mainnav-panel-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--color-ink);
  text-decoration: none;
  transition: background 0.3s ease;
}

.n-mainnav-panel-item:hover {
  background: var(--color-bg);
}

.n-mainnav-panel-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--color-ink);
}

.n-mainnav-panel-item-arrow {
  width: 13px;
  height: 13px;
  color: var(--color-ink);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
  flex-shrink: 0;
}

.n-mainnav-panel-item:hover .n-mainnav-panel-item-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.n-mainnav-panel-item-desc {
  font-size: 12.5px;
  color: var(--color-ink-soft);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* ── Backdrop con blur al resto de la página ──────────────────────── */
.n-mainnav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 0, 53, 0.04);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
  z-index: 40;
}

.n-mainnav-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}


/* =======================================================================
   MOBILE MENU (drill-down editorial)
   Vive dentro del off-canvas de Elementor V4. Estructura: pantalla
   principal con todos los items, y dos sub-pantallas (Desarrollo y
   Captación) que reproducen la lógica editorial del desktop con un
   feature card grande arriba y la lista de secundarios debajo.
   Comportamiento en assets/js/nereida-menu.js.
   ======================================================================= */

.n-mmenu {
  width: 100%;
  min-height: 100%;
  background: var(--color-bg);
  padding: clamp(56px, 14vw, 100px) clamp(24px, 6vw, 36px) clamp(40px, 8vw, 60px);
  display: flex;
  flex-direction: column;
}

.n-mmenu-screens {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Pantallas en flujo normal con display none/block. Sin position
   absolute para no depender de la altura del padre off-canvas. */
.n-mmenu-screen {
  display: none;
  width: 100%;
  flex: 1;
  flex-direction: column;
}

.n-mmenu-screen--main {
  display: flex;
  animation: n-mmenu-in-main 0.3s var(--ease);
}

.n-mmenu.has-sub .n-mmenu-screen--main {
  display: none;
}

.n-mmenu-screen.is-active {
  display: flex;
  animation: n-mmenu-in-sub 0.3s var(--ease);
}

@keyframes n-mmenu-in-main {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes n-mmenu-in-sub {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Secciones (Menu / Contacta) estilo Cuberto ───────────────────── */
.n-mmenu-section {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 28px);
}

.n-mmenu-section--contact {
  margin-top: auto;
  padding-top: clamp(40px, 9vw, 64px);
}

.n-mmenu-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-muted);
}

/* ── Lista principal (sin divisores, sin flechas) ─────────────────── */
.n-mmenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vw, 6px);
}

.n-mmenu-list a,
.n-mmenu-list button {
  display: block;
  width: 100%;
  padding: clamp(6px, 1.4vw, 10px) 0;
  font-family: inherit;
  font-size: clamp(40px, 10vw, 56px);
  font-weight: 500;
  letter-spacing: -0.036em;
  line-height: 1.05;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* Defensivos !important: anular cualquier fondo de Elementor o del
   browser en buttons (rojos, blancos, highlights). */
.n-mmenu-list a,
.n-mmenu-list a:hover,
.n-mmenu-list a:active,
.n-mmenu-list a:focus,
.n-mmenu-list a:focus-visible,
.n-mmenu-list button,
.n-mmenu-list button:hover,
.n-mmenu-list button:active,
.n-mmenu-list button:focus,
.n-mmenu-list button:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-ink) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Bloque Contacta ──────────────────────────────────────────────── */
.n-mmenu-contact {
  display: block;
  padding: clamp(4px, 1vw, 8px) 0;
  font-size: clamp(26px, 6.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.05;
  color: var(--color-ink);
  text-decoration: none;
  word-break: break-word;
  -webkit-tap-highlight-color: transparent;
}

/* ── Sub-pantalla: head con Volver + label ──────────────────────── */
.n-mmenu-sub-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(28px, 6vw, 40px);
}

.n-mmenu-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.n-mmenu-back:hover,
.n-mmenu-back:active,
.n-mmenu-back:focus {
  outline: none !important;
  box-shadow: none !important;
}

.n-mmenu-back:hover {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

.n-mmenu-back-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.n-mmenu-sub-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── Feature card del servicio principal (sin descripción).
   width:100% para que ocupe el ancho del .n-mmenu menos el padding
   lateral del padre. align-self:stretch como respaldo si el padre
   no propaga el width. ─────────────────────────────────────────── */
.n-mmenu-feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 6vw, 36px);
  background: var(--color-paper);
  border-radius: 22px;
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: clamp(28px, 6vw, 40px);
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.n-mmenu-feature-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.n-mmenu-feature-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  font-size: clamp(36px, 9vw, 52px);
  font-weight: 500;
  letter-spacing: -0.034em;
  line-height: 0.96;
  color: var(--color-ink);
}

.n-mmenu-feature-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-blue-text);
  letter-spacing: -0.028em;
}

.n-mmenu-feature-arrow {
  width: 18px;
  height: 18px;
  color: var(--color-ink);
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── Lista de servicios secundarios (sin divisores, sin flechas,
   sin descripciones) ─────────────────────────────────────────────── */
.n-mmenu-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vw, 6px);
}

.n-mmenu-sublist a {
  display: block;
  padding: clamp(6px, 1.4vw, 10px) 0;
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.1;
  color: var(--color-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.n-mmenu-sublist a,
.n-mmenu-sublist a:hover,
.n-mmenu-sublist a:active,
.n-mmenu-sublist a:focus {
  background: transparent !important;
  color: var(--color-ink) !important;
  outline: none !important;
}


/* =======================================================================
   HAMBURGER MENU
   ======================================================================= */

.nereida-menu-toggle .elementor-icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}

.nereida-menu-toggle .elementor-icon svg {
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.nereida-menu-toggle .elementor-icon::before,
.nereida-menu-toggle .elementor-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: top var(--n-menu-dur) var(--n-menu-ease), width var(--n-menu-dur) var(--n-menu-ease), transform var(--n-menu-dur) var(--n-menu-ease);
}

.nereida-menu-toggle .elementor-icon::before {
  top: 19px;
  width: 28px;
  transform: translateX(-50%) rotate(0deg);
  transition-delay: 0ms;
}

.nereida-menu-toggle .elementor-icon::after {
  top: 27px;
  width: 14px;
  transform: translateX(-50%) translateX(7px) rotate(0deg);
  transition-delay: 0ms;
}

.nereida-menu-toggle .elementor-icon[aria-expanded="true"]::before,
.nereida-menu-toggle .elementor-icon[aria-expanded="true"]::after {
  transition-delay: 100ms;
}

.nereida-menu-toggle .elementor-icon[aria-expanded="true"]::before {
  top: 23px;
  width: 24px;
  transform: translateX(-50%) rotate(135deg);
}

.nereida-menu-toggle .elementor-icon[aria-expanded="true"]::after {
  top: 23px;
  width: 24px;
  transform: translateX(-50%) rotate(45deg);
}

body .elementor-widget-off-canvas {
  --e-off-canvas-animation-duration: var(--n-menu-dur) !important;
  --e-off-canvas-overlay-animation-duration: var(--n-menu-dur) !important;
}

body .e-off-canvas__overlay,
body .elementor-off-canvas__overlay,
body .e-off-canvas__backdrop,
body .elementor-off-canvas__backdrop,
body .dialog-overlay {
  transition-duration: var(--n-menu-dur) !important;
  animation-duration: var(--n-menu-dur) !important;
  transition-timing-function: var(--n-menu-ease) !important;
  animation-timing-function: var(--n-menu-ease) !important;
  transition-delay: 0ms !important;
  animation-delay: 0ms !important;
}

body .dialog-widget-content,
body .e-off-canvas,
body .elementor-off-canvas,
body .e-off-canvas__container,
body .elementor-off-canvas__container {
  transition-duration: var(--n-menu-dur) !important;
  animation-duration: var(--n-menu-dur) !important;
  transition-timing-function: var(--n-menu-ease) !important;
  animation-timing-function: var(--n-menu-ease) !important;
  transition-delay: 0ms !important;
  animation-delay: 0ms !important;
}


/* =======================================================================
   ACCORDION (override Elementor)
   ======================================================================= */

.e-n-accordion-item-title-icon .e-opened,
.e-n-accordion-item-title-icon .e-closed,
.e-n-accordion-item-title-icon svg {
  display: none !important;
}

.e-n-accordion-item {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.e-n-accordion-item-title-icon {
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  transition: transform 0.35s ease !important;
}

.e-n-accordion-item-title-icon::before,
.e-n-accordion-item-title-icon::after {
  content: "" !important;
  position: absolute !important;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out-expo) !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.e-n-accordion-item-title-icon::before {
  width: 100% !important;
  height: 2px !important;
}

.e-n-accordion-item-title-icon::after {
  width: 2px !important;
  height: 100% !important;
}

details[open] .e-n-accordion-item-title-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) !important;
}


/* =======================================================================
   MOTION SYSTEM
   GSAP maneja transforms y opacidad via inline styles.
   Este CSS define: estado inicial y overflow clips,
   más overrides para reduced-motion / Elementor editor.
   ======================================================================= */


/* ── Estado inicial: ocultar elementos animables ───────────────────── */

.n-motion-js .n-reveal,
.n-motion-js .n-blind,
.n-motion-js .n-image-reveal {
  visibility: hidden;
}


/* ── Wrap natural en elementos animados con SplitText ────────────────
   Los selectores globales aplican text-wrap: pretty a <p> y balance a
   h1-h4. SplitText mide las líneas ANTES de que el browser optimice
   el wrap, y como inserta wrappers, ese pretty/balance ya no se puede
   aplicar después. Resultado: viudas tipo "En" sueltas en una línea.
   Forzamos text-wrap: auto en los elementos animados para que la
   división coincida con el wrap natural del browser. */

.n-reveal,
.n-blind {
  text-wrap: auto;
}


/* ── n-reveal: perspectiva 3D para rotateX ─────────────────────────── */

.n-reveal {
  perspective: 600px;
}

.n-line {
  transform-style: preserve-3d;
}

/* ── n-char: mantener flujo inline para preservar kerning ───────────
   SplitText pone los chars como inline-block por defecto, lo que
   rompe el kerning natural del texto y produce un saltito visible
   al hacer revert. Como sólo animamos color (no transform), no
   necesitamos inline-block. ─────────────────────────────────────── */

.n-char {
  display: inline !important;
}


/* ── n-blind: overflow hidden en el parent wrapper de SplitText ────── */

.n-blind-parent {
  overflow: hidden;
}


/* ── Image reveal: base styling ────────────────────────────────────── */

.n-image-reveal {
  will-change: clip-path, transform;
  overflow: hidden;
}


/* ── Reduced motion: todo visible, sin animación ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  .n-reveal,
  .n-blind,
  .n-image-reveal {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}


/* ── Elementor editor: todo visible ────────────────────────────────── */

.elementor-editor-active .n-reveal,
.elementor-editor-active .n-blind,
.elementor-editor-active .n-image-reveal {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}


/* =======================================================================
   ELEMENTOR FORM CLASSIC
   Estilos del formulario clásico de Elementor adaptados a Nereida:
   inputs sin caja con border-bottom, labels uppercase pequeñas,
   submit pill ink. Aplica a todos los widgets Form classic.
   ======================================================================= */
.elementor-form .elementor-field-group .select-caret-down-wrapper {
    display: none;
}

.elementor-form .elementor-field-group {
  padding: 0;
  margin: 0;
}


/* Asterisco de required */
.elementor-form .elementor-mark-required .elementor-field-label::after {
  content: '*';
  margin-left: 4px;
  color: var(--color-blue-text);
  font-weight: 500;
}

/* Input + textarea + select: border-bottom limpio */
.elementor-form .elementor-field-textual {
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 420;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line-strong);
  border-radius: 0;
  padding: 14px 0;
  width: 100%;
  outline: none;
  transition: border-color 0.3s ease;
  letter-spacing: -0.012em;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.elementor-form .elementor-field-textual::placeholder {
  color: var(--color-faint);
  opacity: 1;
}

.elementor-form .elementor-field-textual:focus,
.elementor-form .elementor-field-textual:focus-visible {
  border-bottom-color: var(--color-ink);
  outline: none;
  box-shadow: none;
}

/* Textarea: altura mínima y resize vertical */
.elementor-form textarea.elementor-field-textual {
  min-height: 160px;
  resize: vertical;
  line-height: 1.55;
}

/* Select: chevron custom */
.elementor-form select.elementor-field-textual {
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23070035' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px;
}

/* Submit: pill ink. !important defensivo contra los estilos del widget Button. */
.elementor-form .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 26px !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  background: var(--color-ink) !important;
  color: var(--color-paper) !important;
  border: 1px solid transparent !important;
  text-transform: none !important;
  cursor: pointer !important;
  width: auto !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition:
    transform 0.4s var(--ease),
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}

.elementor-form .elementor-button:hover {
  background: transparent !important;
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
  transform: translateY(-1px) !important;
}

.elementor-form .elementor-button:focus-visible {
  outline: 2px solid var(--color-focus) !important;
  outline-offset: 3px;
}

.elementor-form .elementor-button .elementor-button-icon {
  display: none;
}

.elementor-form .elementor-button-content-wrapper {
  gap: 12px;
}


/* Checkbox + radio + acceptance */
.elementor-form .elementor-field-type-checkbox .elementor-field-subgroup,
.elementor-form .elementor-field-type-radio .elementor-field-subgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.elementor-form .elementor-field-type-checkbox label,
.elementor-form .elementor-field-type-radio label,
.elementor-form .elementor-field-type-acceptance label {
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 13.5px;
  color: var(--color-ink-soft);
  font-weight: 420;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  line-height: 1.5;
  cursor: pointer;
}

.elementor-form input[type="checkbox"],
.elementor-form input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-ink);
  margin: 0;
}

/* Mensajes post-submit */
.elementor-form .elementor-message,
.elementor-message.elementor-message-success,
.elementor-message.elementor-message-danger {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 16px 20px !important;
  border-radius: 12px !important;
  margin-top: 24px !important;
  letter-spacing: -0.005em !important;
  line-height: 1.5 !important;
  background-image: none !important;
}

.elementor-form .elementor-message-success {
  background: rgba(0, 147, 217, 0.08) !important;
  color: var(--color-blue-text) !important;
  border: 1px solid rgba(0, 147, 217, 0.2) !important;
}

.elementor-form .elementor-message-danger {
  background: rgba(220, 38, 38, 0.06) !important;
  color: var(--color-error) !important;
  border: 1px solid rgba(220, 38, 38, 0.18) !important;
}

/* Error por campo */
.elementor-form .elementor-field-group.elementor-error .elementor-field-textual {
  border-bottom-color: var(--color-error);
}

.elementor-form .elementor-error-message,
.elementor-form .elementor-message-field-error {
  font-size: 12px;
  color: var(--color-error);
  margin-top: 6px;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

/* HTML field (nota legal debajo del submit) */
.elementor-form .elementor-field-type-html {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 48ch;
}


/* =======================================================================
   PROSE
   Tipografía editorial para contenido de blog (output del widget
   Post Content de Elementor). Aplicar añadiendo la clase n-prose
   al widget desde Panel > Avanzado > CSS Classes. Cubre h2-h4,
   párrafos, listas, blockquote, código, separadores, imágenes con
   caption, tablas y embeds.
   ======================================================================= */

.n-prose {
  /* !important para ganar a la regla de contenedor de Elementor
     `.e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100% }`
     (especificidad 0,4,0). Sin forzarlo, el contenedor de prosa se va a ancho
     completo y los bloques que no tienen tope por elemento (blockquote, tabla,
     pre/código, embeds) escapan de la medida de lectura. Al fijar la medida
     aquí, todos los hijos quedan dentro de 68ch sea cual sea su fuente. */
  max-width: 68ch !important;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(17px, 1.18vw, 19px);
  line-height: 1.72;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}

.n-prose > *:first-child { margin-top: 0; }
.n-prose > *:last-child { margin-bottom: 0; }

/* ── Párrafos ─────────────────────────────────────────────────────── */
.n-prose p {
  margin: 0 0 clamp(20px, 1.6vw, 28px);
  color: var(--color-ink-soft);
  max-width: 68ch;
  text-wrap: pretty;
}

.n-prose p strong,
.n-prose p b {
  color: var(--color-ink);
  font-weight: 500;
}

.n-prose p em,
.n-prose p i {
  font-style: italic;
}

/* Lead opcional: <p class="lead"> o párrafo "grande" del editor de WP */
.n-prose p.lead,
.n-prose .has-large-font-size {
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 1.5;
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.014em;
  max-width: 38ch;
}

/* ── Headings dentro del contenido ───────────────────────────────── */
.n-prose h2 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--color-ink);
  margin: clamp(48px, 5vw, 80px) 0 clamp(16px, 1.4vw, 24px);
  max-width: 28ch;
  text-wrap: balance;
}

.n-prose h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-blue-text);
  letter-spacing: -0.022em;
}

.n-prose h3 {
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--color-ink);
  margin: clamp(36px, 4vw, 56px) 0 clamp(12px, 1vw, 16px);
  text-wrap: balance;
}

.n-prose h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-blue-text);
}

.n-prose h4 {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.014em;
  font-weight: 500;
  color: var(--color-ink);
  margin: clamp(28px, 3vw, 40px) 0 clamp(10px, 0.8vw, 14px);
}

/* ── Links dentro del contenido ──────────────────────────────────── */
.n-prose a:where(:not(.elementor-button):not([class*="elementor-button"])) {
  color: var(--color-blue-text);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.n-prose a:where(:not(.elementor-button)):hover {
  opacity: 0.7;
}

/* ── Listas ──────────────────────────────────────────────────────── */
.n-prose ul,
.n-prose ol {
  margin: 0 0 clamp(20px, 1.6vw, 28px);
  padding-left: 1.6em;
  color: var(--color-ink-soft);
  max-width: 64ch;
}

.n-prose ul {
  list-style: none;
}

.n-prose ul > li {
  position: relative;
  padding-left: 0.4em;
  margin-bottom: 0.6em;
}

.n-prose ul > li::before {
  content: '';
  position: absolute;
  left: -1em;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--color-blue-text);
  opacity: 0.7;
}

.n-prose ol {
  list-style: decimal;
}

.n-prose ol > li {
  margin-bottom: 0.6em;
  padding-left: 0.2em;
}

.n-prose ol > li::marker {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.n-prose li > ul,
.n-prose li > ol {
  margin: 0.4em 0 0.4em;
}

/* ── Blockquote ──────────────────────────────────────────────────── */
.n-prose blockquote {
  margin: clamp(28px, 3vw, 40px) 0;
  padding: clamp(20px, 2vw, 28px) clamp(28px, 3vw, 40px);
  border-left: 3px solid var(--color-blue-text);
  background: var(--color-foam);
  border-radius: var(--radius-soft);
  font-size: clamp(19px, 1.4vw, 23px);
  line-height: 1.5;
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.014em;
}

.n-prose blockquote p {
  color: var(--color-ink);
  max-width: none;
  margin: 0;
}

.n-prose blockquote p + p {
  margin-top: 0.8em;
}

.n-prose blockquote cite,
.n-prose blockquote footer {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
}

/* ── Code inline ─────────────────────────────────────────────────── */
.n-prose code,
.n-prose p code,
.n-prose li code,
.n-prose h2 code,
.n-prose h3 code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
  background: var(--color-bg);
  color: var(--color-blue-text);
  padding: 0.18em 0.45em;
  border-radius: 6px;
  letter-spacing: 0;
}

/* ── Bloque de código ────────────────────────────────────────────── */
.n-prose pre {
  background: var(--color-ink);
  color: var(--color-on-blue-soft);
  padding: clamp(20px, 2vw, 28px);
  border-radius: var(--radius-soft);
  overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
  margin: clamp(28px, 3vw, 40px) 0;
  /* Forzar que no exceda el ancho del párrafo (68ch). Si el contenido
     es más ancho, se activa scroll horizontal dentro del bloque. */
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Scrollbar discreta dentro del bloque de código */
.n-prose pre::-webkit-scrollbar {
  height: 8px;
}
.n-prose pre::-webkit-scrollbar-track {
  background: transparent;
}
.n-prose pre::-webkit-scrollbar-thumb {
  background: rgba(235, 248, 255, 0.18);
  border-radius: 4px;
}
.n-prose pre::-webkit-scrollbar-thumb:hover {
  background: rgba(235, 248, 255, 0.28);
}

.n-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ── Separadores ─────────────────────────────────────────────────── */
.n-prose hr {
  border: 0;
  border-top: 1px solid var(--color-line-strong);
  margin: clamp(48px, 5vw, 72px) auto;
  max-width: 8ch;
}

/* ── Imágenes con o sin caption ──────────────────────────────────── */
.n-prose img,
.n-prose figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  background: var(--color-bg);
}

.n-prose figure {
  margin: clamp(40px, 4vw, 64px) 0;
}

.n-prose figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--color-muted);
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* ── Embeds (videos, iframes) ────────────────────────────────────── */
.n-prose .wp-block-embed,
.n-prose iframe {
  margin: clamp(40px, 4vw, 64px) 0;
  max-width: 100%;
  border-radius: var(--radius-card);
}

/* ── Tablas ──────────────────────────────────────────────────────── */
.n-prose table {
  width: 100%;
  margin: clamp(28px, 3vw, 40px) 0;
  border-collapse: collapse;
  font-size: 15px;
}

.n-prose th,
.n-prose td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}

.n-prose th {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.n-prose td {
  color: var(--color-ink-soft);
}



/* =======================================================================
   PAGE TRANSITION (pendiente de mejorar)
   ======================================================================= */

.n-page-exit {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.n-page-exit.is-active {
  opacity: 1;
  pointer-events: all;
}