/*
Theme Name: Rinnovo
Theme URI: https://rinnovocorp.com/
Author: Rinnovo Corp
Author URI: https://rinnovocorp.com/
Description: Block theme corporativo de Rinnovo Corp. WordPress 6.6+. Bilingüe ES/EN. Diseñado para consultoría IT enterprise en LATAM. Tokens en theme.json como única fuente de verdad. Sin custom blocks JS — todo via block patterns + block styles.
Version: 0.1.2
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rinnovo
Tags: full-site-editing, block-patterns, block-styles, style-variations, accessibility-ready, custom-colors, custom-logo, featured-images, threaded-comments, translation-ready, two-columns, three-columns, four-columns, wide-blocks, blog, business, portfolio
*/

/*
Theme tokens en theme.json. Aquí: (1) sistema --c-* del rediseño Accenture-style,
(2) overrides puntuales no expresables en theme.json, (3) animaciones globales,
(4) reglas de print, (5) plugin overrides.
*/

/* ==============================
   Sistema de diseño Rinnovo (rediseño Accenture-style 2026-05-02)
   100% paleta propietaria — NO usar colores fuera de estas variables.
   ============================== */
:root {
  /* ── FONDOS PRINCIPALES ── */
  --c-navy:         #10112A;
  --c-navy-mid:     #181A3A;
  --c-navy-card:    #1E2044;
  --c-navy-border:  rgba(255, 255, 255, 0.07);
  --c-white:        #FFFFFF;
  --c-white-dim:    #F4F4F6;

  /* ── ACENTOS DE PODER ── */
  --c-red:          #9E3339;
  --c-red-dark:     #582738;
  --c-red-dim:      rgba(158, 51, 57, 0.12);
  --c-red-border:   rgba(158, 51, 57, 0.35);

  /* ── TEXTO ── */
  --c-text-light:   #FFFFFF;
  --c-text-dim:     #A8AACB;
  --c-text-muted:   #6B6E94;
  --c-text-dark:    #10112A;
  --c-text-mid:     #3D3F6B;
  --c-text-soft:    #7B7D9E;

  /* ── TIPOGRAFÍA ── */
  --f-display: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ── TAMAÑOS ──
     Curva fluid type slope+offset (Utopia-style) en lugar de slope puro vw.
     El slope reducido + offset constante evita que el cap se alcance en
     viewports 1280-1440 (Windows desktop común), donde 7vw saturaba a 92px
     desde 1314px y dejaba títulos desproporcionados. */
  --text-hero:    clamp(40px, 3.6vw + 22px, 84px);
  --text-h2:      clamp(30px, 2.4vw + 18px, 56px);
  --text-h3:      clamp(20px, 0.9vw + 13px, 28px);
  --text-eyebrow: 11px;
  --text-body:    18px;
  --text-small:   14px;

  /* ── ESPACIADO ── */
  --section-pad: clamp(80px, 10vw, 140px);
  --container:   1400px;
  --gap-col:     32px;
}

/* Aplicar tipografías globalmente + body navy default + clip horizontal.
   El clip es crítico porque las secciones full-bleed usan width:100vw,
   y 100vw incluye el ancho del scrollbar vertical, generando overflow lateral. */
html { overflow-x: clip; }
body {
  font-family: var(--f-body);
  background: var(--c-navy);
  color: var(--c-text-light);
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--f-display);
}

/* ==============================
   Skip link — accesibilidad
   ============================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--wp--preset--spacing--xs);
  z-index: 100000;
  background: var(--wp--preset--color--navy-800);
  color: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--sm);
  border-radius: var(--wp--custom--border--radius-md);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: var(--wp--preset--spacing--xs);
}

/* ==============================
   Focus visible global
   ============================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--red-500);
  outline-offset: 2px;
  border-radius: var(--wp--custom--border--radius-sm);
}

/* ==============================
   Motion — respeto a prefers-reduced-motion
   ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark mode + AAA mode deprecados con el rediseño 2026-05-02 */

/* ==============================
   SITE HEADER (PASO 2)
   ============================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(16, 17, 42, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition: background .4s ease, border-color .4s ease;
}
.site-header.is-scrolled {
  background: rgba(16, 17, 42, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-navy-border);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: padding .3s ease;
}
.site-header.is-scrolled .site-header__inner {
  padding: 10px 80px;
}
/* ==============================
   Logo animado tipo Accenture (header-transparent)
   At rest: chevron solo (rotado simulando "A").
   On hover/focus: chevron rota a su orientación natural y fade-out
   mientras el logotipo completo desliza desde la izquierda y aparece.
   Cero JS, GPU-composited, bidireccional.
   ============================== */
.site-header__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 110px;
  text-decoration: none;
  overflow: visible;
}
/* Chevron — base / hover-out (drag back con delay; opacity restaura inmediato).
   Curva con y(0.5)=0.4 → primera mitad cubre 40% del recorrido, segunda mitad
   acelera 1.5x cubriendo el 60% restante. */
.site-header__logo-mark {
  display: block;
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: url('/wp-content/themes/rinnovo/assets/images/chevron-red.svg') no-repeat center / contain;
  transform: rotate(-90deg);
  transform-origin: center;
  opacity: 1;
  transition: transform 250ms cubic-bezier(0.55, 0, 0.85, 0.4) 70ms;
}
.site-header__logo-mask {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  height: 29px;
  width: 220px;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: hidden;
}
/* Wordmark — base / hover-out: deslizado hacia abajo, fuera del mask. Sin opacidad. */
.site-header__logo-full {
  display: block;
  width: auto;
  height: 29px;
  transform: translateY(100%);
  transition: transform 600ms cubic-bezier(.16, 1, .3, 1);
}
/* Hover IN: chevron aterriza sobre el chevron embebido del wordmark y se desvanece
   al final del arrastre para integrarse limpiamente con el embebido. */
.site-header__logo:hover .site-header__logo-mark,
.site-header__logo:focus-visible .site-header__logo-mark {
  /* Posición upper-left de R + rotación -140° + scale 0.18 que integra
     visualmente con la R como elemento de marca sobre el cuadrante superior-izquierdo. */
  transform: translate(-24px, -7px) scale(0.18) rotate(-140deg);
  opacity: 1;
  transition: transform 250ms cubic-bezier(0.55, 0, 0.85, 0.4);
}
.site-header__logo:hover .site-header__logo-full,
.site-header__logo:focus-visible .site-header__logo-full {
  transform: translateY(0);
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1);
}
.site-header.is-scrolled .site-header__logo {
  width: 44px;
  height: 90px;
}
.site-header.is-scrolled .site-header__logo-mark {
  width: 40px;
  height: 40px;
}
.site-header.is-scrolled .site-header__logo-mask {
  height: 24px;
  width: 170px;
}
.site-header.is-scrolled .site-header__logo-full {
  height: 24px;
}
/* Language switcher en el header (ES / EN) — junto al CTA "Hablemos" */
.site-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.site-header__lang-link {
  display: inline-block;
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-radius: 4px;
  transition: color 200ms ease;
}
.site-header__lang-link.is-active {
  color: #fff;
}
.site-header__lang-link:hover {
  color: var(--c-red);
}
.site-header__lang-link:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
/* Solid scroll-state: invertir colores para legibilidad sobre fondo blanco */
.site-header.is-scrolled .site-header__lang-link {
  color: rgba(26, 26, 36, 0.55);
}
.site-header.is-scrolled .site-header__lang-link.is-active {
  color: #1A1A24;
}
@media (max-width: 1024px) {
  /* En móvil el lang switcher pasa al menú colapsable; ocultarlo del header
     inline para no chocar con el burger. Aparecerá dentro del nav móvil. */
  .site-header__lang { display: none; }
  .site-header__nav .site-header__lang { display: inline-flex; margin-top: 24px; }
}

.site-header.is-scrolled .site-header__logo:hover .site-header__logo-mark,
.site-header.is-scrolled .site-header__logo:focus-visible .site-header__logo-mark {
  transform: translate(-12px, -4px) scale(0.18) rotate(-140deg);
}
@media (prefers-reduced-motion: reduce) {
  .site-header__logo-mark,
  .site-header__logo-full {
    transition: none !important;
    transform: none !important;
  }
  .site-header__logo-mask {
    overflow: visible;
  }
  .site-header__logo:hover .site-header__logo-mark,
  .site-header__logo:focus-visible .site-header__logo-mark {
    transform: none !important;
  }
  .site-header__logo:hover .site-header__logo-full,
  .site-header__logo:focus-visible .site-header__logo-full {
    transform: none !important;
  }
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.site-header__nav a {
  color: var(--c-text-light);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}
.site-header__nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--c-red);
  transition: width .3s cubic-bezier(.25, 1, .5, 1);
}
.site-header__nav a:hover::after {
  width: 100%;
}
.site-header__cta {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--c-red);
  color: var(--c-text-light);
  background: transparent;
  padding: 10px 26px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.site-header__cta:hover {
  background: var(--c-red);
  color: var(--c-white);
}
.site-header__cta--mobile {
  display: none;
}
/* Enlace al portal de autoría — utility link (pill glass) junto al CTA */
.site-header__portal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--c-text-light);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s, background-color .25s, color .25s;
}
.site-header__portal-icon {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform .25s cubic-bezier(.25, 1, .5, 1);
}
.site-header__portal:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.site-header__portal:hover .site-header__portal-icon {
  transform: translateX(2px);
  opacity: 1;
}
.site-header__portal:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
.site-header__portal--mobile { display: none; }
/* Agrupa "Iniciar sesión" + "Hablemos" juntos al extremo derecho del header */
.site-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.site-header__burger {
  display: none;
  background: transparent;
  border: 0;
  color: var(--c-text-light);
  cursor: pointer;
  padding: 8px;
}
.site-header__burger .burger-close { display: none; }
.site-header__burger[aria-expanded="true"] .burger-open { display: none; }
.site-header__burger[aria-expanded="true"] .burger-close { display: block; }

@media (max-width: 1024px) {
  /* Mobile: chevron centrado, burger a la derecha. position:absolute en el logo
     para que la flecha quede en el eje horizontal del viewport.
     min-height en el inner garantiza que el header sea suficientemente alto
     para contener el chevron sin recortes en la parte superior. */
  .site-header__inner {
    position: relative;
    justify-content: flex-end;
    min-height: 64px;
  }
  .site-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 60px;
    width: 60px;
    justify-content: center;
  }
  .site-header__logo-mark {
    width: 48px;
    height: 48px;
  }
  /* Mobile: deshabilitar animación del chevron en hover/focus/tap.
     Mantener siempre el estado de reposo (chevron rotado -90°, wordmark oculto). */
  .site-header__logo:hover .site-header__logo-mark,
  .site-header__logo:focus-visible .site-header__logo-mark,
  .site-header__logo:active .site-header__logo-mark {
    transform: rotate(-90deg) !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .site-header__logo:hover .site-header__logo-full,
  .site-header__logo:focus-visible .site-header__logo-full,
  .site-header__logo:active .site-header__logo-full {
    transform: translateY(100%) !important;
    transition: none !important;
  }
  .site-header__burger { display: inline-flex; order: 3; }
  .site-header__cta { display: none; }
  .site-header__nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 17, 42, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    padding: 32px 24px;
    gap: 0;
    overflow-y: auto;
  }
  .site-header__nav[data-open="true"] { display: flex; }
  .site-header__nav a {
    padding: 18px 0;
    font-size: 22px;
    border-bottom: 1px solid var(--c-navy-border);
  }
  .site-header__cta--mobile {
    display: inline-flex !important;
    margin-top: 24px;
    background: var(--c-red);
    color: var(--c-white);
    padding: 14px 28px;
    border: 0;
    text-align: center;
    justify-content: center;
    font-weight: 600;
  }
  .site-header__cta--mobile::after { display: none !important; }
  .site-header__actions { display: none; }
  .site-header__portal { display: none; }
  .site-header__portal--mobile {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    font-size: 22px;
    color: var(--c-text-light);
    text-decoration: none;
    border-bottom: 1px solid var(--c-navy-border);
  }
  .site-header__portal--mobile .site-header__portal-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
  }
}

/* ==============================
   HERO (PASO 3)
   ============================== */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 176px 80px 56px;
  background: var(--c-navy);
  position: relative;
  overflow: hidden;
  /* width auto = full parent width — el parent (wp-block-group) ya es full-viewport
     en WP 6.6+. Removido el escape `100vw + calc(50% - 50vw)` porque generaba
     overflow asimétrico de 160px en desktop con padding right recortado. */
}
.hero__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin: 0 auto 56px;
  width: 100%;
  max-width: var(--container);
}
/* Eyebrow + CTAs alineados al mismo container que el row, para que el bloque
   completo (eyebrow → row → CTAs) respire simétricamente cuando el viewport
   excede --container (1400px). Sin afectar paddings ni dimensiones verticales. */
.hero > .eyebrow,
.hero__ctas {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
/* min-width: 0 fuerza al grid a permitir que las columnas se encojan
   por debajo del min-content de su contenido (sin esto, el título
   gigante empuja la columna del subtitle fuera del viewport). */
.hero__row > * {
  min-width: 0;
}
.hero__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  padding-top: 14px;
}
.hero__aside .eyebrow {
  margin-bottom: 0;
}
.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(158,51,57,0.18) 1.2px, transparent 1.2px);
  background-size: 40px 40px;
  pointer-events: none;
  opacity: .7;
}
.hero__bg-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,39,56,0.18) 0%, transparent 70%);
  pointer-events: none;
}
/* Eliminar gaps 16px que WordPress aplica automáticamente entre top-level blocks
   via `:root :where(.is-layout-constrained) > * { margin-block-start: ... }`.
   Esa regla WP-core se inyecta DESPUÉS de style.css en cascade — necesita !important
   para ser sobrescrita. Visible como líneas claras de body bg entre secciones con
   distinto bg color (ej. hero navy → insights navy-más-oscuro). */
.wp-site-blocks > main.wp-block-group { margin-top: 0 !important; margin-block-start: 0 !important; }
.hero,
.rnv-insights,
.services-section,
.metrics-section,
.industries-section,
.case-section,
.rnv-careers,
.rnv-news,
.cta-final,
.site-footer {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
/* HERO — Ambient background video. Opacity 0.55, soft-light blend.
   Stack: video (z=0) → bg-grid/glow/shape (z=1) → contenido (z=2). */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-color: var(--c-navy);
  will-change: opacity;
  transform: translateZ(0);
}
.hero__bg-grid,
.hero__bg-glow { z-index: 1; }

/* Bottom fade-out: el video + grid + glow del hero crean una textura visible
   hasta el borde inferior; cuando la sección siguiente (services) empieza con
   navy plano, se nota una línea horizontal en el join. Este pseudo-element
   pinta un gradient transparent → --c-navy sólido en los últimos 160px del hero
   para que el bottom edge sea pure navy (matching services) y la transición
   sea invisible. z-index entre el grid (1) y el contenido (2). */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 16vh, 200px);
  background: linear-gradient(to bottom, transparent 0%, var(--c-navy) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero__row,
.hero > .eyebrow,
.hero__ctas { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg-video { display: none; }
  .hero {
    background-image: url('/wp-content/themes/rinnovo/assets/videos/hero-ambient-poster.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
  }
}
@media (prefers-reduced-data: reduce) {
  .hero__bg-video { display: none; }
}
@media (max-width: 768px) { .hero__bg-video { opacity: 0.42; } }
@media (max-width: 480px) { .hero__bg-video { opacity: 0.36; } }

/* HERO — toggle pause/play del video, estilo Accenture (bottom-left, circular, sutil). */
.hero__video-toggle {
  position: absolute;
  bottom: 32px;
  left: 80px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--c-text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 220ms ease-out, border-color 220ms ease-out, transform 220ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.hero__video-toggle:hover,
.hero__video-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.08);
  outline: none;
}
.hero__video-toggle-icon { display: block; }
.hero__video-toggle-icon--play { display: none; }
.hero__video-toggle[aria-pressed="true"] .hero__video-toggle-icon--pause { display: none; }
.hero__video-toggle[aria-pressed="true"] .hero__video-toggle-icon--play { display: block; }

@media (max-width: 1280px) {
  .hero__video-toggle { left: 48px; }
}
@media (max-width: 768px) {
  /* Tap target ≥ 44×44 (WCAG 2.5.5 AAA) en mobile */
  .hero__video-toggle {
    left: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
  }
  .hero__video-toggle-icon { width: 14px; height: 14px; }
}
/* prefers-reduced-motion + prefers-reduced-data: ambos ocultan video y botón */
@media (prefers-reduced-motion: reduce) {
  .hero__video-toggle { display: none; }
}
@media (prefers-reduced-data: reduce) {
  .hero__video-toggle { display: none; }
}
.hero > .eyebrow {
  position: relative;
  z-index: 2;
}
.hero__title {
  font-family: var(--f-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.03em;
  color: var(--c-text-light);
  margin: 0;
  /* No hyphens — wrapping debe ocurrir solo entre palabras, nunca dentro de una. */
  hyphens: manual;
  word-break: normal;
  overflow-wrap: normal;
}
.hero__title-line {
  display: block;
}
.hero__title-line--right {
  text-align: right;
  /* Curva fluida propia (no `em` del padre) para que "Tecnología que transforma."
     quepa siempre en 1 línea dentro de la columna izquierda del grid 1.2fr/1fr,
     incluyendo zoom 110% (viewport CSS efectivo ~1465). Sin saltos por breakpoint. */
  font-size: clamp(40px, 3.0vw + 5px, 64px);
}
/* Chevron de marca reemplazando una letra del título — homenaje al
   patrón Accenture (REIN>ENTED). Tamaño relativo al em del título. */
.hero__arrow {
  display: inline-block;
  /* +10% sobre tamaño previo (0.58 × 0.55 → 0.64 × 0.61) para más presencia visual. */
  width: 0.64em;
  height: 0.61em;
  margin: 0 0.04em;
  /* Bottom-aligned a la baseline de la palabra "transforma":
     el bottom del chevron coincide con el baseline del texto. */
  vertical-align: baseline;
  background: url('/wp-content/themes/rinnovo/assets/images/chevron-red.svg') no-repeat center / contain;
  /* Rotación -90° → chevron apunta hacia arriba (^), simulando el ápice
     de la letra "A". transform-origin center para giro limpio. */
  transform: rotate(-90deg);
  transform-origin: center;
}
/* Mantiene "transforma" (con chevron dentro) como una sola unidad
   indivisible — evita que el wrap parta la palabra. */
.hero__nobreak {
  white-space: nowrap;
}
.hero__arrow--end {
  margin-left: 0.18em;
  margin-right: 0;
  vertical-align: -0.04em;
}
.hero-highlight {
  color: var(--c-red);
}
.hero__subtitle {
  font-family: var(--f-body);
  font-size: clamp(15px, 0.4vw + 13px, 18px);
  color: var(--c-text-dim);
  line-height: 1.65;
  margin: 0;
  max-width: 480px;
}
/* "Mira lo que hacemos" — link CTA hacia /servicios/, con cuadrado rojo + flecha. */
.hero__see-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  color: var(--c-text-light);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color 200ms ease-out, transform 200ms ease-out;
}
.hero__see-more-text {
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms cubic-bezier(.16, 1, .3, 1);
}
.hero__see-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--c-red);
  color: var(--c-white);
  flex-shrink: 0;
  transition:
    background 200ms ease-out,
    transform 280ms cubic-bezier(.16, 1, .3, 1);
}
.hero__see-more:hover .hero__see-more-icon,
.hero__see-more:focus-visible .hero__see-more-icon {
  background: var(--c-red-hover, #FF4451);
  transform: translateX(4px);
}
.hero__see-more:hover .hero__see-more-text,
.hero__see-more:focus-visible .hero__see-more-text {
  background-size: 100% 1.5px;
}

/* ── Hero video card "floating" — vive en hero__aside debajo del see-more ──
   Glass treatment con sombra navy + tinte rojo brand, float loop sutil 9s.
   Performance: preload=metadata + 1280x720 (~5MB webm/mp4) + poster JPG. */
.hero__video-card {
  position: relative;
  margin-top: clamp(24px, 3vw, 40px);
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    0 8px 24px -8px rgba(158, 51, 57, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateZ(0);
  animation: rnv-hero-video-float 9s ease-in-out infinite;
  transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 600ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.hero__video-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 32px 70px -22px rgba(0, 0, 0, 0.65),
    0 14px 36px -10px rgba(158, 51, 57, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hero__video-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* Glow overlay sutil rojo brand en top edge — refuerza el "floating" */
.hero__video-card__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(158, 51, 57, 0.16) 0%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.7;
  transition: opacity 500ms ease;
}
.hero__video-card:hover .hero__video-card__glow { opacity: 1; }

@keyframes rnv-hero-video-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video-card { animation: none !important; }
}

/* Sound toggle button — glass pill bottom-right del card */
.hero__video-card__sound {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(10, 10, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
              transform 200ms ease, box-shadow 200ms ease;
}
.hero__video-card__sound:hover {
  background: rgba(158, 51, 57, 0.7);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(158, 51, 57, 0.4);
}
.hero__video-card__sound:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.hero__video-card__sound-icon {
  display: block;
  pointer-events: none;
}
.hero__video-card__sound-icon--on { display: none; }
.hero__video-card.is-unmuted .hero__video-card__sound-icon--muted { display: none; }
.hero__video-card.is-unmuted .hero__video-card__sound-icon--on { display: block; }

/* Caption "60 segundos con Rinnovo" — link discreto debajo del video card */
.hero__video-card__caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 200ms ease, gap 200ms ease;
}
.hero__video-card__caption svg {
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.5, 0, 0.2, 1);
}
.hero__video-card__caption:hover,
.hero__video-card__caption:focus-visible {
  color: var(--c-red);
  outline: none;
}
.hero__video-card__caption:hover svg,
.hero__video-card__caption:focus-visible svg {
  transform: translateX(3px);
}

/* ── Hero stats strip — métricas above-the-fold para trust signals B2B ──
   Fila de 4 cifras + label entre hero__row y hero__ctas. Tipografía display
   pequeña que valida sin competir con el H1. */
.hero__stats {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 clamp(24px, 3vw, 36px);
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
}
.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  line-height: 1;
}
.hero__stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.hero__stat-num {
  font-family: var(--f-display, var(--f-body));
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 6px;
}
.hero__stat-label {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .hero__stats {
    gap: 18px;
    margin: 28px 0 24px;
  }
  .hero__stat {
    padding-left: 14px;
  }
  .hero__stat-num {
    font-size: 20px;
  }
  .hero__stat-label {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}

/* Mobile: full width, menos margen, border-radius más pequeño */
@media (max-width: 900px) {
  .hero__video-card {
    max-width: 100%;
    margin-top: 28px;
    border-radius: 14px;
  }
  .hero__video-card__sound {
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
  }
}

/* ==============================
   INSIGHTS GRID — Accenture-inspired tile grid
   curve: cubic-bezier(0.85, 0, 0, 1) | duration: 550ms
   ============================== */
.rnv-insights {
  position: relative;
  background: #0A0A1A;
  padding: clamp(56px, 6vw, 96px) 80px clamp(80px, 10vw, 120px);
  overflow: hidden;
}
.rnv-insights__inner {
  max-width: 1400px;
  margin: 0 auto;
}
.rnv-insights__header {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(48px, 6vw, 88px);
  max-width: 760px;
}
.rnv-insights__heading {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-text-light);
  margin: 0;
}
.rnv-insights__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* Card base */
.rnv-insights__card {
  position: relative;
  aspect-ratio: 331 / 509;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--c-navy-800);
  transition: scale 550ms cubic-bezier(0.85, 0, 0, 1);
  transform-origin: center;
  isolation: isolate;
}
.rnv-insights__card:hover,
.rnv-insights__card:focus-visible {
  scale: 1.04;
  outline: none;
  z-index: 5;
}
.rnv-insights__card-label {
  position: absolute;
  top: 28px;
  left: 26px;
  z-index: 4;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rnv-insights__card-title {
  position: absolute;
  top: 64px;
  left: 26px;
  right: 26px;
  z-index: 4;
  font-family: var(--f-display);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.rnv-insights__card-visual {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  z-index: 1;
  pointer-events: none;
}
.rnv-insights__card-visual svg,
.rnv-insights__card-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Variant: light card with line-art */
.rnv-insights__card--light {
  background: #F1F1EF;
  color: #1A1A24;
}
.rnv-insights__card--light .rnv-insights__card-visual svg path,
.rnv-insights__card--light .rnv-insights__card-visual svg circle,
.rnv-insights__card--light .rnv-insights__card-visual svg line,
.rnv-insights__card--light .rnv-insights__card-visual svg rect,
.rnv-insights__card--light .rnv-insights__card-visual svg polyline,
.rnv-insights__card--light .rnv-insights__card-visual svg polygon {
  stroke: #1A1A24;
  stroke-width: 1.2;
  fill: none;
}
/* Variant: dark photo (full-bleed bg + overlay) */
.rnv-insights__card--photo {
  color: #FFFFFF;
}
.rnv-insights__card--photo .rnv-insights__card-visual {
  inset: 0;
  height: 100%;
}
.rnv-insights__card--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,26,0.85) 0%, rgba(10,10,26,0.5) 30%, rgba(10,10,26,0.1) 50%, rgba(10,10,26,0.4) 100%);
  transition: opacity 550ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-insights__card--photo:hover::before {
  opacity: 0.85;
}
.rnv-insights__card--photo .rnv-insights__card-visual {
  transition: filter 550ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-insights__card--photo:hover .rnv-insights__card-visual {
  filter: brightness(0.95) saturate(1.08);
}
/* Variant: dark abstract (gradient art) */
.rnv-insights__card--abstract {
  color: #FFFFFF;
}
.rnv-insights__card--abstract .rnv-insights__card-visual {
  inset: 0;
  height: 100%;
}
.rnv-insights__card--abstract::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,26,0.8) 0%, rgba(10,10,26,0.45) 28%, rgba(10,10,26,0) 50%);
  transition: opacity 550ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-insights__card--abstract:hover::before {
  opacity: 0.7;
}
/* Mock visuals — gradients para abstract cards */
.rnv-insights__art-burgundy {
  background:
    radial-gradient(ellipse 60% 40% at 30% 70%, rgba(158,51,57,0.85) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 70% 30%, rgba(88,39,56,0.95) 0%, transparent 65%),
    linear-gradient(135deg, #10112A 0%, #2A1530 100%);
}
.rnv-insights__art-flow {
  background:
    radial-gradient(circle at 20% 80%, rgba(158,51,57,0.55) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,68,81,0.35) 0%, transparent 55%),
    linear-gradient(160deg, #0A0A1F 0%, #1F1430 60%, #3A1B40 100%);
}
.rnv-insights__art-noise {
  background:
    conic-gradient(from 220deg at 70% 50%, #582738 0deg, #9E3339 60deg, #10112A 180deg, #582738 360deg),
    linear-gradient(180deg, #10112A 0%, #2A1830 100%);
  background-blend-mode: overlay, normal;
}
.rnv-insights__art-photo {
  background:
    linear-gradient(135deg, rgba(88,39,56,0.6) 0%, rgba(16,17,42,0.85) 60%),
    radial-gradient(circle at 50% 70%, #4A2540 0%, #10112A 70%);
}
.rnv-insights__art-photo-2 {
  background:
    radial-gradient(ellipse at 40% 60%, rgba(255,68,81,0.25) 0%, transparent 50%),
    linear-gradient(180deg, #10112A 0%, #2A1530 100%);
}
/* Sliding-content panel — Accenture-style. Slides up desde abajo cubriendo
   el visual al hover; contiene description + Expand CTA. */
.rnv-insights__card-sliding {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 26px 24px;
  translate: 0 100%;
  transition: translate 550ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-insights__card:hover .rnv-insights__card-sliding,
.rnv-insights__card:focus-visible .rnv-insights__card-sliding {
  translate: 0 0;
}
.rnv-insights__card--light .rnv-insights__card-sliding { background: #F1F1EF; color: #1A1A24; }
.rnv-insights__card--photo .rnv-insights__card-sliding,
.rnv-insights__card--abstract .rnv-insights__card-sliding { background: #0A0A1A; color: #FFFFFF; }

.rnv-insights__card-desc {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  margin: 0;
  color: inherit;
}
/* Expand CTA — ahora vive dentro del sliding panel */
.rnv-insights__card-expand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  align-self: flex-start;
}
.rnv-insights__card-expand-text {
  position: relative;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 480ms cubic-bezier(0.85, 0, 0, 1) 80ms;
}
.rnv-insights__card:hover .rnv-insights__card-expand-text {
  background-size: 100% 1.5px;
}
.rnv-insights__card-expand-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--c-red);
  color: #FFFFFF;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rnv-insights__card,
  .rnv-insights__card *,
  .rnv-insights__card::before,
  .rnv-insights__card-expand-text {
    transition: none !important;
    scale: none !important;
    translate: 0 0 !important;
  }
  .rnv-insights__card-sliding {
    translate: 0 0 !important;
  }
}
@media (max-width: 1280px) {
  .rnv-insights { padding: clamp(80px, 10vw, 120px) 48px; }
  .rnv-insights__grid { grid-template-columns: repeat(3, 1fr); }
  .rnv-insights__card:nth-child(8) { display: none; }
}
/* Mobile/tablet: convert grid → carousel horizontal con scroll-snap + progress bar */
@media (max-width: 900px) {
  .rnv-insights { padding: 64px 0; }
  .rnv-insights__inner { padding: 0; max-width: none; }
  .rnv-insights__header { padding: 0 24px; max-width: none; margin-bottom: 32px; }
  .rnv-insights__heading { font-size: clamp(28px, 6.5vw, 40px); }
  .rnv-insights__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding: 0 24px;
  }
  .rnv-insights__grid::-webkit-scrollbar { display: none; }
  .rnv-insights__card {
    flex: 0 0 76vw;
    max-width: 340px;
    aspect-ratio: 331 / 509;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .rnv-insights__card:nth-child(8) { display: block; }
  .rnv-insights__card:hover,
  .rnv-insights__card:focus-visible { scale: 1; }
  .rnv-insights__card-sliding { display: none; }
  /* Progress bar */
  .rnv-insights__progress {
    margin: 28px 24px 0;
    height: 3px;
    background: rgba(255,255,255,0.12);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
  }
  .rnv-insights__progress-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25%;
    background: rgba(255,255,255,0.7);
    border-radius: 2px;
    will-change: left, width;
  }
}
@media (min-width: 901px) {
  .rnv-insights__progress { display: none; }
}
@media (max-width: 600px) {
  .rnv-insights__card { aspect-ratio: 16 / 22; flex-basis: 80vw; }
  .rnv-insights__card-title { font-size: 19px; top: 56px; }
}
.hero__ctas {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 60px; /* Reserva espacio para el botón de pausa del video (bottom-left absoluto) */
}
@media (max-width: 768px) {
  .hero__ctas { margin-bottom: 72px; } /* botón mobile es 44px + breathing room */
}
/* Decoración geométrica derecha — solo bg, no en grid */
.hero-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.hero-shape--a {
  width: 320px;
  height: 420px;
  border: 1.5px solid rgba(158, 51, 57, 0.30);
  top: 48%;
  right: -60px;
  animation: float-a 8s ease-in-out infinite;
}
.hero-shape--b {
  width: 240px;
  height: 320px;
  border: 1px solid rgba(158, 51, 57, 0.20);
  top: 56%;
  right: 20px;
  animation: float-b 11s ease-in-out infinite reverse;
}
.hero-shape--c {
  width: 64px;
  height: 64px;
  background: var(--c-red-dark);
  opacity: .55;
  top: 50%;
  right: 280px;
  animation: float-c 6s ease-in-out infinite;
}
/* Amplitudes 2-3x sobre el original + componente translateX para que el motion
   se perciba como "flotación" en lugar de "respiración" vertical pura.
   Duraciones coprimas (6s/8s/11s) evitan que las tres shapes sincronicen visualmente. */
@keyframes float-a {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  50%     { transform: translate(-8px, -32px) rotate(2deg); }
}
@keyframes float-b {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  50%     { transform: translate(6px, 22px) rotate(-2.5deg); }
}
@keyframes float-c {
  0%,100% { transform: translate(0, 0); }
  50%     { transform: translate(-6px, -22px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shape { animation: none !important; }
}
/* Shapes visibles desde 901px — antes se ocultaban en <1024px, lo que
   las hacía desaparecer en laptops Windows con viewport efectivo ~1280
   tras descontar barras del browser. */
@media (max-width: 900px) {
  .hero-shape { display: none; }
}

/* ==============================
   EYEBROW + BUTTON system (compartido)
   ============================== */
.eyebrow {
  font-family: var(--f-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 32px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--c-red);
}
.eyebrow--center {
  display: flex;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 16px 36px;
  border: 0;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.btn--primary {
  background: var(--c-red);
  color: var(--c-white);
}
.btn--primary:hover {
  background: var(--c-red-dark);
  color: var(--c-white);
  transform: translateY(-2px);
}
.btn--secondary {
  background: transparent;
  color: var(--c-text-light);
  border: 1.5px solid var(--c-red-border);
  padding: 15px 36px;
  font-weight: 500;
}
.btn--secondary:hover {
  border-color: var(--c-red);
  color: var(--c-white);
}

/* ==============================
   HERO scroll-driven cinematic transitions
   Title + chevron + CTAs deslizan desde/hacia la izquierda.
   Aside (eyebrow + descripción) desliza desde/hacia la derecha.
   Bidireccional vía animation-timeline: scroll() — sin JS.
   Modern browsers: Chrome 115+, Safari 18+, Edge 115+, Firefox (flag).
   ============================== */
@supports (animation-timeline: scroll()) {
  @keyframes rnv-hero-slide-left {
    /* scrollY=0 → estado natural (visible) */
    from {
      opacity: 1;
      transform: translateX(0);
    }
    /* scrollY > umbral → fuera de vista hacia la izquierda */
    to {
      opacity: 0;
      transform: translateX(-160px);
    }
  }
  @keyframes rnv-hero-slide-right {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(160px);
    }
  }

  /* Título + chevron (animan juntos por ser el chevron child del título)
     + CTAs primario/secundario → izquierda. */
  .hero__title,
  .hero__ctas {
    animation: rnv-hero-slide-left linear both;
    animation-timeline: scroll(root);
    /* Animación arranca a 4vh de scroll (un toque de movimiento al cargar
       no se nota), completa fade-out a 75vh (el resto del hero todavía
       da contexto). cubic-bezier no aplica a scroll-timelines, pero el
       linear con offset largo crea sensación de cinemática suave. */
    animation-range: 4vh 75vh;
    will-change: opacity, transform;
  }

  /* Aside (eyebrow + descripción) → derecha. */
  .hero__aside {
    animation: rnv-hero-slide-right linear both;
    animation-timeline: scroll(root);
    animation-range: 4vh 75vh;
    will-change: opacity, transform;
  }
}

/* prefers-reduced-motion: respetar preferencia del usuario, sin movimiento. */
@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__ctas,
  .hero__aside {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==============================
   PASO 4 — Partners strip (marquee)
   ============================== */
.partners-strip {
  background: var(--c-navy-mid);
  border-top: 1px solid var(--c-navy-border);
  border-bottom: 1px solid var(--c-navy-border);
  padding: 36px 0;
  overflow: hidden;
}
.partners-strip__eyebrow {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-align: center;
  margin: 0 0 28px;
}
.partners-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee-x 30s linear infinite;
  align-items: center;
}
.partners-strip:hover .partners-track {
  animation-play-state: paused;
}
.partner-logo {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text-light);
  opacity: .35;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .3s ease;
}
.partner-logo:hover { opacity: .85; }
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none !important; }
}

/* ==============================
   PASO 5 — Services
   ============================== */
.services-section {
  /* Mismo navy del hero/body (--c-navy #10112A) para que no se note un corte
     visible entre el hero y "Cómo trabajamos". El bg #0A0A1A previo era ~3
     shades más oscuro y dejaba una línea horizontal visible en el join. */
  background: var(--c-navy);
  color: var(--c-text-light);
  padding: var(--section-pad) 80px;
}
.services-section__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.services-section .eyebrow { color: var(--c-red); }
.services-section h2 {
  font-family: var(--f-display);
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--c-text-light);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 820px;
  margin: 16px 0 64px;
}
/* Layout bento 3+2 centrado: 6 cols grid + placement explícito.
   Row 1: cards 1-3 spanning 2 cols cada uno (2+2+2 = 6).
   Row 2: cards 4-5 centradas, cada una 2 cols (col 1 y col 6 quedan vacías).
   Whitespace gap (no bg de grid) → empty cells de row 2 quedan invisibles
   sobre el section bg blanco. Border sutil en cards para delineación. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  background: transparent;
}
.service-card:nth-child(1) { grid-column: 1 / 3; }
.service-card:nth-child(2) { grid-column: 3 / 5; }
.service-card:nth-child(3) { grid-column: 5 / 7; }
.service-card:nth-child(4) { grid-column: 2 / 4; }
.service-card:nth-child(5) { grid-column: 4 / 6; }
.service-card__desc {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-dim);
  margin: 0 0 20px;
}
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(n) { grid-column: auto; }
  /* La card 5 sola en row final → la centramos haciendo span de 2 cols */
  .service-card:nth-child(5) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card:nth-child(5) { max-width: none; }
}
.service-card {
  background: var(--c-navy-card);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-navy-border);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover { border-color: rgba(255, 255, 255, 0.14); }
.service-card::before {
  content: attr(data-num);
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-size: 88px;
  font-weight: 800;
  font-family: var(--f-display);
  color: var(--c-red);
  opacity: .05;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--c-red);
  transition: width .4s cubic-bezier(.25, 1, .5, 1);
}
.service-card:hover::after { width: 100%; }
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  z-index: 1;
}
.service-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
  color: var(--c-red);
}
.service-card h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text-light);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.service-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.service-card li {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-text-dim);
  line-height: 1.65;
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.service-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-red);
}
.service-card__link {
  color: var(--c-text-light);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .01em;
  transition: color .2s;
}
.service-card__link::after {
  content: '→';
  transition: transform .25s;
}
.service-card__link:hover { color: var(--c-red); }
.service-card__link:hover::after { transform: translateX(5px); }

/* ==============================
   PASO 5c — Services Stack (RNV-117) — replaces RNV-103/104
   Patrón nmore.com puro + creatividad firstinternet + sensibility 2026.
   Stacked cards pinned con sticky positioning, cada card 16:10 con
   visual abstracto SVG a la derecha. Editorial corporativo cinemático.
   ============================== */
.rnv-services-stack { position: relative; }
.rnv-services-stack__header {
  max-width: var(--container);
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding: 0 clamp(24px, 4vw, 80px);
}
.rnv-services-stack__heading {
  font-family: var(--f-display);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-text-light);
  max-width: 820px;
  margin: 16px 0 0;
}
/* Progress dots — fixed left rail */
.rnv-services-stack__nav {
  position: fixed;
  left: clamp(16px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-services-stack.is-in-view .rnv-services-stack__nav {
  opacity: 1;
  pointer-events: auto;
}
.svc-dot {
  position: relative;
  display: flex;
  align-items: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  text-decoration: none;
  transition:
    width 320ms cubic-bezier(0.85, 0, 0, 1),
    background-color 320ms cubic-bezier(0.85, 0, 0, 1),
    border-radius 320ms cubic-bezier(0.85, 0, 0, 1);
}
.svc-dot.is-active {
  width: 36px;
  background: var(--c-red);
  border-radius: 100px;
}
.svc-dot:hover { background: rgba(255, 255, 255, 0.55); }
.svc-dot.is-active:hover { background: var(--c-red); }
.svc-dot span {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translate(-6px, -50%);
  white-space: nowrap;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  opacity: 0;
  transition: opacity 240ms ease, transform 240ms ease, color 240ms ease;
  pointer-events: none;
}
.svc-dot:hover span,
.svc-dot.is-active span {
  opacity: 1;
  transform: translate(0, -50%);
  color: var(--c-text-light);
}

/* Stack of cards — sticky positioning crea el "stacking" effect */
.rnv-services-stack__cards {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  /* Cero padding-bottom: el último card cierra al borde de la sección sin franja
     visible del bg. La sección siguiente del documento maneja su propio spacing. */
  padding: 0 clamp(24px, 4vw, 80px) 0;
}

.svc-card {
  position: sticky;
  top: clamp(72px, 10vh, 110px);
  /* Border-radius mínimo: durante la transición del sticky-stack, los rounded
     corners del card N+1 al subir sobre el N+0 dejan ver el bg de la sección
     en las esquinas. Radius pequeño preserva el lenguaje visual pero hace el
     cutout casi invisible durante el scroll. */
  border-radius: clamp(12px, 1.2vw, 16px);
  overflow: hidden;
  /* Cero gap entre cards — el sticky-stack debe sentirse continuo */
  margin-bottom: 0;
  isolation: isolate;
  /* Card llena el viewport desde el sticky top hasta el bottom: cuando está
     pinneada, NO queda franja del bg de la sección debajo del card. El siguiente
     card emerge desde abajo del viewport overlay-ing seamlessly el anterior. */
  min-height: calc(100svh - clamp(72px, 10vh, 110px));
  /* Flex column → permite que .svc-card__inner stretchee con flex:1 hasta
     llenar la altura del card. Sin esto, height:100% del inner no resuelve
     contra min-height del padre (quirk CSS) y el inner queda content-sized,
     dejando un hueco vacío al pie del card. */
  display: flex;
  flex-direction: column;
}

/* Perf: pausar transition de scale en cards no visibles para evitar reflow */
.svc-card:not(.is-visible) .svc-card__media-img,
.svc-card:not(.is-visible) .svc-card__media-video {
  transition: none;
}

/* Backgrounds únicos por servicio — sutiles texture overlays via ::before */
.svc-card--consultoria { background: #0A0A1A; }
.svc-card--consultoria::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 100%, rgba(227, 30, 44, 0.10), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.03), transparent 50%);
}
.svc-card--soporte { background: #050511; }
.svc-card--soporte::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 70% 50%, rgba(227, 30, 44, 0.16), transparent 55%);
}
.svc-card--manpower { background: #14152F; }
.svc-card--manpower::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.7;
}
.svc-card--educacion {
  background:
    linear-gradient(135deg, #0A0A1A 30%, #361A28 100%);
}
.svc-card--educacion::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 90% 90%, rgba(255, 68, 81, 0.18), transparent 50%);
}
.svc-card--distribucion { background: #050511; }
.svc-card--distribucion::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(227, 30, 44, 0.14), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.025), transparent 50%);
}

/* === Layout interno: 2-col split limpio (Linear-style) ===
   Texto a la izquierda + imagen contenida (con border-radius) a la derecha.
   La imagen es UN ELEMENTO del card, NO background con gradient overlay. */
.svc-card__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5vw, 72px);
  padding: clamp(40px, 5vw, 64px);
  /* flex:1 → stretch hasta llenar el card (que es flex column) */
  flex: 1;
  align-items: center;
  max-width: 100%;
}

.svc-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* === Media: imagen contenida con border-radius (Linear-style panel) === */
.svc-card__media {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.svc-card__media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: clamp(16px, 1.6vw, 24px);
  overflow: hidden;
  background: var(--c-navy-mid, #14152F);
  /* Inner ring sutil + drop shadow para definir el panel sin sentirlo "pegado" */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 30px 80px -20px rgba(0, 0, 0, 0.55);
}
.svc-card__media-img,
.svc-card__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Tratamiento sutil: solo brightness/contrast ajustada, SIN duotone agresivo.
     La foto/video se ve natural, integrada al dark theme del card. */
  filter: brightness(0.86) contrast(1.04) saturate(0.88);
  /* Slow zoom único cuando card es visible (no Ken Burns infinito) */
  transform: scale(1.06);
  transition:
    transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 600ms ease;
}
.svc-card.is-visible .svc-card__media-img,
.svc-card.is-visible .svc-card__media-video {
  transform: scale(1);
}
.svc-card:hover .svc-card__media-img,
.svc-card:hover .svc-card__media-video {
  transform: scale(1.03);
  filter: brightness(0.94) contrast(1.04) saturate(0.95);
}
/* Pausar video cuando la card no está visible para ahorrar CPU/GPU.
   El JS aplica .is-visible y aquí dejamos que el browser maneje pause via CSS
   no es posible — el toggle real lo hace JS. Esta regla solo asegura layout. */
.svc-card__media-video {
  /* Removemos cualquier control nativo o estilo de default browser */
  background: transparent;
}
/* Glow sutil esquina inferior derecha (acento brand) + vignette top sutil */
.svc-card__media-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 100% 100%, rgba(227, 30, 44, 0.14) 0%, transparent 50%),
    linear-gradient(to top, transparent 75%, rgba(10, 10, 26, 0.20) 100%);
}

/* === Consultoría: video como BACKGROUND FULLBLEED de la card ===
   Override del panel contained: el video bleeds full-card; texto a la izquierda
   con gradient mask para legibilidad e integración cinematográfica. */
.svc-card--consultoria .svc-card__media,
.svc-card--soporte .svc-card__media,
.svc-card--manpower .svc-card__media,
.svc-card--educacion .svc-card__media,
.svc-card--distribucion .svc-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
}
.svc-card--consultoria .svc-card__media-frame,
.svc-card--soporte .svc-card__media-frame,
.svc-card--manpower .svc-card__media-frame,
.svc-card--educacion .svc-card__media-frame,
.svc-card--distribucion .svc-card__media-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.svc-card--consultoria .svc-card__media-video,
.svc-card--soporte .svc-card__media-video,
.svc-card--manpower .svc-card__media-video,
.svc-card--educacion .svc-card__media-video,
.svc-card--distribucion .svc-card__media-video {
  /* Más oscuro para que el texto blanco lea sin halo */
  filter: brightness(0.58) contrast(1.10) saturate(0.85);
}
.svc-card--consultoria.is-visible .svc-card__media-video,
.svc-card--soporte.is-visible .svc-card__media-video,
.svc-card--manpower.is-visible .svc-card__media-video,
.svc-card--educacion.is-visible .svc-card__media-video,
.svc-card--distribucion.is-visible .svc-card__media-video {
  transform: scale(1.02);
}
.svc-card--consultoria:hover .svc-card__media-video,
.svc-card--soporte:hover .svc-card__media-video,
.svc-card--manpower:hover .svc-card__media-video,
.svc-card--educacion:hover .svc-card__media-video,
.svc-card--distribucion:hover .svc-card__media-video {
  transform: scale(1.04);
  filter: brightness(0.66) contrast(1.10) saturate(0.92);
}
/* Mask cinematográfico: dark wash en la izquierda → video visible a la derecha
   + vignette bottom + acento brand top-right sutil */
.svc-card--consultoria .svc-card__media-glow,
.svc-card--soporte .svc-card__media-glow,
.svc-card--manpower .svc-card__media-glow,
.svc-card--educacion .svc-card__media-glow,
.svc-card--distribucion .svc-card__media-glow {
  background:
    linear-gradient(to right,
      rgba(8, 8, 22, 0.88) 0%,
      rgba(8, 8, 22, 0.74) 28%,
      rgba(8, 8, 22, 0.34) 55%,
      rgba(8, 8, 22, 0.06) 80%,
      transparent 100%),
    linear-gradient(to bottom,
      rgba(8, 8, 22, 0.12) 0%,
      transparent 32%,
      rgba(8, 8, 22, 0.38) 100%),
    radial-gradient(ellipse at 95% 6%, rgba(227, 30, 44, 0.12) 0%, transparent 45%);
}
/* Content: ocupa columna izquierda; ya no necesitamos la 2-col porque el media
   está absolute. Single col con max-width controla ancho del texto. */
.svc-card--consultoria .svc-card__inner,
.svc-card--soporte .svc-card__inner,
.svc-card--manpower .svc-card__inner,
.svc-card--educacion .svc-card__inner,
.svc-card--distribucion .svc-card__inner {
  grid-template-columns: minmax(0, 1fr);
}
.svc-card--consultoria .svc-card__content,
.svc-card--soporte .svc-card__content,
.svc-card--manpower .svc-card__content,
.svc-card--educacion .svc-card__content,
.svc-card--distribucion .svc-card__content {
  max-width: clamp(380px, 50%, 580px);
  position: relative;
  z-index: 1;
}
/* Ocultamos el ::before del texture overlay porque el video YA es el fondo */
.svc-card--consultoria::before,
.svc-card--soporte::before,
.svc-card--manpower::before,
.svc-card--educacion::before,
.svc-card--distribucion::before {
  display: none;
}

/* === ANIMACIONES SUTILES POR SERVICIO === */

/* 01 Consultoría — barras "respiran" + ring rota lento + dot pulsa */
.svc-anim-bars .svc-bar {
  transform-origin: bottom center;
  transform-box: fill-box;
  animation: svc-bar-breathe 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.svc-anim-bars .svc-bar-1 { animation-delay: 0s; }
.svc-anim-bars .svc-bar-2 { animation-delay: 0.18s; }
.svc-anim-bars .svc-bar-3 { animation-delay: 0.36s; }
.svc-anim-bars .svc-bar-4 { animation-delay: 0.54s; }
.svc-anim-bars .svc-bar-5 { animation-delay: 0.72s; }
@keyframes svc-bar-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.82); }
}
.svc-anim-ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: svc-ring-rotate 12s linear infinite;
}
@keyframes svc-ring-rotate {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}
.svc-anim-pulse-dot {
  transform-origin: center;
  transform-box: fill-box;
  animation: svc-pulse 2.4s ease-in-out infinite;
}
@keyframes svc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.5; }
}

/* 02 Soporte — pulse waves expand + LEDs blink secuencial */
.svc-anim-waves .svc-wave {
  transform-origin: 200px 200px;
  animation: svc-wave-expand 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.svc-anim-waves .svc-wave-1 { animation-delay: 0s; }
.svc-anim-waves .svc-wave-2 { animation-delay: 0.9s; }
.svc-anim-waves .svc-wave-3 { animation-delay: 1.8s; }
.svc-anim-waves .svc-wave-4 { animation-delay: 2.7s; }
@keyframes svc-wave-expand {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.3); opacity: 0; }
}
.svc-anim-core {
  transform-origin: 200px 200px;
  animation: svc-core-pulse 2.4s ease-in-out infinite;
}
@keyframes svc-core-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.svc-anim-leds .svc-led {
  animation: svc-led-blink 4s ease-in-out infinite;
}
.svc-anim-leds .svc-led-1 { animation-delay: 0s; }
.svc-anim-leds .svc-led-2 { animation-delay: 0.5s; }
.svc-anim-leds .svc-led-3 { animation-delay: 1s; }
.svc-anim-leds .svc-led-4 { animation-delay: 1.5s; }
.svc-anim-leds .svc-led-5 { animation-delay: 2s; }
.svc-anim-leds .svc-led-6 { animation-delay: 2.5s; }
.svc-anim-leds .svc-led-7 { animation-delay: 3s; }
.svc-anim-leds .svc-led-8 { animation-delay: 3.5s; }
@keyframes svc-led-blink {
  0%, 80%, 100% { opacity: 0.35; }
  40%           { opacity: 1; }
}

/* 03 Manpower — orbit ring rota + avatares flotan ligeramente */
.svc-anim-orbit {
  transform-origin: 200px 210px;
  animation: svc-orbit-rotate 28s linear infinite;
}
@keyframes svc-orbit-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.svc-anim-avatar {
  animation: svc-avatar-float 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.svc-anim-avatar-1 { animation-delay: 0s; }
.svc-anim-avatar-2 { animation-delay: 2s; }
.svc-anim-avatar-3 { animation-delay: 4s; }
@keyframes svc-avatar-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -6px); }
}

/* 04 Educación — progress ring rota + libro flota suave */
.svc-anim-progress-ring > circle:nth-child(2) {
  transform-origin: center;
  transform-box: fill-box;
  animation: svc-edu-ring 14s linear infinite;
}
@keyframes svc-edu-ring {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}
.svc-anim-book {
  animation: svc-book-float 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes svc-book-float {
  0%, 100% { transform: translate(200px, 200px) scale(1); }
  50%      { transform: translate(200px, 196px) scale(1.02); }
}

/* 05 Distribución — links pulsan secuencial + nodos emiten + partículas se mueven */
.svc-anim-mesh {
  animation: svc-mesh-fade 6s ease-in-out infinite;
}
@keyframes svc-mesh-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.svc-anim-links .svc-link {
  stroke-dasharray: 200;
  animation: svc-link-flow 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.svc-anim-links .svc-link-1 { animation-delay: 0s; }
.svc-anim-links .svc-link-2 { animation-delay: 0.4s; }
.svc-anim-links .svc-link-3 { animation-delay: 0.8s; }
.svc-anim-links .svc-link-4 { animation-delay: 1.2s; }
@keyframes svc-link-flow {
  0%   { stroke-dashoffset: 200; opacity: 0.3; }
  50%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -200; opacity: 0.3; }
}
.svc-anim-hub {
  transform-origin: 200px 200px;
  animation: svc-hub-pulse 2.6s ease-in-out infinite;
}
@keyframes svc-hub-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.svc-anim-node {
  animation: svc-node-blink 4s ease-in-out infinite;
}
.svc-anim-node-1 { animation-delay: 0s; }
.svc-anim-node-2 { animation-delay: 1s; }
.svc-anim-node-3 { animation-delay: 2s; }
.svc-anim-node-4 { animation-delay: 3s; }
@keyframes svc-node-blink {
  0%, 60%, 100% { opacity: 0.7; }
  30%           { opacity: 1; }
}
.svc-anim-particle-1 {
  animation: svc-particle-1 3.6s linear infinite;
}
.svc-anim-particle-2 {
  animation: svc-particle-2 3.6s linear infinite;
  animation-delay: 1.8s;
}
@keyframes svc-particle-1 {
  0%   { cx: 80; cy: 80; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { cx: 200; cy: 200; opacity: 0; }
}
@keyframes svc-particle-2 {
  0%   { cx: 320; cy: 320; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { cx: 200; cy: 200; opacity: 0; }
}

/* Reduced motion: pausa todas las animaciones, mantiene SVG estático */
@media (prefers-reduced-motion: reduce) {
  .svc-anim-bars .svc-bar,
  .svc-anim-ring,
  .svc-anim-pulse-dot,
  .svc-anim-waves .svc-wave,
  .svc-anim-core,
  .svc-anim-leds .svc-led,
  .svc-anim-orbit,
  .svc-anim-avatar,
  .svc-anim-progress-ring > circle:nth-child(2),
  .svc-anim-book,
  .svc-anim-mesh,
  .svc-anim-links .svc-link,
  .svc-anim-hub,
  .svc-anim-node,
  .svc-anim-particle-1,
  .svc-anim-particle-2 {
    animation: none !important;
  }
}

/* Hide legacy visual focal column */
.svc-card__visual { display: none !important; }

.svc-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* Number 01-05 — light weight gigante editorial */
.svc-card__num {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(64px, 6vw + 16px, 124px);
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--c-text-light);
  opacity: 0.92;
  margin-bottom: clamp(20px, 2.5vw, 36px);
  display: block;
}

/* Title — bold contrast con number, periodo en rojo */
.svc-card__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(42px, 4.4vw + 8px, 80px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--c-text-light);
  margin: 0 0 clamp(20px, 2.2vw, 28px);
}
.svc-card__title-word {
  display: inline-block;
  vertical-align: top;
}
.svc-card__period { color: var(--c-red); }

.svc-card__desc {
  font-family: var(--f-body);
  font-size: clamp(16px, 0.4vw + 14px, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-text-dim);
  max-width: 480px;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-light);
  text-decoration: none;
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 4px;
  margin-bottom: clamp(28px, 3vw, 40px);
  transition: color 280ms ease, gap 320ms cubic-bezier(0.85, 0, 0, 1);
}
.svc-card__cta::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-red);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.85, 0, 0, 1);
}
.svc-card__cta:hover { gap: 12px; color: var(--c-red); }
.svc-card__cta-arrow {
  transition: transform 320ms cubic-bezier(0.85, 0, 0, 1);
}
.svc-card__cta:hover .svc-card__cta-arrow {
  transform: translate(2px, -2px);
}

/* Pills — capabilities */
.svc-card__caps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-card__caps li {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-text-light);
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  transition:
    border-color 240ms cubic-bezier(0.85, 0, 0, 1),
    background-color 240ms cubic-bezier(0.85, 0, 0, 1),
    color 240ms ease;
}
.svc-card__caps li:hover {
  border-color: rgba(227, 30, 44, 0.6);
  background: rgba(227, 30, 44, 0.08);
  color: var(--c-red-soft, #FF6470);
}

/* Visual abstracto (DEPRECATED — replaced by .svc-card__pattern) */

/* === MOTION (reveal) === */
.svc-card {
  opacity: 0;
  clip-path: inset(8% 4% 0 4%);
  transition:
    opacity 800ms cubic-bezier(0.85, 0, 0, 1),
    clip-path 1000ms cubic-bezier(0.85, 0, 0, 1);
}
.svc-card.is-revealed {
  opacity: 1;
  clip-path: inset(0);
}
.svc-card__num,
.svc-card__title-word,
.svc-card__period,
.svc-card__desc,
.svc-card__cta,
.svc-card__caps li {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(0.85, 0, 0, 1),
    transform 700ms cubic-bezier(0.85, 0, 0, 1);
}
.svc-card.is-revealed .svc-card__num         { opacity: 0.92; transform: translateY(0); transition-delay: 80ms; }
.svc-card.is-revealed .svc-card__title-word:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.svc-card.is-revealed .svc-card__title-word:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.svc-card.is-revealed .svc-card__title-word:nth-of-type(3) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.svc-card.is-revealed .svc-card__period      { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.svc-card.is-revealed .svc-card__desc        { opacity: 1; transform: translateY(0); transition-delay: 380ms; }
.svc-card.is-revealed .svc-card__cta         { opacity: 1; transform: translateY(0); transition-delay: 460ms; }
.svc-card.is-revealed .svc-card__caps li:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 540ms; }
.svc-card.is-revealed .svc-card__caps li:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.svc-card.is-revealed .svc-card__caps li:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 660ms; }
.svc-card.is-revealed .svc-card__caps li:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 720ms; }
.svc-card.is-revealed .svc-card__caps li:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 780ms; }
.svc-card.is-revealed .svc-card__caps li:nth-child(n+6) { opacity: 1; transform: translateY(0); transition-delay: 840ms; }

/* Reduced motion: disable all motion */
@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card__num,
  .svc-card__title-word,
  .svc-card__period,
  .svc-card__desc,
  .svc-card__cta,
  .svc-card__caps li {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Mobile fallback: stacked cards normal flow (no sticky) */
@media (max-width: 900px) {
  .rnv-services-stack__nav { display: none; }
  /* Mobile: cards edge-to-edge — remueve padding horizontal del SECTION
     (que viene del rule global @max-width:768px con !important) Y del
     cards container, más border-radius del card para max screen utilization.
     El header de la sección preserva su propia padding interna. */
  .services-section.rnv-services-stack {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .rnv-services-stack__cards {
    padding-left: 0;
    padding-right: 0;
  }
  .svc-card {
    position: relative;
    top: auto;
    min-height: auto;
    max-height: none;
    margin-bottom: 16px;
    border-radius: 0;  /* truly edge-to-edge en mobile */
  }
  .svc-card__inner {
    max-width: 100%;
    padding: 36px 28px;
  }
  .svc-card__num { font-size: clamp(56px, 14vw, 88px); }
  .svc-card__title { font-size: clamp(36px, 9vw, 56px); }
  /* Mobile: media se mueve abajo del content (stack vertical), aspect ratio mantenido */
  .svc-card__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 28px;
  }
  .svc-card__media-frame {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
  }
  .svc-card__media-img,
  .svc-card__media-video {
    filter: brightness(0.78) contrast(1.04) saturate(0.85);
  }
  /* Cards con video fullbleed mobile: texto SOBRE el video.
     Mask vertical fuerte para legibilidad (no horizontal como desktop). */
  .svc-card--consultoria .svc-card__content,
  .svc-card--soporte .svc-card__content,
  .svc-card--manpower .svc-card__content,
  .svc-card--educacion .svc-card__content,
  .svc-card--distribucion .svc-card__content {
    max-width: 100%;
  }
  .svc-card--consultoria .svc-card__media-frame,
  .svc-card--soporte .svc-card__media-frame,
  .svc-card--manpower .svc-card__media-frame,
  .svc-card--educacion .svc-card__media-frame,
  .svc-card--distribucion .svc-card__media-frame {
    aspect-ratio: auto;
    border-radius: 0;
  }
  .svc-card--consultoria .svc-card__media-video,
  .svc-card--soporte .svc-card__media-video,
  .svc-card--manpower .svc-card__media-video,
  .svc-card--educacion .svc-card__media-video,
  .svc-card--distribucion .svc-card__media-video {
    filter: brightness(0.48) contrast(1.10) saturate(0.85);
  }
  .svc-card--consultoria .svc-card__media-glow,
  .svc-card--soporte .svc-card__media-glow,
  .svc-card--manpower .svc-card__media-glow,
  .svc-card--educacion .svc-card__media-glow,
  .svc-card--distribucion .svc-card__media-glow {
    background:
      linear-gradient(to bottom,
        rgba(8, 8, 22, 0.78) 0%,
        rgba(8, 8, 22, 0.55) 35%,
        rgba(8, 8, 22, 0.40) 65%,
        rgba(8, 8, 22, 0.62) 100%),
      radial-gradient(ellipse at 90% 8%, rgba(227, 30, 44, 0.10) 0%, transparent 50%);
  }
}

/* Hide legacy services-scroll rules below this point — they target a DOM that no longer exists */

/* ==============================
   PASO 5b LEGACY — Services Scroll (DEPRECATED RNV-117)
   Las reglas siguientes NO aplican al DOM nuevo (.rnv-services-stack /
   .svc-card). Conservadas como dead-code por si algún día rollback.
   ============================== */
.services-scroll {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
}
.services-scroll__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.services-scroll__visual {
  position: sticky;
  top: clamp(80px, 10vh, 120px);
  max-height: calc(100svh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-isometric {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
}

/* State machine: capas dimmed por default, una iluminada según data-active-service.
   transform-box: fill-box asegura que cualquier transform aplica relativo al bbox del <g>. */
.iso-layer {
  opacity: 0.22;
  filter: grayscale(0.7) brightness(0.65);
  transition:
    opacity 700ms cubic-bezier(0.85, 0, 0, 1),
    filter 700ms cubic-bezier(0.85, 0, 0, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.services-scroll[data-active-service="0"] .iso-layer--consultoria,
.services-scroll[data-active-service="1"] .iso-layer--soporte,
.services-scroll[data-active-service="2"] .iso-layer--manpower,
.services-scroll[data-active-service="3"] .iso-layer--educacion,
.services-scroll[data-active-service="4"] .iso-layer--distribucion {
  opacity: 1;
  filter: none;
}

/* Service panels (right column) — cada uno controla un slice de scroll */
.services-scroll__panels {
  display: flex;
  flex-direction: column;
}
.service-panel {
  position: relative;
  min-height: 80vh;
  padding-block: clamp(48px, 8vw, 96px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.service-panel:first-child { padding-top: clamp(8px, 2vw, 24px); }
.service-panel:last-child { border-bottom: none; }

.service-panel__num {
  font-family: var(--f-display);
  font-size: clamp(13px, 0.6vw + 10px, 18px);
  font-weight: 700;
  color: var(--c-red);
  letter-spacing: 0.22em;
  margin: 0;
}
.service-panel__title {
  font-family: var(--f-display);
  font-size: clamp(36px, 2.4vw + 20px, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-text-light);
  margin: 0;
}
.service-panel__desc {
  font-family: var(--f-body);
  font-size: clamp(16px, 0.4vw + 14px, 19px);
  line-height: 1.6;
  color: var(--c-text-dim);
  margin: 0;
  max-width: 520px;
}
.service-panel__caps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-panel__caps li {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-text-dim);
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
}
.service-panel__caps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1.5px;
  background: var(--c-red);
}
.service-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-light);
  text-decoration: none;
  letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 14px 0 10px;
  border-bottom: 1.5px solid var(--c-red);
  transition:
    gap 320ms cubic-bezier(0.85, 0, 0, 1),
    color 280ms ease,
    border-color 280ms ease;
}
.service-panel__cta:hover {
  gap: 14px;
  color: var(--c-red);
}
.service-panel__cta svg {
  transition: transform 320ms cubic-bezier(0.85, 0, 0, 1);
}
.service-panel__cta:hover svg { transform: translateX(4px); }

/* Mobile baseline (RNV-109 hará el polish completo): stack vertical sin sticky.
   El SVG se muestra arriba con todas las capas iluminadas (no hay state machine en mobile). */
@media (max-width: 900px) {
  .services-scroll__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .services-scroll__visual {
    position: static;
    max-height: none;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    margin: 0 auto;
  }
  .iso-layer {
    opacity: 1;
    filter: none;
    transition: none;
  }
  .service-panel {
    min-height: auto;
    padding-block: 48px;
  }
}

/* ==============================
   PASO 6 — Metrics
   ============================== */
.metrics-section {
  background: var(--c-navy);
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 48px 48px;
  padding: var(--section-pad) 80px;
}
.metrics-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.metric { padding-left: 44px; border-left: 1px solid var(--c-navy-border); }
.metric:first-child { padding-left: 0; border-left: 0; }
.metric-number {
  font-family: var(--f-display);
  font-size: clamp(52px, 6vw, 80px);
  font-weight: 800;
  color: var(--c-red);
  line-height: 1;
  margin: 0 0 10px;
}
.metric-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text-light);
  margin: 0 0 6px;
}
.metric-desc {
  font-size: 13px;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ==============================
   PASO 7 — Industries (interactive list + sticky panel)
   ============================== */
.industries-section {
  background: var(--c-navy-mid);
  padding: var(--section-pad) 80px;
}
.industries-section__inner { max-width: var(--container); margin: 0 auto; }
.industries-section h2 {
  font-family: var(--f-display);
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--c-text-light);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 16px 0 64px;
}
.industries-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.industries-list { padding-left: 32px; }
.industry-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--c-navy-border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: padding-left .3s ease;
}
.industry-item__text { display: block; }
.industry-item__name {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-text-muted);
  margin: 0;
  transition: color .3s;
}
.industry-item__desc {
  font-size: 14px;
  color: var(--c-text-muted);
  margin: 4px 0 0;
  transition: color .3s;
}
.industry-item__arrow {
  color: var(--c-text-muted);
  font-size: 20px;
  transition: color .3s, transform .3s;
}
.industry-item.is-active,
.industry-item:hover { padding-left: 18px; }
.industry-item.is-active .industry-item__name,
.industry-item:hover .industry-item__name { color: var(--c-text-light); }
.industry-item.is-active .industry-item__arrow,
.industry-item:hover .industry-item__arrow { color: var(--c-red); transform: translateX(4px); }
.industry-item.is-active::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 55%;
  background: var(--c-red);
}
.industry-panels { position: sticky; top: 100px; }
.industry-panel {
  background: var(--c-navy-card);
  border: 1px solid var(--c-navy-border);
  border-top: 3px solid var(--c-red);
  padding: 48px;
  min-height: 320px;
  opacity: 0;
  transition: opacity .4s ease;
  display: none;
}
.industry-panel.is-active { opacity: 1; display: block; }
.industry-panel__icon {
  width: 40px;
  height: 40px;
  color: var(--c-red);
  margin-bottom: 20px;
}
.industry-panel h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-text-light);
  margin: 0 0 16px;
}
.industry-panel p {
  font-size: 16px;
  color: var(--c-text-dim);
  line-height: 1.7;
  margin: 0 0 20px;
}
.industry-panel a {
  color: var(--c-red);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.industry-panel a::after {
  content: '→';
  transition: transform .2s;
}
.industry-panel a:hover::after { transform: translateX(4px); }

/* ==============================
   PASO 8 — Case study (white-dim editorial)
   ============================== */
.case-section {
  background: var(--c-white-dim);
  color: var(--c-text-dark);
  padding: var(--section-pad) 80px;
}
.case-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 60px;
  align-items: center;
}
.case-badge {
  display: inline-flex;
  background: var(--c-red-dark);
  color: var(--c-white);
  font-size: 11px;
  letter-spacing: .14em;
  padding: 7px 18px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 28px;
}
.case-section h3 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 800;
  color: var(--c-text-dark);
  line-height: 1.15;
  max-width: 480px;
  margin: 0 0 32px;
}
.case-block { margin-bottom: 24px; }
.case-block__label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-red);
  font-weight: 700;
  margin: 0 0 6px;
}
.case-block__text {
  font-size: 16px;
  color: var(--c-text-mid);
  line-height: 1.7;
  margin: 0;
}
.case-cta {
  color: var(--c-red-dark);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1.5px solid var(--c-red-border);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.case-cta::after {
  content: '→';
  transition: transform .25s;
}
.case-cta:hover {
  color: var(--c-red);
  border-color: var(--c-red);
}
.case-cta:hover::after { transform: translateX(5px); }
.case-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.case-stat {
  background: var(--c-white);
  padding: 32px 36px;
  border-left: 4px solid var(--c-red);
  box-shadow: 0 2px 16px rgba(16, 17, 42, .06);
}
.case-stat__num {
  font-family: var(--f-display);
  font-size: 52px;
  font-weight: 800;
  color: var(--c-red);
  line-height: 1;
}
.case-stat__lbl {
  font-size: 14px;
  color: var(--c-text-mid);
  font-weight: 500;
  margin-top: 6px;
}

/* ==============================
   PASO 9 — CTA final (borgoña full bleed)
   ============================== */
.cta-final {
  background: var(--c-red-dark);
  padding: var(--section-pad) 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-final__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
.cta-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .07);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta-ring--sm { width: 500px; height: 500px; }
.cta-ring--md { width: 800px; height: 800px; }
.cta-ring--lg { width: 1100px; height: 1100px; }
.cta-final__eyebrow {
  font-size: var(--text-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin: 0 0 20px;
}
.cta-final h2 {
  font-family: var(--f-display);
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1.1;
  margin: 0 0 20px;
}
.cta-final__sub {
  font-size: 18px;
  color: rgba(255, 255, 255, .72);
  max-width: 500px;
  margin: 0 auto 52px;
  line-height: 1.7;
}
.cta-final__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-final .btn--primary {
  background: var(--c-white);
  color: var(--c-red-dark);
  font-weight: 700;
}
.cta-final .btn--primary:hover {
  background: var(--c-white);
  color: var(--c-red-dark);
  opacity: .9;
}
.cta-final .btn--secondary {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, .35);
}
.cta-final .btn--secondary:hover {
  border-color: rgba(255, 255, 255, .85);
  color: var(--c-white);
}
.cta-final__note {
  margin-top: 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
}

/* ==============================
   PASO 10 — Footer
   ============================== */
/* ── Footer editorial world-class — layout 2-col ──
   LEFT: eyebrow + nav columns + bottom (copyright + social)
   RIGHT: stack vertical de "Renovar" repetido — fragmentación tipo
          tall-block kinetic typography (puzzle pieces stacked).
*/
.site-footer {
  background: var(--c-navy);
  color: var(--c-text-light);
  padding: 0 0 clamp(32px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
  padding: clamp(56px, 7vw, 96px) 80px 0;
}
.site-footer__inner--single {
  grid-template-columns: 1fr;
}

.site-footer__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.site-footer__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}

/* ── Eyebrow (left column top) ── */
.site-footer__eyebrow {
  font-family: var(--f-display);
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 clamp(48px, 6vw, 80px);
  max-width: 32ch;
  line-height: 1.4;
}

/* ── RENOVAR — grupo de 3 instancias side-by-side (RENOVAR-1/2/3) ──
   RENOVAR-2 (centro) muestra la palabra completa. RENOVAR-1 (izq) y
   RENOVAR-3 (der) tienen contenedores angostos que recortan la palabra
   (misma tipografía, mismo font-size — solo cambia el ancho del wrapper)
   creando una composición tipográfica abstracta. Los 3 mantienen el
   whoosh barrel hover horizontal (left → right). */
.site-footer__renovar-group {
  display: flex;
  align-items: center;
  gap: 0;
}
.site-footer__renovar {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  cursor: default;
}
.site-footer__renovar--1 {
  width: clamp(40px, 4vw, 60px);
  /* word in flow normal, default left-aligned → muestra LEFTMOST slice */
}
.site-footer__renovar--3 {
  width: clamp(40px, 4vw, 60px);
  justify-content: flex-end;
  /* word right-aligned → muestra RIGHTMOST slice */
}
/* RENOVAR-4/-5/-6/-7: mismo ancho que -1/-3 + 15% más recortadas en altura.
   align-items: center mantiene el word a su altura natural y clipa simétrico
   top+bottom. -6 y -7 son las extremas (más afuera) con la mayoría de letras
   transparentes; -4 y -5 con menos letras transparentes (más densas). */
.site-footer__renovar--4,
.site-footer__renovar--5,
.site-footer__renovar--6,
.site-footer__renovar--7 {
  width: clamp(40px, 4vw, 60px);
  height: clamp(375px, 41vw, 600px);
  align-items: center;
}
.site-footer__renovar--4 .site-footer__renovar-word--copy,
.site-footer__renovar--6 .site-footer__renovar-word--copy {
  left: 0;
  right: auto;
}
.site-footer__renovar--5,
.site-footer__renovar--7 {
  justify-content: flex-end;
  /* slice rightmost, igual que --3 */
}
/* En RENOVAR-1 el copy debe entrar desde la izquierda alineado al lado
   izquierdo (no al derecho como en --2/--3), así muestra el mismo slice
   que el original durante el whoosh */
.site-footer__renovar--1 .site-footer__renovar-word--copy {
  left: 0;
  right: auto;
}
.site-footer__renovar-word {
  display: inline-block;
  font-family: var(--f-body);
  font-size: clamp(97px, 10.6vw, 156px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  color: #fff;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 700ms cubic-bezier(0.55, 0, 0.85, 0.4);
  will-change: transform;
}
.site-footer__renovar-word--copy {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(-100%);
}
.site-footer__right:hover .site-footer__renovar-word:first-child {
  transform: translateX(100%);
}
.site-footer__right:hover .site-footer__renovar-word--copy {
  transform: translateX(0);
}
/* Letter transparent — preserva el ancho natural del glifo pero invisible */
.site-footer__renovar-letter--hidden {
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__renovar-word { transition: none; }
}

/* ── Option 1: Gradient sweep ──
   Sheen periódico (rojo Rinnovo) viaja a lo largo de la palabra. Background-clip
   sobre texto + animación de background-position. Sutil, premium, editorial. */
.site-footer__renovar[data-fx="sweep"] .site-footer__renovar-word {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 30%,
    var(--c-red) 46%,
    #ffffff 62%,
    #ffffff 100%
  );
  background-size: 100% 260%;
  background-position: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transform: translateY(6%);
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__renovar[data-fx="sweep"].is-in-view .site-footer__renovar-word {
  opacity: 1;
  transform: translateY(0);
  animation: rnv-sweep 5.2s ease-in-out 1s infinite;
}
@keyframes rnv-sweep {
  0%, 18%   { background-position: 0% 100%; }
  50%       { background-position: 0% 0%; }
  82%, 100% { background-position: 0% 100%; }
}

/* ── Option 2: 3D stack ──
   Tres capas del texto (main + ::before + ::after) en distintos planos Z
   con rotate3d sutil. Crea profundidad tipográfica editorial sin loop.
   Front layer crisp blanco; back layers rojo + white-soft con depth offset. */
.site-footer__renovar[data-fx="stack"] {
  perspective: 1100px;
  perspective-origin: 70% 50%;
}
.site-footer__renovar[data-fx="stack"] .site-footer__renovar-word {
  position: relative;
  color: #fff;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateZ(-40px);
  transition: opacity 1.2s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__renovar[data-fx="stack"] .site-footer__renovar-word::before,
.site-footer__renovar[data-fx="stack"] .site-footer__renovar-word::after {
  content: "Renovar";
  position: absolute;
  top: 0;
  left: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  writing-mode: inherit;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__renovar[data-fx="stack"] .site-footer__renovar-word::before {
  color: var(--c-red);
}
.site-footer__renovar[data-fx="stack"] .site-footer__renovar-word::after {
  color: rgba(255, 255, 255, 0.45);
}
.site-footer__renovar[data-fx="stack"].is-in-view .site-footer__renovar-word {
  opacity: 1;
  transform: translateZ(0);
}
.site-footer__renovar[data-fx="stack"].is-in-view .site-footer__renovar-word::before {
  opacity: 0.6;
  transform: translate3d(-14px, 6px, -50px) rotate3d(0, 1, 0, 9deg);
  transition-delay: 0.25s;
}
.site-footer__renovar[data-fx="stack"].is-in-view .site-footer__renovar-word::after {
  opacity: 0.28;
  transform: translate3d(-28px, 14px, -100px) rotate3d(0, 1, 0, 16deg);
  transition-delay: 0.45s;
}

/* ── Option 5: Outline → fill ──
   Aparece como contorno rojo brand (text-stroke) sin fill; luego el fill blanco
   "se vierte" desde arriba via background-clip text + animación de
   background-position. El stroke rojo permanece como acento brand persistente.
   Brand statement "completed/signed". */
.site-footer__renovar[data-fx="outline"] .site-footer__renovar-word {
  -webkit-text-stroke: 2px var(--c-red);
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 50%,
    transparent 50%,
    transparent 100%
  );
  background-size: 100% 200%;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s ease,
    transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-position 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
.site-footer__renovar[data-fx="outline"].is-in-view .site-footer__renovar-word {
  opacity: 1;
  transform: translateY(0);
  background-position: 0% 0%;
}

/* ── Option 4: Mask-image cinematographic reveal ──
   Vertical wipe con soft-edge mask + blur unblur + leve rise. Las letras emergen
   de arriba hacia abajo (en el orden natural de lectura del vertical-rl) como
   un title card de cine. Sin loop — un solo reveal premium. */
.site-footer__renovar[data-fx="mask"] .site-footer__renovar-word {
  color: #fff;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 33%,
    rgba(0, 0, 0, 0.5) 40%,
    transparent 48%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 33%,
    rgba(0, 0, 0, 0.5) 40%,
    transparent 48%,
    transparent 100%
  );
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 100%;
  mask-position: 0% 100%;
  filter: blur(8px);
  opacity: 0;
  transform: translateY(18px);
  transition:
    -webkit-mask-position 2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    mask-position 2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    filter 1.4s ease 0.3s,
    opacity 1.2s ease,
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__renovar[data-fx="mask"].is-in-view .site-footer__renovar-word {
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}

/* ── Option 3: Scramble decode ──
   El JS construye per-letter spans y cicla chars aleatorios con stagger;
   CSS solo gobierna el flash de color rojo durante el scramble y la
   aparición global del word. Tipográficamente "se decodifica" letra a letra. */
.site-footer__renovar[data-fx="scramble"] .site-footer__renovar-word {
  color: #fff;
  opacity: 0;
  transition: opacity 600ms ease;
}
.site-footer__renovar[data-fx="scramble"].is-in-view .site-footer__renovar-word {
  opacity: 1;
}
.site-footer__renovar[data-fx="scramble"] .site-footer__renovar-letter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 180ms ease;
}
.site-footer__renovar[data-fx="scramble"] .site-footer__renovar-letter.is-scrambling {
  color: var(--c-red);
}

/* Reduced motion — render estable, sin animación */
@media (prefers-reduced-motion: reduce) {
  .site-footer__renovar .site-footer__renovar-word {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    background: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .site-footer__renovar[data-fx="stack"] .site-footer__renovar-word::before,
  .site-footer__renovar[data-fx="stack"] .site-footer__renovar-word::after {
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Divider gradient editorial ── */
.site-footer__divider {
  margin: 0 0 clamp(48px, 6vw, 80px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(227, 30, 44, 0) 0%,
    rgba(227, 30, 44, 0.6) 30%,
    rgba(227, 30, 44, 0.9) 50%,
    rgba(227, 30, 44, 0.6) 70%,
    rgba(227, 30, 44, 0) 100%
  );
}

/* ── Nav columns (left side) — 2 cols porque el column padre es 50% del viewport ── */
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 56px) clamp(24px, 3vw, 48px);
  margin-bottom: clamp(56px, 7vw, 96px);
}
.site-footer__col-title {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  font-weight: 600;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-footer__col-title::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--c-red);
  opacity: 0.7;
}
.site-footer__col a {
  font-family: var(--f-body);
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.9;
  text-decoration: none;
  display: block;
  transition: color 200ms ease, transform 200ms ease;
  word-break: break-word;
}
.site-footer__col a:hover {
  color: #fff;
  transform: translateX(2px);
}
.site-footer__col a:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-footer__address {
  font-family: var(--f-body);
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  line-height: 1.9;
  display: block;
  margin-top: 4px;
}

/* ── Bottom row: copyright + social icons ── */
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.site-footer__copy {
  font-family: var(--f-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.site-footer__bottom-left {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  flex-wrap: wrap;
}
.site-footer__portal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.site-footer__portal svg { flex-shrink: 0; opacity: 0.8; }
.site-footer__portal:hover {
  color: #fff;
  border-color: var(--c-red);
  background: rgba(227, 30, 44, 0.08);
}
.site-footer__portal:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}
.site-footer__social {
  display: flex;
  gap: 10px;
  align-items: center;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.65);
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 280ms cubic-bezier(0.85, 0, 0, 1);
}
.site-footer__social a:hover {
  color: var(--c-red);
  background: rgba(227, 30, 44, 0.10);
  border-color: var(--c-red);
  transform: translateY(-2px);
}
.site-footer__social a:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 64px);
    padding: clamp(48px, 8vw, 72px) 32px 0;
  }
  /* Mobile: grupo RENOVAR visible centrado debajo del nav, SIN animación */
  .site-footer__right {
    justify-content: center;
    margin-top: clamp(16px, 4vw, 32px);
  }
  /* Desactivar el whoosh en mobile — copies se quedan escondidas, originales estáticas */
  .site-footer__renovar-word {
    transition: none;
  }
  .site-footer__right:hover .site-footer__renovar-word:first-child {
    transform: none;
  }
  .site-footer__right:hover .site-footer__renovar-word--copy {
    transform: translateX(-100%);
  }
  /* Tile más corto en mobile para preservar perf y no dominar el viewport */
  .site-footer__tile {
    height: clamp(280px, 60vw, 380px);
  }
  .site-footer__eyebrow {
    font-size: 21px;
    max-width: 100%;
    margin-bottom: clamp(32px, 6vw, 48px);
  }
  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    margin-bottom: clamp(40px, 6vw, 56px);
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}
@media (max-width: 480px) {
  .site-footer__cols {
    grid-template-columns: 1fr;
  }
}

/* Ocultar divider antiguo (ya no aplica a este layout) */
.site-footer__divider { display: none; }
/* Ocultar logo del footer (petición del cliente) */
.site-footer__logo-link { display: none; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .site-footer__col a,
  .site-footer__social a,
  .site-footer__logo-link { transition: none; }
}

/* ==============================
   PASO 12 — Responsive breakpoints
   ============================== */
@media (max-width: 1280px) {
  .site-header__inner { padding: 0 48px; }
  .hero,
  .partners-strip,
  .services-section,
  .metrics-section,
  .industries-section,
  .case-section,
  .cta-final,
  .site-footer { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 1024px) {
  .hero {
    padding-top: 144px;
  }
  .hero__row {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .hero__subtitle {
    padding-bottom: 0;
    max-width: 640px;
  }
  .industries-layout { grid-template-columns: 1fr; gap: 40px; }
  .industry-panels { position: static; }
  .case-section__inner { grid-template-columns: 1fr; gap: 40px; }
  .case-stats { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .case-stat { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 768px) {
  .site-header__inner { padding: 0 24px; }
  /* Mobile: deshabilita el escape full-bleed con 100vw — causa overflow horizontal
     porque 100vw puede incluir scrollbar/decoración. width:100% + márgenes 0 lo previene. */
  .hero,
  .partners-strip,
  .services-section,
  .metrics-section,
  .industries-section,
  .case-section,
  .cta-final,
  .site-footer {
    box-sizing: border-box;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100%;
  }
  .hero { padding-top: 100px; padding-bottom: 60px; }
  .hero__title { font-size: clamp(40px, 10vw, 60px) !important; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .metric { padding-left: 24px; }
  .metric:nth-child(odd) { padding-left: 0; border-left: 0; }
  .metric:nth-child(even) { border-left: 1px solid var(--c-navy-border); }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 36px 28px; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .industries-list { padding-left: 0; }
  .industry-item.is-active::before { left: -16px; }
}
@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .metric { padding-left: 0; border-left: 0; }
  .case-stat { flex: 1 1 100%; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .cta-final__buttons .btn { width: 100%; justify-content: center; }
}

/* ==============================
   SCROLL REVEAL global (PASO 11)
   ============================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .75s cubic-bezier(.16, 1, .3, 1),
    transform .75s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* AAA mode partial — mantenemos focus + underlines accesibles aún sin theme aaa activo */

/* ==============================
   Toggle button (icono sun/moon)
   ============================== */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--n-200);
  border-radius: var(--wp--custom--border--radius-pill);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--n-700);
  cursor: pointer;
  transition: background var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}
.theme-toggle:hover {
  background: var(--wp--preset--color--n-50);
  color: var(--wp--preset--color--red-600);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.site-header--transparent .theme-toggle {
  border-color: rgba(255,255,255,.4);
  background: transparent;
  color: #ffffff;
}

/* ==============================
   Block style refinements (variantes que requieren CSS)
   ============================== */

/* Buttons — variant ghost */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--n-700);
  border: 1px solid var(--wp--preset--color--n-200);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--wp--preset--color--n-100);
  border-color: var(--wp--preset--color--n-400);
}

/* Buttons — variant link-arrow (texto + flecha animada) */
.wp-block-button.is-style-link-arrow .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--red-600);
  padding: 0;
  border: 0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wp-block-button.is-style-link-arrow .wp-block-button__link::after {
  content: "→";
  transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}
.wp-block-button.is-style-link-arrow .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

/* Headings — variant eyebrow */
.wp-block-heading.is-style-eyebrow,
.wp-block-paragraph.is-style-eyebrow {
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--wp--preset--color--n-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--wp--preset--spacing--xs);
}
.wp-block-heading.is-style-eyebrow::before,
.wp-block-paragraph.is-style-eyebrow::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("assets/images/chevron-red.svg") no-repeat center / contain;
  mask: url("assets/images/chevron-red.svg") no-repeat center / contain;
  background-color: var(--wp--preset--color--red-600);
}

/* Group — band navy / band gradient */
.wp-block-group.is-style-band-navy {
  background: var(--wp--preset--color--navy-800);
  color: var(--wp--preset--color--white);
  padding-block: var(--wp--custom--spacing--section-y);
}
.wp-block-group.is-style-band-gradient {
  background: var(--wp--preset--gradient--brand-diagonal);
  color: var(--wp--preset--color--white);
  padding-block: var(--wp--custom--spacing--section-y);
}
.wp-block-group.is-style-band-navy :where(h1, h2, h3, h4),
.wp-block-group.is-style-band-gradient :where(h1, h2, h3, h4) {
  color: var(--wp--preset--color--white);
}

/* Group — card */
.wp-block-group.is-style-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--n-100);
  border-radius: var(--wp--custom--border--radius-lg);
  padding: var(--wp--preset--spacing--md);
  box-shadow: var(--wp--custom--shadow--xs);
  transition: box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}
.wp-block-group.is-style-card:hover {
  box-shadow: var(--wp--custom--shadow--sm);
}
.wp-block-group.is-style-card-elevated {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--n-100);
  border-radius: var(--wp--custom--border--radius-lg);
  padding: var(--wp--preset--spacing--md);
  box-shadow: var(--wp--custom--shadow--md);
  transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
              box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}
.wp-block-group.is-style-card-elevated:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--custom--shadow--lg);
}

/* Image — rounded / mask-chevron */
.wp-block-image.is-style-rounded img {
  border-radius: var(--wp--custom--border--radius-lg);
}

/* Quote — testimonial */
.wp-block-quote.is-style-testimonial {
  border-left: 4px solid var(--wp--preset--color--red-600);
  padding-left: var(--wp--preset--spacing--md);
  font-style: normal;
  font-size: var(--wp--preset--font-size--lg);
}
.wp-block-quote.is-style-testimonial cite {
  display: block;
  margin-top: var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--sm);
  font-style: normal;
  color: var(--wp--preset--color--n-500);
  font-weight: 600;
}

/* ==============================
   Print
   ============================== */
@media print {
  .wp-block-navigation,
  .wp-block-search,
  .wp-block-button,
  header.wp-block-template-part,
  footer.wp-block-template-part nav { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ==============================
   Plugin overrides defensivos (CF7, Polylang)
   ============================== */
/* CF7: que herede tipografía y tokens del theme */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--n-200);
  border-radius: var(--wp--custom--border--radius-md);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--n-800);
  transition: border-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--wp--preset--color--red-500);
  outline: 0;
  box-shadow: 0 0 0 3px var(--wp--preset--color--red-100);
}
.wpcf7-not-valid-tip {
  color: var(--wp--preset--color--danger-600);
  font-size: var(--wp--preset--font-size--sm);
  margin-top: 4px;
}

/* ==============================
   Contacto + Carreras pages — elevación visual
   Glass on navy: form transparente con inputs sutiles, focus brand red,
   cards laterales translúcidas, jerarquía editorial.
   Scoped a body:is(.page-template-page-contacto,.page-template-page-carreras) y page-template-page-carreras.
   ============================== */

/* Form card: transparente, sin sombra, borde sutil opcional eliminado */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-group.is-style-card:has(.wpcf7) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-inline: 0;
}
/* Heading "Cuéntanos tu proyecto" → blanco */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-group.is-style-card:has(.wpcf7) h2 {
  color: #fff;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-group.is-style-card:has(.wpcf7) h2 + p {
  color: rgba(255, 255, 255, 0.65);
}

/* Inputs: glass dark con focus brand red */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="text"],
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="email"],
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="tel"],
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="url"],
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="number"],
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 select,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 10px;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  -webkit-text-fill-color: #fff;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff99' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 select option {
  background: var(--c-navy);
  color: #fff;
}

body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input::placeholder,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input:hover,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 select:hover,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 textarea:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input:focus,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 select:focus,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 textarea:focus {
  border-color: var(--c-red);
  background: rgba(158, 51, 57, 0.08);
  box-shadow: 0 0 0 3px rgba(158, 51, 57, 0.25);
  outline: 0;
}

/* Autofill — Chrome/Safari fuerzan amarillo + texto negro; override */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input:-webkit-autofill,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 textarea:-webkit-autofill,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 select:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset, 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

/* Labels visibles (si los hay en el form) */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.01em;
}

/* Botón submit: solid red brand con hover sutil */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="submit"],
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 button[type="submit"] {
  background: var(--c-red);
  color: #fff;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  padding: 16px 36px;
  border: 0;
  border-radius: 10px;
  min-height: 56px;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 4px 16px rgba(158, 51, 57, 0.25);
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="submit"]:hover,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 button[type="submit"]:hover {
  background: #b73c44;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(158, 51, 57, 0.35);
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="submit"]:focus-visible,
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 button[type="submit"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Footer del form (privacy link) */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-group.is-style-card:has(.wpcf7) > p:last-child {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-top: 24px;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-group.is-style-card:has(.wpcf7) > p:last-child a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-group.is-style-card:has(.wpcf7) > p:last-child a:hover {
  color: var(--c-red);
  text-decoration-color: var(--c-red);
}

/* Errores de validación */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7-not-valid-tip {
  color: #ff8a93;
  margin-top: 6px;
  font-size: 13px;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 .wpcf7-not-valid {
  border-color: rgba(255, 138, 147, 0.6) !important;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7-response-output {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 20px;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 .wpcf7-spinner {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ── Cards columna derecha — glass on navy ── */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.is-style-card:not(:has(.wpcf7)) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transition: background-color 250ms ease, border-color 250ms ease, transform 250ms ease;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.is-style-card:not(:has(.wpcf7)):hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

/* WhatsApp card: tinte verde sutil sobre glass (en vez de pale-green sólido) */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.has-success-100-background-color {
  background-color: rgba(15, 138, 79, 0.08) !important;
  border: 1px solid rgba(15, 138, 79, 0.3);
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.has-success-100-background-color:hover {
  background-color: rgba(15, 138, 79, 0.14) !important;
  border-color: rgba(15, 138, 79, 0.45);
}

/* Headings + texto dentro de cards laterales → claros sobre navy */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.is-style-card h3 {
  color: #fff;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.has-success-100-background-color h3 {
  color: #4cd58a;
}
/* Override de WP color presets (.has-n-700-color trae !important del core) */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.is-style-card p {
  color: #fff !important;
}

/* Calendly card oculto (decisión cliente 2026-05-17) */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.rnv-calendly-card {
  display: none;
}

/* Visítanos card oculto (decisión cliente 2026-05-19) */
body.page-template-page-contacto .wp-block-column .wp-block-group.rnv-visit-card {
  display: none;
}

/* H1 hero del contacto/carreras en blanco para contraste sobre navy */
body:is(.page-template-page-contacto,.page-template-page-carreras) main > .wp-block-group > h1,
body.page-template-page-contacto .rnv-contacto-hero h1 {
  color: #fff;
}
body.page-template-page-contacto .rnv-contacto-hero p {
  color: rgba(255, 255, 255, 0.65);
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.is-style-card a:not(.wp-block-button__link) {
  color: var(--c-red);
  text-decoration: none;
  transition: color 200ms ease;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.is-style-card a:not(.wp-block-button__link):hover {
  color: #b73c44;
  text-decoration: underline;
}

/* Botón Reservar reunión (Calendly, default style) → más brand-aligned */
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.is-style-card:not(.has-success-100-background-color) .wp-block-button .wp-block-button__link {
  background: var(--c-red);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  padding: 14px 28px;
  transition: background-color 200ms ease, transform 200ms ease;
}
body:is(.page-template-page-contacto,.page-template-page-carreras) .wp-block-column .wp-block-group.is-style-card:not(.has-success-100-background-color) .wp-block-button .wp-block-button__link:hover {
  background: #b73c44;
  transform: translateY(-1px);
}

/* Mobile contact form refinements */
@media (max-width: 768px) {
  body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="text"],
  body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="email"],
  body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 input[type="tel"],
  body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 select,
  body:is(.page-template-page-contacto,.page-template-page-carreras) .wpcf7 textarea {
    font-size: 16px; /* evita zoom iOS al focus */
  }
}

/* ── Launch v1 — opciones de header ocultas hasta tener contenido ──
   Backlog: RNV-launch-001 (Servicios), RNV-launch-002 (Soluciones), RNV-launch-003 (Casos).
   Reactivar removiendo esta sección completa cuando los pages tengan contenido listo.
   Cubre ambos header types: el hardcoded (header-transparent.html) y el WP nav-based (header.html). */
.site-header__nav a[href$="/servicios/"],
.site-header__nav a[href$="/soluciones/"],
.site-header__nav a[href$="/casos/"],
.wp-block-navigation-item:has(a[href$="/servicios/"]),
.wp-block-navigation-item:has(a[href$="/soluciones/"]),
.wp-block-navigation-item:has(a[href$="/casos/"]) {
  display: none !important;
}

/* ── Launch v1 — "Conocer más" links del services-stack ocultos ──
   Backlog: RNV-launch-001. Reactivar removiendo este selector cuando los 5
   service landing pages (consultoría, soporte, manpower, educación, distribución)
   tengan contenido aprobado. */
.svc-card__cta {
  display: none !important;
}

/* ── Launch v1 — utility class para ocultar bloques wp:* ──
   Aplicar `"className":"rnv-launch-hidden"` en wp:group/wp:cover/wp:columns para
   hide visual sin romper el block markup (útil cuando HTML comment wrapping
   falla por nested `<!-- wp:* -->` comments). Reactivar quitando la className
   del bloque correspondiente. Tracked por entries RNV-launch-*. */
.rnv-launch-hidden {
  display: none !important;
}

/* ── Conversion CTA — secondary link "o por WhatsApp directo →" ──
   Texto discreto debajo del botón primario "Agendar reunión". Reemplaza el
   ghost button anterior para eliminar paradox de elección. */
.rnv-cta-secondary-link a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease, opacity 180ms ease;
}
.rnv-cta-secondary-link a:hover,
.rnv-cta-secondary-link a:focus-visible {
  text-decoration-color: #fff;
  outline: none;
}

/* Polylang language switcher */
.lang_sw { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 8px; }
.lang_sw li { font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
.lang_sw a { text-decoration: none; color: var(--wp--preset--color--n-600); }
.lang_sw .current-lang a,
.lang_sw a:hover { color: var(--wp--preset--color--red-600); }

/* ==============================
   Header bar responsive (RNV-fix-008)
   Static header con hamburger en mobile.
   ============================== */
.rnv-header-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}
.rnv-header-logo { display: inline-block; line-height: 0; flex-shrink: 0; }
.rnv-header-logo img { height: 56px; width: auto; display: block; }

.rnv-header-burger {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  margin: 0;
  align-items: center;
  justify-content: center;
}
.rnv-header-burger .rnv-burger-close { display: none; }
.rnv-header-burger[aria-expanded="true"] .rnv-burger-open { display: none; }
.rnv-header-burger[aria-expanded="true"] .rnv-burger-close { display: block; }

.rnv-header-nav {
  display: flex;
  gap: 24px;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.rnv-header-nav a {
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.rnv-header-nav a:hover { color: var(--wp--preset--color--red-500) !important; }
.rnv-header-cta-mobile { display: none; }

.rnv-header-cta {
  background: var(--wp--preset--color--red-600);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: background var(--wp--custom--motion--duration-base, 200ms) ease-out;
}
.rnv-header-cta:hover { background: var(--wp--preset--color--red-500); }

@media (max-width: 900px) {
  .rnv-header-burger { display: inline-flex; order: 3; }
  .rnv-header-cta { display: none; }
  .rnv-header-logo img { height: 44px; }

  .rnv-header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--wp--preset--color--navy-800);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .rnv-header-nav[data-open="true"] { display: flex; }
  .rnv-header-nav a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 1rem;
  }
  .rnv-header-nav a:last-child { border-bottom: 0; }
  .rnv-header-cta-mobile {
    display: block !important;
    margin-top: 12px;
    background: var(--wp--preset--color--red-600);
    text-align: center;
    border-radius: 8px;
    padding: 14px !important;
    border-bottom: 0 !important;
  }
}

/* ==============================
   Scroll-reveal (RNV-080)
   Aplicar clase .rnv-reveal desde Site Editor → Avanzado → Clases CSS.
   El estado inicial oculto requiere .rnv-reveal-init (lo añade JS en frontend).
   En Site Editor el JS no corre → clase nunca se añade → elemento visible.
   ============================== */
.rnv-reveal.rnv-reveal-init {
  opacity: 0;
  transform: translateY(56px) scale(.97);
  transition:
    opacity 900ms cubic-bezier(.16,1,.3,1),
    transform 900ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.rnv-reveal.rnv-reveal-init.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger reveal (RNV-081) — los hijos directos aparecen escalonados */
.rnv-reveal-stagger.rnv-reveal-init > * {
  opacity: 0;
  transform: translateY(40px) scale(.97);
  transition:
    opacity 800ms cubic-bezier(.16,1,.3,1),
    transform 800ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > *:nth-child(2) { transition-delay: 100ms; }
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > *:nth-child(3) { transition-delay: 200ms; }
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > *:nth-child(4) { transition-delay: 300ms; }
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > *:nth-child(5) { transition-delay: 400ms; }
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > *:nth-child(6) { transition-delay: 500ms; }
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > *:nth-child(7) { transition-delay: 600ms; }
.rnv-reveal-stagger.rnv-reveal-init.is-revealed > *:nth-child(n+8) { transition-delay: 700ms; }

/* Clip-path reveal (RNV-086) — "barrido" lateral L→R */
.rnv-reveal-clip.rnv-reveal-init {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path 800ms cubic-bezier(.16,1,.3,1), -webkit-clip-path 800ms cubic-bezier(.16,1,.3,1);
  will-change: clip-path;
}
.rnv-reveal-clip.rnv-reveal-init.is-revealed {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .rnv-reveal.rnv-reveal-init,
  .rnv-reveal-stagger.rnv-reveal-init > *,
  .rnv-reveal-clip.rnv-reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}

/* ==============================
   Header sticky wrapper fix (RNV-084 prereq)
   El position:sticky del .site-header--transparent no funciona porque su
   parent <header class="wp-block-template-part"> tiene altura fija. Aplicar
   sticky en el wrapper externo (solo headers, no el footer template-part).
   ============================== */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ==============================
   Header scroll transition (RNV-084)
   El JS añade .is-scrolled cuando scrollY > 80px (data-rnv-header-overlay).
   ============================== */
.site-header--transparent {
  transition:
    background-color 320ms cubic-bezier(.16,1,.3,1),
    box-shadow 320ms cubic-bezier(.16,1,.3,1),
    backdrop-filter 320ms cubic-bezier(.16,1,.3,1);
}
.site-header--transparent .rnv-header-bar {
  transition: padding 320ms cubic-bezier(.16,1,.3,1);
}
.site-header--transparent.is-scrolled {
  background-color: rgba(19, 19, 68, 0.92) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 20px rgba(10, 10, 46, 0.25);
}
.site-header--transparent.is-scrolled .rnv-header-bar {
  padding-block: 6px;
}
.site-header--transparent.is-scrolled .rnv-header-logo img {
  height: 44px;
  transition: height 320ms cubic-bezier(.16,1,.3,1);
}

/* ==============================
   Hover lift mejorado en cards (RNV-085)
   ============================== */
.wp-block-group.is-style-card {
  transform-origin: center bottom;
  transition:
    transform 240ms cubic-bezier(.16,1,.3,1),
    box-shadow 240ms cubic-bezier(.16,1,.3,1),
    border-color 240ms cubic-bezier(.16,1,.3,1);
}
.wp-block-group.is-style-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--wp--custom--shadow--md);
  border-color: var(--wp--preset--color--n-200);
}
.wp-block-group.is-style-card-elevated {
  transform-origin: center bottom;
}
.wp-block-group.is-style-card-elevated:hover {
  transform: translateY(-8px);
  box-shadow: var(--wp--custom--shadow--lg);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-group.is-style-card,
  .wp-block-group.is-style-card-elevated {
    transition: none !important;
  }
  .wp-block-group.is-style-card:hover,
  .wp-block-group.is-style-card-elevated:hover {
    transform: none !important;
  }
}

/* ==============================
   Marquee horizontal infinito (RNV-083)
   CSS-only. Track duplicado 2x permite loop seamless con translateX -50%.
   Pause-on-hover. Skip total si prefers-reduced-motion: reduce.
   ============================== */
.rnv-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.rnv-marquee__track {
  display: flex;
  width: max-content;
  gap: 64px;
  align-items: center;
  animation: rnv-marquee 30s linear infinite;
}
.rnv-marquee:hover .rnv-marquee__track,
.rnv-marquee:focus-within .rnv-marquee__track {
  animation-play-state: paused;
}
.rnv-marquee__item {
  flex-shrink: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--n-500);
  white-space: nowrap;
  transition: color 200ms ease-out;
}
.rnv-marquee__item:hover {
  color: var(--wp--preset--color--n-700);
}
@keyframes rnv-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rnv-marquee__track {
    animation: none !important;
  }
}

/* ==============================
   CAREERS — Accenture-style scroll-driven reveal
   ────────────────────────────────────────
   Section es ~200vh tall (espacio de scroll). Inside, sticky inner pin a 100svh.
   JS asigna --p (0→1) basado en scroll progress. CSS lo lee en calc() para:
     - image width: 100% (fullbleed) → 50% (left column)
     - text panel: opacity 0→1 + translateX fade-in desde la derecha
   Mobile/reduced-motion: skip handler, layout estático stacked.
   ============================== */
.rnv-careers {
  --p: 0;
  position: relative;
  /* min-height reducido de 200vh → 130vh: 70% menos runway post-sticky.
     Pin runway = 30vh (animación --p:0→1 más ágil), post-pin = 30vh
     (visualmente: el bottom del sticky inner se ve menos tiempo antes
     de que arranque la siguiente sección). El user reportó que el espacio
     entre Carreras y News se veía muy amplio — esto lo elimina. */
  min-height: 130vh;
  background: var(--c-navy);
  color: var(--c-text-light);
  overflow: clip;  /* contains video/image transforms sin invadir vecinos */
}
.rnv-careers__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
}
.rnv-careers__image-wrap {
  /* UNIFORM SCALE: el wrap mantiene su layout (100%x100%) pero se escala
     visualmente via transform. Todo el contenido (incluyendo la imagen) se
     escala proporcionalmente — la composición de la imagen NO se re-crope
     al cambiar el tamaño. Foco visual (caras de personas) preservado al 100%
     porque el aspect ratio del contenedor visual nunca cambia.
     Origin: left center → la imagen se ancla a la izquierda y vertical center,
     el right edge contrae hacia el panel state. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --shrink: clamp(0, calc(var(--p, 0) * 2), 1);
  transform: scale(calc(1 - var(--shrink) * 0.5));
  /* origin: left bottom → image scale shrinks anclando al bottom-left, alineando
     vertical-baseline con el text panel que ahora usa justify-content: flex-end.
     Ambos elementos quedan al pie del sticky → simetría visual restaurada. */
  transform-origin: left bottom;
  /* border-radius se escala con el wrap; uso 32px nominal así a scale 0.5 luce como 16px */
  border-radius: 0 calc(var(--shrink) * 32px) calc(var(--shrink) * 32px) 0;
  z-index: 0;
  will-change: transform;
}
.rnv-careers__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Object-position fijo en 35% center: el presenter está en el left ~12%
     del original; el grupo de personas a la derecha cubre 50-90%. Con 35%
     center, la composición muestra presenter + table + caras de las personas
     a la derecha — todas las caras visibles en todos los estados. */
  object-position: 35% center;
  filter: brightness(0.82) contrast(1.05);
}
/* Text panel — aparece en la mitad derecha cuando llegamos al 2-col state.
   box-sizing: border-box es CLAVE: con content-box default, el padding (172px
   horizontales) se sumaba al width:50% → el panel se extendía hacia el área
   de la imagen y los textos solapaban con el visible image. */
.rnv-careers__text {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end → contenido se acerca al bottom del panel
     (= bottom del sticky = inicio inmediato de la sección News). Esto
     elimina el espacio vacío que se veía entre el CTA "Únete al equipo"
     y el header de News durante el scroll-past del careers sticky. */
  justify-content: flex-end;
  /* Padding-bottom reducido drásticamente para empujar el contenido lo más
     abajo posible. Padding-top más grande mantiene breathing visual a image. */
  padding: clamp(60px, 7vw, 120px) clamp(40px, 6vw, 120px) clamp(20px, 2.5vw, 36px);
  /* Opacity sólo en la segunda mitad del scroll (p > 0.5 → opacity 0→1) */
  /* Phase 2 reveal: 0 at p<=0.5, 1 at p=1 */
  --reveal: clamp(0, calc((var(--p, 0) - 0.5) * 2), 1);
  opacity: var(--reveal);
  transform: translateX(calc((1 - var(--reveal)) * 60px));
  pointer-events: none;
  z-index: 1;
}
.rnv-careers.is-text-active .rnv-careers__text {
  pointer-events: auto;
}
.rnv-careers__eyebrow {
  font-family: var(--f-display);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 clamp(20px, 2vw, 28px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.rnv-careers__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-red);
}
.rnv-careers__title {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  max-width: 14ch;
}
.rnv-careers__desc {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 clamp(28px, 3.2vw, 44px);
  max-width: 38ch;
}
.rnv-careers__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: 0 0 6px;
  position: relative;
  transition: gap 320ms cubic-bezier(0.85, 0, 0, 1), color 280ms ease;
  align-self: flex-start;
}
.rnv-careers__cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-red);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-careers__cta:hover {
  gap: 18px;
  color: var(--c-red);
}
.rnv-careers__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-red);
  color: #fff;
  transition: transform 320ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-careers__cta:hover .rnv-careers__cta-arrow {
  transform: translate(3px, -3px);
}

/* === Mobile (<901px): MISMO efecto sticky+scale que desktop, adaptado vertical.
     Image starts fullbleed (full ancho × full alto del viewport), shrink-uniforme
     anclado al top center para liberar espacio al pie donde aparece el text. === */
@media (max-width: 900px) {
  .rnv-careers {
    min-height: 200vh;  /* mismo scroll runway que desktop */
  }
  .rnv-careers__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: block;
  }
  .rnv-careers__image-wrap {
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    --shrink: clamp(0, calc(var(--p, 0) * 2), 1);
    /* Uniform scale 1→0.55, anchored center top: la imagen mantiene proporciones
       (caras visibles, sin re-cropping), shrinka hacia el top liberando ~45% del
       viewport en la zona inferior para el text panel. */
    transform: scale(calc(1 - var(--shrink) * 0.45));
    transform-origin: center top;
    clip-path: none !important;
    border-radius: 0 0 calc(var(--shrink) * 16px) calc(var(--shrink) * 16px);
    will-change: transform;
  }
  .rnv-careers__image {
    object-position: center !important;  /* mobile usa panel.jpg portrait, center fits well */
    filter: brightness(0.78) contrast(1.05);
  }
  /* Text panel mobile: pegado al BOTTOM (no al right como desktop), full ancho,
     fade-in en phase 2. Gradient sutil arriba para que el border image→text
     se sienta orgánico cuando el image todavía sobreponga al text. */
  .rnv-careers__text {
    position: absolute;
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: clamp(32px, 7vw, 48px) clamp(24px, 6vw, 36px) clamp(40px, 8vw, 56px);
    --reveal: clamp(0, calc((var(--p, 0) - 0.5) * 2), 1);
    opacity: var(--reveal);
    transform: translateY(calc((1 - var(--reveal)) * 24px));
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(8, 8, 22, 0.55) 25%,
      var(--c-navy) 60%
    );
    z-index: 2;
  }
  .rnv-careers.is-text-active .rnv-careers__text {
    pointer-events: auto;
  }
  /* Tipografía adaptada al ancho mobile */
  .rnv-careers__title {
    font-size: clamp(26px, 7.5vw, 38px);
    margin-bottom: clamp(14px, 3vw, 20px);
  }
  .rnv-careers__desc {
    font-size: clamp(14px, 3.6vw, 16px);
    margin-bottom: clamp(20px, 4.5vw, 28px);
  }
  .rnv-careers__eyebrow {
    margin-bottom: clamp(14px, 3vw, 20px);
  }
}

/* === Reduced motion: skip scroll animation, render final 2-col state === */
@media (prefers-reduced-motion: reduce) {
  .rnv-careers {
    min-height: auto;
  }
  .rnv-careers__sticky {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: row;
  }
  .rnv-careers__image-wrap {
    position: relative;
    inset: auto;
    width: 50%;
    height: 600px;
    clip-path: inset(0 0 0 0 round 0 16px 16px 0);
  }
  .rnv-careers__image {
    object-position: 32% center !important;  /* fixed focal point for static 2-col */
  }
  .rnv-careers__text {
    position: relative;
    width: 50%;
    height: 600px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ==============================
   NEWS — marquee continuo de noticias post-Carreras
   ────────────────────────────────────────
   Cambios vs versión previa:
   - Padding-top reducido 70% (gap mínimo con Carreras)
   - Track corre como MARQUEE infinito (CSS animation), siempre en movimiento
   - Cards SIN estilo de surface (sin bg/border/padding/radius) — flotan sobre
     el bg navy de la sección
   - Altura -50% (clamp 150-240px vs 300-480px anterior)
   - Mobile: mismo marquee, full-width edge-to-edge
   - Pause/play toggle preservado; prev/next ocultos (marquee handle motion)
   ============================== */
.rnv-news {
  position: relative;
  background: var(--c-navy);
  color: var(--c-text-light);
  /* Padding generoso editorial — sección breathes mucho, da peso de "publication" */
  padding: clamp(96px, 11vw, 160px) 0 clamp(80px, 9vw, 128px);
  overflow: hidden;
}
.rnv-news__inner {
  /* Header + controls usan ancho constrained con padding lateral.
     El track (marquee) se sale del inner para extenderse edge-to-edge. */
  max-width: 1280px;
  margin: 0 auto;
}
.rnv-news__header {
  margin-bottom: clamp(56px, 7vw, 96px);
  padding: 0 clamp(24px, 5vw, 80px);
}
.rnv-news__eyebrow {
  font-family: var(--f-display);
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.rnv-news__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-red);
}

/* Viewport — overflow clip para el marquee + manual nudge (prev/next) */
.rnv-news__viewport {
  width: 100%;
  overflow: hidden;
}
/* Nudge wrapper — recibe el offset manual de los arrows prev/next.
   Independiente del marquee animation que vive en .rnv-news__track. */
.rnv-news__nudge {
  display: flex;
  transform: translate3d(var(--nudge, 0px), 0, 0);
  transition: transform 480ms cubic-bezier(0.85, 0, 0, 1);
  will-change: transform;
}
/* Track marquee — animación CSS continua linear infinite.
   El track contiene 2 copias de los cards (PHP duplica el loop) para que
   translateX(-50%) loop a translateX(0) sea visualmente seamless. */
.rnv-news__track {
  display: flex;
  /* Gap más generoso — separa visualmente los cards, da feel editorial premium */
  gap: clamp(64px, 8vw, 140px);
  width: max-content;
  animation: rnv-news-marquee 50s linear infinite;
  will-change: transform;
  /* Padding lateral inicial para que el primer card no se pegue al edge
     del viewport — calza con el header padding. */
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
}
.rnv-news.is-paused .rnv-news__track,
.rnv-news.is-offscreen .rnv-news__track,
.rnv-news.is-nav-paused .rnv-news__track,
.rnv-news__track:hover {
  animation-play-state: paused;
}
@keyframes rnv-news-marquee {
  to { transform: translateX(-50%); }
}
/* Modo estático: pocas noticias (<3) → 1 sola copia, sin marquee ni controles */
.rnv-news--static .rnv-news__track {
  animation: none;
  transform: none;
}
.rnv-news--static .rnv-news__controls {
  display: none;
}

/* Card: width amplio editorial — un card domina visual con peek de vecinos */
.rnv-news__card {
  flex: 0 0 clamp(420px, 48vw, 680px);
  min-width: 0;
}
.rnv-news__card-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 36px);
  text-decoration: none;
  color: inherit;
  /* Altura más generosa para vertical breathing tipo "headline statement" */
  min-height: clamp(280px, 38vh, 420px);
  /* SIN bg, SIN border, SIN padding, SIN border-radius → flota sobre la sección */
  transition: opacity 280ms ease;
}
.rnv-news__card-link:hover {
  opacity: 0.75;
}
.rnv-news__card-link:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Media: imagen destacada — pequeña, lado izquierdo, mantiene radius sutil */
.rnv-news__card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.rnv-news__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rnv-news__card-link:hover .rnv-news__card-img {
  transform: scale(1.04);
}
/* Sin imagen → single column con body solo */
.rnv-news__card-link:not(:has(.rnv-news__card-media)) {
  grid-template-columns: 1fr;
}

.rnv-news__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Gap más amplio entre date / title / CTA — editorial breathing */
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
  width: 100%;
}
.rnv-news__card-date {
  font-family: var(--f-body);
  font-size: clamp(11px, 0.85vw, 13px);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}
.rnv-news__card-title {
  font-family: var(--f-display);
  /* Default (cuando hay image): título compact 16-20px */
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0;
  /* Max 3 líneas en card más bajo */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Sin imagen → título prominente (fecha pequeña + título grande estilo ticker).
   Tamaño 2x del original (20-28px → 40-56px) para tratamiento "headline statement". */
.rnv-news__card-link:not(:has(.rnv-news__card-media)) .rnv-news__card-title {
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  -webkit-line-clamp: 3;
}
/* Excerpt oculto — card más bajo no soporta texto adicional */
.rnv-news__card-excerpt { display: none; }
.rnv-news__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  color: var(--c-red);
  letter-spacing: -0.01em;
  transition: gap 320ms cubic-bezier(0.85, 0, 0, 1);
  margin-top: 2px;
}
.rnv-news__card-link:hover .rnv-news__card-cta {
  gap: 12px;
}

/* Controls — solo pause/play. Prev/next ocultos (marquee handle motion). */
.rnv-news__controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: clamp(20px, 2.5vw, 36px);
  padding: 0 clamp(24px, 5vw, 80px);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  gap: 16px;
}
.rnv-news__toggle,
.rnv-news__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
  padding: 0;
}
.rnv-news__toggle:hover,
.rnv-news__arrow:hover {
  background: rgba(227, 30, 44, 0.12);
  border-color: var(--c-red);
  color: var(--c-red);
}
.rnv-news__toggle:focus-visible,
.rnv-news__arrow:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}
/* Icon swap: pause cuando playing, play cuando paused */
.rnv-news__icon--play { display: none; }
.rnv-news.is-paused .rnv-news__icon--pause { display: none; }
.rnv-news.is-paused .rnv-news__icon--play { display: block; }
/* Prev/next nav: visible, alineados a la derecha del toggle */
.rnv-news__nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* === Mobile (<901px): mismo marquee, full edge-to-edge === */
@media (max-width: 900px) {
  .rnv-news {
    padding: clamp(18px, 4vw, 28px) 0 clamp(40px, 8vw, 64px);
    /* No section padding — track corre edge-to-edge en mobile */
  }
  .rnv-news__header {
    padding: 0 clamp(20px, 5vw, 32px);
    margin-bottom: clamp(20px, 4vw, 28px);
  }
  .rnv-news__track {
    gap: 20px;
    padding-left: clamp(20px, 5vw, 32px);
    padding-right: clamp(20px, 5vw, 32px);
    animation-duration: 40s;  /* algo más rápido en mobile, cards más chicos */
  }
  .rnv-news__card {
    flex: 0 0 clamp(260px, 80vw, 320px);
  }
  .rnv-news__card-link {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 14px;
    min-height: clamp(110px, 28vw, 140px);
  }
  .rnv-news__card-title {
    font-size: clamp(14px, 3.8vw, 16px);
    -webkit-line-clamp: 3;
  }
  /* Mobile sin imagen: título 2x del original (escala mobile) */
  .rnv-news__card-link:not(:has(.rnv-news__card-media)) .rnv-news__card-title {
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.1;
    -webkit-line-clamp: 3;
  }
  .rnv-news__controls {
    margin-top: 16px;
    padding: 0 clamp(20px, 5vw, 32px);
  }
}

/* === Reduced motion: marquee se detiene === */
@media (prefers-reduced-motion: reduce) {
  .rnv-news__track {
    animation: none;
  }
  .rnv-news__card-img {
    transition: none;
  }
}

/* ==============================
   NEWS SINGLE — vista editorial /noticias/<slug>/
   ────────────────────────────────────────
   Diseño tipo publicación enterprise (McKinsey/Stripe Press feel).
   Brand preservado (navy + red) pero con refinamiento editorial:
   - Single column constrained reading (~720px = 65ch)
   - Typography más generosa (body 18-20px, line-height 1.7)
   - Sticky share lateral (desktop) / inline (mobile)
   - Reading progress bar (top fixed)
   - Pull-quote con typografía editorial
   - Related grid 3-col responsive
   ============================== */

/* ─── Reading progress bar (top fixed) ─── */
.rnv-news-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  z-index: 999;
  pointer-events: none;
}
.rnv-news-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--c-red), #ff6975);
  transition: width 100ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .rnv-news-progress__fill { transition: none; }
}

/* ─── Main container ─── */
.rnv-news-single {
  background: var(--c-navy);
  color: var(--c-text-light);
  /* Compensar el header sticky (96px) sin causar gap visible */
  padding-top: clamp(56px, 7vw, 96px);
}

/* ─── Hero header — eyebrow + title + meta + lede ─── */
.rnv-news-single__hero {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 64px) clamp(40px, 5vw, 64px) !important;
  text-align: left;
}

/* Back link "← Volver a Rinnovo News" */
.rnv-news-single__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: clamp(28px, 4vw, 48px);
  transition: color 240ms ease, gap 280ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-news-single__back:hover {
  color: var(--c-red);
  gap: 12px;
}
.rnv-news-single__back svg {
  transition: transform 280ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-news-single__back:hover svg {
  transform: translateX(-3px);
}

/* Meta line — eyebrow · date · reading time */
.rnv-news-single__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 32px);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
.rnv-news-single__meta-eyebrow {
  color: var(--c-red);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rnv-news-single__meta-sep {
  opacity: 0.4;
}

/* TITLE — el statement editorial */
.rnv-news-single .rnv-news-single__title,
.rnv-news-single h1.wp-block-post-title {
  font-family: var(--f-display);
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 clamp(20px, 3vw, 32px);
  text-wrap: balance;
}

/* LEDE — excerpt grande, tono editorial */
.rnv-news-single .rnv-news-single__lede,
.rnv-news-single .wp-block-post-excerpt {
  font-family: var(--f-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 56ch;
  letter-spacing: -0.005em;
}
.rnv-news-single .wp-block-post-excerpt__excerpt {
  margin: 0;
}

/* ─── Featured image fullbleed ─── */
.rnv-news-single .rnv-news-single__featured,
.rnv-news-single .wp-block-post-featured-image {
  max-width: 1200px;
  margin: clamp(32px, 4vw, 56px) auto clamp(56px, 7vw, 96px) !important;
  padding: 0 clamp(24px, 5vw, 64px);
}
.rnv-news-single .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(12px, 1.4vw, 20px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
}

/* ─── Body — reading column + sticky share ─── */
.rnv-news-single__body {
  position: relative;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 5vw, 64px) clamp(64px, 8vw, 120px) !important;
}

/* Sticky share buttons (desktop) — left lateral */
.rnv-news-single__share {
  position: sticky;
  top: clamp(108px, 13vh, 140px);
  float: left;
  margin: 0 clamp(20px, 2vw, 32px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 44px;
}
.rnv-news-single__share-label {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 6px;
}
.rnv-news-single__share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  position: relative;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 280ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-news-single__share-btn:hover {
  background: rgba(227, 30, 44, 0.12);
  border-color: var(--c-red);
  color: var(--c-red);
  transform: translateY(-2px);
}
.rnv-news-single__share-btn:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}
.rnv-news-single__share-toast {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* Article content — el reading column principal */
.rnv-news-single .rnv-news-single__content,
.rnv-news-single .wp-block-post-content {
  max-width: 720px;
  margin: 0 auto;
}
.rnv-news-single .wp-block-post-content > * {
  margin-top: 0;
  margin-bottom: clamp(20px, 1.8vw, 28px);
}
.rnv-news-single .wp-block-post-content > *:last-child {
  margin-bottom: 0;
}

/* Body paragraphs — Inter 19px, line-height 1.7, color suave */
.rnv-news-single .wp-block-post-content p {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.003em;
}
.rnv-news-single .wp-block-post-content > p:first-of-type::first-letter {
  /* Editorial: drop cap sutil en primer párrafo (solo el lead, hijo directo —
     el `>` evita aplicarlo a párrafos anidados como los de blockquote). */
  font-family: var(--f-display);
  font-size: 3.2em;
  font-weight: 800;
  float: left;
  line-height: 0.9;
  margin: 0.08em 0.08em 0 0;
  color: var(--c-red);
}

/* Headings H2/H3 dentro del artículo */
.rnv-news-single .wp-block-post-content h2 {
  font-family: var(--f-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: #fff;
  margin-top: clamp(48px, 5vw, 72px);
  margin-bottom: clamp(16px, 1.5vw, 24px);
  text-wrap: balance;
}
.rnv-news-single .wp-block-post-content h3 {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: #fff;
  margin-top: clamp(36px, 4vw, 56px);
  margin-bottom: clamp(12px, 1.2vw, 18px);
}

/* Links inline — underline animado */
.rnv-news-single .wp-block-post-content a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(227, 30, 44, 0.5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 240ms ease, color 240ms ease;
}
.rnv-news-single .wp-block-post-content a:hover {
  color: var(--c-red);
  text-decoration-color: var(--c-red);
}

/* Pull-quote — editorial signature element */
.rnv-news-single .wp-block-post-content blockquote,
.rnv-news-single .wp-block-quote {
  margin: clamp(40px, 5vw, 64px) 0;
  padding: clamp(28px, 3.5vw, 40px) 0 clamp(28px, 3.5vw, 40px) clamp(48px, 5vw, 72px);
  border-left: none;
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: #fff;
  font-style: italic;
}
/* El <p> interno del wp:quote debe heredar el tamaño editorial grande del
   blockquote (la regla genérica de párrafo lo dejaba en 17px). */
.rnv-news-single .wp-block-post-content blockquote p {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  font-style: inherit;
  margin: 0;
}
.rnv-news-single .wp-block-post-content blockquote::before,
.rnv-news-single .wp-block-quote::before {
  content: "\201C";  /* curly opening quote */
  position: absolute;
  left: 0;
  top: clamp(10px, 1.5vw, 20px);
  font-family: var(--f-display);
  font-size: clamp(80px, 9vw, 140px);
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  color: var(--c-red);
  opacity: 0.95;
}
.rnv-news-single .wp-block-post-content blockquote cite,
.rnv-news-single .wp-block-post-content blockquote p:last-child:not(:first-child),
.rnv-news-single .wp-block-quote cite {
  display: block;
  margin-top: clamp(16px, 1.5vw, 20px);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-red);
}

/* Listas — comfortable spacing */
.rnv-news-single .wp-block-post-content ul,
.rnv-news-single .wp-block-post-content ol {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  padding-left: 1.5em;
}
.rnv-news-single .wp-block-post-content li {
  margin-bottom: 0.6em;
}
.rnv-news-single .wp-block-post-content li::marker {
  color: var(--c-red);
}

/* Imágenes inline */
.rnv-news-single .wp-block-post-content figure {
  margin: clamp(36px, 4vw, 56px) 0;
}
.rnv-news-single .wp-block-post-content figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(8px, 1vw, 14px);
}
/* Fotos en formato retrato (event photos) — centradas, ancho de lectura cómodo */
.rnv-news-single .wp-block-post-content figure.rnv-news-photo {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.rnv-news-single .wp-block-post-content figcaption {
  margin-top: 12px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  text-align: center;
}

/* Code blocks */
.rnv-news-single .wp-block-post-content pre,
.rnv-news-single .wp-block-post-content code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.rnv-news-single .wp-block-post-content code {
  padding: 0.15em 0.4em;
}
.rnv-news-single .wp-block-post-content pre {
  padding: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  line-height: 1.6;
}

/* ─── Related section ─── */
.rnv-news-single__footer {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 5vw, 64px) clamp(80px, 10vw, 140px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: clamp(56px, 7vw, 96px) !important;
}
.rnv-news-single__related-header {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.rnv-news-single__related-eyebrow {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rnv-news-single__related-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-red);
}
.rnv-news-single__related-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0;
}
.rnv-news-single__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.rnv-news-single__related-item {
  min-width: 0;
}
.rnv-news-single__related-link {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: opacity 240ms ease;
}
.rnv-news-single__related-link:hover {
  opacity: 0.78;
}
.rnv-news-single__related-link:hover .rnv-news-single__related-img {
  transform: scale(1.04);
}
.rnv-news-single__related-link:hover .rnv-news-single__related-cta {
  gap: 12px;
}
.rnv-news-single__related-link:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 6px;
  border-radius: 8px;
}
.rnv-news-single__related-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.rnv-news-single__related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rnv-news-single__related-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.rnv-news-single__related-date {
  font-family: var(--f-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}
.rnv-news-single__related-h3 {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0;
  /* max 3 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rnv-news-single__related-cta {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-red);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 280ms cubic-bezier(0.85, 0, 0, 1);
}

/* ─── Mobile (<901px) ─── */
@media (max-width: 900px) {
  .rnv-news-single__hero {
    padding: clamp(32px, 6vw, 48px) clamp(20px, 5vw, 32px) clamp(32px, 5vw, 48px) !important;
  }
  .rnv-news-single .rnv-news-single__title,
  .rnv-news-single h1.wp-block-post-title {
    font-size: clamp(28px, 7.5vw, 40px);
  }
  .rnv-news-single .wp-block-post-featured-image {
    padding: 0 clamp(20px, 5vw, 32px);
    margin: clamp(24px, 5vw, 36px) auto clamp(40px, 8vw, 64px) !important;
  }
  .rnv-news-single .wp-block-post-featured-image img {
    aspect-ratio: 4 / 3;
  }
  .rnv-news-single__body {
    padding: 0 clamp(20px, 5vw, 32px) clamp(48px, 10vw, 80px) !important;
  }
  /* Sticky share oculto en mobile — usuario hace scroll, comparte via share menu nativo o copy URL */
  .rnv-news-single__share {
    position: relative;
    top: auto;
    float: none;
    flex-direction: row;
    width: auto;
    margin: 0 0 clamp(24px, 5vw, 36px) 0;
    padding: clamp(16px, 4vw, 20px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 12px;
  }
  .rnv-news-single__share-label {
    writing-mode: horizontal-tb;
    transform: none;
    margin-bottom: 0;
    margin-right: auto;
    font-size: 11px;
  }
  .rnv-news-single .wp-block-post-content > p:first-of-type::first-letter {
    font-size: 2.8em;
  }
  .rnv-news-single__related-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .rnv-news-single__back svg,
  .rnv-news-single__back,
  .rnv-news-single__share-btn,
  .rnv-news-single__related-img,
  .rnv-news-single__related-cta {
    transition: none;
  }
}

/* ==============================
   BLOG ARTICLE — extensiones sobre .rnv-news-single (RNV-blog-004)
   Reutiliza el tratamiento editorial de noticias; añade tabla de contenidos,
   callout de código de error y bloques de código técnico pulidos. Todo scoped
   a .rnv-article para no afectar al single de noticias.
   ============================== */

/* El single de blog usa header-transparent (overlay fixed) — sobrescribe el
   padding-top de .rnv-news-single (pensado para el header sólido sticky). */
.rnv-article {
  padding-top: clamp(72px, 9vh, 100px);
}

/* Barra de compartir flotante — visible en TODO momento durante la lectura.
   Por defecto es sticky acotada a .rnv-news-single__body (desaparecía al llegar
   al footer/relacionados). En el blog la fijamos al viewport, centrada vertical
   a la izquierda. Solo desktop; en móvil mantiene la fila horizontal existente. */
@media (min-width: 901px) {
  .rnv-article .rnv-news-single__share {
    position: fixed;
    top: 50%;
    /* Offset pequeño: la barra (44px) queda dentro del gutter de padding lateral
       del contenido (~64px), por lo que NO solapa ni el cover full-bleed ni el
       grid de relacionados, en cualquier ancho de pantalla. */
    left: clamp(8px, 1vw, 14px);
    right: auto;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    z-index: 90;
  }
}

/* Tabla de contenidos — card inline (solo aparece en artículos con ≥3 headings) */
.rnv-article-toc {
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--c-red);
  border-radius: 12px;
}
.rnv-article-toc__title {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 12px;
}
.rnv-article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rnv-article-toc__item { margin: 0; }
.rnv-article-toc__item--h3 { padding-left: 18px; }
.rnv-article-toc__link {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border: none;
  transition: color 200ms ease, padding-left 240ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-article-toc__link:hover,
.rnv-article-toc__link:focus-visible {
  color: #fff;
  padding-left: 6px;
}

/* Callout de código de error — el identificador (FRM-41214) como chip monospace */
.rnv-article .wp-block-post-content .rnv-error-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ff8c94;
  background: rgba(227, 30, 44, 0.10);
  border: 1px solid rgba(227, 30, 44, 0.32);
  border-radius: 999px;
  padding: 6px 14px;
}
/* El chip nunca recibe el drop-cap del primer párrafo */
.rnv-article .wp-block-post-content p.rnv-error-chip:first-of-type::first-letter {
  font-size: inherit;
  float: none;
  color: inherit;
  margin: 0;
  font-weight: inherit;
}

/* Bloques de código / comandos — pulidos para contenido técnico */
.rnv-article .wp-block-post-content pre,
.rnv-article .wp-block-post-content pre.wp-block-code,
.rnv-article .wp-block-post-content .wp-block-preformatted {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(8, 9, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--c-red);
  border-radius: 10px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
}
.rnv-article .wp-block-post-content pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
/* inline code se diferencia del bloque */
.rnv-article .wp-block-post-content :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  color: #ff8c94;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 0.12em 0.42em;
}

/* Screenshot de referencia — card claro enmarcado sobre el fondo oscuro */
.rnv-article .wp-block-post-content figure.rnv-article-shot {
  margin: clamp(28px, 3.5vw, 44px) 0;
}
.rnv-article .wp-block-post-content figure.rnv-article-shot img {
  /* Pequeños (diálogos) se muestran a tamaño natural centrado; anchos (banners)
     se topan al ancho de la columna. width:auto sobrescribe el width:100% de la
     regla base de figuras → evita upscale borroso del diálogo pequeño. */
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  background: #fff;
  padding: clamp(12px, 1.6vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

/* Sección "Escrito por" — byline en el hero (nombre · cargo · LinkedIn) */
.rnv-article-author {
  margin-top: clamp(28px, 4vw, 44px);
}
.rnv-article-author__label {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 14px;
}
.rnv-article-author__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.rnv-article-author__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rnv-article-author__name {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.rnv-article-author__role {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
}
.rnv-article-author__link {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 280ms cubic-bezier(0.85, 0, 0, 1);
}
.rnv-article-author__link:hover {
  background: rgba(227, 30, 44, 0.12);
  border-color: var(--c-red);
  color: var(--c-red);
  transform: translateY(-2px);
}
.rnv-article-author__link:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

/* Hero del blog en 2 columnas (desktop): contenido a la izquierda, sección
   "Escrito por" como sidebar a la derecha — escala bien con varios autores.
   En móvil (≤768px) el grid colapsa y el autor fluye bajo el lede. */
@media (min-width: 769px) {
  .rnv-article .rnv-news-single__hero {
    max-width: none !important;            /* hero a todo el ancho de página */
    padding-left: clamp(24px, 5vw, 80px) !important;
    padding-right: clamp(24px, 5vw, 80px) !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(40px, 6vw, 100px);
    align-items: start;
  }
  .rnv-article .rnv-news-single__hero > * {
    grid-column: 1;
    min-width: 0;
  }
  /* El lede se mantiene en medida legible aunque la columna sea ancha. */
  .rnv-article .rnv-news-single__hero > .wp-block-post-excerpt,
  .rnv-article .rnv-news-single__hero > .rnv-news-single__lede {
    max-width: 640px;
  }
  /* "Escrito por" — columna derecha, pegada al borde derecho del hero. */
  .rnv-article .rnv-news-single__hero > .rnv-article-author {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin-top: 0;
    align-self: start;
  }
}

/* Etiquetas del artículo (fabricante · tipo) — chips clicables a /tag/ */
.rnv-article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.rnv-article-tags__label {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.rnv-article-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rnv-article-tags__chip {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.rnv-article-tags__chip:hover {
  color: #fff;
  border-color: var(--c-red);
  background: rgba(227, 30, 44, 0.12);
}
.rnv-article-tags__chip:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

/* prev / next nav */
.rnv-article__nav {
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.rnv-article__nav .wp-block-post-navigation-link {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  max-width: 48%;
}
.rnv-article__nav .wp-block-post-navigation-link a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 200ms ease;
}
.rnv-article__nav .wp-block-post-navigation-link a:hover {
  color: var(--c-red);
}

@media (max-width: 900px) {
  .rnv-article-toc { margin-left: 0; margin-right: 0; }
  .rnv-article__nav .wp-block-post-navigation-link { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rnv-article-toc__link { transition: none; }
}

/* ==============================
   BLOG HUB — listado editorial premium (/blog/) (RNV-blog-005)
   ============================== */
.rnv-blog-page {
  position: relative;
  background: var(--c-navy);
  color: var(--c-text-light);
  overflow: clip;
  /* El header-transparent es position:fixed overlay → este padding lo libera. */
  padding-top: clamp(72px, 9vh, 100px);
}

/* Fondo animado del hero — onda de partículas WebGL (hero-particles.js).
   Cubre la franja superior full-width detrás del head editorial. Sin JS /
   reduced-motion / móvil: queda el gradiente estático de abajo. */
.rnv-blog-hero-fx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(460px, 66vh, 720px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Fallback estático — glow índigo que evoca la onda. */
  background:
    radial-gradient(120% 90% at 72% 30%, rgba(47, 54, 120, 0.42) 0%, rgba(47, 54, 120, 0) 58%),
    radial-gradient(90% 70% at 20% 10%, rgba(95, 107, 196, 0.18) 0%, rgba(95, 107, 196, 0) 55%);
}
.rnv-blog-hero-fx__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Scrim — legibilidad AA del texto (izq) + fade al navy sólido (abajo) +
   oscurecido superior para el header transparente. */
.rnv-blog-hero-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 9, 30, 0.55) 0%, rgba(8, 9, 30, 0) 24%),
    linear-gradient(105deg, var(--c-navy) 0%, rgba(16, 17, 42, 0.72) 32%, rgba(16, 17, 42, 0.1) 62%, rgba(16, 17, 42, 0) 82%),
    linear-gradient(to bottom, rgba(16, 17, 42, 0) 52%, var(--c-navy) 100%);
}

.rnv-blog-hub {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 64px) clamp(64px, 8vw, 120px);
}

/* ==============================
   HERO FULL-BLEED REUTILIZABLE — onda de partículas de fondo (hero-particles.js)
   Se activa con data-hero-topology + data-hero-accent en .rnv-hero__fx.
   ============================== */
.rnv-hero {
  position: relative;
  overflow: clip;
  background: var(--c-navy);
  color: var(--c-text-light);
  min-height: clamp(480px, 72vh, 760px);
  display: flex;
  align-items: center;
  /* Libera el header-transparent (position:fixed overlay). */
  padding-top: clamp(72px, 9vh, 100px);
}
.rnv-hero__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Fallback estático — glow índigo que evoca la onda (sin JS / reduced-motion / móvil). */
  background:
    radial-gradient(120% 90% at 72% 38%, rgba(47, 54, 120, 0.42) 0%, rgba(47, 54, 120, 0) 58%),
    radial-gradient(90% 70% at 20% 12%, rgba(95, 107, 196, 0.18) 0%, rgba(95, 107, 196, 0) 55%);
}
.rnv-hero__fx canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Scrim — legibilidad AA del texto (izq) + fade al navy sólido (abajo) +
   oscurecido superior para el header transparente. */
.rnv-hero__fx::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 9, 30, 0.55) 0%, rgba(8, 9, 30, 0) 24%),
    linear-gradient(105deg, var(--c-navy) 0%, rgba(16, 17, 42, 0.72) 32%, rgba(16, 17, 42, 0.1) 62%, rgba(16, 17, 42, 0) 82%),
    linear-gradient(to bottom, rgba(16, 17, 42, 0) 58%, var(--c-navy) 100%);
}
.rnv-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 64px);
}
.rnv-hero__eyebrow {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rnv-hero__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-red);
}
.rnv-hero__title {
  font-family: var(--f-display);
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 clamp(18px, 2vw, 26px);
  max-width: 15ch;
  text-wrap: balance;
}
.rnv-hero__intro {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 56ch;
}

/* Head editorial */
.rnv-blog-hub__head {
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.rnv-blog-hub__eyebrow {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rnv-blog-hub__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-red);
}
.rnv-blog-hub__title {
  font-family: var(--f-display);
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 clamp(18px, 2vw, 26px);
  text-wrap: balance;
}
.rnv-blog-hub__intro {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 60ch;
}

/* Artículo destacado — layout 7fr/5fr */
.rnv-blog-hub__featured {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(48px, 6vw, 80px);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(16px, 1.6vw, 24px);
  transition: border-color 280ms ease, background 280ms ease, transform 400ms cubic-bezier(.16, 1, .3, 1);
}
.rnv-blog-hub__featured:hover {
  border-color: rgba(227, 30, 44, 0.4);
  background: rgba(255, 255, 255, 0.04);
}
.rnv-blog-hub__featured:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}
.rnv-blog-hub__featured-media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: clamp(10px, 1.2vw, 16px);
  background: rgba(255, 255, 255, 0.04);
}
.rnv-blog-hub__featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.rnv-blog-hub__featured:hover .rnv-blog-hub__featured-media img {
  transform: scale(1.04);
}
.rnv-blog-hub__featured-cat,
.rnv-blog-hub__card-cat {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 14px;
}
.rnv-blog-hub__featured-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0 0 16px;
  text-wrap: balance;
}
.rnv-blog-hub__featured-excerpt {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px;
  max-width: 52ch;
}
.rnv-blog-hub__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}
.rnv-blog-hub__meta-sep { opacity: 0.4; }
.rnv-blog-hub__featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-red);
  transition: gap 280ms cubic-bezier(.85, 0, 0, 1);
}
.rnv-blog-hub__featured:hover .rnv-blog-hub__featured-cta { gap: 12px; }

/* Chips de filtro */
.rnv-blog-hub__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.rnv-blog-hub__chip {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.rnv-blog-hub__chip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.rnv-blog-hub__chip.is-active {
  color: #fff;
  background: var(--c-red);
  border-color: var(--c-red);
}
.rnv-blog-hub__chip:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

/* Grid de artículos */
.rnv-blog-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.rnv-blog-hub__card { min-width: 0; }
.rnv-blog-hub__card[hidden] { display: none; }
.rnv-blog-hub__card-link {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 22px);
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(12px, 1.4vw, 18px);
  padding: clamp(16px, 1.6vw, 22px);
  transition: border-color 280ms ease, background 280ms ease, transform 400ms cubic-bezier(.16, 1, .3, 1);
}
.rnv-blog-hub__card-link:hover {
  border-color: rgba(227, 30, 44, 0.4);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-4px);
}
.rnv-blog-hub__card-link:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}
.rnv-blog-hub__card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: clamp(8px, 1vw, 12px);
  background: rgba(255, 255, 255, 0.04);
}
.rnv-blog-hub__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.rnv-blog-hub__card-link:hover .rnv-blog-hub__card-media img { transform: scale(1.05); }
.rnv-blog-hub__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rnv-blog-hub__card-cat { margin-bottom: 10px; }
.rnv-blog-hub__card-title {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0 0 10px;
}
.rnv-blog-hub__card-excerpt {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 16px;
}
.rnv-blog-hub__card .rnv-blog-hub__meta {
  margin-top: auto;
  font-size: 12px;
}

/* Paginación */
.rnv-blog-hub__pagination { margin-top: clamp(40px, 5vw, 64px); }
.rnv-blog-hub__pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.rnv-blog-hub__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.rnv-blog-hub__pagination .page-numbers:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.rnv-blog-hub__pagination .page-numbers.current {
  color: #fff;
  background: var(--c-red);
  border-color: var(--c-red);
}
.rnv-blog-hub__empty {
  font-family: var(--f-body);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 980px) {
  .rnv-blog-hub__featured { grid-template-columns: 1fr; }
  .rnv-blog-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rnv-blog-hub__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rnv-blog-hub__featured,
  .rnv-blog-hub__card-link,
  .rnv-blog-hub__featured-media img,
  .rnv-blog-hub__card-media img,
  .rnv-blog-hub__featured-cta,
  .rnv-blog-hub__chip { transition: none; }
}

/* ==============================
   Smooth scroll + offset header sticky (RNV-087)
   ============================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
:where(h2, h3, h4, [id]) {
  scroll-margin-top: 96px;
}

/* ==============================
   PAGE TRANSITIONS — View Transitions API (MPA) con DOS modos disjuntos
   ────────────────────────────────────────
   Modo 1 — rnv-same-page: el user re-clickea el link de la página actual.
            Solo cascadea el contenido del hero; root y header quedan estáticos.
   Modo 2 — rnv-cross-page: navegación a otra página.
            La página entera (incluido header) slide sutil desde la derecha.

   El JS rnv-page-transitions.js detecta el tipo y:
     1. setea data-vt-type en <html> (pre-snapshot) para que las reglas
        view-transition-name condicionales tomen efecto al capturar
     2. añade el type al ViewTransition object para activar
        :active-view-transition-type() en el CSS
   ============================== */
@view-transition { navigation: auto; }

/* --- Anchors nombrados: solo aplican en SAME-page mode. En cross-page se
   desactivan via data-vt-type para que el root entero anime como bloque. --- */
.site-header  { view-transition-name: rnv-header; }
.hero         { view-transition-name: rnv-hero-section; }
.hero__row    { view-transition-name: rnv-hero-row; }
.hero__title  { view-transition-name: rnv-hero-title; }
.hero__ctas   { view-transition-name: rnv-hero-ctas; }

:root[data-vt-type="cross"] .site-header,
:root[data-vt-type="cross"] .hero,
:root[data-vt-type="cross"] .hero__row,
:root[data-vt-type="cross"] .hero__title,
:root[data-vt-type="cross"] .hero__ctas {
  view-transition-name: none;
}

/* === Modo 1: SAME-PAGE (re-click en la página actual) ===
   Solo cascadea el hero content. Root y header NO animan — siguen estáticos. */
:root:active-view-transition-type(rnv-same-page)::view-transition-old(root),
:root:active-view-transition-type(rnv-same-page)::view-transition-new(root),
:root:active-view-transition-type(rnv-same-page)::view-transition-old(rnv-header),
:root:active-view-transition-type(rnv-same-page)::view-transition-new(rnv-header),
:root:active-view-transition-type(rnv-same-page)::view-transition-old(rnv-hero-section),
:root:active-view-transition-type(rnv-same-page)::view-transition-new(rnv-hero-section) {
  animation: none;
}

:root:active-view-transition-type(rnv-same-page)::view-transition-new(rnv-hero-row) {
  animation: rnv-hero-row-enter 900ms cubic-bezier(0.85, 0, 0, 1) 80ms forwards;
}
:root:active-view-transition-type(rnv-same-page)::view-transition-new(rnv-hero-title) {
  animation: rnv-hero-title-enter 800ms cubic-bezier(0.85, 0, 0, 1) 200ms forwards;
}
:root:active-view-transition-type(rnv-same-page)::view-transition-new(rnv-hero-ctas) {
  animation: rnv-fade-in 600ms cubic-bezier(0.85, 0, 0, 1) 500ms forwards;
}

@keyframes rnv-hero-row-enter   { from { transform: translateY(60px); opacity: 0; } }
@keyframes rnv-hero-title-enter { from { transform: translateX(60px); opacity: 0; } }
@keyframes rnv-fade-in          { from { opacity: 0; } }

/* === Modo 2: CROSS-PAGE (navegación a otra página) ===
   La página entera (root snapshot incluye TODO porque view-transition-name están
   apagados) slide sutil desde la derecha — translateX 40% para no invadir todo
   el viewport, manteniendo sensación de depth pero sin overpowering. */
:root:active-view-transition-type(rnv-cross-page)::view-transition-old(root) {
  animation: rnv-page-fade-out 350ms cubic-bezier(0.85, 0, 0, 1) forwards;
}
:root:active-view-transition-type(rnv-cross-page)::view-transition-new(root) {
  animation: rnv-page-slide-in-right 700ms cubic-bezier(0.85, 0, 0, 1) forwards;
}

@keyframes rnv-page-fade-out      { to   { opacity: 0; } }
@keyframes rnv-page-slide-in-right {
  from { transform: translateX(40%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

/* Reduced motion: matar todas las animations en ambos modos. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* ==============================
   Carreras page — extras específicos
   File upload glass + lista de perks + lista de pasos numerados
   ============================== */

/* H1 hero del careers en blanco (mirror de contacto) */
body.page-template-page-carreras main > .wp-block-group > .wp-block-group > .wp-block-group > h1,
body.page-template-page-carreras .rnv-carreras-hero h1 {
  color: #fff;
}
body.page-template-page-carreras main > .wp-block-group > .wp-block-group > .wp-block-group > p,
body.page-template-page-carreras .rnv-carreras-hero p {
  color: rgba(255, 255, 255, 0.65);
}

/* Hero split: text + visual constellation SVG */
body.page-template-page-carreras .rnv-carreras-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
body.page-template-page-carreras .rnv-carreras-hero__text {
  max-width: 560px;
}
body.page-template-page-carreras .rnv-carreras-hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 6;
  overflow: hidden;
}
body.page-template-page-carreras .rnv-carreras-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fade hacia el lado izquierdo (donde está el texto) para integración suave */
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
}

/* Tablet: visual más comprimido pero visible */
@media (max-width: 1100px) {
  body.page-template-page-carreras .rnv-carreras-hero {
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
  }
}

/* Mobile: visual oculto (texto full-width) */
@media (max-width: 781px) {
  body.page-template-page-carreras .rnv-carreras-hero {
    grid-template-columns: 1fr;
  }
  body.page-template-page-carreras .rnv-carreras-hero__visual {
    display: none;
  }
}

/* Hero split Contacto: SVG ripples + texto leídos como UNA columna —
   grid asimétrico (texto wider), gap=0, mask gradiente largo del SVG
   crea continuidad visual entre el título y las partículas. */
body.page-template-page-contacto .rnv-contacto-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0;
  align-items: center;
}
body.page-template-page-contacto .rnv-contacto-hero__text {
  max-width: none;
}
body.page-template-page-contacto .rnv-contacto-hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 6;
  overflow: hidden;
}
body.page-template-page-contacto .rnv-contacto-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mask fade más largo (38% en lugar de 18%) para que las partículas
     se desvanezcan suavemente hacia el área del texto y se sientan
     como atmósfera alrededor del título, no como columna separada. */
  mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
}
@media (max-width: 1100px) {
  body.page-template-page-contacto .rnv-contacto-hero {
    grid-template-columns: 1.5fr 1fr;
  }
}
@media (max-width: 781px) {
  body.page-template-page-contacto .rnv-contacto-hero {
    grid-template-columns: 1fr;
  }
  body.page-template-page-contacto .rnv-contacto-hero__visual {
    display: none;
  }
}

/* File upload: estilo glass con botón pseudo */
body.page-template-page-carreras .wpcf7 input[type="file"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.75);
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: var(--f-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
  width: 100%;
}
body.page-template-page-carreras .wpcf7 input[type="file"]:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.07);
}
body.page-template-page-carreras .wpcf7 input[type="file"]:focus {
  border-color: var(--c-red);
  background: rgba(158, 51, 57, 0.08);
  box-shadow: 0 0 0 3px rgba(158, 51, 57, 0.25);
  outline: 0;
}
body.page-template-page-carreras .wpcf7 input[type="file"]::-webkit-file-upload-button,
body.page-template-page-carreras .wpcf7 input[type="file"]::file-selector-button {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  margin-right: 14px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 200ms ease;
}
body.page-template-page-carreras .wpcf7 input[type="file"]:hover::-webkit-file-upload-button,
body.page-template-page-carreras .wpcf7 input[type="file"]:hover::file-selector-button {
  background: rgba(255, 255, 255, 0.2);
}

/* Checkbox de aceptación: glass + label visible */
body.page-template-page-carreras .wpcf7 .wpcf7-acceptance,
body.page-template-page-carreras .wpcf7 span.wpcf7-list-item {
  display: block;
  margin: 0;
}
body.page-template-page-carreras .wpcf7 .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
body.page-template-page-carreras .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  accent-color: var(--c-red);
  cursor: pointer;
}
body.page-template-page-carreras .wpcf7 .wpcf7-acceptance a {
  color: #fff;
  text-decoration: underline;
}

/* Perks list (¿Por qué Rinnovo?) */
body.page-template-page-carreras .rnv-careers-perks {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.page-template-page-carreras .rnv-careers-perks li {
  position: relative;
  padding: 0 0 16px 24px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
}
body.page-template-page-carreras .rnv-careers-perks li:last-child {
  padding-bottom: 0;
}
body.page-template-page-carreras .rnv-careers-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red);
}
body.page-template-page-carreras .rnv-careers-perks li strong {
  color: #fff;
  font-weight: 600;
}

/* Steps list (Cómo es el proceso) */
body.page-template-page-carreras .rnv-careers-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
body.page-template-page-carreras .rnv-careers-steps li {
  position: relative;
  padding: 6px 0 16px 44px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
  counter-increment: step;
}
body.page-template-page-carreras .rnv-careers-steps li:last-child {
  padding-bottom: 0;
}
body.page-template-page-carreras .rnv-careers-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(158, 51, 57, 0.15);
  border: 1px solid rgba(158, 51, 57, 0.45);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: form full width, mantener spacing */
@media (max-width: 781px) {
  body.page-template-page-carreras .wp-block-columns {
    gap: var(--wp--preset--spacing--md);
  }
}

/* Form grid 2-col para reducir scroll en desktop */
body.page-template-page-carreras .wpcf7 .cf7-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin: 0 0 1em 0;
}
body.page-template-page-carreras .wpcf7 .cf7-grid .cf7-half {
  margin: 0;
  min-width: 0;
}
body.page-template-page-carreras .wpcf7 .cf7-grid .cf7-half .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
body.page-template-page-carreras .wpcf7 .cf7-grid .cf7-half input,
body.page-template-page-carreras .wpcf7 .cf7-grid .cf7-half select {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  body.page-template-page-carreras .wpcf7 .cf7-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   LANDING ESTA SEMANA — DDI 2026 (post-launch 2026-05-20)
   Recurso descargable: /esta-semana
   ================================================================= */

/* ------- HERO ------- */
.rnv-landing-hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
}
.rnv-landing-hero__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}
.rnv-landing-hero__deco svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rnv-landing-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.rnv-landing-hero__layout {
  width: 100%;
}
.rnv-landing-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.rnv-landing-hero__text {
  min-width: 0;
}
.rnv-landing-hero__eyebrow {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rnv-landing-hero__h1 {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  color: #FFFFFF;
  margin: 0 0 var(--wp--preset--spacing--md) 0;
}
.rnv-landing-hero__accent {
  color: #FFFFFF;
}
.rnv-landing-hero__dot {
  color: var(--wp--preset--color--red-500);
}
.rnv-landing-hero__sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
  line-height: 1.5;
  margin: 0 0 var(--wp--preset--spacing--lg) 0;
  max-width: 52ch;
}
.rnv-landing-hero__cta-wrap {
  margin-bottom: var(--wp--preset--spacing--md);
}
.rnv-landing-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 18px 32px;
  background: var(--wp--preset--color--red-600);
  color: #FFFFFF;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  box-shadow: 0 4px 20px rgba(194, 65, 72, 0.35);
}
.rnv-landing-hero__cta:hover {
  transform: translateY(-2px);
  background: var(--wp--preset--color--red-500);
  box-shadow: 0 8px 28px rgba(194, 65, 72, 0.55);
  color: #FFFFFF;
}
.rnv-landing-hero__cta::after {
  content: "↓";
  font-size: 1.1em;
  margin-left: 0.25em;
}
.rnv-landing-hero__meta {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8125rem;
  margin: 0;
  line-height: 1.5;
}

/* ------- BOOK 3D ------- */
.rnv-landing-hero__book-stage {
  perspective: 1800px;
  perspective-origin: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.rnv-landing-hero__book {
  position: relative;
  width: clamp(240px, 30vw, 420px);
  aspect-ratio: 1028 / 1456;
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(2deg);
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
}
.rnv-landing-hero__book img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 4px 4px 2px;
  box-shadow:
    inset 6px 0 12px rgba(0, 0, 0, 0.25),
    inset 14px 0 0 rgba(255, 255, 255, 0.04);
  position: relative;
  z-index: 2;
}
/* Lomo (spine) — lateral izquierdo del libro proyectado en 3D */
.rnv-landing-hero__book::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  background: linear-gradient(
    to right,
    #050614 0%,
    #0d0e22 35%,
    #1a1b3a 70%,
    #2a2b4a 100%
  );
  transform: rotateY(-90deg);
  transform-origin: left center;
  border-radius: 1px 0 0 1px;
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.5);
}
/* Bordes laterales de páginas (efecto grosor) */
.rnv-landing-hero__book::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 0;
  width: 8px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(220, 220, 230, 0.85) 30%,
    rgba(180, 180, 200, 0.95) 70%,
    rgba(140, 140, 160, 0.7) 100%
  );
  transform: rotateY(80deg);
  transform-origin: left center;
  border-radius: 0 2px 2px 0;
}
.rnv-landing-hero__book:hover {
  transform: rotateY(-12deg) rotateX(1deg) translateY(-6px);
}

/* Responsive: tablet — book más pequeño */
@media (max-width: 1024px) {
  .rnv-landing-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .rnv-landing-hero__book {
    width: clamp(200px, 30vw, 320px);
  }
}

/* Responsive: mobile — stack vertical, book centrado abajo del texto */
@media (max-width: 768px) {
  .rnv-landing-hero {
    min-height: auto;
    padding-top: clamp(80px, 12vh, 140px) !important;
    padding-bottom: clamp(80px, 12vh, 140px) !important;
  }
  .rnv-landing-hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 8vw, 4rem);
    text-align: left;
  }
  .rnv-landing-hero__book-stage {
    order: 2;
    perspective: 1400px;
  }
  .rnv-landing-hero__book {
    width: clamp(180px, 50vw, 280px);
    transform: rotateY(-14deg) rotateX(2deg);
  }
  .rnv-landing-hero__book::before {
    width: 16px;
  }
  .rnv-landing-hero__book::after {
    width: 6px;
  }
  .rnv-landing-hero__sub {
    font-size: 1.0625rem;
  }
  .rnv-landing-hero__cta {
    padding: 16px 28px;
    font-size: 0.9375rem;
  }
}

/* Reduced motion: pin la rotación pero quita transition */
@media (prefers-reduced-motion: reduce) {
  .rnv-landing-hero__book {
    transition: none;
  }
  .rnv-landing-hero__book:hover {
    transform: rotateY(-18deg) rotateX(2deg);
  }
}

/* ------- STAT 90% ------- */
.rnv-landing-stat__num-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  line-height: 0.85;
  margin-top: var(--wp--preset--spacing--xs);
}
.rnv-landing-stat__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(7rem, 18vw, 14rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--wp--preset--color--red-500);
  line-height: 0.85;
}
.rnv-landing-stat__pct {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--red-500);
  line-height: 0.85;
}
.rnv-landing-stat__sub {
  max-width: 64ch;
}
.rnv-landing-stat__quote {
  margin-top: var(--wp--preset--spacing--md);
  max-width: 60ch;
}
.rnv-landing-stat__quote p {
  margin: 0;
}

/* ------- THREE MOVEMENTS ------- */
.rnv-landing-movements__intro {
  max-width: 64ch;
}
.rnv-landing-movements__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--md);
  margin-top: var(--wp--preset--spacing--md);
}
@media (max-width: 1024px) {
  .rnv-landing-movements__grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--sm);
  }
}
.rnv-landing-movement {
  position: relative;
  padding: var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--n-100);
  border-radius: 6px;
  border-top: 4px solid var(--wp--preset--color--red-500);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
  display: flex;
  flex-direction: column;
}
.rnv-landing-movement:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(8, 9, 30, 0.08);
}
.rnv-landing-movement--01 { border-top-color: var(--wp--preset--color--red-500); }
.rnv-landing-movement--02 { border-top-color: #6B6E94; }
.rnv-landing-movement--03 { border-top-color: #F2C94C; }
.rnv-landing-movement__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--n-200);
  margin-bottom: var(--wp--preset--spacing--xs);
}
.rnv-landing-movement--01 .rnv-landing-movement__num { color: var(--wp--preset--color--red-500); }
.rnv-landing-movement--02 .rnv-landing-movement__num { color: #6B6E94; }
.rnv-landing-movement--03 .rnv-landing-movement__num { color: #C4961A; }
.rnv-landing-movement__label {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--n-500);
  margin-bottom: var(--wp--preset--spacing--2xs);
}
.rnv-landing-movement__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--wp--preset--color--navy-800);
  margin: 0 0 var(--wp--preset--spacing--xs) 0;
}
.rnv-landing-movement__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--wp--preset--color--n-700);
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
}
.rnv-landing-movement__metrics {
  list-style: none;
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
  padding: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--sm) 0;
  border-top: 1px solid var(--wp--preset--color--n-100);
  border-bottom: 1px solid var(--wp--preset--color--n-100);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--2xs);
}
.rnv-landing-movement__metrics li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rnv-landing-movement__metrics strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--navy-800);
  line-height: 1.15;
}
.rnv-landing-movement__metrics span {
  font-size: 0.75rem;
  color: var(--wp--preset--color--n-500);
  letter-spacing: 0.02em;
}
.rnv-landing-movement__quote {
  margin: auto 0 0 0;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--wp--preset--color--n-500);
}

/* ------- WHAT'S INSIDE ------- */
.rnv-landing-inside__toc {
  list-style: none;
  margin: var(--wp--preset--spacing--md) 0 0 0;
  padding: 0;
  counter-reset: rnv-toc;
}
.rnv-landing-inside__toc li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--sm) 0;
  border-bottom: 1px solid var(--wp--preset--color--n-200);
  align-items: baseline;
}
.rnv-landing-inside__toc li:last-child {
  border-bottom: none;
}
.rnv-landing-inside__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--wp--preset--color--red-500);
  line-height: 1;
  letter-spacing: -0.02em;
}
.rnv-landing-inside__toc li strong {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 700;
  color: var(--wp--preset--color--navy-800);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.rnv-landing-inside__toc li span {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--wp--preset--color--n-700);
}
@media (max-width: 600px) {
  .rnv-landing-inside__toc li {
    grid-template-columns: 48px 1fr;
    gap: var(--wp--preset--spacing--xs);
  }
}

/* ------- CTA FINAL ------- */
.rnv-landing-cta-band {
  position: relative;
  overflow: hidden;
}
.rnv-landing-cta-band__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}
.rnv-landing-cta-band__deco svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rnv-landing-cta-band .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}
.rnv-landing-cta-band__btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.rnv-landing-cta-band__btn .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}
.rnv-landing-cta-band__btn .wp-block-button__link::after {
  content: "↓";
  font-size: 1.1em;
  margin-left: 0.25em;
}

/* ------- AUTHOR ------- */
.rnv-landing-author__note p:first-child {
  margin-top: 0;
}
.rnv-landing-author__note p:last-child {
  margin-bottom: 0;
}

/* ------- REDUCED MOTION ------- */
@media (prefers-reduced-motion: reduce) {
  .rnv-landing-hero__cta .wp-block-button__link,
  .rnv-landing-cta-band__btn .wp-block-button__link,
  .rnv-landing-movement {
    transition: none;
  }
  .rnv-landing-hero__cta .wp-block-button__link:hover,
  .rnv-landing-cta-band__btn .wp-block-button__link:hover,
  .rnv-landing-movement:hover {
    transform: none;
  }
}

/* ============================================================
   LEADERSHIP — Nosotros · about-team pattern
   Layout estilo Accenture: cards horizontales (foto + texto al lado),
   2 cols en desktop, sobre fondo navy-900. Retratos B&N compactos,
   LinkedIn como icono limpio con hover sutil.
   ============================================================ */
.rnv-leadership__head {
  text-align: left;
}
.rnv-leadership__eyebrow {
  margin: 0 0 var(--wp--preset--spacing--sm, 1rem) 0;
}
.rnv-leadership__title {
  margin: 0;
  max-width: 18ch;
}
.rnv-leadership__grid {
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
}
.rnv-leadership .rnv-leadership__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .rnv-leadership .rnv-leadership__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Card: foto izquierda + body derecha */
.rnv-leadership__card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  text-align: left;
}
/* Override WP layout-constrained centering inside cards.
   WP core :where(.is-layout-constrained) > :where(...) uses margin: auto !important
   so we need !important too to undo it. */
.rnv-leadership .rnv-leadership__card > *,
.rnv-leadership .rnv-leadership__body > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}

.rnv-leadership__media {
  display: block;
  flex: 0 0 auto;
  width: clamp(150px, 22vw, 200px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--wp--preset--color--navy-800);
  position: relative;
  isolation: isolate;
  border-radius: 2px;
  text-decoration: none;
}
.rnv-leadership__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.rnv-leadership__media:hover img,
.rnv-leadership__media:focus-visible img {
  transform: scale(1.035);
}
.rnv-leadership__media:focus-visible {
  outline: 2px solid var(--wp--preset--color--red-500);
  outline-offset: 4px;
}

.rnv-leadership__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  text-align: left;
  gap: 0.4rem;
  padding-top: 0.15rem;
  min-width: 0;
}
.rnv-leadership__name {
  margin: 0;
}
.rnv-leadership__role {
  margin: 0;
  letter-spacing: 0.01em;
  max-width: 32ch;
}
.rnv-leadership__card .rnv-leadership__name,
.rnv-leadership__card .rnv-leadership__role {
  text-align: left;
  width: 100%;
}

/* LinkedIn: solo icono blanco, sin recuadro. Hover sutil de opacidad + leve scale. */
.rnv-leadership__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 22px;
  height: 22px;
  color: var(--wp--preset--color--white);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: auto;
  opacity: 0.72;
  transition: opacity 220ms ease, transform 220ms ease;
}
.rnv-leadership__linkedin svg {
  display: block;
  width: 22px;
  height: 22px;
}
.rnv-leadership__linkedin:hover,
.rnv-leadership__linkedin:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  text-decoration: none;
  background: transparent;
  color: var(--wp--preset--color--white);
}
.rnv-leadership__linkedin:focus-visible {
  outline: 2px solid var(--wp--preset--color--red-500);
  outline-offset: 4px;
}

/* Móvil: foto más compacta para no robar espacio al texto. */
@media (max-width: 560px) {
  .rnv-leadership__media {
    width: 130px;
  }
  .rnv-leadership__card {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rnv-leadership__media img,
  .rnv-leadership__linkedin {
    transition: none;
  }
  .rnv-leadership__media:hover img,
  .rnv-leadership__media:focus-visible img,
  .rnv-leadership__linkedin:hover,
  .rnv-leadership__linkedin:focus-visible {
    transform: none;
  }
}

/* ==============================
   Portal de autoría (login + editor + mis entradas)
   Glass on navy — reutiliza el tratamiento de contacto/carreras.
   Scoped a .page-template-page-portal.
   ============================== */
.page-template-page-portal .rnv-landing {
  padding-block: clamp(88px, 12vw, 140px) var(--section-pad);
}
.page-template-page-portal .rnv-portal,
.page-template-page-portal .rnv-landing > .wp-block-post-content {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--wp--custom--spacing--container-pad-x, clamp(16px, 4vw, 48px));
}

/* ── Campos base (compartidos) ── */
.page-template-page-portal .rnv-field { margin-bottom: 22px; }
.page-template-page-portal .rnv-field__label {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.page-template-page-portal .rnv-field__opt {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}
.page-template-page-portal .rnv-field__input {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 14px 18px;
  min-height: 52px;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  -webkit-text-fill-color: #fff;
}
.page-template-page-portal textarea.rnv-field__input {
  min-height: auto;
  resize: vertical;
  line-height: 1.6;
}
.page-template-page-portal .rnv-field__input--lg {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-template-page-portal .rnv-field__input::placeholder { color: rgba(255, 255, 255, 0.38); }
.page-template-page-portal .rnv-field__input:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}
.page-template-page-portal .rnv-field__input:focus {
  border-color: var(--c-red);
  background: rgba(158, 51, 57, 0.08);
  box-shadow: 0 0 0 3px rgba(158, 51, 57, 0.25);
  outline: 0;
}
.page-template-page-portal select.rnv-field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff99' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
}
.page-template-page-portal select.rnv-field__input option { background: var(--c-navy); color: #fff; }
.page-template-page-portal .rnv-field__counter {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* ── Botones ── */
.page-template-page-portal .rnv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  min-height: 50px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.page-template-page-portal .rnv-btn--primary {
  background: var(--c-red);
  color: #fff;
  box-shadow: 0 4px 16px rgba(158, 51, 57, 0.25);
}
.page-template-page-portal .rnv-btn--primary:hover {
  background: #b73c44;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(158, 51, 57, 0.35);
}
.page-template-page-portal .rnv-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.page-template-page-portal .rnv-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
}
.page-template-page-portal .rnv-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.page-template-page-portal .rnv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Login (hero full-bleed con onda de partículas) ── */
/* En la página de acceso liberamos el ancho constreñido del portal para que el
   hero ocupe todo el viewport, como el resto de heroes del sitio. */
.page-template-page-portal .rnv-portal:has(.rnv-portal-auth) {
  max-width: none;
  margin-inline: 0;
  padding: 0;
}
.page-template-page-portal .rnv-landing > .wp-block-post-content:has(.rnv-portal-auth) {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
.rnv-portal-auth.rnv-hero { justify-content: center; }
.rnv-portal-auth__inner {
  display: flex;
  justify-content: center;
}
.rnv-portal-auth__card {
  width: 100%;
  max-width: 440px;
  background: rgba(20, 22, 52, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: clamp(28px, 5vw, 44px);
  box-shadow: 0 24px 60px rgba(8, 9, 30, 0.5);
}
.rnv-portal-auth__eyebrow {
  color: var(--c-red);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.rnv-portal-auth__title { font-size: clamp(28px, 4vw, 36px); margin: 0 0 10px; color: #fff; }
.rnv-portal-auth__lead { color: rgba(255, 255, 255, 0.6); margin: 0 0 28px; font-size: 15px; line-height: 1.6; }
.rnv-portal-auth__error {
  background: rgba(255, 138, 147, 0.1);
  border: 1px solid rgba(255, 138, 147, 0.4);
  color: #ff8a93;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}
.rnv-portal-auth__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 4px 0 24px;
  cursor: pointer;
}
.rnv-portal-auth__remember input { accent-color: var(--c-red); width: 16px; height: 16px; }
.rnv-portal-auth__submit { width: 100%; }
.rnv-portal-auth__submit.is-loading { opacity: 0.6; pointer-events: none; }

/* ── Nav del portal ── */
.rnv-portal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--c-navy-border);
}
.rnv-portal-nav__eyebrow {
  display: block;
  color: var(--c-red);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rnv-portal-nav__user { color: #fff; font-weight: 600; font-size: 15px; }
.rnv-portal-nav__links { display: flex; align-items: center; gap: 20px; }
.rnv-portal-nav__link,
.rnv-portal-nav__logout {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 200ms ease;
}
.rnv-portal-nav__link:hover,
.rnv-portal-nav__link.is-active,
.rnv-portal-nav__logout:hover { color: #fff; }
.rnv-portal-nav__link.is-active { border-bottom: 2px solid var(--c-red); padding-bottom: 4px; }

/* ── Editor ── */
.rnv-editor__head { margin-bottom: 28px; }
.rnv-editor__title { font-size: clamp(26px, 4vw, 34px); margin: 0 0 8px; color: #fff; }
.rnv-editor__hint { color: rgba(255, 255, 255, 0.55); font-size: 14px; line-height: 1.6; margin: 0; }

.rnv-editor__types { border: 0; padding: 0; margin: 0 0 26px; min-inline-size: 0; }
.rnv-typecards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.rnv-typecard { position: relative; display: flex; cursor: pointer; }
.rnv-typecard input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.rnv-typecard__box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.rnv-typecard:hover .rnv-typecard__box { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); }
.rnv-typecard__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 200ms ease, color 200ms ease;
}
.rnv-typecard__text { display: flex; flex-direction: column; gap: 4px; }
.rnv-typecard__title { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: #fff; }
.rnv-typecard__desc { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }
.rnv-typecard__check {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: transparent;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.rnv-typecard input:checked + .rnv-typecard__box {
  border-color: var(--c-red);
  background: rgba(158, 51, 57, 0.12);
}
.rnv-typecard input:checked + .rnv-typecard__box .rnv-typecard__icon { background: var(--c-red); color: #fff; }
.rnv-typecard input:checked + .rnv-typecard__box .rnv-typecard__check { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.rnv-typecard input:focus-visible + .rnv-typecard__box { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) {
  .rnv-typecards { grid-template-columns: 1fr; }
}

/* Cabecera de grupo (Clasificación del blog) */
.rnv-editor__group-head { margin: 4px 0 14px; }
.rnv-editor__group-title { font-family: var(--f-display); font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.rnv-editor__group-hint { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); margin: 0; }
.rnv-editor__taxonomies {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--c-navy-border);
}

/* Cabecera del cuerpo con botón de carrusel */
.rnv-editor__body-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rnv-editor__cx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.rnv-editor__cx-btn:hover { border-color: var(--c-red); background: rgba(158, 51, 57, 0.14); color: #fff; }
.rnv-editor__cx-btn svg { color: var(--c-red); }
.rnv-editor__cx-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Dropzone */
.rnv-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.rnv-dropzone:hover,
.rnv-dropzone:focus-visible,
.rnv-dropzone.is-dragover {
  border-color: var(--c-red);
  background: rgba(158, 51, 57, 0.08);
  outline: none;
}
.rnv-dropzone__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  padding: 24px;
}
.rnv-dropzone__placeholder span { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.rnv-dropzone__placeholder small { font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.rnv-dropzone__preview { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.rnv-dropzone__remove {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(16, 17, 42, 0.8);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.rnv-dropzone__remove:hover { background: var(--c-red); }
.rnv-dropzone__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
}
.rnv-dropzone__progress span { display: block; height: 100%; width: 40%; background: var(--c-red); animation: rnv-portal-progress 1s ease-in-out infinite; }
@keyframes rnv-portal-progress { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* Cuerpo TinyMCE — encuadre del wrapper (el iframe usa editor-content.css) */
.rnv-editor__body .wp-editor-wrap { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); }
.rnv-editor__body .wp-editor-tools { background: rgba(255, 255, 255, 0.04); }
.rnv-editor__body .wp-editor-container { border: 0; }
.rnv-editor__body .mce-toolbar-grp,
.rnv-editor__body .quicktags-toolbar { border-color: rgba(0, 0, 0, 0.08); }

/* Taxonomías */
.rnv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rnv-chip { position: relative; cursor: pointer; }
.rnv-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rnv-chip span {
  display: block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.rnv-chip input:checked + span { background: rgba(158, 51, 57, 0.18); border-color: var(--c-red); color: #fff; }
.rnv-chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

/* Barra de acciones */
.rnv-editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--c-navy-border);
}
.rnv-editor__stats { color: rgba(255, 255, 255, 0.5); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.rnv-editor__stats-sep { color: rgba(255, 255, 255, 0.25); }
.rnv-editor__status { flex: 1 1 auto; font-size: 13px; min-height: 18px; color: rgba(255, 255, 255, 0.5); }
.rnv-editor__status.is-saving { color: rgba(255, 255, 255, 0.6); }
.rnv-editor__status.is-saved { color: #6ee7a8; }
.rnv-editor__status.is-error { color: #ff8a93; }
.rnv-editor__actions { display: flex; gap: 12px; margin-left: auto; }

/* Panel de confirmación */
.rnv-editor__done {
  text-align: center;
  padding: clamp(40px, 8vw, 80px) 24px;
  color: #fff;
}
.rnv-editor__done svg { color: #6ee7a8; margin-bottom: 16px; }
.rnv-editor__done h2 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 12px; }
.rnv-editor__done p { color: rgba(255, 255, 255, 0.6); max-width: 460px; margin: 0 auto 28px; line-height: 1.6; }
.rnv-editor__done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Modal constructor de carrusel ── */
body.rnv-cx-modal-open { overflow: hidden; }
.rnv-cxmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rnv-cxmodal[hidden] { display: none; }
.rnv-cxmodal__backdrop { position: absolute; inset: 0; background: rgba(6, 7, 20, 0.7); backdrop-filter: blur(4px); }
.rnv-cxmodal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--c-navy);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.rnv-cxmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rnv-cxmodal__title { font-family: var(--f-display); font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.rnv-cxmodal__x { width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background-color 200ms ease; }
.rnv-cxmodal__x:hover { background: var(--c-red); }
.rnv-cxmodal__sub { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); margin: 0 0 18px; }
.rnv-cxmodal__drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px; text-align: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.22); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.rnv-cxmodal__drop:hover, .rnv-cxmodal__drop:focus-visible, .rnv-cxmodal__drop.is-dragover {
  border-color: var(--c-red); background: rgba(158, 51, 57, 0.08); outline: none;
}
.rnv-cxmodal__drop span { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.rnv-cxmodal__drop small { font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.rnv-cxmodal__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rnv-cxmodal__row { display: flex; align-items: center; gap: 12px; }
.rnv-cxmodal__thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.rnv-cxmodal__cap {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
  color: #fff; font-size: 13px;
}
.rnv-cxmodal__cap::placeholder { color: rgba(255, 255, 255, 0.35); }
.rnv-cxmodal__cap:focus { outline: none; border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(158, 51, 57, 0.35); }
.rnv-cxmodal__rm { width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color 200ms ease; }
.rnv-cxmodal__rm:hover { background: var(--c-red); }
.rnv-cxmodal__foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.rnv-cxmodal__status { flex: 1 1 auto; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.rnv-cxmodal__status.is-saving { color: rgba(255, 255, 255, 0.7); }
.rnv-cxmodal__status.is-saved { color: #6ee7a8; }
.rnv-cxmodal__status.is-error { color: #ff8a93; }
.rnv-cxmodal__actions { display: flex; gap: 10px; }

/* ── Carrusel de cuerpo (público, single blog/noticia) ── */
.rnv-cx { position: relative; margin: 2.4em 0; }
.rnv-cx__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 14px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.rnv-cx__viewport::-webkit-scrollbar { display: none; }
.rnv-cx__track { display: flex; }
.rnv-cx__slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; margin: 0; }
.rnv-cx__img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 14px; }
.rnv-cx.is-single .rnv-cx__img { border-radius: 14px; }
.rnv-cx__caption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); text-align: center; padding: 0 12px; font-family: var(--f-body); }
.rnv-cx__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(16, 17, 42, 0.72); color: #fff; cursor: pointer;
  transition: background-color 200ms ease, opacity 200ms ease;
}
.rnv-cx__nav:hover { background: var(--c-red); }
.rnv-cx__nav:focus-visible { outline: 3px solid var(--c-red); outline-offset: 2px; }
.rnv-cx__nav--prev { left: 12px; }
.rnv-cx__nav--next { right: 12px; }
.rnv-cx__nav:disabled { opacity: 0; pointer-events: none; }
.rnv-cx__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.rnv-cx__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.26); cursor: pointer; transition: background-color 200ms ease, transform 200ms ease; }
.rnv-cx__dot:hover { background: rgba(255, 255, 255, 0.55); }
.rnv-cx__dot.is-active { background: var(--c-red); transform: scale(1.25); }
.rnv-cx__dot:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .rnv-cx__viewport { scroll-behavior: auto; }
  .rnv-cx__dot { transition: none; }
}

/* ── Mis entradas ── */
.rnv-myposts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.rnv-myposts__title { font-size: clamp(26px, 4vw, 34px); margin: 0; color: #fff; }
.rnv-myposts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rnv-myposts__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.rnv-myposts__item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.rnv-myposts__main { min-width: 0; }
.rnv-myposts__type {
  display: inline-block;
  color: var(--c-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rnv-myposts__item-title { font-size: 17px; margin: 0 0 4px; color: #fff; font-family: var(--f-body); font-weight: 600; }
.rnv-myposts__date { font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.rnv-myposts__meta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.rnv-myposts__action { color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 200ms ease; }
.rnv-myposts__action:hover { color: #fff; }
.rnv-myposts__empty { text-align: center; padding: 60px 24px; color: rgba(255, 255, 255, 0.55); }
.rnv-myposts__empty p { margin: 0 0 20px; }

/* Badges de estado */
.rnv-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.rnv-badge--draft { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }
.rnv-badge--pending { background: rgba(232, 168, 56, 0.16); color: #f0c46a; }
.rnv-badge--publish { background: rgba(15, 138, 79, 0.18); color: #6ee7a8; }

.rnv-portal-notice {
  text-align: center;
  padding: 60px 24px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

@media (max-width: 640px) {
  .rnv-editor__bar { flex-direction: column; align-items: stretch; }
  .rnv-editor__actions { margin-left: 0; }
  .rnv-editor__actions .rnv-btn { flex: 1; }
  .rnv-myposts__item { flex-direction: column; align-items: flex-start; }
  .rnv-myposts__meta { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .rnv-dropzone__progress span { animation: none; }
  .page-template-page-portal .rnv-btn:hover { transform: none; }
}