:root{
  --bg:#0b0b0b;
  --text:#f2f2f2;
  --muted:#cfcfcf;
  --gold:#E4C970;
  --card:#101214;
  --border:#1f2428;
  --tealA:#0F3A45;
  --tealB:#206D7B;
  --grad:linear-gradient(135deg,#5F3CE7 0%,#FF6A3D 40%,#FFB84D 100%);
  --font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --font-size-base:16px;
  --line-height-base:1.6;
  --spacing-xs:4px;
  --spacing-sm:8px;
  --spacing-md:16px;
  --spacing-lg:24px;
  --spacing-xl:32px;
  --spacing-2xl:48px;
  --spacing-3xl:64px;
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:24px;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.1);
  --shadow-md:0 8px 24px rgba(0,0,0,0.18);
  --shadow-lg:0 10px 24px rgba(0,0,0,0.25);
  --transition-fast:0.2s ease;
  --transition-normal:0.3s ease;
  --transition-slow:0.6s ease;
  --z-dropdown:1000;
  --z-sticky:1020;
  --z-fixed:1030;
  --z-modal:1040;
  --z-popover:1050;
  --z-tooltip:1060;
}

/* ===== RESET Y BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:var(--font-size-base);scroll-behavior:smooth;}
body{font-family:var(--font-family);line-height:var(--line-height-base);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-x:contain;}

/* ===== TIPOGRAFÍA ===== */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm);}
h1{font-size:clamp(26px,5vw,48px);}
h2{font-size:28px;}
h3{font-size:24px;}
h4{font-size:20px;}
p{margin-bottom:var(--spacing-md);color:var(--muted);}
a{color:inherit;text-decoration:none;transition:all var(--transition-fast);}
a:hover{opacity:0.8;}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;margin:0;padding:0;}
button{border:none;background:none;cursor:pointer;font-family:inherit;font-size:inherit;}

/* ===== FOCUS Y ACCESIBILIDAD ===== */
:focus{outline:2px solid var(--gold);outline-offset:2px;}
.skip-link{position:absolute;top:-40px;left:6px;background:var(--gold);color:var(--bg);padding:8px;text-decoration:none;border-radius:var(--radius-sm);z-index:var(--z-tooltip);}
.skip-link:focus{top:6px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ===== LAYOUT Y GRID ===== */
.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);}
.grid{display:grid;gap:var(--spacing-md);}
.grid.cols-2{grid-template-columns:1fr;}
.grid.cols-3{grid-template-columns:1fr;}

/* ===== UTILIDADES DE ESPACIADO ===== */
.mt-1{margin-top:var(--spacing-xs);}
.mt-2{margin-top:var(--spacing-sm);}
.mt-3{margin-top:var(--spacing-md);}
.mt-4{margin-top:var(--spacing-lg);}
.mt-5{margin-top:var(--spacing-xl);}
.mt-6{margin-top:var(--spacing-2xl);}
.mb-1{margin-bottom:var(--spacing-xs);}
.mb-2{margin-bottom:var(--spacing-sm);}
.mb-3{margin-bottom:var(--spacing-md);}
.mb-4{margin-bottom:var(--spacing-lg);}
.mb-5{margin-bottom:var(--spacing-xl);}
.mb-6{margin-bottom:var(--spacing-2xl);}

/* ===== COMPONENTES BASE ===== */
.row{display:flex;align-items:center;gap:var(--spacing-md);}

/* ===== HEADER Y NAVEGACIÓN ===== */
.header{position:sticky;top:0;z-index:var(--z-sticky);backdrop-filter:saturate(1.4) blur(6px);background:rgba(0,0,0,0.4);border-bottom:1px solid var(--border);width:100%;max-width:100svw;overflow-x:clip;contain:layout paint;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) 0;gap:clamp(8px,3vw,22px);max-width:100%;}
.brand{display:flex;align-items:center;gap:var(--spacing-lg);min-width:0;}
.brand img{height:84px;width:auto;}
.brand-name{font-weight:800;letter-spacing:0.2px;font-size:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-links{display:flex;gap:var(--spacing-lg);align-items:center;flex-wrap:nowrap;max-width:100%;overflow:hidden;}
.nav-links a{opacity:0.9;font-weight:500;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);transition:all var(--transition-fast);white-space:nowrap;}
.nav-links a:hover{opacity:1;background:rgba(255,255,255,0.1);}

/* Centrar botones CTA en la navegación */
.nav-links {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
  justify-content: center;
}

.nav-links .cta-link {
  margin: 0 auto;
  text-align: center;
}

/* ===== BOTÓN HAMBURGUESA ===== */
.hamburger{display:none;flex-direction:column;gap:4px;padding:var(--spacing-sm);background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);}
.hamburger-line{width:20px;height:2px;background:var(--text);transition:all var(--transition-fast);}

/* ===== BACKGROUND BLOBS ===== */
.blob{position:absolute;filter:blur(80px);opacity:0.4;border-radius:50%;z-index:-1;pointer-events:none;}
.blob.left{left:-180px;top:40px;width:360px;height:360px;background:radial-gradient(60% 60% at 50% 50%,var(--tealB),transparent 60%);}
.blob.right{right:-220px;bottom:40px;width:460px;height:460px;background:radial-gradient(60% 60% at 50% 50%,var(--tealA),transparent 60%);}

/* ===== SLIDER ===== */
.slider{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-xl);height:62vh;min-height:420px;width:100%;max-width:100svw;isolation:isolate;}
.slide{position:absolute;inset:0;transition:opacity var(--transition-slow) ease;opacity:0;}
.slide.active{opacity:1;}
.slide img{width:100%;height:100%;object-fit:cover;display:block;max-width:none;}
.slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85),rgba(0,0,0,0.6),rgba(0,0,0,0.3),rgba(0,0,0,0.1));pointer-events:none;z-index:1;}
.slide-content{position:absolute;left:0;right:0;bottom:0;padding:0 var(--spacing-lg) var(--spacing-xl);z-index:2;pointer-events:auto;}
.slide-inner{max-width:720px;margin:0 auto;text-align:center;position:relative;z-index:3;}

/* ===== CONTENIDO DEL SLIDER ===== */
.h1{font-size:clamp(26px,5vw,48px);margin:0 0 var(--spacing-sm);color:#ffffff;font-weight:800;text-shadow:2px 2px 8px rgba(0,0,0,0.8),0 0 20px rgba(0,0,0,0.6);line-height:1.1;letter-spacing:-0.02em;}
.p{margin:0;color:#ffffff;font-size:1.2rem;font-weight:600;text-shadow:1px 1px 4px rgba(0,0,0,0.9),0 0 15px rgba(0,0,0,0.7);line-height:1.3;opacity:0.95;}

/* ===== NAVEGACIÓN DEL SLIDER ===== */
.dots{position:absolute;left:0;right:0;bottom:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm);}
.dot{width:34px;height:8px;border-radius:999px;background:#ffffff30;border:none;cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden;}
.dot.active{background:var(--gold);}
.dot:hover{background:rgba(255,255,255,0.5);}
.dot::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gold);transition:left var(--transition-normal);}
.dot.active::before{left:0;}

.slider-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.7);border:2px solid rgba(255,255,255,0.2);color:#ffffff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);z-index:10;opacity:1;min-width:48px;min-height:48px;box-shadow:0 4px 15px rgba(0,0,0,0.3);}
.slider:hover .slider-nav{opacity:1;background:rgba(0,0,0,0.9);border-color:var(--gold);transform:translateY(-50%) scale(1.05);}
.slider-nav:hover{background:rgba(0,0,0,0.95);border-color:var(--gold);box-shadow:0 6px 20px rgba(0,0,0,0.5),0 0 0 3px rgba(228,201,112,0.3);}
.slider-nav.prev{left:var(--spacing-md);}
.slider-nav.next{right:var(--spacing-md);}
.nav-arrow{font-size:28px;font-weight:900;touch-action:manipulation;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#ffffff;text-shadow:1px 1px 2px rgba(0,0,0,0.8);}

/* ===== BOTONES DE WHATSAPP ===== */
.wa-row{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-top:var(--spacing-lg);justify-content:center;align-items:center;}

/* Estilos base para todos los botones de WhatsApp */
.wa{color:#ffffff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);display:inline-flex;align-items:center;gap:var(--spacing-sm);box-shadow:0 8px 25px rgba(0,0,0,0.4),0 4px 15px rgba(0,0,0,0.3);font-weight:700;transition:all var(--transition-fast);border:2px solid rgba(255,255,255,0.1);backdrop-filter:blur(10px);text-decoration:none;cursor:pointer;position:relative;overflow:hidden;text-shadow:1px 1px 2px rgba(0,0,0,0.3);}

/* Asegurar que los botones de WhatsApp en el slider tengan los mismos estilos */
.slide .wa-row .wa,
.slider .wa-row .wa,
.slide-content .wa-row .wa {
  color: #ffffff !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  border-radius: var(--radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4), 0 4px 15px rgba(0,0,0,0.3) !important;
  font-weight: 700 !important;
  transition: all var(--transition-fast) !important;
  border: 2px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(10px) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
  z-index: 5 !important;
  /* Asegurar que el texto sea legible */
  font-size: 1rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  /* Asegurar que los botones sean clickeables */
  pointer-events: auto !important;
  user-select: none !important;
  /* Asegurar que estén por encima del overlay */
  z-index: 10 !important;
  position: relative !important;
}
.wa:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,0.6),0 8px 25px rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.4);}

/* Hover específico para cada tipo de botón */
.wa.blue:hover{background:#0066e6;box-shadow:0 15px 35px rgba(0,102,230,0.5),0 8px 25px rgba(0,102,230,0.4);}
.wa.pink:hover{background:#e91e63;box-shadow:0 15px 35px rgba(233,30,99,0.5),0 8px 25px rgba(233,30,99,0.4);}
.wa.gradient:hover{background:linear-gradient(135deg,#6366f1 0%,#ef4444 50%,#f97316 100%);box-shadow:0 15px 35px rgba(99,102,241,0.5),0 8px 25px rgba(99,102,241,0.4);}

/* Colores base para cada tipo de botón - aplicados a todos los botones incluyendo los del slider */
.wa.blue{background:#0056cc;box-shadow:0 8px 25px rgba(0,86,204,0.4),0 4px 15px rgba(0,86,204,0.3);}
.wa.pink{background:#d63384;box-shadow:0 8px 25px rgba(214,51,132,0.4),0 4px 15px rgba(214,51,132,0.3);}
.wa.gradient{background:linear-gradient(135deg,#4f46e5 0%,#dc2626 50%,#ea580c 100%);box-shadow:0 8px 25px rgba(79,70,229,0.4),0 4px 15px rgba(79,70,229,0.3);}

/* Asegurar que los colores se apliquen también en el slider */
.slide .wa-row .wa.blue,
.slider .wa-row .wa.blue,
.slide-content .wa-row .wa.blue {
  background: #0056cc !important;
  box-shadow: 0 8px 25px rgba(0,86,204,0.4), 0 4px 15px rgba(0,86,204,0.3) !important;
}

.slide .wa-row .wa.pink,
.slider .wa-row .wa.pink,
.slide-content .wa-row .wa.pink {
  background: #d63384 !important;
  box-shadow: 0 8px 25px rgba(214,51,132,0.4), 0 4px 15px rgba(214,51,132,0.3) !important;
}

.slide .wa-row .wa.gradient,
.slider .wa-row .wa.gradient,
.slide-content .wa-row .wa.gradient {
  background: linear-gradient(135deg,#4f46e5 0%,#dc2626 50%,#ea580c 100%) !important;
  box-shadow: 0 8px 25px rgba(79,70,229,0.4), 0 4px 15px rgba(79,70,229,0.3) !important;
}
.wa-icon{font-size:1.2em;width:20px;height:20px;flex-shrink:0;}

/* Asegurar que los iconos de WhatsApp en el slider se vean correctamente */
.slide .wa-row .wa .wa-icon,
.slider .wa-row .wa .wa-icon,
.slide-content .wa-row .wa .wa-icon {
  font-size: 1.2em !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  filter: brightness(1) !important;
}

/* Reglas adicionales para asegurar que los botones sean clickeables */
.slide .wa-row,
.slider .wa-row,
.slide-content .wa-row {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Asegurar que cada botón individual sea clickeable */
.slide .wa-row .wa *,
.slider .wa-row .wa *,
.slide-content .wa-row .wa * {
  pointer-events: auto !important;
}

/* ===== ANIMACIONES DE MOUSE OVER PARA BOTONES WHATSAPP ===== */
/* Efecto de elevación suave */
.slide .wa-row .wa,
.slider .wa-row .wa,
.slide-content .wa-row .wa {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(0) scale(1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Efecto de entrada suave para los botones */
.slide .wa-row .wa {
  animation: slideInUp 0.6s ease-out !important;
  animation-fill-mode: both !important;
}

.slide .wa-row .wa:nth-child(1) { animation-delay: 0.1s !important; }
.slide .wa-row .wa:nth-child(2) { animation-delay: 0.2s !important; }
.slide .wa-row .wa:nth-child(3) { animation-delay: 0.3s !important; }

/* Hover con elevación y escala */
.slide .wa-row .wa:hover,
.slider .wa-row .wa:hover,
.slide-content .wa-row .wa:hover {
  transform: translateY(-8px) scale(1.05) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3) !important;
}

/* Efecto de brillo en hover */
.slide .wa-row .wa::before,
.slider .wa-row .wa::before,
.slide-content .wa-row .wa::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transition: left 0.6s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.slide .wa-row .wa:hover::before,
.slider .wa-row .wa:hover::before,
.slide-content .wa-row .wa:hover::before {
  left: 100% !important;
}

/* Efecto de pulso en hover */
.slide .wa-row .wa:hover .wa-icon,
.slider .wa-row .wa:hover .wa-icon,
.slide-content .wa-row .wa:hover .wa-icon {
  animation: pulse 0.6s ease-in-out !important;
}

/* Efecto de borde brillante en hover */
.slide .wa-row .wa:hover,
.slider .wa-row .wa:hover,
.slide-content .wa-row .wa:hover {
  border-color: rgba(255,255,255,0.6) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.2) !important;
}

/* ===== ANIMACIONES ESPECÍFICAS POR TIPO DE BOTÓN ===== */
/* Botón Azul - Efecto de onda */
.slide .wa-row .wa.blue:hover,
.slider .wa-row .wa.blue:hover,
.slide-content .wa-row .wa.blue:hover {
  background: #0066e6 !important;
  box-shadow: 0 20px 40px rgba(0,102,230,0.5), 0 10px 20px rgba(0,102,230,0.4), 0 0 0 3px rgba(0,102,230,0.3) !important;
}

.slide .wa-row .wa.blue:hover::after,
.slider .wa-row .wa.blue:hover::after,
.slide-content .wa-row .wa.blue:hover::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: ripple 0.8s ease-out !important;
  z-index: 0 !important;
}

/* Botón Rosa - Efecto de vibración */
.slide .wa-row .wa.pink:hover,
.slider .wa-row .wa.pink:hover,
.slide-content .wa-row .wa.pink:hover {
  background: #e91e63 !important;
  box-shadow: 0 20px 40px rgba(233,30,99,0.5), 0 10px 20px rgba(233,30,99,0.4), 0 0 0 3px rgba(233,30,99,0.3) !important;
  animation: shake 0.5s ease-in-out !important;
}

/* Botón Gradiente - Efecto de rotación de gradiente */
.slide .wa-row .wa.gradient:hover,
.slider .wa-row .wa.gradient:hover,
.slide-content .wa-row .wa.gradient:hover {
  background: linear-gradient(135deg,#6366f1 0%,#ef4444 50%,#f97316 100%) !important;
  box-shadow: 0 20px 40px rgba(99,102,241,0.5), 0 10px 20px rgba(99,102,241,0.4), 0 0 0 3px rgba(99,102,241,0.3) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 2s ease infinite !important;
}

/* ===== KEYFRAMES PARA ANIMACIONES ===== */
@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

@keyframes shake {
  0%, 100% { transform: translateY(-8px) scale(1.05) rotate(0deg); }
  25% { transform: translateY(-8px) scale(1.05) rotate(-1deg); }
  75% { transform: translateY(-8px) scale(1.05) rotate(1deg); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Estados adicionales para mejor accesibilidad */
.wa:focus{outline:3px solid rgba(255,255,255,0.8);outline-offset:2px;transform:scale(1.02);}
.wa:active{transform:translateY(-1px) scale(0.98);}
.wa:focus-visible{outline:3px solid rgba(255,255,255,0.9);outline-offset:3px;}

/* Focus mejorado para botones del slider */
.slide .wa-row .wa:focus,
.slider .wa-row .wa:focus,
.slide-content .wa-row .wa:focus {
  outline: 3px solid rgba(255,255,255,0.9) !important;
  outline-offset: 3px !important;
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,255,255,0.4) !important;
}

/* Efecto de presión al hacer click */
.slide .wa-row .wa:active,
.slider .wa-row .wa:active,
.slide-content .wa-row .wa:active {
  transform: translateY(-2px) scale(0.98) !important;
  transition: all 0.1s ease !important;
}

/* Asegurar que los efectos de hover funcionen en el slider */
.slide .wa-row .wa:hover,
.slider .wa-row .wa:hover,
.slide-content .wa-row .wa:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 8px 25px rgba(0,0,0,0.5) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* Hover específico para cada tipo de botón en el slider */
.slide .wa-row .wa.blue:hover,
.slider .wa-row .wa.blue:hover,
.slide-content .wa-row .wa.blue:hover {
  background: #0066e6 !important;
  box-shadow: 0 15px 35px rgba(0,102,230,0.5), 0 8px 25px rgba(0,102,230,0.4) !important;
}

.slide .wa-row .wa.pink:hover,
.slider .wa-row .wa.pink:hover,
.slide-content .wa-row .wa.pink:hover {
  background: #e91e63 !important;
  box-shadow: 0 15px 35px rgba(233,30,99,0.5), 0 8px 25px rgba(233,30,99,0.4) !important;
}

.slide .wa-row .wa.gradient:hover,
.slider .wa-row .wa.gradient:hover,
.slide-content .wa-row .wa.gradient:hover {
  background: linear-gradient(135deg,#6366f1 0%,#ef4444 50%,#f97316 100%) !important;
  box-shadow: 0 15px 35px rgba(99,102,241,0.5), 0 8px 25px rgba(99,102,241,0.4) !important;
}

/* ===== ENLACES CTA ===== */
.cta-link{background:var(--gold);color:var(--bg) !important;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:600;transition:all var(--transition-fast);}
.cta-link:hover{background:#d4b860;transform:translateY(-2px);box-shadow:0 8px 20px rgba(228,201,112,0.3);}

/* ===== SECCIONES ===== */
.section{position:relative;padding:var(--spacing-3xl) 0;}
.section-title{font-size:28px;text-align:center;margin:0 0 var(--spacing-lg);color:var(--gold);font-weight:800;}

/* ===== SECCIÓN DE PAGOS ===== */
.payment-link-section {
  text-align: center;
}

.payment-link-content {
  max-width: 600px;
  margin: 0 auto;
}

.payment-link-content .section-subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.payment-link-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-lg);
}

.payment-link-cta .btn {
  min-width: 280px;
  justify-content: center;
  font-size: 1.1rem;
  padding: var(--spacing-md) var(--spacing-xl);
}

/* Responsive para la sección de pagos */
@media (max-width: 768px) {
  .payment-link-content {
    max-width: 100%;
    padding: 0 var(--spacing-md);
  }
  
  .payment-link-cta .btn {
    min-width: 100%;
    max-width: 320px;
    padding: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .payment-link-cta .btn {
    min-width: 100%;
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* ===== TARJETAS ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-md);transition:all var(--transition-normal);}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.25);}
.team-card{height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.team-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(228,201,112,0.1),transparent);transition:left var(--transition-normal);}
.team-card:hover::before{left:100%;}

.team-info{flex:1;}
.avatar{width:68px;height:68px;border-radius:var(--radius-md);object-fit:cover;border:1px solid rgba(255,255,255,0.1);}
.small{font-size:14px;color:#cbd5e1;}

/* ===== BOTONES ===== */
.btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:0;font-weight:700;cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-fast);text-decoration:none;}
.btn.gold{background:var(--gold);color:#000;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.3);}
.btn:active{transform:translateY(1px);}
.btn-icon{font-size:1.1em;}

/* Estilos específicos para botones de pagos */
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4);
}

.btn-large {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: 1.2rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* ===== BOTÓN ANIMADO ===== */
.btn-animate{position:relative;overflow:hidden;}
.btn-animate::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;}
.btn-animate:hover::before{width:300px;height:300px;}

/* ===== INFORMACIÓN Y PRECIOS ===== */
.info-grid{gap:var(--spacing-lg);}
.info-content{display:flex;flex-direction:column;justify-content:center;}
.pricing-list{list-style:none;}
.pricing-list li{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-sm);background:rgba(255,255,255,0.05);border-radius:var(--radius-sm);position:relative;overflow:hidden;}
.pricing-list li::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(228,201,112,0.1),transparent);transition:left var(--transition-normal);}
.pricing-list li:hover::before{left:100%;}
.pricing-icon{font-size:1.2em;min-width:24px;}

.info-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-lg);height:fit-content;}
.contact-box{position:sticky;top:100px;}

/* ===== ENLACES SOCIALES ===== */
.social-links{margin-top:var(--spacing-lg);}
.social-title{margin-bottom:var(--spacing-md);font-weight:600;color:var(--muted);}
.social-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-sm);}
.social-link{background:#ffffff12;border-radius:var(--radius-md);padding:var(--spacing-sm);text-align:center;transition:all var(--transition-fast);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);position:relative;overflow:hidden;}
.social-link:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px);}
.social-link::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(228,201,112,0.2),transparent);transition:left var(--transition-normal);}
.social-link:hover::before{left:100%;}
.social-icon{font-size:1.2em;}
.social-name{font-size:12px;color:var(--muted);}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--border);padding:var(--spacing-xl) 0;color:#cbd5e1;background:var(--card);}
.footer-content{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-lg);}
.footer-brand{display:flex;align-items:center;gap:var(--spacing-md);}
.footer-logo{height:80px;width:auto;}
.footer-text p{margin-bottom:var(--spacing-xs);}
.footer-subtitle{font-size:14px;color:var(--muted);}
.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg);}
.footer-section h4{color:var(--gold);margin-bottom:var(--spacing-md);font-size:18px;}
.footer-section ul li{margin-bottom:var(--spacing-sm);}
.footer-section ul li a{color:var(--muted);transition:color var(--transition-fast);position:relative;padding-left:var(--spacing-sm);}
.footer-section ul li a:hover{color:var(--gold);}
.footer-section ul li a::before{content:'→';position:absolute;left:0;opacity:0;transform:translateX(-10px);transition:all var(--transition-fast);color:var(--gold);}
.footer-section ul li a:hover::before{opacity:1;transform:translateX(0);}
.footer-bottom{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--border);color:var(--muted);font-size:14px;}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:translateX(0);}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}
@keyframes slideInUp{from{opacity:0;transform:translateY(100px);}to{opacity:1;transform:translateY(0);}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9);}to{opacity:1;transform:scale(1);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-10px);}}
@keyframes shimmer{0%{background-position:-200px 0;}100%{background-position:calc(200px+100%) 0;}}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* ===== CLASES DE ANIMACIÓN ===== */
.animate-fade-in{animation:fadeIn 0.6s ease-out;}
.animate-fade-up{animation:fadeInUp 0.8s ease-out;}
.animate-fade-left{animation:fadeInLeft 0.8s ease-out;}
.animate-fade-right{animation:fadeInRight 0.8s ease-out;}
.animate-slide-up{animation:slideInUp 1s ease-out;}
.animate-scale-in{animation:scaleIn 0.6s ease-out;}
.animate-pulse{animation:pulse 2s infinite;}
.animate-float{animation:float 3s ease-in-out infinite;}

/* ===== EFECTOS HOVER ===== */
.hover-lift{transition:transform var(--transition-normal),box-shadow var(--transition-normal);}
.hover-lift:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.3);}
.hover-scale{transition:transform var(--transition-normal);}
.hover-scale:hover{transform:scale(1.05);}
.hover-glow{transition:box-shadow var(--transition-normal);}
.hover-glow:hover{box-shadow:0 0 20px rgba(228,201,112,0.4);}

/* ===== ELEMENTOS STAGGER ===== */
.stagger-item{opacity:0;animation:fadeInUp 0.6s ease-out forwards;}
.stagger-item:nth-child(1){animation-delay:0.1s;}
.stagger-item:nth-child(2){animation-delay:0.2s;}
.stagger-item:nth-child(3){animation-delay:0.3s;}
.stagger-item:nth-child(4){animation-delay:0.4s;}
.stagger-item:nth-child(5){animation-delay:0.5s;}

/* ===== UTILIDADES DE TRANSICIÓN ===== */
.will-change-transform{will-change:transform;}
.will-change-opacity{will-change:opacity;}
.state-transition{transition:all var(--transition-normal) cubic-bezier(0.4,0,0.2,1);}

/* ===== SPINNER DE CARGA ===== */
.spinner{width:40px;height:40px;border:4px solid rgba(228,201,112,0.3);border-top:4px solid var(--gold);border-radius:50%;animation:spin 1s linear infinite;}

/* ===== ESTADOS DE CARGA ===== */
body.loading{overflow:hidden;}
body.loading::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;}
body.loading::after{content:'';position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:3px solid var(--border);border-top:3px solid var(--gold);border-radius:50%;animation:spin 1s linear infinite;z-index:10000;}
body.page-hidden{opacity:0.5;transition:opacity var(--transition-fast);}

/* ===== FOCUS VISIBLE MEJORADO ===== */
.nav-link:focus,.wa:focus,.btn:focus,.dot:focus,.slider-nav:focus{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--radius-sm);}
a:focus-visible,button:focus-visible{outline:2px solid #E4C970;outline-offset:3px;border-radius:8px;}

/* ===== MEDIA QUERIES RESPONSIVAS ===== */
@media (min-width:640px){
  .grid.cols-2{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:960px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1200px){
  .container{max-width:1400px;}
  .slider{height:70vh;min-height:500px;}
  .slide-inner{max-width:800px;}
  .team-grid{gap:var(--spacing-xl);}
  .info-grid{gap:var(--spacing-2xl);}
}
@media (min-width:1600px){
  .container{max-width:1600px;}
  .slider{height:75vh;min-height:600px;}
  .slide-inner{max-width:900px;}
}

@media (max-width:768px){
  .mobile-nav-toggle{display:flex;}
  .desktop-nav{display:none;}
  .mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border-top:1px solid var(--border);padding:var(--spacing-md);flex-direction:column;gap:var(--spacing-sm);}
  .mobile-nav.active{display:flex;}
  .slider-nav{display:none;}
  .wa-row{flex-direction:column;justify-content:center;}
  .social-grid{grid-template-columns:repeat(3,1fr);}
  .footer-content{grid-template-columns:1fr;text-align:center;}
  .footer-brand{justify-content:center;flex-direction:column;}
  .blob.left{left:-30vw;width:60vw;height:60vw;}
  .blob.right{right:-30vw;width:70vw;height:70vw;}
}

/* ===== AJUSTES ESPECÍFICOS PARA ICONOS DEL SLIDER ===== */
@media (min-width:769px){
  .slider-nav .nav-arrow{
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
  }
}

@media (max-width:640px){
  .slider{height:56vh;min-height:360px;}
  .wa-row{flex-direction:column;align-items:center;}
  .wa{min-width:200px;justify-content:center;}
}

@media (max-width:480px){
  .container{padding:0 var(--spacing-sm);}
  .slider{height:50vh;min-height:300px;border-radius:0;border-left:none;border-right:none;}
  .slide-inner{margin-left:var(--spacing-sm);margin-right:var(--spacing-sm);}
  .section{padding:var(--spacing-xl) 0;}
  .hero-section{padding-top:0;}
  .social-grid{grid-template-columns:repeat(2,1fr);}
  .brand img{height:36px;}
  .brand-name{display:none;}
  .nav-links{gap:8px;}
}

@media (max-width:380px){
  .brand img{height:36px;}
  .brand-name{display:none;}
  .nav-links{gap:8px;}
}

/* ===== ORIENTACIÓN Y ALTURA ESPECÍFICA ===== */
@media (orientation:landscape) and (max-height:600px){
  .slider{height:80vh;min-height:300px;}
  .section{padding:var(--spacing-lg) 0;}
}
@media (orientation:portrait) and (max-width:768px){
  .slider{height:50vh;min-height:300px;}
  .wa-row{flex-direction:column;align-items:center;}
  .wa{min-width:200px;justify-content:center;}
}

/* ===== PREFERENCIAS DE USUARIO ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  .animate-fade-in,.animate-fade-up,.animate-fade-left,.animate-fade-right,.animate-slide-up,.animate-scale-in,.animate-pulse,.animate-float{animation:none;}
  .stagger-item{animation:none;opacity:1;}
  .blob{display:none;}
}

@media (prefers-contrast:high){
  :root{--border:#ffffff;--card:#000000;--text:#ffffff;--muted:#cccccc;}
  .card{border:2px solid var(--border);}
  .btn{border:2px solid currentColor;}
}

@media (prefers-color-scheme:light){
  :root{--bg:#ffffff;--text:#000000;--muted:#666666;--card:#f5f5f5;--border:#e0e0e0;}
  .blob.left{background:radial-gradient(60% 60% at 50% 50%,#e3f2fd,transparent 60%);}
  .blob.right{background:radial-gradient(60% 60% at 50% 50%,#f3e5f5,transparent 60%);}
}

/* ===== IMPRESIÓN ===== */
@media print{
  .header,.mobile-nav-toggle,.slider-nav,.dots,.wa-row,.social-links,.footer-links{display:none !important;}
  .slider{height:auto !important;min-height:auto !important;}
  .slide{position:static !important;opacity:1 !important;margin-bottom:var(--spacing-lg);}
  .slide::after{display:none;}
  .slide-content{position:static !important;padding:var(--spacing-md) !important;background:var(--card);border-radius:var(--radius-md);}
  body{background:white !important;color:black !important;}
  .card{border:1px solid #ccc !important;box-shadow:none !important;}
}

/* ===== CONTAINER QUERIES ===== */
@container (min-width:400px){
  .card{padding:var(--spacing-lg);}
}

/* ===== OPTIMIZACIONES ESPECÍFICAS PARA DISPOSITIVOS TÁCTILES ===== */
@media (hover:none){
  .btn,.wa,.cta-link{transform:none !important;}
}

/* ===== PREVENCIÓN DE OVERFLOW ===== */
html, body { width:100%; max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; }
:root, body, main, header, footer, section { max-width: 100svw; overflow-x: clip; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* ===== NAVEGACIÓN MÓVIL OPTIMIZADA ===== */
@media (max-width: 640px){
  .header{
    position: sticky; top: 0; z-index: 50;
    background: rgba(8,19,17,.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .nav{ flex-wrap: wrap; row-gap: 8px; align-items: center; }
  .brand{ flex: 1 1 auto; min-width: 0; }
  .nav-links{
    order: 3; width: 100%; max-width: 100%;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  .nav-links a{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 12px; border-radius: 12px; line-height: 1.1;
  }
  .nav-links a.cta-link{ order: 10; flex: 1 1 calc(50% - 4px); }
}

/* ===== OPTIMIZACIONES DE RENDIMIENTO ===== */
.optimized {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ===== OPTIMIZACIONES RESPONSIVAS DEL SLIDER ===== */
/* Botones de navegación siempre visibles en móviles */
@media (max-width: 768px) {
  .slider-nav {
    opacity: 1 !important;
    background: rgba(0,0,0,0.8) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  .nav-arrow {
    font-size: 24px !important;
  }
  
  .slider-nav.prev {
    left: var(--spacing-sm) !important;
  }
  
  .slider-nav.next {
    right: var(--spacing-sm) !important;
  }
}
@media (max-width: 768px) {
  .slide-content {
    padding: 0 var(--spacing-md) var(--spacing-lg);
  }
  
  .slide-inner {
    max-width: 100%;
    margin: 0;
  }
  
  .h1 {
    font-size: clamp(24px, 6vw, 36px);
    margin-bottom: var(--spacing-md);
  }
  
  .p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
  }
  
  .wa-row {
    justify-content: center;
    gap: var(--spacing-sm);
  }
  
  .wa {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.95rem;
    /* Mejorar contraste en móviles */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.2);
  }
}

@media (max-width: 480px) {
  .slide-content {
    padding: 0 var(--spacing-sm) var(--spacing-md);
  }
  
  .h1 {
    font-size: clamp(22px, 7vw, 32px);
  }
  
  .p {
    font-size: 1rem;
  }
  
  .wa-row {
    flex-direction: column;
    align-items: center;
  }
  
  .wa {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ===== OPTIMIZACIONES PARA DISPOSITIVOS TÁCTILES ===== */
@media (hover: none) and (pointer: coarse) {
  .btn, .wa, .cta-link, .social-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  .slider-nav {
    min-height: 48px;
    min-width: 48px;
  }
  
  .dot {
    min-height: 12px;
    min-width: 34px;
  }
  
  .slider-nav .nav-arrow {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
  }
  
  .wa .wa-icon {
    font-size: 1.2em;
    width: auto;
    height: auto;
  }
}

/* ===== OPTIMIZACIONES DE ACCESIBILIDAD ===== */
/* Mejoras específicas para el slider */
.slide-content {
  /* Asegurar contraste máximo */
  filter: contrast(1.1);
}

/* Efecto de resplandor para mejor legibilidad */
.h1::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Mejora de contraste para modo de alto contraste */
@media (prefers-contrast: high) {
  .h1 {
    color: #ffffff !important;
    text-shadow: 3px 3px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000 !important;
  }
  
  .p {
    color: #ffffff !important;
    text-shadow: 2px 2px 0px #000000 !important;
  }
  
  .slide::after {
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.8), rgba(0,0,0,0.6)) !important;
  }
}
.high-contrast {
  --border: #ffffff;
  --card: #000000;
  --text: #ffffff;
  --muted: #cccccc;
}

.high-contrast .card {
  border: 2px solid var(--border);
}

.high-contrast .btn {
  border: 2px solid currentColor;
}

/* ===== OPTIMIZACIONES DE HOVER PARA DISPOSITIVOS QUE LO SOPORTAN ===== */
@media (hover: hover) {
  .btn:hover, .wa:hover, .cta-link:hover {
    transform: translateY(-2px);
  }
  
  .social-link:hover {
    transform: scale(1.05);
  }
  
  .team-card:hover {
    transform: translateY(-8px);
  }
}

/* ===== OPTIMIZACIONES DE SCROLL ===== */
body {
  overscroll-behavior-x: contain;
}

/* ===== OPTIMIZACIONES DE IMÁGENES ===== */
/* Los iconos de WhatsApp y sociales ahora usan font-size en lugar de dimensiones fijas */

/* ===== ICONOS DEL SLIDER - TAMAÑO CORRECTO ===== */
.slider-nav .nav-arrow {
  font-size: 24px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* ===== ICONOS DE WHATSAPP - TAMAÑO CORRECTO ===== */
.wa .wa-icon {
  font-size: 1.2em;
  width: auto;
  height: auto;
  flex: none;
}

/* ===== ICONOS SOCIALES - TAMAÑO CORRECTO ===== */
.social-link .social-icon {
  font-size: 1.2em;
  width: auto;
  height: auto;
  flex: none;
}

/* ===== OPTIMIZACIONES DE CONTENEDORES ===== */
.container, .grid, .row, .wa-row {
  min-width: 0;
}