/* =====================================================
   Snippets WPCode extraídos del HTML exportado del WP
   Fuente: inicio.html (export Chrome, 2026-05-12)
   Total: 17 snippets
   ===================================================== */


/* ===== SNIPPET 1 ===== */
/* --- REDES SOCIALES (Módulo independiente para Contacto u otras páginas) --- */
.zander-contact-socials { 
  display: flex; 
  gap: 25px; 
  align-items: center;
  /* Puedes añadir 'justify-content: center;' si necesitas que estén centrados en la página de contacto */
}

.contact-social-icon {
  display: inline-flex;
  text-decoration: none;
}

.contact-social-icon img,
.contact-social-icon svg {
  width: 40px !important; /* Forzamos el límite */
  max-width: 40px !important;
  height: auto !important;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: block; /* Evita márgenes fantasma */
}

/* Efecto hover */
.contact-social-icon:hover img {
  transform: scale(1.1);
  opacity: 0.8;
}

/* ===== SNIPPET 2 ===== */
/* --- AJUSTE DE LA "X" DE CIERRE EN MÓVIL --- */

/* 1. Tamaño y color del botón de cierre */
.ct-panel-actions .ct-toggle-close {
    /* Aumentamos el tamaño del icono (Blocksy usa 12px por defecto) */
    --theme-icon-size: 22px; 
    
    /* Forzamos el color negro Zander */
    color: #1D1D1B !important;
    
    /* Aumentamos el área de clic para que sea más fácil de usar */
    width: 50px;
    height: 50px;
    
    /* Ajuste de posición: modifíca estos valores para que coincida con tu burger */
    top: 15px !important; 
    right: 10px !important;
    
    opacity: 1 !important; /* Que se vea nítida desde el inicio */
}

/* 2. Asegurar que el SVG interior escale correctamente */
.ct-panel-actions .ct-toggle-close svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2px; /* Un poco más de grosor para que se vea mejor */
}

/* 3. Eliminar márgenes negativos que puedan estar desplazándola */
.ct-panel-actions {
    --toggle-button-margin-top: 0px !important;
    --toggle-button-inset-end: 0px !important;
}

/* ===== SNIPPET 3 ===== */
@media (max-width: 767px) {
  
  /* 1. CONTENEDOR: El raíl del Sticky */
  .zander-stack-container-mobile {
    width: 100%;
    background-color: #fbfbfb;
    padding: 60px 0 50vh 0;
    margin-bottom: -40vh !important;
    position: relative;
    overflow: visible !important;
  }

  /* 2. LA TARJETA: Base Sticky */
  .zander-card-m {
    position: -webkit-sticky;
    position: sticky;
    width: 90vw;
    height: 70vh;
    background-color: #1D1D1B;
    border-radius: 40px;
    margin: 0 auto 5vh auto;
    overflow: hidden;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.15);
    /* PROPIEDAD APLICADA: Borde sutil amarillo de la versión PC */
    border: 1px solid rgba(252, 198, 28, 0.15);
    will-change: transform;
  }

  /* 3. ÚLTIMA TARJETA: el contenedor debe seguir hasta que la card llegue
     a su top sticky (200px). Más margen = más tiempo pegada antes de soltar. */
  .zander-card-m:last-child {
    margin-bottom: 5vh !important;
  }

  /* 4. ESCALONADO DE APILAMIENTO */
  /* Apilado más arriba (base 60px, header=50px) + peek de 12px entre tarjetas
     (antes 25px) y tope a 120px → más espacio abajo, la tarjeta activa no se corta. */
  #card-m-1 { top: 60px;  z-index: 10; }
  #card-m-2 { top: 72px;  z-index: 20; }
  #card-m-3 { top: 84px;  z-index: 30; }
  #card-m-4 { top: 96px;  z-index: 40; }
  #card-m-5 { top: 108px; z-index: 50; }
  #card-m-6 { top: 120px; z-index: 60; }
  #card-m-7 { top: 120px; z-index: 70; }
  #card-m-8 { top: 120px; z-index: 80; }
  #card-m-9 { top: 120px; z-index: 90; }
  #card-m-10 { top: 120px; z-index: 91; }
  #card-m-11 { top: 120px; z-index: 92; }
  #card-m-12 { top: 120px; z-index: 93; }

  /* 5. CONTENIDO INTERNO */
  .card-content-m { display: flex; flex-direction: column; height: 100%; }
  
  .card-text-m {
    flex: 0 0 50%;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .card-bg-image {
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
  }

  .card-text-m h2 {
    color: #fbfbfb;
    font-size: 30px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    line-height: 1.1;
    margin: 10px 0;
  }

  .card-text-m p {
    color: rgba(251, 251, 251, 0.7);
    font-size: 16px;
    line-height: 1.4;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 20px;
  }

  .v2-tag-m { color: #FCC61C; font-weight: 800; text-transform: uppercase; font-size: 12px; }
  .v2-btn-m { color: #FCC61C; text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: 14px; }

  /* Reposicionado de tiles en móvil — mayor especificidad que el <style> inline */
  .card-bg-image .shop .tile-stat { top: 300px; }
  .card-bg-image .app2 .tile-stat { bottom: 10px; }
}

@media (min-width: 768px) {
  .zander-stack-container-mobile { display: none; }
}
@media (max-width: 767px) {
  .zander-stack-container { display: none !important; }
}

/* ===== SNIPPET 4 ===== */
.zander-pricing-section {
  background-color: #1D1D1B;
  padding: 120px 0;
  color: #fbfbfb;
}
.pricing-header {
  margin-bottom: 80px;
  text-align: left;
}
.pricing-header .massive-title {
  display: block;
}
.pricing-header .massive-title span {
  display: inline !important;
}
.pricing-header .massive-title .highlight-yellow {
  display: inline !important;
}
.pricing-desde {
  margin-top: 15px;
  font-size: 20px;
  opacity: 0.8;
}
.pricing-desde strong {
  color: #FCC61C;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 100px;
}
.price-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(252, 198, 28, 0.1);
  padding: 50px 40px;
  border-radius: 30px;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.2);
}
.price-card.featured {
  background: #FCC61C;
  color: #1D1D1B;
  transform: scale(1.05);
}
.price-card h3 {
  font-size: 30px;
  margin-bottom: 5px;
	font-weight: 600px;
}
.price-card.featured h3,
.price-card.featured .price-value {
  color: #1D1D1B;
}
.price-value {
  font-size: 54px;
  font-weight: 700;
  margin: 8px 0;
  color: #FCC61C;
}
.price-desc {
  font-size: 15px;
  opacity: 0.7;
  margin-bottom: 15px;
  line-height: 1.5;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 15px 0 50px 0;
  font-size: 16px;
  line-height: 2;
}
.price-features li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-card .check-icon {
  fill: #FCC61C;
  flex-shrink: 0;
}
.price-card.featured .check-icon {
  fill: #1D1D1B;
}
.other-services-area {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 60px;
}
.other-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.other-item {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 15px;
  font-family: 'Nunito', sans-serif;
}
.other-item strong {
  color: #FCC61C;
}
.pricing-cta {
  margin-top: 60px;
  text-align: center;
}

/* ===== SNIPPET 5 ===== */
/* --- CONFIGURACIÓN DE SECCIÓN --- */
.zander-cta-impact-fullscreen {
  position: relative;
  min-height: 100vh;
  background-color: #1d1d1b; 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* --- FONDO DINÁMICO: EFECTO NUBE OPTIMIZADO --- */
.zander-bg-dynamic {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  z-index: 0;
}

.zander-bg-dynamic span {
    width: 25vmin; 
    height: 25vmin;
    border-radius: 50%;
    position: absolute;
    background-color: #fcc61c; 
    /* MODIFICACIÓN: Más desenfoque y menos opacidad para un efecto más elegante */
    filter: blur(150px);  
    opacity: 0.15; 
    animation: move linear infinite;
    backface-visibility: hidden;
}

@keyframes move {
    100% { transform: translate3d(0, 0, 1px) rotate(360deg); }
}

//* POSICIONES Y TIEMPOS (Velocidad "Extra" para Zander) */
.zander-bg-dynamic span:nth-child(1) { top: 3%; left: 67%; animation-duration: 30s; animation-delay: -4s; transform-origin: 21vw 14vh; }
.zander-bg-dynamic span:nth-child(2) { top: 90%; left: 13%; animation-duration: 40s; animation-delay: -60s; transform-origin: -1vw -4vh; }
.zander-bg-dynamic span:nth-child(3) { top: 65%; left: 25%; animation-duration: 35s; animation-delay: -131s; transform-origin: -6vw 14vh; }
.zander-bg-dynamic span:nth-child(4) { top: 37%; left: 84%; animation-duration: 120s; animation-delay: -42s; transform-origin: 8vw -11vh; }
.zander-bg-dynamic span:nth-child(5) { top: 70%; left: 42%; animation-duration: 180s; animation-delay: -265s; transform-origin: 5vw 2vh; }
.zander-bg-dynamic span:nth-child(6) { top: 88%; left: 54%; animation-duration: 140s; animation-delay: -309s; transform-origin: -23vw -7vh; }
.zander-bg-dynamic span:nth-child(7) { top: 97%; left: 30%; animation-duration: 80s; animation-delay: -253s; transform-origin: 3vw 4vh; }
.zander-bg-dynamic span:nth-child(8) { top: 25%; left: 80%; animation-duration: 60s; animation-delay: -306s; transform-origin: -4vw 7vh; }
.zander-bg-dynamic span:nth-child(9) { top: 11%; left: 41%; animation-duration: 100s; animation-delay: -77s; transform-origin: -3vw 7vh; }
.zander-bg-dynamic span:nth-child(10) { top: 86%; left: 22%; animation-duration: 100s; animation-delay: -303s; transform-origin: -17vw 12vh; }
/* --- TEXTO Y BOTÓN (Sin cambios) --- */
.cta-stalable-container {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.massive-title {
  font-family: 'Nunito', sans-serif;
  color: #fbfbfb;
  text-transform: uppercase;
  line-height: 1.1; 
  display: flex;
  flex-direction: column;
}

.massive-title span {
  display: block;
  font-size: var(--fs-h1);
}

.weight-400 { font-weight: 400 !important; }
.weight-900 { font-weight: 700 !important; }
.highlight-yellow { color: #FCC61C; }
.opacity-7 { opacity: 0.7; }

.cta-action-area {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.wp-skew-btn span {
  font-size: 24px !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  /* CTA: en móvil NO ocupar pantalla completa (quedaba un bloque enorme con
     mucho vacío). Que abrace su contenido con padding cómodo. */
  .zander-cta-impact-fullscreen {
    min-height: auto;
    padding: 80px 20px;
  }
  .cta-action-area {
    margin-top: 40px;
  }
}

@media (max-width: 689.98px) {
  .cta-line {
    white-space: normal !important;
    font-size: clamp(26px, 8vw, 48px) !important;
  }
}
.massive-title {
  font-family: 'Nunito', sans-serif;
  color: #fbfbfb;
  text-transform: uppercase;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
}

.cta-line {
  display: block;
  font-size: clamp(40px, 8vw, 115px);
  /* Antes 'nowrap': forzaba cada línea a no romper y en pantallas medianas el
     texto sobresalía y se cortaba (la sección tiene overflow:hidden). Con
     'normal' envuelve cuando no cabe, adaptándose al ancho como el hero. */
  white-space: normal;
  text-wrap: balance;
}

.cta-line span {
  display: inline !important;
  font-size: inherit;
}

/* ===== SNIPPET 6 ===== */
/* --- CONTENEDOR Y TARJETAS (Lógica Sticky) --- */
.zander-stack-container {
  width: 100%;
  background-color: #fbfbfb;
  padding: 100px 0 0 0;
  margin-bottom: -10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible !important;
}

.zander-card {
  position: sticky;
  width: 80vw;
  max-width: 1700px;
  height: 65vh;
  min-height: 550px;
  background-color: #1D1D1B; /* Negro Base */
  border-radius: 40px;
  margin-bottom: 25vh;
  overflow: hidden;
  box-shadow: 0 -20px 40px rgba(0,0,0,0.15);
  border: 1px solid rgba(252, 198, 28, 0.1);
}

.zander-card:last-child { margin-bottom: 0 !important; }

/* ESCALONADO */
#card-1 { top: 80px; z-index: 10; }
#card-2 { top: 100px; z-index: 20; }
#card-3 { top: 120px; z-index: 30; }
#card-4 { top: 140px; z-index: 40; }
#card-5 { top: 160px; z-index: 50; }
#card-6 { top: 180px; z-index: 60; }

/* --- CONTENIDO TEXTUAL --- */
.card-text { 
  flex: 1.2;
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* SUBTÍTULO EN AMARILLO (Restaurado) */
.v2-card-tag {
  color: #FCC61C !important; /* Amarillo Zander */
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
  display: block;
}

.card-text h2 {
  color: #fbfbfb;
  font-size: clamp(30px, 3.5vw, 48px);
  margin-bottom: 25px;
  line-height: 1.1;
  font-family: 'Nunito', sans-serif;
}

.card-explanation p {
  color: rgba(251, 251, 251, 0.7);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* --- BOTÓN +INFO (Más grande, grueso y con hover corregido) --- */
.v2-cta-button {
  display: inline-block;
  color: #FCC61C !important; /* Amarillo base */
  text-decoration: none;
  font-weight: 700 !important; /* Letra mucho más gruesa */
  font-size: 18px !important; /* Tamaño aumentado */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  align-self: flex-start;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.v2-cta-button:hover {
  color: #fbfbfb !important; /* Blanco en hover */
  transform: translateX(8px); /* Desplazamiento lateral */
}

/* --- ÁREA DE IMAGEN (Proporción 1:1 mantenida) --- */
.card-image { 
  flex: 1; 
  background-color: #1D1D1B;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}

.v2-card-mockup {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* No corta, respeta el 1:1 */
  border-radius: 40px; 
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.3)); 
}

/* ===== SNIPPET 7 ===== */
/* --- RESET DE SEGURIDAD PARA STICKY --- */
html, body {
  max-width: 100%;
  overflow-x: clip !important; /* Corta el desborde sin matar el sticky de las tarjetas */
}

/* --- ESTILOS DEL FOOTER --- */
.zander-footer-dark {
  background-color: #1D1D1B !important;
  margin-top: 0px !important;
  
  /* Cuadrícula técnica */
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;

  /* Ancho total breakout */
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0 0 0;
  color: #fbfbfb;
  font-family: 'Nunito', sans-serif;
  box-sizing: border-box;
}

/* Espaciado entre las 3 filas principales (10px) */
.footer-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; 
  margin-bottom: 40px;
}

/* FILA 1: Redes (Iconos SVG) */
.footer-row-socials { 
  display: flex; 
  gap: 25px; 
  align-items: center;
}

.social-link {
  display: inline-flex;
  text-decoration: none;
}

.social-link img {
  width: 40px; /* Puedes ajustar este tamaño a lo que mejor encaje con tu diseño */
  height: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Efecto hover sutil para los iconos */
.social-link:hover img {
  transform: scale(1.1);
  opacity: 0.8;
}

/* FILA 2: Menú Principal (Forzado a 20px y Blanco) */
.main-pages { 
  display: flex; 
  gap: 25px; 
}
.main-pages a { 
  color: #fbfbfb !important; 
  font-size: 24px !important; 
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* FILA 3: Legal (Blanco con Opacidad 0.5) */
.legal-pages { 
  display: flex; 
  gap: 20px; 
}
.legal-pages a { 
  color: #fbfbfb !important; 
  font-size: 12px !important; 
  opacity: 0.5 !important; /* Restaurado: Texto suave, no amarillo */
  text-decoration: none;
}

/* --- BRANDING GIGANTE --- */
.footer-branding-giant {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 15px; /* Punto medio para no cortar píxeles */
  line-height: 0;
}

.footer-giant-logo {
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: 1 !important; /* Sólido total como pediste */
}

/* DERECHOS RESERVADOS (Opacidad 0.3) */
.footer-copyright {
  width: 100%;
  text-align: center;
  font-size: 11px;
  opacity: 0.3 !important; /* Restaurada la opacidad discreta */
  padding: 25px 0;
  background-color: #1D1D1B;
}

/* ===== SNIPPET 8 ===== */
/* 1. CONTENEDOR: El raíl del Sticky */
.zander-stack-container {
  width: 100%;
  background-color: #fbfbfb; 
  padding: 120px 0 0 0; 
  /* LA CLAVE: El margen negativo succiona el footer sin romper el sticky */
  margin-bottom: -100vh; 
  position: relative;
  overflow: visible !important;
}

/* 2. LA TARJETA: Base */
.zander-card {
  position: -webkit-sticky;
  position: sticky;
  width: 80vw;
  max-width: 1700px;
  height: 60vh;
  min-height: 500px;
  background-color: #1D1D1B; /* Negro Zander */
  border-radius: 40px;
  /* Espacio de "viaje" entre tarjetas para que no se amontonen pronto */
  margin: 0 auto 60vh auto; 
  overflow: hidden;
  box-shadow: 0 -20px 40px rgba(0,0,0,0.15);
  border: 1px solid rgba(252, 198, 28, 0.15);
  will-change: transform;
}

/* 3. ÚLTIMA TARJETA: Se convierte en el ancla del Footer */
.zander-card:last-child {
  /* Este margen crea el espacio para que la tarjeta llegue a su 'top' */
  margin-bottom: 60vh !important;
}

/* 4. ESCALONADO DE APILAMIENTO (Manteniendo tus proporciones) */
#card-1 { top: 80px; z-index: 10; }
#card-2 { top: 110px; z-index: 20; }
#card-3 { top: 140px; z-index: 30; }
#card-4 { top: 170px; z-index: 40; }
#card-5 { top: 200px; z-index: 50; }
#card-6 { top: 230px; z-index: 60; }

/* 5. CONTENIDO INTERNO */
.card-content { display: flex; width: 100%; height: 100%; }
.card-text { flex: 1; padding: 5% 7%; display: flex; flex-direction: column; justify-content: center; }

.v2-card-tag { 
  color: #FCC61C; 
  font-weight: 700; 
  text-transform: uppercase; 
  font-size: 14px; 
  margin-bottom: 15px; 
  letter-spacing: 0.15em;
  font-family: 'Nunito', sans-serif;
}

.card-text h2 { 
  color: #fbfbfb; 
  font-size: clamp(32px, 4vw, 55px); 
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  margin-bottom: 20px; 
  line-height: 1.1; 
}

.card-explanation p { 
  color: rgba(251, 251, 251, 0.7); 
  font-size: 18px; 
  margin-bottom: 40px; 
  line-height: 1.6;
  font-family: 'Nunito', sans-serif;
}

/* 6. BLOQUE DE IMAGEN Y BOTÓN */
.card-image { 
  flex: 1; 
  background-color: #1D1D1B;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px; 
}

.v2-card-mockup { max-width: 90%; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5)); }

.v2-cta-button {
  color: #FCC61C;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
}

.zander-stack-container {
  /* ... tus otras propiedades ... */
  margin-bottom: -50vh !important; /* Cancela el hueco de la última tarjeta */
  background-color: #fbfbfb; 
  overflow: visible !important;
}


/* 7. AJUSTE RESPONSIVO — tablet portrait (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tarjeta: se adapta al viewport del tablet para no cortarse nunca */
  .zander-card {
    width: 92vw;
    height: calc(100dvh - 220px);
    max-height: 900px;
    margin-bottom: 20vh !important;
  }
  .zander-card:last-child { margin-bottom: 70vh !important; }

  /* Escalonado ajustado para que no solape con el header */
  #card-1 { top: 120px !important; }
  #card-2 { top: 130px !important; }
  #card-3 { top: 140px !important; }
  #card-4 { top: 150px !important; }
  #card-5 { top: 160px !important; }
  #card-6 { top: 170px !important; }
  #card-7 { top: 180px !important; }
  #card-8 { top: 190px !important; }
  #card-9 { top: 200px !important; }
  #card-10 { top: 210px !important; }
  #card-11 { top: 220px !important; }
  #card-12 { top: 230px !important; }

  /* Layout interno */
  .card-content { flex-direction: column; }
  .card-text { flex: none; padding: 5% 7%; }
  .card-image { height: calc(100dvh - 580px); min-height: 340px; max-height: 460px; flex: none; }
  .card-explanation p { font-size: 18px !important; line-height: 1.6; }
  .card-text h2 { font-size: clamp(28px, 4vw, 48px); }

  /* Tienda online — reposicionar tiles para que no se amontonen */
  .card-image .shop .tile-stat { top: 260px !important; }
  .card-image .shop .tile-pay  { bottom: 60px !important; }

  /* Cancelar el espacio extra del último card para que no aparezca el penúltimo */
  .zander-stack-container { margin-bottom: -70vh !important; }
}

/* ===== SNIPPET 9 ===== */
.wp-custom-cta-dark {
  position: relative;
  margin: 10px;
  height: 55px !important;
  min-width: 230px !important;
  padding: 0 20px !important;
  display: inline-flex !important; 
  align-items: center;      
  justify-content: center;  
  vertical-align: middle;
  border: none !important;
  outline: none;
  background: none;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
}

.wp-custom-cta-dark:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  border-radius: 50px;
  background: #FCC61C;
  width: 55px; 
  height: 55px; 
  transition: all 0.3s ease;
  z-index: 1;
}

.wp-custom-cta-dark .wp-custom-cta-text-dark {
  position: relative;
  font-family: "Nunito", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #1D1D1B; /* Tu color negro aplicado */
  z-index: 2;
  transition: color 0.3s ease;
  line-height: 1; 
  margin-top: 2px;
  white-space: nowrap; 
}

.wp-custom-cta-dark .wp-custom-cta-icon-dark {
  position: relative;
  margin-left: 15px; 
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #1D1D1B; /* Tu color negro aplicado */
  stroke-width: 2;
  transition: all 0.3s ease;
  z-index: 2;
  display: block; 
  transform: translateX(-5px);
  width: 18px;
  height: auto;
}

.wp-custom-cta-dark:hover:before {
  width: 100%;
  background: #FCC61C;
}

.wp-custom-cta-dark:hover .wp-custom-cta-text-dark {
  color: #1D1D1B; 
}

.wp-custom-cta-dark:hover .wp-custom-cta-icon-dark {
  stroke: #1D1D1B;
  transform: translateX(0);
}

.wp-custom-cta-dark:active {
  transform: scale(0.95);
}

/* ===== SNIPPET 10 ===== */
.page-id-284 .ct-header [data-device="desktop"] .menu-item a {
    color: #1D1D1B !important; /* Negro para los enlaces */
}
/* Cambiar color del icono burger a negro Zander */
.page-id-284 .ct-header-trigger .ct-icon {
    color: #1D1D1B !important;
    fill: #1D1D1B !important;
}

/* Opcional: Cambiar también el texto "Menú" si lo tienes activo */
.page-id-284 .ct-header-trigger .ct-label {
    color: #1D1D1B !important;
}

/* ===== SNIPPET 11 ===== */
.fondo-borroso {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* Obligatorio para Safari */
}

/* ===== SNIPPET 12 ===== */
/* --- CONTENEDOR DE ASCUAS --- */
.wp-embers-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Importante para que no se salgan de la pantalla */
  pointer-events: none; /* Para que puedas hacer clic en los botones a través de ellas */
  z-index: 0; /* Detrás del texto */
}

/* --- PARTÍCULA BASE --- */
.ember {
  position: absolute;
  bottom: -20px; /* Empiezan debajo de la pantalla */
  width: 6px;
  height: 6px;
  background-color: #FCC61C; /* Tu amarillo corporativo */
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px); /* Un poco de desenfoque para efecto "glowing" */
  animation: rise 10s infinite ease-in;
  box-shadow: 0 0 10px #FCC61C; /* Brillo alrededor */
}

/* --- ANIMACIÓN DE SUBIDA --- */
@keyframes rise {
  0% {
    bottom: -20px;
    transform: translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 0.8; /* Se hacen visibles al entrar */
  }
  50% {
    opacity: 0.4; /* Parpadean */
  }
  100% {
    bottom: 110%; /* Salen por arriba */
    transform: translateX(-50px); /* Se mueven un poco a la izquierda (viento) */
    opacity: 0;
  }
}
/* --- ALEATORIEDAD MEJORADA (YA INICIADA) --- */
/* Usamos tiempos negativos (ej: -5s) para que la animación */
/* parezca que ya estaba en marcha cuando entras a la web */

.ember:nth-child(1)  { left: 10%; width: 4px; height: 4px; animation-duration: 8s;  animation-delay: -2s; }
.ember:nth-child(2)  { left: 20%; width: 8px; height: 8px; animation-duration: 12s; animation-delay: -8s; background-color: #ffaa00; }
.ember:nth-child(3)  { left: 35%; width: 3px; height: 3px; animation-duration: 15s; animation-delay: -5s; }
.ember:nth-child(4)  { left: 50%; width: 6px; height: 6px; animation-duration: 10s; animation-delay: -9s; }
.ember:nth-child(5)  { left: 65%; width: 5px; height: 5px; animation-duration: 14s; animation-delay: -1s; background-color: #ffaa00; }
.ember:nth-child(6)  { left: 80%; width: 7px; height: 7px; animation-duration: 11s; animation-delay: -6s; }
.ember:nth-child(7)  { left: 90%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: -12s; }
.ember:nth-child(8)  { left: 15%; width: 5px; height: 5px; animation-duration: 16s; animation-delay: -4s; }
.ember:nth-child(9)  { left: 45%; width: 3px; height: 3px; animation-duration: 9s;  animation-delay: -7s; background-color: #ffcc00; }
.ember:nth-child(10) { left: 75%; width: 6px; height: 6px; animation-duration: 13s; animation-delay: -3s; }
.ember:nth-child(11) { left: 5%;  width: 4px; height: 4px; animation-duration: 11s; animation-delay: -10s; }
.ember:nth-child(12) { left: 55%; width: 2px; height: 2px; animation-duration: 19s; animation-delay: -15s; }
.ember:nth-child(13) { left: 25%; width: 5px; height: 5px; animation-duration: 12s; animation-delay: -1s; }
.ember:nth-child(14) { left: 95%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: -11s; }
.ember:nth-child(15) { left: 60%; width: 6px; height: 6px; animation-duration: 10s; animation-delay: -5.5s; }

/* ===== SNIPPET 13 ===== */
/* VERSIÓN 4: Amarillo (Inicial) -> Blanco (Hover) */
.wp-skew-btn--yellow-to-white {
  background-color: #fbfbfb !important; /* El color de fondo "oculto" es Blanco */
  color: #1D1D1B !important; /* El texto siempre es negro */
  border: 1px solid #FCC61C !important; /* Opcional: añadí un borde sutil para que el blanco no se pierda si el fondo de la web es blanco */
}

/* La capa superior (Inicial) es Amarilla */
.wp-skew-btn--yellow-to-white::before {
  background: #FCC61C !important; 
}

/* El texto siempre negro, también en hover */
.wp-skew-btn--yellow-to-white span,
.wp-skew-btn--yellow-to-white:hover span {
  color: #1D1D1B !important;
}

/* Ajuste especial para esta variante: */
/* Como el fondo final es blanco, si tu web es blanca, el botón "desaparecería". */
/* Si tu web tiene fondo oscuro, puedes quitar la línea de "border" de arriba. */

/* ===== SNIPPET 14 ===== */
/* VERSIÓN 3: Amarillo (Inicial) -> Negro (Hover) */
.wp-skew-btn--yellow {
  background-color: #1D1D1B !important; /* Color de fondo (el que se revela) */
  color: #1D1D1B !important; /* Color texto inicial */
}
.wp-skew-btn--yellow::before {
  background: #FCC61C !important; /* Color capa superior (Amarillo) */
}
.wp-skew-btn--yellow:hover span {
  color: #FCC61C !important; /* Texto cambia a amarillo al revelar negro */
}

/* ===== SNIPPET 15 ===== */
/* ============================================================
   1. ESTILOS GENERALES (Arquitectura de Capas)
   ============================================================ */
.wp-skew-btn {
  position: relative;
  display: inline-flex !important; 
  align-items: center;
  justify-content: center;
  height: 55px !important;       
  min-width: 230px !important;   
  padding: 0 20px !important; 
  margin: 10px; 
  
  font-family: 'Nunito', sans-serif;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  text-transform: none;
  line-height: 55px; /* Altura de línea idéntica al height para fijar el texto */
  
  /* FONDO TRANSPARENTE: Clave para evitar el anillo negro */
  background: transparent !important; 
  border: none !important;
  outline: none !important;
  border-radius: 500px !important;
  overflow: hidden; 
  z-index: 1;
  cursor: pointer;

  /* ESTABILIZACIÓN: Evita que el texto baile */
  will-change: transform;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* Fijar el texto para que no se mueva ni un píxel */
.wp-skew-btn span {
  position: relative;
  z-index: 10;
  display: block;
  transition: color 0.4s ease;
  transform: translateZ(0);
  pointer-events: none; /* Evita interferencias en el clic */
}

/* CAPA 1 (Fondo que se revela): Siempre visible detrás */
.wp-skew-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -2;
  transform: translateZ(0);
}

/* CAPA 2 (Color inicial que se desliza): La que hace el efecto skew */
.wp-skew-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -15%; 
  width: 130%; 
  height: 100%; 
  transform: skew(30deg) translateZ(0);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: -1;
}

/* Animación de deslizamiento */
.wp-skew-btn:hover::after {
  transform: translate3d(100%, 0, 0) skew(30deg);
}

/* Click estable */
.wp-skew-btn:active {
  transform: scale(0.98) translateZ(0);
}

/* ============================================================
   2. VARIANTES DE COLOR (Aplicadas a las nuevas capas)
   ============================================================ */

/* AMARILLO (El de "Agencia") */
.wp-skew-btn--yellow::before {
  background-color: #1D1D1B !important; /* Negro (se revela) */
}
.wp-skew-btn--yellow::after {
  background-color: #FCC61C !important; /* Amarillo (inicial) */
}
.wp-skew-btn--yellow { color: #1D1D1B !important; }
.wp-skew-btn--yellow:hover span { color: #FCC61C !important; }

/* NEGRO */
.wp-skew-btn--black::before {
  background-color: #FCC61C !important; /* Amarillo (se revela) */
}
.wp-skew-btn--black::after {
  background-color: #1D1D1B !important; /* Negro (inicial) */
}
.wp-skew-btn--black { color: #fbfbfb !important; }
.wp-skew-btn--black:hover span { color: #1D1D1B !important; }

/* BLANCO */
.wp-skew-btn--white::before {
  background-color: #FCC61C !important; /* Amarillo (se revela) */
}
.wp-skew-btn--white::after {
  background-color: #fbfbfb !important; /* Blanco (inicial) */
}
.wp-skew-btn--white { color: #1D1D1B !important; }
.wp-skew-btn--white:hover span { color: #1D1D1B !important; }

/* AMARILLO A BLANCO (Nueva Variante) */
.wp-skew-btn--yellow-to-white::before {
  background-color: #fbfbfb !important; /* Blanco (se revela al final) */
}
.wp-skew-btn--yellow-to-white::after {
  background-color: #FCC61C !important; /* Amarillo (color inicial) */
}
.wp-skew-btn--yellow-to-white {
  color: #1D1D1B !important; /* Texto negro sobre fondo amarillo */
}
.wp-skew-btn--yellow-to-white:hover span {
  color: #1D1D1B !important; /* Texto negro sobre fondo blanco */
}

/* BLANCO A NEGRO (Tarjeta featured sobre fondo amarillo) */
.wp-skew-btn--white-to-black::before {
  background-color: #1D1D1B !important; /* Negro (se revela al hover) */
}
.wp-skew-btn--white-to-black::after {
  background-color: #fbfbfb !important; /* Blanco (color inicial) */
}
.wp-skew-btn--white-to-black {
  color: #1D1D1B !important;
}
.wp-skew-btn--white-to-black:hover span {
  color: #fbfbfb !important; /* Texto blanco sobre fondo negro */
}

/* ===== SNIPPET 16 ===== */
/* Contenedor principal */
.wp-secure-dl-btn {
  /* --- CAMBIO 1: BOTÓN MÁS ANCHO --- */
  width: 180px !important; /* Subido de 160px a 180px */
  /* -------------------------------- */
  
  height: 50px !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  
  background-color: #FCC61C !important;
  border-radius: 100px !important;
  border: none !important;
  cursor: pointer;
  overflow: hidden;
  
  /* --- CAMBIO 2: RECALIBRADO DEL TEXTO --- */
  /* 40px a la izquierda centra visualmente el texto en el espacio vacío */
  padding: 0 0 0 40px !important; 
  /* ------------------------------------- */
  
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.3s ease;
  z-index: 1;
}

/* El Texto */
.wp-secure-dl-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 18px !important;
  color: #1D1D1B !important;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
}

/* El Círculo del Icono */
.wp-secure-dl-icon {
  position: absolute;
  right: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 50px !important;
  
  background-color: #e5b312;
  border-radius: 100px;
  
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease, background-color 0.3s ease;
  z-index: 4;
}

/* El SVG (Icono) */
.wp-secure-dl-svg {
  width: 20px !important;
  height: 20px !important;
  fill: #1D1D1B !important;
  display: block;
  transition: all 0.3s ease;
  
  /* Mantenemos el grosor extra que pediste antes */
  stroke: #1D1D1B !important; 
  stroke-width: 1px !important; 
}

/* --- ANIMACIONES HOVER --- */

.wp-secure-dl-btn:hover {
  background-color: #FCC61C !important;
}

.wp-secure-dl-btn:hover .wp-secure-dl-text {
  color: transparent !important;
}

.wp-secure-dl-btn:hover .wp-secure-dl-icon {
  width: 100% !important;
  background-color: #FCC61C !important;
  border-radius: 100px !important;
}

.wp-secure-dl-btn:active {
  transform: scale(0.95);
}

/* ===== SNIPPET 17 ===== */
/* --- BOTÓN TRANSPARENTE CON CÍRCULO --- */
.wp-custom-cta {
  position: relative;
  margin: 10px;

  /* --- IGUALACIÓN DE TAMAÑOS --- */
  height: 55px !important;
  min-width: auto !important;
  padding: 0 24px 0 18px !important; /* texto empieza dentro del círculo */

  /* Flexbox */
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  vertical-align: middle;
  
  /* Estilos base */
  border: none !important;
  outline: none;
  background: none;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
}

/* El Círculo Amarillo */
.wp-custom-cta:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  border-radius: 50px;
  background: #FCC61C;
  
  /* El círculo es igual a la altura total */
  width: 55px; 
  height: 55px; 
  transition: all 0.3s ease;
  z-index: 1;
}

/* Texto del botón */
.wp-custom-cta .wp-custom-cta-text {
  position: relative;
  font-family: "Nunito", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  z-index: 2;
  transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
  /* Negro sobre el círculo (0-32px desde inicio del texto), blanco fuera */
  background: linear-gradient(to right, #0f0e17 0px, #0f0e17 32px, #fbfbfb 32px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Icono SVG */
.wp-custom-cta .wp-custom-cta-icon {
  position: relative;
  margin-left: 15px; 
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #fbfbfb;
  stroke-width: 2;
  transition: all 0.3s ease;
  z-index: 2;
  display: block; 
  transform: translateX(-5px);
  width: 18px; /* Tamaño ajustado para la fuente grande */
  height: auto;
}

/* --- ESTADOS HOVER --- */
.wp-custom-cta:hover:before {
  width: 100%;
  background: #FCC61C;
}

.wp-custom-cta:hover .wp-custom-cta-text {
  background: none;
  -webkit-text-fill-color: #1D1D1B;
  color: #1D1D1B;
}

.wp-custom-cta:hover .wp-custom-cta-icon {
  stroke: #1D1D1B;
  transform: translateX(0);
}

.wp-custom-cta:active {
  transform: scale(0.95);
}