/* =========================================
   THEME & GLOBALS
   ========================================= */
:root{
  /* 4-color palette */
  --brand:#ff6a00;     /* orange: buttons, h1/h2 accents */
  --brand-600:#ff6a00;
  --brand-700:#e65f00;
  --brand-800:#cc5400;

  --cream:#f2e9da;     /* beige background */
  --ink:#111827;       /* near-black text/background */
  --warm:#f5f5f5;      /* non-white light gray background */

  /* UI tokens */
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow:0 8px 22px rgba(0,0,0,.10);
  --shadow-lg:0 10px 28px rgba(0,0,0,.18);

  --header-h:64px;
  --header-h-compact:52px;
}

/* Containers & rhythm */
.container{max-width:1140px}
.section-block{padding:4rem 0}
@media (min-width:768px){.section-block{padding:5rem 0}}

/* Rounded theme */
.rounded-theme img,
.rounded-theme .border,
.rounded-theme .rounded,
.rounded-theme input,
.rounded-theme select,
.rounded-theme textarea,
.rounded-theme button,
.rounded-theme .card,
.rounded-theme .bg-white,
.rounded-theme .bg-slate-50{border-radius:var(--radius)}

/* Background helpers */
.bg-cream{background:var(--cream)}
.bg-ink{background:var(--ink)}
.bg-warm{background:var(--warm)}
.bg-cta{background:linear-gradient(90deg,#ff6a00,#e65f00)}

/* Color helpers */
.text-brand{color:var(--brand)}
.border-brand{border-color:var(--brand)}
.ring-brand{--tw-ring-color:var(--brand)}
.dot-brand{display:inline-block;width:8px;height:8px;border-radius:9999px;background:var(--brand)}

/* =========================================
   HEADER & NAV
   ========================================= */
.site-header{
  backdrop-filter:saturate(1.25) blur(6px);
  transition:height .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  background:linear-gradient(90deg, rgba(242,233,218,.85), rgba(255,255,255,.85));
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header .nav{height:var(--header-h);transition:height .2s ease}
.site-header.compact{box-shadow:0 6px 24px rgba(0,0,0,.08); background:rgba(255,255,255,.95)}
.site-header.compact .nav{height:var(--header-h-compact)}
[id]{scroll-margin-top:calc(var(--header-h) + 8px)}
.site-header.compact ~ main [id]{scroll-margin-top:calc(var(--header-h-compact) + 8px)}

.navlink{position:relative; display:inline-block; padding:.25rem 0; transition:color .2s ease}
.navlink:after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--brand); transition:width .22s ease}
.navlink:hover{color:var(--brand)}
.navlink:hover:after{width:100%}

/* Nav CTA */
.nav-cta{
  display:inline-block; padding:.55rem 1rem; border-radius:9999px; color:#fff;
  background:var(--brand-600);
  transition:transform .15s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 16px rgba(255,106,0,.22);
}
.nav-cta:hover{background:var(--brand-700); transform:translateY(-1px)}
.nav-cta:active{transform:translateY(0)}
#menuBtn:hover{background:#f3f4f6}

/* =========================================
   TYPOGRAPHY
   ========================================= */
.section-title{ text-align:center; font-size:1.875rem; font-weight:900; letter-spacing:-.01em; }
@media (min-width:768px){ .section-title{font-size:2.25rem} }
.section-subtitle{ text-align:center; color:#475569; margin-top:.5rem }
.hero-title .brand{ color:var(--brand) }

/* Chips & badges */
.chip{
  display:inline-flex; gap:.5rem; align-items:center; font-weight:700;
  border-radius:999px; padding:.45rem .8rem; background:#fff; border:1px solid #e5e7eb; color:#111827;
  box-shadow:var(--shadow-sm);
}
.badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:9999px;
  background:#fff; border:1px solid #e2e8f0; color:#0f172a; font-weight:600; box-shadow:var(--shadow-sm);
}

/* Orange tagline before CTA (requested) */
.tagline-brand{font-weight:800; color:var(--brand); margin-top:1rem; margin-bottom:.25rem}

/* =========================================
   BUTTONS
   ========================================= */
.btn{
  display:inline-block; padding:.85rem 1.25rem; border-radius:9999px; font-weight:800;
  color:#fff; background:var(--brand-600);
  transition:background-color .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow:0 8px 22px rgba(255,106,0,.25);
}
.btn:hover{background:var(--brand-700); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--light{background:#fff; color:var(--brand-700); box-shadow:var(--shadow-sm)}
.btn--outline{background:transparent; color:#334155; border:1px solid #cbd5e1}
.btn--outline:hover{background:#f8fafc}

/* =========================================
   CARDS & BLOCKS
   ========================================= */
.card{
  background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius);
  box-shadow:0 1px 1px rgba(0,0,0,.02), 0 2px 8px rgba(0,0,0,.04);
}
.card-hover{transition:box-shadow .2s ease, transform .2s ease}
.card-hover:hover{box-shadow:var(--shadow); transform:translateY(-1px)}

.icon-box{
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  background:var(--brand-600); color:#fff; border-radius:.75rem; margin-bottom:1rem;
}

/* Checklist bullets */
.check::before{content:"✓"; font-weight:900; margin-right:.5rem; color:var(--brand)}

/* Simple grids */
.grid-cards{display:grid; gap:1rem}
@media(min-width:768px){.grid-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-logos{display:grid; gap:1rem}
@media(min-width:640px){.grid-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.grid-logos{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* =========================================
   SECTION: HERO
   ========================================= */
.hero-image{ border-radius:16px; box-shadow:var(--shadow-lg) }

/* =========================================
   SECTION: TRUST STRIP (KPIs)
   ========================================= */
.trust-strip{background:var(--warm)}
.trust-grid{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:768px){.trust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trust-item{display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border:1px solid #e5e7eb; border-radius:var(--radius); background:#fff}
.trust-item b{font-size:1.5rem; color:var(--ink)}
.trust-item span{color:#475569}

/* =========================================
   SECTION: INTEGRATIONS
   ========================================= */
.integration-card{ display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem }
.integration-card img{ width:24px; height:24px }

/* =========================================
   SECTION: SERVICES
   ========================================= */
.service-card{ padding:1.5rem }
.service-pillars{ display:flex; gap:1rem; align-items:flex-start }
.service-pillars i{ font-style:normal; width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e7eb }

/* =========================================
   SECTION: PROCESS (DARK)
   ========================================= */
.dark-block{color:#f3f4f6; background:var(--ink)}
.dark-block h2,.dark-block h3{color:#fff}
.dark-card{background:#1f2937; border:1px solid #374151; border-radius:var(--radius); color:#e5e7eb}

/* =========================================
   SECTION: COMPARISON
   ========================================= */
.tbl{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:var(--radius); border:1px solid #e5e7eb; background:#fff}
.tbl th,.tbl td{padding:14px 16px; border-bottom:1px solid #eee; text-align:left}
.tbl thead th{background:var(--warm); font-weight:800; color:#111827}
.tbl tr:last-child td{border-bottom:none}

/* =========================================
   SECTION: PORTFOLIO
   ========================================= */
.project-card{ background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); overflow:hidden; display:block; box-shadow:0 1px 1px rgba(0,0,0,.02); transition:box-shadow .2s ease, transform .2s ease }
.project-card:hover{ box-shadow:var(--shadow); transform:translateY(-1px) }
.project-card__img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .25s ease }
.project-card:hover .project-card__img{ transform:scale(1.02) }

/* =========================================
   SECTION: PLANS
   ========================================= */
.plan-card{ border:1px solid #e2e8f0; border-radius:var(--radius); padding:1.5rem; background:#fff }
.plan-card--pro{ border-width:2px; border-color:var(--brand-600); box-shadow:0 10px 32px rgba(255,106,0,.18) }
.plan-price{ font-size:1.875rem; font-weight:800; margin-top:.5rem; color:var(--ink) }
.plan-price__sub{ font-size:1rem; font-weight:600; color:#6b7280 }
.plan-list{ margin-top:1rem; color:#475569; padding-left:1.25rem; list-style:disc }

/* =========================================
   SECTION: TESTIMONIALS
   ========================================= */
.testimonial{ background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:1.5rem }

/* =========================================
   FORMS (CONTACT)
   ========================================= */
.form-input{
  border:1px solid #cbd5e1; border-radius:.75rem; padding:.85rem 1rem; outline:none; background:#fff; color:#111827;
}
.form-input:focus{ box-shadow:0 0 0 3px rgba(255,106,0,.20); border-color:var(--brand-600) }
textarea.form-input{ min-height:140px }

/* =========================================
   FAQ (ACCORDION)
   ========================================= */
.faq-item{ border:1px solid #e5e7eb; border-radius:var(--radius); background:#fff }
.faq-q{ display:flex; justify-content:space-between; align-items:center; padding:1rem 1.1rem; cursor:pointer }
.faq-a{ padding:0 1.1rem 1rem 1.1rem; color:#475569; display:none }
.faq-item[open] .faq-a{ display:block }

/* =========================================
   FOOTER SHARED (if used elsewhere)
   ========================================= */
.footer {
  color: #e5e7eb;
}
.footer a{ color:#d1d5db; transition:color .2s ease, opacity .2s ease }
.footer a:hover{ color:var(--brand-600) }
.footer-title{ font-weight:800; letter-spacing:.01em; margin-bottom:.75rem; color:#fff }
.footer-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr }
@media(min-width:640px){ .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1024px){ .footer-grid{ grid-template-columns:1.2fr 1fr 1fr 1.2fr } }

/* WhatsApp FAB (if present) */
.whatsapp-fab{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:56px; height:56px; border-radius:9999px; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 10px 20px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.whatsapp-fab:hover{ transform:translateY(-2px); filter:saturate(1.1); box-shadow:0 14px 28px rgba(0,0,0,.3) }
.whatsapp-fab svg{ width:26px; height:26px }


/* =========================================
   AGENCIA BUTTONS (custom override)
   ========================================= */
.agencia-btn {
  display:inline-block;
  padding:.9rem 1.5rem;
  border-radius:9999px;
  font-weight:800;
  font-size:1rem;
  line-height:1.25rem;
  color:#fff;
  background:var(--brand-600);
  text-align:center;
  transition:background-color .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow:0 8px 22px rgba(255,106,0,.25);
}
.agencia-btn:hover {
  background:var(--brand-700);
  transform:translateY(-1px);
}
.agencia-btn:active {
  transform:translateY(0);
}

/* Outline variant */
.agencia-btn--outline {
  background:transparent;
  color:#334155;
  border:1px solid #cbd5e1;
}
.agencia-btn--outline:hover {
  background:#f8fafc;
}

/* === CONTACT: compacta y alinea Turnstile === */
.turnstile-compact{ display:flex; justify-content:center }

/* === Mobile menu (sólido, no transparente) === */
.mobile-backdrop{
  position:fixed; inset:0; background:rgba(17,24,39,.45); backdrop-filter:blur(2px);
  opacity:1; transition:opacity .15s ease; z-index:49;
}
.mobile-panel{
  position:fixed; left:0; right:0; top:var(--header-h);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.98));
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
  z-index:50;
  transform:translateY(-8px); opacity:1; transition:transform .18s ease, opacity .18s ease;
}
.site-header.compact .mobile-panel{ top:var(--header-h-compact); }

.mobile-link{
  display:block; padding:.9rem 1rem; border-radius:.75rem; font-weight:700; color:#111827;
  border:1px solid #e5e7eb; background:#fff;
}
.mobile-link:hover{ background:#f8fafc; border-color:#e2e8f0 }