/* ===== Serás Tú — landing cinematográfica (página 22) ===== */

body.page-id-22 { background: #08050c; overflow-x: hidden; }
html { overflow-x: hidden; }

/* --- El wrapper de Elementor debe ser transparente para que la imagen fija se vea --- */
.page-id-22 .elementor,
.page-id-22 .elementor-section-wrap {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* ================= IMAGEN DE FONDO FIJA (toda la página) =================
   Reemplaza el video de fondo (roto: apuntaba al dominio punycode viejo,
   descontinuado tras la migración a serastu.com — ver landing.js). */
#st-bg-image {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  /* Celular: cover + object-position:top — llena toda la pantalla, el recorte sobrante se va
     abajo, el logo (pegado arriba en la imagen vertical) nunca se corta. Confirmado que así se ve
     bien. */
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  /* Escritorio (2026-08-29): parapc.png viene recortada exacto a 1920x1080 (16:9), casi
     idéntica a la relación de la mayoría de monitores — cover llena la pantalla completa sin
     las barras oscuras laterales que hacía falta rellenar con la imagen vieja (1536x1024). */
  #st-bg-image {
    object-fit: cover;
    object-position: center top;
    background: #08050c;
  }
}
/* Más protagonismo a la imagen: menos velo oscuro encima y colores más vivos (antes .62/.38/.5/.72
   apagaba demasiado la foto real; el contraste para el texto se mantiene igual de legible porque
   la franja de abajo, donde vive el texto de las secciones, sigue igual de oscura). */
#st-bg-image {
  filter: saturate(1.22) contrast(1.06) brightness(1.04);
  animation: st-bg-live 26s ease-in-out infinite alternate;
  will-change: transform;
}
#st-bg-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,5,12,.4) 0%, rgba(8,5,12,.14) 28%, rgba(8,5,12,.26) 60%, rgba(8,5,12,.72) 100%);
}
@keyframes st-bg-live {
  0% { transform: scale(1); }
  100% { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  #st-bg-image { animation: none; }
}

/* ================= HERO (rediseño 2026-08-29): la foto ya no trae texto horneado, así
   que el título/subtítulo reales de Elementor (antes ocultos) vuelven a mostrarse — ver
   .st-hero-title/.st-hero-subtitle y los pills/teaser inyectados por landing.js más abajo.
   ENTRAR + "Instalar app" viven juntos en #st-cta-row (armada por landing.js como hijo
   directo de la sección del hero — no de .elementor-element-g4cmyuvp, que es un
   ".st-fade-zone" al que landing.js le aplica un transform inline al hacer scroll; eso
   crea un containing block propio que rompería un position:absolute/fixed puesto ahí
   adentro), y ahora fluye en el propio flex-column del hero en vez de anclarse a un punto
   fijo de la imagen (esa imagen ya no trae texto horneado que seguir). */
/* Fila ENTRAR + Instalar app. Antes se sacaba del flujo (position:absolute/fixed) para
   anclarse junto al texto "CONECTATE A SERASTU.COM" horneado en la imagen vieja. Esa imagen
   ya no existe (rediseño 2026-08-29, foto limpia) así que ahora fluye directo debajo del
   bloque de texto del hero, como un hijo más del flex-column de la sección. */
#st-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

/* ================= Instalar app (PWA) =================
   Desde el 2026-08-30 usa la misma "tarjeta de vidrio" que la promo de membresías (clase
   .st-hero-card, añadida en landing.js) en vez de su propio pill — a pedido: misma forma para
   los dos botones. Conserva su propio efecto (el barrido de luz ::before/::after) encima de esa
   forma compartida. Es un <button> nativo, no un widget de Elementor, así que no tiene el
   .elementor-button-content-wrapper para apilar el texto por encima — en su lugar los pseudo-
   elementos van en z-index:0 (por debajo del contenido) dentro de un contexto de stacking
   aislado (isolation:isolate), que logra lo mismo sin necesitar ese wrapper. */
#st-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#st-install-btn::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -25%;
  width: 45%;
  height: 240%;
  background: linear-gradient(100deg, transparent, rgba(255,224,150,.8) 45%, rgba(255,255,255,.16) 58%, transparent);
  transform: translateX(-160%) rotate(18deg);
  pointer-events: none;
  z-index: 0;
  animation: st-sun-sweep 5.5s cubic-bezier(.4,0,.2,1) infinite;
}
#st-install-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.25) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  z-index: 0;
  pointer-events: none;
}
#st-install-btn:hover::after { transform: translateX(120%); }
#st-install-btn:active { transform: translateY(-1px) scale(1.005); }
.st-install-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
}
.st-install-label {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  position: relative;
  z-index: 1;
}
#st-install-ios {
  margin: 0;
  max-width: 230px;
  text-align: left;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: .72rem;
  line-height: 1.4;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 16px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 767px) {
  /* El tamaño de #st-install-btn en celular se define más abajo, junto con el de ENTRAR,
     para que la pareja de botones de #st-cta-row quede a juego. */
  #st-install-ios { font-size: .68rem; max-width: 200px; }
}


/* ================= HERO ================= */
.elementor-element-9lsfv1u3 {
  position: relative;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .elementor-element-9lsfv1u3 { justify-content: center; padding-bottom: 0; }
}
/* Rayo de sol amplio que cruza toda la escena del hero cada 9s — por encima de la imagen/velo
   (z-index:1) pero por debajo del texto y los botones (z-index:2+), así que se siente como luz
   real pasando sobre la escena. mix-blend-mode:screen solo aclara, nunca ensucia los colores de
   abajo. */
.elementor-element-9lsfv1u3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,214,140,.16) 48%, rgba(255,236,205,.24) 50%, rgba(255,214,140,.16) 52%, transparent 60%);
  background-size: 320% 320%;
  mix-blend-mode: screen;
  animation: st-hero-sun-sweep 9s ease-in-out infinite;
}
@keyframes st-hero-sun-sweep {
  0%   { background-position: 130% 0%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { background-position: -30% 0%; opacity: 1; }
  56%  { opacity: 0; background-position: -30% 0%; }
  100% { opacity: 0; background-position: 130% 0%; }
}
.elementor-element-g4cmyuvp {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  text-align: left;
  gap: 18px;
  padding: 0 24px 0 7vw;
  max-width: 620px;
  margin: 0;
}

/* ================= Teaser del hero (rediseño 2026-08-29) =================
   Armado por landing.js (no hay widget de Elementor para esto) porque la foto nueva no trae
   más contenido horneado que el logo/título/subtítulo de antes. Los 3 "pills"
   (Conecta/Chatea/Conoce) que vivían acá se quitaron el 2026-08-30 — el nuevo CTA sólido +
   la promo de membresías (ver más abajo) ya cargan todo el peso visual del hero. */
#st-hero-teaser {
  margin: 4px 0 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}
#st-hero-teaser em {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-style: italic;
  background: linear-gradient(100deg, #ffd6e6, #ff5fa6 30%, #c05bff 60%, #ffd6e6 90%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: st-shimmer 7s ease-in-out infinite;
}
@media (max-width: 767px) {
  #st-hero-teaser { font-size: .95rem; }
}

/* ================= Forma compartida: tarjeta de vidrio oscura (2026-08-30) =================
   Misma forma para la promo de membresías y el botón Instalar app (a pedido: "el boton de
   instalar tenga la misma forma... pero conserva el efecto para los dos botones") — cada uno
   agrega su propio efecto encima (ver #st-hero-promo .st-promo-icon con float, e
   #st-install-btn con su barrido de luz ::before/::after ya existente). */
.st-hero-card {
  padding: 14px 20px;
  background: rgba(20,10,28,.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.st-hero-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,95,166,.4);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 24px rgba(255,95,166,.2), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ================= CTA principal del hero: promo "membresías gratis" (2026-08-30) =================
   Reemplaza al botón sólido "Descubrir Serastu" (ahora oculto, ver
   .elementor-element-d6116bb más abajo) como el CTA real del hero — antes era un badge
   flotante sobre la foto, ahora vive en el flujo normal dentro de #st-cta-row, junto al botón
   Instalar app (mismo lenguaje visual "tarjeta de vidrio oscura" para ambos — ver
   .st-hero-card — cada uno con su propio efecto: este tiene el ícono flotando, Instalar
   conserva su barrido de luz). Enlaza a /signup?promo=plus30, que el backend reconoce y
   otorga Plus gratis 30 días automáticamente al registrarse (ver seras-tu-app
   server/src/routes/auth.ts + client/src/pages/AuthPage.tsx). */
#st-hero-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  cursor: pointer;
  text-decoration: none;
}
.st-promo-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 50px;
  animation: st-float 4.5s ease-in-out infinite;
}
.st-promo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.st-promo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.32;
}
.st-promo-text strong {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: #fff;
}
.st-promo-text span {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: .78rem;
  color: rgba(255,255,255,.62);
}
.st-promo-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: rgba(255,255,255,.55);
  font-size: 1.2rem;
  transition: transform .35s ease;
}
#st-hero-promo:hover .st-promo-arrow { transform: translateX(4px); color: #fff; }
@media (max-width: 767px) {
  #st-hero-promo { max-width: 100%; padding: 12px 16px; }
}

.st-hero-logo { margin-bottom: 4px; }
.st-hero-logo img,
.elementor-element-a5c8231 {
  filter: drop-shadow(0 0 0 transparent);
}
.elementor-element-a5c8231::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,95,166,.55) 0%, rgba(192,91,255,.32) 45%, transparent 72%);
  filter: blur(14px);
  z-index: -1;
  animation: st-glow-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
.st-hero-logo-video {
  display: block !important;
  width: 170px !important;
  height: 170px !important;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.3));
  animation: st-float 6.5s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(circle, #000 34%, transparent 62%);
  mask-image: radial-gradient(circle, #000 34%, transparent 62%);
}
@keyframes st-glow-pulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.08); }
}

.st-hero-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(2.15rem, 5.4vw, 3.9rem);
  line-height: 1.12;
  color: #ffffff;
  margin: 0;
  text-wrap: balance;
}
.st-hero-title em,
.st-section-title em,
.st-final-title em,
.st-trust-eyebrow em {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  background: linear-gradient(100deg, #ffd6e6, #ff5fa6 30%, #c05bff 60%, #ffd6e6 90%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: st-shimmer 7s ease-in-out infinite;
}

.st-hero-subtitle {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  max-width: 48ch;
  margin: 2px 0 6px;
}

/* ================= Marca "Serastu" con acento (2026-08-30) =================
   Envolver la palabra en <span class="st-brand"> le da el mismo tratamiento elegante que ya
   usan .st-hero-title em / #st-hero-teaser em (serif itálica + degradado animado) — un efecto
   llamativo consistente en vez de un cambio de tipografía general del sitio. */
.st-brand {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-style: italic;
  background: linear-gradient(100deg, #ffd6e6, #ff5fa6 30%, #c05bff 60%, #ffd6e6 90%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: st-shimmer 7s ease-in-out infinite;
}

/* ================= CTA (compartido) — vidrio esmerilado con reflejo de luz =================
   Antes era un pill sólido en gradiente neón (rosa→violeta) a todo color: muy "casino". Ahora es
   vidrio translúcido con un tinte suave rosa/violeta + una franja de brillo diagonal fija (el
   "reflejo de sol en el vidrio") — mismo espíritu de color, más sobrio. */
.st-cta { margin-top: 6px; }
.st-cta .elementor-button,
.st-cta a.elementor-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255,110,180,.16), rgba(160,80,255,.1)) !important;
  backdrop-filter: blur(9px) saturate(160%);
  -webkit-backdrop-filter: blur(9px) saturate(160%);
  color: #fff !important;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
  padding: 18px 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), background .4s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.st-cta .elementor-button .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
}
/* Reflejo animado, siempre visible — la franja de "sol en el vidrio" ahora se desplaza sola,
   cada 5.5s, en dorado cálido (mismo motivo del destello del logo, ver st-sun-glint). */
.st-cta .elementor-button::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -25%;
  width: 45%;
  height: 240%;
  background: linear-gradient(100deg, transparent, rgba(255,224,150,.8) 45%, rgba(255,255,255,.16) 58%, transparent);
  transform: translateX(-160%) rotate(18deg);
  pointer-events: none;
  z-index: 0;
  animation: st-sun-sweep 5.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes st-sun-sweep {
  0%   { transform: translateX(-160%) rotate(18deg); }
  35%  { transform: translateX(340%) rotate(18deg); }
  100% { transform: translateX(340%) rotate(18deg); }
}
/* Barrido extra, solo al pasar el mouse. */
.st-cta .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  z-index: 0;
  pointer-events: none;
}
.st-cta .elementor-button:hover {
  transform: translateY(-3px) scale(1.03);
  background: linear-gradient(135deg, rgba(255,110,180,.28), rgba(160,80,255,.2)) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.35), 0 0 30px rgba(255,95,166,.3), inset 0 1px 0 rgba(255,255,255,.45);
  color: #fff !important;
}
.st-cta .elementor-button:hover::after { transform: translateX(120%); }
.st-cta .elementor-button:active { transform: translateY(-1px) scale(1.01); }
.st-cta .elementor-button:focus-visible {
  outline: 2px solid #ffd6e6;
  outline-offset: 4px;
}

/* ================= SECCIÓN 2 — emocional ================= */
.elementor-element-qcxju1k {
  position: relative;
  padding: 15vh 24px !important;
  overflow: hidden;
  text-align: center;
}
.elementor-element-qcxju1k::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(48% 60% at 50% 45%, rgba(255,95,166,.16) 0%, rgba(8,5,12,0) 70%);
  pointer-events: none;
}
.elementor-element-qcxju1k > .e-con-inner,
.elementor-element-qcxju1k {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
}
.elementor-element-qcxju1k .st-section-title,
.elementor-element-qcxju1k .st-section-text,
.elementor-element-qcxju1k .st-cta { position: relative; z-index: 1; }

.st-section-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(1.85rem, 4.2vw, 2.9rem);
  line-height: 1.15;
  color: #fff;
  max-width: 18ch;
  margin: 0 auto;
}
.st-section-text {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,.75);
  max-width: 46ch;
  margin: 18px auto 28px;
}

/* ================= SECCIÓN 3 — confianza (asimétrica) ================= */
.elementor-element-r2xdnbx {
  padding: 11vh 24px !important;
}
.elementor-element-r2xdnbx,
.elementor-element-r2xdnbx > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.elementor-element-r2xdnbx .e-con-inner {
  max-width: 620px;
  margin-left: 8%;
  margin-right: auto;
}
.st-trust-eyebrow {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  color: #fff;
  text-align: left;
  margin: 0 0 14px;
}
.st-trust-text {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: .98rem;
  line-height: 1.7;
  color: rgba(255,255,255,.62);
  text-align: left;
  max-width: 58ch;
  margin: 0;
}

/* ================= SECCIÓN 4 — cierre ================= */
.elementor-element-dxsnbjdt {
  position: relative;
  padding: 17vh 24px !important;
  overflow: hidden;
  text-align: center;
}
.elementor-element-dxsnbjdt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(55% 65% at 50% 60%, rgba(192,91,255,.18) 0%, rgba(8,5,12,0) 72%);
  pointer-events: none;
}
.elementor-element-dxsnbjdt,
.elementor-element-dxsnbjdt > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
}
.elementor-element-dxsnbjdt .st-final-title,
.elementor-element-dxsnbjdt .st-final-text,
.elementor-element-dxsnbjdt .st-cta,
.elementor-element-dxsnbjdt .st-final-footnote { position: relative; z-index: 1; }

.st-final-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.12;
  color: #fff;
  max-width: 16ch;
  margin: 0 auto;
}
.st-final-text {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  max-width: 42ch;
  margin: 16px auto 30px;
}
.st-final-footnote {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: .85rem;
  color: rgba(255,255,255,.45);
  margin: 18px 0 0;
}

/* ================= FOOTER ================= */
.elementor-element-hkl7cky { position: relative; text-align: center; padding: 56px 24px 40px !important; }
.st-footer-logo img {
  width: 108px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(255,95,166,.35));
  animation: st-float 7.5s ease-in-out infinite;
  margin: 0 auto 14px;
}
.st-footer-brand {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: .03em;
  color: #fff;
  margin: 0 0 8px;
}
.st-footer-text {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(255,255,255,.6);
  max-width: 48ch;
  margin: 0 auto;
}
.elementor-element-hkl7cky .elementor-button {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.72) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: .88rem !important;
  box-shadow: none !important;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.elementor-element-hkl7cky .elementor-button:hover {
  border-color: rgba(255,95,166,.55) !important;
  color: #fff !important;
  background: rgba(255,95,166,.08) !important;
}

/* ================= Scroll reveal ================= */
.st-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
}
.st-reveal.st-in { opacity: 1; transform: translateY(0); }

@keyframes st-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes st-shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

@keyframes st-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.st-hero-load { animation: st-fade-up .9s cubic-bezier(.22,1,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .st-hero-logo img, .st-hero-logo-video, .st-footer-logo img { animation: none; }
  .st-reveal { opacity: 1; transform: none; transition: none; }
  .st-hero-load { animation: none; }
  .st-cta .elementor-button { transition: none; }
  .st-hero-title em, .st-section-title em, .st-final-title em, .st-trust-eyebrow em { animation: none; }
  .elementor-element-a5c8231::before { animation: none; opacity: .7; }
  .elementor-element-9lsfv1u3::before { animation: none; opacity: 0; }
  .st-cta .elementor-button::before, #st-install-btn::before { animation: none; transform: translateX(60%) rotate(18deg); }
}

/* ================= Mobile ================= */
@media (max-width: 767px) {
  /* Con el título/subtítulo/pills/teaser reales visibles (rediseño 2026-08-29) hay bastante
     más contenido que antes (cuando el hero solo mostraba el botón ENTRAR) — se centra el
     bloque completo en una porción generosa de la pantalla en vez de empujarlo al fondo. */
  .elementor-element-9lsfv1u3 {
    min-height: 92dvh !important;
    padding: 84px 0 48px !important;
    justify-content: center !important;
  }
  .elementor-element-g4cmyuvp { padding: 0 20px; gap: 14px; max-width: 100%; }
  .st-hero-subtitle { font-size: 1rem; }
  .st-cta .elementor-button,
  .st-cta a.elementor-button-link {
    width: 100%;
    max-width: 360px;
    padding: 18px 28px !important;
  }
  .elementor-element-qcxju1k,
  .elementor-element-dxsnbjdt { padding: 6vh 20px !important; }
  .elementor-element-r2xdnbx { padding: 5vh 20px !important; }
  .elementor-element-r2xdnbx .e-con-inner { margin-left: 0; max-width: 100%; }
  .st-section-text { margin: 14px auto 22px; }
  .st-final-text { margin: 12px auto 24px; }
  .elementor-element-hkl7cky { padding: 40px 20px 30px !important; }
}


/* ================= Logo del hero — reposicionado a la derecha ================= */
.elementor-element-a5c8231 {
  position: absolute !important;
  top: 9%;
  right: 7%;
  left: auto !important;
  z-index: 3;
  width: auto !important;
}
@media (max-width: 767px) {
  .elementor-element-a5c8231 {
    top: 4%;
    right: 4%;
  }
  .st-hero-logo-video { width: 100px; height: 100px; }
}

/* ================= Desvanecimiento continuo al hacer scroll ================= */
.st-fade-zone {
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .st-fade-zone { opacity: 1 !important; transform: none !important; }
}


/* ================= Partículas alrededor del logo ================= */
.elementor-element-a5c8231 {
  overflow: visible;
}
.st-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9f2 0%, #ff5fa6 45%, transparent 76%);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  animation: st-particle-twinkle 3.2s ease-in-out infinite;
}
@keyframes st-particle-twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) translateY(0); }
  50% { opacity: .95; transform: scale(1) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .st-particle { display: none; }
}


/* Promo + Instalar app dentro de #st-cta-row, un poco más compactos en celular. */
@media (max-width: 767px) {
  #st-cta-row { gap: 10px; flex-wrap: wrap; }
  #st-hero-promo { gap: 10px; }
  .st-promo-icon { width: 42px; height: 40px; }
  .st-promo-text strong { font-size: .84rem; }
  .st-promo-text span { font-size: .72rem; }
}

/* Botones "ENTRAR" de la sección 2 (emocional), la sección 4 (cierre) y el propio hero
   ("Descubrir Serastu", reemplazado por la promo de membresías — ver #st-hero-promo) —
   quitados por completo el 2026-08-30. El único CTA real de la landing ahora es la promo de
   membresías gratis + el botón Instalar app, ambos dentro de #st-cta-row. */
.elementor-element-a34b31a,
.elementor-element-e84b8d2,
.elementor-element-d6116bb {
  display: none !important;
}