/* ═══════════════════════════════════════════════════════════
   360 REMOTO — Global Stylesheet v2.0
   Maquila de Nómina | SEO-optimized Design System
═══════════════════════════════════════════════════════════ */

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

/* ─── VARIABLES ─────────────────────────────────────────── */
:root {
  --azul:        #0A2463;
  --azul-medio:  #1B4FD8;
  --azul-claro:  #3A7BF7;
  --acento:      #00C9A7;
  --acento-h:    #00A88A;
  --acento-light:#E6FAF7;
  --blanco:      #F8FAFF;
  --gris-claro:  #EEF2FB;
  --gris-texto:  #5A6480;
  --texto:       #0D1B3E;
  --rojo:        #E53E3E;
  --amarillo:    #F6AD55;
  --verde:       #38A169;
  --sombra:      0 8px 40px rgba(10,36,99,0.10);
  --sombra-lg:   0 20px 60px rgba(10,36,99,0.16);
  --radio:       14px;
  --radio-sm:    8px;
  --max:         1160px;
  --transition:  all .25s cubic-bezier(.4,0,.2,1);
  --navy:        var(--azul);
  --accent:      var(--acento);
  --muted:       var(--gris-texto);
  --text:        var(--texto);
  --font-head:   'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
}


/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'DM Sans', sans-serif;
  color:var(--texto);
  background:var(--blanco);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family:'Syne', sans-serif; line-height:1.15; }
img { max-width:100%; display:block; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; }

/* ─── UTILITIES ─────────────────────────────────────────── */
.container { max-width:var(--max); margin:0 auto; padding:0 24px; }
section { padding:90px 5%; }

.section-tag {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--azul-medio); background:rgba(27,79,216,.08);
  padding:5px 14px; border-radius:100px; margin-bottom:16px;
}
.section-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--acento); display:inline-block; }
.section-title {
  font-size:clamp(1.8rem, 3vw, 2.7rem);
  font-weight:800; line-height:1.18; color:var(--azul);
  margin-bottom:14px;
}
.section-sub {
  font-size:1.05rem; color:var(--gris-texto);
  line-height:1.75; max-width:560px; margin-bottom:52px;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--acento); color:#fff;
  font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem;
  padding:14px 28px; border-radius:10px; text-decoration:none;
  transition:var(--transition); box-shadow:0 4px 20px rgba(0,201,167,.35);
  border:none; cursor:pointer; white-space:nowrap;
}
.btn-primary:hover { background:var(--acento-h); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,201,167,.45); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--azul-medio); color:#fff;
  font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem;
  padding:14px 28px; border-radius:10px; text-decoration:none;
  transition:var(--transition); box-shadow:0 4px 20px rgba(27,79,216,.3);
  border:none; cursor:pointer;
}
.btn-secondary:hover { background:var(--azul); transform:translateY(-2px); }

.btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; color:var(--azul-medio);
  font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem;
  padding:13px 28px; border-radius:10px; text-decoration:none;
  border:2px solid var(--azul-medio); transition:var(--transition); cursor:pointer;
}
.btn-outline:hover { background:var(--azul-medio); color:#fff; transform:translateY(-2px); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.12); color:#fff;
  font-family:'Syne',sans-serif; font-weight:600; font-size:.95rem;
  padding:13px 28px; border-radius:10px; text-decoration:none;
  border:1px solid rgba(255,255,255,.28); transition:var(--transition);
}
.btn-ghost:hover { background:rgba(255,255,255,.22); transform:translateY(-2px); }

/* ─── NAVEGACIÓN ─────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; height:70px;
  background:rgba(248,250,255,.95); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(10,36,99,.07);
  box-shadow:0 2px 20px rgba(10,36,99,.06);
  transition:var(--transition);
}
nav.scrolled { height:62px; box-shadow:0 4px 30px rgba(10,36,99,.10); }

.nav-logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.25rem;
  color:var(--azul); text-decoration:none;
  display:flex; align-items:center; gap:9px; flex-shrink:0;
}
.nav-logo span { color:var(--acento); }
.nav-logo img { height:36px; width:auto; }

.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a {
  text-decoration:none; color:var(--gris-texto); font-size:.91rem; font-weight:500;
  padding:7px 13px; border-radius:8px; transition:var(--transition);
}
.nav-links a:hover, .nav-links a.active { color:var(--azul); background:var(--gris-claro); }

/* Dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown > a { display:flex; align-items:center; gap:5px; }
.nav-dropdown > a::after { content:'▾'; font-size:.7rem; }
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border:1px solid #DDE5F5; border-radius:12px;
  padding:8px; min-width:220px;
  box-shadow:0 10px 40px rgba(10,36,99,.12);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:var(--transition); pointer-events:none; z-index:200;
}
.nav-dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.dropdown-menu a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  font-size:.88rem; color:var(--texto) !important;
  background:transparent !important; transition:var(--transition);
}
.dropdown-menu a:hover { background:var(--gris-claro) !important; color:var(--azul-medio) !important; }
.dropdown-menu a .dmenu-icon { font-size:1.1rem; flex-shrink:0; }

.nav-cta {
  background:var(--azul-medio) !important; color:#fff !important;
  padding:10px 22px !important; border-radius:9px !important;
  font-weight:700 !important; font-size:.88rem !important;
  transition:var(--transition) !important; box-shadow:0 3px 12px rgba(27,79,216,.3) !important;
  margin-left:8px !important;
}
.nav-cta:hover { background:var(--azul) !important; transform:translateY(-1px) !important; }

/* Mobile menu */
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--azul); border-radius:2px; transition:var(--transition); }

@media(max-width:960px) {
  .nav-toggle { display:flex; }
  .nav-links {
    position:fixed; top:70px; left:0; right:0; bottom:0;
    background:#fff; flex-direction:column; align-items:flex-start;
    padding:24px; gap:4px; overflow-y:auto;
    transform:translateX(100%); transition:var(--transition);
    border-top:1px solid var(--gris-claro);
  }
  .nav-links.open { transform:none; }
  .nav-links a { width:100%; padding:12px 16px; font-size:1rem; }
  .dropdown-menu { position:static; box-shadow:none; border:none; opacity:1; visibility:visible; transform:none; background:var(--gris-claro); margin-top:4px; }
  .nav-cta { width:100%; justify-content:center; margin-left:0 !important; }
}


.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; border:none; border-radius:10px; text-decoration:none; cursor:pointer; transition:var(--transition); }
.text-accent { color: var(--acento); }
.section { padding:90px 5%; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.badge-sm { font-size:.72rem; padding:3px 8px; background:rgba(27,79,216,.08); color:var(--azul-medio); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.footer-col h4 { color:#fff; font-family:var(--font-head); margin-bottom:12px; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:8px; }
.footer-col a { color:rgba(255,255,255,.65); text-decoration:none; }
.footer-col a:hover { color:var(--acento); }
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .footer-grid{grid-template-columns:1fr;} }

/* ─── PAGE HERO (internas) ───────────────────────────────── */
.page-hero {
  background:linear-gradient(135deg,#0A2463 0%,#1B4FD8 55%,#3A7BF7 100%);
  padding:148px 5% 88px; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 700px 500px at 80% 50%,rgba(0,201,167,.12) 0%,transparent 70%);
}
.page-hero::after {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.page-hero-inner { max-width:var(--max); margin:0 auto; position:relative; z-index:1; }
.page-hero .section-tag { color:var(--acento); background:rgba(0,201,167,.15); border:1px solid rgba(0,201,167,.3); }
.page-hero .section-tag::before { background:#fff; }
.page-hero h1 { font-size:clamp(2rem,3.5vw,3.1rem); font-weight:800; color:#fff; margin-bottom:16px; }
.page-hero p { font-size:1.1rem; color:rgba(255,255,255,.72); max-width:560px; line-height:1.7; }
.page-hero .breadcrumb { display:flex; align-items:center; gap:8px; font-size:.82rem; color:rgba(255,255,255,.55); margin-bottom:22px; }
.page-hero .breadcrumb a { color:rgba(255,255,255,.6); transition:color .2s; }
.page-hero .breadcrumb a:hover { color:var(--acento); }
.page-hero .breadcrumb span { color:rgba(255,255,255,.3); }

/* ─── FOOTER ─────────────────────────────────────────────── */
footer { background:#060F26; color:rgba(255,255,255,.55); padding:64px 5% 32px; }
.footer-inner {
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:28px;
}
.footer-brand .footer-logo {
  font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:800; color:#fff;
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.footer-brand .footer-logo span { color:var(--acento); }
.footer-brand .footer-logo img { height:34px; width:auto; }
.footer-brand p { font-size:.87rem; line-height:1.75; max-width:300px; }
.footer-brand .footer-contact { margin-top:22px; }
.footer-brand .footer-contact a { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.6); font-size:.87rem; margin-bottom:9px; transition:color .2s; }
.footer-brand .footer-contact a:hover { color:var(--acento); }
.footer-cert { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.footer-cert-badge { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:5px 12px; font-size:.76rem; font-weight:600; color:rgba(255,255,255,.6); }
footer h4 { font-family:'Syne',sans-serif; color:#fff; font-size:.9rem; margin-bottom:18px; font-weight:700; }
.footer-links li { margin-bottom:11px; }
.footer-links a { color:rgba(255,255,255,.5); font-size:.86rem; transition:color .2s; display:flex; align-items:center; gap:7px; }
.footer-links a::before { content:'→'; font-size:.75rem; color:var(--acento); opacity:.6; }
.footer-links a:hover { color:var(--acento); }
.footer-links a:hover::before { opacity:1; }
.footer-bottom {
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.81rem; flex-wrap:wrap; gap:12px;
}
.social-links { display:flex; gap:10px; }
.social-links a {
  width:36px; height:36px; background:rgba(255,255,255,.07); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6); font-size:.8rem; text-decoration:none;
  transition:var(--transition); font-family:'Syne',sans-serif; font-weight:700;
}
.social-links a:hover { background:var(--acento); color:#fff; transform:translateY(-2px); }

/* ─── WA FLOAT ──────────────────────────────────────────── */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:500;
  width:60px; height:60px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.5); text-decoration:none;
  animation:pulsewa 2.5s infinite; transition:transform .2s;
}
.wa-float:hover { transform:scale(1.1); }
.wa-float svg { width:30px; height:30px; fill:#fff; }
.wa-float .wa-tooltip {
  position:absolute; right:70px; background:#333; color:#fff;
  font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:6px;
  white-space:nowrap; opacity:0; transition:opacity .2s;
  pointer-events:none;
}
.wa-float:hover .wa-tooltip { opacity:1; }

/* ─── REVEAL ANIMATION ──────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(-24px); transition:opacity .65s ease, transform .65s ease; }
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(24px); transition:opacity .65s ease, transform .65s ease; }
.reveal-right.visible { opacity:1; transform:none; }

/* ─── ALERT/NOTICE ──────────────────────────────────────── */
.alert { padding:14px 20px; border-radius:10px; font-size:.9rem; margin-bottom:16px; display:flex; align-items:flex-start; gap:10px; }
.alert-success { background:rgba(0,201,167,.1); border:1.5px solid var(--acento); color:var(--azul); }
.alert-error { background:rgba(229,62,62,.08); border:1.5px solid var(--rojo); color:#8B1A1A; }
.alert-info { background:rgba(27,79,216,.07); border:1.5px solid var(--azul-claro); color:var(--azul); }

/* ─── CARDS ─────────────────────────────────────────────── */
.card {
  background:#fff; border:1px solid #DDE5F5;
  border-radius:var(--radio); padding:28px;
  box-shadow:0 2px 12px rgba(10,36,99,.05);
  transition:var(--transition);
}
.card:hover { box-shadow:var(--sombra); transform:translateY(-4px); }

/* ─── BADGE ─────────────────────────────────────────────── */
.badge-green { background:#D4EDDA; color:#155724; font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:20px; }
.badge-blue  { background:#D0E4FF; color:#0A2463; font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:20px; }
.badge-teal  { background:var(--acento-light); color:#006D60; font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:20px; }

/* ─── FORM ELEMENTS ─────────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { display:block; font-size:.84rem; font-weight:600; color:var(--azul); margin-bottom:7px; }
.form-req { color:var(--rojo); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  width:100%; padding:12px 16px;
  border:1.5px solid #DDE5F5; border-radius:9px;
  font-family:'DM Sans',sans-serif; font-size:.93rem; color:var(--texto);
  background:#fff; transition:var(--transition); outline:none; resize:none;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--azul-medio); box-shadow:0 0 0 3px rgba(27,79,216,.1);
}
input::placeholder, textarea::placeholder { color:#A0AABF; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6480' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; cursor:pointer; }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulsewa { 0%,100%{box-shadow:0 4px 24px rgba(37,211,102,.5)} 50%{box-shadow:0 4px 36px rgba(37,211,102,.75)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:960px) {
  .footer-inner { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .footer-inner { grid-template-columns:1fr; gap:32px; }
  section { padding:70px 5%; }
  .wa-float { bottom:20px; right:20px; }
}

/* ══════════════════════════════════
   STATS / COUNTERS
   ══════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:2rem; text-align:center; }
.stat-item { }
.stat-number { font-family:var(--font-head); font-size:3rem; font-weight:800; color:var(--navy); display:inline; }
.stat-suffix { font-family:var(--font-head); font-size:2.5rem; font-weight:800; color:var(--accent); display:inline; }
.stat-label { display:block; color:var(--muted); font-size:.9rem; margin-top:.25rem; }

/* ══════════════════════════════════
   BLOG STYLES REFERENCED IN PAGES.CSS breadcrumb color fix
   ══════════════════════════════════ */
.breadcrumb ol { display:flex; gap:.5rem; list-style:none; padding:0; margin:0 0 1.5rem; font-size:.875rem; }
.breadcrumb li::after { content:" /"; color:rgba(255,255,255,.4); margin-left:.5rem; }
.breadcrumb li:last-child::after { display:none; }
.breadcrumb a { color:rgba(255,255,255,.65); }
.breadcrumb a:hover { color:var(--accent); }

/* Light breadcrumb for non-hero pages */
.breadcrumb.bc-light ol { }
.breadcrumb.bc-light a { color:var(--muted); }
.breadcrumb.bc-light li::after { color:#cbd5e1; }