/* ===========================
   NAVBAR — ULTRA PREMIUM GLASS
   (reemplaza tu bloque actual)
   =========================== */

/* ===========================
   NAVBAR — ULTRA PREMIUM (GLASS + PILL MENU) ✅ UPDATED
   ✅ Centro REAL del menú (GRID 3 columnas)
   ✅ Sin hacks de translateX
   ✅ Mantiene tu look premium
=========================== */
/* ===========================
   NAVBAR — ULTRA PREMIUM (GLASS + PILL MENU) ✅ UPDATED
   ✅ Centro REAL del menú (GRID 3 columnas)
   ✅ Sin hacks de translateX
   ✅ Mantiene tu look premium
=========================== */
.navbar{
  position: sticky;
  top: 0;
  z-index: 999;

  padding: 14px 26px;

  /* ✅ CAMBIO CLAVE: centro real */
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | menu | lang */
  align-items: center;
  column-gap: 16px;

  /* glass */
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.07);
  isolation: isolate;
}

/* capa de brillo premium */
.navbar::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 80% at 18% 10%, rgba(255,45,45,.10), transparent 58%),
    radial-gradient(120% 80% at 82% 50%, rgba(0,0,0,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.45));
  pointer-events:none;
  z-index:0;
}

/* Blur solo si soporta */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  .navbar{
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ===========================
   LOGO + NOMBRE
=========================== */
.navbar-logo{
  position: relative;
  z-index: 2;

  display:flex;
  align-items:center;
  gap: 10px;

  padding: 3px 10px;
  border-radius: 14px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.navbar-logo:hover{
  background: rgba(255,255,255,.55);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.navbar-logo img{
  height:50px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.12));
}

.navbar-brand{
  font-family: "Oswald", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .20em;
  color: #101010;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* ===========================
   MENU CENTRAL — PILL + GLOW UNDERLINE
   ✅ centrado perfecto en la columna central
=========================== */
.navbar-menu{
  position: relative;
  z-index: 2;

  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;

  /* vars */
  --pill-bg: rgba(255,255,255,.58);
  --pill-border: rgba(0,0,0,.06);
}

/* “Capsule” detrás del menú */
.navbar-menu::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(560px, 86%);
  height: 46px;
  border-radius: 999px;

  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  box-shadow:
    0 18px 40px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
  z-index: 0;
}

.navbar-menu a{
  position: relative;
  z-index: 1;

  text-decoration:none;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(20,20,20,.85);

  padding: 12px 18px;
  border-radius: 999px;

  transition: transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}

.navbar-menu a:hover{
  color: #000;
  transform: translateY(-1px);
  background: rgba(255,255,255,.55);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* underline glow fino */
.navbar-menu a::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);

  width: 0;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(90deg, transparent, #ff2d2d, transparent);
  opacity: .95;
  transition: width .28s ease;
}
.navbar-menu a:hover::after{ width: 85%; }

/* ===========================
   NAV SERVICES SELECT (PILL)
   ✅ texto centrado
   ✅ underline solo hover
=========================== */
.nav-services-select{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}

/* SELECT base */
.nav-services-select select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(20,20,20,.85);

  text-align: center;
  text-align-last: center;
  padding: 12px 44px 12px 44px;

  border-radius: 999px;
  border: 0;
  outline: none;
  background: transparent;

  cursor: pointer;
  transition: transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}

.nav-services-select:hover select,
.nav-services-select select:focus{
  color: #000;
  transform: translateY(-1px);
  background: rgba(255,255,255,.55);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* underline glow SOLO hover */
.nav-services-select::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ff2d2d, transparent);
  opacity: 0;
  transition: width .28s ease, opacity .22s ease;
  pointer-events:none;
}
.nav-services-select:hover::after{
  width: 85%;
  opacity: .95;
}

/* caret */
.nav-select-caret{
  position: absolute;
  right: 14px;
  pointer-events: none;
  color: rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  transition: transform .22s ease, color .22s ease;
}
.nav-services-select:hover .nav-select-caret,
.nav-services-select:focus-within .nav-select-caret{
  color: rgba(0,0,0,.80);
  transform: translateY(1px);
}

/* options default */
.nav-services-select select option{
  color: #111;
  background: #fff;
}

/* ===========================
   LANG SWITCH — FLAG PREMIUM (GLASS PILL)
=========================== */
.lang-switch{
  position: relative;
  z-index: 2;

  height: 44px;
  padding: 6px 10px 6px 6px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);

  background: rgba(255,255,255,.72);
  box-shadow:
    0 14px 30px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.55);

  cursor: pointer;
  user-select: none;

  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .lang-switch{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.lang-switch::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,45,45,.14), rgba(255,255,255,0) 55%);
  opacity:.55;
}

.lang-switch > *{ position: relative; z-index: 1; }

.lang-flag{
  width: 42px;
  height: 32px;
  border-radius: 10px;
  overflow: hidden;

  border: 1px solid rgba(0,0,0,.12);
  box-shadow:
    0 10px 22px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.35);

  background: rgba(255,255,255,.35);
  display: grid;
  place-items: center;
}

.lang-flag img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lang-code{
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(0,0,0,.80);
  text-transform: uppercase;
  transform: translateY(0.5px);
}

.lang-caret{
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.55);
  transition: color .22s ease, transform .22s ease;
}

.lang-switch:hover{
  transform: translateY(-1px);
  border-color: rgba(255,45,45,.28);
  box-shadow:
    0 18px 40px rgba(0,0,0,.14),
    0 0 0 3px rgba(255,45,45,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
  background: rgba(255,255,255,.82);
}

.lang-switch:hover .lang-caret{
  color: rgba(0,0,0,.80);
  transform: translateY(1px);
}

.lang-switch:active{
  transform: translateY(0);
  box-shadow:
    0 12px 26px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.50);
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 900px){
  .navbar{ padding: 10px 14px; }
  .navbar-brand{ font-size: 15px; letter-spacing: .16em; }
  .navbar-logo img{ height: 44px; }

  .navbar-menu::before{
    width: min(460px, 78%);
    height: 44px;
  }
  .navbar-menu a{ padding: 11px 14px; font-size: 12px; }
  .nav-services-select select{ font-size: 12px; padding: 11px 40px; }
}

@media (max-width: 768px){
  .navbar-menu::before{ display:none; }
  .navbar-menu{ gap: 16px; }
  .navbar-menu a{ padding: 10px 10px; }
  .lang-switch{ height: 42px; }
  .lang-flag{ width: 34px; height: 28px; }
  .lang-code{ font-size: 11px; }
}
.navbar-logo{
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===========================
   FOOTER — PREMIUM DARK / GLASS
   =========================== */

.footer{
  width: 100%;
  background: black;
  color: #ffffff;
  padding: 70px 0 32px;
  font-family: system-ui, sans-serif;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex-shrink: 0;
}

/* profundidad */
.footer::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 90% at 20% 25%, rgba(255,255,255,.04), transparent 55%),
    radial-gradient(120% 90% at 80% 75%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.90));
  z-index:0;
  pointer-events:none;
}

/* textura */
.footer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,.04), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.03), transparent 55%);
  opacity:.25;
  mix-blend-mode: overlay;
  z-index:0;
  pointer-events:none;
}


/* ===========================
   CONTENEDOR
   =========================== */
.footer-container{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 42px;
}

/* ===========================
   BRAND
   =========================== */
.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-logo{
  width: 130px;
  filter:
    drop-shadow(0 14px 30px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(255,45,45,.12));
}

.footer-slogan{
  font-family: "Poppins", sans-serif;
  font-size: .95rem;
  color: rgba(235,235,235,.82);
  line-height: 1.6;
}

/* ===========================
   TITULOS — PREMIUM + UNDERLINE
   =========================== */
.footer h4{
  position: relative;
  display: inline-block;
  margin: 0 0 14px;

  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.96);

  text-shadow:
    0 12px 32px rgba(0,0,0,.55),
    0 0 18px rgba(255,45,45,.08);
}

.footer h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:100%;
  height:2px;
  border-radius:999px;

  background: linear-gradient(
    90deg,
    rgba(255,45,45,.95),
    rgba(255,45,45,.35),
    transparent
  );

  opacity:.9;
  transform: scaleX(.55);
  transform-origin: left center;
  filter: blur(.2px);
  transition: transform .35s ease, opacity .35s ease;
}

.footer-links:hover h4::after,
.footer-social:hover h4::after,
.footer-contact:hover h4::after{
  transform: scaleX(1);
  opacity: 1;
}

/* ===========================
   LINKS
   =========================== */
.footer-links ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom: 8px;
}

.footer-links a{
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: .95rem;
  color: rgba(235,235,235,.78);
  text-decoration:none;
  transition: color .25s ease;
}

.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:1px;
  background: linear-gradient(90deg, #ff2d2d, transparent);
  transition: width .25s ease;
}

.footer-links a:hover{
  color:#fff;
}
.footer-links a:hover::after{
  width:100%;
}

/* ===========================
   SOCIAL — ICONOS PREMIUM
   =========================== */
.footer-social{
  display:flex;
  flex-direction: column;
}

.social-icons{
  display:flex;
  gap:12px;
  margin-top: 14px;
}

.social-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);

  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);

  position: relative;
  overflow: hidden;
  isolation: isolate;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.social-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 22%,
      rgba(255,255,255,0) 48%);
  opacity:.65;
  z-index:0;
}

.social-btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background: linear-gradient(
    135deg,
    rgba(255,45,45,.30),
    rgba(255,45,45,.10),
    transparent 70%
  );
  opacity:.55;
  filter: blur(6px);
  z-index:-1;
}

.social-btn img{
  width:20px;
  height:20px;
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 1;
  transition: transform .22s ease;
}

.social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,45,45,.38);
  background: rgba(255,45,45,.10);

  box-shadow:
    0 22px 55px rgba(0,0,0,.65),
    0 0 0 4px rgba(255,45,45,.12);
}

.social-btn:hover img{
  transform: scale(1.08);
}

/* ===========================
   CONTACT
   =========================== */
.footer-contact{
  display:flex;
  flex-direction: column;
}

.footer-contact-list{
  display:flex;
  flex-direction: column;
  gap:10px;
}

.footer-contact-item{
  display:flex;
  align-items:center;
  gap:10px;
}

.fc-ico{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;

  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}

.fc-text{
  font-family: "Poppins", sans-serif;
  font-size: .95rem;
  color: rgba(235,235,235,.88);
}

/* =========================== CTA — REQUEST A QUOTE (NEON TECH) =========================== */ .cta-quote{ position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 16px 34px; border-radius: 14px; font-family: "Oswald", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #ffffff; text-decoration: none; background: linear-gradient( 180deg, rgba(10,12,20,.95), rgba(5,7,12,.95) ); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 45px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; isolation: isolate; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } /* Línea energética */ .cta-quote::before{ content:""; position:absolute; inset:0; background: linear-gradient( 120deg, transparent 35%, rgba(255,45,45,.85), transparent 65% ); transform: translateX(-120%); opacity: .9; transition: transform .6s ease; z-index: 0; } /* Glow exterior */ .cta-quote::after{ content:""; position:absolute; inset:-2px; border-radius: 16px; background: linear-gradient( 135deg, rgba(255,45,45,.75), rgba(255,45,45,.25), transparent 70% ); opacity: .55; filter: blur(6px); z-index: -1; } /* Texto arriba del efecto */ .cta-quote span, .cta-quote{ position: relative; z-index: 2; } /* HOVER */ .cta-quote:hover{ transform: translateY(-3px); border-color: rgba(255,45,45,.85); box-shadow: 0 26px 65px rgba(0,0,0,.65), 0 0 0 4px rgba(255,45,45,.14); } .cta-quote:hover::before{ transform: translateX(120%); } /* ACTIVE */ .cta-quote:active{ transform: translateY(-1px) scale(.98); box-shadow: 0 16px 35px rgba(0,0,0,.55); }

/* ===========================
   COPYRIGHT
   =========================== */
.footer-copy{
  position: relative;
  z-index: 2;
  margin-top: 46px;
  padding-top: 22px;
  text-align: center;
  font-size: .88rem;
  color: rgba(235,235,235,.65);
  border-top: 1px solid rgba(255,255,255,.10);
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 768px){
  .footer{
    padding: 60px 0 28px;
  }

  .footer-container{
    gap: 32px;
  }

  .footer-logo{
    width: 110px;
  }

  .footer h4{
    font-size: .95rem;
  }

  .footer-copy{
    font-size: .82rem;
  }
}


/* ==========================
   HERO SECTION (PREMIUM)
========================== */
.hero{
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('../images/hero/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
  overflow: hidden;
  isolation: isolate; /* clave para capas */
}

/* CAPA PREMIUM (profundidad como Services) */
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 80% at 18% 28%, rgba(255,45,45,.16), transparent 58%),
    radial-gradient(120% 85% at 82% 70%, rgba(255,140,80,.12), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72));
  z-index: 0;
  pointer-events:none;
}

/* Overlay oscuro (más fino, menos “mancha”) */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.44);
  z-index: 1;
}

/* Contenido centrado */
.hero-content{
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 780px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================
   HANDS (contorno premium)
========================== */
.hero-hands{
  position: relative;
  margin: 0 auto 1.6rem;
  max-width: 390px;
  border-radius: 26px;
  overflow: visible;
  transform: translateY(-8px);
}

/* glow ambiental detrás */
.hero-hands::before{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255,45,45,.26),
    transparent 65%
  );
  z-index:-2;
  pointer-events:none;
}

/* imagen */
.hero-hands-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;

  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(255,45,45,.16));
}

/* borde fino tipo “stroke” alrededor */
.hero-hands::after{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 28px;
  pointer-events:none;

  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 0 1px rgba(255,45,45,.10),
    0 0 28px rgba(255,45,45,.14);
}

/* (si tienes un div .hero-hands-glow en el HTML, lo mantenemos) */
.hero-hands-glow{
  position: absolute;
  inset: -22%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255,45,45,.18),
    transparent 62%
  );
  z-index: -1;
  pointer-events: none;
}

/* ==========================
   HERO TITLE (más elegante)
========================== */
.hero-title{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .10em;
  text-shadow:
    0 10px 28px rgba(0,0,0,.55),
    0 2px 10px rgba(0,0,0,.40);
  position: relative;
}

/* línea premium bajo el título */
.hero-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-22px;
  width:120px;
  height:2px;
  background: linear-gradient(90deg, transparent, #ff2d2d, transparent);
  transform: translateX(-50%);
  opacity:.9;
}

.hero-line{
  display:block;
  font-family:"Oswald", sans-serif;
  line-height: 1.02;
}

.hero-line--main{
  font-size: clamp(3.2rem, 5vw, 4.6rem);
  font-weight: 900;
  letter-spacing: .14em;
}

.hero-line--sub{
  margin-top: .35rem;
  font-size: clamp(1.15rem, 2.1vw, 2.1rem);
  font-weight: 600;
  letter-spacing: .42em;
  color: rgba(255,255,255,.88);
  opacity: .90;
}

/* Acento rojo premium */
/* Acento rojo elegante (SIN efecto neón) */
.hero-accent{
  color: rgba(255,45,45,.95);/* rojo más sobrio empresarial */
  position: relative;
  display: inline-block;
  padding: 0 .08em;
  letter-spacing: 0.08em;

  /* ❌ quitamos glow */
  text-shadow: none;
}

/* ❌ eliminamos efectos neón */
.hero-accent::before,
.hero-accent::after{
  display: none;
}
.hero-sub{
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  opacity: .9;
}

/* ==========================
   HERO BUTTON (ghost elegante)
========================== */
.hero-btn{
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .85rem 2.1rem;
  border-radius: 20px;

  color: rgba(255,255,255,.92);
  text-decoration: none;
  text-transform: uppercase;

  font-family: "Oswald", sans-serif;
  font-weight: 600;
  letter-spacing: .22em;
  font-size: 1rem;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,45,45,.14);

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.hero-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,45,45,.12);
  border-color: rgba(255,45,45,.55);
  box-shadow:
    0 16px 40px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,45,45,.12);
}

.hero-btn:active{
  transform: translateY(0px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,45,45,.18);
}

/* ==========================
   BANNER INFERIOR ANIMADO
========================== */
.hero-banner{
  position:absolute;
  bottom:0; 
  left:0;
  width:100%;
  height:70px;

  /* 🔥 centrado vertical REAL */
  display:flex;
  align-items:center;
  padding-bottom: 6px; /* 🔥 aumenta un poco el espacio abajo */

  /* conexión premium con el resto */
  background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.95));

  border-top: 1px solid rgba(255,255,255,0.12);
  overflow:hidden;
  z-index:3;
}

.hero-banner-marquee{
  display:flex;
  width:max-content;
  will-change: transform;
  animation: marqueeX var(--marquee-duration, 22s) linear infinite;
  transform: translateX(0);
}

.hero-banner-content{
  display:flex;
  align-items:center;
  gap:3rem;
  padding-right:3rem;
  white-space:nowrap;

  /* 🔥 micro ajuste visual (más centrado aún) */
  transform: translateY(2px);
}

.hero-banner-item{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}

.hero-banner-item img{ 
  height:34px; 
}

.hero-banner-item span{
  font-family:"Oswald",sans-serif;
  font-size:1.1rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;

  /* 🔥 ajuste fino del texto */
  display:inline-block;
  transform: translateY(1px);
}

@keyframes marqueeX{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--marquee-distance, 0px))); }
}

/* Mobile */
@media (max-width: 768px){
  .hero-line--main{ font-size: 2.7rem; letter-spacing: .12em; }
  .hero-line--sub{ font-size: 1.25rem; letter-spacing: .30em; }

  .hero-banner{ 
    height:60px; 
  }

  .hero-banner-item span{ 
    font-size:.9rem; 
    letter-spacing:.12em; 
  }
}


/* ================================
   ABOUT SECTION (Premium Dark / Glass)
   ✅ UPDATED: título entra primero y luego líneas expanden (con .is-visible)
   ✅ UPDATED: about-text + features + director también con .is-visible
================================ */
.about-section{
  position: relative;
  width: 100%;
  padding: 90px 20px;
  text-align: center;
  overflow: hidden;

/* Fondo premium — ABOUT DIRECTOR (más rojo, menos negro) */
/* Fondo premium — ABOUT DIRECTOR (rojo elegante, no chillón) */
background:
  radial-gradient(120% 90% at 70% 20%, rgba(255,45,45,.12), transparent 60%),
  radial-gradient(120% 90% at 20% 80%, rgba(120,0,0,.18), transparent 65%),
  linear-gradient(180deg, #050505 0%, #0b0707 50%, #050505 100%);
}

/* grano / profundidad sutil */
.about-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,45,45,.06), transparent 45%);
  opacity: .65;
  pointer-events:none;
  z-index: 0;
}

/* Contenedor general del título */
.about-title-wrapper{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px !important;
  margin-bottom: 26px;
}

/* TAGLINE centrado */
.tagline-wrapper{
  width: 100%;
  text-align: center;
}

.section-tagline{
  display: inline-block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,45,45,.95);
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-bottom: 0 !important;
  text-shadow: 0 8px 18px rgba(0,0,0,.55);
}

/* Contenedor título + líneas */
.title-line-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* =========================================
   ✅ TITLE + LÍNEAS (CONTROLADAS POR .is-visible)
   1) Entra el título
   2) Luego expanden las líneas hacia afuera
========================================= */
.about-title{
  font-family: "Oswald", sans-serif;
  font-size: 4.2rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,.95);
  text-transform: uppercase;
  margin: 0 !important;
  padding: 0;
  position: relative;

  text-shadow:
    0 14px 34px rgba(0,0,0,.70),
    0 2px 14px rgba(0,0,0,.45);

  /* estado inicial */
  opacity: 0;
  transform: translateY(14px);
  filter: blur(3px);

  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .85s cubic-bezier(.16,1,.3,1);
}

/* Líneas decorativas */
.line{
  display:block;
  height: 2px;

  /* ancho final (se expande con scaleX) */
  width: 180px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);

  opacity: 0;
  transform: scaleX(0);
  filter: blur(.2px);

  transition:
    opacity .35s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1);
}

/* para que cada línea salga “desde el título hacia afuera” */
.left-line{  transform-origin: right center; }
.right-line{ transform-origin: left center; }

/* cuando about entra en pantalla */
.about-section.is-visible .about-title{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* líneas expanden DESPUÉS del título */
.about-section.is-visible .line{
  opacity: 1;
  transform: scaleX(1);
  transition-delay: .48s;
}

/* =========================================
   Texto descriptivo (glass)
   ✅ ahora entra con .is-visible
========================================= */
.about-text{
  position: relative;
  z-index: 1;

  max-width: 860px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.9;
  color: rgba(255,255,255,.82);
  font-family: "Poppins", sans-serif;

  padding: 18px 18px;
  border-radius: 18px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.38);

  /* inicial */
  opacity: 0;
  transform: translateY(12px);

  transition: opacity .9s ease, transform .9s ease;
}

.about-section.is-visible .about-text{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .62s;
}

/* ---- Responsive ABOUT ---- */
@media (max-width: 768px){
  .about-section{ padding: 74px 14px; }
  .about-title-wrapper{ gap: 12px; }
  .about-title{ font-size: 2.1rem; letter-spacing: .12em; }
  .line{ width: 70px; }
  .about-text{
    font-size: 0.98rem;
    padding: 14px 14px;
  }
}

/* =========================================
   ICONOS — CARACTERÍSTICAS (glass cards)
   ✅ cards más compactas
   ✅ iconos grandes
========================================= */
.about-features{
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;                     /* 🔽 menos espacio entre cards */
  margin-top: 40px;
  justify-items: center;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}

.about-section.is-visible .about-features{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .80s;
}

/* CARD */
.feature-item{
  width: 100%;
  max-width: 230px;              /* 🔽 más pequeña */
  text-align: center;
  padding: 20px 16px 18px;       /* 🔽 menos aire interno */
  border-radius: 18px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 18px 44px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,45,45,.10);

  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.feature-item:hover{
  transform: translateY(-6px);
  border-color: rgba(255,45,45,.35);
  box-shadow:
    0 24px 56px rgba(0,0,0,.52),
    0 0 0 3px rgba(255,45,45,.12);
}

/* ICONO (SE QUEDA GRANDE) */
.feature-item img{
  display: block;
  width: 110px;
  height: 110px;
  object-fit: contain;

  margin: 0 auto 16px;
  padding: 14px;

  border-radius: 18px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.14);

  filter:
    drop-shadow(0 14px 26px rgba(0,0,0,.50))
    drop-shadow(0 0 20px rgba(255,45,45,.25));

  transition: transform .25s ease;
}

.feature-item:hover img{
  transform: translateY(-3px) scale(1.06);
}

/* TITULO */
.feature-item h3{
  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;           /* 🔽 un poco más compacto */
  margin: 0;
  letter-spacing: .15em;
  color: rgba(255,255,255,.95);
  text-transform: uppercase;
  line-height: 1.25;
}

/* ❌ oculta texto viejo */
.feature-item p{
  display: none !important;
}

/* =========================
   RESPONSIVE FEATURES
========================= */
@media (max-width:1100px){
  .about-features{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
  }

  .feature-item{
    max-width: 250px;
  }
}

@media (max-width:520px){
  .about-features{
    grid-template-columns: 1fr;
  }

  .feature-item{
    max-width: 100%;
  }

  /* 👇 en móvil sí bajamos un poco el icono para que no se vea gigante */
  .feature-item img{
    width: 95px;
    height: 95px;
  }

  .feature-item h3{
    font-size: 1rem;
  }
}

/* ============================================================
   ABOUT - DIRECTOR SECTION
   ✅ SIN glass en contenedor
   ✅ glass SOLO en textos
============================================================ */
.about-director{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-top: 70px;
  padding: 0;

  background: transparent;
  border: none;
  box-shadow: none;

  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s ease;
}

.about-section.is-visible .about-director{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.05s;
}

/* Foto director */
.director-photo-wrapper{
  flex-shrink: 0;
  width: 360px;
  display: flex;
  justify-content: center;
}

.director-photo{
  width: 340px;
  height: auto;
  object-fit: contain;

  border-radius: 140px;

  filter:
    drop-shadow(0 22px 40px rgba(0,0,0,.60))
    drop-shadow(0 0 20px rgba(255,45,45,.18));

  animation: directorImgFloat 4s ease-in-out infinite;
}

/* Info */
.director-info{
  max-width: 640px;
  text-align: left;
}

.director-role{
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .20em;
  color: rgba(255,45,45,.95);
  font-weight: 700;
  font-family: "Oswald", sans-serif;
}

.director-name{
  font-family: "Oswald", sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  margin: 10px 0 18px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.96);

  text-shadow:
    0 18px 38px rgba(0,0,0,.75),
    0 2px 16px rgba(0,0,0,.45);
}

/* 🔥 GLASS SOLO AQUÍ */
.director-description{
  font-family: "Poppins", sans-serif;
  font-size: 1.02rem;
  color: rgba(255,255,255,.82);
  line-height: 1.9;
  margin-bottom: 16px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px 20px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

/* FLOAT IMG */
@keyframes directorImgFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0px); }
}

/* RESPONSIVE DIRECTOR */
@media (max-width:900px){
  .about-director{
    flex-direction: column;
    text-align: center;
  }

  .director-info{ text-align: center; }

  .director-photo-wrapper{ width: 260px; }

  .director-photo{ width: 240px; }

  .director-name{ font-size: 2rem; }
}

/* ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce){
  .about-features,
  .about-director{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ================================
   SERVICES SECTION (REVEAL FINAL)
   ✅ Animación solo al entrar a viewport
   ✅ Nunca deja los 3 servicios “en blanco”
================================ */
.services-section{
  padding: 90px 7% 100px;
  background: #f5f5f5;
}

/* HEADER */
.services-header{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 50px;
}

.services-tagline{
  display: inline-block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #ff1f1f;
  font-weight: 600;
  font-family: "Oswald", sans-serif;
}

/* Wrap del título + líneas */
.services-title-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 0;
}

/* Título en 1 línea */
.services-title{
  font-family: "Oswald", sans-serif;
  font-size: 75px;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
  color: #111;
  position: relative;

  white-space: nowrap;
  display: inline-block;
}

/* Si en el HTML hay <br>, lo anulamos */
.services-title br{ display:none; }

/* Líneas laterales */
.line2{
  display:block;
  height: 2px;
  width: 180px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,.55),
    transparent
  );
}

/* Origen hacia afuera */
.line-left{  transform-origin: right center; }
.line-right{ transform-origin: left center; }

.services-section{
  padding: 90px 7% 100px;
  background:
    radial-gradient(900px 360px at 50% 0%, rgba(0,0,0,.06), transparent 70%),
    radial-gradient(700px 260px at 20% 30%, rgba(255,31,31,.05), transparent 65%),
    radial-gradient(700px 260px at 80% 55%, rgba(0,0,0,.045), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.services-section{
  position: relative;
  overflow: hidden;
}

.services-section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,31,31,.55),
    transparent
  );
  opacity:.9;
  pointer-events:none;
}
.services-header{
  position: relative;
  padding: 28px 26px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 18px 45px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
}
/* =========================
   REVEAL SYSTEM (SAFE)
   Solo oculta si JS activó html.reveal-ready
========================= */

/* Header: sí puede iniciar oculto (solo con JS activo) */
html.reveal-ready .services-tagline,
html.reveal-ready .services-title,
html.reveal-ready .services-intro{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .85s cubic-bezier(.16,1,.3,1);
}

/* Líneas: arrancan “cerradas” (solo con JS activo) */
html.reveal-ready .services-title-wrap .line2{
  opacity: 0;
  transform: scaleX(0);
  transition:
    opacity .35s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1);
}

/* ✅ Los 3 servicios NUNCA van opacity:0 (evita blanco)
   Solo se desplazan/blur y vuelven a normal al entrar */
html.reveal-ready .service-highlight,
html.reveal-ready .service-used,
html.reveal-ready .service-dealers{
  transform: translateY(18px);
  filter: blur(0px);
  transition:
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .85s cubic-bezier(.16,1,.3,1);
}

/* =========================
   ACTIVO al entrar a viewport
========================= */
/* ✅ ACTIVO al entrar el HEADER (no toda la sección) */
/* DESPUÉS (depende de .services-section.is-visible) */
.services-section.is-visible .services-tagline{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.services-section.is-visible .services-title{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .12s;
}

.services-section.is-visible .services-intro{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .22s;
}

/* Líneas laterales */
.services-section.is-visible .services-title-wrap .line2{
  opacity: 1;
  transform: scaleX(1);
  transition-delay: .42s;
}

/* ✅ match con tu HTML */
.left-line  { transform-origin: right center; }
.right-line { transform-origin: left  center; }


/* ✅ Reveal individual por bloque (cuando cada uno entra) */
.service-highlight.is-visible,
.service-used.is-visible,
.service-dealers.is-visible{
  transform: translateY(0);
  filter: blur(0);
}

/* mini-stagger (se siente más premium) */
.service-highlight{ transition-delay: .05s; }
.service-used{      transition-delay: .08s; }
.service-dealers{   transition-delay: .10s; }

/* Intro */
.services-intro{
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  font-family: "Poppins", sans-serif;
}

/* Responsive */
@media (max-width: 768px){
  .services-title{ font-size: 2.1rem; }
  .services-title-wrap{ gap: 8px; }
  .line2{ width: 70px; }
}

/* =========================================================
   SERVICIO 1: ASESORÍA (LEVEL PRO) — GLASS + FLARES + DEPTH
   ✅ FIX: animaciones SOLO cuando .service-highlight tiene .is-visible
   ========================================================= */

/* =========================================================
   SERVICIO 1: ASESORÍA — GLASS RIGHT + FLARES + FIGURAS (LOOK EJEMPLO + MÁS NÍTIDO)
   ✅ Forma como tu 2da imagen (cards inclinadas + superpuestas)
   ✅ Imagen más nítida: reduce resampleo + GPU + micro-contraste
   ✅ Volante más grande
   ========================================================= */

/* =========================
   CONTENEDOR PRINCIPAL
========================= */
.service-highlight{
  margin: 50px 0 60px;
  padding: 60px 55px;
  border-radius: 28px;
  background: #050505;
  color: #f5f5f5;
  display: flex;
  gap: 60px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 75px rgba(0,0,0,.35);
  isolation: isolate;
}

/* viñeta global */
.service-highlight::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 90% at 18% 25%, rgba(255,70,70,.10), transparent 55%),
    radial-gradient(120% 90% at 85% 70%, rgba(255,160,90,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55));
  pointer-events:none;
  z-index:0;
}

/* =========================
   IZQUIERDA
========================= */
.sh-left{
  flex: 1.25;
  display:flex;
  flex-direction:column;
  justify-content:center;
  z-index:2;
}

.sh-tag{
  font-size: .82rem;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,200,140,.95);
  font-family: "Oswald", sans-serif;
  margin-bottom: 10px;
}

.sh-title{
  font-family: "Oswald", sans-serif;
  font-size: 3.55rem;
  line-height: 1.02;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: .03em;
  margin: 0 0 18px;
  text-shadow: 0 16px 55px rgba(0,0,0,.70);
}

@media (max-width:600px){
  .sh-title{ font-size: 2.35rem; }
}

/* GLASS */
.sh-text-block{
  width: 95%;
  max-width: 720px;
  padding: 26px 32px;
  border-radius: 16px;
  margin-bottom: 22px;

  background: rgba(18,18,18,.46);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  font-family: "Poppins", sans-serif;
  color: rgba(235,235,235,.92);
  line-height: 1.75;

  position: relative;
  overflow: hidden;
}

html.reveal-ready .sh-text-block{
  opacity: 0;
  transform: translateX(-70px);
}

.service-highlight.is-visible .sh-text-block{
  animation: shTextIn .95s ease-out forwards;
}

@keyframes shTextIn{
  to{ opacity:1; transform: translateX(0); }
}

.sh-text-block::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 18%,
      rgba(255,255,255,0) 45%),
    radial-gradient(120% 80% at 18% 0%,
      rgba(255,255,255,.16),
      rgba(255,255,255,0) 60%);
  opacity:.65;
  pointer-events:none;
  z-index:0;
}
.sh-text-block > *{ position:relative; z-index:1; }

/* bullets */
.sh-bullets{
  list-style:none;
  padding:0;
  margin:0;
  font-family:"Poppins",sans-serif;
  color: rgba(220,220,220,.94);
}
.sh-bullets li{
  position:relative;
  padding-left:22px;
  margin:10px 0;
}
.sh-bullets li::before{
  content:"▶";
  position:absolute;
  left:0; top:2px;
  font-size:.62rem;
  color:#ff3c3c;
}

/* =========================
   DERECHA (PANEL GLASS)
========================= */
.sh-right{
  flex: 1.1;
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1;
  overflow: hidden;
}

/* Panel glass derecho */
.sh-right::before{
  content:"";
  position:absolute;
  inset: 28px 24px 28px 18px;
  border-radius: 26px;

  background:
    radial-gradient(120% 90% at 30% 25%, rgba(255,60,60,.12), transparent 60%),
    radial-gradient(120% 90% at 80% 75%, rgba(255,190,90,.10), transparent 62%),
    linear-gradient(180deg, rgba(12,12,12,.72), rgba(6,6,6,.92));

  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  z-index: 0;
}

/* línea glow diagonal */
.sh-right::after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  top: 52%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,120,60,.75), transparent);
  opacity: .7;
  z-index: 1;
  pointer-events:none;
  filter: blur(.2px);
}

/* flares */
.sh-solarflare{
  position:absolute;
  left: 56%;
  top: 54%;
  width: 560px;
  height: 260px;
  transform: translate(-50%,-50%);
  pointer-events:none;
  z-index: 2;
  opacity: .85;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,160,90,.55), rgba(255,160,90,0) 55%),
    radial-gradient(circle at 62% 52%, rgba(255,85,70,.28), rgba(255,85,70,0) 60%),
    linear-gradient(90deg, transparent, rgba(255,140,80,.55), transparent);
  mix-blend-mode: screen;
  filter: blur(.6px);
}

.sh-solarflare-2{
  position:absolute;
  left: 66%;
  top: 60%;
  width: 280px;
  height: 120px;
  transform: translate(-50%,-50%) rotate(-6deg);
  pointer-events:none;
  z-index: 2;
  opacity: .55;
  background:
    radial-gradient(circle at 40% 50%, rgba(255,200,120,.45), rgba(255,200,120,0) 60%),
    linear-gradient(90deg, transparent, rgba(255,120,70,.45), transparent);
  mix-blend-mode: screen;
  filter: blur(.8px);
}

/* =========================
   FIGURAS (LOOK EJEMPLO + NITIDEZ)
========================= */

/* base */
.sh-card{
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 35px rgba(0,0,0,.65);
  will-change: transform, opacity, filter;

  /* ✅ ayuda a que el render de transform no “ensucie” */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* marco glass del card */
.sh-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);
  pointer-events:none;
  z-index: 2;
}

/* ✅ micro-contraste interno (se siente más nítido / pro) */
.sh-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 -6px 14px rgba(0,0,0,.25);
  z-index: 3;
}

/* wrapper del media */
/* wrapper: base */
.sh-media{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
}

/* ✅ la imagen ahora SÍ llena el contenedor */
.sh-media img{
  position: absolute;
  inset: 0;                 /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  /* tu estilo */
  transform: skewX(8deg) scale(1.18);
  transform-origin: center;

  backface-visibility: hidden;
  will-change: transform;
}

@media (max-width: 992px){
  .sh-media img{
    transform: skewX(6deg) scale(1.20);
  }
}
/* --------
   TOP CARD
-------- */
.sh-card-top{
  width: 100%;
  max-width: 520px;
  height: 300px;
  transform: translateY(-40px) translateX(20px) skewX(-8deg);
  transform-origin: center;
}

/* --------
   BOTTOM CARD (VOLANTE MÁS GRANDE)
-------- */
.sh-card-bottom{
  width: 92%;
  max-width: 520px;
  height: 285px;
  transform: translateY(92px) translateX(-10px) skewX(-8deg);
  transform-origin: center;
  z-index: 4;
}

/* estado inicial */
html.reveal-ready .sh-card-top,
html.reveal-ready .sh-card-bottom{
  opacity: 0;
  filter: blur(.45px); /* ✅ menos blur = más nítido */
}

html.reveal-ready .sh-card-top{
  transform: translateY(-40px) translateX(150px) skewX(-8deg);
}
html.reveal-ready .sh-card-bottom{
  transform: translateY(92px) translateX(170px) skewX(-8deg);
}

/* animaciones */
.service-highlight.is-visible .sh-card-top{
  animation: shTopIn 1.05s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .30s;
}
.service-highlight.is-visible .sh-card-bottom{
  animation: shBottomIn 1.15s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .48s;
}

@keyframes shTopIn{
  to{
    opacity:1;
    filter: none;
    transform: translateY(-40px) translateX(20px) skewX(-8deg);
  }
}
@keyframes shBottomIn{
  to{
    opacity:1;
    filter: none;
    transform: translateY(92px) translateX(-10px) skewX(-8deg);
  }
}

/* =========================
   BADGE BENEFICIO
========================= */
.sh-benefit{
  position: absolute;
  left: 12%;
  bottom: 12%;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 14px 16px;
  border-radius: 18px;

  background: rgba(18,18,18,.40);
  border: 1px solid rgba(255,255,255,.14);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  box-shadow:
    0 22px 55px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);

  overflow: hidden;
}

.sh-benefit::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.07) 22%,
      rgba(255,255,255,0) 48%),
    radial-gradient(120% 90% at 20% 0%,
      rgba(255,255,255,.14),
      rgba(255,255,255,0) 65%);
  opacity:.70;
  pointer-events:none;
}

.sh-benefit-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;

  background: rgba(255,60,60,.16);
  border: 1px solid rgba(255,60,60,.30);

  box-shadow:
    0 14px 34px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,60,60,.10);
}

.sh-benefit-icon svg{
  width:24px;
  height:24px;
  color:#fff;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.sh-benefit-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.1;
}

.sh-benefit-title{
  font-family:"Oswald",sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.95rem;
  color:#fff;
}

.sh-benefit-sub{
  font-family:"Poppins",sans-serif;
  font-size:.88rem;
  color: rgba(240,240,240,.86);
}

.sh-benefit-note{
  font-family:"Poppins",sans-serif;
  font-size:.82rem;
  color: rgba(240,240,240,.72);
  margin-top: 2px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px){
  .service-highlight{
    flex-direction: column;
    padding: 40px 22px;
  }

  .sh-right::before{
    inset: 16px 14px 16px 14px;
    border-radius: 22px;
  }

  .sh-card-top{
    max-width: 100%;
    height: 280px;
    transform: translateY(0) translateX(0) skewX(-6deg);
  }

  .sh-card-bottom{
    max-width: 92%;
    height: 250px;
    transform: translateY(28px) translateX(30px) skewX(-6deg);
  }

  .sh-media img{
    transform: skewX(6deg) translate3d(-6%, -6%, 0) scale(1.004);
  }

  html.reveal-ready .sh-card-top{
    transform: translateY(-10px) translateX(80px) skewX(-6deg);
  }
  html.reveal-ready .sh-card-bottom{
    transform: translateY(28px) translateX(90px) skewX(-6deg);
  }

  .sh-benefit{
    position: static;
    margin: 18px auto 0;
    max-width: 360px;
  }
}


/* =========================================================
   SERVICIO 2: VENTA DE AUTOS USADOS (LEVEL PRO) — FINAL FIX
   ✅ Bullets FUERA del glass y SIEMPRE a la izquierda (debajo)
   ✅ Glass del panel similar a Servicio 1 (.sh-text-block)
   ✅ Flecha a la derecha sin “empujar” el layout (grid)
   ✅ Mantiene flares + animaciones
   ========================================================= */

/* CONTENEDOR PRINCIPAL */
.service-used{
  position: relative;
  margin: 60px 0;
  border-radius: 26px;
  overflow: hidden;
  min-height: 500px;
  background: #000;
  box-shadow: 0 30px 75px rgba(0,0,0,.35);
  isolation: isolate;
}

/* Fondo con foto del auto */
.service-used::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/services/usados-bg.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.92;
  z-index: 0;
  transform: scale(1.03);
}

/* Viñeta + mood */
.service-used::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(255,45,45,.18), transparent 55%),
    radial-gradient(120% 90% at 25% 85%, rgba(255,45,45,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.62));
  z-index: 1;
  pointer-events:none;
}

/* =========================================================
   LAYOUT INTERNO (GRID)
   - Col 1: panel + bullets (izquierda)
   - Col 2: flecha (derecha)
   ========================================================= */
.service-used-inner{
  position: relative;
  z-index: 3;
  min-height: 500px;
  display: block;

  /* reserva espacio para título fuera del glass */
  padding-top: 130px;
  padding-bottom: 40px;

  /* ✅ reservamos espacio a la derecha para que la flecha NO tape texto */
  padding-right: 560px;
}

/* =========================================================
   TITULO FUERA DEL GLASS
   ========================================================= */
.service-used-head{
  position: absolute;
  left: 80px;
  top: 52px;
  z-index: 5;
  max-width: 680px;
  pointer-events: none;
}

.su-tag{
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,200,140,.95);
  font-family: "Oswald", sans-serif;
  margin: 0 0 10px;
}

.su-title{
  font-family: "Oswald", sans-serif;
  font-size: 3.45rem;
  color: #fff;
  line-height: 1.03;
  text-transform: uppercase;
  margin: 0;
  font-style: italic;
  text-shadow: 0 16px 55px rgba(0,0,0,.70);
}

/* =========================================================
   REFLEJOS SOLARES / LENS FLARE
   ========================================================= */
.su-solarflare{
  position: absolute;
  left: 56%;
  top: 52%;
  width: 620px;
  height: 280px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  opacity: .80;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,45,45,.55), rgba(255,45,45,0) 55%),
    radial-gradient(circle at 62% 52%, rgba(255,45,45,.26), rgba(255,45,45,0) 60%),
    linear-gradient(90deg, transparent, rgba(255,45,45,.45), transparent);
  filter: blur(.6px);
  mix-blend-mode: screen;
}

.su-solarflare-2{
  position: absolute;
  left: 68%;
  top: 58%;
  width: 300px;
  height: 130px;
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
  z-index: 2;
  opacity: .55;
  background:
    radial-gradient(circle at 40% 50%, rgba(255,45,45,.42), rgba(255,45,45,0) 60%),
    linear-gradient(90deg, transparent, rgba(255,45,45,.35), transparent);
  mix-blend-mode: screen;
  filter: blur(.8px);
}

/* =========================================================
   PANEL (GLASS) — similar a Servicio 1 (.sh-text-block)
   ✅ SIN bullets dentro
   ✅ FIX: animación SOLO cuando .service-used tiene .is-visible
   ========================================================= */
.service-used-panel{
  grid-column: 1;

  max-width: 680px;
  margin-left: 80px;
  margin-top: 40px;

  padding: 26px 32px;
  border-radius: 16px;

  background: rgba(18,18,18,.46);
  color: rgba(235,235,235,.92);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);

  font-family: "Poppins", sans-serif;

  position: relative;
  overflow: hidden;

  /* ✅ FIX: sin animation aquí */
}

/* Estado inicial SOLO con JS activo */
html.reveal-ready .service-used-panel{
  opacity: 0;
  transform: translateX(-80px);
}

/* Anima SOLO al entrar */
.service-used.is-visible .service-used-panel{
  animation: suPanelIn .95s ease-out forwards;
}

/* reflejos vidrio */
.service-used-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 18%,
      rgba(255,255,255,0) 45%),
    radial-gradient(120% 80% at 18% 0%,
      rgba(255,255,255,.16),
      rgba(255,255,255,0) 60%);
  opacity:.65;
  pointer-events:none;
  z-index:0;
}

/* glow sutil rojo (más fino) */
.service-used-panel::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(135deg,
    rgba(255,45,45,.18),
    rgba(255,45,45,.08),
    rgba(255,255,255,0) 72%);
  mix-blend-mode: screen;
  opacity:.50;
  pointer-events:none;
  z-index:0;
}

.service-used-panel > *{ position: relative; z-index: 1; }

/* Párrafos */
.su-text{
  font-size: 1.00rem;
  line-height: 1.8;
  margin-bottom: 10px;
  color: rgba(235,235,235,.92);
}

/* Animación panel */
@keyframes suPanelIn{
  0%{ opacity: 0; transform: translateX(-90px); }
  100%{ opacity: 1; transform: translateX(0); }
}

/* =========================================================
   BULLETS FUERA DEL GLASS (SIEMPRE IZQUIERDA)
   ========================================================= */
.su-bullets-box{
  grid-column: 1;

  max-width: 680px;
  margin-left: 80px;
  margin-top: 26px;
}

.su-bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.05rem;
  color: rgba(240,240,240,.95);
  font-family: "Poppins", sans-serif;
}

.su-bullets li{
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
}

.su-bullets li::before{
  content: "▶";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.62rem;
  color: #ff2d2d;
}

/* =========================================================
   FLECHA (DERECHA)
   ✅ FIX: animación SOLO cuando .service-used tiene .is-visible
   ========================================================= */
.service-used-arrow{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4%;
  margin: auto 0;

  width: 500px;
  height: 100%;

  background-image: url("../images/services/flecha.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 22% 50%);
  z-index: 4;

  filter: drop-shadow(0 25px 55px rgba(0,0,0,.65));

  /* ✅ FIX: sin animation aquí */
  will-change: transform, opacity;
}

/* Estado inicial SOLO con JS activo */
html.reveal-ready .service-used-arrow{
  opacity: 0;
  transform: translateX(-1600px);
}

/* Anima SOLO al entrar */
.service-used.is-visible .service-used-arrow{
  animation: suArrowEnter 2.6s cubic-bezier(.22,.61,.36,1) forwards;
}

/* glow sutil */
.service-used-arrow::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg,
    rgba(255,45,45,.22),
    rgba(255,45,45,.12),
    transparent 70%);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events:none;
}

/* animación flecha */
@keyframes suArrowEnter{
  0%{ transform: translateX(-1600px); opacity: 0; }
  45%{ opacity: 1; }
  100%{ transform: translateX(0); opacity: 1; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px){
  .service-used{ border-radius: 20px; }

  .service-used-inner{
    grid-template-columns: minmax(420px, 1fr) 1fr;
    padding-top: 98px;
  }

  .service-used-head{
    left: 40px;
    top: 46px;
  }

  .service-used-panel{
    margin-left: 40px;
    padding: 24px 28px;
  }

  .su-bullets-box{ margin-left: 40px; }
}

@media (max-width: 768px){
  .service-used::before{ background-position: center; }

  .service-used-arrow{ display:none; }

  .service-used-inner{
    display: block;
    padding-top: 26px;
    padding-bottom: 28px;
  }

  .service-used-head{
    position: relative;
    left: auto;
    top: auto;
    margin: 22px 18px 12px;
    max-width: 100%;
    pointer-events: auto;
  }

  .su-title{ font-size: 2.35rem; }

  .service-used-panel{
    margin: 0 18px;
    max-width: 100%;
    clip-path: none;
    border-radius: 18px;
    margin-top: 0;
  }

  .su-bullets-box{
    margin: 14px 18px 0;
    max-width: 100%;
  }

  .su-solarflare{
    left: 50%;
    top: 62%;
    width: 520px;
    height: 240px;
    opacity: .70;
  }

  .su-solarflare-2{
    left: 60%;
    top: 66%;
    width: 240px;
    height: 110px;
    opacity: .50;
  }
}
@media (max-width: 992px){
  .service-used-inner{ padding-right: 420px; }
}

@media (max-width: 768px){
  .service-used-inner{ padding-right: 0; }
  .service-used-arrow{ display:none; }
}

/* =========================================
   SERVICIO 3 - DEALERS (LOOK PRO)
   (sin cambios en tu bloque original)
   ========================================= */
.service-dealers{
  position: relative;
  width: 100%;
  height: 740px;
  border-radius: 28px;
  overflow: hidden;
  background: #050505;
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: stretch;
  margin-top: 60px;
  box-shadow: 0 30px 75px rgba(0,0,0,.38);
  isolation: isolate;
}

/* viñeta roja */
.service-dealers::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(255,45,45,.22), transparent 55%),
    radial-gradient(120% 90% at 80% 80%, rgba(255,45,45,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.75));
  z-index:0;
  pointer-events:none;
}

/* =========================================
   IZQUIERDA
   ========================================= */
.sd-left{
  position: relative;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.sd-band{
  position: absolute;
  inset: -10% -10%;
  background: linear-gradient(180deg, rgba(60,8,8,.96), rgba(8,2,2,.99));
}

.sd-band::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 80% at 25% 45%, rgba(255,45,45,.34), transparent 62%);
  clip-path: ellipse(70% 55% at 25% 45%);
  mix-blend-mode: screen;
  opacity: .9;
}

.sd-left::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 25% 22%, rgba(255,45,45,.22), transparent 45%),
    radial-gradient(circle at 20% 85%, rgba(255,45,45,.14), transparent 55%),
    radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 2px) 0 0/18px 18px;
  opacity:.45;
  mix-blend-mode: screen;
  z-index:2;
  pointer-events:none;
}

/* =========================================
   IMAGEN (⬆️ SUBIDA CLARAMENTE)
   ========================================= */
.sd-left-media{
  position: absolute;
  z-index: 4;
  left: 44px;
  right: 34px;

  top: 60%;
  transform: translateY(-50%);

  height: 560px;

  border-radius: 24px;
  overflow: hidden;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  background: rgba(0,0,0,.18);
  box-shadow: 0 30px 75px rgba(0,0,0,.65);
  border: 1px solid rgba(255,45,45,.34);
}

.sd-left-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.08) saturate(1.12) brightness(.98);
}

.sd-left-media::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(255,45,45,.38),
    rgba(255,45,45,.18),
    transparent 70%
  );
  mix-blend-mode: screen;
  pointer-events:none;
}

/* =========================================
   DERECHA
   ========================================= */
.sd-right{
  position: relative;
  padding: 100px 72px 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  z-index: 1;
  overflow: hidden;
}

.sd-right::before{
  content:"";
  position:absolute;
  inset: 36px 36px 36px 26px;
  border-radius: 28px;
  background:
    radial-gradient(120% 100% at 25% 16%, rgba(255,45,45,.16), transparent 62%),
    linear-gradient(180deg, rgba(10,10,10,.84), rgba(5,5,5,.97));
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.05);
  z-index: -2;
}

/* =========================================
   TEXTO
   ========================================= */
.sd-tag{
  margin: 0 0 14px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color:  rgba(255,200,140,.95);
  font-family: "Oswald", sans-serif;
}

.sd-title{
  margin: 0 0 18px;
  font-family: "Oswald", sans-serif;
  font-size: 3.55rem;
  line-height: 1.02;
  color: #fff;
  text-transform: uppercase;
  font-style: italic;
  text-shadow: 0 16px 55px rgba(0,0,0,.78);
}

/* =========================================
   GLASS PANEL
   ========================================= */
.sd-panel{
  background: rgba(18,18,18,.46);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);
  backdrop-filter: blur(14px) saturate(140%);
  padding: 26px 32px 24px;
  border-radius: 18px;
}

.sd-panel,
.sd-panel p,
.sd-text,
.sd-bullets,
.sd-bullets li{
  font-family: "Poppins", sans-serif;
  font-size: 1.03rem;
  line-height: 1.75;
  color: rgba(235,235,235,.92);
}

.sd-bullets{
  list-style: none;
  padding: 0;
  margin: 0;
}
.sd-bullets li{
  position: relative;
  padding-left: 26px;
  margin: 10px 0;
}
.sd-bullets li::before{
  content: "▶";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: .74rem;
  color: #ff2d2d;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 980px){
  .service-dealers{
    grid-template-columns: 1fr;
    height: auto;
  }

  .sd-left{ min-height: 440px; }

  .sd-left-media{
    height: 380px;
    left: 18px;
    right: 18px;
    top: 46%;
    clip-path: none;
    border-radius: 18px;
  }

  .sd-right{
    padding: 56px 22px 60px;
  }

  .sd-title{
    font-size: 2.5rem;
  }
}
/* =========================================
   FIX: Servicio 3 Dealers (animación real)
   - Desactiva blur/translate del reveal general solo aquí
   - Anima imagen desde izquierda y panel desde derecha
========================================= */

/* 1) Anular el reveal general en el contenedor dealers */
html.reveal-ready #servicios-dealers{
  transform: none !important;
  filter: none !important;
}

/* 2) Estado inicial (solo si JS está activo y aún NO es visible) */
html.reveal-ready #servicios-dealers:not(.is-visible) .sd-left-media{
  opacity: 0;
  transform: translateX(-80px) translateY(-50%);
}

html.reveal-ready #servicios-dealers:not(.is-visible) .sd-panel{
  opacity: 0;
  transform: translateX(80px);
}

/* 3) Cuando entra (is-visible), animamos con keyframes */
#servicios-dealers.is-visible .sd-left-media{
  animation: dealersImgIn .95s cubic-bezier(.16,1,.3,1) both;
}

#servicios-dealers.is-visible .sd-panel{
  animation: dealersPanelIn .95s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .12s;
}

/* (Opcional) bullets después */
#servicios-dealers.is-visible .sd-bullets{
  animation: dealersBulletsIn .85s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .22s;
}

@keyframes dealersImgIn{
  from{ opacity:0; transform: translateX(-80px) translateY(-50%); }
  to  { opacity:1; transform: translateX(0)    translateY(-50%); }
}

@keyframes dealersPanelIn{
  from{ opacity:0; transform: translateX(80px); }
  to  { opacity:1; transform: translateX(0); }
}

@keyframes dealersBulletsIn{
  from{ opacity:0; transform: translateX(30px); }
  to  { opacity:1; transform: translateX(0); }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  html.reveal-ready #servicios-dealers:not(.is-visible) .sd-left-media,
  html.reveal-ready #servicios-dealers:not(.is-visible) .sd-panel{
    opacity: 1 !important;
    transform: none !important;
  }
  #servicios-dealers.is-visible .sd-left-media,
  #servicios-dealers.is-visible .sd-panel,
  #servicios-dealers.is-visible .sd-bullets{
    animation: none !important;
  }
}

/* ================================
boton para los servicios
================================ */

/* =========================================
   BOTÓN CTA PARA CADA SERVICIO (GLASS PRO)
========================================= */
/* =========================================================
   WRAP DEL BOTÓN (LO BAJA Y LO CENTRA)
========================================================= */
.service-cta-wrap{
  width: 100%;
  margin-top: 26px;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================================================
   BOTÓN BASE
========================================================= */
.service-cta{
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-width: 260px;
  padding: 14px 20px;

  border-radius: 16px;

  font-family: "Oswald", sans-serif;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: #fff;
  text-decoration: none;

  background: rgba(18,18,18,.42);
  border: 1px solid rgba(255,255,255,.12);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  box-shadow:
    0 22px 55px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

/* CAPA GLASS */
.service-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 22%,
      rgba(255,255,255,0) 52%),
    radial-gradient(120% 80% at 20% 0%,
      rgba(255,255,255,.12),
      rgba(255,255,255,0) 60%);
  opacity:.70;
  pointer-events:none;
}

/* GLOW ROJO */
.service-cta::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(135deg,
    rgba(255,45,45,.26),
    rgba(255,45,45,.12),
    rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity:.55;
  pointer-events:none;
}

/* HOVER */
.service-cta:hover{
  transform: translateY(-3px);

  border-color: rgba(255,45,45,.35);

  box-shadow:
    0 30px 75px rgba(0,0,0,.65),
    0 0 0 3px rgba(255,45,45,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* ACTIVE */
.service-cta:active{
  transform: translateY(0);
}

/* ICONO */
.service-cta-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  background: rgba(255,45,45,.18);
  border: 1px solid rgba(255,45,45,.30);

  box-shadow: 0 14px 34px rgba(0,0,0,.45);

  font-size: 1rem;
  line-height: 1;
}

/* VARIANTE OPCIONAL (SERVICIO 2) */
.service-cta--alt::after{
  opacity:.40;
}


/* =========================================================
   SERVICIO 1 → BOTÓN ABAJO DEL TODO
========================================================= */
.sh-left{
  display:flex;
  flex-direction:column;
}

.sh-left .service-cta-wrap{
  margin-top:auto;
  padding-top:22px;
}


/* =========================================================
   SERVICIO 2 → CENTRADO ABAJO Y RESPETANDO FLECHA
========================================================= */
.service-used-inner .service-cta-wrap{
  margin-top: 34px;

  padding-left: 80px;
  padding-right: 560px; /* espacio de la flecha */
}


/* =========================================================
   SERVICIO 3 → BOTÓN ABAJO DEL PANEL DERECHO
========================================================= */
.sd-right{
  display:flex;
  flex-direction:column;
}

.sd-right .service-cta-wrap{
  margin-top:auto;
  padding-top:24px;
}


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 992px){

  .service-used-inner .service-cta-wrap{
    padding-right: 420px;
  }

}

@media (max-width: 768px){

  .service-cta{
    width: 100%;
    max-width: 520px;
  }

  .service-used-inner .service-cta-wrap{
    padding-left: 18px;
    padding-right: 18px;
  }

  .sd-right .service-cta-wrap{
    padding-top: 18px;
  }

}


/* ================================
   CONTACT SECTION (PREMIUM ABOUT STYLE)
   ROJO / NEGRO / GLASS
   ✅ UPDATED: header animation + slower stagger + form on scroll
   Requiere: .contact-section.is-visible (JS IntersectionObserver)
================================ */

/* Section */
.contact-section{
  position: relative;
  width: 100vw;              /* ✅ ocupa todo el ancho */
  left: 50%;
  right: 50%;
  margin-left: -50vw;        /* ✅ rompe el contenedor */
  margin-right: -50vw;

  padding: 95px 0 105px;     /* ❌ quitamos padding lateral */
  background: #050505;
  overflow: hidden;
  isolation: isolate;
  margin-top: 60px;

  border-radius: 0;          /* ✅ ya no se ve como card */
}
.contact-inner{
  max-width: 1200px;      /* mismo ancho premium del sitio */
  margin: 0 auto;
  padding: 0 7%;          /* ahora el padding va aquí */
  position: relative;
  z-index: 2;
}
@media (max-width: 980px){
  .contact-section{
    padding: 80px 0 90px;
  }

  .contact-inner{
    padding: 0 6%;
  }
}


/* viñeta + mood rojo (como About) */
.contact-section::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 90% at 20% 18%, rgba(255,45,45,.18), transparent 55%),
    radial-gradient(120% 90% at 80% 80%, rgba(255,45,45,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.72));
  z-index:0;
  pointer-events:none;
}

/* textura sutil (dots) */
.contact-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 35%, rgba(255,45,45,.14), transparent 45%),
    radial-gradient(circle at 84% 70%, rgba(255,45,45,.10), transparent 55%),
    radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 2px) 0 0/18px 18px;
  opacity:.22;
  mix-blend-mode: screen;
  z-index:1;
  pointer-events:none;
}

/* Header */
.contact-header{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 860px;
  margin: 0 auto 54px;
}

.contact-tagline{
  display: inline-block;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #ff2d2d;
  font-weight: 600;
  font-family: "Oswald", sans-serif;
  text-shadow: 0 10px 25px rgba(0,0,0,.55);
}

.contact-title{
  font-family: "Oswald", sans-serif;
  font-size: 4rem;
  letter-spacing: .12em;
  margin: 12px 0 14px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 16px 55px rgba(0,0,0,.75);
}
/* ✅ LÍNEAS LATERALES TAMBIÉN PARA CONTACT */
.contact-section .title-line-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top: 10px;
}

/* Estado inicial (igual que About) */
.contact-section .line{
  display:block;
  height: 2px;
  width: 180px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);

  opacity: 0;
  transform: scaleX(0);
  filter: blur(.2px);

  transition:
    opacity .35s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1);
}

.contact-section .left-line{  transform-origin: right center; }
.contact-section .right-line{ transform-origin: left center; }

/* ✅ Se activan cuando la sección entra */
.contact-section.is-visible .line{
  opacity: 1;
  transform: scaleX(1);
  transition-delay: .48s;
}

/* Responsive */
@media (max-width:768px){
  .contact-section .line{ width: 70px; }
}


.contact-intro{
  font-size: 1.02rem;
  color: rgba(235,235,235,.88);
  line-height: 1.75;
  font-family: "Poppins", sans-serif;
  max-width: 760px;
  margin: 0 auto;
}

/* ✅ NEW: Header animation (no cambia estilos, solo entrada) */
.contact-tagline,
.contact-title,
.contact-intro{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(3px);
  will-change: opacity, transform, filter;

  transition:
    opacity 1.05s cubic-bezier(.16,1,.3,1),
    transform 1.25s cubic-bezier(.16,1,.3,1),
    filter 1.05s cubic-bezier(.16,1,.3,1);
}

.contact-section.is-visible .contact-tagline{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .06s;
}
.contact-section.is-visible .contact-title{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .22s;
}
.contact-section.is-visible .contact-intro{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .38s;
}

/* Grid */
.contact-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr);
  gap: 42px;
  align-items: start;
}

/* Columna izquierda (cards) */
.contact-info{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cards -> GLASS premium */
.contact-card{
  padding: 18px 18px;
  border-radius: 16px;
  background: rgba(18,18,18,.46);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  /* ✅ UPDATED: más lento (sin cambiar look) */
  opacity: 0;
  transform: translateX(-26px);
  transition:
    opacity 1.05s cubic-bezier(.16,1,.3,1),
    transform 1.25s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;

  position: relative;
  overflow: hidden;
}

/* ✅ Al entrar la sección: cards visibles */
.contact-section.is-visible .contact-info .contact-card{
  opacity: 1;
  transform: translateX(0);
}

/* ✅ STAGGER (uno por uno) — más elegante */
.contact-section.is-visible .contact-info .contact-card:nth-child(1){ transition-delay: .10s; }
.contact-section.is-visible .contact-info .contact-card:nth-child(2){ transition-delay: .32s; }
.contact-section.is-visible .contact-info .contact-card:nth-child(3){ transition-delay: .54s; }
.contact-section.is-visible .contact-info .contact-card:nth-child(4){ transition-delay: .76s; }

/* reflejos vidrio */
.contact-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.06) 18%,
      rgba(255,255,255,0) 45%),
    radial-gradient(120% 80% at 18% 0%,
      rgba(255,255,255,.14),
      rgba(255,255,255,0) 60%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

/* borde glow rojo */
.contact-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    rgba(255,45,45,.22),
    rgba(255,45,45,.10),
    rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

.contact-card > *{ position: relative; z-index: 1; }

.contact-card h3{
  margin: 0 0 6px;
  font-family: "Oswald", sans-serif;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: #fff;
}

.contact-card p{
  margin: 0;
  font-size: .98rem;
  color: rgba(235,235,235,.86);
  font-family: "Poppins", sans-serif;
}

/* ===============================
   CONTACT FORM — GLASS PREMIUM (CLEAN)
   ✅ Sin repeticiones / sin sobrescritos
================================= */

/* Formulario -> GLASS premium */
.contact-form{
  background: rgba(18,18,18,.46);
  border-radius: 18px;
  padding: 28px 26px 26px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 70px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  /* Entrance */
  opacity: 0;
  transform: translateX(26px);
  transition:
    opacity 1.05s cubic-bezier(.16,1,.3,1),
    transform 1.25s cubic-bezier(.16,1,.3,1);
  transition-delay: 1.00s;
  will-change: opacity, transform;

  position: relative;
  overflow: hidden;
}

.contact-section.is-visible .contact-form{
  opacity: 1;
  transform: translateX(0);
}

/* reflejo vidrio form */
.contact-form::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.06) 18%,
      rgba(255,255,255,0) 45%),
    radial-gradient(120% 80% at 18% 0%,
      rgba(255,255,255,.14),
      rgba(255,255,255,0) 60%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

.contact-form > *{ position: relative; z-index: 1; }

/* Form layout */
.form-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-group{
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.form-group label{
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  font-family: "Poppins", sans-serif;
}

/* Inputs dark premium */
.form-group input,
.form-group select,
.form-group textarea{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  padding: 11px 12px;
  font-size: .98rem;
  font-family: "Poppins", sans-serif;
  outline: none;

  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    transform .2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color: rgba(255,255,255,.40);
}

.form-group textarea{
  resize: vertical;
  min-height: 125px;
}

/* Focus premium rojo */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color: rgba(255,45,45,.75);
  box-shadow: 0 0 0 3px rgba(255,45,45,.14);
  background: rgba(0,0,0,.45);
}

/* ===============================
   CONTACT BUTTON — NEW STYLE (GLASS + RED RING)
================================= */
.contact-btn{
  position: relative;
  overflow: hidden;
  width: 100%;

  min-height: 56px;
  padding: 0 22px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);

  background:
    radial-gradient(120% 180% at 15% 0%, rgba(255,45,45,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  color: rgba(255,255,255,.92);
  font-family: "Oswald", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;

  cursor: pointer;

  box-shadow:
    0 18px 46px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);

  transition:
    transform .18s cubic-bezier(.2,.9,.2,1),
    box-shadow .24s ease,
    border-color .24s ease,
    filter .24s ease;
    
  margin-top: 40px;
}

.contact-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,45,45,.45), transparent 68%);
  opacity: .35;
  filter: blur(10px);
  pointer-events:none;
  transition: opacity .24s ease;
}

.contact-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.18) 20%,
      rgba(255,255,255,.08) 30%,
      transparent 46%);
  transform: translateX(-140%) skewX(-18deg);
  opacity: .9;
  pointer-events:none;
  transition: transform .75s cubic-bezier(.16,1,.3,1);
}

.contact-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,45,45,.45);
  filter: brightness(1.05) saturate(1.06);
  box-shadow:
    0 24px 70px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,45,45,.18),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.60);
}

.contact-btn:hover::before{ opacity: .65; }
.contact-btn:hover::after{ transform: translateX(140%) skewX(-18deg); }

.contact-btn:active{
  transform: translateY(0) scale(.985);
  filter: brightness(1.00);
  box-shadow:
    0 18px 46px rgba(0,0,0,.55),
    inset 0 2px 8px rgba(0,0,0,.55);
}

.contact-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255,45,45,.20),
    0 24px 70px rgba(0,0,0,.62);
}

/* Responsive */
@media (max-width: 980px){
  .contact-section{ padding: 80px 6% 90px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 22px; }
  .contact-title{ font-size: 2.35rem; }
  .form-row{ grid-template-columns: 1fr; }

  /* en mobile: que no “vuele” mucho */
  .contact-card{ transform: translateY(14px); }
  .contact-form{ transform: translateY(14px); }
  .contact-section.is-visible .contact-card,
  .contact-section.is-visible .contact-form{
    transform: translateY(0);
  }

  .contact-btn{
    min-height: 54px;
    font-size: 1rem;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .contact-tagline,
  .contact-title,
  .contact-intro,
  .contact-card,
  .contact-form{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
/* ===============================
   CONTACT FORM — EXTRA HEIGHT (PREMIUM)
================================= */

/* Desktop: más altura y presencia */
@media (min-width: 981px){
  .contact-form{
    padding-top: 25px;
    padding-bottom: 25px;
    min-height: 380px; /* 👈 ajusta a gusto: 420–460 */
  }
}

/* =========================
   HERO — ENTRANCE ANIMATIONS
   ========================= */

/* =========================
   HERO — ENTRANCE (PREMIUM)
   ========================= */
:root{
  --hero-ease: cubic-bezier(.16, 1, .3, 1); /* tipo spring suave */
  --hero-d0: .10s;
  --hero-d1: .22s;
  --hero-d2: .34s;
  --hero-d3: .50s;
  --hero-d4: .66s;
}

/* Estado inicial (más “cinematic”) */
.hero .hero-hands,
.hero .hero-line--main,
.hero .hero-line--sub,
.hero .hero-btn,
.hero .hero-banner{
  opacity: 0;
  transform: translateY(26px) scale(.985);
  filter: blur(4px);
  will-change: transform, opacity, filter;
}

/* Título principal con un toque lateral para que se sienta “pro” */
.hero .hero-line--main{
  transform: translateY(30px) translateX(-10px) scale(.985);
}
.hero .hero-line--sub{
  transform: translateY(28px) translateX(10px) scale(.99);
}

/* Botón un poquito más abajo para “pop” */
.hero .hero-btn{
  transform: translateY(34px) scale(.97);
}

/* Banner entra desde abajo */
.hero .hero-banner{
  transform: translateY(40px);
  filter: blur(3px);
}

/* Activo */
body.hero-ready .hero .hero-hands,
body.hero-ready .hero .hero-line--main,
body.hero-ready .hero .hero-line--sub,
body.hero-ready .hero .hero-btn,
body.hero-ready .hero .hero-banner{
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  filter: blur(0);
  transition:
    opacity .95s var(--hero-ease),
    transform 1.15s var(--hero-ease),
    filter .95s var(--hero-ease);
}

/* Stagger */
body.hero-ready .hero .hero-hands{ transition-delay: var(--hero-d0); }
body.hero-ready .hero .hero-line--main{ transition-delay: var(--hero-d1); }
body.hero-ready .hero .hero-line--sub{ transition-delay: var(--hero-d2); }
body.hero-ready .hero .hero-btn{ transition-delay: var(--hero-d3); }
body.hero-ready .hero .hero-banner{ transition-delay: var(--hero-d4); }

/* “Shine” en el acento rojo al entrar */
.hero .hero-accent{
  position: relative;
  overflow: hidden;
}
.hero .hero-accent::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-120%;
  width: 60%;
  height: 160%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: 0;
  pointer-events:none;
}
body.hero-ready .hero .hero-accent::before{
  opacity: 1;
  animation: heroAccentShine 1.05s var(--hero-ease) forwards;
  animation-delay: .52s;
}
@keyframes heroAccentShine{
  to{ left: 160%; }
}

/* Manos con micro-float después de entrar (no antes) */
body.hero-ready .hero .hero-hands-img{
  animation: heroHandsFloat 5.2s ease-in-out infinite;
  animation-delay: .95s;
}
@keyframes heroHandsFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-8px); }
  100%{ transform: translateY(0px); }
}

/* Botón “pop” leve al entrar */
body.hero-ready .hero .hero-btn{
  animation: heroBtnPop .9s var(--hero-ease) both;
  animation-delay: .58s;
}
@keyframes heroBtnPop{
  0%{ transform: translateY(34px) scale(.97); }
  65%{ transform: translateY(-1px) scale(1.01); }
  100%{ transform: translateY(0) scale(1); }
}

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  .hero .hero-hands,
  .hero .hero-line--main,
  .hero .hero-line--sub,
  .hero .hero-btn,
  .hero .hero-banner{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================
   MOMENTOS TUAUTOCON — CAROUSEL MEJORADO
   ✅ Mejor en escritorio
   ✅ Imagen central + previews laterales
   ✅ Móvil limpio y centrado
========================================= */

.moments{
  position: relative;
  padding: 95px 7% 110px;
  background: #f3f3f3;
  overflow: hidden;
  isolation: isolate;
}

/* depth suave */
.moments::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1000px 700px at 18% 30%, rgba(255,45,45,.06), transparent 60%),
    radial-gradient(900px 600px at 82% 70%, rgba(0,0,0,.05), transparent 62%);
  pointer-events:none;
  z-index:0;
}

.moments-wrap{
  position: relative;
  z-index: 2;
  width: min(1280px, 100%);
  margin: 0 auto;
}

/* =========================
   HEAD
========================= */
.moments-head{
  position: relative;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 46px;
  padding: 34px 30px 28px;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 24px 70px rgba(0,0,0,.08),
    0 2px 10px rgba(0,0,0,.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  isolation: isolate;
  overflow: hidden;
}

/* iluminación neutra */
.moments-head::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 50% 30%, rgba(0,0,0,.05), transparent 60%);
  z-index:-1;
  pointer-events:none;
}

.moments-tag{
  display:inline-block;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #ff2d2d;
  font-weight: 600;
  font-family: "Oswald", sans-serif;
}

/* wrap del título + líneas laterales */
.moments-title-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 24px;
  margin: 12px auto 0;
}

/* líneas laterales */
.moments-title-wrap::before,
.moments-title-wrap::after{
  content:"";
  display:block;
  height: 2px;
  width: 260px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,.45),
    transparent
  );
  filter: blur(.2px);
  opacity: 1;
}

/* título */
.moments-title{
  margin: 0;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
}

/* MOMENTOS */
.moments-title-line{
  display:block;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  letter-spacing: .18em;
  color: #000;
  text-shadow: none;
}

/* TUAUTOCON */
.moments-title-line.accent{
  margin-top: 6px;
  font-size: clamp(2.8rem, 5.4vw, 3.6rem);
  letter-spacing: .22em;
  color: #000;
  text-shadow: none;
}

.moments-sub{
  margin: 14px auto 0;
  font-size: 1.02rem;
  color: #444;
  line-height: 1.7;
  font-family: "Poppins", sans-serif;
  max-width: 780px;
}

/* =========================
   SLIDER
========================= */
.moments-slider{
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.05), transparent 45%),
    linear-gradient(135deg, #140101 0%, #050505 55%, #000 100%);
  box-shadow: 0 30px 75px rgba(0,0,0,.22);
  isolation: isolate;
}

/* overlay */
.moments-slider::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 90% at 18% 20%, rgba(255,45,45,.14), transparent 55%),
    radial-gradient(120% 90% at 82% 75%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62));
  z-index:0;
  pointer-events:none;
}

/* glow central suave */
.moments-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.06), transparent 32%);
  pointer-events:none;
  z-index:0;
}

/* viewport */
.moments-viewport{
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(500px, 58vh, 680px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 44px 90px 70px;
}

/* track */
.moments-track{
  position: relative;
  width: min(1240px, 100%);
  height: 100%;
  left: -55px;
}

/* =========================
   CARDS DESKTOP
========================= */
.moment-card{
  position: absolute;
  top: 50%;
   left: 47%; /* 🔥 aquí está la clave */
  width: 380px;
  height: 78%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  filter: blur(3px);
  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    opacity .55s ease,
    filter .55s ease;
  z-index: 1;
  pointer-events: none;
}

.moment-card.is-active{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  z-index: 3;
}

.moment-card.is-prev{
  opacity: .42;
  transform: translate(calc(-50% - 260px), -50%) scale(.88);
  filter: blur(1px);
  z-index: 2;
}

.moment-card.is-next{
  opacity: .42;
  transform: translate(calc(-50% + 260px), -50%) scale(.88);
  filter: blur(1px);
  z-index: 2;
}

.moment-card.is-hidden-left{
  opacity: 0;
  transform: translate(calc(-50% - 460px), -50%) scale(.76);
  z-index: 1;
}

.moment-card.is-hidden-right{
  opacity: 0;
  transform: translate(calc(-50% + 460px), -50%) scale(.76);
  z-index: 1;
}

/* imagen */
.moment-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* =========================
   NAV
========================= */
.moments-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    opacity .25s ease;
}

.moments-nav:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.25);
}

.moments-nav.prev{ left: 28px; }
.moments-nav.next{ right: 28px; }

/* =========================
   DOTS
========================= */
.moments-dots{
  position:absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  z-index: 4;
}

.moments-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.18);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.moments-dot.is-active{
  background: rgba(255,45,45,.85);
  border-color: rgba(255,45,45,.55);
  transform: scale(1.15);
}

/* =========================
   ENTRANCE
========================= */
.moments-tag,
.moments-title,
.moments-sub,
.moments-slider{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .85s cubic-bezier(.16,1,.3,1);
}

/* líneas laterales animadas */
.moments-title-wrap::before,
.moments-title-wrap::after{
  opacity: 0;
  transform: scaleX(0);
  transition:
    opacity .35s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1);
}

.moments-title-wrap::before{ transform-origin: right center; }
.moments-title-wrap::after{ transform-origin: left center; }

.moments.is-visible .moments-tag{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.moments.is-visible .moments-title{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .12s;
}

.moments.is-visible .moments-title-wrap::before,
.moments.is-visible .moments-title-wrap::after{
  opacity: 1;
  transform: scaleX(1);
  transition-delay: .42s;
}

.moments.is-visible .moments-sub{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .22s;
}

.moments.is-visible .moments-slider{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: .35s;
}

/* =========================
   LARGE DESKTOP
========================= */
@media (min-width: 1400px){
  .moments-track{
    left: -48px;
  }

  .moment-card{
    width: 410px;
  }

  .moment-card.is-prev{
    transform: translate(calc(-50% - 320px), -50%) scale(.9);
  }

  .moment-card.is-next{
    transform: translate(calc(-50% + 320px), -50%) scale(.9);
  }

  .moment-card.is-hidden-left{
    transform: translate(calc(-50% - 500px), -50%) scale(.76);
  }

  .moment-card.is-hidden-right{
    transform: translate(calc(-50% + 500px), -50%) scale(.76);
  }
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px){
  .moments-viewport{
    padding: 40px 38px 64px;
  }

  .moments-track{
    left: -18px;
  }

  .moment-card{
    width: 340px;
    height: 76%;
  }

  .moment-card.is-prev{
    transform: translate(calc(-50% - 220px), -50%) scale(.86);
  }

  .moment-card.is-next{
    transform: translate(calc(-50% + 220px), -50%) scale(.86);
  }

  .moment-card.is-hidden-left{
    transform: translate(calc(-50% - 340px), -50%) scale(.76);
  }

  .moment-card.is-hidden-right{
    transform: translate(calc(-50% + 340px), -50%) scale(.76);
  }

  .moments-title-wrap::before,
  .moments-title-wrap::after{
    width: 140px;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
  .moments{
    padding: 78px 6% 92px;
  }

  .moments-head{
    padding: 26px 18px 22px;
    border-radius: 20px;
    margin: 0 auto 34px;
  }

  .moments-title-wrap{
    gap: 14px;
  }

  .moments-title-wrap::before,
  .moments-title-wrap::after{
    width: 90px;
  }

  .moments-viewport{
    height: 560px;
    padding: 30px 14px 58px;
  }

  .moments-track{
    width: 100%;
    height: 100%;
    left: 0;
  }

  .moment-card,
  .moment-card.is-active,
  .moment-card.is-prev,
  .moment-card.is-next,
  .moment-card.is-hidden-left,
  .moment-card.is-hidden-right{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .moment-card{
    display:flex;
    align-items:center;
    justify-content:center;
    opacity: 0;
    filter: blur(2px);
  }

  .moment-card.is-active{
    opacity: 1;
    filter: blur(0);
    z-index: 3;
  }

  .moment-card.is-prev,
  .moment-card.is-next,
  .moment-card.is-hidden-left,
  .moment-card.is-hidden-right{
    opacity: 0;
    filter: blur(2px);
    z-index: 1;
  }

  .moment-card img{
    width: min(420px, 92%);
    height: 100%;
    border-radius: 22px;
  }

  .moments-nav{
    display:none;
  }
}
/* ===========================
   FOOTER SOCIAL — PREMIUM
=========================== */

.footer-social h4{
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.social-icons{
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.social-btn{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;

  color: #fff;
  font-size: 18px;
  text-decoration: none;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

/* Hover general */
.social-btn:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(255,45,45,.45);
}

/* Facebook */
.social-btn.fb:hover{
  background: #1877f2;
}

/* Instagram */
.social-btn.ig:hover{
  background:
    radial-gradient(circle at 30% 30%,
      #feda75,
      #fa7e1e,
      #d62976,
      #962fbf,
      #4f5bd5);
}

/* TikTok */
.social-btn.tt:hover{
  background: #000;
  box-shadow:
    0 0 0 1px #ff2d2d,
    0 12px 30px rgba(255,45,45,.5);
}

/* Nota */
.footer-note{
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

/* WhatsApp */
.social-btn.wa:hover{
  background: #25d366;
  box-shadow:
    0 12px 28px rgba(37,211,102,.55),
    0 0 0 1px rgba(37,211,102,.6);
}


/* =========================
   REGISTER SECTION — PREMIUM COMPACT (FULL WIDTH)
   TuAutoCon
========================= */
/* =========================
   REGISTER SECTION — FULL WIDTH REAL (FULL-BLEED)
   ✅ agrega “detalles” sin recargar: grid sutil + glow + chips + flecha
========================= */
.register-section{
  position: relative;

  /* ✅ rompe el contenedor y ocupa todo el viewport */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  padding: 48px 0;
  display: flex;
  justify-content: center;
  text-align: center;

  /* ✅ se mantiene oscuro (como tu versión anterior) pero con textura sutil */
  background:
    radial-gradient(120% 80% at 20% 35%, rgba(255,45,45,.14), transparent 60%),
    radial-gradient(120% 90% at 80% 70%, rgba(255,120,80,.08), transparent 62%),
    linear-gradient(180deg, #050505, #0a0a0a);
  overflow: hidden;
}

/* ✅ grid sutil tech (no “chillón”) */
.register-section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,45,45,.18), transparent 55%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 1px,
      transparent 1px,
      transparent 22px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 1px,
      transparent 1px,
      transparent 22px
    );
  mix-blend-mode: overlay;
}

/* contenedor glass centrado */
.register-inner{
  max-width: 760px;
  width: calc(100% - 32px);
  margin: 0 auto;
  padding: 28px 26px;
  border-radius: 22px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    0 20px 55px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(255,45,45,.10);

  position: relative;
  isolation: isolate;
  z-index: 1;
}

/* glow ambiental suave */
.register-inner::before{
  content:"";
  position:absolute;
  inset:-22%;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(255,45,45,.18),
    transparent 62%
  );
  z-index:-1;
  pointer-events:none;
}

/* ✅ highlight superior tipo “reflejo” */
.register-inner::after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  top: -18px;
  height: 48px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  opacity: .35;
  pointer-events:none;
}

/* =========================
   TAG
========================= */
.register-tag{
  display: inline-block;
  margin-bottom: 6px;

  font-family: "Oswald", sans-serif;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;

  color: #ff2d2d;
  text-shadow: 0 6px 16px rgba(0,0,0,.55);
}

/* =========================
   TÍTULO
========================= */
.register-title{
  font-family: "Oswald", sans-serif;
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: rgba(255,255,255,.95);
  margin: 0 0 12px;

  text-shadow:
    0 14px 34px rgba(0,0,0,.65),
    0 2px 12px rgba(0,0,0,.45);
}

.register-title span{ color:#ff2d2d; }

/* =========================
   TEXTO
========================= */
.register-text{
  font-family: "Poppins", sans-serif;
  font-size: .92rem;
  line-height: 1.6;

  color: rgba(255,255,255,.80);
  margin-bottom: 18px;
}

/* =========================
   BOTÓN PREMIUM TECH
========================= */
.register-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 13px 30px;
  border-radius: 14px;

  font-family: "Oswald", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;

  color: #ffffff;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,45,45,.55);

  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);

  overflow: hidden;
  isolation: isolate;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

/* flecha */
.register-btn .cta-arrow{
  display:inline-block;
  transform: translateY(1px);
  transition: transform .25s ease, opacity .25s ease;
  opacity: .95;
}

/* línea energética */
.register-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,45,45,.9),
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform .6s ease;
  z-index: 0;
}

/* glow exterior */
.register-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 16px;

  background: linear-gradient(
    135deg,
    rgba(255,45,45,.55),
    rgba(255,45,45,.15),
    transparent 70%
  );

  filter: blur(6px);
  opacity: .6;
  z-index: -1;
}

/* hover */
.register-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,45,45,.9);

  box-shadow:
    0 22px 55px rgba(0,0,0,.65),
    0 0 0 4px rgba(255,45,45,.18);
}
.register-btn:hover::before{ transform: translateX(120%); }
.register-btn:hover .cta-arrow{ transform: translate(3px, 1px); }

/* active */
.register-btn:active{
  transform: translateY(-1px) scale(.98);
  box-shadow: 0 14px 30px rgba(0,0,0,.55);
}

/* =========================
   ✅ CHIPS / BENEFICIOS
========================= */
.register-features{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.register-features span{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  font-family: "Poppins", sans-serif;
  font-size: .86rem;
  color: rgba(255,255,255,.88);

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px){
  .register-section{ padding: 40px 0; }
  .register-inner{ padding: 24px 18px; }
  .register-title{ font-size: 1.6rem; }
  .register-features span{ font-size: .84rem; }
}
/* =========================
   REGISTER — EXTRA DETAILS (premium)
========================= */

/* 1) borde neon doble (sutil) */
.register-inner{
  border: 1px solid rgba(255,255,255,.16);
}
.register-inner::before{
  /* mantenemos tu glow, pero un pelín más “pro” */
  background:
    radial-gradient(circle at 50% 40%, rgba(255,45,45,.20), transparent 62%);
}
.register-inner .register-stroke{
  position:absolute;
  inset: -1px;
  border-radius: 22px;
  pointer-events:none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(255,45,45,.16),
    inset 0 0 0 2px rgba(255,255,255,.05),
    0 0 0 1px rgba(255,45,45,.08);
  filter: drop-shadow(0 10px 26px rgba(255,45,45,.08));
}

/* 2) orbes decorativos */
.register-inner .register-orb{
  position:absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  pointer-events:none;
  z-index: 0;
  filter: blur(14px);
  opacity: .55;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,45,45,.55), rgba(255,45,45,0) 62%);
  mix-blend-mode: screen;
}
.register-inner .register-orb.orb-1{ left: -70px; top: -80px; }
.register-inner .register-orb.orb-2{
  right: -80px; bottom: -90px;
  opacity: .42;
  background:
    radial-gradient(circle at 45% 45%, rgba(255,120,80,.45), rgba(255,120,80,0) 64%);
}

/* 3) divider glow bajo el tag */
.register-tag{
  position: relative;
}
.register-tag::after{
  content:"";
  display:block;
  width: 120px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,45,45,.85), transparent);
  opacity: .65;
  filter: blur(.2px);
}

/* 4) chips más premium */
.register-features span{
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  background: rgba(255,255,255,.06);
}
.register-features span:hover{
  transform: translateY(-2px);
  border-color: rgba(255,45,45,.28);
  box-shadow:
    0 18px 32px rgba(0,0,0,.42),
    0 0 0 3px rgba(255,45,45,.10);
}

/* icon dentro del chip (si lo agregas en HTML) */
.register-features .chip-ico{
  width: 16px;
  height: 16px;
  display:inline-block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
  opacity: .95;
}

/* que el contenido esté arriba de los orbes */
.register-inner > *{
  position: relative;
  z-index: 3;
}

/* =========================
   CAREERS — PREMIUM (TuAutoCon)
========================= */
.careers-section{
  position: relative;
   width: min(1180px, 92%);
  padding: 92px 26px; 
  overflow: hidden;
  isolation: isolate;
  border-radius: 30px;
 margin: 0 auto;
  background:
    radial-gradient(1100px 700px at 18% 18%, rgba(255,45,45,.14), transparent 60%),
    radial-gradient(900px 650px at 82% 78%, rgba(255,255,255,.05), transparent 62%),
    linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
}

/* ✅ OVERRIDE FINAL — Careers NO full width */
.careers-section{
  width: min(1180px, 92%) !important;
  max-width: 1180px;
  margin: 60px auto !important;

  /* opcional: más “card” y menos pegado a los bordes */
  padding-left: 26px !important;
  padding-right: 26px !important;
}


.careers-section::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,45,45,.06), transparent 45%);
  opacity:.65;
  pointer-events:none;
  z-index:0;
}

.careers-wrap{
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 0 auto;
}

/* =========================
   HEADER
========================= */
.careers-head{
  text-align: center;
  max-width: 980px;
  margin: 0 auto 42px;
}

.careers-kicker{
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,45,45,.95);
  text-shadow: 0 10px 24px rgba(0,0,0,.55);
  margin-bottom: 10px;
}

.careers-title-row{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.careers-title{
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(2.0rem, 3.2vw, 3.0rem);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);

  text-shadow:
    0 16px 40px rgba(0,0,0,.70),
    0 2px 14px rgba(0,0,0,.45);
}

/* ✅ Líneas laterales (FULL + ANIMADAS) */
.careers-line{
  display:block;
  height: 2px;
  width: 120px;
  border-radius: 999px;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);

  /* estado inicial animado */
  transform: scaleX(0);
  opacity: 0;

  transition:
    transform .9s cubic-bezier(.16,1,.3,1),
    opacity .6s ease;

  will-change: transform, opacity;
}

.careers-line--l{ transform-origin: right center; }
.careers-line--r{ transform-origin: left center; }

/* cuando entra al viewport */
.careers-section.is-visible .careers-line{
  transform: scaleX(1);
  opacity: .9;
}

.careers-subtitle{
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
  font-size: 1.02rem;
  line-height: 1.85;
  color: rgba(255,255,255,.80);

  max-width: 920px;
  padding: 18px 18px;
  border-radius: 18px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
}

/* =========================
   GRID
========================= */
.careers-grid{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* card glass */
.careers-card{
  border-radius: 20px;
  padding: 22px 20px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);

  box-shadow:
    0 20px 55px rgba(0,0,0,.52),
    inset 0 0 0 1px rgba(255,45,45,.10);

  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.careers-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,45,45,.34);
  box-shadow:
    0 26px 70px rgba(0,0,0,.62),
    0 0 0 4px rgba(255,45,45,.12);
}

/* =========================
   Subtítulos (con subrayado premium más largo)
========================= */
.careers-card-title{
  margin: 0 0 12px;
  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);

  position: relative;
  padding-bottom: 10px;
}

.careers-card-title::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;

  width: 150px;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(255,45,45,1),
    rgba(255,45,45,.45),
    rgba(255,45,45,.15),
    transparent
  );

  box-shadow:
    0 10px 22px rgba(0,0,0,.45),
    0 0 12px rgba(255,45,45,.35);

  opacity: .95;
}

.careers-card-text{
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: .98rem;
  line-height: 1.75;
  color: rgba(255,255,255,.80);
}

/* listas */
.careers-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.careers-list li{
  position: relative;
  padding-left: 18px;

  font-family: "Poppins", sans-serif;
  font-size: .98rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}

.careers-list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,45,45,.95);
  box-shadow: 0 0 0 3px rgba(255,45,45,.12);
}

/* =========================
   CTA
========================= */
.careers-cta{
  margin-top: 26px;
  padding: 22px 20px;
  border-radius: 20px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}

.careers-cta-text{
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 760px;
}

/* botón premium */
.careers-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 🔥 más tamaño */
  padding: 16px 34px;

  border-radius: 16px;

  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;        /* antes .95rem */
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,45,45,.75);

  box-shadow:
    0 18px 40px rgba(0,0,0,.60),
    inset 0 0 0 1px rgba(255,255,255,.06);

  overflow: hidden;
  isolation: isolate;

  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.careers-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,45,45,.9), transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  z-index: 0;
}

.careers-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,45,45,.55), rgba(255,45,45,.15), transparent 70%);
  filter: blur(6px);
  opacity: .6;
  z-index: -1;
}

.careers-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,45,45,.92);
  box-shadow:
    0 22px 55px rgba(0,0,0,.65),
    0 0 0 4px rgba(255,45,45,.18);
}

.careers-btn:hover::before{
  transform: translateX(120%);
}

.careers-btn:active{
  transform: translateY(-1px) scale(.98);
}

/* =========================
   REVEAL ANIMATION (PROGRESIVA)
========================= */
/* =========================
   REVEAL ANIMATION (PROGRESIVA) — SLOW
========================= */
.careers-section .reveal{
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);

  transition:
    opacity 1.05s cubic-bezier(.16,1,.3,1),
    transform 1.25s cubic-bezier(.16,1,.3,1),
    filter 1.25s cubic-bezier(.16,1,.3,1);

  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

/* ✅ ESTADO VISIBLE (ESTO ES LO QUE FALTABA / SE PISÓ) */
.careers-section.is-visible .reveal{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .careers-grid{
    grid-template-columns: 1fr;
  }
  .careers-line{
    width: 70px;
  }
  .careers-cta{
    flex-direction: column;
    text-align: center;
  }
  .careers-cta-text{
    max-width: 100%;
  }
}

/* Ajuste subrayado mobile */
@media (max-width: 768px){
  .careers-card-title::after{
    width: 120px;
  }
}


/* =========================================
   CAREERS: usar el mismo sistema de About
   (título entra + líneas expanden)
========================================= */

/* cuando careers entra en pantalla */
.careers-section.is-visible .about-title{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* líneas expanden DESPUÉS del título */
.careers-section.is-visible .line{
  opacity: 1;
  transform: scaleX(1);
  transition-delay: .48s;
}

/* Opcional: ajusta tamaño del título SOLO en careers (si About te queda muy grande) */
.careers-title{
  font-size: clamp(2.0rem, 3.2vw, 3.0rem);
  letter-spacing: .10em;
}


/* =========================
   FIX — SERVICES TITLE REVEAL
   Garantiza que el título aparezca
========================= */

/* Estado visible forzado */
.services-section.is-visible .services-tagline,
.services-section.is-visible .services-title,
.services-section.is-visible .services-intro{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* =========================================
   ✅ MODAL — PRO FIX (Careers)
   - Más pro
   - Más compacto
   - Inputs premium (text/email/tel)
   - Botones SIEMPRE visibles (scroll interno)
   Pegar AL FINAL
========================================= */

/* =========================================
   ✅ CAREERS MODAL — PRO (SCOPE HARD FIX)
========================================= */
#careersModal.modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
}
#careersModal.modal.is-open{ display:block !important; }

#careersModal .modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

/* dialog centrado + altura controlada */
#careersModal .modal-dialog{
  position: relative !important;
  z-index: 2 !important;

  width: min(680px, calc(100% - 28px)) !important;
  margin: 4vh auto !important;

  border-radius: 22px;
  padding: 18px 18px 14px;

  background:
    radial-gradient(900px 520px at 18% 18%, rgba(255,45,45,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,.92), rgba(6,6,6,.92));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.70);
  color: rgba(255,255,255,.92);

  max-height: calc(100vh - 8vh) !important;
  overflow: hidden !important;
}

#careersModal .modal-title{
  margin: 4px 44px 6px 0;
  font-family: "Oswald", sans-serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.25rem;
}

#careersModal .modal-subtitle{
  margin: 0 0 12px;
  font-family: "Poppins", sans-serif;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  font-size: .95rem;
}

#careersModal .modal-close{
  position:absolute;
  top: 12px; right: 12px;
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

#careersModal .modal-form{
  display: grid;
  gap: 12px;

  /* ✅ scroll interno para que el botón SIEMPRE se vea */
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding-right: 6px;
}

#careersModal .modal-field label{
  display:block;
  font-family: "Poppins", sans-serif;
  font-size: .86rem;
  margin-bottom: 6px;
  color: rgba(255,255,255,.84);
}

#careersModal .modal-field input[type="text"],
#careersModal .modal-field input[type="email"],
#careersModal .modal-field input[type="tel"],
#careersModal .modal-field input[type="file"],
#careersModal .modal-field textarea{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,45,45,.08), 0 10px 30px rgba(0,0,0,.25);
}

#careersModal .modal-field input:focus,
#careersModal .modal-field textarea:focus{
  border-color: rgba(255,45,45,.70);
  box-shadow: 0 0 0 4px rgba(255,45,45,.12), 0 14px 40px rgba(0,0,0,.35);
}

#careersModal .modal-field textarea{ min-height: 110px; resize: vertical; }

#careersModal .modal-hint{
  display:block;
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-family: "Poppins", sans-serif;
  font-size: .82rem;
}

/* ✅ acciones pegadas abajo (siempre visibles) */
#careersModal .modal-actions{
  position: sticky;
  bottom: 0;
  z-index: 3;

  display:flex;
  gap: 10px;
  justify-content: flex-end;

  padding-top: 10px;
  margin-top: 10px;

  background: linear-gradient(180deg, transparent, rgba(6,6,6,.92) 40%, rgba(6,6,6,.98));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#careersModal .modal-btn{
  border-radius: 14px;
  padding: 11px 16px;
  font-family: "Oswald", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .84rem;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
}

#careersModal .modal-btn.primary{
  border-color: rgba(255,45,45,.78);
  background: linear-gradient(180deg, rgba(255,45,45,.22), rgba(0,0,0,.35));
}

body.modal-open{ overflow: hidden !important; }

@media (max-width: 520px){
  #careersModal .modal-actions{ flex-direction: column; }
  #careersModal .modal-btn{ width: 100%; }
}
/* ===============================
   🚫 NO HORIZONTAL SCROLL — MODAL
=============================== */
#careersModal,
#careersModal *{
  box-sizing: border-box;
}

#careersModal{
  overflow-x: hidden !important;
}

#careersModal .modal-dialog{
  overflow-x: hidden !important;
}

#careersModal .modal-form{
  overflow-x: hidden !important;
}

/* =========================
   ✅ WE ARE HIRING — PREMIUM DOMINANT
========================= */
.careers-hiring{
  margin-top: 22px;
  padding: 26px 26px;
  border-radius: 24px;

  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  min-height: 190px;

  background:
    radial-gradient(1000px 480px at 18% 30%, rgba(255,45,45,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));

  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 28px 70px rgba(0,0,0,.60),
    inset 0 0 0 1px rgba(255,45,45,.12);

  position: relative;
  overflow: hidden;
}

/* glow ambiental */
.careers-hiring::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 20% 45%, rgba(255,45,45,.22), transparent 45%),
    radial-gradient(circle at 85% 55%, rgba(255,255,255,.06), transparent 52%);
  opacity:.7;
  pointer-events:none;
}

/* =========================
   LEFT — ocupa left + center
========================= */
.hiring-left{
  position:relative;
  z-index:2;

  flex: 0 0 68%;
  max-width: 68%;
}

/* =========================
   BADGE — WE ARE HIRING
========================= */
.hiring-badge{
  display:inline-flex;
  align-items:center;

  font-family:"Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .20em;
  font-weight: 900;

  font-size: 1.45rem;
  padding: 12px 18px;

  color: rgba(255,45,45,.98);

  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,45,45,.65);

  text-shadow:
    0 0 14px rgba(255,45,45,.55),
    0 0 34px rgba(255,45,45,.25),
    0 18px 40px rgba(0,0,0,.55);

  animation: hiringGlow 2.2s ease-in-out infinite;
}

@keyframes hiringGlow{
  0%,100%{
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(255,45,45,0);
    transform: translateY(0);
  }
  50%{
    filter: brightness(1.12);
    box-shadow: 0 0 34px rgba(255,45,45,.22);
    transform: translateY(-2px);
  }
}

/* =========================
   TITLE
========================= */
.hiring-title{
  margin: 16px 0 10px;

  font-family:"Oswald", sans-serif;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,.96);

  text-shadow:
    0 18px 40px rgba(0,0,0,.70),
    0 0 18px rgba(255,45,45,.12);
}

/* =========================
   SUBTEXT
========================= */
.hiring-sub{
  margin: 0;

  font-family:"Poppins", sans-serif;
  font-size: 1.15rem;
  line-height: 1.7;

  color: rgba(255,255,255,.82);
  max-width: 760px;
}

/* =========================
   RIGHT — IMAGEN
========================= */
.hiring-right{
  position:relative;
  z-index:2;

  flex: 0 0 32%;
  max-width: 32%;
  min-width: 240px;

  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.hiring-img{
  margin-right: 80px;
  width: 100%;
  max-width: 360px;
  height: auto;
  display:block;

  opacity: .95;

  filter:
    drop-shadow(0 22px 48px rgba(0,0,0,.70))
    drop-shadow(0 0 22px rgba(255,45,45,.14));

  animation: floatHire 4.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes floatHire{
  0%,100%{ transform: translateY(0) translateX(0) rotate(-.4deg); }
  50%{ transform: translateY(-12px) translateX(8px) rotate(.6deg); }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){

  .careers-hiring{
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .hiring-left,
  .hiring-right{
    flex: 1 1 auto;
    max-width: 100%;
  }

  .hiring-badge{
    font-size: 1.15rem;
  }

  .hiring-title{
    font-size: 1.55rem;
  }

  .hiring-sub{
    font-size: 1rem;
  }

  .hiring-img{
    max-width: 380px;
  }
}

/* ✅ mover el contenido de texto hacia la derecha */
.hiring-left{
  padding-left: 130px;
}

/* =========================
   PRELOADER — FULL PREMIUM
   Spin grande + logo centro
========================= */

/* =========================
   LOADER — PREMIUM FINAL (WAVE TEXT)
========================= */
#page-loader{
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(255,45,45,.18), transparent 60%),
    linear-gradient(135deg, #050505, #0b0b0b 55%, #050505);
}

/* CONTENEDOR CENTRAL */
.loader-center{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================
   SPINNER
========================= */
.loader-spinner{
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.loader-spinner::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 50%;

  border: 5px solid rgba(255,255,255,.08);
  border-top-color: #ff2d2d;

  animation: spin 1.15s linear infinite;
  box-shadow:
    0 0 45px rgba(255,45,45,.55),
    inset 0 0 18px rgba(255,45,45,.30);
}

.loader-spinner img{
  width: 92px;
  z-index: 2;
  filter:
    drop-shadow(0 0 14px rgba(255,45,45,.55))
    drop-shadow(0 0 34px rgba(255,45,45,.22));
}

/* =========================
   LOADING — WAVE LETTER ANIMATION
========================= */
.loader-text{
  display: flex;
  gap: .18em;
  font-family: "Oswald", sans-serif;
  font-size: 1.25rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

.loader-text span{
  display: inline-block;
  animation: waveLift 1.35s ease-in-out infinite;
  text-shadow:
    0 10px 30px rgba(0,0,0,.55),
    0 0 24px rgba(255,45,45,.22);
}

/* 🔥 delays progresivos (ola) */
.loader-text span:nth-child(1){ animation-delay: 0s; }
.loader-text span:nth-child(2){ animation-delay: .08s; }
.loader-text span:nth-child(3){ animation-delay: .16s; }
.loader-text span:nth-child(4){ animation-delay: .24s; }
.loader-text span:nth-child(5){ animation-delay: .32s; }
.loader-text span:nth-child(6){ animation-delay: .40s; }
.loader-text span:nth-child(7){ animation-delay: .48s; }

/* =========================
   ANIMACIONES
========================= */
@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* 🔥 efecto ola: sube / baja / fade */
@keyframes waveLift{
  0%{
    transform: translateY(0);
    opacity: .45;
  }
  30%{
    transform: translateY(-10px);
    opacity: 1;
  }
  60%{
    transform: translateY(0);
    opacity: .7;
  }
  100%{
    transform: translateY(0);
    opacity: .45;
  }
}

/* =========================
   MOBILE TWEAKS
========================= */
@media (max-width: 768px){

  .loader-spinner{
    width: 170px;
    height: 170px;
  }

  .loader-spinner img{
    width: 72px;
  }

  .loader-text{
    font-size: 1.05rem;
    letter-spacing: .32em;
  }

  .loader-text span{
    animation-duration: 1.25s;
  }
}


/* =========================
/* ✅ Toast / mensaje enviado */
/* =========================
   CONTACT TOAST — CENTERED
========================= */
/* =========================
   CONTACT TOAST — CENTERED (FIXED VISIBILITY)
========================= */
.contact-toast{
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.45); /* overlay más claro */
  backdrop-filter: blur(6px);
}

.contact-toast[hidden]{
  display: none;
}

/* CARD */
.contact-toast .toast-card{
  position: relative;
  width: min(440px, 92vw);
  padding: 28px 26px 26px;

  border-radius: 22px;
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(255,45,45,.22), transparent 60%),
    rgba(28,28,28,.96);

  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 30px 90px rgba(0,0,0,.75);

  text-align: center;
  color: #ffffff;
}

/* ICON */
.toast-ico{
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;

  border-radius: 18px;
  display: grid;
  place-items: center;

  font-size: 26px;
  font-weight: 900;

  background: linear-gradient(135deg, #ff2d2d, #a51212);
  box-shadow: 0 10px 28px rgba(255,45,45,.55);
}

/* TEXT */
.toast-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .6px;
  margin-bottom: 6px;
}

.toast-desc{
  font-size: 15px;
  line-height: 1.45;
  opacity: .95;
}

/* CLOSE */
.toast-close{
  position: absolute;
  top: 14px;
  right: 14px;

  width: 38px;
  height: 38px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff;

  font-size: 18px;
  cursor: pointer;
}

.toast-close:hover{
  background: rgba(255,255,255,.22);
}

/* ANIMATION */
.contact-toast .toast-card{
  animation: toastIn .45s cubic-bezier(.16,1,.3,1);
}

@keyframes toastIn{
  from{
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }
  to{
    opacity: 1;
    transform: none;
  }
}


html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.hero,
.about-section,
.services-section,
.footer{
  max-width: 100%;
  overflow-x: hidden;
}

.hero::before,
.hero-hands::before,
.about-section::before,
.about-director::before{
  max-width: 100vw;
  overflow: hidden;
}