.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ══════════════════════════════════════════════════════
   AGENCIA SEO TURISMO — CSS GLOBAL
   Prefijo: ast-
   Container: asp-container (global CrocoWorks)
   Versión: 1.0 — CrocoWorks 2026
   Pegar en: Elementor > Site Settings > Custom CSS
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── VARIABLES DE COLOR ── */
:root {
  --ast-primary:     #0D2B45;
  --ast-primary-rgb: 13, 43, 69;
  --ast-accent:      #0E9981;
  --ast-accent-rgb:  14, 153, 129;
  --ast-accent2:     #F97316;
  --ast-dark:        #1A2E3B;
  --ast-muted:       #5E7D8A;
  --ast-light:       #EEF6F5;
  --ast-border:      #E0EBEA;
}

/* ── RESET BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ── CONTAINER (global CrocoWorks — mismo que arquitectos) ── */
.asp-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .asp-container { padding: 0 20px !important; }
}

/* ── SECCIONES — SPACING ── */
.asp-section { padding: 100px 0; }
@media (max-width: 960px) { .asp-section { padding: 72px 0; } }
@media (max-width: 600px) { .asp-section { padding: 52px 0; } }

/* ── TÍTULOS ── */
.ast-section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #1A2E3B !important;
  margin-bottom: 16px;
}
.ast-section-title em {
  color: #0E9981 !important;
  font-style: italic;
  font-weight: 400;
}
.ast-section-title-white { color: #FFFFFF !important; }
.ast-section-title-white em { color: #0E9981 !important; }

.ast-section-intro {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #5E7D8A;
  max-width: 640px;
  line-height: 1.8;
  margin-bottom: 52px;
}
@media (max-width: 600px) {
  .ast-section-title  { font-size: 30px !important; }
  .ast-section-intro  { font-size: 16px; margin-bottom: 36px; }
}

/* ── EYEBROW ── */
.ast-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0E9981;
  margin-bottom: 24px;
}
.ast-eyebrow::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: #0E9981;
  flex-shrink: 0;
}
/* Variante oscura (sobre fondo claro) */
.ast-eyebrow-dark { color: #1A2E3B !important; }
.ast-eyebrow-dark::before { background: #1A2E3B !important; }

/* ── BOTÓN PILL (mismo patrón Vistal/arquitectos) ── */
.ast-btn {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 6px 6px 24px;
  border-radius: 999px;
  text-decoration: none !important;
  width: fit-content;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease !important;
}
.ast-btn:hover {
  opacity: 1 !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
}

/* Dark — primary oscuro con icon accent */
.ast-btn-dark,
.ast-btn-dark:hover,
.ast-btn-dark:focus { background: #0D2B45 !important; color: #FFFFFF !important; }
.ast-btn-dark span,
.ast-btn-dark:hover span { color: #FFFFFF !important; }

/* White — sobre fondos oscuros */
.ast-btn-white,
.ast-btn-white:hover,
.ast-btn-white:focus { background: #FFFFFF !important; color: #0D2B45 !important; }
.ast-btn-white span,
.ast-btn-white:hover span { color: #0D2B45 !important; }

/* Accent — verde agua, CTAs principales */
.ast-btn-accent,
.ast-btn-accent:hover,
.ast-btn-accent:focus { background: #0E9981 !important; color: #FFFFFF !important; }
.ast-btn-accent span,
.ast-btn-accent:hover span { color: #FFFFFF !important; }

.ast-btn-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-left: 16px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.ast-btn-dark   .ast-btn-icon { background: #0E9981; }
.ast-btn-white  .ast-btn-icon { background: #0D2B45; }
.ast-btn-accent .ast-btn-icon { background: rgba(255,255,255,0.18); }

.ast-btn-icon svg {
  position: absolute;
  width: 16px; height: 16px;
  stroke: #FFFFFF; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
}
.ast-btn-icon .arr-out { transform: translateX(0); opacity: 1; }
.ast-btn-icon .arr-in  { transform: translateX(-140%); opacity: 0; }
.ast-btn:hover .arr-out { transform: translateX(140%); opacity: 0; }
.ast-btn:hover .arr-in  { transform: translateX(0); opacity: 1; }

/* ── GRIDS ── */
.ast-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ast-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 960px) {
  .ast-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ast-grid-3 { grid-template-columns: 1fr; }
  .ast-grid-2 { grid-template-columns: 1fr; }
}

/* ── STICKY LAYOUT ── */
.ast-sticky-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 72px;
  align-items: start;
}
.ast-sticky-left { position: sticky; top: 100px; }
@media (max-width: 960px) {
  .ast-sticky-layout { grid-template-columns: 1fr; gap: 32px; }
  .ast-sticky-left { position: static; }
}

/* ── FAQ ACCORDION ── */
.ast-faq-item { border-bottom: 1px solid #D0E4E1; }
.ast-faq-question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  background: transparent; border: none; cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: 18px;
  color: #1A2E3B; text-align: left;
}
.ast-faq-question:hover,
.ast-faq-question:focus { color: #1A2E3B; background: transparent; outline: none; }
.ast-faq-question svg {
  min-width: 20px; flex-shrink: 0;
  transition: transform .3s ease; margin-top: 4px;
  stroke: #0E9981; fill: none; stroke-width: 2.5;
}
.ast-faq-question[aria-expanded="true"] svg { transform: rotate(45deg); }
.ast-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.ast-faq-answer p {
  padding: 0 0 24px;
  color: #5E7D8A; line-height: 1.75; font-size: 16px;
}

/* ── CTA FINAL ── */
.ast-cta-final {
  background: #0D2B45 !important;
  padding: 100px 0;
  text-align: center;
}
.ast-cta-final h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: 46px;
  color: #FFFFFF !important;
  margin-bottom: 16px; line-height: 1.06;
  letter-spacing: -0.025em;
}
.ast-cta-final h2 em { color: #0E9981 !important; font-style: italic; font-weight: 400; }
.ast-cta-final p {
  font-size: 18px; font-weight: 300;
  color: rgba(255,255,255,0.6) !important;
  max-width: 520px; margin: 0 auto 40px; line-height: 1.8;
}
.ast-cta-final-btns {
  display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center;
}
@media (max-width: 600px) {
  .ast-cta-final h2 { font-size: 32px !important; }
  .ast-cta-final-btns { flex-direction: column; align-items: center; }
}

/* ── MENÚ DE NAVEGACIÓN (Elementor) ── */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu--main .elementor-item {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.42) !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  transition: color .2s ease !important;
  margin: 0 4px !important;
}
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item:focus {
  color: #FFFFFF !important;
  background: transparent !important;
}
.elementor-nav-menu--main .elementor-item:after,
.elementor-nav-menu--main .elementor-item:before {
  display: none !important;
}

/* ── ANIMACIONES CSS ── */
@keyframes ast-fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ast-fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ast-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ast-anim-left  { animation: ast-fadeInLeft  0.7s cubic-bezier(0.22,1,0.36,1) both; }
.ast-anim-right { animation: ast-fadeInRight 0.9s cubic-bezier(0.22,1,0.36,1) both; }
.ast-anim-up    { animation: ast-fadeInUp    0.7s cubic-bezier(0.22,1,0.36,1) both; }
.ast-d1 { animation-delay: 0.10s; }
.ast-d2 { animation-delay: 0.25s; }
.ast-d3 { animation-delay: 0.40s; }
.ast-d4 { animation-delay: 0.55s; }
.ast-d5 { animation-delay: 0.70s; }
.ast-d6 { animation-delay: 0.85s; }

/* ── ANIMACIONES DE ENTRADA AL SCROLL ── */
/* Las clases ast-anim-ready y ast-visible las añade el JS del footer */
.ast-quienes,
.ast-porq,
.ast-proceso,
.ast-servicios,
.ast-ventajas,
.ast-faqs,
.ast-cta {
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.ast-anim-ready {
  opacity: 0 !important;
  transform: translateY(40px) !important;
}
.ast-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Hero */
.ast-hero-content {
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.ast-hero-img {
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
              transform 0.9s cubic-bezier(0.22,1,0.36,1);
  transition-delay: 0.1s;
}
.ast-hero-content.ast-anim-ready { opacity: 0 !important; transform: translateX(-40px) !important; }
.ast-hero-img.ast-anim-ready     { opacity: 0 !important; transform: translateX(40px) !important; }
.ast-hero.ast-visible .ast-hero-content,
.ast-hero.ast-visible .ast-hero-img { opacity: 1 !important; transform: translate(0,0) !important; }

/* ══════════════════════════════════════════════════════
   FAQ JS — pegar en footer scripts de Elementor
   ══════════════════════════════════════════════════════
document.querySelectorAll('.ast-faq-question').forEach(function(btn){
  btn.addEventListener('click',function(){
    var expanded=this.getAttribute('aria-expanded')==='true';
    document.querySelectorAll('.ast-faq-question').forEach(function(b){
      b.setAttribute('aria-expanded','false');
      b.nextElementSibling.style.maxHeight=null;
    });
    if(!expanded){
      this.setAttribute('aria-expanded','true');
      this.nextElementSibling.style.maxHeight=this.nextElementSibling.scrollHeight+'px';
    }
  });
});

   SCROLL ANIMATIONS JS — pegar en footer scripts de Elementor
   ══════════════════════════════════════════════════════
(function(){
  var els = document.querySelectorAll(
    '.ast-quienes,.ast-porq,.ast-proceso,.ast-servicios,.ast-ventajas,.ast-faqs,.ast-cta'
  );
  els.forEach(function(el){ el.classList.add('ast-anim-ready'); });

  var heroContent = document.querySelector('.ast-hero-content');
  var heroImg = document.querySelector('.ast-hero-img');
  if(heroContent) heroContent.classList.add('ast-anim-ready');
  if(heroImg) heroImg.classList.add('ast-anim-ready');

  var hero = document.querySelector('.ast-hero');
  if(hero) setTimeout(function(){ hero.classList.add('ast-visible'); }, 100);

  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){
        e.target.classList.remove('ast-anim-ready');
        e.target.classList.add('ast-visible');
        io.unobserve(e.target);
      }
    });
  }, { threshold: 0.12 });
  els.forEach(function(el){ io.observe(el); });
})();
══════════════════════════════════════════════════════ *//* End custom CSS */