/*==============================================================
   INICIO.CSS — TodoGlobos Silvia
   Estilos exclusivos para la página de inicio (index.html)
   Mobile-first design
================================================================*/

/* ===== VARIABLES EXTENDIDAS ===== */
:root {
   --brand-purple: #7b4fff;
   --brand-purple-dark: #5a32d4;
   --brand-pink: #ff4ecd;
   --brand-pink-light: #ff9de2;
   --brand-gold: #ffd166;
   --brand-dark: #14002b;
   --brand-dark-soft: #1e0040;

   --gradient-hero: linear-gradient(135deg, #14002b 0%, #2a006e 50%, #1a0050 100%);
   --gradient-brand: linear-gradient(135deg, #7b4fff 0%, #ff4ecd 100%);
   --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
   --gradient-banner: linear-gradient(to top, rgba(20, 0, 43, 0.92) 0%, rgba(20, 0, 43, 0.5) 50%, transparent 100%);

   --glass-bg: rgba(255, 255, 255, 0.07);
   --glass-border: rgba(255, 255, 255, 0.12);
   --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

   --radius-sm: 0.75rem;
   --radius-md: 1.25rem;
   --radius-lg: 2rem;
   --radius-full: 9999px;

   --transition-fast: 0.2s ease;
   --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

   --font-display: 'Poppins', sans-serif;
   --font-body: 'Montserrat Alternates', sans-serif;
}

/* ===== RESET INICIO ===== */
.inicio-main {
   padding-top: 0;
   /* altura del header movida al hero */
   padding-bottom: 0;
   /* padding removido para conectar con el footer */
   overflow-x: hidden;
   background: #14002b;
   /* evita que el body-color se filtre entre secciones */
}

/* ============================================================
   HERO SECTION
============================================================ */
.hero__section {
   position: relative;
   min-height: 100svh;
   display: flex;
   align-items: center;
   background: var(--gradient-hero);
   overflow: hidden;
   padding: 5.5rem 1.25rem 1.5rem;
   /* top padding accounts for header */
}

/* Orbs de fondo animados */
.hero__bg-orbs {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
}

.orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(60px);
   opacity: 0.35;
   animation: orbFloat 8s ease-in-out infinite alternate;
}

.orb-1 {
   width: 350px;
   height: 350px;
   background: radial-gradient(circle, #7b4fff, transparent);
   top: -100px;
   right: -80px;
   animation-delay: 0s;
}

.orb-2 {
   width: 280px;
   height: 280px;
   background: radial-gradient(circle, #ff4ecd, transparent);
   bottom: 50px;
   left: -60px;
   animation-delay: -3s;
}

.orb-3 {
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, #ffd166, transparent);
   top: 40%;
   left: 50%;
   opacity: 0.2;
   animation-delay: -5s;
}

@keyframes orbFloat {
   from {
      transform: translate(0, 0) scale(1);
   }

   to {
      transform: translate(20px, -30px) scale(1.1);
   }
}

/* Container hero */
.hero__container {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2rem;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
}

/* --- Visual (globos + logo) --- */
.hero__visual {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 280px;
   height: 280px;
   flex-shrink: 0;
}

.hero__glow-ring {
   position: absolute;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: var(--gradient-brand);
   opacity: 0.18;
   filter: blur(40px);
   animation: glowPulse 3s ease-in-out infinite alternate;
}

@keyframes glowPulse {
   from {
      opacity: 0.15;
      transform: scale(0.95);
   }

   to {
      opacity: 0.28;
      transform: scale(1.05);
   }
}

.hero__globos {
   position: absolute;
   width: 200px;
   bottom: 2.5rem;
   left: 50%;
   transform: translateX(-42%);
   filter: drop-shadow(0 20px 30px rgba(123, 79, 255, 0.5));
   animation: globoFloat 4s ease-in-out infinite alternate;
}

@keyframes globoFloat {
   from {
      transform: translateX(-42%) translateY(0);
   }

   to {
      transform: translateX(-42%) translateY(-12px);
   }
}

.hero__logo-img {
   position: absolute;
   width: 240px;
   bottom: 0.5rem;
   left: 50%;
   transform: translateX(-50%);
   mask-image: linear-gradient(to bottom, white 80%, transparent 100%);
   filter: brightness(0) invert(1);
}

.hero__deco {
   position: absolute;
   width: 42px;
   opacity: 0.85;
}

.deco-1 {
   left: 0.2rem;
   top: 3.5rem;
   rotate: -15deg;
   animation: decoSway 5s ease-in-out infinite alternate;
}

.deco-2 {
   right: 0.2rem;
   bottom: 6.5rem;
   rotate: 11deg;
   animation: decoSway 5s ease-in-out infinite alternate-reverse;
}

@keyframes decoSway {
   from {
      transform: rotate(0deg) scale(1);
   }

   to {
      transform: rotate(8deg) scale(1.08);
   }
}

/* Badge flotante */
.hero__badge {
   position: absolute;
   top: 45%;
   right: 0;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   background: #14002b54;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-full);
   padding: 0.4rem 0.75rem 0.4rem 0.5rem;
   color: #fff;
   font-size: 0.72rem;
   font-weight: 600;
   font-family: var(--font-body);
   box-shadow: 0 4px 20px rgba(123, 79, 255, 0.4);
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
   transition: var(--transition-base);
}

.hero__badge:hover {
   transform: translateY(-50%) scale(1.05);
   box-shadow: 0 8px 30px rgba(123, 79, 255, 0.6);
}

.hero__badge i {
   color: #4cff91;
   font-size: 1.1rem;
   animation: iconPulse 2s infinite ease-in-out;
}

@keyframes iconPulse {

   0%,
   100% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.2);
   }
}

.badge__pulse {
   width: 8px;
   height: 8px;
   background: #4cff91;
   border-radius: 50%;
   display: inline-block;
   animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 1;
   }

   50% {
      transform: scale(1.4);
      opacity: 0.6;
   }
}

/* --- Content (textos + botones) --- */
.hero__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 1rem;
   color: #fff;
}

.hero__tag {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   background: rgba(123, 79, 255, 0.25);
   border: 1px solid rgba(123, 79, 255, 0.5);
   border-radius: var(--radius-full);
   padding: 0.35rem 0.9rem;
   font-size: 0.78rem;
   font-weight: 600;
   color: var(--brand-pink-light);
   letter-spacing: 0.03em;
}

.hero__tag i {
   font-size: 0.9rem;
}

.hero__title {
   font-family: var(--font-display);
   font-size: 2rem;
   font-weight: 800;
   line-height: 1.15;
   color: #fff;
   text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero__title--highlight {
   background: var(--gradient-brand);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.hero__desc {
   font-size: 0.92rem;
   color: rgba(255, 255, 255, 0.78);
   line-height: 1.6;
   max-width: 380px;
}

/* Botones CTA */
.hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   justify-content: center;
   margin-top: 0.25rem;
}

.hero__btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.85rem 1.5rem;
   border-radius: var(--radius-full);
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 0.92rem;
   text-decoration: none;
   transition: var(--transition-base);
   cursor: pointer;
   white-space: nowrap;
}

.hero__btn--primary {
   background: var(--gradient-brand);
   color: #fff;
   box-shadow: 0 8px 30px rgba(123, 79, 255, 0.5);
}

.hero__btn--primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 40px rgba(123, 79, 255, 0.7);
}

.hero__btn--wa {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
}

.hero__btn--wa:hover {
   background: rgba(37, 211, 102, 0.2);
   border-color: #25D366;
   transform: translateY(-3px);
   color: #fff;
}

.hero__btn--wa i {
   color: #25D366;
   font-size: 1.35rem;
}

/* Social links hero */
.hero__social {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-top: 0.25rem;
}

.hero__social-label {
   font-size: 0.72rem;
   color: rgba(255, 255, 255, 0.5);
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.hero__social-links {
   display: flex;
   gap: 0.5rem;
}

.hero__social-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 50%;
   color: rgba(255, 255, 255, 0.8);
   font-size: 1rem;
   transition: var(--transition-base);
   text-decoration: none;
}

.hero__social-link:hover {
   background: var(--gradient-brand);
   border-color: transparent;
   color: #fff;
   transform: translateY(-3px) scale(1.1);
}

/* ============================================================
   BANNER / CARRUSEL SECTION
============================================================ */
.banner__section {
   padding: 2.5rem 1.25rem;
   background: #f7f3ff;
}

.banner__header {
   text-align: center;
   margin-bottom: 1.5rem;
}

.banner__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   background: linear-gradient(135deg, rgba(123, 79, 255, 0.1), rgba(255, 78, 205, 0.1));
   color: var(--brand-purple);
   padding: 0.3rem 0.9rem;
   border-radius: var(--radius-full);
   font-size: 0.78rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-bottom: 0.6rem;
}

.banner__eyebrow i {
   font-size: 0.85rem;
   color: var(--brand-pink);
}

.banner__title {
   font-family: var(--font-display);
   font-size: 1.6rem;
   font-weight: 800;
   color: var(--brand-dark);
   line-height: 1.2;
}

/* Swiper banner */
.banner__swiper {
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
   border-radius: var(--radius-lg);
   overflow: hidden !important;
   /* sobrescribe styles.css: overflow: visible */
   box-shadow: 0 20px 60px rgba(123, 79, 255, 0.2);
   /* sobrescribir width: 100vh del .swiper global */
   width: 100% !important;
   align-items: unset !important;
}

/* Override crítico: el .swiper global de styles.css pone width:100vh */
#bannerSwiper {
   width: 100% !important;
   overflow: hidden !important;
}

#bannerSwiper .swiper-slide {
   display: block !important;
   box-shadow: none !important;
   background: transparent !important;
   border-radius: 0 !important;
   height: auto !important;
}

/* Override: styles.css en 768px+ fija .swiper-slide img a 180px */
#bannerSwiper .swiper-slide img,
#bannerSwiper .banner__img {
   width: 100% !important;
   max-width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   border-radius: 0 !important;
   display: block !important;
}

.banner__card {
   position: relative;
   aspect-ratio: 16 / 7;
   /* un poco más bajo que 16:9, se ve mejor */
   min-height: 200px;
   overflow: hidden;
   border-radius: var(--radius-lg);
   width: 100%;
}

.banner__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.6s ease;
}

.swiper-slide:hover .banner__img {
   transform: scale(1.04);
}

.banner__overlay {
   position: absolute;
   inset: 0;
   background: var(--gradient-banner);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.25rem;
   gap: 0.75rem;
}

.banner__text {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
}

.banner__cat {
   font-size: 0.78rem;
   font-weight: 700;
   color: var(--brand-pink-light);
   letter-spacing: 0.05em;
}

.banner__slide-title {
   font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 800;
   color: #fff;
   line-height: 1.2;
}

.banner__slide-desc {
   font-size: 0.82rem;
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.4;
}

.banner__cta {
   display: flex;
}

.banner__btn {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(8px);
   border: 1.5px solid rgba(255, 255, 255, 0.35);
   color: #fff;
   padding: 0.55rem 1.25rem;
   border-radius: var(--radius-full);
   font-size: 0.82rem;
   font-weight: 700;
   font-family: var(--font-body);
   text-decoration: none;
   transition: var(--transition-base);
   cursor: pointer;
}

.banner__btn:hover {
   background: rgba(255, 255, 255, 0.28);
   transform: translateY(-2px);
   color: #fff;
}

.banner__btn--wa {
   background: rgba(37, 211, 102, 0.25);
   border-color: #25D366;
}

.banner__btn--wa:hover {
   background: rgba(37, 211, 102, 0.45);
   color: #fff;
}

/* Pagination & navigation custom */
.banner__pagination .swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   background: rgba(123, 79, 255, 0.35);
   opacity: 1;
   transition: var(--transition-base);
}

.banner__pagination .swiper-pagination-bullet-active {
   background: var(--brand-purple);
   width: 24px;
   border-radius: 4px;
}

.banner__btn-next,
.banner__btn-prev {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
   width: 38px;
   height: 38px;
   background: rgba(255, 255, 255, 0.18);
   backdrop-filter: blur(8px);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--transition-base);
   border: 1px solid rgba(255, 255, 255, 0.25);
}

.banner__btn-next {
   right: 0.75rem;
}

.banner__btn-prev {
   left: 0.75rem;
}

.banner__btn-next::after,
.banner__btn-prev::after {
   display: none;
   /* ocultamos el default de swiper */
}

/* Mobile: ocultar flechas — el swipe táctil es suficiente */
@media (max-width: 767px) {

   .banner__btn-next,
   .banner__btn-prev {
      display: none !important;
   }

   /* Overlay en mobile: reorganizar para evitar solapamientos */
   .banner__overlay {
      padding: 1rem;
      gap: 0.5rem;
      justify-content: flex-end;
   }

   .banner__slide-title {
      font-size: 1.05rem;
   }

   .banner__slide-desc {
      font-size: 0.78rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

   .banner__card {
      aspect-ratio: 4 / 3;
      /* más cuadrado en mobile para que haya más espacio de texto */
   }
}

.banner__btn-next i,
.banner__btn-prev i {
   color: #fff;
   font-size: 1.3rem;
}

.banner__btn-next:hover,
.banner__btn-prev:hover {
   background: rgba(123, 79, 255, 0.6);
}

/* ============================================================
   BENEFICIOS SECTION
============================================================ */
.beneficios__section {
   padding: 2.5rem 1.25rem;
   background: #fff;
}

.beneficios__header {
   text-align: center;
   margin-bottom: 1.75rem;
}

.beneficios__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   color: var(--brand-pink);
   font-size: 0.78rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-bottom: 0.5rem;
}

.beneficios__eyebrow i {
   font-size: 0.9rem;
}

.beneficios__title {
   font-family: var(--font-display);
   font-size: 1.6rem;
   font-weight: 800;
   color: var(--brand-dark);
   line-height: 1.2;
}

/* Grid de beneficios */
.beneficios__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
   max-width: 1000px;
   margin: 0 auto;
}

.beneficio__card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 1.75rem 1.5rem;
   background: linear-gradient(145deg, #fdf8ff, #f5edff);
   border: 1px solid rgba(123, 79, 255, 0.1);
   border-radius: var(--radius-md);
   transition: var(--transition-base);
   cursor: default;
}

.beneficio__card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 50px rgba(123, 79, 255, 0.12);
   border-color: rgba(123, 79, 255, 0.25);
}

.beneficio__icon {
   width: 60px;
   height: 60px;
   background: var(--gradient-brand);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1rem;
   box-shadow: 0 8px 24px rgba(123, 79, 255, 0.35);
}

.beneficio__icon i {
   font-size: 1.6rem;
   color: #fff;
}

.beneficio__title {
   font-family: var(--font-display);
   font-size: 1rem;
   font-weight: 700;
   color: var(--brand-dark);
   margin-bottom: 0.5rem;
}

.beneficio__desc {
   font-size: 0.85rem;
   color: #5c5f62;
   line-height: 1.6;
}

/* ============================================================
   UBICACIÓN SECTION
============================================================ */
.ubicacion__section {
   padding: 2rem 1.25rem 1.5rem;
   background: linear-gradient(135deg, #f7f3ff, #fff0fb);
}

.ubicacion__card {
   max-width: 700px;
   margin: 0 auto;
   background: #fff;
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   box-shadow: 0 10px 40px rgba(123, 79, 255, 0.1);
   border: 1px solid rgba(123, 79, 255, 0.1);
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.ubicacion__info {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
}

.ubicacion__icon-wrap {
   width: 48px;
   height: 48px;
   background: var(--gradient-brand);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 6px 20px rgba(123, 79, 255, 0.35);
}

.ubicacion__icon-wrap i {
   font-size: 1.4rem;
   color: #fff;
}

.ubicacion__text {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
}

.ubicacion__title {
   font-family: var(--font-display);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--brand-dark);
}

.ubicacion__address {
   font-size: 0.9rem;
   color: #444;
   font-weight: 500;
}

.ubicacion__horario {
   display: flex;
   align-items: center;
   gap: 0.35rem;
   font-size: 0.8rem;
   color: #888;
}

.ubicacion__horario i {
   color: var(--brand-purple);
   font-size: 0.9rem;
}

.ubicacion__actions {
   display: flex;
   flex-direction: column;
   gap: 0.65rem;
}

.ubicacion__btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.85rem 1rem;
   border-radius: var(--radius-md);
   font-size: 0.9rem;
   font-weight: 700;
   font-family: var(--font-body);
   text-decoration: none;
   transition: var(--transition-base);
   cursor: pointer;
}

.ubicacion__btn--maps {
   background: linear-gradient(135deg, #4285F4, #34A853);
   color: #fff;
   box-shadow: 0 6px 20px rgba(66, 133, 244, 0.3);
}

.ubicacion__btn--maps:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(66, 133, 244, 0.5);
   color: #fff;
}

.ubicacion__btn--wa {
   background: #f0fdf4;
   color: #166534;
   border: 1.5px solid #86efac;
}

.ubicacion__btn--wa:hover {
   background: #dcfce7;
   border-color: #25D366;
   transform: translateY(-3px);
   color: #166534;
}

.ubicacion__btn--wa i {
   color: #25D366;
   font-size: 1.1rem;
}

/* ============================================================
   FOOTER
============================================================ */
.footer__desarrollador {
   background-color: #ffffff;
   padding: 2rem 0 1.5rem 0;
   margin-top: 0 !important;
   /* anula el margin-top: 4rem del styles.css global */
   border-top: 1px solid rgba(123, 79, 255, 0.1);
   font-family: inherit;
}

.footer__container {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   row-gap: 2.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
}

.footer__contenido {
   max-width: 550px;
   display: flex;
   flex-direction: column;
   align-items: center;
   row-gap: 1rem;
}

.footer__contenido p {
   font-size: 0.85rem;
   color: #8c9196;
}

.footer__autor {
   font-weight: 600;
   color: var(--brand-purple);
   text-decoration: none;
}

/* Espacio extra mobile para nav inferior */
@media screen and (max-width: 767px) {
   .footer__desarrollador {
      padding-bottom: 6.5rem;
   }
}

/* ============================================================
   FAB WHATSAPP BUTTON
============================================================ */
.fab__whatsapp {
   position: fixed;
   bottom: 5.5rem;
   /* encima del nav mobile */
   right: 1.25rem;
   z-index: 200;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 58px;
   height: 58px;
   background: linear-gradient(135deg, #25D366, #128C7E);
   border-radius: 50%;
   color: #fff;
   text-decoration: none;
   box-shadow: 0 8px 30px rgba(37, 211, 102, 0.45);
   transition: var(--transition-base);
}

.fab__whatsapp:hover {
   transform: scale(1.12);
   box-shadow: 0 12px 40px rgba(37, 211, 102, 0.6);
   color: #fff;
}

/* Ícono */
.fab__icon {
   font-size: 1.75rem;
   position: relative;
   z-index: 2;
   color: #fff;
}

/* Pulsos animados */
.fab__pulse {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: rgba(37, 211, 102, 0.45);
   animation: fabPulse 2s ease-out infinite;
}

.fab__pulse--delay {
   animation-delay: 0.8s;
}

@keyframes fabPulse {
   0% {
      transform: scale(1);
      opacity: 0.7;
   }

   100% {
      transform: scale(1.9);
      opacity: 0;
   }
}

/* Tooltip */
.fab__tooltip {
   position: absolute;
   right: calc(100% + 12px);
   top: 50%;
   transform: translateY(-50%);
   background: #fff;
   color: #166534;
   font-size: 0.78rem;
   font-weight: 700;
   font-family: var(--font-body);
   padding: 0.4rem 0.85rem;
   border-radius: var(--radius-full);
   white-space: nowrap;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   pointer-events: none;
   opacity: 0;
   transition: var(--transition-base);
}

.fab__whatsapp:hover .fab__tooltip {
   opacity: 1;
   transform: translateY(-50%) translateX(-4px);
}

/* ============================================================
   RESPONSIVE — TABLET Y DESKTOP
============================================================ */
@media screen and (min-width: 768px) {

   .inicio-main {
      padding-bottom: 2rem;
      padding-top: 4rem;
   }

   /* Hero */
   .hero__section {
      padding: 3rem 2rem;
   }

   .hero__container {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 3rem;
   }

   .hero__visual {
      width: 380px;
      height: 380px;
      order: 2;
      flex-shrink: 0;
   }


   .hero__glow-ring {
      width: 360px;
      height: 360px;
   }

   .hero__globos {
      width: 280px;
   }

   .hero__logo-img {
      width: 330px;
   }

   .hero__content {
      order: 1;
      align-items: flex-start;
      text-align: left;
      flex: 1;
      max-width: 480px;
   }

   .hero__title {
      font-size: 2.75rem;
   }

   .hero__desc {
      font-size: 1rem;
   }

   .hero__actions {
      justify-content: flex-start;
   }

   /* Banner */
   .banner__section {
      padding: 3.5rem 2rem;
   }

   .banner__title {
      font-size: 2rem;
   }

   .banner__slide-title {
      font-size: 1.6rem;
   }

   .banner__slide-desc {
      font-size: 0.9rem;
   }

   .banner__overlay {
      padding: 2rem;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
   }

   .banner__cta {
      flex-shrink: 0;
   }

   /* Beneficios */
   .beneficios__section {
      padding: 4rem 2rem;
   }

   .beneficios__title {
      font-size: 2rem;
   }

   .beneficios__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
   }

   /* Ubicación */
   .ubicacion__section {
      padding: 3rem 2rem;
   }

   .ubicacion__card {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      padding: 1.5rem 2rem;
   }

   .ubicacion__info {
      flex: 1;
   }

   .ubicacion__actions {
      flex-direction: row;
      flex-shrink: 0;
      gap: 0.5rem;
   }

   /* Botones más compactos en desktop */
   .ubicacion__btn {
      flex-direction: row;
      padding: 0.55rem 1rem;
      font-size: 0.82rem;
      gap: 0.4rem;
   }

   .ubicacion__btn i {
      font-size: 1rem;
   }

   /* FAB */
   .fab__whatsapp {
      bottom: 2rem;
      right: 1.75rem;
      width: 62px;
      height: 62px;
   }

   .btn-scroll-top.visible {
      bottom: 7rem;
   }
}

@media screen and (min-width: 1150px) {
   .hero__title {
      font-size: 3.25rem;
   }

   .hero__visual {
      width: 440px;
      height: 440px;
   }
}

/* ============================================================
   ANIMACIONES SCROLLREVEAL (clases añadidas por JS)
============================================================ */
.reveal-up {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s ease, transform 0.6s ease;
}

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