/* ==================================================
BOOKMY HEADER SYSTEM
================================================== */
header,
.navbar,
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.bookmy-card,
.bookmy-carousel-card,
.bookmy-image-card {
  transform: translateZ(0); /* Estabiliza stacking context */
}

.bookmy-free,
.bookmy-images,
.bookmy-carousel-section {
  position: relative;
  z-index: 1;
}

/* ==================================================
VARIABLES & ROOT (DEFAULT: DARK MODE)
================================================== */
:root {
  --bg-main: #050505;
  --bg-card: #232731;
  --menu-bg: #232731;
  --text-main: #ffffff;
  --text-secondary: #b8b8b8;
  --accent: #70C1A6;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  --switch-bg: #39404f;
    --badge-bg: rgba(112,193,166,.12);

  --hero-title-start:#70C1A6;
  --hero-title-end:#08d144;

  --btn-primary-start:#70C1A6;
  --btn-primary-end:#8FE0C3;

  --btn-primary-text:#0d1117;

  --btn-outline-bg:rgba(255,255,255,.03);
  --btn-outline-border:rgba(112,193,166,.20);

  --glass-highlight:rgba(255,255,255,.03);

  --glow-soft:rgba(112,193,166,.15);
  --glow-main:rgba(112,193,166,.25);
  --glow-strong:rgba(112,193,166,.45);

  --btn-outline-hover:#B8F5E2;
    --section-bg:#0b0f12;
  --badge-border:#1e3a34;
  --badge-bg:rgba(6,78,59,.20);
  --badge-text:#4ade80;
  --card-bg:#161b22;
  --card-border:#21262d;
  --title-color:var(--text-main);
  --subtitle-color:#9ca3af;
  --step-color:#4ade80;
  --line-accent:#00ff66;
    --marquee-bg:#232731;
  --marquee-text:#ffffff;
  --marquee-wave:#70C1A6;
    --plan-card-bg:rgba(255,255,255,.04);
  --plan-card-border:rgba(255,255,255,.08);
  --plan-card-hover:rgba(112,193,166,.40);
  --plan-card-shadow:
    0 0 30px rgba(112,193,166,.25),
    0 0 60px rgba(112,193,166,.15);
  --plan-shine:
    rgba(255,255,255,.15);
  --plan-title:#ffffff;
  --plan-text:
    rgba(255,255,255,.75);
  --plan-label-bg:
    rgba(112,193,166,.15);
  --plan-label-border:
    rgba(112,193,166,.25);
  --plan-label-text:#70C1A6;
  --plan-check-bg:#70C1A6;
  --plan-btn-start:#2c9270;
  --plan-btn-end:#2ED3C6;
  --plan-btn-text:#ffffff;
   --faq-badge-bg:
    rgba(112,193,166,.12);
  --faq-badge-border:
    rgba(112,193,166,.18);
  --faq-badge-text:#70C1A6;
  --faq-title:#ffffff;
  --faq-description:
    rgba(255,255,255,.70);
  --faq-card-bg:
    rgba(255,255,255,.03);
  --faq-card-border:
    rgba(112,193,166,.10);
  --faq-card-hover:
    rgba(112,193,166,.25);
  --faq-card-shadow:
    rgba(112,193,166,.08);
  --faq-question:#ffffff;
  --faq-icon-bg:
    rgba(112,193,166,.12);
  --faq-icon-color:#70C1A6;
  --faq-answer:
    rgba(255,255,255,.72);
  --faq-icon-active:#70C1A6;

  --tm-badge-bg:
    rgba(255,255,255,.03);

  --tm-badge-border:
    rgba(82,255,168,.25);

  --tm-badge-text:
    #52FFA8;

  --tm-title:
    #ffffff;

  --tm-card-bg:
    rgba(255,255,255,.04);

  --tm-card-border:
    rgba(255,255,255,.08);

  --tm-card-hover:
    rgba(82,255,168,.35);

  --tm-glow:
    rgba(82,255,168,.15);

  --tm-glow-2:
    rgba(82,255,168,.08);

  --tm-card-light:
    rgba(82,255,168,.15);

  --tm-profile-start:
    rgb(37,158,97);

  --tm-profile-end:
    rgba(82,255,168,.25);

  --tm-profile-ring:
    rgba(15,15,15,.95);

  --tm-profile-glow:
    rgba(82,255,168,.50);

  --tm-profile-glow-2:
    rgba(82,255,168,.20);

  --tm-profile-blur:
    rgba(82,255,168,.18);

  --tm-profile-border:
    rgba(255,255,255,.15);

  --tm-text:
    rgba(255,255,255,.88);

  --tm-user:
    #ffffff;

  --tm-role:
    #1EC2A6;

      --app-card-bg:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  --app-card-border:
    rgba(255,255,255,.18);

  --app-card-shadow:
    rgba(0,0,0,.15);

  --app-card-inner:
    rgba(255,255,255,.20);

  --app-overlay:
    linear-gradient(
      120deg,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.08) 30%,
      transparent 60%
    );

  --app-title:#ffffff;

  --app-title-accent:#1ec2a6;

  --app-text:
    rgba(255,255,255,.75);

  --store-bg:
    rgba(255,255,255,.08);

  --store-border:
    rgba(255,255,255,.10);

  --store-text:#ffffff;

  --store-hover:#1ec2a6;

  --circle-1:#1ec2a6;

  --circle-2:#4f7cff;
  --footer-bg:#05080D;

  --footer-border:
    rgba(255,255,255,.08);

  --footer-text:
    rgba(255,255,255,.70);

  --footer-text-soft:
    rgba(255,255,255,.65);

  --footer-divider:
    rgba(255,255,255,.08);

  --footer-bottom:
    rgba(255,255,255,.45);

  --footer-link:#44cbbd;

  --footer-social-bg:
    rgba(255,255,255,.06);

  --footer-social-border:
    rgba(255,255,255,.08);

  --footer-social-color:#fff;

  --footer-social-hover:
    rgba(112,193,166,.35);

  --footer-social-shadow:
    rgba(112,193,166,.15);

  --footer-glow:
    rgba(112,193,166,.08);
}

/* Typographies styling rules */
.cbia-btn,
.cbia-chat,
.cbia-option,
.cbia-bot-msg,
.cbia-user-msg,
.bm-modal,
.bm-form input,
.bm-form select,
.bm-form textarea,
.bm-submit-btn {
  font-family: 'Google Sans', sans-serif !important;
}

/* ==================================================
LIGHT MODE
================================================== */
body.light-mode {
  --bg-main: #F7F9FC;
  --bg-card: #ffffff;
  --menu-bg: #ffffff;
  --text-main: #232731;
  --text-secondary: #667085;
  --border: rgba(0, 0, 0, 0.08);
  --shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  --switch-bg: #e7ebf0;
   --badge-bg: rgba(112,193,166,.08);

  --hero-title-start:#4CA78B;
  --hero-title-end:#08a83d;

  --btn-primary-start:#5EB99A;
  --btn-primary-end:#79D8B8;

  --btn-primary-text:#ffffff;

  --btn-outline-bg:rgba(255,255,255,.75);
  --btn-outline-border:rgba(112,193,166,.28);
  --glass-highlight:rgba(255,255,255,.60);
  --glow-soft:rgba(112,193,166,.08);
  --glow-main:rgba(112,193,166,.12);
  --glow-strong:rgba(112,193,166,.18);
  --btn-outline-hover:var(--accent);
    --section-bg:#ffffff;
  --badge-border:rgba(112,193,166,.25);
  --badge-bg:rgba(112,193,166,.08);
  --badge-text:#24976d;
  --card-bg:#ffffff;
  --card-border:rgba(0,0,0,.08);
  --title-color:#232731;
  --subtitle-color:#667085;
  --step-color:#1f8f69;
  --line-accent:#34c759;
   /* fondo verde */
  --marquee-bg:#70C1A6;
  /* texto blanco */
  --marquee-text:#ffffff;
  /* ondas blancas */
  --marquee-wave:#ffffff;
    --plan-card-bg:
    rgba(255,255,255,.92);
  --plan-card-border:
    rgba(0,0,0,.08);
  --plan-card-hover:
    rgba(112,193,166,.30);
  --plan-card-shadow:
    0 12px 35px rgba(0,0,0,.08);
  --plan-shine:
    rgba(255,255,255,.60);
  --plan-title:#232731;
  --plan-text:#667085;
  --plan-label-bg:
    rgba(112,193,166,.08);
  --plan-label-border:
    rgba(112,193,166,.22);
  --plan-label-text:#24976d;
  --plan-check-bg:#5DBA98;
  --plan-btn-start:#70C1A6;
  --plan-btn-end:#4DB48F;
  --plan-btn-text:#ffffff;
   --faq-badge-bg:
    rgba(112,193,166,.08);
  --faq-badge-border:
    rgba(112,193,166,.22);
  --faq-badge-text:#24976d;
  --faq-title:#232731;
  --faq-description:#667085;
  --faq-card-bg:
    rgba(255,255,255,.92);
  --faq-card-border:
    rgba(0,0,0,.08);
  --faq-card-hover:
    rgba(112,193,166,.30);
  --faq-card-shadow:
    rgba(0,0,0,.08);
  --faq-question:#232731;
  --faq-icon-bg:
    rgba(112,193,166,.10);
  --faq-icon-color:#24976d;
  --faq-answer:#667085;
  --faq-icon-active:#70C1A6;
  --tm-badge-bg:
    rgba(112,193,166,.08);

  --tm-badge-border:
    rgba(112,193,166,.22);

  --tm-badge-text:
    #24976d;

  --tm-title:
    #232731;

  --tm-card-bg:
    rgba(255,255,255,.90);

  --tm-card-border:
    rgba(0,0,0,.08);

  --tm-card-hover:
    rgba(112,193,166,.35);

  --tm-glow:
    rgba(112,193,166,.10);

  --tm-glow-2:
    rgba(112,193,166,.05);

  --tm-card-light:
    rgba(112,193,166,.08);

  --tm-profile-start:
    #70C1A6;

  --tm-profile-end:
    rgba(112,193,166,.22);

  --tm-profile-ring:
    rgba(255,255,255,.95);

  --tm-profile-glow:
    rgba(112,193,166,.18);

  --tm-profile-glow-2:
    rgba(112,193,166,.10);

  --tm-profile-blur:
    rgba(112,193,166,.10);

  --tm-profile-border:
    rgba(255,255,255,.50);

  --tm-text:
    #667085;

  --tm-user:
    #232731;

  --tm-role:
    #24976d;
      --app-card-bg:
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(247,249,252,.88)
    );

  --app-card-border:
    rgba(0,0,0,.08);

  --app-card-shadow:
    rgba(0,0,0,.08);

  --app-card-inner:
    rgba(255,255,255,.90);

  --app-overlay:
    linear-gradient(
      120deg,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.25) 35%,
      transparent 65%
    );

  --app-title:#232731;

  --app-title-accent:#24976d;

  --app-text:#667085;

  --store-bg:
    rgba(112,193,166,.08);

  --store-border:
    rgba(112,193,166,.18);

  --store-text:#232731;

  --store-hover:#70C1A6;

  --circle-1:#70C1A6;

  --circle-2:#7EA6FF;
   --footer-bg:#F7F9FC;

  --footer-border:
    rgba(0,0,0,.08);

  --footer-text:
    #667085;

  --footer-text-soft:
    #667085;

  --footer-divider:
    rgba(0,0,0,.08);

  --footer-bottom:
    #667085;

  --footer-link:
    #24976d;

  --footer-social-bg:
    rgba(112,193,166,.08);

  --footer-social-border:
    rgba(112,193,166,.18);

  --footer-social-color:
    #232731;

  --footer-social-hover:
    rgba(112,193,166,.35);

  --footer-social-shadow:
    rgba(112,193,166,.10);

  --footer-glow:
    rgba(112,193,166,.12);
}

/* ==================================================
RESET & BASE
================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  transition: background 0.35s ease, color 0.35s ease;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ==================================================
CONTAINER
================================================== */
.bookmy-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ==================================================
HEADER & NAV
================================================== */
.bookmy-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding: 25px 0;
}

.bookmy-nav {
  width: 100%;
  max-width: 1100px;
  height: 72px;
  margin: 0 auto;
  background: var(--menu-bg);
  border-radius: 100px;
  border: 1px solid var(--border);
  padding: 0 15px 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  transition: 0.35s ease;
}

.bookmy-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.bookmy-logo img {
  height: 42px;
  width: auto;
  display: block;
}

/* MENU */

/* ==========================================
   BOOKMY PREMIUM GLASS MENU
   ========================================== */

.bm-header *,
.bm-header *::before,
.bm-header *::after{
    box-sizing:border-box;
}

.bm-header{

      --bm-primary:#69c6ab;
    --bm-primary-light:#7be0c0;
    --bm-bg:rgba(22,27,40,.72);
    --bm-border:rgba(255,255,255,.08);
    --bm-text:#ffffff;
    --bm-muted:#c7d0e0;

    position:fixed;

    top:0;                 /* queda fijo arriba */
    left:0;
    right:0;

    transform:none;        /* quitar desplazamiento */

    width:100%;
    max-width:none;

    height:74px;

    padding:0 28px;

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

    border-radius:0;       /* opcional: quitar borde redondo */

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

    background:linear-gradient(
        135deg,
        rgba(30,35,50,.82),
        rgba(18,23,34,.65)
    );

    border-bottom:1px solid var(--bm-border);

    z-index:99999;

    box-shadow:
    0 8px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);

}

.bm-header::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    background:
    radial-gradient(
        circle at 20% 0%,
        rgba(105,198,171,.15),
        transparent 40%
    );

    pointer-events:none;
}

/* LOGO */

.bm-logo{
    display:flex;
    align-items:center;
    z-index:2;
}

.bm-logo img{
    height:42px;
    display:block;
}

/* MENU */
.bm-nav{
    position:relative;
    z-index:9999;
    width:100%;
    font-family:'Google Sans',sans-serif;
}



 .bm-nav-container{

    width:100%;
    max-width:1280px;

    margin:0 auto;

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

    padding:14px 24px;

    background:none;
    border:none;

    overflow:visible;
    position:relative;
    
}

.bm-nav-logo img{
    height:42px;
    width:auto;
}

/* MENU */



.bookmy-menu {
    
   display:flex;
    align-items:center;
    gap:38px;
    list-style:none;
}

.bookmy-menu li {
  position: relative;
}

.bookmy-menu a {
  color: var(--text-main);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s ease;
}

.bookmy-menu a:hover {
  color: var(--accent);
}

.bookmy-dropdown {
  position: relative;
}

.bookmy-submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  min-width: 220px;
  background: var(--menu-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s ease;
  box-shadow: var(--shadow);
}

.bookmy-submenu li {
  width: 100%;
}

.bookmy-submenu a {
  display: block;
  padding: 14px 22px;
  font-size: 14px;
}

.bookmy-submenu a:hover {
  background: rgba(112, 193, 166, 0.12);
  color: var(--accent);
}

.bookmy-dropdown:hover .bookmy-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bookmy-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==================================================
THEME SWITCH
================================================== */
.bookmy-theme-switch {
  display: flex;
  align-items: center;
}

.bookmy-theme-switch input {
  display: none;
}

.bookmy-switch {
  position: relative;
  width: 68px;
  height: 34px;
  background: var(--switch-bg);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  transition: 0.3s ease;
}

.bookmy-moon,
.bookmy-sun {
  font-size: 14px;
  position: relative;
  z-index: 2;
  transition: 0.3s ease;
}

.bookmy-moon { opacity: 1; }
.bookmy-sun { opacity: 0.4; }

.bookmy-switch::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 50%;
  transition: 0.3s ease;
  z-index: 1;
}

#theme-toggle:checked + .bookmy-switch::before {
  transform: translateX(34px);
}

#theme-toggle:checked + .bookmy-switch .bookmy-sun { opacity: 1; }
#theme-toggle:checked + .bookmy-switch .bookmy-moon { opacity: 0.4; }

/* ==================================================
BUTTON SYSTEM
================================================== */
.bookmy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.bookmy-btn-primary {
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #232731;
  font-size: 13px;
  font-weight: 700;
  transition: 0.3s ease;
}

.bookmy-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(112, 193, 166, 0.35);
}
/* ==================================================
MOBILE TOGGLE
================================================== */

.bookmy-mobile-toggle{

    display:none;

    background:none;

    border:none;

    cursor:pointer;
}

.bookmy-mobile-toggle span{

    display:block;

    width:28px;

    height:3px;

    margin:5px 0;

    border-radius:30px;

    background:var(--text-main);
}
/* ====================================
HERO PREMIUM SAAS
==================================== */
.bookmy-hero{
  position: relative;
  overflow: hidden;

  padding: 80px 0 140px;

  background: var(--bg-main);

  transition:
    background .35s ease;
}

.bookmy-hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  align-items:center;
  gap:60px;
}

.bookmy-hero::before{
  content:"";

  position:absolute;

  left:50%;
  bottom:-250px;

  transform:translateX(-50%);

  width:1400px;
  height:800px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      var(--hero-glow-1) 0%,
      var(--hero-glow-2) 35%,
      var(--hero-glow-3) 55%,
      transparent 75%
    );

  filter:blur(120px);

  z-index:0;

  transition: background .35s ease;
}

.bookmy-hero::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:translateX(-50%);

  width:900px;
  height:300px;

  background:
    radial-gradient(
      ellipse,
      var(--hero-light-1) 0%,
      var(--hero-light-2) 50%,
      transparent 100%
    );

  filter:blur(80px);

  z-index:0;

  transition: background .35s ease;
}

/* Responsive Glow Elements */
@media (max-width: 1024px) {
  .bookmy-hero { padding: 70px 0 120px; }
  .bookmy-hero::before { width: 1000px; height: 650px; bottom: -220px; filter: blur(100px); }
  .bookmy-hero::after { width: 700px; height: 260px; filter: blur(70px); }
}

@media (max-width: 768px) {
  .bookmy-hero { padding: 60px 20px 90px; }
  .bookmy-hero::before { width: 600px; height: 500px; bottom: -180px; filter: blur(80px); opacity: 0.9; }
  .bookmy-hero::after { width: 450px; height: 200px; filter: blur(60px); opacity: 0.8; }
}

@media (max-width: 480px) {
  .bookmy-hero { padding: 50px 0 90px; }
  .bookmy-hero::before { width: 420px; height: 420px; bottom: -160px; filter: blur(70px); opacity: 0.75; }
  .bookmy-hero::after { width: 320px; height: 160px; filter: blur(50px); opacity: 0.7; }
}

/* ====================================
LIGHT LINE EFFECT
==================================== */
.bookmy-light-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1800px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #70C1A6, #9BE7D0, #70C1A6, transparent);
  box-shadow: 0 0 15px rgba(112, 193, 166, 0.6), 0 0 40px rgba(112, 193, 166, 0.4), 0 0 80px rgba(112, 193, 166, 0.3);
  z-index: 1;
}

.bookmy-light-line::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -80px;
  width: 1200px;
  height: 180px;
  background: radial-gradient(ellipse, rgba(112, 193, 166, 0.30) 0%, rgba(112, 193, 166, 0.10) 40%, transparent 80%);
  filter: blur(40px);
}

@media (max-width: 768px) {
  .bookmy-light-line { display: none; }
}

/* ====================================
FLOATING CARDS VISUALS
==================================== */
.floating-card {
  position: absolute;
  z-index: 20;
  padding: 8px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(35, 39, 49, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(112, 193, 166, 0.65);
  box-shadow: 0 0 8px rgba(112, 193, 166, 0.40), 0 0 18px rgba(112, 193, 166, 0.25), 0 0 35px rgba(112, 193, 166, 0.15), 0 15px 30px rgba(0, 0, 0, 0.35);
}

.floating-card img {
  display: block;
  width: 220px;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
}

.card-1 { top: 40px; left: -30px; animation: floatIn 1s ease 0.2s both, float1 4s ease-in-out infinite 1.2s; }
.card-2 { top: 120px; right: -40px; animation: floatIn 1s ease 0.8s both, float2 5s ease-in-out infinite 1.8s; }
.card-3 { bottom: 140px; left: -50px; animation: floatIn 1s ease 1.4s both, float3 6s ease-in-out infinite 2.4s; }
.card-4 { bottom: 40px; right: -35px; animation: floatIn 1s ease 2s both, float4 5s ease-in-out infinite 3s; }

@keyframes floatIn {
  0% { opacity: 0; transform: translateY(120px) scale(0.3); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes floatPhone { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes float1 { 50% { transform: translateY(-20px); } }
@keyframes float2 { 50% { transform: translateY(15px); } }
@keyframes float3 { 50% { transform: translateY(-18px); } }
@keyframes float4 { 50% { transform: translateY(12px); } }

@media (max-width: 1024px) {
  .floating-card img { width: 180px; }
  .card-1 { left: -40px; top: 10px; }
  .card-2 { right: -40px; top: 100px; }
  .card-3 { left: -50px; bottom: 100px; }
  .card-4 { right: -40px; bottom: 10px; }
}

@media (max-width: 768px) {
  .floating-card img { width: 140px; }
  .card-1, .card-2, .card-3, .card-4 {
    position: relative; top: auto; left: auto; right: auto; bottom: auto;
    margin: 12px auto; display: block;
  }
  .floating-card { display: flex; flex-direction: column; align-items: center; gap: 15px; font-size: 12px; padding: 10px 14px; }
}

@media (max-width: 480px) {
  .floating-card img { width: 120px; }
  .floating-card { display: none !important; } /* Ocultar en pantallas muy pequeñas */
}

/* ====================================
HERO CONTENT ELEMENTS
==================================== */
.bookmy-badge {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(112, 193, 166, 0.12);
  color: var(--text-main);
  margin-bottom: 30px;
}

.bookmy-hero-title {
  font-size: 55px;
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 25px;
  background: linear-gradient(135deg, #70C1A6, #08d144);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bookmy-hero-title span {
  color: var(--accent);
}

.bookmy-hero-text {
  max-width: 650px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 35px;
}

.bookmy-hero-buttons .bookmy-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
  transform: translateY(0);
  z-index: 1;
}

.bookmy-hero-buttons .bookmy-btn-primary {
  background: linear-gradient(135deg, #70C1A6, #8FE0C3);
  color: #0d1117;
  border: none;
  box-shadow: 0 0 15px rgba(112, 193, 166, 0.25), 0 0 35px rgba(112, 193, 166, 0.15);
  animation: bookmyGlow 3s ease-in-out infinite;
}

.bookmy-hero-buttons .bookmy-btn-outline {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(112, 193, 166, 0.20);
  color: var(--text-main);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.bookmy-hero-buttons .bookmy-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(112, 193, 166, 0.20), 0 0 25px rgba(112, 193, 166, 0.30), 0 0 50px rgba(112, 193, 166, 0.20);
}

.bookmy-hero-buttons .bookmy-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  transition: 0.8s ease;
  z-index: 2;
}

.bookmy-hero-buttons .bookmy-btn:hover::before { left: 140%; }
.bookmy-hero-buttons .bookmy-btn:active { transform: translateY(-1px) scale(0.98); }

@keyframes bookmyGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(112, 193, 166, 0.20), 0 0 30px rgba(112, 193, 166, 0.10); }
  50% { box-shadow: 0 0 25px rgba(112, 193, 166, 0.45), 0 0 60px rgba(112, 193, 166, 0.25); }
}

.bookmy-btn-outline {
  position: relative;
  overflow: hidden;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(112, 193, 166, 0.18);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  transition: all 0.35s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.bookmy-btn-outline:hover {
  border-color: rgba(112, 193, 166, 0.6);
  color: #B8F5E2;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(112, 193, 166, 0.15), 0 0 20px rgba(112, 193, 166, 0.20), 0 0 50px rgba(112, 193, 166, 0.10);
}

.bookmy-btn-outline::after { content: "→"; margin-left: 10px; transition: 0.3s ease; }
.bookmy-btn-outline:hover::after { transform: translateX(4px); }

.bookmy-hero-stats { display: flex; gap: 60px; }
.bookmy-stat-item strong { display: block; margin-bottom: 6px; font-size: 22px; }
.bookmy-stat-item span { color: var(--text-secondary); }

.bookmy-hero-phone { position: relative; display: flex; justify-content: center; align-items: center; }
.bookmy-hero-phone > img {
  width: 100%; max-width: 320px; position: relative; z-index: 10;
  animation: floatPhone 5s ease-in-out infinite;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
}


@media (max-width: 768px) {

    .bookmy-hero-title{ 
    font-size: 22px;
   }
  .bookmy-btn-outline  { 
    margin-top: 10px;
    padding: 20px;
   }
  
  }

/* ====================================
STEPS SYSTEM (HOW IT WORKS)
==================================== */
.bookmy-section{

  background:var(--section-bg);

  color:var(--text-main);

  padding:60px 20px;

  text-align:center;

  box-sizing:border-box;

  transition:
    background .35s ease,
    color .35s ease;
}

.bookmy-section *{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* ---------- BADGE ---------- */

.bookmy-section .badge{

  display:inline-block;

  border:1px solid var(--badge-border);

  color:var(--badge-text);

  background:var(--badge-bg);

  padding:6px 16px;

  border-radius:20px;

  font-size:14px;

  margin-bottom:20px;

  transition:.35s;
}

/* ---------- TITULOS ---------- */

.bookmy-section-title{

  font-size:55px;

  line-height:1.05;

  font-weight:800;

  max-width:900px;

  margin:0 auto;

  color:var(--title-color);
}

.bookmy-section h2{

  font-size:2.5rem;

  font-weight:700;

  line-height:1.2;

  margin-bottom:15px;

  color:var(--title-color);

  max-width:800px;

  margin-left:auto;

  margin-right:auto;
}

.bookmy-section .subtitle{

  color:var(--subtitle-color);

  font-size:1.1rem;

  margin-bottom:50px;
}

/* ---------- GRID ---------- */

.bookmy-section .cards-container{

  display:grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:20px;

  max-width:1200px;

  margin:0 auto;
}

/* ---------- TARJETA ---------- */

.bookmy-section .card{

  background:var(--card-bg);

  border:1px solid var(--card-border);

  border-radius:24px;

  padding:30px 20px;

  display:flex;

  flex-direction:column;

  align-items:center;

  position:relative;

  overflow:hidden;

  min-height:440px;

  transition:
    .35s ease;

  box-shadow:
    var(--shadow);
}

.bookmy-section .card:hover{

  transform:
    translateY(-6px);

  border-color:
    rgba(112,193,166,.35);
}

/* ---------- IMAGEN ---------- */

.bookmy-section .card-image-container{

  width:100%;

  height:220px;

  margin-bottom:25px;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

  border-radius:12px;
}

.bookmy-section .card-image{

  width:auto;

  height:100%;

  object-fit:contain;
}

/* ---------- TEXTOS ---------- */

.bookmy-section .step{

  color:var(--step-color);

  font-size:.85rem;

  font-weight:700;

  letter-spacing:1px;

  margin-bottom:10px;
}

.bookmy-section .card-title{

  color:var(--text-main);

  font-size:1.25rem;

  font-weight:600;

  line-height:1.3;

  margin-bottom:12px;
}

.bookmy-section .card-desc{

  color:var(--text-secondary);

  font-size:.9rem;

  line-height:1.6;
}

/* ---------- LINEA ANIMADA ---------- */

.bookmy-section .card::after{

  content:"";

  position:absolute;

  bottom:0;

  left:-100%;

  width:100%;

  height:4px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--line-accent),
      transparent
    );

  animation:
    lineMove 3s linear infinite;
}

.bookmy-section .card:nth-child(2)::after{
  animation-delay:.6s;
}

.bookmy-section .card:nth-child(3)::after{
  animation-delay:1.2s;
}

.bookmy-section .card:nth-child(4)::after{
  animation-delay:1.8s;
}

.bookmy-section .card:nth-child(5)::after{
  animation-delay:2.4s;
}

@keyframes lineMove{

  0%{
    left:-100%;
  }

  100%{
    left:100%;
  }

}

        /* --- RESPONSIVE MEDIA QUERIES --- */
        @media (max-width: 1024px) {
            .bookmy-section .cards-container {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {

            .bookmy-section-title{
                font-size: 33px;
            }
            .bookmy-section h2 {
                font-size: 2rem;
            }
            .bookmy-section .cards-container {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 480px) {
            .bookmy-section .cards-container {
                grid-template-columns: 1fr;
            }
            .bookmy-section .card {
                min-height: auto;
            }
        }

/* =====================================
TESTIMONIALS SECTION
===================================== */
.bookmy-testimonials-section {
  position: relative;
  width: 100%;
  padding: 80px 20px;
  background: transparent;
  overflow: visible;
  font-family: 'Google Sans', sans-serif;
}

.bookmy-testimonials-header {
  text-align: center;
  margin-bottom: 80px;
}

.bookmy-testimonials-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;

  background: var(--tm-badge-bg);

  border:
    1px solid
    var(--tm-badge-border);

  backdrop-filter: blur(6px);

  color:
    var(--tm-badge-text);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  margin-bottom: 22px;
}

.bookmy-testimonials-header h2 {

  color:
    var(--tm-title);

  font-size: 55px;

  line-height: 1.05;

  font-weight: 800;

  max-width: 900px;

  margin: 0 auto;
}

.bookmy-testimonials-grid {

  max-width: 1300px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 30px;
}

.bookmy-testimonial-card {

  position: relative;

  padding: 75px 35px 35px;

  border-radius: 28px;

  overflow: visible;

  background:
    var(--tm-card-bg);

  border:
    1px solid
    var(--tm-card-border);

  backdrop-filter:
    blur(24px);

  transition: .4s ease;
}

.bookmy-testimonial-card:hover {

  transform:
    translateY(-10px);

  border-color:
    var(--tm-card-hover);

  box-shadow:

    0 0 25px
    var(--tm-card-shadow1),

    0 0 60px
    var(--tm-card-shadow2);
}

.bookmy-testimonial-glow {

  position: absolute;

  width: 220px;

  height: 220px;

  right: -80px;

  top: -100px;

  background:
    var(--tm-card-glow);

  filter:
    blur(80px);

  pointer-events: none;
}

.bookmy-testimonial-profile {

  position: absolute;

  top: -45px;

  left: 50%;

  transform:
    translateX(-50%);

  width: 95px;

  height: 95px;

  border-radius: 50%;

  padding: 4px;

  background:
    linear-gradient(
      135deg,
      var(--tm-profile-start),
      var(--tm-profile-end)
    );

  box-shadow:

    0 0 0 4px
    var(--tm-profile-ring),

    0 0 25px
    var(--tm-profile-shadow1),

    0 0 50px
    var(--tm-profile-shadow2);

  z-index: 20;

  transition: .4s ease;
}

.bookmy-testimonial-profile::before {

  content: "";

  position: absolute;

  inset: -12px;

  border-radius: 50%;

  background:
    var(--tm-profile-blur);

  filter:
    blur(20px);

  z-index: -1;
}

.bookmy-testimonial-card:hover
.bookmy-testimonial-profile {

  transform:
    translateX(-50%)
    scale(1.08);
}

.bookmy-testimonial-profile img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 50%;

  border:
    2px solid
    var(--tm-profile-border);
}

.bookmy-testimonial-text {

  color:
    var(--tm-text);

  font-size: 15px;

  line-height: 1.8;

  text-align: center;

  margin: 0 0 28px;
}

.bookmy-testimonial-user {
  text-align: center;
}

.bookmy-testimonial-user h4 {

  color:
    var(--tm-user);

  font-size: 18px;

  font-weight: 700;

  margin: 0 0 6px;
}

.bookmy-testimonial-user span {

  color:
    var(--tm-role);

  font-size: 13px;

  font-weight: 600;
}

/* ==================================================
RESPONSIVE (SIN CAMBIOS)
================================================== */

@media (max-width: 991px){

  .bookmy-testimonials-grid{
    grid-template-columns:1fr;
    max-width:700px;
  }

  .bookmy-testimonials-header h2{
    font-size:40px;
  }

  .bookmy-testimonial-profile{
    width:85px;
    height:85px;
    top:-42px;
  }
}

@media (max-width:768px){

  .bookmy-testimonials-section{
    padding:90px 20px 60px;
  }

  .bookmy-testimonials-header{
    margin-bottom:65px;
  }

  .bookmy-testimonials-header h2{
    font-size:32px;
  }

  .bookmy-testimonial-card{
    padding:65px 24px 24px;
    border-radius:24px;
  }

  .bookmy-testimonial-profile{
    width:78px;
    height:78px;
    top:-39px;
  }

  .bookmy-testimonial-text{
    font-size:14px;
    line-height:1.7;
  }

  .bookmy-testimonial-user h4{
    font-size:16px;
  }
}

/* ==========================================
BOOKMY HERO APP (RESERVA)
========================================== */
.bm-hero-reserva { position: relative; overflow: hidden; padding: 120px 0; background: transparent; }
.bm-hero-container { width: min(1200px, 90%); margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.bm-hero-content { animation: bmFadeLeft 1s ease forwards; }
.bm-hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 100px; background: rgba(112, 193, 166, .18); color: #4fa98f; font-weight: 700; font-size: 14px; }
.bm-hero-title { margin: 30px 0 25px; font-size: 50px; line-height: 1.1; font-weight: 800; color: #f5f5f7; }
.bm-hero-description { max-width: 580px; color: #c6c6cc; font-size: 16px; line-height: 1.8; margin-bottom: 40px; }

.bm-hero-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 30px; margin-bottom: 45px; }
.bm-benefit { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; color: #24a857; }
.bm-benefit span {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #28c76f; color: white; font-weight: 700; transition: .4s;
}
.bm-benefit:hover span { transform: scale(1.15) rotate(10deg); }

.bm-hero-btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 18px 34px; border-radius: 100px;
  text-decoration: none; color: #fff; font-weight: 700; background: linear-gradient(135deg, #70C1A6, #57b897);
  transition: .4s; box-shadow: 0 15px 35px rgba(112, 193, 166, .25);
}
.bm-hero-btn span { transition: .4s; }
.bm-hero-btn:hover { transform: translateY(-5px); box-shadow: 0 25px 45px rgba(112, 193, 166, .35); }
.bm-hero-btn:hover span { transform: translateX(6px); }

.bm-hero-visual { position: relative; display: flex; justify-content: center; animation: bmFadeRight 1s ease forwards; }
.bm-glow-circle {
  position: absolute; width: 550px; height: 550px; border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 193, 166, .25), transparent 70%); animation: bmPulse 5s ease infinite;
}
.bm-phone-image { position: relative; z-index: 2; max-width: 100%; width: 540px; animation: bmFloat 5s ease-in-out infinite; transition: .5s; }
.bm-phone-image:hover { transform: translateY(-12px) scale(1.03); }

@keyframes bmFadeLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } }
@keyframes bmFadeRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes bmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes bmPulse { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.08); opacity: 1; } }

@media(max-width:1024px){
  .bm-hero-container { gap: 50px; }
  .bm-hero-title { font-size: 52px; }
  .bm-phone-image { width: 430px; }
}
@media(max-width:768px){
  .bm-hero-container { grid-template-columns: 1fr; text-align: center; }
  .bm-hero-content { order: 2; }
  .bm-hero-visual { order: 1; }
  .bm-hero-description { margin-left: auto; margin-right: auto; }
  .bm-hero-benefits { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto 40px; }
  .bm-benefit { justify-content: flex-start; }
  .bm-phone-image { width: 340px; }
  .bm-glow-circle { width: 350px; height: 350px; }
}
@media(max-width:480px){
  .bm-hero-reserva { padding: 80px 0; }
  .bm-hero-title { font-size: 36px; }
  .bm-phone-image { width: 280px; }
}

/* ==========================================
PRICING PLANS SYSTEM
========================================== */
.bm-plans-section{

  position:relative;

  overflow:hidden;

  padding:20px 0;

  background:transparent;
}

.bm-plans-container{

  max-width:1200px;

  margin:auto;

  padding:0 20px;
}

.bm-plans-grid{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:40px;

  align-items:stretch;
}

/* TAG */

.bm-popular-tag{

  position:absolute;

  top:14px;

  right:30px;

  background:var(--accent);

  color:#fff;

  padding:10px 18px;

  border-radius:100px;

  font-size:13px;

  font-weight:700;

  z-index:3;
}

/* HEADER */

.bm-plans-header{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  max-width:900px;

  margin:0 auto 60px;
}

/* CARD */

.bm-plan-card{

  position:relative;

  overflow:hidden;

  padding:60px;

  border-radius:36px;

  background:var(--plan-card-bg);

  backdrop-filter:blur(25px);

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

  border:1px solid var(--plan-card-border);

  transition:.5s;

  box-shadow:var(--shadow);
}

.bm-plan-card::before{

  content:"";

  position:absolute;

  top:-150px;

  left:-100px;

  width:220px;

  height:500px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--plan-shine),
      transparent
    );

  transform:
    rotate(25deg);

  transition:.8s;
}

.bm-plan-card:hover{

  transform:
    translateY(-12px);

  border-color:
    var(--plan-card-hover);

  box-shadow:
    var(--plan-card-shadow);
}

.bm-plan-card:hover::before{

  left:120%;
}

/* FEATURED */

.bm-plan-featured{

  transform:scale(1.04);

  border:
    1px solid
    rgba(112,193,166,.35);

  box-shadow:
    0 0 40px rgba(112,193,166,.15);
}

/* TEXT */

.bm-plan-card h3{

  color:var(--plan-title);

  font-size:24px;

  font-weight:800;

  margin-bottom:15px;
}

.bm-plan-text{

  color:var(--plan-text);

  line-height:1.8;
}

/* LABEL */

.bm-plan-label{

  display:inline-flex;

  padding:10px 18px;

  border-radius:100px;

  background:
    var(--plan-label-bg);

  border:
    1px solid
    var(--plan-label-border);

  color:
    var(--plan-label-text);

  font-weight:700;
}

/* IMAGE */

.bm-plan-image{

  display:flex;

  justify-content:center;

  margin:30px 0;
}

.bm-plan-image img{

  width:100%;

  max-width:450px;

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

  animation:
    floatDashboard
    6s
    ease-in-out
    infinite;
}

@keyframes floatDashboard{

  0%,100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(-15px);
  }

}

/* FEATURES */

.bm-plan-features{

  list-style:none;

  padding:0;
}

.bm-plan-features li{

  color:var(--plan-title);

  padding:10px 0;

  display:flex;

  align-items:center;

  gap:12px;

  font-size:12px;
}

.bm-plan-features li::before{

  content:"✓";

  width:26px;

  height:26px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:
    var(--plan-check-bg);

  color:#fff;

  flex-shrink:0;
}

/* BUTTON */

.bm-plan-btn{

  width:100%;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:18px 24px;

  border-radius:100px;

  text-decoration:none;

  border:none;

  color:var(--plan-btn-text);

  font-weight:700;

  background:
    linear-gradient(
      135deg,
      var(--plan-btn-start),
      var(--plan-btn-end)
    ) !important;

  box-shadow:
    0 10px 25px
    rgba(112,193,166,.28);

  transition:
    .35s ease;
}

.bm-plan-btn:hover{

  transform:
    translateY(-4px);

  box-shadow:
    0 15px 40px
    rgba(112,193,166,.40);
}

/* REFUERZO SOLO MODO CLARO */

body.light-mode .bm-plan-btn{

  background:
    linear-gradient(
      135deg,
      #70C1A6,
      #4DB48F
    ) !important;

  color:#ffffff !important;
}

@media (max-width: 991px) {
  .bm-plans-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .bm-plan-card { width: 100%; max-width: 650px; margin: 0 auto; padding: 28px; }
  .bm-plan-featured { transform: none !important; }
  .bm-plan-image img { max-width: 280px; }
  .bm-plan-card h3 { font-size: 26px; text-align: center; }
  .bm-plan-label { margin: 0 auto 20px; display: table; }
  .bm-plan-text { text-align: center; }
  .bm-plan-features { margin-top: 20px; }
}
@media (max-width: 767px) {
  .bm-plans-section { padding: 80px 0; }
  .bm-plan-image img { max-width: 240px; }
  .bm-plan-card h3 { font-size: 22px; }
  .bm-plan-features li { font-size: 14px; }
}

/* ==========================================
FORM / MODAL POPUP
========================================== */
.bm-modal-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .65); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: .35s; z-index: 9999;
}
.bm-modal-overlay.active { opacity: 1; visibility: visible; }
.bm-modal {
  width: min(700px, 92%); padding: 40px; border-radius: 32px; background: rgba(15, 20, 28, .82);
  border: 1px solid rgba(112, 193, 166, .18); backdrop-filter: blur(30px); box-shadow: 0 0 50px rgba(112, 193, 166, .12);
  position: relative; transform: translateY(40px); transition: .4s;
}
.bm-modal-overlay.active .bm-modal { transform: translateY(0); }
.bm-modal-header { text-align: center; margin-bottom: 30px; }
.bm-modal-header h3 { color: #fff; margin: 15px 0; font-size: 34px; }
.bm-modal-header p { color: rgba(255, 255, 255, .7); }
.bm-modal-badge { display: inline-flex; padding: 10px 18px; border-radius: 100px; background: rgba(112, 193, 166, .15); color: #70C1A6; font-weight: 700; }
.bm-modal-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .08); color: #fff; }

.bm-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bm-field input, .bm-field select, .bm-field textarea {
  width: 100%; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04); color: #fff; font-size: 15px; outline: none; transition: .3s ease;
}
.bm-field input:focus, .bm-field select:focus, .bm-field textarea:focus { border-color: #70C1A6; box-shadow: 0 0 0 4px rgba(112, 193, 166, .12); }

.bm-field select {
  background: #161B22; color: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%2370C1A6' viewBox='0 0 16 16'%3E%3Cpath d='M3.204 5h9.592L8 10.481 3.204 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 50px;
}
.bm-field select option { background: #161B22; color: #fff; }

.bm-submit-btn {
  position: relative; width: 100%; height: 60px; border: none; border-radius: 18px; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; letter-spacing: .3px; color: #fff;
  background: linear-gradient(135deg, #70C1A6 0%, #5AB89A 50%, #2ED3C6 100%);
  box-shadow: 0 10px 30px rgba(112, 193, 166, .25), inset 0 1px 1px rgba(255, 255, 255, .15); transition: transform .35s ease, box-shadow .35s ease;
}
.bm-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 0 30px rgba(112, 193, 166, .4); }

@media(max-width:768px){
  .bm-form-grid { grid-template-columns: 1fr; }
  .bm-modal { padding: 28px; }
}

.bm-success-message { display: none; text-align: center; padding: 20px 10px; }
.bm-success-icon {
  width: 90px; height: 90px; margin: 0 auto 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #70C1A6, #2ED3C6);
  box-shadow: 0 0 35px rgba(112, 193, 166, .4); animation: bmSuccessPop .6s ease;
}
@keyframes bmSuccessPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.bm-success-message h3 { color: #fff; font-size: 34px; margin-bottom: 15px; font-family: 'Google Sans', sans-serif; }
.bm-success-message p { color: rgba(255, 255, 255, .75); line-height: 1.8; max-width: 500px; margin: auto; }
.bm-success-btn { margin-top: 30px; padding: 16px 30px; border: none; border-radius: 100px; cursor: pointer; font-family: 'Google Sans', sans-serif; font-weight: 700; color: #fff; background: linear-gradient(135deg, #70C1A6, #2ED3C6); }

/* ==========================================
FAQ ACCORDION SECTION
========================================== */
.bm-faq-section{

  padding:120px 0;

  position:relative;

  overflow:hidden;
}

.bm-faq-container{

  width:min(1100px,90%);

  margin:auto;
}

/* HEADER */

.bm-faq-header{

  text-align:center;

  max-width:800px;

  margin:0 auto 60px;
}

/* BADGE */

.bm-faq-badge{

  display:inline-flex;

  padding:10px 18px;

  border-radius:100px;

  background:
    var(--faq-badge-bg);

  border:
    1px solid
    var(--faq-badge-border);

  color:
    var(--faq-badge-text);

  font-weight:700;

  transition:.35s;
}

/* TITULO */

.bm-faq-title{

  margin:20px 0;

  color:
    var(--faq-title);
  font-size:
    clamp(      40px,      5vw,      70px    );

  line-height:1;
  font-weight:800;
  transition:.35s;
}

/* DESCRIPCION */

.bm-faq-description{

  color:
    var(--faq-description);
  font-size:18px;
  line-height:1.8;
  transition:.35s;
}

.bm-faq-wrapper{

  max-width:900px;
  margin:auto;
}

/* CARD */

.bm-faq-item{

  margin-bottom:18px;
  border-radius:24px;
  overflow:hidden;
  background:
    var(--faq-card-bg);
  backdrop-filter:
    blur(18px);
  border:
    1px solid
    var(--faq-card-border);
  transition:
    .35s;
  box-shadow:
    var(--shadow);
}

.bm-faq-item:hover{

  border-color:
    var(--faq-card-hover);
  box-shadow:
    0 0 25px
    var(--faq-card-shadow);
}

/* PREGUNTA */

.bm-faq-question{

  width:100%;
  border:none;
  background:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 30px;
  text-align:left;
  color:
    var(--faq-question);
  font-size:20px;
  font-weight:600;
  transition:.35s;
   font-family: 'Google Sans', sans-serif !important;
}

/* ICONO */

.bm-faq-icon{

  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    var(--faq-icon-bg);
  color:
    var(--faq-icon-color);
  font-size:22px;
  transition:.35s;
}

/* RESPUESTA */

.bm-faq-answer{
  max-height:0;
  overflow:hidden;
  transition:
    max-height .4s ease,
    padding .4s ease;
}

.bm-faq-answer p{

  padding:
    0 30px 30px;
  color:
    var(--faq-answer);
  line-height:1.8;
  font-size:16px;
}

/* ACTIVO */

.bm-faq-item.active .bm-faq-answer{
  max-height:250px;
}

.bm-faq-item.active .bm-faq-icon{
  transform:
    rotate(45deg);
  background:
    var(--faq-icon-active);
  color:#fff;
}
@media(max-width:768px){
  .bm-faq-section { padding: 80px 0; }
  .bm-faq-question { padding: 22px; font-size: 17px; }
  .bm-faq-answer p { padding: 0 22px 22px; }
  .bm-faq-title { font-size: 38px; }
}

/* ==========================================
FOOTER SYSTEM
========================================== */
.bm-footer{

  position:relative;

  padding:80px 0 40px;

  background:
    var(--footer-bg);

  border-top:
    1px solid
    var(--footer-border);

  text-align:center;

  overflow:hidden;

  transition:.35s;
}

.bm-footer-container{

  width:min(1200px,90%);

  margin:auto;
}

/* LOGO */

.bm-footer-logo{

  max-width:180px;

  margin:0 auto 30px;

  display:block;
}

/* cambia logo automáticamente */

body.light-mode .bm-footer-logo{

  content:
    url("img/logo-bookmy2.png");

}

/* TAGS */

.bm-footer-tags{

  display:flex;

  justify-content:center;

  align-items:center;

  flex-wrap:wrap;

  gap:40px;

  margin-bottom:50px;

  color:
    var(--footer-text-soft);

  font-size:13px;

  letter-spacing:.8px;

  text-transform:uppercase;
}

.bm-footer-tags span{

  position:relative;
}

.bm-footer-tags span::before{

  content:"•";

  margin-right:8px;

  color:
    var(--footer-divider);
}

.bm-footer-divider{

  width:100%;

  height:1px;

  background:
    var(--footer-divider);

  margin-bottom:50px;
}

/* MENU */

.bm-footer-menu,
.bm-footer-contact{

  list-style:none;

  padding:0;

  margin:0;

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:30px;

  margin-bottom:40px;
}

.bm-footer-menu li,
.bm-footer-contact li{

  margin-bottom:16px;
}

.bm-footer-menu a{

  color:
    var(--footer-text);

  text-decoration:none;

  font-size:15px;

  transition:.3s;
}

.bm-footer-menu a:hover{

  color:#70C1A6;

  padding-left:8px;
}

.bm-footer-contact li{

  color:
    var(--footer-text);

  line-height:1.7;
}

/* SOCIAL */

.bm-footer-social{

  display:flex;

  justify-content:center;

  gap:15px;

  margin-bottom:40px;
}

.bm-footer-social a{

  width:52px;

  height:52px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:14px;

  background:
    var(--footer-social-bg);

  border:
    1px solid
    var(--footer-social-border);

  color:
    var(--footer-social-color);

  transition:.35s ease;
}

.bm-footer-social a:hover{

  transform:
    translateY(-4px);

  border-color:
    var(--footer-social-hover);

  box-shadow:
    0 0 20px
    var(--footer-social-shadow);
}

/* STORE */

.bm-store-buttons{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:16px;

  flex-wrap:wrap;

  margin-bottom:50px;
}

.bm-store-btn{

  display:block;

  transition:.35s ease;
}

.bm-store-btn:hover{

  transform:
    translateY(-4px);
}

.bm-store-btn img{

  display:block;

  height:52px;

  width:auto;
}

/* BOTTOM */

.bm-footer-bottom{

  margin-top:60px;

  padding-top:25px;

  text-align:center;

  color:
    var(--footer-bottom);

  border-top:
    1px solid
    var(--footer-divider);

  font-size:13px;

  line-height:1.6;
}

.bm-footer-bottom a{

  color:
    var(--footer-link);

  text-decoration:none;

  font-size:13px;

  transition:.3s;
}

.bm-footer-bottom a:hover{

  opacity:.8;

  text-decoration:underline;
}

/* GLOW */

.bm-footer::before{

  content:"";

  position:absolute;

  top:-200px;

  right:-150px;

  width:400px;

  height:400px;

  border-radius:50%;

  background:

  radial-gradient(
    circle,
    var(--footer-glow),
    transparent 70%
  );

  pointer-events:none;
}

/* RESPONSIVE */

@media(max-width:991px){

.bm-footer-container{

grid-template-columns:1fr;

gap:40px;

text-align:center;
}

.bm-footer-logo{

margin:auto auto 20px;
}

.bm-store-buttons{

justify-content:center;
}
}

@media(max-width:576px){

.bm-footer{

padding:60px 0 20px;
}

.bm-store-btn img{

height:38px;
}
}



/* ==================================================
PAGINA FREE & CAROUSEL MODULES
================================================== */
.bookmy-free { padding: 20px; background: transparent; font-family: "Google Sans", sans-serif; color: #fff; }
.bookmy-header h2 { font-size: 44px; color: #70c1a6; letter-spacing: -0.5px; }
.bookmy-header p { color: rgba(255, 255, 255, 0.65); margin-top: 10px; }

.bookmy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bookmy-card {
  position: relative; padding: 26px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); transition: all 0.35s ease; overflow: hidden;
}
.bookmy-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(112, 193, 166, 0.18), transparent 60%); opacity: 0; transition: 0.4s; }
.bookmy-card:hover::before { opacity: 1; }
.bookmy-card:hover { transform: translateY(-10px) scale(1.02); border: 1px solid rgba(112, 193, 166, 0.6); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65); }

.bookmy-icon {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(112, 193, 166, 0.12); border: 1px solid rgba(112, 193, 166, 0.25); margin-bottom: 12px; transition: all 0.3s ease;
}
.bookmy-card:hover .bookmy-icon { background: rgba(112, 193, 166, 0.2); border: 1px solid rgba(112, 193, 166, 0.5); transform: scale(1.08); box-shadow: 0 0 20px rgba(112, 193, 166, 0.25); }

.bookmy-icon svg { width: 26px; height: 26px; stroke: #70c1a6; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: floatIcon 3s ease-in-out infinite; }

@keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.bookmy-card h3 { color: #ffffff; font-size: 18px; margin-bottom: 8px; }
.bookmy-card p { color: rgba(255, 255, 255, 0.65); font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) { .bookmy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bookmy-grid { grid-template-columns: 1fr; } .bookmy-header h2 { font-size: 32px; } }

/* Carousel Section Visuals */
.bookmy-carousel-section { padding: 90px 0; background: transparent; font-family: "Google Sans", sans-serif; color: #70c1a6; }
.bookmy-carousel-header { text-align: center; margin-bottom: 40px; }
.bookmy-carousel-header h2 { font-size: 44px; letter-spacing: -0.5px; }
.bookmy-carousel-header p { color: rgba(255, 255, 255, 0.65); margin-top: 10px; }

.bookmy-carousel {
  display: flex; gap: 22px; overflow-x: auto; padding: 10px 5px 30px; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
}
.bookmy-carousel::-webkit-scrollbar { display: none; }

.bookmy-carousel-card {
  position: relative; min-width: 320px; height: 380px; border-radius: 22px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  scroll-snap-align: start; transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.bookmy-carousel-card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 0.5s ease; }
.bookmy-carousel-card:hover img { transform: scale(1.12); }
.bookmy-carousel-card:hover { transform: translateY(-10px) scale(1.02); border: 1px solid rgba(112, 193, 166, 0.5); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75); }

.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px;
  background: linear-gradient(to top, rgba(15, 17, 23, 0.9), rgba(15, 17, 23, 0.3), transparent);
}
.overlay h3 { font-size: 18px; color: #fff; }
.overlay p { font-size: 14px; color: rgba(255, 255, 255, 0.65); }

.light-follow { --x: 50%; --y: 50%; }
.light-follow::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--x) var(--y), rgba(112, 193, 166, 0.25), transparent 45%);
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.light-follow:hover::before { opacity: 1; }

.bm-btn-wrapper { display: flex; justify-content: center; margin-top: 40px; }

/* Dashboard Plan Link Button Base */
.bm-plan-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 14px;
  background: rgba(112, 193, 166, 0.15); border: 1px solid rgba(112, 193, 166, 0.35); color: #fff; text-decoration: none;
  font-weight: 500; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.35s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); width: auto; white-space: nowrap;
}
.bm-plan-btn:hover { transform: translateY(-4px) scale(1.03); background: rgba(112, 193, 166, 0.25); border: 1px solid rgba(112, 193, 166, 0.6); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }

@media (max-width: 768px) {
  .bm-plan-btn { width: 100%; max-width: 320px; }
}
/* ==================================================
BOOKMY FREE + CAROUSEL — LIGHT MODE
================================================== */

body.light-mode .bookmy-free{

  color:var(--text-main);
}

body.light-mode .bookmy-header h2{

  color:#24976d;
}

body.light-mode .bookmy-header p{

  color:#667085;
}

/* CARDS */

body.light-mode .bookmy-card{

  background:
    rgba(255,255,255,.92);

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

  box-shadow:
    0 10px 35px rgba(0,0,0,.08);
}

body.light-mode .bookmy-card::before{

  background:
    radial-gradient(
      circle at top left,
      rgba(112,193,166,.18),
      transparent 60%
    );
}

body.light-mode .bookmy-card:hover{

  border:
    1px solid rgba(112,193,166,.45);

  box-shadow:
    0 20px 50px rgba(0,0,0,.10);
}

body.light-mode .bookmy-icon{

  background:
    rgba(112,193,166,.10);

  border:
    1px solid rgba(112,193,166,.20);
}

body.light-mode .bookmy-card h3{

  color:#232731;
}

body.light-mode .bookmy-card p{

  color:#667085;
}

/* CAROUSEL */

body.light-mode .bookmy-carousel-section{

  color:#24976d;
}

body.light-mode .bookmy-carousel-header h2{

  color:#24976d;
}

body.light-mode .bookmy-carousel-header p{

  color:#667085;
}

body.light-mode .bookmy-carousel-card{

  background:
    rgba(255,255,255,.94);

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

  box-shadow:
    0 15px 45px rgba(0,0,0,.10);
}

body.light-mode .bookmy-carousel-card:hover{

  border:
    1px solid rgba(112,193,166,.45);

  box-shadow:
    0 25px 60px rgba(0,0,0,.12);
}

/* OVERLAY SOBRE IMAGEN */

body.light-mode .overlay{

  background:
    linear-gradient(
      to top,
      rgba(255,255,255,.96),
      rgba(255,255,255,.35),
      transparent
    );
}

body.light-mode .overlay h3{

  color:#232731;
}

body.light-mode .overlay p{

  color:#667085;
}

/* FOLLOW LIGHT */

body.light-mode .light-follow::before{

  background:
    radial-gradient(
      circle at var(--x) var(--y),
      rgba(112,193,166,.18),
      transparent 45%
    );
}

/* BOTÓN */

body.light-mode .bm-plan-btn{

  background:
    #70C1A6;

  color:#ffffff;

  border:
    1px solid #70C1A6;

  box-shadow:
    0 10px 30px rgba(112,193,166,.18);
}

body.light-mode .bm-plan-btn:hover{

  background:
    #24976d;

  border-color:
    #24976d;

  transform:
    translateY(-4px)
    scale(1.03);

  box-shadow:
    0 20px 45px rgba(36,151,109,.20);
}
/* ==================================================
RESPONSIVE NAVIGATION & OVERLAYS SYSTEM
================================================== */
.bookmy-mobile-menu {
  position: absolute; top: 90px; left: 50%; width: 92%; max-width: 380px; transform: translateX(-50%) translateY(-15px);
  background: rgba(35, 39, 49, .96); backdrop-filter: blur(20px); border: 1px solid rgba(112, 193, 166, .15); border-radius: 24px;
  padding: 25px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 30px rgba(112, 193, 166, .08);
  opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.35s ease; z-index: 9999; max-height: 80vh; overflow-y: auto;
}
.bookmy-mobile-menu.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.bookmy-mobile-menu a { color: var(--text-main); text-decoration: none; font-size: 15px; font-weight: 600; }

.bookmy-mobile-menu .bookmy-btn-primary {
  display: flex !important; justify-content: center; align-items: center; width: 100%; min-height: 52px;
  background: #70C1A6; color: #050505 !important; font-weight: 700; font-size: 15px; border-radius: 999px; text-decoration: none; margin-top: 10px;
}

.bookmy-mobile-toggle {
  display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; position: relative; z-index: 100000;
}
.bookmy-mobile-toggle span { display: block; width: 28px; height: 3px; margin: 5px auto; border-radius: 50px; background: var(--text-main); transition: .3s ease; }

@media(max-width:991px){
  .bookmy-menu, .bookmy-theme-switch, .bookmy-actions .bookmy-btn-primary { display: none !important; }
  .bookmy-mobile-toggle { display: block; }
  .bookmy-nav { height: 65px; padding: 0 20px; max-width: 95%; }
  .bookmy-logo img { height: 36px; }
  .bookmy-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 60px; }
  .bookmy-hero-content { max-width: 800px; margin: 0 auto; padding-right: 20px; }
  .bookmy-hero-buttons, .bookmy-hero-stats { justify-content: center; }
  .bookmy-hero-phone img { width: 350px; }
}

@media(min-width:992px){
  .bookmy-mobile-menu, .bookmy-mobile-toggle { display: none !important; }
}

@media (max-width:768px){
  .bookmy-container { padding: 0 20px; }
  .bookmy-hero { padding: 40px 0 80px; }
  .bookmy-hero-title { font-size: 42px; line-height: 1.1; }
  .bookmy-hero-text { font-size: 16px; line-height: 1.7; }
  .bookmy-hero-buttons { flex-direction: column; align-items: center; width: 100%; }
  .bookmy-hero-buttons .bookmy-btn { width: 100%; max-width: 320px; }
  .bookmy-hero-stats { flex-direction: column; gap: 25px; text-align: center; }
  .bookmy-hero-phone img { width: 280px; }
  .card-1 { top: 50px; left: 0; }
  .card-2 { top: 120px; right: 0; }
  .card-3 { bottom: 120px; left: 0; }
  .card-4 { bottom: 40px; right: 0; }
}

@media (max-width:480px){
  .bookmy-header { padding: 15px 0; }
  .bookmy-nav { height: 60px; }
  .bookmy-logo img { height: 32px; }
  .bookmy-hero-title { font-size: 34px; }
  .bookmy-badge { font-size: 12px; padding: 8px 14px; }
  .bookmy-hero-phone img { width: 240px; }
}

/* Card Reveals Keyframes Animations */
@keyframes cardReveal1 { from { opacity:0; transform: translate(140px,120px) scale(.2); } to { opacity:1; transform: translate(0,0) scale(1); } }
@keyframes cardReveal2 { from { opacity:0; transform: translate(-120px,120px) scale(.2); } to { opacity:1; transform: translate(0,0) scale(1); } }
@keyframes cardReveal3 { from { opacity:0; transform: translate(140px,-120px) scale(.2); } to { opacity:1; transform: translate(0,0) scale(1); } }
@keyframes cardReveal4 { from { opacity:0; transform: translate(-120px,-120px) scale(.2); } to { opacity:1; transform: translate(0,0) scale(1); } }

/* =========================
   BOOKMY DUAL MARQUEE
========================= */

.bm-marquee-wrap{
    width:100%;
    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(55,255,170,.08),
            transparent 60%
        ),
        #04111f;

    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);

    position:relative;
}


.bm-marquee{
    overflow:hidden;
    white-space:nowrap;
    position:relative;
}

.bm-marquee::before,
.bm-marquee::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:5;
    pointer-events:none;
}

.bm-marquee::before{
    left:0;
    background:
    linear-gradient(
        to right,
        #04111f,
        transparent
    );
}

.bm-marquee::after{
    right:0;
    background:
    linear-gradient(
        to left,
        #04111f,
        transparent
    );
}


.bm-track{
    display:flex;
    width:max-content;
    align-items:center;
    gap:90px;

    padding:18px 0;

    will-change:transform;
}


/* FILA SUPERIOR */
.bm-top .bm-track{
    animation:
        bm-slide-left
        28s
        linear
        infinite;
}


/* FILA INFERIOR */
.bm-bottom{
    border-top:
    1px solid rgba(255,255,255,.05);
}

.bm-bottom .bm-track{

    padding:14px 0;

    animation:
        bm-slide-right
        24s
        linear
        infinite;

}


.bm-track span{

    display:flex;
    align-items:center;

    font-family:
    "Google Sans",
    sans-serif;

    flex-shrink:0;

}


/* SUPERIOR */
.bm-top span{

    color:#d8dee9;

    font-size:26px;

    font-weight:700;

    letter-spacing:.02em;

    text-transform:none;

}


/* INFERIOR */
.bm-bottom span{

    color:#4cffae;

    font-size:13px;

    font-weight:600;

    letter-spacing:6px;

    text-transform:uppercase;

}


/* Hover pausa */
.bm-marquee:hover .bm-track{
    animation-play-state:paused;
}



@keyframes bm-slide-left{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


@keyframes bm-slide-right{

    from{
        transform:translateX(-50%);
    }

    to{
        transform:translateX(0);
    }

}


/* RESPONSIVE */

@media(max-width:768px){

    .bm-track{
        gap:50px;
    }

    .bm-top span{
        font-size:22px;
    }

    .bm-bottom span{
        font-size:10px;
        letter-spacing:3px;
    }

}


@media(max-width:480px){

    .bm-top span{
        font-size:18px;
    }

    .bm-bottom span{
        font-size:9px;
        letter-spacing:2px;
    }

}

/* ====================================
STORE LINKS FLOATING BUTTONS
==================================== */
/* ==================================================
STORE LINKS
================================================== */

.bookmy-store-links{

  display:flex;

  align-items:center;

  gap:10px;
}

.store-icon{

  width:42px;

  height:42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  text-decoration:none;

  color:#ffffff;

  background:
    rgba(255,255,255,.04);

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

  backdrop-filter:
    blur(15px);

  transition:
    all .35s ease;
}

.store-icon i{

  font-size:17px;
}

.store-icon:hover{

  color:#70C1A6;

  border-color:
    rgba(112,193,166,.45);

  transform:
    translateY(-3px);

  box-shadow:
    0 0 15px rgba(112,193,166,.25),
    0 0 35px rgba(112,193,166,.10);
}

/* ==================================================
LIGHT MODE
================================================== */

body.light-mode .store-icon{

  color:#24976d;

  background:
    rgba(112,193,166,.08);

  border:
    1px solid
    rgba(112,193,166,.22);
}

body.light-mode .store-icon:hover{

  color:#000000;

  background:
    rgba(112,193,166,.18);

  border-color:
    rgba(112,193,166,.45);

  transform:
    translateY(-3px);

  box-shadow:
    0 0 15px rgba(112,193,166,.18),
    0 0 35px rgba(112,193,166,.08);
}

/* =======================================
CLIENT REAL-TIME ALERTS INTERFACES
======================================= */
.client-alert {
  position: fixed; bottom: 25px; left: 25px; width: 340px; display: flex; align-items: center; gap: 15px; padding: 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25); z-index: 9999; animation: slideIn .6s ease forwards;
}
.client-alert-logo { width: 55px; height: 55px; flex-shrink: 0; }
.client-alert-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.client-alert-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #70c1a6; margin-bottom: 4px; }
.client-alert-company { color: #fff; font-size: 10px; font-weight: 700; margin-bottom: 5px; }
.client-alert-info { color: #d8d8d8; font-size: 10px; }

@keyframes slideIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-40px); } }

.client-alert.hide { animation: slideOut .5s ease forwards; }

@media(max-width:768px){
  .client-alert { width: calc(70% - 30px); left: 15px; bottom: 15px; }
}

/* Third party layouts resets (Elfsight components overrides) */
elfsight-app a[href*="elfsight.com"],
[class*="eapps-widget-toolbar"],
[class*="eapps-widget-branding"],
a[href*="elfsight.com/widget"] {
  display: none !important;
}

/* =======================================
DESCARGA APP
======================================= */

/* ==========================
   BOOKMY APP SHOWCASE
========================== */
.bookmy-app-showcase{

    position:relative;

    overflow:hidden;

    width:min(1300px,92%);

    margin:50px auto;

    padding:50px 50px;

    border-radius:36px;

    background:
      var(--app-card-bg);

    backdrop-filter:blur(35px);

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

    border:
      1px solid
      var(--app-card-border);

    box-shadow:
      0 8px 32px var(--app-card-shadow),

      inset 0 1px 1px
      var(--app-card-inner);
}

.bookmy-app-showcase::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:
      var(--app-overlay);

    pointer-events:none;
}

.bookmy-app-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    align-items:center;

    gap:40px;
}

/* BADGE */

.bookmy-badge{

  display:inline-flex;

  align-items:center;

  gap:15px;

  padding:10px 18px;

  border-radius:999px;

  background:var(--badge-bg);

  color:var(--text-main);

  margin-bottom:30px;

  transition:.35s;
}

/* CONTENT */

.bookmy-app-content h2{

    font-size:
      clamp(
        34px,
        4vw,
        54px
      );

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;

    color:
      var(--app-title);

    margin-bottom:15px;
}

.bookmy-app-content h2 span{

    display:block;

    color:
      var(--app-title-accent);
}

.bookmy-app-content p{

    color:
      var(--app-text);

    font-size:18px;

    line-height:1.8;

    max-width:520px;

    margin-bottom:35px;
}

/* STORE */

.bookmy-store-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;
}

.bookmy-store-buttons a{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:
      var(--store-text);

    padding:16px 26px;

    border-radius:100px;

    background:
      var(--store-bg);

    border:
      1px solid
      var(--store-border);

    transition:.35s;
}

.bookmy-store-buttons a:hover{

    transform:
      translateY(-5px);

    background:
      var(--store-hover);

    color:#fff;
}

/* VISUAL */

.bookmy-app-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;
}

.bookmy-app-visual img{

    width:100%;

    max-width:780px;

    transform:
      perspective(1200px)
      rotateY(-12deg)
      rotateX(4deg);

    filter:
      drop-shadow(
        0 30px 60px
        rgba(0,0,0,.25)
      );

    animation:
      iphoneFloat 6s ease-in-out infinite;
}

/* CIRCLES */

.bookmy-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);
}

.bookmy-circle-1{

    width:300px;

    height:300px;

    background:
      var(--circle-1);

    left:0;

    top:20%;

    opacity:.25;
}

.bookmy-circle-2{

    width:400px;

    height:400px;

    background:
      var(--circle-2);

    right:0;

    bottom:0;

    opacity:.2;
}

/* ANIMATION */

@keyframes iphoneFloat{

0%{
transform:
perspective(1200px)
rotateY(-12deg)
rotateX(4deg)
translateY(0);
}

50%{
transform:
perspective(1200px)
rotateY(-8deg)
rotateX(2deg)
translateY(-15px);
}

100%{
transform:
perspective(1200px)
rotateY(-12deg)
rotateX(4deg)
translateY(0);
}
}

/* RESPONSIVE */

@media(max-width:991px){

.bookmy-app-grid{

grid-template-columns:1fr;
}

.bookmy-app-content{

text-align:center;
}

.bookmy-app-content p{

margin:auto auto 35px;
}

.bookmy-store-buttons{

justify-content:center;
}

.bookmy-app-visual{

margin-top:40px;
}

.bookmy-app-visual img{

max-width:500px;
}
}

@media(max-width:768px){

.bookmy-store-links{

display:none;
}

.bookmy-app-showcase{

padding:60px 25px;
}

.bookmy-app-content h2{

font-size:38px;
}

.bookmy-store-buttons{

flex-direction:column;
}

.bookmy-store-buttons a{

justify-content:center;
}
}
/* ===========================
   BOOKMY - LEGALES DARK MODE
=========================== */

.bookmy-legal-wrapper{
    font-family: "Google Sans", "Product Sans", "Inter", "Segoe UI", sans-serif;
    background:#0b1118;
    padding:80px 20px;
}

.bookmy-legal-container{
    max-width:1200px;
    margin:0 auto;
}

.bookmy-legal-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
    margin-bottom:50px;
}

.bookmy-legal-nav a{
    text-decoration:none;
    background:#70c1a6;
    color:#fff;
    padding:12px 24px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.bookmy-legal-nav a:hover{
    background:#00df89;
    transform:translateY(-3px);
}

.bookmy-legal-section{
    background:#131c27;
    padding:50px;
    border-radius:20px;
    margin-bottom:40px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.bookmy-legal-section h2{
    font-size:38px;
    color:#ffffff;
    margin-bottom:15px;
    position:relative;
    padding-bottom:15px;
}

.bookmy-legal-section h2::after{
    content:'';
    width:80px;
    height:4px;
    background:#00c77a;
    position:absolute;
    left:0;
    bottom:0;
    border-radius:10px;
}

.bookmy-legal-update{
    color:#9ca3af;
    margin-bottom:35px;
    font-size:14px;
}

.bookmy-legal-section h3{
    color:#ffffff;
    margin-top:35px;
    margin-bottom:15px;
    font-size:24px;
}

.bookmy-legal-section p{
    color:#c7d2de;
    line-height:1.8;
    margin-bottom:15px;
}

.bookmy-legal-section ul{
    margin:15px 0;
    padding-left:20px;
}

.bookmy-legal-section li{
    color:#c7d2de;
    margin-bottom:10px;
    line-height:1.7;
}

.bookmy-legal-highlight{
    background:rgba(0,199,122,.08);
    border:1px solid rgba(0,199,122,.25);
    border-left:5px solid #00c77a;
    padding:20px;
    border-radius:12px;
    margin:25px 0;
    color:#e5e7eb;
}

.bookmy-legal-section a{
    color:#00c77a;
}

.bookmy-legal-section a:hover{
    color:#00df89;
}

@media(max-width:768px){

    .bookmy-legal-wrapper{
        padding:50px 15px;
    }

    .bookmy-legal-section{
        padding:30px 20px;
    }

    .bookmy-legal-section h2{
        font-size:28px;
    }

    .bookmy-legal-section h3{
        font-size:20px;
    }

}

/* ==========================
   BOOKMY COOKIE POPUP
========================== */

#bookmy-cookie-overlay{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;
    transition:.4s;
}

#bookmy-cookie-overlay.show{
    opacity:1;
    visibility:visible;
}

#bookmy-cookie-popup{
    width:95%;
    max-width:520px;

    background:rgba(17,24,39,.85);

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

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

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.05);

    text-align:center;

    font-family:"Google Sans Text","Google Sans","Product Sans","Segoe UI",sans-serif;
}

.bookmy-cookie-icon{
    font-size:50px;
    margin-bottom:15px;
}

#bookmy-cookie-popup h3{
    color:#fff;
    font-size:28px;
    margin-bottom:15px;
    font-weight:700;
}

#bookmy-cookie-popup p{
    color:#cfd8e3;
    line-height:1.8;
    margin-bottom:25px;
}

.bookmy-cookie-policy{
    text-align:left;
    margin-bottom:25px;
}

.bookmy-cookie-policy label{
    display:flex;
    align-items:flex-start;
    gap:10px;

    color:#cfd8e3;
    font-size:14px;
    line-height:1.6;
}

.bookmy-cookie-policy input{
    margin-top:3px;
    accent-color:#00c77a;
}

.bookmy-cookie-policy a{
    color:#00c77a;
    text-decoration:none;
    font-weight:600;
}

.bookmy-cookie-policy a:hover{
    color:#00e38b;
}

.bookmy-cookie-buttons{
    display:flex;
    gap:15px;
}

.bookmy-cookie-buttons button{
    flex:1;
    border:none;
    cursor:pointer;

    padding:14px 20px;

    border-radius:14px;

    font-size:15px;
    font-weight:600;

    transition:.3s;
}

#bookmy-reject-btn{
    background:rgba(255,255,255,.08);
    color:#fff;
}

#bookmy-reject-btn:hover{
    background:rgba(255,255,255,.15);
}

#bookmy-accept-btn{
    background:#00c77a;
    color:#fff;
}

#bookmy-accept-btn:hover{
    background:#00dd87;
    transform:translateY(-2px);
}

@media(max-width:768px){

    #bookmy-cookie-popup{
        padding:25px;
    }

    .bookmy-cookie-buttons{
        flex-direction:column;
    }

    #bookmy-cookie-popup h3{
        font-size:24px;
    }

}

<!-- PRECIOS 1 -->
/* ==================================================
BOOKMY 3D PRICING (AISLADO)
NO AFECTA EL RESTO DEL SITIO
================================================== */

.bookmy3d-section,
.bookmy3d-section *{
box-sizing:border-box;
}

.bookmy3d-section{

--bm3d-primary:#74f3d0;
--bm3d-glass:rgba(255,255,255,.06);
--bm3d-border:rgba(255,255,255,.12);

padding:120px 20px;

background:
radial-gradient(circle at 20% 30%,rgba(0,255,190,.12),transparent 30%),
radial-gradient(circle at 80% 15%,rgba(0,255,190,.10),transparent 35%),
linear-gradient(
180deg,
#050811,
#03060e
);

overflow:hidden;

position:relative;

color:#fff;

font-family:inherit;

isolation:isolate;
}

/* HEADER */

.bookmy3d-section .bm3d-header{

text-align:center;

margin-bottom:70px;
}

.bookmy3d-section .bm3d-badge{

display:inline-flex;

padding:12px 24px;

border-radius:999px;

background:rgba(255,255,255,.05);

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

color:var(--bm3d-primary);

font-size:14px;

backdrop-filter:blur(20px);
}

.bookmy3d-section .bm3d-header h2{

margin:30px 0 10px;

font-size:clamp(36px,5vw,72px);

line-height:1.1;

color:#fff;
}

.bookmy3d-section .bm3d-header p{

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

font-size:18px;

margin:0;
}

/* CARDS */

.bookmy3d-section .bm3d-cards{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

perspective:2200px;
}

.bookmy3d-section .bm3d-card{

position:relative;

width:450px;

padding:42px;

border-radius:34px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.02)
);

border:1px solid var(--bm3d-border);

backdrop-filter:blur(40px);

transform-style:preserve-3d;

transition:
transform .15s linear,
box-shadow .35s;

overflow:hidden;

will-change:transform;

color:#fff;
}

.bookmy3d-section .bm3d-featured{

transform:rotate(-4deg);

border-color:
rgba(120,255,220,.35);
}

.bookmy3d-section .bm3d-card:hover{

box-shadow:
0 0 120px rgba(120,255,220,.15);
}

/* GLOW */

.bookmy3d-section .bm3d-glow{

position:absolute;

width:340px;

height:340px;

left:-80px;

top:-80px;

background:
radial-gradient(
circle,
rgba(120,255,220,.35),
transparent
);

filter:blur(70px);

pointer-events:none;
}

/* CONTENT */

.bookmy3d-section .bm3d-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:rgba(255,255,255,.06);

margin-bottom:30px;

font-size:28px;
}

.bookmy3d-section .bm3d-card h3{

margin:0 0 20px;

font-size:48px;

line-height:1.1;

color:#fff;
}

.bookmy3d-section .bm3d-card p{

margin:0;

line-height:1.7;

color:rgba(255,255,255,.75);
}

.bookmy3d-section .bm3d-price{

font-size:70px;

margin:40px 0;

font-weight:700;

color:var(--bm3d-primary);
}

.bookmy3d-section .bm3d-price span{

font-size:22px;

color:#fff;
}

.bookmy3d-section .bm3d-card button{

width:100%;

height:64px;

border:none;

border-radius:999px;

cursor:pointer;

font-size:18px;

font-weight:700;

background:
linear-gradient(
90deg,
#79ffd8,
#bbfff0
);

color:#071014;

transition:.35s;
}

.bookmy3d-section .bm3d-card button:hover{

transform:translateY(-4px);

box-shadow:
0 15px 40px rgba(120,255,220,.35);
}

.bookmy3d-section .bm3d-card ul{

list-style:none;

padding:35px 0;

margin:0;

display:flex;

flex-direction:column;

gap:16px;
}

.bookmy3d-section .bm3d-card li{

position:relative;

padding-left:34px;

color:#fff;
}

.bookmy3d-section .bm3d-card li::before{

content:"✓";

position:absolute;

left:0;

color:var(--bm3d-primary);
}

.bookmy3d-section .bm3d-footer{

padding-top:25px;

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

color:rgba(255,255,255,.8);
}

/* POPULAR */

.bookmy3d-section .bm3d-popular{

position:absolute;

top:30px;

right:30px;

padding:12px 24px;

border-radius:999px;

background:
linear-gradient(
90deg,
#82ffe0,
#bbfff1
);

color:#09120f;

font-weight:700;
}

/* FOOTER */

.bookmy3d-section .bm3d-bottom{

margin-top:70px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;
}

.bookmy3d-section .bm3d-bottom div{

padding:30px;

border-radius:28px;

background:
rgba(255,255,255,.05);

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

text-align:center;
}

/* RESPONSIVE */

@media (max-width:900px){

.bookmy3d-section{

padding:90px 20px;
}

.bookmy3d-section .bm3d-cards{

flex-direction:column;

align-items:center;
}

.bookmy3d-section .bm3d-card{

width:100%;

max-width:550px;
}

.bookmy3d-section .bm3d-featured{

transform:none;
}

.bookmy3d-section .bm3d-bottom{

grid-template-columns:1fr;
}

}

```css
/* ==================================
   BOOKMY FLOATING AI ASSISTANT
================================== */

.bm-assistant{
    font-family:'Google Sans',sans-serif;
}

/* ==========================
   BOTÓN FLOTANTE
========================== */

.bm-floating-btn{

    position:fixed;
    right:25px;
    bottom:25px;

    width:75px;
    height:75px;

    border:none;
    cursor:pointer;

    border-radius:50%;

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

    z-index:9999;

    overflow:hidden;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(20px);

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

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

    box-shadow:
    0 8px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.15);

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

}

/* REFLEJO GLASS */

.bm-floating-btn::before{

    content:"";

    position:absolute;

    top:-50%;
    left:-120%;

    width:80%;
    height:220%;

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

    transform:rotate(20deg);

    animation:
    bmGlassMove 4s linear infinite;

}

/* HOVER */

.bm-floating-btn:hover{

    transform:
    translateY(-5px)
    scale(1.08);

    box-shadow:
    0 15px 45px rgba(112,193,166,.35),
    0 0 25px rgba(112,193,166,.25);

}

.bm-floating-btn img{

    width:38px;
    height:38px;

    object-fit:contain;

    position:relative;
    z-index:2;

}

/* ANIMACIÓN */

@keyframes bmGlassMove{

    0%{
        left:-150%;
    }

    100%{
        left:180%;
    }

}
.bm-bot{

    animation:
    bmFade .3s ease;

}

@keyframes bmFade{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.bm-floating-btn img{

    width:38px;
    height:38px;

    object-fit:contain;
}

/* ==========================
   MENÚ DESPLEGABLE
========================== */

.bm-support-menu{

    position:fixed;

    right:25px;
    bottom:115px;

    width:290px;

    opacity:0;
    visibility:hidden;

    transform:
    translateY(20px);

    transition:.35s;

    z-index:9998;
    font-family:'Google Sans',sans-serif;

}

.bm-support-menu.active{

    opacity:1;
    visibility:visible;

    transform:
    translateY(0);

}

.bm-support-menu button{

    width:100%;

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

    margin-bottom:12px;

    padding:18px;

    border:none;
    cursor:pointer;

    text-align:left;

    color:#fff;

    font-size:15px;
    font-weight:600;

    border-radius:18px;

    background:
    rgba(14,20,27,.95);

    border:
    1px solid rgba(112,193,166,.18);

    backdrop-filter:
    blur(20px);

    transition:.3s;
    font-family:'Google Sans',sans-serif;

}

.bm-support-menu button:hover{

    border-color:#70c1a6;

    transform:
    translateX(-4px);

    box-shadow:
    0 0 20px rgba(112,193,166,.18);

}

.bm-support-menu button span{

    font-size:22px;
    font-family:'Google Sans',sans-serif;
}

/* ==========================
   CHATBOT
========================== */

.bm-chatbot{

    position:fixed;

    right:25px;
    bottom:115px;

    width:390px;
    max-width:92vw;

    background:
    rgba(15,20,28,.98);

    border:
    1px solid rgba(112,193,166,.20);

    border-radius:24px;

    overflow:hidden;

    opacity:0;
    visibility:hidden;

    transform:
    translateY(20px);

    transition:.35s;

    z-index:10000;

    backdrop-filter:
    blur(20px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.55);
    font-family:'Google Sans',sans-serif;

}

.bm-chatbot.active{

    opacity:1;
    visibility:visible;

    transform:
    translateY(0);

}

/* ==========================
   HEADER CHAT
========================== */

.bm-chat-header{

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

    padding:18px;

    border-bottom:
    1px solid rgba(255,255,255,.06);

    background:
    rgba(112,193,166,.05);

}

.bm-chat-icon{

    width:55px;
    height:55px;

    border-radius:16px;

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

    background:
    rgba(112,193,166,.08);

}

.bm-chat-icon img{

    width:40px;
    height:40px;

    object-fit:contain;

}

.bm-chat-header h4{

    margin:0;

    color:#fff;

    font-size:18px;
    font-weight:700;
    font-family:'Google Sans',sans-serif;

}

.bm-chat-header span{

    color:#70c1a6;

    font-size:13px;
    font-family:'Google Sans',sans-serif;

}

/* ==========================
   BODY CHAT
========================== */

.bm-chat-body{

    padding:18px;

    max-height:500px;

    overflow-y:auto;

}

.bm-chat-body::-webkit-scrollbar{

    width:5px;

}

.bm-chat-body::-webkit-scrollbar-thumb{

    background:#70c1a6;

    border-radius:20px;

}

/* ==========================
   MENSAJES
========================== */

.bm-message{

    padding:14px 16px;

    border-radius:18px;

    margin-bottom:14px;

    line-height:1.6;

    font-size:14px;
    font-family:'Google Sans',sans-serif;

}

.bm-bot{

    background:
    #1a2230;

    color:#fff;

}

.bm-user{

    background:
    #70c1a6;

    color:#071116;

    margin-left:45px;

    font-weight:600;

}

/* ==========================
   OPCIONES CHAT
========================== */

.bm-options{

    margin-top:10px;

}

.bm-options button{

    width:100%;

    text-align:left;

    padding:14px 16px;

    margin-top:10px;

    border:none;

    cursor:pointer;

    border-radius:14px;

    background:
    #1d2735;

    color:#fff;

    font-size:14px;

    transition:.3s;

}

.bm-options button:hover{

    background:#70c1a6;

    color:#071116;

    transform:
    translateX(4px);

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

    .bm-floating-btn{

        right:18px;
        bottom:18px;

        width:65px;
        height:65px;

    }

    .bm-chatbot{

        width:calc(100vw - 20px);

        right:10px;
        left:10px;

        bottom:95px;

    }

    .bm-support-menu{

        width:calc(100vw - 20px);

        right:10px;
        left:10px;

        bottom:95px;

    }

}


/* ==========================
   CONTACTO
========================== */

.bm-contact{

    padding:120px 20px;

    position:relative;

}
.bm-contact-form input:invalid,
.bm-contact-form textarea:invalid{

    border:1px solid #ff5b5b;

}

.bm-contact-form input:valid,
.bm-contact-form textarea:valid{

    border:1px solid #70c1a6;

}

.bm-contact-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:60px;

    align-items:center;

}

/* INFO */

.bm-contact-badge{

    display:inline-block;

    color:#70c1a6;

    border:1px solid rgba(112,193,166,.25);

    padding:10px 18px;

    border-radius:50px;

    margin-bottom:20px;

    background:
    rgba(112,193,166,.08);

}

.bm-contact-info h2{

    font-size:48px;

    line-height:1.1;

    margin-bottom:20px;

    color:#fff;

}

.bm-contact-info p{

    color:#b8c0cf;

    font-size:17px;

    line-height:1.8;

    margin-bottom:40px;

}

.bm-contact-items{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.bm-contact-item{

    display:flex;

    gap:18px;

    align-items:center;

}

.bm-contact-icon{

    width:60px;
    height:60px;

    border-radius:18px;

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

    font-size:24px;

    background:
    rgba(112,193,166,.08);

    border:
    1px solid rgba(112,193,166,.15);

}

.bm-contact-item h4{

    color:#fff;

    margin-bottom:5px;

}

.bm-contact-item span{

    color:#aab3c2;

}

/* FORMULARIO */

.bm-contact-form-wrap{

    padding:35px;

    border-radius:30px;

    background:
    rgba(255,255,255,.04);

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

    backdrop-filter:
    blur(20px);

}

.bm-form-group{

    margin-bottom:18px;

}

.bm-contact-form input,
.bm-contact-form textarea{

    width:100%;

    padding:18px 20px;

    border:none;

    outline:none;

    color:#fff;

    border-radius:16px;

    background:
    rgba(255,255,255,.05);

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

}

.bm-contact-form input:focus,
.bm-contact-form textarea:focus{

    border-color:#70c1a6;

}

.bm-contact-btn{

    width:100%;

    border:none;

    cursor:pointer;

    padding:18px;

    font-size:16px;

    font-weight:700;

    border-radius:18px;

    color:#071116;

    background:#70c1a6;

    transition:.3s;

}

.bm-contact-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 30px rgba(112,193,166,.35);

}

/* RESPONSIVE */

@media(max-width:991px){

    .bm-contact-container{

        grid-template-columns:1fr;

    }

    .bm-contact-info h2{

        font-size:36px;

    }

}
.bm-notification{

    position:fixed;

    top:30px;
    right:30px;

    padding:18px 24px;

    background:
    rgba(112,193,166,.95);

    color:#071116;

    font-weight:700;

    border-radius:16px;

    z-index:999999;

    opacity:0;

    visibility:hidden;

    transform:
    translateY(-20px);

    transition:.35s ease;

    box-shadow:
    0 15px 40px rgba(112,193,166,.35);

}

.bm-notification.show{

    opacity:1;

    visibility:visible;

    transform:
    translateY(0);

}