/* Fondo continuo («espacio infinito»): una sola capa fija detrás de toda la página, sin cortes entre secciones.
   Estrellas en tres profundidades que derivan muy despacio + nebulosas suaves. Todo transform (barato). */

html { background: #070a10; }
body { background: transparent !important; overflow-x: clip; }

html::before {
  content: "";
  position: fixed;
  inset: -8% -8%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(38% 34% at 78% 22%, rgba(123, 104, 255, 0.13), transparent 70%),
    radial-gradient(42% 38% at 12% 70%, rgba(134, 215, 232, 0.075), transparent 72%),
    radial-gradient(50% 40% at 60% 96%, rgba(139, 123, 255, 0.08), transparent 74%),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221300%22 height=%221300%22 viewBox=%220 0 1300 1300%22%3E%3Ccircle cx=%22309%22 cy=%22707%22 r=%221.6%22 fill=%22%23ffffff%22 fill-opacity=%220.74%22/%3E%3Ccircle cx=%22755%22 cy=%22787%22 r=%221.9%22 fill=%22%23c9bcff%22 fill-opacity=%220.65%22/%3E%3Ccircle cx=%22305%22 cy=%221294%22 r=%221.6%22 fill=%22%23ffffff%22 fill-opacity=%220.74%22/%3E%3Ccircle cx=%22831%22 cy=%22196%22 r=%221.7%22 fill=%22%23ffffff%22 fill-opacity=%220.71%22/%3E%3Ccircle cx=%2220%22 cy=%221010%22 r=%221.4%22 fill=%22%23ffffff%22 fill-opacity=%220.57%22/%3E%3Ccircle cx=%221014%22 cy=%221071%22 r=%221.5%22 fill=%22%23ffffff%22 fill-opacity=%220.84%22/%3E%3Ccircle cx=%221142%22 cy=%22928%22 r=%221.9%22 fill=%22%23c9bcff%22 fill-opacity=%220.84%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22900%22 height=%22900%22 viewBox=%220 0 900 900%22%3E%3Ccircle cx=%22860%22 cy=%22853%22 r=%220.9%22 fill=%22%23bfe9ff%22 fill-opacity=%220.54%22/%3E%3Ccircle cx=%22152%22 cy=%22728%22 r=%221.3%22 fill=%22%23e6ddff%22 fill-opacity=%220.64%22/%3E%3Ccircle cx=%22546%22 cy=%22523%22 r=%221.0%22 fill=%22%23e6ddff%22 fill-opacity=%220.66%22/%3E%3Ccircle cx=%22723%22 cy=%22774%22 r=%221.2%22 fill=%22%23e6ddff%22 fill-opacity=%220.62%22/%3E%3Ccircle cx=%22400%22 cy=%22241%22 r=%220.9%22 fill=%22%23bfe9ff%22 fill-opacity=%220.55%22/%3E%3Ccircle cx=%22839%22 cy=%22817%22 r=%221.1%22 fill=%22%23fff%22 fill-opacity=%220.47%22/%3E%3Ccircle cx=%22160%22 cy=%22208%22 r=%221.0%22 fill=%22%23bfe9ff%22 fill-opacity=%220.45%22/%3E%3Ccircle cx=%22459%22 cy=%22899%22 r=%221.2%22 fill=%22%23bfe9ff%22 fill-opacity=%220.80%22/%3E%3Ccircle cx=%22401%22 cy=%22373%22 r=%221.2%22 fill=%22%23e6ddff%22 fill-opacity=%220.72%22/%3E%3Ccircle cx=%22318%22 cy=%22883%22 r=%221.4%22 fill=%22%23bfe9ff%22 fill-opacity=%220.78%22/%3E%3Ccircle cx=%22360%22 cy=%22665%22 r=%221.2%22 fill=%22%23bfe9ff%22 fill-opacity=%220.60%22/%3E%3Ccircle cx=%22832%22 cy=%22451%22 r=%221.3%22 fill=%22%23e6ddff%22 fill-opacity=%220.66%22/%3E%3Ccircle cx=%22409%22 cy=%22813%22 r=%221.1%22 fill=%22%23fff%22 fill-opacity=%220.77%22/%3E%3Ccircle cx=%22651%22 cy=%22438%22 r=%221.0%22 fill=%22%23e6ddff%22 fill-opacity=%220.73%22/%3E%3Ccircle cx=%22752%22 cy=%22789%22 r=%221.2%22 fill=%22%23e6ddff%22 fill-opacity=%220.52%22/%3E%3Ccircle cx=%22862%22 cy=%22636%22 r=%221.2%22 fill=%22%23fff%22 fill-opacity=%220.60%22/%3E%3Ccircle cx=%22554%22 cy=%22366%22 r=%221.3%22 fill=%22%23e6ddff%22 fill-opacity=%220.60%22/%3E%3Ccircle cx=%22841%22 cy=%22561%22 r=%220.9%22 fill=%22%23e6ddff%22 fill-opacity=%220.69%22/%3E%3Ccircle cx=%22817%22 cy=%22172%22 r=%221.3%22 fill=%22%23bfe9ff%22 fill-opacity=%220.63%22/%3E%3Ccircle cx=%2244%22 cy=%22533%22 r=%221.2%22 fill=%22%23bfe9ff%22 fill-opacity=%220.70%22/%3E%3Ccircle cx=%22123%22 cy=%22239%22 r=%221.3%22 fill=%22%23bfe9ff%22 fill-opacity=%220.57%22/%3E%3Ccircle cx=%22645%22 cy=%2229%22 r=%221.1%22 fill=%22%23bfe9ff%22 fill-opacity=%220.50%22/%3E%3Ccircle cx=%2221%22 cy=%22104%22 r=%220.9%22 fill=%22%23bfe9ff%22 fill-opacity=%220.69%22/%3E%3Ccircle cx=%2219%22 cy=%22230%22 r=%221.3%22 fill=%22%23bfe9ff%22 fill-opacity=%220.69%22/%3E%3Ccircle cx=%22471%22 cy=%222%22 r=%221.2%22 fill=%22%23bfe9ff%22 fill-opacity=%220.46%22/%3E%3Ccircle cx=%2233%22 cy=%22310%22 r=%221.2%22 fill=%22%23fff%22 fill-opacity=%220.70%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22640%22 height=%22640%22 viewBox=%220 0 640 640%22%3E%3Ccircle cx=%2286%22 cy=%22542%22 r=%220.8%22 fill=%22%23ffffff%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%22487%22 cy=%22302%22 r=%220.7%22 fill=%22%23cfe8ff%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%2218%22 cy=%22535%22 r=%220.7%22 fill=%22%23cfe8ff%22 fill-opacity=%220.49%22/%3E%3Ccircle cx=%22170%22 cy=%22513%22 r=%220.7%22 fill=%22%23cfe8ff%22 fill-opacity=%220.57%22/%3E%3Ccircle cx=%2220%22 cy=%2216%22 r=%220.7%22 fill=%22%23ffffff%22 fill-opacity=%220.49%22/%3E%3Ccircle cx=%22620%22 cy=%22465%22 r=%220.7%22 fill=%22%23ffffff%22 fill-opacity=%220.58%22/%3E%3Ccircle cx=%22354%22 cy=%22221%22 r=%220.8%22 fill=%22%23ffffff%22 fill-opacity=%220.58%22/%3E%3Ccircle cx=%22593%22 cy=%22266%22 r=%220.9%22 fill=%22%23d9d2ff%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%22403%22 cy=%22463%22 r=%220.6%22 fill=%22%23d9d2ff%22 fill-opacity=%220.37%22/%3E%3Ccircle cx=%22462%22 cy=%22455%22 r=%220.9%22 fill=%22%23ffffff%22 fill-opacity=%220.43%22/%3E%3Ccircle cx=%22583%22 cy=%22122%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Ccircle cx=%22323%22 cy=%22377%22 r=%220.5%22 fill=%22%23cfe8ff%22 fill-opacity=%220.51%22/%3E%3Ccircle cx=%22259%22 cy=%22425%22 r=%220.6%22 fill=%22%23d9d2ff%22 fill-opacity=%220.52%22/%3E%3Ccircle cx=%22472%22 cy=%2255%22 r=%220.8%22 fill=%22%23cfe8ff%22 fill-opacity=%220.52%22/%3E%3Ccircle cx=%22333%22 cy=%22252%22 r=%220.7%22 fill=%22%23cfe8ff%22 fill-opacity=%220.41%22/%3E%3Ccircle cx=%22197%22 cy=%22543%22 r=%220.7%22 fill=%22%23d9d2ff%22 fill-opacity=%220.39%22/%3E%3Ccircle cx=%22109%22 cy=%22321%22 r=%220.9%22 fill=%22%23cfe8ff%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22551%22 cy=%22149%22 r=%220.7%22 fill=%22%23d9d2ff%22 fill-opacity=%220.37%22/%3E%3Ccircle cx=%22582%22 cy=%22422%22 r=%220.7%22 fill=%22%23d9d2ff%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%22502%22 cy=%22525%22 r=%220.9%22 fill=%22%23d9d2ff%22 fill-opacity=%220.43%22/%3E%3Ccircle cx=%2283%22 cy=%22498%22 r=%220.6%22 fill=%22%23cfe8ff%22 fill-opacity=%220.42%22/%3E%3Ccircle cx=%22233%22 cy=%22355%22 r=%220.9%22 fill=%22%23ffffff%22 fill-opacity=%220.42%22/%3E%3Ccircle cx=%22228%22 cy=%22221%22 r=%220.7%22 fill=%22%23d9d2ff%22 fill-opacity=%220.53%22/%3E%3Ccircle cx=%22212%22 cy=%22384%22 r=%220.8%22 fill=%22%23d9d2ff%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22374%22 cy=%22551%22 r=%220.8%22 fill=%22%23ffffff%22 fill-opacity=%220.26%22/%3E%3Ccircle cx=%22604%22 cy=%2245%22 r=%220.8%22 fill=%22%23ffffff%22 fill-opacity=%220.26%22/%3E%3Ccircle cx=%22484%22 cy=%22160%22 r=%220.5%22 fill=%22%23d9d2ff%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22186%22 cy=%22107%22 r=%220.6%22 fill=%22%23cfe8ff%22 fill-opacity=%220.48%22/%3E%3Ccircle cx=%22415%22 cy=%22188%22 r=%220.8%22 fill=%22%23ffffff%22 fill-opacity=%220.42%22/%3E%3Ccircle cx=%2215%22 cy=%22247%22 r=%220.7%22 fill=%22%23cfe8ff%22 fill-opacity=%220.34%22/%3E%3Ccircle cx=%22162%22 cy=%22467%22 r=%220.9%22 fill=%22%23d9d2ff%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%22624%22 cy=%22144%22 r=%220.7%22 fill=%22%23cfe8ff%22 fill-opacity=%220.50%22/%3E%3Ccircle cx=%22103%22 cy=%22451%22 r=%220.8%22 fill=%22%23d9d2ff%22 fill-opacity=%220.54%22/%3E%3Ccircle cx=%22625%22 cy=%22404%22 r=%220.8%22 fill=%22%23ffffff%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%22415%22 cy=%22253%22 r=%220.7%22 fill=%22%23ffffff%22 fill-opacity=%220.48%22/%3E%3Ccircle cx=%22273%22 cy=%22472%22 r=%220.6%22 fill=%22%23cfe8ff%22 fill-opacity=%220.56%22/%3E%3Ccircle cx=%22196%22 cy=%22549%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.51%22/%3E%3Ccircle cx=%22266%22 cy=%22162%22 r=%220.5%22 fill=%22%23cfe8ff%22 fill-opacity=%220.46%22/%3E%3Ccircle cx=%22139%22 cy=%22577%22 r=%220.7%22 fill=%22%23d9d2ff%22 fill-opacity=%220.47%22/%3E%3Ccircle cx=%2224%22 cy=%22128%22 r=%220.5%22 fill=%22%23d9d2ff%22 fill-opacity=%220.49%22/%3E%3Ccircle cx=%22277%22 cy=%22124%22 r=%220.5%22 fill=%22%23d9d2ff%22 fill-opacity=%220.39%22/%3E%3Ccircle cx=%22323%22 cy=%2211%22 r=%220.7%22 fill=%22%23ffffff%22 fill-opacity=%220.56%22/%3E%3Ccircle cx=%2212%22 cy=%22129%22 r=%220.6%22 fill=%22%23d9d2ff%22 fill-opacity=%220.52%22/%3E%3Ccircle cx=%22217%22 cy=%22136%22 r=%220.8%22 fill=%22%23ffffff%22 fill-opacity=%220.58%22/%3E%3Ccircle cx=%22220%22 cy=%22565%22 r=%220.8%22 fill=%22%23ffffff%22 fill-opacity=%220.52%22/%3E%3Ccircle cx=%22341%22 cy=%2242%22 r=%220.5%22 fill=%22%23cfe8ff%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22583%22 cy=%22136%22 r=%220.8%22 fill=%22%23d9d2ff%22 fill-opacity=%220.43%22/%3E%3Ccircle cx=%22163%22 cy=%22217%22 r=%220.5%22 fill=%22%23cfe8ff%22 fill-opacity=%220.55%22/%3E%3Ccircle cx=%22387%22 cy=%22611%22 r=%220.9%22 fill=%22%23cfe8ff%22 fill-opacity=%220.45%22/%3E%3Ccircle cx=%22493%22 cy=%22205%22 r=%220.7%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Ccircle cx=%22504%22 cy=%22530%22 r=%220.6%22 fill=%22%23d9d2ff%22 fill-opacity=%220.46%22/%3E%3Ccircle cx=%22593%22 cy=%2249%22 r=%220.7%22 fill=%22%23d9d2ff%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22171%22 cy=%22570%22 r=%220.7%22 fill=%22%23cfe8ff%22 fill-opacity=%220.41%22/%3E%3Ccircle cx=%22177%22 cy=%22504%22 r=%220.8%22 fill=%22%23cfe8ff%22 fill-opacity=%220.46%22/%3E%3Ccircle cx=%229%22 cy=%22265%22 r=%220.8%22 fill=%22%23cfe8ff%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%22503%22 cy=%22376%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22155%22 cy=%22476%22 r=%220.5%22 fill=%22%23ffffff%22 fill-opacity=%220.53%22/%3E%3Ccircle cx=%22347%22 cy=%22524%22 r=%220.7%22 fill=%22%23d9d2ff%22 fill-opacity=%220.42%22/%3E%3Ccircle cx=%2264%22 cy=%22417%22 r=%220.5%22 fill=%22%23cfe8ff%22 fill-opacity=%220.53%22/%3E%3Ccircle cx=%22592%22 cy=%22465%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.36%22/%3E%3Ccircle cx=%2240%22 cy=%22585%22 r=%220.9%22 fill=%22%23ffffff%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%22138%22 cy=%22395%22 r=%220.9%22 fill=%22%23d9d2ff%22 fill-opacity=%220.55%22/%3E%3Ccircle cx=%22300%22 cy=%22228%22 r=%220.6%22 fill=%22%23cfe8ff%22 fill-opacity=%220.36%22/%3E%3Ccircle cx=%22158%22 cy=%2252%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22368%22 cy=%22217%22 r=%220.6%22 fill=%22%23ffffff%22 fill-opacity=%220.26%22/%3E%3Ccircle cx=%22120%22 cy=%22507%22 r=%220.7%22 fill=%22%23ffffff%22 fill-opacity=%220.34%22/%3E%3Ccircle cx=%2265%22 cy=%22391%22 r=%220.8%22 fill=%22%23cfe8ff%22 fill-opacity=%220.34%22/%3E%3Ccircle cx=%2213%22 cy=%22156%22 r=%220.5%22 fill=%22%23d9d2ff%22 fill-opacity=%220.55%22/%3E%3Ccircle cx=%22467%22 cy=%2214%22 r=%220.5%22 fill=%22%23ffffff%22 fill-opacity=%220.42%22/%3E%3Ccircle cx=%22552%22 cy=%2299%22 r=%220.7%22 fill=%22%23ffffff%22 fill-opacity=%220.28%22/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 1300px 1300px, 900px 900px, 640px 640px;
  animation: tvSpaceDrift 420s linear infinite;
  will-change: transform;
}

@keyframes tvSpaceDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-3%, -2%, 0); }
}

/* nada recorta ni corta el fondo en los bordes de las secciones */
.hero,
.section,
main > section { overflow: visible !important; background: transparent !important; background-image: none; }

main > section::before { border-top-color: transparent !important; }

.site-footer { background: transparent !important; border-top: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; }
}

/* CTA: el cristal translúcido de los botones de la Home en todas las páginas */
.site-shell .button,
.site-shell .button.dark {
  min-height: 52px;
  padding: 14px 23px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.024) 56%, rgba(134, 215, 232, 0.055)),
    rgba(9, 12, 18, 0.44);
  color: rgba(244, 247, 252, 0.9);
  font-weight: 700;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.18);
}

.site-shell .button::before {
  content: "";
  position: absolute;
  inset: 1px 14% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  opacity: 0.52;
  pointer-events: none;
}

.site-shell .button:hover,
.site-shell .button.dark:hover {
  transform: translateY(-2px);
  border-color: rgba(166, 225, 237, 0.35);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 56%, rgba(134, 215, 232, 0.09)),
    rgba(9, 12, 18, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(134, 215, 232, 0.08),
    0 15px 38px rgba(0, 0, 0, 0.23),
    0 0 24px rgba(134, 215, 232, 0.07);
}

.site-shell .button.primary {
  border-color: rgba(177, 226, 238, 0.3);
  background:
    linear-gradient(120deg, rgba(158, 229, 240, 0.19), rgba(142, 126, 255, 0.15) 62%, rgba(255, 255, 255, 0.06)),
    rgba(12, 15, 23, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 14px 42px rgba(0, 0, 0, 0.25),
    0 0 34px rgba(134, 215, 232, 0.1);
}

.site-shell .button.primary:hover {
  border-color: rgba(180, 233, 243, 0.5);
  background:
    linear-gradient(120deg, rgba(158, 229, 240, 0.26), rgba(142, 126, 255, 0.2) 62%, rgba(255, 255, 255, 0.08)),
    rgba(12, 15, 23, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(134, 215, 232, 0.1),
    0 18px 48px rgba(0, 0, 0, 0.29),
    0 0 38px rgba(134, 215, 232, 0.14);
}

.site-shell .button:focus-visible {
  outline: 2px solid rgba(134, 215, 232, 0.72);
  outline-offset: 5px;
}

/* Home: titulares un 30 % más grandes, algo más de aire entre letras, menos hueco hasta los botones; todo en una sola vista */
.home-hero-centered { --hs: clamp(88px, min(10.7vw, 19vh), 164px); }

.home-hero-centered .hero-centered-inner {
  row-gap: clamp(18px, 3vh, 32px);
  padding: 24px 0 26px;
}

.home-hero-centered .hero-title {
  font-size: var(--hs);
  letter-spacing: -0.012em;
}

.home-hero-centered .hero-message { min-height: calc(var(--hs) * 1.72 + 112px); }

.home-hero-centered .hero-tagline { margin-top: clamp(12px, 1.8vh, 18px); }

.home-hero-centered .hero-actions { margin-top: clamp(12px, 2vh, 22px); }

@media (max-width: 980px) {
  .home-hero-centered { --hs: clamp(80px, 14.3vw, 130px); }
}

@media (max-width: 640px) {
  .home-hero-centered { --hs: clamp(48px, 16vw, 74px); }
  .home-hero-centered .hero-title { letter-spacing: -0.02em; }
  .home-hero-centered .hero-message { min-height: calc(var(--hs) * 1.72 + 100px); }
  .home-hero-centered .hero-actions { margin-top: 14px; }
}

/* Escritorio: el menú acompaña siempre. «overflow: hidden» en el contenedor anulaba el sticky; «clip» recorta igual
   pero no crea un contenedor de scroll, así que el menú vuelve a quedarse arriba. */
@media (min-width: 981px) {
  .site-shell { overflow: clip; }
}

/* Móvil y tablet: poco aire entre el menú y el primer título en todas las páginas (la portada se centra sola) */
@media (max-width: 980px) {
  main > section.hero:not(.home-hero-centered) { padding-top: 12px; }
}

/* Móvil · tarjetas de servicios/planes: el botón no se pega al texto y el contenido respira */
@media (max-width: 700px) {
  .plan-card { padding: 26px 24px 28px; }
  .plan-card > .price-label + h3, .plan-card > h3 { margin-bottom: 4px; }
  .plan-card .price { margin-top: 20px; }
  .plan-card > p:not(.price) { margin-top: 14px; line-height: 1.7; }
  .plan-card > p:not(.price), .plan-card > ul { margin-bottom: 26px; }
  .plan-card > .button { margin-top: auto; min-height: 50px; }
  .plan-grid { gap: 18px; }
}
