/* layout.v2.css — Relematic (Premium B2B) *//* layout.v2.css — Relematic (Premium2 PREMIUM
========================= */


.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: .85rem 0;
}


.brand{ display: inline-flex; align-items: center; }

.main-nav{ display: flex; align-items: center; }

.nav-list{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}

.nav-list a{
  font-size: .94rem;
  font-weight: 600;
  color: rgba(11,15,20,.78);
  position: relative;
  padding: .25rem 0;
}
.nav-list a:hover{ color: var(--text); }

.nav-list a[aria-current="page"]{
  color: var(--text);
  font-weight: 800;
}
.nav-list a[aria-current="page"]::after{
  content:'';
  position:absolute;
  left:18%;
  bottom:-7px;
  width:64%;
  height:1.5px;
  background: linear-gradient(
    90deg,
    rgba(201,164,76,.95),
    rgba(201,164,76,.35)
  );
  border-radius:999px;
}

.nav-cta{
  margin-left: .75rem;
  padding: .45rem 1.15rem;
  line-height: 1;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
  background: rgba(201,164,76,.12);
}
.nav-cta:hover{
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--ink);
}


/* =========================
HERO — FINAL PREMIUM V2 (ALINEADO + CTA PERFECTOS)
========================= */
.hero--final{
  position: relative;
  padding: 8rem 0 7rem;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.hero--final::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("/assets/img/hero/hero-ascensor.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  transform: scale(1.03);
  z-index: 0;
}

.hero--final::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 12% 30%, rgba(201,164,76,.16), transparent 62%),
    linear-gradient(90deg, rgba(11,15,20,.72) 0%, rgba(11,15,20,.45) 40%, rgba(11,15,20,.15) 70%, rgba(11,15,20,0) 100%);
  z-index: 1;
}

/* IMPORTANTE: padding interno para que NUNCA se pegue al borde */
.hero__inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  min-height: 640px;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.hero__content{
  max-width: 680px;
  color: rgba(255,255,255,.95);
}

/* Eyebrow blanco SOLO dentro del hero */
.hero--final .section-eyebrow{
  color: rgba(255,255,255,.85);
}
.hero--final .section-eyebrow::before{
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}


/* =========================================================
NUESTRO ENFOQUE — PULIDO VISUAL (PROFESIONAL / B2B)
AISLADO / SEGURO / V2
========================================================= */

.approach-section {
  background: #ffffff;
  padding: 5.5rem 0;
  border-top: 1px solid var(--border);
}

.approach-section__header {
  max-width: 780px;
}

.approach-section__title {
  margin-top: .75rem;
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

.approach-section__lead {
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 70ch;
}

/* Lista de pilares */
.approach-list {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  list-style: none;
  padding: 0;
}

/* Item */
.approach-item {
  position: relative;
  padding-left: 1.25rem;
  border-left: 3px solid var(--border);
}

/* Línea activa sutil */
.approach-item::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--gold),
    rgba(201,164,76,.25)
  );
  opacity: .85;
}

/* Título */
.approach-item__title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Texto */
.approach-item__description {
  margin-top: .5rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 980px) {
  .approach-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .approach-section {
    padding: 4.5rem 0;
  }
}



.hero__title{
  margin-top: 1rem;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  line-height: 1.03;
  color: #fff;
}

.hero__sub{
  margin-top: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
  color: rgba(255,255,255,.78);
}

.hero__actions{
  display:flex;
  gap: 1rem;
  margin-top: 2.6rem;
  flex-wrap: wrap;
}

/* CTA PRINCIPAL dorado corporativo */
.hero--final .btn-primary{
  box-shadow: 0 16px 38px rgba(201,164,76,.45);
}
.hero--final .btn-primary:hover{
  box-shadow: 0 22px 50px rgba(201,164,76,.60);
}

/* CTA SECUNDARIO blanco (legible en fondo oscuro) */
.hero--final .btn-secondary{
  background: rgba(255,255,255,.92);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.hero--final .btn-secondary:hover{ background:#fff; }

/* Ocultar WhatsApp si aún existe en HTML */
.hero__wapp{ display:none; }

/* Mobile */
@media (max-width: 768px){
  .hero--final{ padding: 5rem 0 4.5rem; }
  .hero__inner{ min-height: auto; }
  .hero__title{ font-size: 2.1rem; }
}


.services-section__header{
  max-width: 860px;
}

.services-section__title{
  margin-top: .75rem;
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  letter-spacing: -0.02em;
}

.services-section__lead{
  margin-top: 1rem;
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.65;
}

.services-list{
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.35rem;
}

.service-item{
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.75rem 1.85rem;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 210px;
}

.service-item::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--gold), rgba(201,164,76,.22));
}

.service-item:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(201,164,76,.35);
}

.service-item__title{
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: .35rem;
}

.service-item__description{
  margin-top: .75rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

.service-item__link{
  display: inline-flex;
  margin-top: 1.15rem;
  font-weight: 900;
  font-size: .9rem;
  color: var(--ink);
}

.service-item__link::after{
  content:"→";
  margin-left:.35rem;
  transition: transform .15s ease;
}

.service-item:hover .service-item__link::after{
  transform: translateX(3px);
}

.services-section__actions{
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .services-list{ grid-template-columns: 1fr; }
  .service-item{ min-height:auto; }
}

@media (max-width: 768px){
  .services-section{ padding: 4.5rem 0; }
}


.services-section{
  background: var(--surface-2);
  padding: 5.5rem 0;

/* =========================================================
SERVICIOS — PULIDO VISUAL (CARDS & GRID)
AISLADO / SEGURO / V2
========================================================= */

.services-section {
  background: var(--surface-2);
  padding: 5.5rem 0;
  border-top: 1px solid var(--border);
}

/* Encabezado */
.services-section__header {
  max-width: 820px;
}

.services-section__title {
  margin-top: .75rem;
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

.services-section__lead {
  margin-top: 1rem;
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.65;
}

/* GRID */
.services-list {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

/* CARD */
.service-item {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.75rem 1.85rem;
  box-shadow: var(--shadow-sm);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
  min-height: 210px;
}

/* Filete dorado corporativo */
.service-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--gold),
    rgba(201,164,76,.22)
  );
}

/* Hover sutil */
.service-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(201,164,76,.35);
}

/* Título */
.service-item__title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Texto */
.service-item__description {
  margin-top: .75rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Link */
.service-item__link {
  display: inline-flex;
  margin-top: 1.15rem;
  font-weight: 900;
  font-size: .9rem;
  color: var(--ink);
}

.service-item__link::after {
  content: "→";
  margin-left: .35rem;
  transition: transform .15s ease;
}

.service-item:hover .service-item__link::after {
  transform: translateX(3px);
}

/* CTA del bloque */
.services-section__actions {
  margin-top: 2.2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px) {
  .services-list {
    grid-template-columns: 1fr;
  }
  .service-item {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .services-section {
    padding: 4.5rem 0;
  }
}

/* 4) Ajuste fino para que no se pegue visualmente a la sección previa */
.services-section__actions{
  margin-top: 2.4rem; /* separa cards de botones */
}

/* 5) Responsive: menos padding pero mantiene aire */
@media (max-width: 768px){
  .services-section{ padding-bottom: 4.25rem; }
  .approach-section{ padding-top: 4.25rem; padding-bottom: 3.5rem; }
  .cta-intermediate{ padding-top: 3.5rem; padding-bottom: 4.25rem; }

  .approach-list{ gap: 1.6rem; }
}


/* =====================
NUESTRO ENFOQUE
===================== */
.approach-section{
  padding-top: 7.5rem;    /* Entrada clara */
  padding-bottom: 6rem;   /* Salida clara */
  background: #ffffff;
}

/* Header del enfoque */
.approach-section__header{
  margin-bottom: 3rem; /* antes muy pegado */
}

.approach-section__title{
  margin-bottom: 1.25rem;
}

.approach-section__lead{
  margin-top: 0;
  max-width: 72ch;
}

/* Lista */
.approach-list{
  margin-top: 3.5rem;   /* aire real */
  margin-bottom: 4rem;  /* separa CTA */
  gap: 2.75rem;         /* más espacio entre pilares */
}


/* =========================================================
CTA INTERMEDIO — DEFINITIVO (ELEGANTE + ESTABLE)
========================================================= */

section.cta-intermediate{
  position: relative;
  margin: 6.5rem 0 7rem;
  padding: 5.5rem 0 6.25rem;
  background: linear-gradient(to bottom, #ffffff 0%, #f6f7f9 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

section.cta-intermediate .cta-intermediate__inner{
  max-width: 880px;
}

section.cta-intermediate .cta-intermediate__content{
  max-width: 720px;
}

section.cta-intermediate .cta-intermediate__title{
  font-size: clamp(1.7rem, 2.6vw, 2.05rem);
  line-height: 1.18;
  margin: 0 0 1rem 0;
}

section.cta-intermediate .cta-intermediate__text{
  margin: 0;
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}

section.cta-intermediate .cta-intermediate__actions{
  margin-top: 2rem;
  display: flex;
  justify-content: flex-start;
}

section.cta-intermediate .cta-intermediate__actions .btn-primary{
  padding: .9rem 1.65rem;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(201,164,76,.35), inset 0 -2px 0 rgba(0,0,0,.15);
}

@media (max-width: 768px){
  section.cta-intermediate{
    margin: 5.25rem 0;
    padding: 4.75rem 0 5.25rem;
  }
  section.cta-intermediate .cta-intermediate__actions{
    justify-content: center;
  }
}


/*NUESTRO ENFOQUE — NEÓN DORADO ELEGANTE (CIERRE PREMIUM)
========================================================= */

/* Fondo con aura dorada suave (no grita) */
.approach-section{
  position: relative;
  background:
    radial-gradient(
      600px 220px at 18% 10%,
      rgba(201,164,76,.28),
      transparent 60%
    ),
    radial-gradient(
      420px 180px at 80% 18%,
      rgba(201,164,76,.18),
      transparent 60%
    ),
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #fdfcf9 55%,
      #ffffff 100%
    );
}

/* Más aire antes de las cards */
.approach-section__header{
  margin-bottom: 4.5rem;
}

/* Cards con más separación visual */
.approach-list{
  gap: 3.75rem;
}

/* Cada bloque respira más arriba */
.approach-item{
  padding-top: .85rem;
  padding-left: 2rem;
}

/* Filete como rastro de luz dorada */
.approach-item::before{
  left: 0;
  top: -14px;
  bottom: -14px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(201,164,76,.95),
    rgba(201,164,76,.30),
    rgba(201,164,76,.95)
  );
  box-shadow:
    0 0 10px rgba(201,164,76,.45),
    0 0 26px rgba(201,164,76,.28);
}

/* Texto más editorial */
.approach-item__title{
  line-height: 1.25;
}

.approach-item__description{
  max-width: 60ch;
}
}

/* =========================================================
NUESTRO ENFOQUE — NEÓN DFINAL)
========================================================= */

.approach-section{
  background:
    radial-gradient(
      600px 240px at 18% 12%,
      rgba(201,164,76,.33),
      transparent 62%
    ),
    radial-gradient(
      420px 200px at 82% 18%,
      rgba(201,164,76,.22),
      transparent 60%
    ),
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #fdfcf9 55%,
      #ffffff 100%
    );
}

/* Más aire arriba */
.approach-section__header{
  margin-bottom: 4.75rem;
}

/* Cards separadas y con presencia */
.approach-list{
  gap: 4rem;
}

.approach-item{
  padding-top: 1rem;
  padding-left: 2.2rem;
}

/* Filete neón dorado */
.approach-item::before{
  top: -16px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(201,164,76,1),
    rgba(201,164,76,.35),
    rgba(201,164,76,1)
  );
  box-shadow:
    0 0 12px rgba(201,164,76,.55),
    0 0 28px rgba(201,164,76,.32);
}

/* =========================================================
NUESTRO ENFOQUE — NEON DORADO (CAPA DECORATIVA REAL)
========================================================= */

.approach-section{
  position: relative;
  overflow: hidden; /* esencial para que el glow no “ensucie” otras secciones */
}

/* Capa neon dorada */
.approach-section::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      600px 240px at 18% 12%,
      rgba(201,164,76,.35),
      transparent 62%
    ),
    radial-gradient(
      420px 200px at 82% 18%,
      rgba(201,164,76,.22),
      transparent 60%
    );

  filter: blur(2px);
}

/* El contenido debe quedar encima del glow */
.approach-section > *{
  position: relative;
  z-index: 1;
}

/* Más aire arriba de las cards (ya viste que esto funciona) */
.approach-section__header{
  margin-bottom: 4.75rem;
}

/* Separación premium entre bloques */
.approach-list{
  gap: 3.75rem;
}

/* =========================================================
CTA — DECISIÓN TÉCNICA (REFINADO PREMIUM)
========================================================= */

.cta-intermediate{
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f9fafb 100%
  );
}

/* Acento dorado direccional (lado izquierdo) */
.cta-intermediate::before{
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;

  background: linear-gradient(
    180deg,
    rgba(201,164,76,0),
    rgba(201,164,76,.85),
    rgba(201,164,76,0)
  );

  box-shadow:
    0 0 18px rgba(201,164,76,.35);

  pointer-events: none;
}

/* El contenido siempre encima */
.cta-intermediate > *{
  position: relative;
  z-index: 1;
}

/* Título con un poco más de autoridad */
.cta-intermediate__title{
  line-height: 1.15;
}

/* Texto ligeramente más compacto (más técnico) */
.cta-intermediate__text{
  max-width: 68ch;
}

/* Botón = punto de decisión */
.cta-intermediate__actions .btn-primary{
  box-shadow:
    0 10px 28px rgba(201,164,76,.35),
    0 0 0 rgba(201,164,76,0);
  transition:
    box-shadow .25s ease,
    transform .15s ease;
}

.cta-intermediate__actions .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px rgba(201,164,76,.45),
    0 0 22px rgba(201,164,76,.25);
}

/* Mobile: mantener elegancia sin exagerar */
@media (max-width: 768px){
  .cta-intermediate::before{
    left: 0;
    top: 12%;
    bottom: 12%;
  }
}

.ctafter{
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: .75rem;

  background: linear-gradient(
    90deg,
    var(--gold),
    rgba(201,164,76,.25)
  );
}

/* =========================================================
CO EDITORIAL (MICRO AJUSTE CLAVE)
========================================================= */

.cta-intermediate__inner{
  max-width: 820px; /* antes era más ancho */
}

/* Línea técnica sutil bajo el título del CTA */
.cta-intermediate__title{
  position: relative;
}

.cta-intermediate__title::after{
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: .85rem;

  background: linear-gradient(
    90deg,
    var(--gold),
    rgba(201,164,76,.25)
  );
}

/* =========================================================
SECTORES — ANIMACIÓN PROFESIONAL (FADE + LIFT)
========================================================= */

/* Estado inicial (oculto) */
.sector-item{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .45s ease,
    transform .45s ease,
    box-shadow .25s ease;
}

/* Estado visible */
.sector-item.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Hover sutil (no exagerado) */
.sector-item:hover{
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
  transform: translateY(-3px);
}

/* =========================================================
SECTORES — AN + LIFT + STAGGER)
========================================================= */

.sector-item{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease, box-shadow .25s ease;
  will-change: opacity, transform;
}

.sector-item.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Hover sutil, premium */
.sector-item:hover{
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
  transform: translateY(-3px);
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .sector-item{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Variante opcional: filete dorado “aparece” al entrar (muy sutil) *//* Variante opcional: filete dorado “aparece” al entrar  opacity: 1;
}
.sector-item::before{
  transition: opacity .4s ease;
  opacity: .4;
}

.sector-item.is-visible::before{


/* HEADER — AJUSTE FINO DE LOGO (PRESENCIA PROFESIONAL) *//* HEADER — AJUSTE FINO DE LOGO  vertical-align: middle;
}
.site-header .brand{
  display: flex;
  align-items: center;
}

/* HEADER — CTA CONTACTO (AIRE PREMIUM) */
.nav-cta{
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

/* HEADER — FILETE DORADO SUTIL */
.site-header{
  border-bottom: 1px solid rgba(201,164,76,.55);
}

/* =========================================================
HEADER — AJUSTE FINAL PROFESIONAL (LOGO / CTA / FILETE)
Forzado limpio sin romper layout
========================================================= */

/* ===== LOGO: bloquear proporción y eliminar estiramiento ===== */
header.site-header a.brand > img{
  display: block;
  height: 58px !important;
  width: auto !important;

  /* bloquea relación ancho/alto */
  aspect-ratio: 182 / 58;

  /* estabilidad visual */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;

  /* evita cualquier transición fantasma */
  transition: none !important;
}

/* ===== CTA CONTACTO: más aire sin cambiar altura ===== */
header.site-header .nav-list > li > a.nav-cta{
  padding-inline: 1.2rem !important;
  line-height: 1.1;
}

/* ===== FILETE DORADO INFERIOR: elegante y visible ===== */
header.site-header{
  border-bottom: 1px solid rgba(201,164,76,.65) !important;
}

/* =========================================================
HEADER — AJUSTE FINAL (LOGO / CONTACTO / LÍNEA DORADA)
Bloque limpio, sin errores de sintaxis
========================================================= */

/* 1) CTA Contacto: más aire (mantiene tu cambio) */
header.site-header tu tamaño final es otro, cambia SOLO este valor */header.site-header .nav-list > li > a.nav-cta{
  width: auto;
  max-width: none;
  object-fit: contain;

  /* estabilidad de render */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;

  /* evita animaciones involuntarias */
  transition: none;
}
  
header.site-header .nav-list > li > a.nav-cta{
  padding-inline: 1.2rem;
  line-height: 1.1;
}


/* 2) Línea dorada elegante debajo del header */
header.site-header{
  border-bottom: 1px solid rgba(201,164,76,.65);
}

/* 3) Logo definitivo: sin estiramiento / sin descuadre */
header.site-header a.brand > img{
  display: block;
}

/* =========================================================
HEADER — LOGO DEFINITIVO (WEBP) SIN ESTIRAMIENTO
========================================================= */
header.site-header a.brand > img{
  display: block;
  height: 58px;        /* tu tamaño final en header */
  width: auto;         /* respeta proporción real del webp */
  max-width: none;
  object-fit: contain;
  transition: none;

  /* estabilidad visual (sin parpadeo ni “saltos”) */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* =========================================================
HEADER — PLACA VISUAL ESTABLE (DESKTOP + MÓVIL)
Evita que el hero "se mueva" detrás del header fijo
========================================================= */

.site-header{
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Línea dorada estable (no se mueve con el fondo) */
.site-header::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(201,164,76,.15),
    rgba(201,164,76,.65),
    rgba(201,164,76,.15)
  );
}

/* =========================================================
HERO — KEN BURNS HORIZONTAL (MÁS NOTORIO, PREMIUM)
========================================================= */

/* Evita cualquier gap lateral por transforms */
html, body{ overflow-x: hidden; }

.hero--final{ overflow: hidden; }

@media (prefers-reduced-motion: no-preference){
  .hero--final::before{
    inset: -6%;                /* sangrado extra para que nunca se vean bordes */
    transform-origin: center right;
    will-change: transform;
    animation: heroKenBurnsX 22s ease-in-out infinite alternate;
  }

  @keyframes heroKenBurnsX{
    from{ transform: scale(1.06) translate3d(0,0,0); }
    to{   transform: scale(1.12) translate3d(-3.2%,0,0); }
  }
}

@media (prefers-reduced-motion: reduce){
  .hero--final::before{
    animation: none !important;
    transform: scale(1.03);
  }
}