/**
 * REFORMAS YAMYLU — Hero Section
 * Incluye: header/nav, mobile menu, hero section completa
 * Coherente con DESIGN_SYSTEM.md en su totalidad
 */

/* ═══════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes heroImgEnter {
  from {
    opacity: 0;
    transform: scale(1.07);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lineReveal {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes scrollDot {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(28px);
    opacity: 0;
  }
}

@keyframes navFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════
   HEADER / NAVEGACIÓN
   DESIGN_SYSTEM.md §12
═══════════════════════════════════════════ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  transition:
    background var(--duration-base) var(--ease-premium),
    backdrop-filter var(--duration-base) var(--ease-premium),
    border-color var(--duration-base) var(--ease-premium);
  border-bottom: 1px solid transparent;

  animation: navFadeIn 800ms var(--ease-premium) 200ms both;
}

.nav--scrolled {
  background: var(--color-night-blur);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom-color: rgba(201, 164, 74, 0.12);
}

.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 80px;
  column-gap: 0;
}

/* Logo */
.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 2;
}

.nav__logo-img {
  height: 42px;
  width: auto;
  display: block;
  /* Wordmark SVG — sin filtros, sin efectos, sin modificaciones */
  transition: opacity var(--duration-fast) ease;
}

.nav__logo-img:hover {
  opacity: 0.82;
}

/* Menú principal — desktop */
.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  position: static;
  transform: none;
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.72);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-fast) ease;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 350ms var(--ease-premium);
}

.nav__link:hover {
  color: var(--color-white);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

.nav__link.active {
  color: var(--color-gold);
}

.nav__link.active::after {
  transform: scaleX(1);
}

/* Separación editorial entre "Contacto" (último enlace del menú) y el
   teléfono (primer elemento de nav__actions) — Sprint 017A. Ambos bloques
   son columnas de grid adyacentes sin gap propio entre sí; a resoluciones
   de escritorio amplias (donde el teléfono es visible, ≥1281px) quedaban
   demasiado próximos. Ajuste mínimo, solo en ese rango — ver
   @media (min-width: 1281px) más abajo. No afecta al resto de gaps del
   menú (26px) ni de nav__actions (20px). */

/* Acciones — derecha */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  justify-self: end;
}

.nav__phone {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-silver);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--duration-fast) ease;
}

.nav__phone:hover {
  color: var(--color-gold);
}

/* Selector de idioma — ES · CA · EN
   Mismo lenguaje visual que .nav__link (subrayado dorado en hover/activo),
   a la escala de un elemento secundario de nav__actions. Sin banderas,
   sin desplegable, sin botón — solo texto y enlaces reales. */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav__lang-link {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(138, 155, 181, 0.55);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--duration-fast) ease;
}

.nav__lang-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 350ms var(--ease-premium);
}

.nav__lang-link:hover {
  color: var(--color-white);
}

.nav__lang-link:hover::after {
  transform: scaleX(1);
}

.nav__lang-link[aria-current="page"] {
  color: var(--color-gold);
}

.nav__lang-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__lang-sep {
  color: rgba(138, 155, 181, 0.35);
  font-size: 9px;
  line-height: 1;
  user-select: none;
}

/* Instagram — icono nav */
.nav__ig {
  display: flex;
  align-items: center;
  color: rgba(138, 155, 181, 0.55);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-premium);
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid rgba(201, 164, 74, 0.15);
}

.nav__ig:hover {
  color: rgba(210, 185, 145, 0.80);
}

.nav__ig-icon {
  width: 15px;
  height: 15px;
  display: block;
}

/* Botón hamburger — solo mobile */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 40px;
  height: 40px;
  z-index: 201;
  position: relative;
}

.nav__hamburger-line {
  display: block;
  height: 1.5px;
  background: var(--color-white);
  border-radius: 0;
  transition: all 400ms var(--ease-premium);
}

.nav__hamburger-line:nth-child(1) { width: 24px; }
.nav__hamburger-line:nth-child(2) { width: 18px; }
.nav__hamburger-line:nth-child(3) { width: 24px; }

/* Estado activo — hamburger → X */
.nav__hamburger.is-open .nav__hamburger-line:nth-child(1) {
  width: 24px;
  transform: translateY(6.5px) rotate(45deg);
}

.nav__hamburger.is-open .nav__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__hamburger.is-open .nav__hamburger-line:nth-child(3) {
  width: 24px;
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ═══════════════════════════════════════════
   MOBILE MENU OVERLAY
   DESIGN_SYSTEM.md §12 — Mobile Header
═══════════════════════════════════════════ */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-night);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-premium);
  /* Red de seguridad: en viewports bajos (o con la barra de direcciones del
     navegador móvil visible) el contenido del menú puede superar la altura
     visible. Sin esto el selector de idioma, último elemento del menú,
     queda recortado y es inalcanzable (el body ya bloquea su scroll propio
     mientras el menú está abierto). No cambia el aspecto cuando el
     contenido sí cabe. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  width: 100%;
  padding: var(--space-2xl) var(--space-lg);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 48px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-white-60);
  text-decoration: none;
  transition: color 300ms var(--ease-premium);
  opacity: 0;
  transform: translateY(16px);
  transition: color 300ms ease, opacity 400ms var(--ease-premium), transform 400ms var(--ease-premium);
}

.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger para los links del menú */
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 60ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 180ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 240ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 300ms; }

.mobile-menu__link:hover {
  color: var(--color-white);
}

.mobile-menu__divider {
  width: 1px;
  height: 40px;
  background: var(--color-gold-dim);
}

.mobile-menu__phone {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  text-decoration: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-premium) 350ms;
}

.mobile-menu.is-open .mobile-menu__phone {
  opacity: 1;
}

/* Selector de idioma — misma zona que el teléfono, mismo patrón de
   interacción (fade-in con delay), sin componentes nuevos. */
.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 400ms var(--ease-premium) 400ms;
}

.mobile-menu.is-open .mobile-menu__lang {
  opacity: 1;
}

.mobile-menu__lang-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-white-60);
  text-decoration: none;
  padding: 10px 4px;
  transition: color 300ms ease;
}

.mobile-menu__lang-link:hover {
  color: var(--color-white);
}

.mobile-menu__lang-link[aria-current="page"] {
  color: var(--color-gold);
}

.mobile-menu__lang-sep {
  color: var(--color-gold-dim);
  font-size: 11px;
  user-select: none;
}

/* ═══════════════════════════════════════════
   HERO SECTION — ESTRUCTURA
   DESIGN_SYSTEM.md §16.01
═══════════════════════════════════════════ */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: var(--color-navy); /* Fallback sin imagen */
}

/* ─── Imagen de Fondo ─── */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;

  /* Grading cinematográfico — DESIGN_SYSTEM.md §9 */
  filter: brightness(0.65) saturate(0.82) contrast(1.08);

  /* Animación de entrada */
  animation: heroImgEnter var(--duration-epic) var(--ease-premium) both;
}

/* ─── Overlays ─── */

/* Overlay principal — Tipo 1 Direccional — DESIGN_SYSTEM.md §10 */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-hero);
  pointer-events: none;
}

/* Vignette superior para legibilidad del nav */
.hero__vignette-top {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--overlay-top);
  pointer-events: none;
}

/* Grain cinematográfico — textura de película */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
}

/* ─── Contenedor Principal ─── */

.hero__container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 80px;
  padding-top: calc(var(--nav-height) + var(--space-md));
  display: flex;
  align-items: center;
  min-height: 100%;
}

/* ─── Etiqueta Vertical — eliminada por decisión de diseño ─── */

/* ─── Bloque de Contenido ─── */

.hero__content {
  max-width: var(--max-hero-text);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── Eyebrow / Label ─── */

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeUp var(--duration-slow) var(--ease-premium) 400ms both;
}

.hero__eyebrow-line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-gold-dim);
  flex-shrink: 0;
  transform-origin: left center;
  animation: lineReveal 700ms var(--ease-premium) 600ms both;
}

.hero__eyebrow-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-silver);
}

/* ─── Headline Principal — Nivel 0 ─── */

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

/* Cada línea del headline anima por separado */
.hero__headline-row {
  display: block;
  opacity: 0;
  animation: fadeUp var(--duration-slow) var(--ease-premium) both;
}

.hero__headline-row:nth-child(1) { animation-delay: 560ms; }
.hero__headline-row:nth-child(2) { animation-delay: 700ms; }
.hero__headline-row:nth-child(3) { animation-delay: 840ms; }

/* Línea en italic — acento emocional */
.hero__headline-row--italic {
  font-style: italic;
  color: var(--color-white);
  /* Sutil distinción: ligeramente más claro el weight */
  font-weight: 400;
}

/* Palabra de acento en oro */
.hero__headline-accent {
  color: var(--color-gold);
  font-style: italic;
}

/* ─── Subheadline — Nivel 2/3 ─── */

.hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.70;
  color: var(--color-white-60);
  max-width: 540px;
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: fadeUp var(--duration-slow) var(--ease-premium) 1000ms both;
}

.hero__sub-accent {
  font-style: italic;
  color: rgba(244, 239, 230, 0.85);
}

/* ─── Grupo de CTAs ─── */

.hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp var(--duration-slow) var(--ease-premium) 1160ms both;
}

/* ─── Micro-badge de garantía ─── */

.hero__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--border-gold);
  opacity: 0;
  animation: fadeUp var(--duration-slow) var(--ease-premium) 1320ms both;
}

.hero__badge-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-gold);
}

.hero__badge-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-silver);
}

.hero__badge-text strong {
  color: var(--color-gold);
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   SCROLL INDICATOR
   No flechas. Línea vertical con punto animado.
═══════════════════════════════════════════ */

.hero__scroll {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeIn 600ms ease 1600ms both;
}

.hero__scroll-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-silver);
  opacity: 0.6;
}

.hero__scroll-track {
  width: 1px;
  height: 48px;
  background: var(--color-gold-dim);
  position: relative;
  overflow: hidden;
}

.hero__scroll-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 50%;
  margin-left: -1px;
  animation: scrollDot 2s var(--ease-smooth) 2s infinite;
}

/* ═══════════════════════════════════════════
   NÚMERO DE SECCIÓN — MARCA DE AGUA
   DESIGN_SYSTEM.md §14
═══════════════════════════════════════════ */

.hero__section-number {
  display: none;
  position: absolute;
  right: 80px;
  bottom: 60px;
  font-family: var(--font-display);
  font-size: clamp(80px, 9vw, 140px);
  font-weight: 300;
  line-height: 0.9;
  color: rgba(201, 164, 74, 0.10);
  pointer-events: none;
  user-select: none;
  z-index: 5;
  opacity: 0;
  animation: fadeIn 1200ms ease 1800ms both;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — DESKTOP INTERMEDIO (≤ 1280px)
   Ocultar teléfono cuando el menú con 6 items
   empieza a colisionar con las acciones derechas.
   El teléfono sigue accesible en footer y CTA.
═══════════════════════════════════════════ */

@media (max-width: 1280px) {
  .nav__phone {
    display: none;
  }

  /* El selector de idioma añade un ítem más a nav__actions (Sprint 016B).
     En este rango (1024–1280px) el menú de 7 enlaces ya iba justo de espacio
     con el teléfono oculto; se recorta ligeramente el ritmo horizontal
     (padding del header + gaps del menú/acciones/selector) para evitar que
     "Contacto" y el selector se toquen. Medido empíricamente — a partir de
     1150px el espacio resultante iguala o mejora el que ya existía en el
     diseño aprobado antes de este sprint. */
  .nav__inner {
    padding: 0 56px;
  }

  .nav__menu {
    gap: 18px;
  }

  .nav__actions {
    gap: 16px;
  }

  .nav__lang {
    gap: 6px;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1023px)
═══════════════════════════════════════════ */

@media (max-width: 1023px) {

  .nav__inner {
    display: flex;
    justify-content: space-between;
    padding: 0 48px;
  }

  .nav__menu {
    display: none;
  }

  .nav__phone {
    display: none;
  }

  .nav__lang {
    display: none;
  }

  .nav__ig {
    padding-right: 0;
    border-right: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .hero__container {
    padding: 0 48px;
    padding-top: calc(var(--nav-height) + var(--space-md));
  }

  .hero__content {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 767px)
═══════════════════════════════════════════ */

@media (max-width: 767px) {

  .nav {
    height: var(--nav-height-mobile);
  }

  /* El menú móvil (nav + teléfono + selector de idioma) se diseñó con el
     espaciado de escritorio (gaps de 64px, padding de 128px/64px) y supera
     la altura de un viewport de móvil real (con la barra del navegador
     visible el alto útil baja de los ~844px de referencia). Esto dejaba el
     selector de idioma — último elemento — fuera de la zona visible sin
     ninguna forma de hacer scroll para alcanzarlo. Mismo estilo visual
     (colores, tipografía, alineación, orden), solo menos aire vertical. */
  .mobile-menu__inner {
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-md);
  }

  .mobile-menu__nav {
    gap: var(--space-sm);
  }

  .nav__inner {
    padding: 0 20px;
  }

  .nav__logo-img {
    height: 30px;
  }

  .hero {
    align-items: flex-end;
    /* padding-bottom eliminado: el container ya tiene su propio espacio inferior.
       El doble padding (hero + container) reducía el espacio disponible y podía
       hacer que el contenido subiera por encima del nav en viewports ajustados. */
  }

  .hero__container {
    padding: 0 20px var(--space-xl);
    padding-top: var(--nav-height-mobile);
    align-items: flex-end;
    min-height: unset;
  }

  .hero__eyebrow {
    margin-bottom: var(--space-sm);
  }

  .hero__eyebrow-text {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .hero__headline {
    margin-bottom: var(--space-sm);
  }

  .hero__sub {
    font-size: 15px;
    margin-bottom: var(--space-md);
    max-width: 100%;
  }

  .hero__ctas {
    gap: var(--space-sm);
  }

  .hero__ctas .btn {
    padding: 14px 28px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .hero__ctas .cta-text {
    font-size: 10px;
  }

  .hero__badge {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
  }

  .hero__scroll {
    bottom: 32px;
  }

  /* Parallax desactivado en mobile */
  .hero__bg-img {
    will-change: auto;
  }

  /* Overlay más ligero solo en mobile: el recorte específico de la imagen
     móvil (logo centrado) quedaba con poca presencia bajo la misma
     intensidad de overlay pensada para la foto panorámica de escritorio.
     Mismos stops/forma de degradado que --overlay-hero/--overlay-top
     (tokens.css, sin tocar — desktop sigue usándolos tal cual), solo con
     menos opacidad para dejar respirar más la imagen sin sacrificar la
     legibilidad del texto, que sigue ancorado sobre el tramo más oscuro. */
  .hero__overlay {
    background: linear-gradient(
      to top,
      rgba(12, 18, 32, 0.80) 0%,
      rgba(12, 18, 32, 0.42) 38%,
      rgba(12, 18, 32, 0.14) 65%,
      rgba(12, 18, 32, 0.03) 100%
    );
  }

  .hero__vignette-top {
    background: linear-gradient(
      to bottom,
      rgba(12, 18, 32, 0.35) 0%,
      rgba(12, 18, 32, 0.00) 30%
    );
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — DESKTOP WIDE (≥ 1280px)
═══════════════════════════════════════════ */

@media (min-width: 1280px) {

  .hero__section-number {
    display: block;
  }
}

/* Sprint 017A — separación "Contacto" / teléfono, solo donde el teléfono
   es visible (nav__phone se oculta en @media max-width:1280px). Ajuste
   mínimo y aislado: no toca gaps internos de nav__menu ni de nav__actions,
   no desplaza ningún otro elemento del menú. */
@media (min-width: 1281px) {
  .nav__menu .nav__link:last-child {
    margin-right: 20px;
  }
}