@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: #0B0B0C;
  color: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header / Topbar */
header.top {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  background: rgba(11, 11, 12, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.brand img {
  height: 100px;
  width: auto;
}

.menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.menu a:hover {
  color: #22D3EE;
}

.btn.whatsapp {
  background-color: #22D3EE;
  color: #0B0B0C;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn.whatsapp:hover {
  background-color: #1bbdd4;
  transform: translateY(-2px);
}

/* Hero */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, #0B0B0C 0%, #0D1116 100%);
  overflow: hidden;
}

.hero .content {
  z-index: 2;
  position: relative;
}

.hero h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.8);
}

.btn {
  background-color: #22D3EE;
  color: #0B0B0C;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: #1bbdd4;
  transform: translateY(-2px);
}

.btn.ghost {
  background-color: transparent;
  color: #22D3EE;
  border: 2px solid #22D3EE;
}

.btn.ghost:hover {
  background-color: #22D3EE;
  color: #0B0B0C;
}

/* Section */
.section {
  padding: 80px 0;
}

.section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}

.grid {
  display: grid;
  gap: 30px;
}

.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.reason__icon {
  margin-bottom: 10px;
}

.reason h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.reason p {
  color: rgba(255, 255, 255, 0.8);
}

/* FAQ */
details.card {
  cursor: pointer;
}

details.card summary {
  font-weight: 600;
  color: #22D3EE;
}

details.card p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
}

/* Contacto */
form.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
}

form label {
  display: block;
  font-weight: 500;
}

.input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

button.btn {
  margin-top: 10px;
}

/* Footer */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px 0;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Animaciones reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    height: auto;
    padding: 10px 0;
  }

  .menu {
    flex-direction: column;
    gap: 10px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .grid.cols-3 {
    grid-template-columns: 1fr;
  }
}
/* === TOPBAR COMPACTA + FIJA + MENÚ MINIMALISTA === */

/* Fuente minimalista solo para el menú (Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');

:root{
  --topbar-h: 56px;         /* altura compacta de la barra */
}

/* Barra fija arriba, sin “bailes” */
header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  z-index: 1000 !important;
}

/* El contenedor ocupa toda la barra */
header.top .nav{
  height: 100% !important;
  display: flex; align-items: center; justify-content: space-between;
}

/* Compensa el contenido para que no quede tapado */
body{ padding-top: var(--topbar-h) !important; }

/* Logo más pequeño (aunque el <img> tenga estilos inline) */
.brand img{
  height: 24px !important;      /* ajusta a 22–26px si quieres */
  width: auto !important;
  display: block; object-fit: contain;
}

/* Menú más compacto y con Inter */
.menu{ display:flex; align-items:center; gap:14px; }
.menu a{
  display:inline-flex; align-items:center; justify-content:center;
  height: 32px;                   /* compacto y cómodo de clicar */
  padding: 0 10px;
  font: 500 14px/1 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .1px;
  border-radius: 8px;
  transition: color .15s ease, transform .15s ease;
}
.menu a:hover{ transform: translateY(-1px); }

/* WhatsApp acompasado en tamaño */
.menu .btn.whatsapp{
  height: 34px; padding: 0 12px;
  font: 600 14px/1 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  border-radius: 9px;
}

/* Si alguna animación global tocara el body (raro), blindaje suave */
html, body{ transform:none !important; filter:none !important; }
/* === Logo topbar un toque más grande === */
:root{ --topbar-h: 58px; }               /* +2px para que respire */
header.top{ height: var(--topbar-h) !important; }
header.top .nav{ height: 100% !important; }

.brand img{
  height: 90px !important;               /* antes ~24px */
  width:auto !important; display:block; object-fit:contain;
}

/* Ajuste fino del menú para que quede nivelado */
.menu a{ height: 34px; }
.menu .btn.whatsapp{ height: 36px; }
/* --- WhatsApp minimalista --- */
.btn.whatsapp{
  background: transparent !important;
  color: #cfe8f0 !important;            /* texto suave, legible en dark */
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 14px;
  height: 34px;                          /* respira y es clicable */
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.btn.whatsapp:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.btn.whatsapp:focus-visible{
  outline: 2px solid #22D3EE;            /* foco accesible */
  outline-offset: 2px;
  border-color: #22D3EE;
}
/* === Bajar el logo al máximo dentro de la topbar === */
:root{ --topbar-h: 58px; --logo-gutter: 2px; } /* gutter = margen inferior de seguridad */

header.top{ height: var(--topbar-h) !important; }
header.top .nav{ height: 100% !important; }

/* El contenedor del logo ocupa toda la barra y alinea abajo */
.brand{
  display:flex; align-items:flex-end;       /* clave */
  height:100%;                              /* ocupa toda la altura */
  padding-bottom: var(--logo-gutter);       /* opcional: 0–2px */
}

/* El logo se ajusta y “toca” la base */
.brand img{
  height: 40px !important;                  /* tu tamaño actual (ajústalo si quieres) */
  width:auto !important; display:block; object-fit:contain;
}

/* Mantén el menú alineado (no baja del todo para no perder clic comodidad) */
.menu{ display:flex; align-items:flex-end; gap:14px; }
.menu a{ height:34px; padding:0 10px; }
.menu .btn.whatsapp{ height:36px; padding:0 12px; }
/* === Topbar: logo alineado con las opciones === */
:root{ --topbar-h: 78px; }                    /* altura de la barra */
header.top{ height: var(--topbar-h) !important; }

header.top .nav{
  height: 100% !important;
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo centrado verticalmente y del tamaño del menú */
.brand{
  display:flex; align-items:center; height:100%;
}
.brand img{
  height: 28px !important;                    /* súbelo a 30px si quieres algo más de presencia */
  width:auto !important; display:block; object-fit:contain;
}

/* Menú con misma caja de altura que el logo */
.menu{ display:flex; align-items:center; gap:14px; }
.menu a{
  display:inline-flex; align-items:center; justify-content:center;
  height: 34px;                               /* caja visual similar al logo de 28px */
  padding: 0 10px; line-height:1;
}
.menu .btn.whatsapp{
  height: 36px; padding: 0 12px; line-height:1;
}
/* === Topbar — hairline con glow minimal tipo Apple === */
:root{
  --hairline: rgba(255,255,255,.06); /* línea base sutil */
  --glow: rgba(41,151,255,.28);      /* azul Apple suave (#2997FF) */
}

header.top{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  /* mantiene tu color de fondo actual */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
header.top::before,
header.top::after{
  content:""; position:absolute; left:0; right:0; pointer-events:none;
}

/* Hairline real (1px) */
header.top::before{
  bottom:0; height:1px;
  background: var(--hairline);
}

/* Glow estético y minimal (degradado al centro + blur) */
header.top::after{
  bottom:-10px; height:18px;        /* se desplaza debajo para que sea difuso */
  background:
    radial-gradient(60% 100% at 50% 0%,
      var(--glow) 0%,
      rgba(41,151,255,0.12) 40%,
      rgba(41,151,255,0.00) 100%);
  filter: blur(8px);
}

/* Opción: versión más discreta en pantallas pequeñas */
@media (max-width: 640px){
  header.top::after{ height:14px; filter: blur(7px); }
}

/* Si prefieres un glow blanco (aún más minimal), descomenta: */
/*
:root{ --glow: rgba(255,255,255,.22); }
*/
/* === Topbar: color de fondo según la muestra === */
:root{
  --topbar-bg: #0F1113; /* si lo ves un pelín distinto, prueba #0E1012 o #101214 */
}

header.top{
  background: var(--topbar-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Si tenías una “línea” o glow debajo, lo apagamos: */
header.top::before,
header.top::after{
  content: none !important;
}
header.top{
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.02),       /* brillo leve arriba */
      var(--topbar-bg) 18%,
      var(--topbar-bg) 82%,
      rgba(0,0,0,.06)              /* caída muy leve abajo */
    ) !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* === Hero con vídeo de fondo === */
.hero{
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: #0B0B0C;
}

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

.hero-video{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1) saturate(1.1);
}

/* Capa de oscurecimiento o glow encima del vídeo */
.hero .overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.308), rgba(0,0,0,.6));
  z-index: 1;
}

.hero .content{
  position: relative;
  z-index: 2;
  color: #fff;
}


/* El nav ocupa toda la altura y queda centrado */
header.top .nav{ height:100% !important; display:flex; align-items:center; justify-content:space-between; }

/* Compensa el contenido para que no quede debajo de la barra fija */
body{ padding-top: var(--topbar-h) !important; }
/* === Topbar transparente (si no lo tienes ya) === */
:root{ --topbar-h: 56px; }
header.top{
  position: fixed !important;
  top:0; left:0; right:0; height:var(--topbar-h) !important; z-index:1000;
  background: transparent !important; border:0 !important; box-shadow:none !important;
}
/* === Topbar con color del ejemplo (#0A0A0A) === */
:root{
  --topbar-bg: #000000; /* negro antracita de tu muestra */
}

/* Negro puro con sutil glass */
header.top{
  background: rgba(5,5,5,0.85) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
/* === Hero — black bottom cap + animación minimal === */
:root{
  --black-pure: #050505;            /* negro puro que estás usando en la topbar */
  --apple-glow: rgba(41,151,255,.18); /* azul Apple muy sutil para el halo */
}

/* El hero deja ver el video; rematamos con un cap negro abajo */
.hero{
  position: relative;
  background: transparent;
}

/* Capa inferior: funde hacia negro puro */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 24vh;                         /* altura del “cap” (ajusta 18–30vh) */
  pointer-events:none; z-index: 1;
  background:
    /* halo azul MUY sutil que “respira” */
    radial-gradient(160% 60% at 50% 100%, var(--apple-glow) 0%, transparent 60%),
    /* degradado hacia negro puro */
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.35) 35%,
      rgba(0,0,0,.65) 55%,
      var(--black-pure) 78%,
      var(--black-pure) 100%
    );
  animation: heroBreathe 6.5s ease-in-out infinite;
  will-change: transform, opacity, filter;
  filter: saturate(110%) contrast(105%);
}

/* Hairline blanco muy, MUY sutil justo donde empieza el cap (opcional) */
.hero::before{
  content:"";
  position:absolute; left:0; right:0; bottom: calc(24vh - 1px);
  height:1px; pointer-events:none; z-index: 2;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.06), transparent);
  opacity:.7;
}

/* Animación “respirar” minimal (sube/baja 1px y modula el halo) */
@keyframes heroBreathe{
  0%, 100% { transform: translateY(0); opacity: .98; }
  50%      { transform: translateY(1px); opacity: 1; }
}

/* Respeto a accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .hero::after{ animation: none; }
}
.bg-vid{
  object-fit: cover;           /* o contain si no quieres recorte */
  filter: none;                /* evita brightness/blur aquí */
  will-change: transform;      /* pista al navegador */
}

.hero .overlay{
  /* mueve el “oscurecido” al overlay, que es muy barato */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.103), rgba(0,0,0,.6));
}
/* === Features minimal bajo el hero === */
:root{
  --pure-black:#050505;
  --card-bg: rgba(255,255,255,.02);
  --card-stroke: rgba(255,255,255,.06);
  --card-glow: rgba(41,151,255,.12);    /* azul Apple sutil */
  --title-strong:#fff;
  --muted: rgba(255,255,255,.7);
  --accent:#22D3EE;
}

.features{ padding: 56px 0 64px; background: var(--pure-black); }
.features__title{
  margin: 0 0 18px;
  font-size: clamp(26px, 3.2vw, 36px);
  color: var(--title-strong);
  letter-spacing:-.2px;
}
.features__title .accent{ color: var(--accent); }

/* grid fluido, sin saturar */
.features__grid{
  --cols: 4;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
}
@media (max-width: 1100px){ .features__grid{ --cols: 3; } }
@media (max-width: 820px){ .features__grid{ --cols: 2; } }
@media (max-width: 560px){ .features__grid{ --cols: 1; } }

/* card limpia con hairline + glow muy discreto */
.fcard{
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  border-radius: 16px;
  padding: 18px 18px 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.fcard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 10px 28px -6px var(--card-glow);
}

/* iconito en píldora con gradiente suave */
.fcard__icon{
  width: 36px; height: 36px;
  display:grid; place-items:center;
  border-radius: 10px;
  margin-bottom: 10px;
  color: #79D0FF; /* tono cian suave */
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(34,211,238,.18), rgba(34,211,238,.08) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}
.fcard__icon svg{ width:18px; height:18px; }

.fcard h3{
  margin: 0 0 6px;
  color: var(--title-strong);
  font-size: 18px; font-weight: 700; letter-spacing:.1px;
}
.fcard p{
  margin: 0; color: var(--muted);
  font-size: 15px; line-height: 1.5;
}

/* línea superior sutil que anima al cargar (opcional) */
.fcard::before{
  content:""; position:absolute; left:12px; right:12px; top:0;
  height:1px; background: linear-gradient(90deg, transparent, rgba(41,151,255,.25), transparent);
  opacity:.0; transform: translateY(-6px);
  transition: opacity .6s ease, transform .6s ease;
}
.fcard:hover::before{ opacity:.8; transform: translateY(0); }

/* accesibilidad: reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .fcard, .fcard::before{ transition: none; }
}
/* Sustituye backdrop-filter por fondo semitransparente */
header.top{
  background: rgba(5, 5, 5, 0.671) !important;
  /* elimina estas líneas caras: */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* FIX — Título RAYØ Express a la izquierda + estética tipo Apple */
.features .features__title,
.section .features__title{            /* sube especificidad sobre .section h2 */
  text-align: left !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "SF Pro Text", system-ui, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -.2px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin-left: 0;
}

/* Color del remate en juego con el índice */
.features__title .accent{
  color: var(--accent);  /* en tu tema es #22D3EE */
}
/* ——— Corte minimal del hero tipo Apple ——— */

/* 1) Asegura que el hero NO tenga su propio fondo sólido */
.hero{
  background: transparent !important; /* pisa el gradiente anterior */
  margin-bottom: -1px;                 /* solapa 1px para evitar la costura */
}

/* 2) Fade inferior que funde el vídeo hacia el negro de la sección siguiente */
:root{ --pure-black: #050505; }        /* mismo negro que usas debajo */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 18vh;                         /* puedes ajustar entre 12–22vh */
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.65) 65%,
    var(--pure-black) 100%
  );
  z-index: 1;
}

/* 3) Si ves un hairline, elimínalo del todo */
.hero::before{ content:none !important; }

/* 4) El primer bloque tras el hero debe usar el mismo fondo y sin margen arriba */
.features{
  background: var(--pure-black) !important;
  margin-top: 0 !important;
}
/* ——— Topbar con equilibrio tipo Apple ——— */
header.top .container.nav{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: clamp(16px, 4vw, 48px);  /* padding adaptable según ancho */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo a la izquierda */
header.top .brand{
  margin: 0;
  display: block;
}

/* Menú a la derecha */
header.top .menu{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;                  /* separación entre opciones */
  text-align: right;
}

/* En pantallas grandes, que mantenga ese aire elegante */
@media (min-width: 1280px){
  header.top .container.nav{
    padding-inline: 64px;
  }
}
/* ——— Topbar con logo centrado y más abajo ——— */
header.top .container.nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* [vacío] [logo] [menú] */
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: clamp(16px, 4vw, 48px);
  /* más alto para que el logo quede visualmente más abajo */
  padding-top: clamp(18px, 5vw, 44px);
  padding-bottom: clamp(10px, 3vw, 28px);
}


/* Menú a la derecha */
header.top .menu{
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: right;
}

/* Por si alguna regla anterior lo centraba, forzamos que el h1/imagen del logo no reciba text-align */
header.top .brand, 
header.top .brand *{
  text-align: center !important;
}
/* ——— Topbar: logo muy a la izquierda, menú a la derecha ——— */
header.top .container.nav{
  display: grid;
  grid-template-columns: auto 1fr auto;   /* [logo] [espaciador] [menú] */
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(8px, 2vw, 24px);    /* poco padding a la izquierda */
  padding-right: clamp(16px, 4vw, 48px);  /* aire a la derecha */
  padding-top: clamp(18px, 5vw, 44px);
  padding-bottom: clamp(10px, 3vw, 28px);
}

header.top .brand{
  grid-column: 1;               /* envía el logo a la primera columna */
  justify-self: start;          /* pegado hacia la izquierda */
  margin: 0;
  position: relative;
  top: 6px;                     /* lo bajas un poco */
  /* si lo quieres aún más al borde, descomenta la siguiente línea: */
  /* transform: translateX(-6px); */
}

header.top .menu{
  grid-column: 3;               /* menú al extremo derecho */
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: right;
}
/* ——— Ajuste de altura del logo ——— */
header.top .brand{
  grid-column: 1;
  justify-self: start;
  margin: 0;
  position: relative;
  top: -14px;     /* súbelo; antes estaba en +6px, ahora va un pelín más alto */
  /* si lo quieres todavía más arriba, prueba con -6px o -8px */
  /* opcional: lo dejamos visualmente pegado al borde izquierdo */
  transform: translateX(-6px);
}
.hero{
  height: 100svh;                     /* igual que antes, pero seguro en móvil */
  padding-bottom: clamp(48px, 6vh, 120px);
}
/* Features full-bleed (ocupa todo el ancho) */
.features > .container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: clamp(16px, 4vw, 72px); /* un poco de aire lateral elegante */
}

/* Que el grid se estire bien en pantallas grandes */
.features__grid{
  gap: clamp(16px, 2vw, 28px);
}

/* 5 columnas en ultra-wide si hay espacio */
@media (min-width: 1440px){
  .features__grid{ --cols: 5; } /* venías con 4 columnas por defecto */
}
@media (min-width: 1440px){
  .features__grid{ --cols: 5; }
}
/* Features a todo lo ancho (sin el límite de 1200px del .container) */
.features > .container{
  width: 100%;
  max-width: none;                 /* quita el tope de 1200px */
  margin: 0;
  padding-inline: clamp(16px, 4vw, 64px);
}

/* 5 columnas cuando haya ancho suficiente */
@media (min-width: 1200px){
  .features__grid{ --cols: 5; }    /* tu grid usa repeat(var(--cols), 1fr) */
}
@media (min-width: 1200px){
  .features__grid{ gap: 20px; }
}
/* ——— Topbar 100% transparente sobre el hero ——— */
header.top{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* elimina cualquier línea/glow que se hubiera añadido */
header.top::before,
header.top::after{
  content: none !important;
}
/* ——— Topbar negro puro ——— */
:root{ --topbar-h: 58px; }

header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;          /* negro puro */
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* apaga cualquier línea/glow que añadían otras reglas */
header.top::before,
header.top::after{
  content: none !important;
}

/* asegura que no haya “costura” arriba en móviles con notch */
html, body{ background:#000; }
header.top{ padding-top: env(safe-area-inset-top, 0); }
/* ——— Barra superior fija y negra ——— */
:root{ --topbar-h: 58px; }              /* ajusta la altura si tu header es otro alto */

header.top{
  position: fixed !important;           /* fija la barra */
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;          /* negra sólida */
  z-index: 9999 !important;             /* por encima de todo */
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* quita líneas/glow heredados */
/* evita que el contenido se esconda detrás del header */
html, body{ background:#000; }
body{
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0)) !important;
}
header.top{ padding-top: env(safe-area-inset-top, 0); }
/* ——— Sección COMPRAR minimal ——— */
:root{
  --buy-ink: #fff;
  --buy-muted: rgba(255,255,255,.72);
  --buy-stroke: rgba(255,255,255,.06);
  --buy-bg: rgba(255,255,255,.02);
  --buy-cyan: #79D0FF;              /* azul claro del botón */
}

.comprar{
  padding: clamp(56px, 10vh, 96px) 0;
  background: #050505;              /* mismo negro que features */
  scroll-margin-top: calc(var(--topbar-h, 56px) + 12px);
}

.buy-card{
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  color: var(--buy-ink);
  background: var(--buy-bg);
  border: 1px solid var(--buy-stroke);
  border-radius: 20px;
  padding: clamp(28px, 6vw, 56px);
}

.buy-title{
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -.2px;
  margin: 0 0 6px;
}

.buy-sub{
  margin: 0 0 20px;
  color: var(--buy-muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

.buy-price{
  display: grid; gap: 6px;
  justify-items: center;
  margin: 16px 0 18px;
}
.buy-price .amount{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
}
.buy-price .note{
  color: var(--buy-muted);
  font-size: 14px;
}

.buy-list{
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 18px 0 22px; padding: 0;
  color: var(--buy-muted);
  font-size: 15px;
}
.buy-list li::before{
  content: "• ";
  color: rgba(255,255,255,.45);
}

/* Botón azul claro “Comprar” (sobre tu .btn base) */
.buy-btn{
  display: inline-block;
  background: var(--buy-cyan) !important;
  color: #0B0B0C !important;
  border-radius: 12px;
  padding: 14px 28px;
  font-weight: 700;
  box-shadow: 0 8px 24px -8px rgba(121,208,255,.35);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.buy-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(121,208,255,.45);
}

.buy-mini{
  margin-top: 14px;
  color: var(--buy-muted);
  font-size: 13px;
}

/* En móviles, un poco más de aire vertical */
@media (max-width: 560px){
  .buy-card{ padding: 28px 18px; }
}
/* ——— Sube el menú unos px ——— */
:root{ --menu-y: -6px; } /* ajusta -4, -8, -10 según veas */

header.top nav,
header.top .menu,
header.top .navbar,
header.top .nav {         /* cubro nombres típicos */
  transform: translateY(var(--menu-y));
}

/* Centrado vertical sólido por si tu header es alto */
header.top .container,
header.top .wrap,
header.top nav {
  display: flex;
  align-items: center;
  height: 100%;
}
:root{ --topbar-h: 54px; }  /* antes 58px, prueba 54 o 52 */

header.top{ height: var(--topbar-h) !important; }
body{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0)) !important; }
/* === FIX: topbar compacta y menú arriba === */
:root{ --topbar-h: 56px; }

header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;
  z-index: 9999 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Contenedor sin paddings extra ni grid raros */
header.top .container.nav{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  padding: 0 clamp(16px,4vw,48px) !important;
}

/* Mata offsets anteriores del logo */
header.top .brand{
  position: static !important;
  margin: 0 !important;
}

/* OVERRIDE al inline del <img> (height:100px) */
header.top .brand img{
  height: 28px !important;   /* prueba 30–32 si quieres más presencia */
  width: auto !important;
  display: block;
  object-fit: contain;
}

/* Menú centrado verticalmente y apretado */
header.top .menu{
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Compensación para que el contenido no quede debajo */
body{ padding-top: var(--topbar-h) !important; }
/* ——— Barra negra fija ——— */
:root{ --topbar-h: 60px; }

header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;
  z-index: 10000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Contenedor del header con el menú *dentro* y centrado verticalmente */
header.top .container,
header.top .wrap{
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 clamp(16px,4vw,48px) !important;
}

/* Logo compacto */
header.top .brand img{
  height: 30px !important;
  width: auto !important;
  display: block;
}

/* Menú alineado dentro de la barra */
header.top nav,
header.top .menu,
header.top .navbar,
header.top .nav{
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px;
  margin: 0 !important;
}

/* Evita que el contenido quede oculto detrás del header */
body{ padding-top: var(--topbar-h) !important; }
/* —— Unifica el color entre el hero y Servicios —— */
:root{
  /* Ajusta este valor si quieres otro matiz; es el tono del hero al final */
  --section-bg: #000000;
}

/* el fade del hero termina en el mismo color */
.hero{ margin-bottom:-1px; } /* evita micro-línea por subpíxel */
.hero::after{
  background: linear-gradient(
    to bottom,
    rgb(0, 0, 0) 0%,
    rgb(0, 0, 0) 40%,
    rgb(0, 0, 0) 65%,
    var(--section-bg) 100%
  ) !important;
}

/* Servicios con el mismo fondo que el final del hero */
.features{
  background: var(--section-bg) !important;
  margin-top: 0 !important;       /* que no abra hueco */
  padding-top: clamp(24px, 5vh, 48px);
}

/* (opcional) si tienes un separador/linea en la parte superior de .features, apágalo */
.features::before{ content:none !important; }
/* —— Unifica el color entre el hero y Servicios —— */
:root{
  /* Ajusta este valor si quieres otro matiz; es el tono del hero al final */
  --section-bg: #0B0B0C;
}

/* ====== BARRA FIJA NEGRA + MENÚ DENTRO ====== */
:root{ --topbar-h: 60px; } /* ajusta 56–64 si quieres */

header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;
  z-index: 10000 !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* ====== RESET TOPBAR — todo dentro de la franja negra ====== */
:root{ --topbar-h: 60px; }

/* Barra fija negra */
header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;
  z-index: 10000 !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* El contenedor NO aporta altura ni padding; sirve solo de marco */
header.top .container.nav{
  position: relative !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;   /* anulamos grids/flex heredados */
}

/* Logo SIEMPRE dentro, alineado al centro vertical */
header.top .brand{
  position: absolute !important;
  top: 0; left: clamp(12px,4vw,48px);
  height: var(--topbar-h) !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  transform: none !important;
}

/* Mata el inline style="height:100px" del <img> del logo */
header.top .brand img,
header.top img[alt="RAYØ Express"]{
  height: 30px !important;   /* sube a 32 si quieres más presencia */
  width: auto !important;
  display: block;
  object-fit: contain;
}

/* Menú a la derecha, dentro y centrado vertical */
header.top nav.menu{
  position: absolute !important;
  top: 0; right: clamp(12px,4vw,48px);
  height: var(--topbar-h) !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Links compactos, sin añadir altura extra */
header.top .menu a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 10px !important;
  line-height: 1 !important;
}

/* Botón WhatsApp a juego */
header.top .menu .btn.whatsapp{
  height: 36px !important;
  padding: 0 12px !important;
}

/* Deja hueco al contenido para la barra fija */
body{ padding-top: var(--topbar-h) !important; }
/* 1) Un solo color maestro para el fondo que continúa tras el hero */
:root{ --section-bg: #0A0A0B; }      /* ajusta si quieres otro tono, pero usa uno único */

/* 2) Hero: evita hairline y asegura que el fade termine EXACTO en el color maestro */
.hero{
  position: relative;
  margin-bottom: -2px;               /* solapa 1–2px para matar la costura */
  overflow: hidden;                   /* por si el vídeo se sale 0.5px */
}

.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 22vh;                       /* un poco más alto = transición limpia */
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.65) 65%,
    var(--section-bg) 100%
  );
}

/* Afinado por subpíxel (por si el vídeo “baila” 0.5px en algunos DPR) */
.hero-video{
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  will-change: transform;
  bottom: -0.5px;                    /* empuja 0.5px para evitar línea clara */
}

/* 3) La sección de Servicios debe empezar con el MISMO fondo y sin bordes/sombras */
.features{
  background: var(--section-bg) !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 0;
}

/* Apaga cualquier separador invisible que metas con ::before/::after */
.features::before,
.features::after{ content:none !important; }

/* 4) Evita que el primer hijo “abra” hueco con margen colapsado */
.features > *:first-child{
  margin-top: 0 !important;
  padding-top: clamp(16px, 3vh, 32px);
}
/* 1) Header realmente transparente */
header.top{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h, 60px);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10000;
}

/* 2) Evitar “hairline” o fondos escondidos en pseudoelementos */
header.top::before,
header.top::after{
  content: none !important;
}

/* 3) Asegura que el body separa el contenido del header fijo */
body{
  padding-top: calc(var(--topbar-h, 60px) + env(safe-area-inset-top, 0)) !important;
}

/* 4) Overlay del hero: que empiece TRANSPARENTE arriba */
.hero .overlay{
  /* Si tenías otro gradiente, sustitúyelo por este */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.10) 15%,
    rgba(0,0,0,0.60) 60%
  ) !important;
}
:root{ --topbar-h: 60px; }

/* TOPBAR 100% TRANSPARENTE */
header.top{
  position: fixed !important;
  top:0; left:0; right:0;
  height: var(--topbar-h) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10000 !important;
}
header.top::before,
header.top::after{ content:none !important; }

/* Nav dentro y centrado */
header.top .container.nav{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 clamp(16px,4vw,48px) !important;
}

/* Logo compacto (pisa el inline del <img>) */
header.top .brand img{
  height:28px !important; width:auto !important; display:block; object-fit:contain;
}

/* Compensación del header fijo */
body{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0)) !important; }

/* Overlay del hero: transparente arriba */
.hero .overlay{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.20) 30%,
    rgba(0,0,0,.55) 70%
  ) !important;
}
/* === TOPBAR: items al fondo + corte invisible con el hero === */
:root{
  --topbar-h: 72px;              /* altura visual de la franja negra */
  --topbar-pad-bottom: 10px;     /* empuje hacia abajo dentro de la barra */
}

/* Barra fija negra (manda sobre lo anterior) */
header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;
  z-index: 10000 !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* El contenedor ocupa toda la barra y “pega” su contenido abajo */
header.top .container.nav{
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-end !important;          /* CLAVE: abajo del todo */
  justify-content: space-between !important;
  padding: 0 clamp(16px,4vw,48px) !important;
  padding-bottom: var(--topbar-pad-bottom) !important;
  gap: 16px !important;
}

/* Logo y menú con la misma referencia vertical (al fondo) */
header.top .brand,
header.top nav.menu{
  display: flex !important;
  align-items: flex-end !important;          /* CLAVE: abajo del todo */
  height: 100% !important;
  margin: 0 !important;
}

/* Tamaño de logo coherente (pisa cualquier inline/previo) */
header.top .brand img{
  height: 28px !important;                   /* súbelo a 30–32 si quieres */
  width: auto !important;
  display: block; object-fit: contain;
}

/* Enlaces con “caja” propia, alineados al fondo */
header.top .menu a,
header.top .menu .btn.whatsapp{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  line-height: 1 !important;
  padding: 0 10px !important;
}

/* Deja hueco al contenido por la barra fija */
body{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top,0)) !important; }

/* HERO: sin corte debajo de la barra negra */
.hero{ margin-top: 0 !important; position: relative; }
.hero .overlay{
  /* arriba es negro exactamente hasta la altura de la barra,
     luego hace el fade normal hacia el vídeo */
  background: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--topbar-h) + var(--topbar-pad-bottom)),
    rgba(0,0,0,.15) calc(var(--topbar-h) + var(--topbar-pad-bottom) + 20px),
    rgba(0,0,0,.55) 70%
  ) !important;
}
/* === COMPRAR — Título a la izquierda con "Delgado 100" === */
.comprar .buy-title{
  text-align: left !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 100 !important;          /* Delgado 100 */
  letter-spacing: 0.2px;
  margin-left: 0 !important;
  margin-bottom: 8px;
}

/* Altura de la barra (ajusta si la cambiaste) */
:root{ --topbar-h: 72px; }

/* El contenido empieza debajo de la barra fija */
body{
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top,0)) !important;
}

/* HERO: ocupa toda la ventana debajo de la barra */
.hero{
  position: relative;
  height: calc(100svh - 0px);   /* el body ya compensa la barra */
  margin: 0 !important;
  background: #000;             /* fondo negro para el letterbox */
  overflow: hidden;
}

/* Capa del vídeo: caja negra a tamaño completo */
.hero-bg{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: #000;
}

/* VÍDEO 16:9 SIN RECORTE */
.hero-video{
  width: 100%;
  height: 100%;
  object-fit: contain !important;   /* <- la clave */
  object-position: center center !important;
  background: #000;                  /* por si el vídeo no carga */
}

/* Quita cualquier overlay/pseudo que oscurezca arriba y haga “corte” */
.hero .overlay{
  position: absolute; inset: 0;
  pointer-events: none;
  /* overlay sólo para lectura, pero arrancando transparente */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.15) 28%,
    rgba(0,0,0,.55) 72%
  ) !important;
}
.hero::before{ content: none !important; }

/* Asegura que el header no pinta líneas/fondos encima del hero */
header.top{ background: #000 !important; }
header.top::before, header.top::after{ content:none !important; }

/* ——— Ancla el recorte SOLO arriba ——— */

/* 1) El hero ocupa toda la ventana; el body ya compensa la topbar */
.hero{
  height: 100svh !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 2) El vídeo se escalará a cover, pero ANCLADO ABAJO */
.hero-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 100% !important;  /* <- clave: “bottom” */
  transform: translateZ(0);               /* estabilidad subpíxel */
}

/* 3) No tapes la parte inferior: elimina el “cap” del hero */
.hero::after{ content: none !important; }  /* quita el bloque de 18–24vh */

/* 4) Overlay sin oscurecer abajo (solo un toque arriba si quieres) */
.hero .overlay{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,0) 40%
  ) !important;
  pointer-events: none !important;
}

/* 5) Asegura que nada meta un borde/línea al pie del hero */
.features{ margin-top: 0 !important; border-top: 0 !important; box-shadow: none !important; }

/* === FINAL OVERRIDE — Hairline + Glow en la junta topbar/hero === */
:root{
  --topbar-h: 60px;                     /* altura de la barra */
  --hairline-color: rgba(255, 255, 255, 0.226);  /* línea 1px super sutil */
  --glow-color: rgba(67, 120, 235, 0);       /* “Apple blue” suave (#2997FF) */
  --glow-height: 18px;                      /* extensión del halo hacia el hero */
}

/* Nos aseguramos de que la barra esté fija y por encima del hero */
header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;
  z-index: 10000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* REACTIVA el pseudo aunque antes lo hayan puesto en none con !important */
header.top::after{
  content: "" !important;
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;                              /* se “monta” 1px sobre el hero */
  height: calc(1px + var(--glow-height));
  pointer-events: none;
  /* 1) hairline de 1px + 2) halo que cae hacia el hero */
  background:
    linear-gradient(to bottom,
      var(--hairline-color) 0,
      var(--hairline-color) 1px,
      rgba(255,255,255,0) 1px
    ),
    radial-gradient(70% 120% at 50% 0%,
      var(--glow-color) 0%,
      rgba(41,151,255,0) 100%);
  filter: blur(6px);                         /* difumina el halo, la línea sigue nítida */
}

/* Deja sitio al contenido para la barra fija (si no lo tienes ya) */
body{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0)) !important; }
/* ==== UN SOLO NEGRO PURO PARA HERO + SERVICIOS + COMPRAR ==== */
:root{
  --page-black: #000000;          /* negro puro */
}

/* El hero funde EXACTO al negro puro (sin bandas) */
.hero{ margin-bottom: -1px !important; } /* mata la micro-línea por subpíxel */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 20vh; pointer-events:none; z-index:1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.45) 50%,
    var(--page-black) 100%
  ) !important;
}

/* Servicios = negro puro (como Comprar) */
.section.features,
.features{
  background: var(--page-black) !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Comprar también al mismo negro puro */
.section.comprar,
.comprar{
  background: var(--page-black) !important;
}

/* Por si algún bloque anterior reintroduce otro tono, lo apagamos */
.features::before, .features::after,
.comprar::before, .comprar::after{ content:none !important; }

/* Los “cards” siguen destacando sobre negro puro */
.fcard, .card, form.card{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
}
/* ===== Glow minimalista en la parte superior de SERVICIOS ===== */
:root{
  --section-glow-color: rgba(255,255,255,.16);  /* halo sutil (prueba .12–.18) */
  --section-hairline:   rgba(255,255,255,.12);  /* línea de 1px “apple” */
  --section-glow-size:  18px;                   /* extensión del halo hacia abajo */
}

/* La sección Servicios debe ser negra pura y posicionada para el pseudo */
.section.features,
.features{
  position: relative !important;
  background: #000 !important;
  margin-top: 0 !important;
  z-index: 2; /* por encima del hero */
}

/* Pseudo en el borde superior: hairline + halo */
.section.features::before,
.features::before{
  content: "" !important;
  position: absolute;
  left: 0; right: 0;
  top: -1px;                                    /* se solapa 1px sobre el hero */
  height: calc(1px + var(--section-glow-size));
  pointer-events: none;
  /* 1) línea de 1px + 2) glow que cae hacia SERVICIOS */
  background:
    linear-gradient(to bottom,
      var(--section-hairline) 0,
      var(--section-hairline) 1px,
      rgba(29, 94, 235, 0.027) 1px
    ),
    linear-gradient(to bottom,
      var(--section-glow-color) 0,
      rgba(255, 255, 255, 0) var(--section-glow-size)
    );
  filter: blur(.2px);
}

/* Por si algún efecto anterior tapa la junta, eliminamos bordes/pseudos viejos */
.section.features::after,
.features::after{
  /* si tenías un fade propio aquí que te cree banda, elimínalo */
  background: none !important;
}

/* Solo afecta a la card de Kits */
.fcard--kits .fcard__icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.25) inset;
  margin-bottom: 10px;
}
.fcard--kits .fcard__icon img{
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(41,151,255,.22));
}
.fcard--kits .fcard__title{ margin-top: 6px; }
/* Tamaño único para los iconos de las fcards */
:root{ --ficon-size: 48px; } /* si tus otros iconos son 44px, cambia a 44 */

.features .fcard__icon{
  inline-size: var(--ficon-size);
  block-size: var(--ficon-size);
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.25) inset;
  margin-bottom: 10px;
  flex: 0 0 var(--ficon-size);   /* evita que se deforme en flex/grid */
}

.features .fcard__icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Si el PNG ya trae glow fuerte, baja este valor a .12–.16 */
  filter: drop-shadow(0 6px 16px rgba(41,151,255,.22));
}

/* Alinear títulos/desc para que todas las cards queden iguales */
.features .fcard h3{ margin-top: 6px; }
/* Tamaño estándar del contenedor de iconos (mismo para todos) */
:root{ --ficon-size: 48px; } /* si tus otros iconos son 44px, cámbialo aquí */

.features .fcard__icon{
  inline-size: var(--ficon-size);
  block-size: var(--ficon-size);
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.25) inset;
}

/* 🔽 SOLO el icono de Kits sociales: reduce el PNG dentro del marco */
.fcard--kits .fcard__icon img{
  width: 78%;              /* prueba 74–82% según lo veas */
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(41,151,255,.18)); /* un poco más sutil */
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Headings estilo Apple (SF Pro Display donde esté disponible) ===== */
:root{
  /* escala fluida tipo Apple */
  --h1: clamp(28px, 5vw, 44px);
  --h2: clamp(22px, 3.6vw, 32px);
  --h3: clamp(18px, 2.6vw, 24px);
  --lh-tight: 1.12;
  --lh-std: 1.3;
}

/* Pila de fuentes “Apple-like” para headings */
h1, h2, h3, .h1, .h2, .h3{
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 700;                 /* títulos marcados, sólidos */
  letter-spacing: -0.012em;         /* tracking apretado “Apple” */
  line-height: var(--lh-tight);
  margin: 0 0 .5em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, .h1{ font-size: var(--h1); }
h2, .h2{ font-size: var(--h2); font-weight: 700; }
h3, .h3{ font-size: var(--h3); font-weight: 600; letter-spacing: -0.006em; }

/* Cuerpo y UI para acompañar */
html, body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: var(--lh-std);
}

/* Botones/nav un pelín más serios, rollo Apple */
nav a, .btn{
  font-weight: 600;
  letter-spacing: .01em;
}
/* Servcios: títulos y textos alineados a la izquierda (pisa el centrado global) */
.section.features .fcard,
.features .fcard{
  text-align: left !important;
}

.section.features .fcard h2,
.features .fcard h2,
.section.features .fcard h3,
.features .fcard h3{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Asegura el párrafo a la izquierda también */
.section.features .fcard p,
.features .fcard p{
  text-align: left !important;
}

/* === COMPRAR — título minimal tipo Apple === */
.section.comprar{
  padding: clamp(56px, 10vh, 96px) 0; /* respiración elegante */
  /* el fondo ya es negro en tu tema; si no, usa #000 */
}

.section.comprar .container{
  width: min(1200px, 92%);
  margin-inline: auto;
}

.comprar .buy-title{
  text-align: left !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 100 !important;          /* Delgado 100 */
  font-size: clamp(34px, 4.2vw, 56px);  /* escala fluida */
  letter-spacing: 0.2px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Acento azul moderno tipo Apple */
.buy-title .brand-accent{
  color: #2997FF; /* puedes probar #5DA8FF si lo quieres más suave */
}

/* === COMPRAR — título centrado === */
.comprar .buy-title{
  text-align: center !important;       /* <-- centrado */
  font-size: clamp(24px, 3.2vw, 40px); /* tamaño equilibrado */
  font-weight: 100 !important;         /* Delgado 100, estilo Apple */
  margin: 0 auto;                      /* centrado en bloque */
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* azul sutil tipo Apple */
.buy-title .brand-accent{
  color: #2997FF;
}

/* ====== PLANES (grid base) ====== */
.plans{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(16px, 2.5vh, 28px);
}

/* ====== Tarjeta del plan ====== */
.plan{
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  backdrop-filter: saturate(120%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.plan:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 26px -10px rgba(41,151,255,.18);
}

/* Cabecera: badge + título */
.plan__head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.plan__badge{
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #2997FF;                       /* azul Apple */
  background: rgba(41,151,255,.12);     /* pill sutil */
  border: 1px solid rgba(41,151,255,.28);
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
}

.plan__title{
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -.2px;
  margin: 0;
}

/* El primer plan (Express) en azul */
.plan--highlight .plan__title{
  color: #2997FF;
}

/* Lista (si la usas) */
.plan__list{
  list-style: none;
  margin: 8px 0 14px;
  padding: 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
}
.plan__list li{ margin: 6px 0; }
.plan__list li::before{
  content: "• ";
  color: rgba(255,255,255,.45);
}

/* CTA estilo Apple: azul clarito */
.plan__cta{
  display: inline-block;
  margin-top: 6px;
  background: #5DA8FF;        /* celeste Apple-like */
  color: #0B0B0C !important;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: 0 10px 26px -10px rgba(93,168,255,.45);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration: none;
}
.plan__cta:hover{
  background: #2997FF;         /* azul Apple al hover */
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(41,151,255,.55);
}
/* === PLAN: cuadrado a la izquierda, estilo Apple === */
.plans{
  display: flex;
  justify-content: flex-start;  /* pegado a la izquierda */
  align-items: flex-start;
  gap: 16px;
  margin-top: clamp(12px, 2vh, 20px);
}

/* Tarjeta cuadrada (no se “alarga”) */
.plan{
  width: clamp(260px, 32vw, 360px);  /* rango elegante */
  aspect-ratio: 1 / 1;               /* CUADRADO */
  display: flex;
  flex-direction: column;
  justify-content: space-between;    /* botón abajo */
  align-items: flex-start;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.plan:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 26px -10px rgba(41,151,255,.18);
}

/* Cabecera mínima y limpia */
.plan__head{
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan__badge{
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #000000;                      /* azul Apple */
  background: rgba(41,151,255,.12);
  border: 1px solid rgba(41,151,255,.28);
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
}

.plan__title{
  margin: 0;
  font-weight: 700;
  letter-spacing: -.2px;
  font-size: clamp(16px, 2vw, 20px);   /* compacto para que no crezca de más */
  color: #0a91df;                      /* Express en azul */
}

/* Botón celeste “como Apple” y abajo de la tarjeta */
.plan__cta{
  margin-top: auto;                    /* empuja hacia abajo */
  background: #5DA8FF;                 /* celeste Apple-like */
  color: #0B0B0C !important;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(93,168,255,.45);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.plan__cta:hover{
  background: #2997FF;                 /* azul Apple al hover */
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(41,151,255,.55);
}
/* === Badge "Nuevo" en naranja, sin contorno === */
.plan__badge{
  color: #ff9d0a00;                     /* naranja estilo Apple */
  background: rgba(255, 157, 10, 0);/* pill sutil sin borde */
  border: none;                       /* quita el contorno */
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
}
.plan__badge{ background: rgba(230, 230, 230, 0); }

/* === Plan — borde invisible estilo Apple === */
.plan{
  /* quita el borde visible */
  border: none !important;                 /* adiós línea gris */
  /* fondo sutil para que se separe sin “marco” */
  background: linear-gradient(180deg,
              rgba(255,255,255,.035),
              rgba(255,255,255,.02));
  border-radius: 16px;                      /* ya lo tienes, por si acaso */
  /* sombra muy suave, sin “halo” azul a menos que hagas hover */
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.55);
}

/* Hairline casi imperceptible (opcional) */
.plan::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  /* 1px interno a opacidad bajísima — se ve solo en pantallas muy buenas */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  pointer-events: none;
}

/* Hover elegante (sin borde, solo profundidad) */
.plan:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.65),
              0 10px 28px -12px rgba(41,151,255,.20); /* toque Apple */
}

/* Si en algún sitio forzaste un borde, lo neutralizamos */
.plan{ outline: none !important; }

/* === Título del plan — estilo Apple, blanco y elegante === */
.plan__title {
  color: #FFFFFF !important; /* blanco puro */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "SF Pro Text", system-ui, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600;           /* semi bold, pero no grueso */
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;    /* tracking más apretado */
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
/* — Imagen dentro del plan (debajo del título) — */
.plan__media{
  width: 100%;
  aspect-ratio: 16 / 10;       /* encaja muy bien en el cuadrado */
  border-radius: 12px;
  overflow: hidden;             /* sin bordes visibles */
  margin-top: 8px;
  background: rgba(255,255,255,.03); /* fallback por si no carga */
}

.plan__image{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;            /* realista, sin deformaciones */
  filter: brightness(.98) contrast(1.08) saturate(1.02);
  transform: translateZ(0);     /* nitidez */
}

/* Asegura el layout cuadrado del card y botón abajo */
.plan{
  aspect-ratio: 1 / 1;               /* cuadrado */
  display: flex;
  flex-direction: column;
  justify-content: space-between;     /* header arriba, botón abajo */
}
/* ===== Acciones del plan (precio + CTA + link) ===== */
.plan__actions{
  margin-top: auto;                     /* bloque pegado abajo del card */
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Precio: claro, legible y sin gritar */
.plan__price{
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 18px);
  letter-spacing: -0.01em;
}

/* Mantén el botón celeste “tipo Apple” que ya tienes,
   pero sin margin-top (lo maneja plan__actions) */
.plan__actions .plan__cta{
  margin-top: 0;
  padding: 12px 18px;                  /* coherente con el card */
}

/* “Más información” como botón-texto: azul y subrayado */
.plan__more{
  color: #2997FF;
  text-decoration: underline;
  text-underline-offset: 3px;          /* subrayado bonito */
  font-weight: 600;
  line-height: 1;
  padding: 8px 6px;                    /* área clicable sin “caja” */
  border-radius: 8px;                   /* foco accesible */
  transition: color .15s ease, background .15s ease;
}
.plan__more:hover{
  color: #5DA8FF;                       /* tono más claro al hover */
  background: rgba(41,151,255,.08);     /* feedback sutil */
}
.plan__more:focus-visible{
  outline: 2px solid #2997FF;
  outline-offset: 2px;
}
/* Precio minimal y elegante (sin negrita) */
.plan__price{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "SF Pro Display", system-ui, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;          /* sin negrita */
  font-size: clamp(16px, 1.6vw, 18px);
  letter-spacing: -0.015em;             /* tracking más fino */
  color: #FFFFFF;                       /* blanco puro */
  opacity: .92;                         /* toque suave, más “Apple” */
  font-variant-numeric: tabular-nums;   /* dígitos alineados */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* === "Más información" — versión más pequeña y sutil === */
.plan__more{
  color: #2997FF;
  font-size: 0.9rem;                 /* más pequeño (≈14.4px) */
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
  transition: color .15s ease, opacity .15s ease;
  padding: 6px 4px;
  border-radius: 6px;
}

.plan__more:hover{
  color: #5DA8FF;                    /* azul más claro al hover */
  opacity: 1;
  background: rgba(41,151,255,.06);  /* feedback sutil */
}

.plan__more:focus-visible{
  outline: 2px solid #2997FF;
  outline-offset: 2px;
}
/* === Plan actions en 3 zonas: [Comprar] [Precio] [Más info] === */
.plan__actions{
  /* antes era flex: lo pasamos a grid para colocar por zonas */
  display: grid !important;
  grid-template-columns: auto 1fr auto; /* izq | centro elástico | der */
  align-items: center;
  column-gap: 12px;
  margin-top: auto; /* sigue pegado abajo del card */
}

/* Colocación explícita de cada elemento */
.plan__cta{   grid-column: 1; justify-self: start;  margin-top: 0; }
.plan__price{ grid-column: 2; justify-self: center; }
.plan__more{  grid-column: 3; justify-self: end; }

/* Asegura que el botón quede bien “pegado” a la izquierda */
.plan__cta{ margin-left: 0 !important; }

/* (opcional) si quieres que el precio quede un pelín más discreto */
.plan__price{ opacity: .92; }

/* Alinea verticalmente botón, precio y link en la misma línea */
.plan__actions{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;              /* **clave**: centra en el eje Y */
  column-gap: 12px;
}

/* El botón ya es alto; lo hacemos inline-flex para referencia */
.plan__actions .plan__cta{
  display: inline-flex;
  align-items: center;              /* centra el texto en el botón */
  height: 40px;                     /* referencia común */
  margin-top: 0;
}

/* === PLAN — layout robusto tipo Apple === */
.plan{
  /* cuadrado y grid en 3 filas: header | media | acciones */
  aspect-ratio: 1 / 1;
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  gap: 12px;

  /* fondo y profundidad elegantes, sin borde */
  border: none !important;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.55);
  padding: clamp(16px, 2.4vw, 22px);
}
.plan::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  pointer-events: none;
}

.plan__head{ display:flex; align-items:center; gap:10px; }

/* media ocupa todo el espacio de la fila central */
.plan__media{
  border-radius: 12px; overflow:hidden; background: rgba(255,255,255,.03);
}
.plan__image{
  width:100%; height:100%; object-fit: cover;
  filter: brightness(.98) contrast(1.08) saturate(1.02);
}

/* Acciones en 3 columnas: [Comprar] [Precio] [Más info] */
.plan__actions{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 12px;
}
.plan__cta   { grid-column: 1; justify-self: start; display:inline-flex; align-items:center; height:40px; margin-top:0; }
.plan__price { grid-column: 2; justify-self: center; display:inline-flex; align-items:center; height:40px; line-height:1; margin:0; }
.plan__more  { grid-column: 3; justify-self: end; }

/* Título del plan — blanco, elegante */
.plan__title{
  color:#fff !important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-weight:600;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing:-0.02em; line-height:1.2; margin:0;
}

/* Badge “Nuevo” — naranja sin borde */
.plan__badge{
  color:#FF9F0A;
  background:rgba(255,159,10,.12);
  border:none; font-weight:600; padding:4px 8px; border-radius:999px; line-height:1;
}

/* CTA celeste Apple */
.plan__cta{
  background:#22ecdbe1; color:#0B0B0C !important;
  border-radius:12px; padding:12px 18px; font-weight:700;
  box-shadow:0 10px 26px -10px rgba(93,168,255,.45);
}
.plan__cta:hover{ background:#2997FF; transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(41,151,255,.55); }

/* Precio — minimal, sin negrita */
.plan__price{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-weight:400 !important;
  font-size: clamp(16px, 1.6vw, 18px);
  letter-spacing:-0.015em;
  color:#fff; opacity:.92;
  font-variant-numeric: tabular-nums;
}

/* “Más información” — pequeño y sutil */
.plan__more{
  color:#2997FF; font-size:.9rem; font-weight:500;
  text-decoration: underline; text-underline-offset:3px; opacity:.9;
}
.plan__more:hover{ color:#5DA8FF; opacity:1; background:rgba(41,151,255,.06); }

/* Encoge solo la imagen, el marco queda igual */
.plan__media{
  position: relative;               /* por si no lo tenías */
  overflow: hidden;                 /* esquinas limpias */
}

.plan__image{
  width: 100%;
  height: 100%;
  object-fit: cover;                /* mantiene el look */
  transform: scale(.96);            /* 0.90–0.96 según gusto */
  transform-origin: center center;  /* centrado */
  border-radius: 12px;              /* esquinas suaves dentro */
}

.plan__image{
  transform: translateY(8px) scale(.92); /* baja 8px y (si quieres) reduce un poco */
  transform-origin: center;
  object-fit: cover;
}

/* 1) Asegura que el contenedor de planes alinee a la izquierda */
.plans{
  display: flex !important;
  justify-content: flex-start !important;  /* pegado a la izquierda */
  align-items: flex-start;
  gap: 16px;
  margin-left: 0;                          /* por si heredaba algún margen */
}

/* 2) Baja SOLO el primer plan (RAYØ Express) */
.plan.plan--highlight{
  margin-top: 43px;                        /* ajusta 10–20px según veas */
  margin-left: 0 !important;               /* evita desplazamientos laterales */
}

/* 3) (Opcional) en móvil, un poco menos de bajada para que respire mejor */
@media (max-width: 560px){
  .plan.plan--highlight{ margin-top: 10px; }
}
/* ====== Variantes visuales del Plan RAYØ Plus ====== */

/* Placeholder elegante (misma caja que la imagen del Express) */
.plan__media--placeholder{
  /* degradado sutil tipo Apple */
  background:
    radial-gradient(120% 80% at 60% 10%, rgba(41,151,255,.10), rgba(255,255,255,.02) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius: 12px;
  min-height: 0; /* deja que el grid gobierne la altura */
}

/* Acento “Próximamente” en gris elegante */
.plan__badge--soon{
  color: #C9D1D9;                      /* gris claro premium */
  background: rgba(255,255,255,.10);   /* pill sutil sin borde */
}

/* Título del Plus (blanco, igual que Express) */
.plan--soon .plan__title{
  color: #FFFFFF !important;
}

/* Rejilla de acciones en 3 columnas: [Notificar] [espaciador] [Más info] */
.plan--soon .plan__actions{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 12px;
}

/* Espaciador central (ocupa la columna 2) */
.plan__spacer{ display:block; }

/* Botón “Notificar” — versión “textured glass” con icono */
.plan__cta--notify{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px 14px;
  height: 40px;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.45);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.plan__cta--notify:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(41,151,255,.30);
}
.plan__cta--notify .icon-bell{ display:block; }

/* Link “Más información” pequeño y sutil (coherente con Express) */
.plan--soon .plan__more{
  color: #2997FF;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
}
.plan--soon .plan__more:hover{
  color: #5DA8FF;
  opacity: 1;
  background: rgba(41,151,255,.06);
}

/* Asegura que los dos cards queden en fila, izquierda alineada */
.plans{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start;
  gap: 16px;
}
/* Baja el PLUS al mismo nivel que el EXPRESS */
.plan--soon{
  margin-top: 42px;   /* usa el mismo valor que el .plan--highlight */
}

/* === Botón "Notificar" con color turquesa de la muestra === */
:root{
  --notify: #1FD4C3;        /* color base (tu turquesa) */
  --notify-hover: #17BBA9;  /* 10–12% más oscuro para hover */
}

.plan__price{
  margin-left: -6px; /* prueba entre -4px y -10px */
}

/* ==== Plan FREE (Pide tu logo gratuito) ==== */
.plan--free .plan__badge{
color:#10B981; /* verde esmeralda */
background: rgba(16,185,129,.14);
border: none;
}


.plan--free .plan__title{ /* destaca en verde suave */
color:#A7F3D0 !important; /* verde claro sobre negro */
}


.plan--free .plan__cta{ /* botón acorde al plan free */
background:#34D399 !important; /* verde menta */
color:#0B0B0C !important;
box-shadow: 0 10px 26px -10px rgba(52,211,153,.45);
}
.plan--free .plan__cta:hover{
background:#10B981 !important;
transform: translateY(-2px);
box-shadow: 0 14px 32px -10px rgba(16,185,129,.55);
}


/* Si no hay imagen, usa el placeholder elegante */
.plan--free .plan__media--placeholder{
background:
radial-gradient(120% 80% at 60% 10%, rgba(16,185,129,.12), rgba(255,255,255,.02) 60%),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
/* Alinear el plan FREE con el resto */
.plan.plan--free{ margin-top: 42px; }

/* En móvil, menos desplazamiento */
@media (max-width: 560px){
  .plan.plan--free{ margin-top: 10px; }
}
/* Plan FREE: centrar el único botón en la zona de acciones */
.plan.plan--free .plan__actions{
  display: flex !important;           /* pisa el grid anterior */
  justify-content: center !important; /* centra horizontal */
  align-items: center !important;     /* centra vertical */
  column-gap: 0 !important;           /* sin huecos extra */
  grid-template-columns: none !important;
}

.plan.plan--free .plan__cta{
  margin: 0 auto !important;          /* por si queda algún margen heredado */
  height: 40px;                        /* consistente con el resto */
  /* opcional: hazlo un poco más ancho */
  /* min-width: 180px; */
}

/* ====== Planes: 3 cards centrados ====== */
.plans{
  display: flex !important;
  justify-content: center !important;   /* centra el grupo */
  align-items: stretch !important;      /* alturas iguales */
  gap: 16px !important;
  flex-wrap: wrap;                       /* que se acomoden en móvil */
  margin-inline: auto;
}

/* 3 tarjetas del mismo ancho, centradas */
.plans .plan{
  flex: 0 1 clamp(280px, 30vw, 360px);
  max-width: 360px;
  margin-top: 0 !important;             /* anula offsets anteriores */
}

/* elimina los “bajones” que habíamos metido en cada plan */
.plan--highlight,
.plan--soon,
.plan--free{
  margin-top: 0 !important;
}

/* En móvil: una por fila y centradas */
@media (max-width: 720px){
  .plans{ justify-content: center !important; }
  .plans .plan{ flex-basis: min(92%, 420px); max-width: 420px; }
}
/* Bajar el bloque completo de planes respecto al título */
.section.comprar .plans{
  margin-top: clamp(28px, 4vh, 50px) !important;  /* súbelo/bájalo ajustando estos valores */
}

/* Si quieres aún más aire por encima de toda la sección Comprar */
.section.comprar{
  padding-top: clamp(72px, 12vh, 108px); /* opcional; aumenta el respiro global */
}

/* En móvil, un poco menos para que no quede demasiado abajo */
@media (max-width: 560px){
  .section.comprar .plans{ margin-top: 18px !important; }
}

/* ===== FAQs (acordeón accesible) ===== */
.faq{
background: #000;
scroll-margin-top: calc(var(--topbar-h, 60px) + 12px);
}


.faq .h2{
text-align: left;
margin-bottom: clamp(12px, 2vh, 16px);
}


.faq__grid{
display: grid;
gap: 10px; /* compacidad premium */
}


.faq__item{
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 0; /* el padding va en summary/body */
transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__item[open]{
border-color: rgba(255,255,255,.14);
box-shadow: 0 10px 26px -14px rgba(41,151,255,.18);
}


.faq__item > summary{
list-style: none; /* oculta triángulo del navegador */
cursor: pointer;
padding: 14px 16px;
font-weight: 600;
display: flex; align-items: center; gap: 10px;
}


/* Icono caret */
.faq__item > summary::before{
content: "";
inline-size: 18px; block-size: 18px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.22);
position: relative; display: grid; place-items: center;
}
.faq__item > summary::after{
content: "";
inline-size: 6px; block-size: 6px;
border-right: 2px solid rgba(255,255,255,.8);
border-bottom: 2px solid rgba(255,255,255,.8);
transform: rotate(-45deg);
margin-left: -26px; /* sitúa sobre el círculo */
}
.faq__item[open] > summary::after{ transform: rotate(45deg); }


.faq__body{
padding: 0 16px 14px 16px;
color: rgba(255,255,255,.82);
}


.faq__body p{ margin: 8px 0 0; }
.faq__body .link{ color:#2997FF; text-decoration: underline; text-underline-offset: 3px; }


@media (max-width: 720px){
.faq__grid{ gap: 8px; }
.faq .h2{ text-align: center; }
}


/* Respeto a accesibilidad */
@media (prefers-reduced-motion: reduce){
.faq__item{ transition: none; }
}
/* ===== Título de FAQs como el de "Comprar" ===== */
.section.faq .h2,
.faq .h2,
#faq .h2{
  text-decoration: none !important;           /* sin subrayado */
  color: #FFFFFF !important;                   /* blanco puro */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont,
               'SF Pro Display','SF Pro Text', system-ui, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 100 !important;                 /* “Delgado 100” */
  font-size: clamp(34px, 4.2vw, 56px);         /* misma escala */
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0 0 12px;
  text-align: left;                             /* pon 'center' si lo prefieres */
}

/* Por si el H2 estuviera envuelto en un <a> accidentalmente */
.section.faq h2 a{
  all: unset;                                   /* quita estilo de link */
  cursor: default;
}
/* FAQs: mismo estilo que Comprar, centrado y un poco más grande */
.section.faq h2{
  text-align: center !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont,
               'SF Pro Display','SF Pro Text', system-ui, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 100 !important;
  font-size: clamp(28px, 4vw, 48px) !important; /* antes 24–40px → ahora más grande */
  letter-spacing: 0.2px;
  color: #fff !important;
  text-decoration: none !important;
  margin: 0 0 12px;
}
/* Más aire entre planes (desktop) */
.plans{
  gap: clamp(18px, 2.2vw, 28px) !important;   /* antes 16px */
}

/* En móvil mantenlo cómodo */
@media (max-width: 720px){
  .plans{ gap: 14px !important; }
}

/* FAQs: centrado, 1 línea en desktop y tamaño un poco menor */
.section.faq h2{
  text-align: center !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont,
               'SF Pro Display','SF Pro Text', system-ui, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 100 !important;
  font-size: clamp(24px, 3vw, 38px) !important; /* ↓ más pequeño para que no rompa */
  line-height: 1.1;
  letter-spacing: 0.1px;
  color: #fff !important;
  text-decoration: none !important;
  margin: 0 0 12px;
}

/* Solo en pantallas anchas, impide el salto de línea */
@media (min-width: 900px){
  .section.faq h2{ white-space: nowrap; }
}

/* ==== Espacio extra entre COMPRAR y FAQS ==== */
.section.comprar{
  padding-bottom: clamp(72px, 10vh, 120px) !important; /* más aire debajo */
}

.section.faq{
  padding-top: clamp(72px, 10vh, 120px) !important; /* más aire arriba */
}

/* En móvil un poco menos para no alargar demasiado */
@media (max-width: 560px){
  .section.comprar{ padding-bottom: 56px !important; }
  .section.faq{ padding-top: 56px !important; }
}

/* ==== Hueco contundente entre COMPRAR y FAQS ==== */
:root{
  /* súbelo/bájalo a tu gusto */
  --gap-comprar-faq: clamp(50px, 8vh, 110px);
}

/* no sumes paddings: neutraliza y usa solo margin-top */
.section.comprar{ padding-bottom: 0 !important; margin-bottom: 0 !important; }
.section.faq{ padding-top: 0 !important; }

/* aplica el hueco exacto entre secciones */
.section.comprar + .section.faq{
  margin-top: var(--gap-comprar-faq) !important;
}

/* en móvil, un poco menos para no alargar */
@media (max-width: 560px){
  :root{ --gap-comprar-faq: 72px; }
}

/* ===== Espaciado profesional entre COMPRAR y FAQS ===== */
:root{
  --gap-comprar-faq-final: clamp(96px, 12vh, 144px); /* ajusta a gusto */
}

/* Asegura que COMPRAR no añada/sume paddings en su parte baja */
.section.comprar{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Aplica un único margen superior a FAQS, siempre */
.section.faq{
  margin-top: var(--gap-comprar-faq-final) !important;
  padding-top: 0 !important; /* evita doble espaciamiento */
}

/* En móvil: un poco menos para no alargar */
@media (max-width: 560px){
  :root{ --gap-comprar-faq-final: 72px; }
}

/* --- MÁS espacio entre COMPRAR y FAQS --- */
:root{
  /* súbelo sin miedo: */
  --gap-comprar-faq-final: clamp(140px, 18vh, 220px);
}

/* por si alguna regla previa intenta sumar paddings, mantenemos el control aquí */
.section.comprar{ padding-bottom: 0 !important; margin-bottom: 0 !important; }
.section.faq{
  margin-top: var(--gap-comprar-faq-final) !important;
  padding-top: 0 !important;
}

/* móvil: un poco menos para no alargar demasiado */
@media (max-width: 560px){
  :root{ --gap-comprar-faq-final: 96px; }
}

/* Azul de marca para acentos dentro del título de FAQs */
.section.faq h2 .brand-accent{
  color: #2997FF !important; /* mismo azul que el título de “Comprar” */
}

/* ===== FAQs — cards invisibles tipo Apple ===== */
.faq__grid{
  display: grid;
  gap: 10px;
}

.faq__item{
  position: relative;
  border: none !important;                       /* sin borde visible */
  border-radius: 14px;
  background: linear-gradient(180deg,
              rgba(255,255,255,.028),
              rgba(255,255,255,.018));          /* fondo sutil */
  box-shadow: 0 10px 26px -22px rgba(0,0,0,.65); /* profundidad muy suave */
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}

/* Hairline interno 1px casi invisible */
.faq__item::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); /* “invisible” */
  pointer-events:none;
}

/* Hover/focus: un pelín más de profundidad, sin mostrar borde */
.faq__item:hover,
.faq__item:focus-within{
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px -22px rgba(0,0,0,.72),
    0 10px 22px -18px rgba(41,151,255,.12);
}

/* Summary (título de la pregunta) */
.faq__item > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  display: flex; align-items: center; gap: 12px;
}

/* Quita los marcadores nativos */
.faq__item > summary::-webkit-details-marker{ display:none; }
.faq__item > summary::marker{ content:""; }

/* Icono “bullet” minimal a la izquierda */
.faq__item > summary::before{
  content:"";
  inline-size: 18px; block-size: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Contenido abierto */
.faq__body{
  padding: 0 18px 16px 18px;
  color: rgba(255,255,255,.80);
}

/* Accesibilidad: foco visible sin “caja fea” */
.faq__item > summary:focus-visible{
  outline: 2px solid #2997FF;
  outline-offset: 3px;
  border-radius: 12px;
}

/* Reduce movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .faq__item{ transition: none; }
}
/* Espacio entre el título de FAQs y las preguntas */
.section.faq h2{
  margin-bottom: clamp(18px, 2.8vh, 32px) !important; /* antes era ~12px */
}

/* (opcional) si prefieres no tocar el h2, añade margen al grid */
.faq__grid{
  margin-top: clamp(12px, 2vh, 24px) !important;
}

/* === Hueco EXTERNO entre COMPRAR y FAQS (no colapsa) === */
:root{
  --gap-comprar-faq: clamp(140px, 18vh, 220px);   /* ajusta a gusto */
  --gap-titulo-faq:  clamp(22px, 3vh, 34px);      /* espacio del título a las preguntas */
}

/* Que COMPRAR no sume padding propio abajo */
.section.comprar{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* FAQs: usa PADDING-TOP para el hueco externo y evita colapso */
.section.faq{
  margin-top: 0 !important;                        /* nada de margin externo */
  padding-top: var(--gap-comprar-faq) !important;  /* hueco real y estable */
  display: flow-root;                               /* bloquea colapso de márgenes */
  /* alternativa: overflow: auto; si prefieres */
}

/* Título FAQs: espacio INTERNO controlado */
.section.faq h2{
  margin: 0 0 var(--gap-titulo-faq) !important;    /* solo bottom */
}

/* Grid de preguntas: sin márgenes que colapsen */
.faq__grid{
  margin: 0 !important;
}

/* 1) Apaga cualquier flecha/marker a la DERECHA que haya quedado */
.faq__item > summary::after{
  content: none !important;   /* elimina la flechita bugueada del final */
}

/* (por si el navegador mete su triángulo nativo) */
.faq__item > summary::-webkit-details-marker{ display:none !important; }
.faq__item > summary::marker{ content:"" !important; }

/* 2) Reemplaza el círculo IZQUIERDO por un chevron estilo Apple */
.faq__item > summary{
  display: flex;
  align-items: center;
  gap: 12px;                  /* separación icono–texto */
  padding: 16px 18px;
}

/* Chevron (derecha) a la izquierda del texto */
.faq__item > summary::before{
  content:"";
  inline-size: 18px; 
  block-size: 18px;
  flex: 0 0 18px;
  /* dibuja el chevron con bordes (limpio y nítido) */
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(-45deg);              /* apunta a la derecha */
  border-radius: 2px;
  /* quita cualquier fondo/círculo anterior */
  background: none !important;
  box-shadow: none !important;
}

/* Al abrir, el chevron rota hacia abajo */
.faq__item[open] > summary::before{
  transform: rotate(45deg);               /* apunta hacia abajo */
  border-color: rgba(255,255,255,1);
}

/* Hover/focus: sutil realce del icono */
.faq__item > summary:hover::before,
.faq__item > summary:focus-visible::before{
  border-color: #2997FF;                  /* azul Apple */
}

/* === Chevron más pequeño y fino (estilo Apple minimal) === */
.faq__item > summary::before{
  content: "";
  inline-size: 14px;          /* antes 18px → más pequeño */
  block-size: 14px;
  flex: 0 0 14px;
  border-right: 1.6px solid rgba(255,255,255,.85);
  border-bottom: 1.6px solid rgba(255,255,255,.85);
  transform: rotate(-45deg);
  border-radius: 1.5px;
  background: none !important;
  box-shadow: none !important;
  transition: transform .25s ease, border-color .25s ease;
}

/* Chevron apuntando hacia abajo al abrir */
.faq__item[open] > summary::before{
  transform: rotate(45deg);
  border-color: rgba(255,255,255,1);
}

/* Hover/focus: brillo azul suave */
.faq__item > summary:hover::before,
.faq__item > summary:focus-visible::before{
  border-color: #2997FF;
}

/* ===== Base global ===== */
:root{ --bg:#0b0b0d; --text:#f2f2f2; --muted:#b7c0c7; --cyan:#00eaff; color-scheme: dark; }
*{ box-sizing: border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Manrope',system-ui,sans-serif; }
input, select, textarea{ font-family: inherit; }
::placeholder{ font-style: italic; opacity:.7; }

/* ===== Layout y textos ===== */
.wrap{ max-width:840px; margin:0 auto; padding:clamp(16px,4vw,32px); }
h1{ margin:10px 0 6px; font-weight:800; }
p.lead{ margin:0 0 18px; color:var(--muted); }
a.back{ display:inline-block; margin:6px 0 16px; color:var(--cyan); text-decoration:none; }

/* ===== Formulario base ===== */
form{
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:18px;
}
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--full{ grid-column:1 / -1; }
label span{ font-weight:700; }

input,select,textarea{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; border-radius:12px; padding:.8rem .9rem; outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(0,234,255,.35);
  box-shadow:0 0 0 3px rgba(0,234,255,.12);
}
select{
  background:rgba(255,255,255,.06);
  color:#f2f6f9; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:.8rem .9rem; outline:none;
}
select:focus{ border-color:#00eaff; box-shadow:0 0 0 3px rgba(0,234,255,.12); }
select option{ background:#0b0f12; color:#e6eef2; }
select option:checked, select option:focus{ background:rgba(0,234,255,.18); color:#fff; }
input[type="checkbox"], input[type="radio"]{ accent-color:#00eaff; }

small.err{ color:#ff7a7a; min-height:16px; }
@media (max-width:680px){ .grid{ grid-template-columns:1fr; } }

/* ===== Bloques de consentimiento y botones ===== */
.consents{ margin-top:20px; }
.check{ display:flex; align-items:center; gap:.6rem; }
.check input{ margin:0; }

.actions{
  display:flex; gap:10px; margin-top:10px;
  justify-content:flex-end; /* por defecto */
  width:100%;
}

/* ===== Ajustes solo para la página de cuestionario ===== */
.page--quiz .actions{
  justify-content:center;   /* centrado en esta página */
  margin-top:24px;
}

/* ===== (Opcional) Estilos de splash solo para home ===== */
/* .page--home .splash{ ... } */
/* .page--home .splash__glow{ ... } */
/* .page--home .splash__spinner{ ... } */

/* ========= Base global ========= */
:root{
  --bg:#0b0b0d; --text:#f2f2f2; --muted:#b7c0c7; --cyan:#00eaff;
  color-scheme: dark;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
input,select,textarea{ font-family:inherit; }
::placeholder{ font-style:italic; opacity:.7; }

/* ========= Layout y textos ========= */
.wrap{ max-width:840px; margin:0 auto; padding:clamp(16px,4vw,32px); }
h1{ margin:10px 0 6px; font-weight:800; }
p.lead{ margin:0 0 18px; color:var(--muted); }
a.back{ display:inline-block; margin:6px 0 16px; color:var(--cyan); text-decoration:none; }

/* ========= Formulario ========= */
form{
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:18px;
}
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--full{ grid-column:1 / -1; }
label span{ font-weight:700; }

input,select,textarea{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; border-radius:12px; padding:.8rem .9rem; outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(0,234,255,.35);
  box-shadow:0 0 0 3px rgba(0,234,255,.12);
}
select{
  background:rgba(255,255,255,.06);
  color:#f2f6f9; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:.8rem .9rem; outline:none;
}
select:focus{ border-color:#00eaff; box-shadow:0 0 0 3px rgba(0,234,255,.12); }
select option{ background:#0b0f12; color:#e6eef2; }
select option:checked, select option:focus{ background:rgba(0,234,255,.18); color:#fff; }
input[type="checkbox"],input[type="radio"]{ accent-color:#00eaff; }

small.err{ color:#ff7a7a; min-height:16px; font-size:.9rem; }
@media (max-width:680px){ .grid{ grid-template-columns:1fr; } }

/* ========= Consents y acciones ========= */
.consents{ margin-top:20px; display:grid; gap:10px; }
.check{ display:flex; align-items:center; gap:.6rem; }
.check input{ margin:0; }
.actions{
  display:flex; gap:10px; margin-top:24px; justify-content:center; width:100%;
}

.btn--primary{
  border-color:rgba(0,234,255,.5);
  background:linear-gradient(180deg, rgba(0,234,255,.35), rgba(0,234,255,.15));
}
.btn:hover{ filter:brightness(1.05); }

/* ========= Splash SOLO para el cuestionario ========= */
.page--quiz .splash{
  position:fixed; inset:0; display:grid; place-items:center;
  background:#0b0b0d; z-index:9999;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), visibility .9s linear;
}
.page--quiz .splash__glow{
  position:absolute; inset:0;
  background:radial-gradient(600px 600px at 50% 30%, rgba(0,234,255,.15), transparent 60%);
  pointer-events:none;
}
/* Tamaño CONTROLADO del logo */
.page--quiz .splash__logo{
  width:clamp(90px, 12vw, 140px); /* nunca gigante, nunca minúsculo */
  height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
.page--quiz .splash__spinner{
  width:40px; height:40px; margin:18px auto 0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
  border-top-color:var(--cyan);
  animation:spin 1s linear infinite;
  opacity:.9; will-change:transform;
}
/* Estado oculto (se aplica vía JS tras un tiempo) */
.page--quiz .splash[aria-hidden="true"]{
  opacity:0; visibility:hidden;
}
/* Suavizado de contenido al desvanecer */
.page--quiz .splash__logo{ width:clamp(90px, 12vw, 140px); }
.page--quiz .splash__spinner{
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
}
.page--quiz .splash[aria-hidden="true"] .splash__logo,
.page--quiz .splash[aria-hidden="true"] .splash__spinner{
  opacity:0; transform:translateY(6px) scale(.985);
}

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

/* Respeto reduce motion */
@media (prefers-reduced-motion: reduce){
  .page--quiz .splash,
  .page--quiz .splash__logo,
  .page--quiz .splash__spinner{ transition:none; }
  .page--quiz .splash__spinner{ animation:none; }
}

/* FIX: Forzar texto blanco solo en el botón "Comprar" */
.btn.plan__cta {
  color: #fff !important;
}
.btn.plan__cta:hover,
.btn.plan__cta:focus-visible {
  color: #fff !important;
}

/* Empuja SOLO la sección de FAQs un poco hacia abajo */
#faqs-rayo-express {
  margin-top: 1.5rem; /* ajusta: 0.5rem, 1rem, 2rem, etc. */
}
/* ====== Price Badge: minimal, elegante, alineado ====== */
:root{
  --rx-text: #ffffff;
  --rx-muted: rgba(255,255,255,.72);
  --rx-shadow: rgba(0,0,0,.45);
}

.rx-price-badge{
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(220px, 32vw, 360px);
  aspect-ratio: 1/1.1;
  margin: 1.5rem auto;
  isolation: isolate;
  /* tarjeta sutil */
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,.02) 40%, transparent 70%);
  border-radius: 28px;
  box-shadow:
    0 20px 50px var(--rx-shadow),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

/* Llama */
.rx-flame{
  position: absolute;
  inset: -6% -8% auto -8%;
  width: 116%;
  height: auto;
  opacity: .95;
  transform: translateY(-8px) scale(1.02);
  z-index: 0;
  filter: saturate(1.05) contrast(1.05);
}

/* Capa de contenido */
.rx-price-content{
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--rx-text);
  display: grid;
  gap: .35rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}

/* Precio antiguo */
.rx-old{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.75rem;
}
.rx-old-amount{
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  color: var(--rx-muted);
  position: relative;
  letter-spacing: .2px;
}
.rx-old-amount::after{
  content:"";
  position: absolute;
  inset: 50% -4px auto -4px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%) rotate(-3deg);
  opacity: .85;
}

/* Precio nuevo */
.rx-new{
  line-height: 1.05;
}
.rx-new-amount{
  display: block;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.rx-tag{
  display: inline-block;
  margin-top: .35rem;
  font-size: clamp(.78rem, 1.4vw, .9rem);
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
}

/* Modo oscuro por defecto; si tu fondo es claro: */
@media (prefers-color-scheme: light){
  .rx-price-badge{
    box-shadow:
      0 16px 36px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.6);
  }
}

/* ====== COMPACT MODE (mucho más pequeño) ====== */
.rx-price-badge--compact{
  width: clamp(110px, 12vw, 160px);   /* antes 220–360px */
  aspect-ratio: 1/1.05;
  margin: .5rem auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

.rx-price-badge--compact .rx-flame{
  opacity: .88;
  transform: translateY(-4px) scale(.78); /* llama más pequeña */
  filter: saturate(.95) contrast(.95);
}

.rx-price-badge--compact .rx-price-content{
  gap: .2rem;
  padding: .6rem .7rem;
}

.rx-price-badge--compact .rx-old{ height: 1.1rem; }
.rx-price-badge--compact .rx-old-amount{
  font-size: clamp(.62rem, 1.1vw, .75rem);
}

.rx-price-badge--compact .rx-new-amount{
  font-size: clamp(1.1rem, 2.6vw, 1.6rem); /* precio nuevo más pequeño */
  text-shadow: 0 1px 6px rgba(0,0,0,.28);
}

.rx-price-badge--compact .rx-tag{
  margin-top: .2rem;
  font-size: clamp(.62rem, 1vw, .75rem);
  padding: .18rem .45rem;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.10);
}

/* (Opcional) que no bloquee clics detrás si lo usas de overlay grande */
.rx-price-badge--compact{ pointer-events: none; }
.rx-price-badge--compact .rx-tag,
.rx-price-badge--compact .rx-new-amount,
.rx-price-badge--compact .rx-old-amount{ pointer-events: auto; }

/* ===== PRICE BADGE dentro del card Express ===== */
.plan--highlight .plan__media { position: relative; }
.plan--highlight .rx-price-badge{
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: clamp(86px, 10vw, 120px);   /* compacto (como otros chips) */
  margin: 0;
  background: transparent;           /* sin tarjeta detrás */
  box-shadow: none;
  border-radius: 12px;
  pointer-events: none;              /* no tapa clics de la card */
  z-index: 2;
}

/* Ajuste de la llama “Apple-like”: más pequeña y con blur suave */
.plan--highlight .rx-price-badge .rx-flame{
  opacity: .88;
  transform: translateY(-2px) scale(.62);
  filter: saturate(.95) contrast(.96);
}

/* Texto dentro del badge (precio) */
.plan--highlight .rx-price-badge .rx-price-content{
  gap: .12rem;
  padding: .28rem .36rem .34rem;
  text-align: center;
}

.plan--highlight .rx-price-badge .rx-old{ height: .9rem; }
.plan--highlight .rx-price-badge .rx-old-amount{
  font-size: clamp(.58rem, .9vw, .7rem);
  color: rgba(255,255,255,.72);
}
.plan--highlight .rx-price-badge .rx-old-amount::after{
  transform: translateY(-50%) rotate(-6deg);
  opacity: .9;
}

.plan--highlight .rx-price-badge .rx-new-amount{
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.35rem); /* más discreto */
  letter-spacing: .2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.plan--highlight .rx-price-badge .rx-tag{
  margin-top: .08rem;
  font-size: clamp(.54rem, .9vw, .68rem);
  padding: .12rem .36rem;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: auto; /* por si luego quieres hacerlo clicable */
}

/* La fila de acciones en línea (si no lo está ya) */
.plan--highlight .plan__actions{
  display: flex;
  align-items: center;
  gap: 12px;           /* espacio entre botón, chip y enlace */
  flex-wrap: wrap;
}

/* ===== Badge en modo CHIP, junto al botón ===== */
.plan--highlight .rx-price-badge--chip{
  position: static;              /* en flujo, no absoluto */
  width: clamp(90px, 10vw, 120px);
  margin: 0;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
  pointer-events: none;          /* no bloquea clics del botón */
}

/* Llama más estética y discreta */
.plan--highlight .rx-price-badge--chip .rx-flame{
  opacity: .86;
  transform: translateY(-2px) scale(.58);
  filter: saturate(.95) contrast(.96);
}

/* Tipografía/espaciados compactos para el chip */
.plan--highlight .rx-price-badge--chip .rx-price-content{
  gap: .12rem;
  padding: .18rem .28rem .24rem;
  text-align: center;
  color: #fff;
}

.plan--highlight .rx-price-badge--chip .rx-old{ height: .9rem; }
.plan--highlight .rx-price-badge--chip .rx-old-amount{
  font-size: clamp(.58rem, .9vw, .7rem);
  color: rgba(255,255,255,.72);
}
.plan--highlight .rx-price-badge--chip .rx-old-amount::after{
  content:"";
  position: absolute;
  left: -2px; right: -2px; top: 50%;
  height: 1px; background: currentColor;
  transform: translateY(-50%) rotate(-6deg);
  opacity: .9;
}

.plan--highlight .rx-price-badge--chip .rx-new-amount{
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: .2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.28);
}

.plan--highlight .rx-price-badge--chip .rx-tag{
  display: inline-block;
  margin-top: .06rem;
  font-size: clamp(.54rem, .9vw, .68rem);
  padding: .1rem .34rem;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: auto;
}

/* Microajuste vertical respecto al botón */
.plan--highlight .rx-price-badge--chip{
  transform: translateY(1px); /* sube/baja 1–3px según tu fuente */
}

/* Si el enlace “Más información” debe pegarse a la derecha: */
.plan--highlight .plan__more{ margin-left: auto; }

.plan__actions{
  display: grid !important;
  grid-template-columns: auto 1fr auto; /* izq | centro | der */
  align-items: center;
  column-gap: 12px;
  margin-top: auto;
}
.plan__cta{   grid-column: 1; justify-self: start;  margin-top: 0; }
.plan__price{ grid-column: 2; justify-self: center; }
.plan__more{  grid-column: 3; justify-self: end; }

/* === Precio en acciones: viejo tachado + actual === */
.plan__price{
  display: inline-flex;
  align-items: center;
  gap: 8px;                 /* separa viejo y nuevo */
  line-height: 1;
}

.plan__price .price-old{
  opacity: .6;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,255,255,.55);
}

.plan__price .price-now{
  font-weight: 800;         /* destaca el actual */
  color: #fff;
}

/* === Fila de acciones uniforme para todas las tarjetas === */
.plan__actions {
  display: grid !important;
  grid-template-columns: auto 1fr auto; /* [Comprar] [Precio] [Más info] */
  align-items: center;
  column-gap: 12px;
  margin-top: 12px;
  position: static !important;   /* evita overlays raros */
  z-index: auto !important;
}

/* Precio: viejo tachado + actual */
.plan__price{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  position: static !important;   /* que no se posicione absoluto */
}
.plan__price .price-old{
  opacity: .6;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,255,255,.55);
}
.plan__price .price-now{
  font-weight: 800;
  color: #fff;
}

/* Asegura estructura 3 filas (cabecera | media | acciones) */
.plan{
  display: grid;
  grid-template-rows: auto 1fr auto;  /* acciones pegadas abajo */
}

/* Evita que la imagen cree capas por encima */
.plan__media{ position: relative; z-index: 1; }
.plan__actions{ z-index: 0; }

/* — Limpieza explícita por si queda algo del badge de llama — */
.rx-price-badge,
.rx-price-badge--chip { display: none !important; }

/* Solo Express: hacer precio más pequeño */
.plan--highlight .plan__price .price-now{
  font-size: clamp(.9rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .1px;
}
.plan--highlight .plan__price .price-old{
  font-size: clamp(.7rem, 1.2vw, .9rem);
}

/* Solo Express: precio aún más pequeño */
.plan--highlight .plan__price { 
  gap: 4px; 
  line-height: 1;
}

.plan--highlight .plan__price .price-now{
  font-size: clamp(.82rem, 1.2vw, .95rem);
  font-weight: 700;
  letter-spacing: .05px;
}

.plan--highlight .plan__price .price-old{
  font-size: clamp(.6rem, .9vw, .78rem);
  opacity: .55;                    /* más sutil */
  text-decoration-thickness: 1.5px;
}

/* RAYØ Express: acciones en 2 columnas (CTA izq, precio der) */
.plan--highlight .plan__actions{
  display: grid !important;
  grid-template-columns: auto 1fr;  /* btn | espacio flexible */
  align-items: center;
  column-gap: 12px;
}

/* Botón a la izquierda */
.plan--highlight .plan__cta{
  grid-column: 1;
  justify-self: start;
  margin-top: 0;
}

/* Precio a la derecha */
.plan--highlight .plan__price{
  grid-column: 2;
  justify-self: end;       /* alineado a la derecha */
  gap: 6px;                /* pequeño espacio entre viejo y nuevo */
  line-height: 1;
}

/* (por si quedaba alguna regla previa del link) */
.plan--highlight .plan__more{ display: none !important; }

/* ===== Valoraciones (heading Apple-like) ===== */
.section--reviews{
  padding-block: clamp(48px, 10vw, 96px);   /* aire vertical elegante */
  scroll-margin-top: calc(var(--topbar-h, 60px) + 16px);
  background: #000;                         /* mismo fondo que el site */
  border-top: 1px solid rgba(255,255,255,.06); /* separador sutil desde 'Comprar' */
}

.section--reviews .container{
  max-width: 980px;                         /* respira un poco más que el copy normal */
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.section-title{
  margin: 0;
  text-align: center;                       /* alineación central, estilo Apple */
  font-weight: 800;                         /* Manrope bold (ya la usas) */
  letter-spacing: -0.02em;                  /* micro-ajuste tipográfico */
  line-height: 1.1;
  font-size: clamp(28px, 4.2vw, 44px);      /* jerarquía clara, responsive */
}

.section-title .brand-accent{
  color: var(--cyan, #00eaff);              /* “RAYØ Express.” en azul */
}

/* Ajuste del espacio con secciones adyacentes (Comprar / FAQs) */
.section.comprar + .section--reviews{ margin-top: 0; }
.section--reviews + .section.faq{
  margin-top: clamp(24px, 6vw, 48px);       /* separación cómoda hacia FAQs */
}

/* Más aire arriba de la sección completa */
.section--reviews{
  padding-top: calc(clamp(48px, 10vw, 96px) + 12px);
}

.section--reviews .section-title {
  margin-top: clamp(80px, 10vw, 140px); /* antes 40–80px */
}


/* ===== Valoraciones (cards tipo Apple) ===== */
.reviews__grid{
  display: grid;
  gap: 20px;
  margin-top: clamp(32px, 5vw, 60px);
  max-width: 720px;
  margin-inline: auto;
}

.review{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.review:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.review__avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}

.review__content{ flex: 1; }

.review__name{
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.05rem;
}

.review__text{
  color: rgba(255,255,255,.8);
  line-height: 1.5;
  font-size: .95rem;
}

/* responsive */
@media (max-width: 540px){
  .review{ padding: 14px 16px; gap: 12px; }
  .review__avatar{ width: 42px; height: 42px; }
}

/* === Quitar el espacio negro superior SOLO en express.html === */

/* elimina margen/padding por defecto del body SOLO aquí */
body.page--express {
  margin: 0 !important;
  padding: 0 !important;
}

/* asegura que el topbar quede pegado arriba y sin margen */
body.page--express header.top,
body.page--express .topbar {
  margin-top: 0 !important;
  top: 0 !important;
}

/* evita que un primer hijo con margin-top "empuje" el header (colapso de márgenes) */
body.page--express header.top > *:first-child,
body.page--express .topbar > *:first-child {
  margin-top: 0 !important;
}

/* si tu barra es sticky/fija, usa estos por si acaso */
body.page--express .topbar,
body.page--express header.top {
  position: sticky;        /* o 'fixed' si la quieres siempre visible */
  background: #0b0b0d;     /* mismo color de la barra */
}

/* ===== RAYØ Express — sistema visual (solo en express.html) ===== */
:root{ --wrap-w:1180px; --pad:clamp(16px,3vw,28px); --gap:clamp(18px,3vw,28px); }

body.page--express{ 
  margin:0; padding:0; background:#000; color:#fff;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Containers & sections */
body.page--express .container{ max-width:var(--wrap-w); margin:0 auto; padding-inline:var(--pad); }
body.page--express .section{ padding-block:clamp(32px,7vw,96px); }
body.page--express .text-center{ text-align:center; }
body.page--express .muted{ color:rgba(255,255,255,.75); }

body.page--express .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 56px;
  background: #00000000; /* negro puro */
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* contenedor centrado verticalmente sin padding extra */
body.page--express .topbar__in {
  max-width: var(--wrap-w);
  margin: 0 auto;
  padding: 0 var(--pad);      /* 🔹 elimina padding vertical */
  height: 56px;               /* 🔹 asegura altura igual que la barra */
  display: flex;
  align-items: center;        /* 🔹 centra el contenido verticalmente */
  justify-content: space-between;
  gap: 14px;
}

body.page--express .brand{ display:inline-flex; align-items:center; text-decoration:none; }
body.page--express .brand__img{ height:26px; width:auto; display:block; object-fit:contain; }

body.page--express .nav{ margin-left:auto; display:flex; gap:22px; align-items:center; }
body.page--express .nav a{
  position:relative; color:rgba(255,255,255,.86); font-size:14px; text-decoration:none;
  padding:6px 0; transition:color .2s ease;
}
body.page--express .nav a:hover{ color:#fff; }
body.page--express .nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  background:#2997FF; border-radius:2px;
}
body.page--express .nav a:hover::after{ transform:scaleX(1); }

/* Botón azul Apple */
body.page--express .btn{
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); /* “borde” visual sin cambiar tamaño */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 18px;
  line-height:1;
  border-radius:999px;
  box-sizing:border-box;
}



body.page--express .btn--primary{
  background:#3f93f3; color:#fff; border-color:transparent;
  box-shadow:0 12px 28px -12px rgba(41,151,255,.55);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.page--express .btn--primary:hover{
  background:#5DA8FF; transform:translateY(-2px);
  box-shadow:0 16px 36px -14px rgba(41,151,255,.65);
}
body.page--express .btn--ghost{
  background:transparent; color:#2997FF; border-color:rgba(41,151,255,.35);
}

/* —— HERO: más estético —— */
body.page--express .hero{ position:relative; overflow:hidden; }
body.page--express .hero::before{
  /* brillo suave tipo Apple detrás del hero */
  content:""; position:absolute; inset:-20% -10% auto -10%; height:70%;
  background:
    radial-gradient(40% 40% at 15% 20%, rgba(41,151,255,.28), transparent 60%),
    radial-gradient(40% 40% at 85% 30%, rgba(34,211,238,.22), transparent 60%);
  filter:blur(50px); opacity:.8; pointer-events:none;
}
body.page--express .eyebrow{
  color:#66d9ff; font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:12px; margin-bottom:12px;
}
body.page--express .h1{
  font-weight:800; letter-spacing:-.02em; font-size:clamp(36px,6vw,64px); line-height:1.06; margin:0 0 10px;
}
body.page--express .h1 .grad{
  background:linear-gradient(90deg,#22d3ee,#2997ff); -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.page--express .lead{ color:rgba(255,255,255,.78); font-size:clamp(15px,1.8vw,20px); max-width:62ch; }
body.page--express .price{ margin:10px 0 14px; font-size:clamp(18px,2vw,22px); }
body.page--express .price b{ font-size:clamp(26px,3.6vw,40px); letter-spacing:-.02em; }

/* Grid del hero: 1 columna móvil, 2 columnas desktop */
body.page--express .hero__grid{
  display:grid; gap:var(--gap); align-items:center; justify-items:center; text-align:center;
  grid-template-columns:1fr;
}
@media (min-width:1100px){
  body.page--express .hero__grid{
    grid-template-columns: 1.08fr .92fr;
    text-align:left; justify-items:stretch;
  }
  body.page--express .hero__grid .cta{ justify-content:flex-start; }
}
body.page--express .hero__grid .cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Mock tarjeta (preview) */
body.page--express .mock{
  border-radius:22px; background:
    radial-gradient(120% 120% at 20% 0%, rgba(34,211,238,.22), transparent 50%),
    radial-gradient(120% 120% at 85% 20%, rgba(41,151,255,.25), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px -30px rgba(0,0,0,.55);
  padding:clamp(14px,2.4vw,22px);
}
body.page--express .mock__screen{
  width:100%; aspect-ratio:4/3; border-radius:18px; border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; text-align:center; padding:20px;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2));
}

/* —— Features (tarjetas) —— */
body.page--express .features{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ body.page--express .features{ grid-template-columns:1fr; } }
body.page--express .feat{
  border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
body.page--express .feat h4{ margin:6px 0 8px; font-size:18px; letter-spacing:-.01em; }
body.page--express .feat p{ margin:0; color:rgba(255,255,255,.75); font-size:15px; }
body.page--express .badge{ font-size:12px; border:1px solid rgba(255,255,255,.15); padding:4px 8px; border-radius:999px; display:inline-block; color:rgba(255,255,255,.85); }

/* —— Pricing —— */
body.page--express .pricing{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr); align-items:center; }
body.page--express .pricing__card{ grid-column:span 5; border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:clamp(18px,3.6vw,28px); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
body.page--express .pricing__bullets{ grid-column:span 7; }
@media (max-width:980px){ body.page--express .pricing__card, body.page--express .pricing__bullets{ grid-column:1/-1; } }
body.page--express .price-xl{ font-size:clamp(42px,6vw,72px); font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
body.page--express ul.clean{ margin:0; padding-left:1.1em; }
body.page--express ul.clean li{ margin:8px 0; color:rgba(255,255,255,.85); }

/* —— FAQ —— */
body.page--express details{ border-top:1px solid rgba(255,255,255,.12); padding:14px 0; }
body.page--express details:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
body.page--express summary{ cursor:pointer; font-weight:700; letter-spacing:-.01em; }

/* Footer */
body.page--express .footer{ color:rgba(255,255,255,.55); font-size:13px; }
body.page--express .footer a{ color:rgba(255,255,255,.75); text-decoration:none; }
body.page--express .footer a:hover{ color:#fff; }

/* ===== Marquee vertical de valoraciones ===== */
.reviews-marquee{
  position: relative;
  height: 360px;                  /* altura visible del “visor” */
  overflow: hidden;
  margin-top: clamp(16px, 4vw, 28px);
  /* máscara para desvanecer arriba/abajo (look premium) */
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.reviews-track{
  display: grid;
  gap: 20px;
  will-change: transform;
  animation: reviews-scroll var(--reviews-duration, 18s) linear infinite;
}

/* Pausa al hover/touch */
.reviews-marquee:hover .reviews-track{ animation-play-state: paused; }

/* Keyframes: desplazamiento vertical continuo */
@keyframes reviews-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(var(--reviews-shift, -50%)); }
}

/* Reutiliza tus estilos de .review que ya tienes */
.review{
  display:flex; align-items:flex-start; gap:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:16px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.review:hover{ transform: translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.35); }

.review__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.review__name{ margin:0 0 4px; font-weight:800; color:#fff; font-size:1.05rem; }
.review__text{ color:rgba(255,255,255,.84); line-height:1.5; font-size:.95rem; }

/* Accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .reviews-track{ animation: none; }
}

/* FIX: bajar el título de Valoraciones de forma fiable */
.section--reviews .container{
  padding-top: clamp(80px, 10vw, 160px) !important; /* empuja todo hacia abajo */
}
.section--reviews .section-title{
  margin-top: 0 !important; /* evita colapso y reglas previas duplicadas */
}
/* Ajuste fino: bajada sutil del título de Valoraciones */
.section--reviews .container{
  padding-top: clamp(40px, 6vw, 80px) !important; /* espacio controlado */
}

.section--reviews .section-title{
  margin-top: 0 !important;
}

.topbar{
  background:#00000000 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ——— Barra legal minimal (Apple-like) ——— */
.legalbar{
  background:#00000000;                /* mismo fondo del site */
  padding: 16px 0 28px;           /* un poco de aire con el borde inferior */
  border-top: 1px solid rgba(255,255,255,.06); /* hairline sutil */
}
.legalbar__in{
  text-align:center;
  color: rgba(255,255,255,.55);
  font-size: 14px;
}
.legalbar a{
  color:#2997FF;                  /* azul elegante */
  text-decoration:none;
  font-weight:600;
}
.legalbar a:hover{
  text-decoration:underline;
  text-underline-offset: 3px;
}
.legalbar .sep{
  margin: 0 .5rem;
  color: rgba(255,255,255,.25);
}

/* — Cerrar hueco inferior (Valoraciones + Footer) — */
.section--reviews{ padding-bottom: 16px !important; }
.section--reviews + footer.section{ margin-top: 0 !important; }

footer.section{
  padding: 16px 0 !important;   /* antes: 40px + estilos heredados */
  margin: 0 !important;
}
/* 1) Footer negro puro */
/* —— Footer negro sólido coherente con la página —— */
:root{ --page-black: #000000; } /* o tu negro maestro */

footer.section,
footer.section.footer,
.legalbar{
  background: var(--page-black) !important;  /* ahora sí, negro sólido */
}

/* 2) Más aire entre Valoraciones y el footer */
.section--reviews{
  padding-bottom: clamp(24px, 6vw, 56px) !important;  /* antes era muy corto */
}

/* === TOPBAR — Botones tipo píldora === */
body.page--express .nav .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;                 /* alto compacto y cómodo */
  padding: 0 14px;              /* cifra base de la píldora */
  border-radius: 999px;         /* forma píldora */
  line-height: 1;
  font-weight: 800;             /* texto contundente como en la captura */
  text-decoration: none;
  gap: 8px;                     /* por si añades icono */
}

/* Píldora azul “Comprar” */
body.page--express .nav .btn--primary{
  background: #21232500;          /* azul del ejemplo */
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px -10px rgba(41,151,255,.55);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.page--express .nav .btn--primary:hover{
  background: #5DA8FF;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(41,151,255,.65);
}
body.page--express .nav .btn--primary:focus-visible{
  outline: 2px solid #A7D3FF;
  outline-offset: 2px;
}


body.page--express .nav .btn--ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
}
body.page--express .nav .btn--ghost:focus-visible{
  outline: 2px solid #bbbdbe;
  outline-offset: 2px;
}

/* Quita “colchón” extra en los enlaces del menú para que no engorden la barra */
body.page--express .nav a{ padding: 0 !important; }

body.page--express .nav a{
  position:relative;
  color:rgba(255,255,255,.86);
  font-size:14px;
  text-decoration:none;
  padding:6px 0;
  transition:color .2s ease;
}
body.page--express .nav a:hover{ color:#fff; }
body.page--express .nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  background:#2997FF; border-radius:2px;
}
body.page--express .nav a:hover::after{ transform:scaleX(1); }

.mock__screen{
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;                 /* importante para respetar el borde redondeado */
  padding:0;                       /* quitamos el padding del mock__screen */
  background: #000;                /* negro de fondo mientras carga el vídeo */
  display:block;
}

.mock__video{
  width:100%;
  height:100%;
  object-fit: cover;               /* rellena sin deformar */
  display:block;
}

/* ——— APAGA CUALQUIER TOPBAR SOLO EN express.html ——— */
body.page--express header.top,
body.page--express .topbar { display: none !important; }

body.page--express { padding-top: 0 !important; }
/* ——————————————————————————————————————————————— */

/* ===== Nota de promoción bajo la card ===== */
.plan__promo{
  margin: 10px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 1px;
  line-height: 1.4;
}

/* Variante fuera del <article>, como nota de sección */
.plans__promo{
  margin: 8px 0 24px;
  text-align: center;
  color: rgba(255,255,255,.75);
  font-size: 8px;
}

/* Coloca la nota bajo la PRIMERA card dentro del grid .plans */
.plans{
  display:grid; /* si no lo era ya */
  grid-template-columns: var(--plans-cols, repeat(auto-fit, minmax(280px, 1fr)));
  gap: var(--plans-gap, 24px);
}
.plans__promo{
  grid-column: 1;           /* bajo la columna 1 */
  justify-self: start;      /* alinear a la izquierda, como la card */
  max-width: 420px;         /* ancho similar a la card */
  margin: 8px 0 24px;
  color: rgba(255,255,255,.75);
  font-size: 8px;
  line-height: 1.4;
}

/* === COMPRAR — Colocar la nota debajo del primer card === */
.section.comprar .plans{
  display: grid !important;                      /* pisa los flex anteriores */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.section.comprar .plans > .plan{
  margin: 0 !important;                          /* elimina márgenes heredados */
}

.section.comprar .plans__promo{
  grid-column: 1 / span 1;                       /* misma columna que la 1ª card */
  grid-row: 2;                                   
  justify-self: start;                            /* alineada a la izquierda */
  max-width: 420px;                               /* ancho parecido a la card */
  margin: 6px 0 18px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  line-height: 1.45;
}

/* Responsive: cuando haya una sola columna, que la nota caiga debajo igualmente */
@media (max-width: 720px){
  .section.comprar .plans{
    grid-template-columns: 1fr;
  }
  .section.comprar .plans__promo{
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
  }
}

.section.comprar .plans__promo{
  margin-top:-8px;   /* prueba -6px, -8px o -12px */
}


/* === COMPRAR — Grid horizontal de 3 columnas (desktop) === */
.section.comprar .plans{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

/* Cards sin márgenes heredados */
.section.comprar .plans > .plan{
  margin: 0 !important;
}

/* La nota debajo de la PRIMERA card del grid */
.section.comprar .plans__promo{
  grid-column: 1;          /* columna de la primera card */
  grid-row: 2;             /* inmediatamente debajo */
  justify-self: start;
  max-width: 460px;
  margin: 6px 0 18px;
  color: rgba(255,255,255,.78);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Responsivo: 2 columnas en tablets, 1 en móvil */
@media (max-width: 1100px){
  .section.comprar .plans{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
  .section.comprar .plans__promo{
    grid-column: 1 / -1;   /* que ocupe ancho completo si quedan 2 columnas */
  }
}
@media (max-width: 680px){
  .section.comprar .plans{
    grid-template-columns: 1fr;
  }
  .section.comprar .plans__promo{
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
  }
}
/* 1) Forzamos .plans a grid de 3 columnas en desktop */
.section.comprar .plans{
  display: grid !important;                           /* anula cualquier display:flex previo */
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

/* 2) Reseteamos márgenes por si las cards traen margin */
.section.comprar .plans > .plan{
  margin: 0 !important;
}

/* 3) Posicionamos la nota bajo la segunda columna (RAYØ Express) */
.section.comprar .plans__promo{
  grid-column: 2;   /* columna central */
  grid-row: 2;      /* segunda fila */
  justify-self: start;     /* alineada con la card */
  max-width: 460px;        /* ancho visual parecido al de la card */
  margin: 6px 0 18px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.45;
}

/* 4) Responsivo:
      - En 2 columnas, la nota ocupa el ancho completo bajo la fila de cards.
      - En 1 columna (móvil), cae debajo de la card que toque. */
@media (max-width: 1100px){
  .section.comprar .plans{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
  .section.comprar .plans__promo{
    grid-column: 1 / -1;    /* que abarque ambas columnas */
  }
}
@media (max-width: 680px){
  .section.comprar .plans{
    grid-template-columns: 1fr;
  }
  .section.comprar .plans__promo{
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
  }
}
.section.comprar .plans__promo{
  margin-top: -10px;   /* prueba -8px o -12px según veas */
}

/* ==== Igualar actions del FREE a los del EXPRESS ==== */

/* Misma disposición (botón izq + precio dcha) */
.section.comprar .plan--free .plan__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Botón: mismo estilo oscuro que el Express */
.section.comprar .plan--free .plan__cta{
  background: linear-gradient(180deg, #1a1a1a, #0f0f0f);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  padding:12px 18px;
  border-radius:14px;
  font-weight:800;
  box-shadow:
    0 18px 50px -20px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.section.comprar .plan--free .plan__cta:hover{
  transform: translateY(-1px);
  box-shadow:
    0 22px 60px -24px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Precio a la derecha, con viejo tachado y nuevo fuerte */
.section.comprar .plan--free .plan__price{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}
.section.comprar .plan--free .plan__price .price-old{
  text-decoration: line-through;
  opacity:.6;
}
.section.comprar .plan--free .plan__price .price-now{
  font-weight:800;
}
/* === Starter: acciones sin precio-old (mismo look que Express) === */
.section.comprar .plan--free .plan__actions--starter{
  display: grid;
  grid-template-columns: auto 1fr auto; /* botón | espacio | precio */
  align-items: center;
  column-gap: 12px;
  margin-top: 12px;
}

/* Botón igual que Express */
.section.comprar .plan--free .plan__cta{
  display:inline-flex; align-items:center; height:40px;
  background: linear-gradient(180deg, #1a1a1a, #0f0f0f);
  color:#fff !important; border:1px solid rgba(255,255,255,.16);
  padding:12px 18px; border-radius:14px; font-weight:800;
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.section.comprar .plan--free .plan__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 60px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Precio solo “actual”, a la derecha, con las mismas fuentes que Express */
.section.comprar .plan--free .plan__price{
  grid-column: 3; justify-self: end;
  display:inline-flex; align-items:center;
  color:#fff; opacity:.92;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size: clamp(16px, 1.6vw, 18px);
  line-height:1; font-variant-numeric: tabular-nums;
}

/* Asegura que no haya precio-old ni “Más información” en Starter */
.section.comprar .plan--free .plan__price .price-old{ display:none !important; }
.section.comprar .plan--free .plan__more{ display:none !important; }
/* ==== FIX DEFINITIVO: promo centrada bajo las cards de COMPRAR ==== */
.section.comprar .plans{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(300px, 1fr)); /* 3 cols desktop */
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.plans__promo{
  grid-column: 1 / -1 !important;        /* ocupa todo el ancho del grid */
  justify-self: center !important;        /* centra el bloque dentro del grid */
  text-align: center !important;          /* centra el texto */
  max-width: 780px;                       /* ancho cómodo en desktop */
  margin: 10px 0 0 !important;
  color: rgba(255,255,255,.85);
  font-size: 14px;
  line-height: 1.45;
}

/* responsivo coherente con tus cards */
@media (max-width: 1100px){
  .section.comprar .plans{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
}
@media (max-width: 680px){
  .section.comprar .plans{ grid-template-columns: 1fr; }
}
.section.comprar .plans__promo{
  transform: translateY(-18px);  /* ajusta a -6px / -10px */
}


/* === RAYØ Starter: mismo look que Express, botón IZQUIERDA, sin price-old === */
.section.comprar .plan--free .plan__actions{
  display:grid !important;
  grid-template-columns:auto 1fr auto; /* botón | espacio | precio */
  align-items:center;
  column-gap:12px;
  margin-top:12px;
}

/* Botón = mismo estilo que Express */
.section.comprar .plan--free .plan__cta{
  display:inline-flex; align-items:center; height:40px;
  background:linear-gradient(180deg,#1a1a1a,#0f0f0f);
  color:#fff !important; border:1px solid rgba(255,255,255,.16);
  padding:12px 18px; border-radius:14px; font-weight:800;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.section.comprar .plan--free .plan__cta:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 60px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Precio solo ACTUAL a la DERECHA, misma tipografía/size que Express */
.section.comprar .plan--free .plan__price{
  grid-column:3; justify-self:end;
  display:inline-flex; align-items:center;
  color:#fff; opacity:.92;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size:clamp(16px,1.6vw,18px); line-height:1;
  font-variant-numeric:tabular-nums;
}
.section.comprar .plan--free .plan__price .price-old{ display:none !important; } /* por si existe */

/* Alineaciones y métricas de cabecera/media para que “caiga” igual */
.section.comprar .plan--free .plan__head{ display:flex; align-items:center; gap:10px; margin-bottom:0; }
.section.comprar .plan--free .plan__title{
  color:#fff; font-weight:600; letter-spacing:-.02em; line-height:1.2;
  font-size:clamp(20px,2vw,26px);
}
.section.comprar .plan--free .plan__media{ margin-top:8px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.03); }

/* ——— Acciones: extremos (botón izq / precio dcha) ——— */
.section.comprar .plan .plan__actions{
  display: grid !important;
  align-items: center !important;
  column-gap: 12px !important;
}

/* Caso 3 elementos (Comprar | … | Más info): 3 columnas */
.section.comprar .plan:not(.plan--free):not(.plan--highlight) .plan__actions{
  grid-template-columns: auto 1fr auto !important;
}
.section.comprar .plan:not(.plan--free):not(.plan--highlight) .plan__cta{   grid-column:1; justify-self:start !important; }
.section.comprar .plan:not(.plan--free):not(.plan--highlight) .plan__price{ grid-column:3; justify-self:end   !important; }

/* Caso 2 elementos (Starter y Express): 2 columnas */
.section.comprar .plan--free .plan__actions,
.section.comprar .plan--highlight .plan__actions{
  grid-template-columns: auto 1fr !important;  /* botón | espacio flexible */
}
.section.comprar .plan--free .plan__cta,
.section.comprar .plan--highlight .plan__cta{
  grid-column:1; justify-self:start !important;
}
.section.comprar .plan--free .plan__price,
.section.comprar .plan--highlight .plan__price{
  grid-column:2; justify-self:end !important;
}

/* Anula centrados heredados que provocaban el problema */
.section.comprar .plan--free .plan__actions,
.section.comprar .plan--highlight .plan__actions{
  justify-content: initial !important;
  text-align: initial !important;
}
/* === UNIFICAR EXPRESS & STARTER (tamaño de botón y precio) === */

/* 1) Misma disposición: botón a la IZQ y precio a la DCHA */
.section.comprar .plan--highlight .plan__actions,
.section.comprar .plan--free      .plan__actions{
  display: grid !important;
  grid-template-columns: auto 1fr !important; /* [Comprar] | [espacio] */
  align-items: center !important;
  column-gap: 12px !important;
}

/* 2) Botón COMPRAR: MISMO alto y caja en ambos */
.section.comprar .plan--highlight .plan__cta,
.section.comprar .plan--free      .plan__cta{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;              /* ← igual tamaño */
  padding: 12px 18px !important;        /* ← igual caja */
  border-radius: 14px !important;
  font-weight: 800 !important;
}

/* 3) Precio: MISMA fuente y tamaño en ambos */
.section.comprar .plan--highlight .plan__price,
.section.comprar .plan--free      .plan__price{
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  line-height: 1;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
               system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 1.6vw, 18px) !important;  /* ← igual tamaño */
  letter-spacing: -0.015em;
  color: #fff;
  opacity: .92;
  font-variant-numeric: tabular-nums;
}

/* 4) Cancela mini-ajustes previos del Express para que sea IGUAL */
.section.comprar .plan--highlight .plan__price .price-now,
.section.comprar .plan--highlight .plan__price .price-old{
  font-size: inherit !important;   /* usa el tamaño común de arriba */
  line-height: 1 !important;
}

/* 5) Starter NO lleva precio viejo; si existiera, se oculta por si acaso */
.section.comprar .plan--free .plan__price .price-old{
  display: none !important;
}
/* ===================== APPLE MIN PACK — PLANES ===================== */
/* Tipografía y ritmo */
.section.comprar .plan {
  --rx-text: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
             system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rx-muted: rgba(255,255,255,.70);
  --rx-line: rgba(255,255,255,.08);
  --rx-glass: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  font-family: var(--rx-text);
  background: var(--rx-glass);
  border-radius: 16px;
  box-shadow: 0 18px 48px -28px rgba(0,0,0,.65);
}

.section.comprar .plan__head { margin-bottom: 6px; }
.section.comprar .plan__title{
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-size: clamp(20px, 2vw, 26px);
  color: #fff;
}

/* Imagen limpia */
.section.comprar .plan__media{
  margin-top: 6px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.section.comprar .plan__image{
  width: 100%; height: auto; display: block;
  filter: brightness(.98) contrast(1.06) saturate(1.02);
}

/* Acciones: extremos y alineación perfecta */
.section.comprar .plan--highlight .plan__actions,
.section.comprar .plan--free      .plan__actions{
  display: grid !important;
  grid-template-columns: auto 1fr auto;   /* botón | espacio | precio (o link) */
  align-items: center !important;
  column-gap: 12px !important;
  margin-top: 12px;
}

/* Botón “Comprar” — minimal Apple */
.section.comprar .plan .plan__cta{
  grid-column: 1; justify-self: start;
  display:inline-flex; align-items:center; justify-content:center;
  height: 42px; padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(180deg,#1a1a1a,#0f0f0f);
  color:#fff; border: 1px solid rgba(255,255,255,.16);
  font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, opacity .15s ease;
}
.section.comprar .plan .plan__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Precio — mismo tamaño/fuente en ambos planes, a la derecha */
.section.comprar .plan .plan__price{
  grid-column: 3; justify-self: end;
  display: inline-flex; align-items:center; gap: 10px;
  line-height: 1;
  font-family: var(--rx-text) !important;
  font-weight: 500 !important;
  font-size: clamp(16px, 1.6vw, 18px) !important;
  color: #fff; opacity: .92;
  font-variant-numeric: tabular-nums;
}
.section.comprar .plan .plan__price .price-old{
  opacity:.55; text-decoration: line-through; text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,255,255,.45);
  font-size: .95em;
}
.section.comprar .plan .plan__price .price-now{
  font-weight: 700; letter-spacing: .005em;
}

/* Starter sin precio viejo */
.section.comprar .plan--free .plan__price .price-old{ display:none !important; }

/* Link “Más info” (cuando exista) — discreto */
.section.comprar .plan .plan__more{
  grid-column: 3; justify-self: end;
  color:#9fc7ff; opacity:.9; font-weight: 500; font-size: .92rem;
  text-decoration: none; padding: 6px 6px; border-radius: 8px;
  transition: color .15s ease, background .15s ease, opacity .15s ease;
}
.section.comprar .plan .plan__more:hover{
  color:#cfe3ff; background: rgba(41,151,255,.08);
}

/* Badges más finos (Apple-ish) */
.section.comprar .plan__badge{
  font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  color:#86e1ff; background: rgba(134,225,255,.12); border: 1px solid rgba(134,225,255,.28);
}

/* Espaciado más minimal entre cards */
.section.comprar .plans{ row-gap: clamp(12px, 1.6vw, 18px); }

/* Nota de rebaja (si la usas fuera de la card) */
.section.comprar .plans__promo{
  color: var(--rx-muted);
  font-size: 11px; line-height: 1.4;
  margin-top: 8px;
}

.section.comprar .plans__promo{
  transform: translateY(-30px);  /* ajusta a -6px / -10px */
}

/* Footer compacto global */
footer.footer{
  padding: 20px 14px;           /* antes 40–60px */
  font-size: 12.5px;            /* antes ~14–16px */
  line-height: 1.5;             /* más denso */
  color: rgba(255,255,255,.72);
}
footer.footer p{ margin: 4px 0; }          /* reduce espacios entre líneas */
footer.footer strong{ color:#fff; }

footer.footer .footer__brand p:first-child{ margin-bottom: 6px; }
footer.footer .footer__legal p + p{ margin-top: 4px; }
footer.footer .footer__quote{ margin-top: 8px; font-size: 12px; color:rgba(255,255,255,.55); }

/* Si usas contenedor, que no sea enorme */
footer.footer .container{ max-width: 880px; margin: 0 auto; }

/* Reduce huecos con la sección anterior/siguiente */
.section:last-of-type{ margin-bottom: 0; }
footer.footer{ margin-top: 16px; }

/* Responsive fino */
@media (max-width: 680px){
  footer.footer{ padding: 16px 12px; font-size: 12px; }
  footer.footer .footer__quote{ display:none; } /* opcional: esconder frase en móvil */
}



footer.section{ border-top: 0 !important; margin-top: 0 !important; }
.section:last-of-type{ margin-bottom: 0 !important; }

/* ==== Footer compacto (contenido más pequeño y denso) ==== */
footer.section,
.legalbar{
  /* ya tienes el fondo negro arreglado; solo compactamos contenido */
  padding: 14px 0;                 /* menos alto */
  font-size: 12.5px;               /* texto más pequeño */
  line-height: 1.45;               /* líneas más juntas */
}

footer.section .container,
.legalbar .container{
  max-width: 860px;                /* contenido más estrecho (opcional) */
  margin: 0 auto;
  padding: 0 14px;
}

/* Párrafos, listas y separaciones más cortas */
footer.section p,
footer.section li,
.legalbar p,
.legalbar li{
  margin: 4px 0;                   /* reduce el “aire” vertical */
}

/* Enlaces e iconos más discretos */
footer.section a,
.legalbar a{
  font-size: 12.5px;
  opacity: .85;
}
footer.section .icon,
footer.section .emoji,
.legalbar .icon,
.legalbar .emoji{
  font-size: 14px;
  vertical-align: -1px;
}

/* Si tienes una cita/frase final, hazla aún más sutil */
footer.section .footer__quote,
.legalbar .footer__quote{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* Quita hueco con la sección anterior */
.section:last-of-type{ margin-bottom: 0; }
footer.section{ margin-top: 0; }

/* Responsive fino */
@media (max-width: 680px){
  footer.section,
  .legalbar{ padding: 10px 0; font-size: 12px; }
  footer.section .container,
  .legalbar .container{ max-width: 94%; padding: 0 10px; }
  footer.section .footer__quote,
  .legalbar .footer__quote{ display: none; } /* opcional: esconder cita en móvil */
}

/* Igualar color del botón "Comprar" de STARTER al de EXPRESS */
.section.comprar .plan--free .plan__cta{
  background: linear-gradient(180deg, #1a1a1a, #0f0f0f) !important; /* mismo tono oscuro */
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

/* Hover idéntico */
.section.comprar .plan--free .plan__cta:hover{
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform: translateY(-1px);
}

/* === CTA HERO (express) — paridad estricta de altura/caja === */
body.page--express .hero__grid .cta .btn{
  /* caja idéntica y a prueba de overrides genéricos */
  height: 46px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;

  /* sin bordes reales: “stroke” que NO cambia tamaño */
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

/* Primario: mantiene su look, pero la sombra no cambia la altura percibida */
body.page--express .hero__grid .cta .btn--primary{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  color:#fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 10px 24px -14px rgba(41,151,255,.50) !important;
}


/* Secundario (“ghost”): comparte exactamente el mismo stroke/caja */
body.page--express .hero__grid .cta .btn--ghost,
body.page--express .hero__grid .cta .btn--secondary{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  /* el stroke ya viene de la regla base */
}
/* ——— Botón tipo Apple para “Unirme” ——— */
.btn-apple{
  --ink: #0A0B0C;                      /* color del texto en hover/active si inviertes */
  --glass: rgba(255,255,255,.06);      /* fondo vidrio sutil */
  --stroke: rgba(255,255,255,.14);     /* borde 1px */
  --highlight: rgba(255,255,255,.28);  /* brillo interior muy leve */
  --hover: rgba(255,255,255,.10);
  --active: rgba(255,255,255,.16);

  display:inline-flex; align-items:center; justify-content:center;
  height: 44px;                        /* alto consistente */
  padding: 0 18px;                     /* ancho adaptable */
  border-radius: 999px;                /* píldora */
  border: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    var(--glass);
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1;                      /* evita variaciones */
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 var(--highlight),    /* highlight interior 1px */
    0 8px 22px -12px rgba(0,0,0,.45);  /* sombra base */
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-apple:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    var(--hover);
  border-color: rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 28px -10px rgba(0,0,0,.55);
  transform: translateY(-1px);
}
.btn-apple:active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--active);
  border-color: rgba(255,255,255,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 16px -10px rgba(0,0,0,.6);
  transform: translateY(0);
}
.btn-apple:focus-visible{
  outline: 2px solid rgba(121,208,255,.55);  /* foco accesible */
  outline-offset: 2px;
}

/* Tamaño small opcional para cards estrechas */
.btn-apple--sm{ height: 40px; padding: 0 16px; font-weight: 600; }

/* Garantiza que los dos botones “Unirme” de las cards midan igual */
.plan__actions .btn, .plan__actions .btn-apple{
  height: 44px; padding: 0 18px; line-height: 1;
}

/* —— Botón estilo Apple Pay (negro sólido, pill, full-width) —— */
.btn-applepay{
  display:block;                 /* ocupa todo el ancho del contenedor */
  width:100%;
  height:48px;                   /* alto típico Apple Pay: 44–48px */
  border-radius:9999px;          /* pill */
  background:#0A0A0A;            /* negro sólido */
  color:#fff;
  font-weight:700;               /* texto contundente */
  letter-spacing:.2px;
  line-height:1;
  text-align:center;
  text-decoration:none;
  padding:0 20px;
  border:none;                   /* sin borde visible */
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;   /* leve “lift” */
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-applepay:hover{
  background:#000;               /* un poco más oscuro al hover */
}
.btn-applepay:active{
  transform: translateY(1px);    /* micro-press */
}
.btn-applepay:focus-visible{
  outline: 2px solid #5AC8FA;    /* anillo accesible (cyan Apple) */
  outline-offset:2px;
}

/* Variante compacta (si NO quieres full-width) */
.btn-applepay--compact{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto;
  padding:0 22px;
}

/* Asegura coherencia en tus cards */
.plan__actions .btn-applepay{ height:48px; }

/* Fila de CTA dentro de la card (botón + precio) */
.plan__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Hace que el botón ocupe todo el espacio disponible de la fila */
.plan__actions .btn-applepay{
  flex: 1 1 auto;     /* CLAVE: ahora sí crece en flex */
  min-width: 0;       /* evita desbordes raros */
}

/* Precio pegado a la derecha sin romper el botón */
.plan__price{
  margin-left: 8px;
  white-space: nowrap; /* evita que el precio salte de línea */
}

/* Centrado perfecto del texto dentro del botón */
.btn-applepay{
  display:inline-flex;              /* NO full-width */
  align-items:center;               /* centra vertical */
  justify-content:center;           /* centra horizontal */
  height:44px;                      /* alto consistente */
  padding:0 18px;                   /* ancho según texto */
  border-radius:9999px;
  background:#0A0A0A;
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;                    /* evita “saltos” */
  text-decoration:none;
  border:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .15s ease, transform .12s ease;
}

/* Que NO se estire ni se encoja en la fila del precio */
.plan__actions .btn-applepay{
  flex: 0 0 auto;                   /* clave para que mantenga su tamaño */
}


/* ===== Tokens de color (ajústalos a tu gusto) ===== */
:root{
  --btn-blue:   #0071E3;  /* azul “Apple” */
  --btn-green:  #34C759;  /* verde “confirmación/éxito” */
  --btn-orange: #FF7A00;  /* naranja “energía/urgencia” */
  --btn-black:  #0A0A0A;  /* negro sólido estilo Apple Pay */
  --btn-text:   #ffffff;
  --focus:      #5AC8FA;  /* anillo accesible */
}

/* Base pill negra (tu actual btn-applepay) */
.btn-applepay{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:9999px;
  background:var(--btn-black); color:var(--btn-text); font-weight:700;
  letter-spacing:.2px; line-height:1; text-decoration:none; border:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .15s ease, transform .12s ease;
}
.btn-applepay:hover{ background:#000; }
.btn-applepay:active{ transform: translateY(1px); }
.btn-applepay:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* —— Variantes de color para CTA ——
   Úsalas junto a .btn-applepay: p.ej. class="btn btn-applepay btn--blue"
*/
.btn--blue   { background: var(--btn-blue) !important; }
.btn--green  { background: var(--btn-green) !important; }
.btn--orange { background: var(--btn-orange) !important; }

.legalbar{
  background:#00000000;
  padding:16px 0 28px;
  border-top:1px solid rgba(255,255,255,.06);
}
.legalbar__in{ text-align:center; color:rgba(255,255,255,.55); font-size:14px; }
.legalbar a{ color:#2997FF; text-decoration:none; font-weight:600; }
.legalbar .sep{ margin:0 .5rem; color:rgba(255,255,255,.25); }

footer.section.legalbar{
  margin-top: clamp(56px, 7vw, 120px) !important;
}
body, main, .wrapper, .page { background:#000; } /* el que uses como contenedor */

.legalbar::before {
  background: linear-gradient(to bottom, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 100%);
  height: 12px;
}
.legalbar {
  animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Nudge del logo en la topbar */
header.top .brand img{
  transform: translateY(-10px) !important; /* prueba -2px a -6px */
}

/* === Acento igual al logo RAYØ === */
:root{
  --accent: #22D3EE; /* mismo cian del logo */
}

/* Forzar el color de la “segunda frase” en títulos */
.section-title .accent,
.features__title .accent,
.hero .content .accent,
h1 .accent, h2 .accent, h3 .accent,
.section-title a.accent{
  color: var(--accent) !important;
  text-decoration: none;
}

/* (opcional) hover a juego */
.section-title a.accent:hover{ color: #4FE7F6; }

/* === RAYØ Accent EXACT === */
/* Cian calibrado del logo */
:root{
  --ray0-accent: #3EE7E6;            /* hex muy cercano al logo */
  --ray0-accent-hover: #66F0EE;      /* ligero lift para hover */
}

/* Fuerza el color en la “segunda frase” */
.accent,
.section-title .accent,
.features__title .accent,
.hero .content .accent,
.section-title a.accent{
  color: var(--ray0-accent) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Estados de enlace coherentes */
.section-title a.accent:hover,
.features__title a.accent:hover { color: var(--ray0-accent-hover) !important; }
.section-title a.accent:visited,
.features__title a.accent:visited { color: var(--ray0-accent) !important; }

/* ——— Divider cyan con glow, centrado y no a todo lo ancho ——— */
:root{
  /* usamos tu acento si existe; cae en cyan si no */
  --rayo-cyan: var(--accent, #22D3EE);
  --footer-black: var(--page-black, #000);
}

footer.section.legalbar{
  position: relative;
  background: var(--footer-black) !important; /* mismo negro que la página */
}

/* línea + halo justo por encima del footer */
footer.section.legalbar::before{
  content:"";
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%) scaleY(.5); /* << “afina” la línea */
  transform-origin:center;
  width: min(760px, 74%);
  height:1px;                            /* 1px escalado = ~0.5px en pantallas densas */
  border-radius:999px;

  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.70) 12%,
    #fff 50%,
    rgba(255,255,255,.70) 88%,
    rgba(255,255,255,0) 100%
  );

  /* glow más fino */
  box-shadow:
    0 0 10px rgba(255,255,255,.12),
    0 0 22px rgba(255,255,255,.06);

  pointer-events:none;
}

@media (max-width:680px){
  footer.section.legalbar::before{
    width:92%;
    top:-18px;
  }
}

/* Ultra-hairline en pantallas de alta densidad (opcional) */
@media (min-resolution: 2dppx){
  footer.section.legalbar::before{
    transform:translateX(-50%) scaleY(.35);
  }
}


@media (max-width: 680px){
  /* antes: width: 84%;  */
  footer.section.legalbar::before{ width: 92%; }
}


/* antes */
footer.section.legalbar::before{
  /* ... */
  width: min(640px, 64%);
  /* ... */
}

/* después (un poco más larga) */
footer.section.legalbar::before{
  /* ... */
  width: min(1000px, 234%);
  /* ... */
}

@media (max-width: 680px){
  /* antes: width: 84%;  */
  footer.section.legalbar::before{ width: 92%; }
}

/* Banda completa de valoraciones en negro */
.section--reviews,
#valoraciones,
.reviews-marquee{
  -webkit-mask: linear-gradient(to bottom, transparent 0, #fff 10%, #fff 90%, transparent 100%);
          mask: linear-gradient(to bottom, transparent 0, #fff 10%, #fff 90%, transparent 100%);
}
,
.section--reviews .reviews-track{
  background: #000 !important;
}

/* Tarjetas individuales en negro */
.section--reviews .review{
  background: #000 !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08); /* hairline sutil */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.55);
  border-radius: 16px; /* si quieres mantener las esquinas redondeadas */
}

/* Contenido del texto dentro de la tarjeta */
.section--reviews .review__name{ color:#fff; }
.section--reviews .review__text{ color:rgba(255,255,255,.85); }

/* Si hay brillos/gradientes por pseudo-elementos, los anulamos */
.section--reviews .review::before,
.section--reviews .review::after{
  content:none !important;
  background:transparent !important;
}

/* Estado por defecto: solo se ve el background de escritorio */
.hero__bg--mobile { display: none; }

/* Estilos comunes para que el video ocupe toda la sección */
.hero__bg--mobile,
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-video-mobile,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Breakpoint móvil: oculta desktop y muestra "heromovil" */
@media (max-width: 900px){
  .hero__bg { display: none; }              /* tu video/fondo horizontal de desktop */
  .hero__bg--mobile { display: block; }     /* aparece el video "heromovil" */
}

/* ===== Topbar móvil estilo “Rolex”, pero en negro ===== */
:root{
  --topbar-m: 60px;                 /* alto de la barra en móvil */
  --ink: #ffffff;
  --ink-soft: rgba(255,255,255,.7);
  --bar-bg: rgba(0,0,0,.86);
  --bar-hairline: rgba(255,255,255,.10);
}

/* Por defecto: oculto (solo aparece en móvil) */
.top--mobile{ display:none; }

/* Layout y estética del topbar móvil */
@media (max-width:900px){
  /* Oculta el topbar de desktop solo en móvil */
  header.top:not(.top--mobile){ display:none; }

  .top--mobile{
    position: sticky; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    /* Safe area SOLO como padding superior */
    padding: env(safe-area-inset-top, 0px) clamp(16px, 5vw, 20px) 0;
    height: var(--topbar-m);                /* 60px exactos, sin sumas */
    background: rgba(0,0,0,.86);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    z-index: 10000;
  }

  /* Logo centrado absoluto tipo Rolex */
  .top--mobile .brand{
    position: absolute; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--topbar-m);
  }
  .top--mobile .brand img{
    height: 26px; width: auto; display: block;
    filter: drop-shadow(0 6px 20px rgba(41,151,255,.35));
  }

  /* Izquierda y derecha con el mismo “peso visual” */
  .top--mobile .menu{ margin-right: auto; }
  .top--mobile .actions{ display:flex; align-items:center; gap: 12px; margin-left: auto; }

  /* Botones redondos, alineados a la misma altura */
  .icon-btn{
    -webkit-tap-highlight-color: transparent;
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
  }
  .icon-btn svg{ width: 20px; height: 20px; stroke: currentColor; }
}

  .icon-btn:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
  .icon-btn:active{ transform: scale(.96); }

  .icon-btn svg{
    width: 20px; height: 20px;
    stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* El corazón y el pin van rellenos para “peso visual” */
  .icon-btn[aria-label="Favoritos"] svg path{ fill: none; }
  .icon-btn[aria-label="Ubicación"] svg path{ fill: none; }

  /* Drawer lateral */
  .mobile-drawer{
    position: fixed; top: calc(var(--topbar-m) + env(safe-area-inset-top, 0px));
    left: 0; bottom: 0; width: 86vw; max-width: 420px;
    background: #0b0b0c;
    border-right: 1px solid rgba(255,255,255,.12);
    transform: translateX(-100%);
    transition: transform .38s cubic-bezier(.22,.61,.36,1);
    z-index: 9999;
    padding: 18px clamp(16px, 4vw, 22px);
  }
  .mobile-drawer[aria-expanded="true"]{ transform: translateX(0); }
  .drawer-list{ list-style:none; margin:0; padding:0; display:grid; gap: 2px; }
  .drawer-list a{
    display:block; padding: 14px 6px; color: var(--ink);
    text-decoration:none; font-weight: 700; letter-spacing: .02em;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* Scrim (oscurece el fondo) */
  .scrim{
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
    z-index: 9998;
  }
  .scrim[data-open="true"]{ opacity: 1; pointer-events: auto; }

  /* Compensar el alto del topbar en móvil si tu layout lo necesita */
 @media (max-width:900px){
  /* Compensación mínima: solo el alto real del topbar */
  body{ padding-top: var(--topbar-m); }
}
/* Mostrar sólo en móvil */
.top--mobile{ display:none; }

@media (max-width:900px){
  /* Oculta la barra de escritorio en móvil */
  header.top{ display:none !important; }

  /* Topbar móvil estilo “Rolex” en negro */
  :root{ --topbar-m: 60px; }

  .top--mobile{
    position: sticky; top: 0; z-index: 10000;
    display:flex; align-items:center; justify-content:space-between;
    height: var(--topbar-m);
    padding: 0 clamp(16px, 5vw, 24px);
    background: rgba(0,0,0,.86);
    border-bottom: 1px solid rgba(255,255,255,.10);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
  }
  .top--mobile .brand img{ height: 26px; display:block; }

  .icon-btn{
    display:inline-grid; place-items:center;
    width:36px; height:36px; border-radius:999px;
    color:#fff; background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
  }
  .icon-btn:active{ transform: scale(.96); }

  /* Drawer + scrim por defecto ocultos */
  [hidden]{ display:none !important; }
}



/* ===== TOPBAR MÓVIL (tipo Rolex) ===== */
.topbar-mobile{
  display: none;                 /* por defecto oculto (solo móvil) */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;                  /* altura compacta */
  padding: 0 14px;
  background: #000;              /* negro sólido */
  backdrop-filter: blur(10px);   /* sutil */
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 1000;
  align-items: center;
  justify-content: space-between;
}

/* estructura interna */
.topbar-mobile { display: flex; }
.topbar-mobile .icon-btn{
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.topbar-mobile .icon-btn svg{
  width: 20px; height: 20px;
}

/* Logo centrado “de verdad” como Rolex */
.topbar-mobile { position: fixed; }
.topbar-mobile .mobile-logo{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px;
}
.topbar-mobile .mobile-logo img{
  width: 24px; height: 24px;
  display: block; object-fit: contain;
}

/* Acciones a la derecha, alineadas */
.topbar-mobile .actions{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
}

/* ——— Sólo en móvil ——— */
@media (max-width: 768px){
  /* mostrar la barra móvil */
  .topbar-mobile{ display: flex; }

  /* ocultar la barra de escritorio para no duplicar */
  header.top .container.nav { display: none !important; }

  /* evitar “hueco” arriba: empuja el contenido bajo la barra fija */
  .hero, main, .wrapper, body > .section:first-of-type {
    margin-top: 56px !important;
  }
}

/* Ajustes finos para iPhone con notch (opcional) */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 768px){
    .topbar-mobile{ padding-left: max(14px, env(safe-area-inset-left));
                    padding-right: max(14px, env(safe-area-inset-right)); }
  }
}

/* ==== TOPBAR (móvil y general) ==== */
:root{ --topbar-h: 60px; }

header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;
  z-index: 10000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* El contenido empieza debajo de la barra */
body{ padding-top: var(--topbar-h) !important; }

/* Dentro del header: fila limpia y centrada */
header.top .container,
header.top .wrap,
header.top .nav{
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 clamp(16px,4vw,24px) !important;
}

/* Logo compacto (evita alturas gigantes) */
header.top .brand img{
  height: 28px !important; width: auto !important; display:block;
}

/* Grupo de iconos a la DERECHA */
header.top .menu,
header.top .navbar,
header.top .actions{ display:flex !important; align-items:center !important; gap:14px; }
header.top .actions{ margin-left: auto !important; }   /* <- empuja a la derecha */

/* En móvil oculta la barra de escritorio si tienes una barra móvil paralela */
@media (max-width: 900px){
  header.top:not(.top--mobile){ display:none !important; } /* si usas .top--mobile */
}

/* ==== HERO: sin bandas negras añadidas ==== */
.hero{
  position: relative !important;
  height: 100svh !important;       /* pantalla completa real */
  margin: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}

/* Capa de vídeo a tamaño completo */
.hero-bg{ position:absolute !important; inset:0 !important; display:grid; place-items:center; }
.hero-video{
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 100% !important; /* anclado abajo para no “comerse” la parte baja */
}

/* Hero móvil: usa solo el video mobile y mismas reglas */
.hero__bg--mobile, .hero__bg{ position:absolute !important; inset:0 !important; overflow:hidden !important; }
.hero-video-mobile, .hero__bg video{
  width:100% !important; height:100% !important;
  object-fit: cover !important; object-position:center !important;
}

/* Quita el pseudo que añade un cap/gradiente extra abajo */
.hero::after{ content: none !important; }

/* Overlay muy sutil arriba, transparente abajo (sin banda) */
.hero .overlay{
  position:absolute !important; inset:0 !important; pointer-events:none !important;
  background: linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 40%) !important;
}

/* La sección siguiente no mete línea/borde ni salto extraño */
.features{ margin-top:0 !important; border-top:0 !important; box-shadow:none !important; }

/* Si tenías un segundo padding-top por otra regla, neutralízalo en móvil */
@media (max-width:900px){
  body{ padding-top: var(--topbar-h) !important; }
}

/* ===== TOPBAR COMPACTA Y PEGADA ARRIBA ===== */
@media (max-width: 900px){
  :root{ --topbar-h: 48px; } /* ajusta a 44–56 si quieres */

  html, body{ margin:0 !important; }

  header.top{
    position: fixed !important;
    top: 0 !important;
    left: 0; right: 0;
    height: var(--topbar-h) !important;
    margin: 0 !important;
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left) !important;
    background: #000 !important;
    z-index: 10000 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* quita cualquier relleno vertical interno que la haga “crecer” */
  header.top .container,
  header.top .wrap,
  header.top .nav{
    height: 100% !important;
    padding: 0 !important;
    display:flex !important;
    align-items:center !important;
  }

  /* por si algún reset le pone margen superior */
  header.top *{ margin-top: 0 !important; }

  /* logo e iconos compactos */
  header.top .brand img{ height: 22px !important; width:auto !important; display:block; }
  header.top .menu,
  header.top .actions{ gap:12px !important; }

  /* el contenido comienza justo debajo de la topbar */
  body{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top)) !important; }

  /* elimina separadores/fantasmas por si existen */
  .header-spacer, .top-spacer, .top__spacer{ display:none !important; height:0 !important; }

  /* que el hero no añada margen arriba */
  .hero{ margin-top:0 !important; }
}

/* ——— FIX: elimina el hueco bajo la topbar en móvil ——— */
@media (max-width: 768px){
  .hero, main, .wrapper, body > .section:first-of-type{
    margin-top: 0 !important;    /* estaba en 56px */
  }
}

/* Usa una sola compensación global: el padding del body */
:root{ --topbar-h: 56px; }       /* o 60px si prefieres */
body{ padding-top: var(--topbar-h) !important; }

/* La barra NO debe crecer: interior a 100% de la barra */
.nav{ height: 100% !important; } /* antes: 100px */

/* La topbar fija, sin borde ni sombras extra */
header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Por si algún pseudo creaba “líneas” */
header.top::before,
header.top::after{ content:none !important; }

/* ==== HARD OVERRIDE: móvil sin huecos arriba ==== */
@media (max-width: 900px){
  /* Si usas la barra .top--mobile, quita compensaciones */
  body{ padding-top: 0 !important; }

  /* Quita el “empuje” que metían reglas antiguas */
  .hero,
  main,
  .wrapper,
  body > .section:first-of-type{
    margin-top: 0 !important;
  }

  /* Asegura que sólo vive la barra móvil */
  header.top:not(.top--mobile){ display: none !important; }

  /* Opcional: fija la barra móvil como en Rolex */
  header.top--mobile{ position: fixed !important; top: 0; left: 0; right: 0; }
}

/* Alineación de iconos a la derecha en la topbar móvil */
.top--mobile .actions{ margin-left: auto !important; display:flex; align-items:center; gap:12px; }

@media (max-width:900px){
  /* Altura fija de la barra */
  .top--mobile{
    display:flex; align-items:center; /* centra verticalmente todo */
  }

  /* Menú a la izquierda, acciones a la derecha, ambos con la misma altura */
  .top--mobile .menu,
  .top--mobile .actions{
    display:flex; align-items:center; height:var(--topbar-m);
  }
  .top--mobile .menu{ margin-right:auto; }
  .top--mobile .actions{ margin-left:auto; gap:12px; } /* empuja a la derecha */
  
  /* Botones compactos y centrados */
  .icon-btn{ width:40px; height:40px; border-radius:12px; }
}

/* ====== TOPBAR ESTILO ROLEX (móvil) ====== */
@media (max-width: 900px){
  :root{ --topbar-m: 56px; } /* 52–60px si quieres afinar */

  body{ padding-top: var(--topbar-m) !important; }

  /* Barra */
  .top--mobile{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: var(--topbar-m) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* centra el eje para el logo */
    background: #000 !important;       /* pon tu color si no es negro */
    z-index: 10000 !important;
  }

  /* LOGO perfectamente centrado */
  .top--mobile .brand{
    position: absolute !important;
    left: 50% !important; transform: translateX(-50%) !important;
    display:flex; align-items:center; justify-content:center;
    height: 100%;
    pointer-events: auto;
  }
  .top--mobile .brand img{
    display:block; height: 24px; width:auto;
  }

  /* MENÚ a la izquierda */
  .top--mobile .menu{
    position: absolute !important;
    left: 16px; top: 0; height: 100%;
    display:flex; align-items:center; gap: 8px;
  }

  /* ACCIONES a la derecha */
  .top--mobile .actions{
    position: absolute !important;
    right: 16px; top: 0; height: 100%;
    display:flex !important; align-items:center !important; gap: 16px;
    margin: 0 !important;
  }

  /* --- Limpieza de “cartas”/chips/burbujas en los iconos --- */
  .top--mobile .actions a,
  .top--mobile .actions button,
  .top--mobile .menu a,
  .top--mobile .menu button,
  .top--mobile .icon-btn,
  .top--mobile .nav-btn,
  .top--mobile .chip,
  .top--mobile .pill{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important; height: auto !important;
    padding: 8px !important;           /* área táctil, invisible */
    display:flex; align-items:center; justify-content:center;
  }
  /* Si tus iconos son <svg> o <i> */
  .top--mobile svg, 
  .top--mobile i{
    width: 22px; height: 22px; line-height: 1;
  }

  /* Cualquier grupo centrado de iconos que tenías, fuera */
  .top--mobile .center-actions,
  .top--mobile .toolbar-center,
  .top--mobile .icons-center{
    display:none !important;
  }
}

/* style.css */
.nav-toggle { display: none; }              /* base: escondido (PC) */
@media (max-width: 900px) {
  header.top .nav { align-items: center; }  /* centrado vertical, no cambia PC */
  .nav-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: var(--topbar-h, 56px);
    border: 0; background: transparent;
  }
  .nav-toggle .line { width: 22px; height: 2px; background: currentColor; }
  .nav-toggle .line + .line { margin-top: 6px; }
}

/* --- MÓVIL: muestra el contenedor del header y oculta solo el menú de escritorio --- */
@media (max-width: 768px){
  header.top .container.nav{ 
    display: flex !important;            /* vuelve a mostrarse */
    align-items: center !important;
    justify-content: center !important;  /* para centrar el logo */
  }

  /* oculta la navegación de escritorio, no el contenedor */
  header.top .menu,
  header.top .navbar,
  header.top .nav { 
    display: none !important; 
  }

  /* botón hamburguesa minimal a la izquierda, centrado en altura */
  .nav-toggle{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
  }
  .nav-toggle .line{
    display:block; width:16px; height:2px; 
    background:#fff; border-radius:2px;
  }
}
/* === Quitar barra superior en móvil (sin afectar PC) === */
@media (max-width: 900px) {
  /* oculta cualquier topbar que tengas */
  header.top,
  .topbar-mobile,
  .top--mobile {
    display: none !important;
  }

  /* elimina el hueco negro que quedaba por padding */
  :root { --topbar-h: 0px !important; }

  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* por si existe algún spacer específico */
  .topbar-spacer,
  .topbar-placeholder {
    display: none !important;
    height: 0 !important;
  }
}

/* === MÓVIL: quitar la barra/halo inferior del HERO === */
@media (max-width: 900px){
  /* apaga el cap y cualquier hairline asociado */
  .hero::after,
  .hero::before{
    content: none !important;
    background: none !important;
    height: 0 !important;
    animation: none !important;
  }

  /* opcional: overlay más limpio sin oscurecer abajo */
  .hero .overlay{
    background: linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 40%) !important;
  }
}

/* === MÓVIL: eliminar glow/blanco en el borde inferior del HERO === */
@media (max-width: 900px){
  /* apaga cualquier pseudo-elemento del hero */
  .hero::after,
  .hero::before{
    content: none !important;
    background: none !important;
    height: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* quita sombras/efectos del vídeo o contenedores del vídeo */
  .hero video,
  .hero .video,
  .hero .video-wrap{
    box-shadow: none !important;
    filter: none !important;         /* por si hay drop-shadow() */
    border: 0 !important;
    outline: 0 !important;
  }

  /* por si el glow está en un contenedor auxiliar */
  .hero .glow-bottom,
  .hero .edge-fade,
  .hero .fade-bottom,
  .hero .cap,
  .hero .shine,
  .hero .phones::after,
  .hero .phones::before{
    display: none !important;
    content: none !important;
    box-shadow: none !important;
    background: none !important;
    filter: none !important;
  }

  /* evita cualquier “costura” visual al final del hero */
  .hero{ overflow: hidden; background: #0b0b0c; }
  .hero + *{ box-shadow: none !important; border-top: 0 !important; }
}

/* 1) Fuerza capa GPU del video del hero (scroll más fluido) */
.hero video,
.hero-video,
.hero__bg video,
.hero-video-mobile {
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 2) Aísla el hero para evitar repaints/reflows del resto */
.hero {
  contain: layout paint;
}
/* HERO: capa GPU + aislamiento de pintura (PC) */
.hero,
.hero-bg,
.hero-video {
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  filter: none !important;           /* evita repaints caros */
  -webkit-filter: none !important;
}

/* Aísla el hero del resto del layout para que no “arrastra” repaints */
.hero { contain: layout paint size; }

/* Quita efectos costosos en el header cuando pasa sobre el video */
header.top {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}


:root { --header-h: 72px; }

header.top {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(15,15,15,.35);          /* semitransparente */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 50;
}
.hero {
  padding-top: calc(var(--header-h) + 24px); /* evita que lo tape */
}


/* ===== SOLO MÓVIL: mostrar únicamente el video del HERO ===== */
@media (max-width: 900px){

  /* 1) Oculta navegación/headers y todo lo demás */
  header.top,
  .top--mobile,
  nav,
  .menu,
  .actions,
  .container.nav,
  main,
  .section,
  .features,
  .section.features,
  .comprar,
  .section.comprar,
  .faq,
  .section.faq,
  .section--reviews,
  #valoraciones,
  footer,
  footer.section,
  .legalbar {
    display: none !important;
  }

  /* 2) Mantén solo el HERO a pantalla completa */
  .hero {
    display: block !important;
    margin: 0 !important;
    height: 100svh !important;
    overflow: hidden !important;
  }

  /* 3) Nada de overlays ni “caps” encima del video */
  .hero .overlay,
  .hero::before,
  .hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* 4) Quita el padding de la barra superior para que no quede hueco */
  :root { --topbar-h: 0 !important; }
  body { padding-top: 0 !important; margin-top: 0 !important; overflow: hidden; }
}

/* === Topbar estable y ligero === */
:root { --topbar-h: 60px; }           /* altura fija y coherente */

header.top{
  position: fixed;                    /* fija = no empuja el layout */
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: #000;                   /* quita blur costoso */
  z-index: 10000;
  border: 0;
  box-shadow: none;
}

body{ padding-top: var(--topbar-h); } /* reserva el hueco desde el 1er paint */

.nav{ height: var(--topbar-h); }      /* antes tenías 100px; evita saltos */
.brand img{ height: 28px; width:auto; display:block; }  /* tamaño estable */

/* Altura fija y contenedor alineado */



body.page--express .brand__img{ height:26px; width:auto; aspect-ratio:130/26; display:block; }

/* ===== Estructura base del hero móvil ===== */
.hero-video-wrap {
  position: relative;
  width: 100%;
  height: 100svh;             /* pantalla completa en móvil */
  overflow: hidden;
}

.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* importante: puede recortar */
}

/* CTA invisible por defecto */
.cta-overlay {
  position: absolute;
  z-index: 3;
  background: transparent;    /* invisible */
  pointer-events: auto;
  /* Sin outline en producción */
}

/* Solo en móvil mostramos este layout “video + CTA” */
@media (min-width: 901px){
  .hero-video-wrap { display: none; }
}

/* --- Modo calibración (útil en dev): añade .debug al body para ver el área) --- */
body.debug .cta-overlay {
  outline: 2px dashed rgba(0,0,0,.35);
  background: rgba(0,0,0,.05);
}

/* ===== FIX: hero pegado arriba en móvil ===== */
@media (max-width: 900px){
  /* oculta la barra fija y elimina compensaciones globales */
  header.top { display: none !important; }
  :root { --topbar-h: 0 !important; --header-h: 0 !important; }
  body { padding-top: 0 !important; margin-top: 0 !important; }

  /* anula el empuje que baja el hero */
  .hero { padding-top: 0 !important; }

  /* opción extra: si quieres que el vídeo ocupe *toda* la ventana */
  .hero { position: fixed !important; inset: 0 !important; height: 100svh !important; }
  .hero__bg--mobile, .hero__bg { position: absolute !important; inset: 0 !important; }
  .hero-video-mobile { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}

:root{ --hero-edge:#0A0A0A; } /* fallback */
html, body { background: var(--hero-edge); }
.hero, .hero-bg, .hero__bg--mobile { background: var(--hero-edge) !important; }

/* === INDEX — Topbar transparente sobre el video + botones con contorno === */
:root{
  /* Cambia este color si quieres afinar el tono exacto del swatch */
  --topbar-outline: #2E2E2E;      /* contorno de botones (tu gris de referencia) */
  --topbar-h: 72px;               /* alto visual de la barra en desktop */
}

/* La barra va fija y completamente transparente para ver el video detrás */
body.page--home header.top,        /* usa la clase del body de tu index si la tienes */
header.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10000 !important;
}

/* El contenedor ocupa toda la altura y apoya los items abajo (estética limpia) */
header.top .container,
header.top .container.nav,
header.top .wrap{
  height: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 clamp(16px,4vw,48px) !important;
  padding-bottom: 10px !important;  /* pequeña respiración inferior */
}

/* Logo y menú alineados a la línea de base */
header.top .brand,
header.top nav.menu,
header.top .nav{
  display: flex !important;
  align-items: flex-end !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Tamaño de logo compacto y consistente */
header.top .brand img{
  height: 28px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain;
}

/* Enlaces y botones “con caja” a la misma altura */
header.top .menu a,
header.top .nav a,
header.top .menu .btn,
header.top .nav .btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* === Contorno de botones del topbar === */
header.top .btn,
header.top .menu .btn,
header.top .nav .btn{
  background: rgba(255,255,255,0.02) !important;
  color: #fff !important;
  border: 1px solid var(--topbar-outline) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
header.top .btn:hover{
  border-color: #3A3A3A !important;
  background: rgba(255,255,255,0.04) !important;
  transform: translateY(-1px);
}
header.top .btn:active{
  transform: translateY(0);
}

/* Evita que el contenido quede oculto detrás del header fijo (solo si lo necesitas) */
body{ padding-top: var(--topbar-h) !important; }

/* — Hero: que el degradado arranque en transparente para ver el video bajo el topbar — */
.hero .overlay{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.25) 32%,
    rgba(0,0,0,0.55) 72%
  ) !important;
}

:root{ --topbar-h: 72px; } /* si tu header mide otra cosa, cámbialo */

:root { --topbar-h: 72px; } /* alto real de tu header */

body.page--home { padding-top: 0; }

body.page--home .hero{
  position: relative;
  min-height: 100vh;           /* layout normal */
  padding-top: var(--topbar-h);/* separa el copy del header */
  overflow: hidden;
}

/* El vídeo se extiende por encima para cubrir bajo el topbar */
body.page--home .hero video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + var(--topbar-h)); /* alarga el vídeo visualmente */
  transform: translateY(calc(-1 * var(--topbar-h))); /* lo “sube” bajo el header */
  object-fit: cover;
  object-position: center;
}

/* === HOME: vídeo cubriendo también bajo el topbar transparente === */
:root { --topbar-h: 72px; } /* alto real de tu topbar */

/* 1) En home no reservamos hueco global para el header */
body.page--home { padding-top: 0 !important; }

/* 2) El hero empieza por detrás del topbar */
body.page--home .hero{
  position: relative;
  min-height: 100vh;
  /* lo subimos para que empiece en y=0, detrás del header */
  margin-top: calc(-1 * var(--topbar-h));
  /* pero damos aire al contenido para que no quede tapado */
  padding-top: calc(var(--topbar-h) + 24px);
  overflow: hidden;
}

/* 3) El vídeo se extiende por arriba para cubrir la franja del topbar */
body.page--home .hero video,
body.page--home .hero .hero__bg,
body.page--home .hero .hero-video{
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: calc(100% + var(--topbar-h));          /* estira el alto */
  top: calc(-1 * var(--topbar-h));               /* lo sube bajo el header */
  object-fit: cover;
  object-position: center; /* o 'center top' si quieres ver más parte superior */
}

/* 4) Gradiente del hero transparente arriba (opcional, por estética) */
body.page--home .hero .overlay{
  pointer-events: none;
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 35%,
    rgba(0,0,0,.62) 80%
  );
}

/* ===== Vídeo de fondo que cubre TODO, también bajo el topbar ===== */
.video-wallpaper{
  position: fixed;     /* se ancla a la ventana, no al hero */
  inset: 0;            /* top/right/bottom/left = 0 */
  width: 100vw;
  height: 100vh;
  object-fit: cover;   /* recorta para cubrir sin bandas */
  object-position: center; /* o 'center top' si quieres ver más arriba */
  z-index: -1;         /* por detrás de todo el contenido */
  display: block;
}

/* El topbar puede ser transparente; estará por encima del vídeo */
header.top{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: transparent; /* o tu glass si lo prefieres */
  box-shadow: none;
}

/* Asegura legibilidad: overlay suave en el hero (opcional) */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.6) 70%);
  pointer-events:none;
}

/* Evita que algún padding-top global empuje el hero y deje “banda” */
body{ padding-top: 0 !important; }

/* === Nudge arriba el contenido del topbar (index) === */
:root{ --topbar-h:72px; --topbar-nudge:-25px; } /* ajusta -4px a -10px a tu gusto */

/* Centrado vertical y sin padding inferior */
header.top .container,
header.top .wrap{
  height: var(--topbar-h) !important;
  display: flex !important;
  align-items: center !important;     /* antes teníamos flex-end */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Pequeño “empujón” hacia arriba de todo el bloque de navegación */
header.top .brand,
header.top nav,
header.top .nav{
  transform: translateY(var(--topbar-nudge));    /* súbelo/bájalo modificando la var */
}

/* Mantén los botones compactos y centrados en la línea */
header.top .btn,
header.top .menu a,
header.top .nav a{
  height: 32px !important;
  line-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* === Ajuste fino de posición del logo en el topbar === */
:root{
  --topbar-h: 72px;     /* alto de la barra (ajústalo si usas otro) */
  --logo-shift: 333px;    /* cuánto bajar el logo (4–12px suele ir bien) */
}

/* Asegura el layout del topbar */
header.top .wrap,
header.top .container{
  height: var(--topbar-h);
  display: flex;
  align-items: center;   /* centrar base */
}

/* Solo el logo baja un poco, sin tocar los links */
header.top .brand{
  display: flex;
  align-items: center;
}

header.top .brand img{
  height: 28px;         /* tu tamaño actual */
  width: auto;
  display: block;
  transform: translateY(var(--logo-shift));  /* ↓ baja el logo */
}

/* Altura del topbar y alineación */
:root{ --topbar-h: 56px; } /* ajusta 56/60/64 si hace falta */

header.top .wrap,
header.top .container{
  height: var(--topbar-h);
  display: flex;
  align-items: center;     /* centra vertical todo el nav */
  justify-content: space-between;
}

/* LOGO como background, sin <img> */
header.top .brand{
  display: block;
  width: 160px;            /* ancho del logo */
  height: 32px;            /* alto del logo (igual que los botones del nav) */
  background: no-repeat center / contain;
  background-image: url("assets/logo-rayo-express.png");  /* <-- si está en /assets/ */
  /* Si tu archivo está en raíz, usa: background-image: url("logo-rayo-express.png"); */
  text-indent: -9999px;    /* oculta cualquier texto dentro del <a> */
  overflow: hidden;
  white-space: nowrap;
}

/* Botones/enlaces del menú a la misma altura visual que el logo */
header.top .nav a,
header.top nav a,
header.top .btn{
  display: inline-flex;
  align-items: center;
  height: 32px;
  line-height: 32px;
}

/* Evita reglas antiguas que toquen el <img> del logo */
header.top .brand img{ display:none !important; }

/* Baja el logo X px respecto a su posición actual */
header.top .brand{
  position: relative;
  top: 14px;  /* ajusta 2–10px */
}

header.top .brand{
  position: relative;
  left: -30px;   /* valores negativos = hacia la izquierda */
}

:root{ --left-nudge: -6px; } /* cuánto bajar (4–12px) */

header.top nav,
header.top .nav{
  transform: translateY(var(--left-nudge));
}

/* ====== HERO MÓVIL — FONDO IDÉNTICO AL VÍDEO ====== */
@media (max-width: 640px){
  :root{ --page-black: #0B0B0C; }  /* color idéntico al fondo del vídeo */

  html, body{
    background: var(--page-black) !important;
  }

  header.top{
    background: var(--page-black) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  header.top::before,
  header.top::after{ content:none !important; }

  .hero{
    position: relative !important;
    height: 100svh !important;
    margin: 0 !important;
    background: var(--page-black) !important;
    margin-bottom: -1px !important;  /* evita microcorte inferior */
    overflow: hidden !important;
  }

  .hero::before,
  .hero::after{ content: none !important; }

  .hero .overlay{
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(11,11,12,0) 0%,
      rgba(11,11,12,0.18) 28%,
      rgba(11,11,12,0.55) 72%
    ) !important;
  }

  .hero-video,
  .bg-vid{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 100% !important;
    transform: translateZ(0);
    bottom: -0.5px; /* elimina la hairline blanca inferior */
  }

  .section.features,
  .features,
  .section.comprar,
  .comprar{
    background: var(--page-black) !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }
}

/* ====== DESKTOP — Banda previa al footer en NEGRO PURO ====== */
:root{ --page-black: #000000; }

/* 1) Asegura negro puro en todo el bloque final */
.section--reviews,
.section--reviews .container,
.section--reviews::before,
.section--reviews::after,
footer.section,
footer.section.footer,
.legalbar,
.legalbar__in,
.legalbar::before,
.legalbar::after,
body,
html{
  background: var(--page-black) !important;
}

/* 2) Apaga cualquier glow/degradado/overlay que pinte banda */
.section--reviews::before,
.section--reviews::after,
.features::before,
.features::after,
header.top::after{
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 3) Quita sombras/bordes que simulan “corte” */
.section--reviews{
  border-top: 0 !important;
  box-shadow: none !important;
}
.legalbar{
  border-top: 1px solid rgba(255,255,255,.06); /* deja solo la hairline si quieres */
}

/* 4) Neutraliza márgenes que dejan ver un color distinto del body */
.section--reviews + footer.section,
footer.section{
  margin-top: 0 !important;
  padding-top: 16px; /* aire sin crear banda */
}

/* (opcional) si quieres NEGRO 100% también en la hairline: */
.legalbar{ border-top: 0 !important; }
/* — entonces quedará todo negro liso sin línea */

/* ====== HERO MÓVIL iOS — FONDO NEGRO PURO ====== */
@media (max-width: 640px){
  :root { --page-black: #000000; }

  html, body{
    background: var(--page-black) !important;
    color-scheme: dark;
  }

  header.top{
    background: var(--page-black) !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  header.top::before,
  header.top::after{ content:none !important; }

  .hero{
    position: relative !important;
    height: 100svh !important;
    margin: 0 !important;
    background: var(--page-black) !important;
    overflow: hidden !important;
    margin-bottom: -1px !important; /* elimina línea inferior */
  }

  .hero::before,
  .hero::after{ content:none !important; background:none !important; }

  .hero .overlay{
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.18) 28%,
      rgba(0,0,0,0.55) 72%
    ) !important;
  }

  .hero-video,
  .bg-vid{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 100% !important;
    background: var(--page-black) !important;
    bottom: -0.5px; /* corrige microcorte iOS */
    transform: translateZ(0);
  }

  /* Asegura continuidad con la siguiente sección */
  .section.features,
  .section.comprar,
  .features,
  .comprar{
    background: var(--page-black) !important;
    margin-top: 0 !important;
    border-top: none !important;
  }
}

/* === OPTIMIZACIONES ESCRITORIO (PC) === */
@media (min-width: 901px) {

  /* Evitar filtros caros en desktop */
  .top--desktop,
  header.top {
    background: rgba(0,0,0,0.65);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Limitar sombras costosas en bloques grandes */
  .hero, .section, .card, .plan, .grid > * {
    filter: none !important;              /* quita drop-shadow() si lo hubiera */
    box-shadow: 0 6px 24px rgba(0,0,0,.18); /* sombra sencilla (barata) */
  }

  /* Usar GPU solo donde se anima de verdad */
  .hero, .hero-video, .parallax, .btn, .card {
    will-change: auto !important;
    backface-visibility: hidden;
    transform: translateZ(0); /* sólo 1 promocion a capa, sin abusar */
  }

/* ====== PC ONLY — Glow azul bajo el HERO y sin línea de corte ====== */
@media (min-width: 901px){
  /* Asegura mismo color entre el final del hero y la primera sección */
  :root{ --section-bg: #000000; }

  .hero{
    position: relative !important;
    margin-bottom: -1px !important;   /* quita micro-línea por subpíxel */
    background: #000 !important;
    isolation: isolate;               /* separa pseudo-elementos del video */
  }

  /* Mantén el blend oscuro del hero aunque tengas otros ::after previos */
  .hero::after{
    content: "" !important;
    position: absolute !important;
    left: 0; right: 0; bottom: -1px; height: 120px;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--section-bg) 100%);
    pointer-events: none;
    z-index: 1;                       /* debajo del glow */
  }

  /* GLOW AZUL — justo bajo el borde del video */

  /* La primera sección después del hero usa el mismo fondo */
  .features, .section.features,
  .comprar, .section.comprar,
  .faq, .section.faq,
  main .section:first-of-type{
    background: var(--section-bg) !important;
    margin-top: 0 !important;
  }

  /* Importante: neutraliza otros ::after que tengas definidos antes */
  .hero::after,
  .hero::before{
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* Rendimiento desktop */
@media (min-width: 901px){
  header.top{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    will-change: transform;  /* pinta estable en scroll */
  }
  .hero{ contain: layout paint size; } /* aísla el vídeo del resto */
}
/* === FIX duro: junta HERO → Servicios sin capas encima === */
.hero{
  position: relative !important;
  isolation: isolate !important;    /* aísla stacking del hero */
  margin-bottom: -1px !important;   /* quita hairline por subpíxel */
}
.hero::after,
.hero::before{
  content: none !important;         /* elimina el “cap”/fade inferior */
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}
.hero .overlay{                      /* por si hay overlay */
  pointer-events: none !important;
}

.features,
.section.features{
  position: relative !important;
  z-index: 2 !important;            /* por encima de cualquier pseudo del hero */
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  background: #000 !important;      /* mismo color que el final del hero */
}

/* Evita efectos caros en la junta */
header.top::after,
.features::before,
.features::after{
  content: none !important;
  filter: none !important;
  box-shadow: none !important;
}
/* --- HERO → degradado de unión, no toca Servicios --- */
.hero{ position: relative; isolation: isolate; }
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #000);
  pointer-events:none;
}

/* --- Servicios siempre visible (anula cualquier ocultación previa) --- */
.features{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --- Optimización segura (no destruye el layout): aplicar a la grid, no al contenedor --- */
.features .grid{
  content-visibility: auto;           /* aplaza pintura de hijos fuera de viewport */
  contain: layout paint style;        /* evita reflows fuera de la grid */
  contain-intrinsic-size: 700px;      /* altura estimada: ajusta si tu grid es más alta/baja */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* --- (Opcional) Suaviza entrada SOLO de las tarjetas, sin riesgo de ocultar toda la sección --- */
.features .card{
  opacity: 1;                         /* visible por defecto */
  transform: none;
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}
.features.ready .card{
  opacity: 1;
  transform: none;
}
.features.reveal .card{
  opacity: 1;
  transform: none;
}
/* === Anti-lag base: aislar capas y evitar repintados caros === */
.hero, .features {
  position: relative;
  isolation: isolate;                 /* capa propia → no mezcla z-index con otros */
  backface-visibility: hidden;
  transform: translateZ(0);           /* sube a GPU sin forzar animaciones */
}