:root {
  --green:   #0C4A36;
  --green2:  #155C44;
  --green3:  #1A6B50;
  --green-l: #EBF3EF;
  --amber:   #E8971E;
  --amber-d: #B5701A;
  --amber-l: #FDF3E0;
  /* Mexico accent */
  --mx:      #7B2D3E;
  --mx-l:    #F5E8EB;
  --mx-m:    #9E3D52;
  --ink:     #141E2C;
  --ink-s:   #2B3A4E;
  --muted:   #596578;
  --rule:    #D6E4DD;
  --cream:   #FAF8F4;
  --white:   #FFFFFF;
  --serif:   'Fraunces', Georgia, serif;
  --sans:    'Manrope', system-ui, sans-serif;
  --shadow:  0 2px 8px rgba(12,74,54,.06), 0 12px 32px rgba(12,74,54,.10);
}
/* ══ RUTAS — responsive ══ */
.rutas-sec { background: var(--green); padding: 0; }

.rutas-inner {
  display: flex;
  overflow-x: auto;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rutas-inner::-webkit-scrollbar { display: none; }

.rutas-label {
  padding: 20px 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  border-right: 1px solid rgba(255,255,255,.08);
}

.ruta-item {
  display: flex;
  align-items: center;
  padding: 20px 28px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .2s;
  gap: 0;
}
.ruta-item:hover { background: rgba(255,255,255,.04); }

.ruta-from { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); }
.ruta-from span { display: block; font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,.4); margin-top: 2px; letter-spacing: .04em; }

.ruta-arrow {
  margin: 0 14px;
  color: var(--amber);
  display: flex; align-items: center; gap: 4px;
  font-size: 16px;
}
.ruta-arrow::before { content: ''; width: 24px; height: 1px;
  background: rgba(232,151,30,.4); }

.ruta-to { font-size: 13px; font-weight: 700; color: var(--amber); }
.ruta-to span { display: block; font-size: 10px; font-weight: 500;
  color: rgba(232,151,30,.6); margin-top: 2px; letter-spacing: .04em; }

/* ── TABLET (≤ 900px): items más compactos, sigue siendo scroll ── */
@media (max-width: 900px) {
  .rutas-label { display: none; } /* quita el label — ahorra espacio */
  .ruta-item { padding: 16px 20px; }
  .ruta-arrow { margin: 0 10px; }
  .ruta-arrow::before { width: 16px; }
}

/* ── MOBILE (≤ 600px): grid 2 columnas, sin scroll horizontal ── */
@media (max-width: 600px) {
  .rutas-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-x: visible;
    border-top: none;
  }
  .rutas-label { display: none; }
  .ruta-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  /* borde derecho solo en columna izquierda */
  .ruta-item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.08);
  }
  .ruta-arrow {
    margin: 0;
    flex-direction: row;
    font-size: 13px;
  }
  .ruta-arrow::before { width: 12px; }
  .ruta-from { font-size: 12px; }
  .ruta-from span { font-size: 9px; }
  .ruta-to { font-size: 12px; }
  .ruta-to span { font-size: 9px; }
}

/* ══════════════════════════════════════
   ESTADOS DE MÉXICO — pill strip
══════════════════════════════════════ */
.estados-sec{background:var(--white);padding:28px 0;}
.estados-intro{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:28px;flex-wrap:wrap;}
.estados-intro h3{font-family:var(--serif);font-size:22px;font-weight:500;
  color:var(--ink);font-variation-settings:"opsz" 144;}
.estados-intro span{font-size:13px;color:var(--muted);font-style:italic;}
.estados-pills{display:flex;flex-wrap:wrap;gap:8px;}
.estado-pill{
  padding:7px 16px;border-radius:99px;font-size:13px;font-weight:600;
  border:1.5px solid var(--rule);background:var(--cream);color:var(--ink-s);
  transition:all .2s;cursor:default;
}
.estado-pill:hover{background:var(--mx-l);border-color:var(--mx);color:var(--mx);}
.estado-pill.alta{background:var(--mx-l);border-color:var(--mx);color:var(--mx);}
.estado-pill.flag::before{content:'🇲🇽 ';font-size:12px;}

/* ══════════════════════════════════════
   CONSULADOS — Mexico specific
══════════════════════════════════════ */
.consul-sec{background:var(--white);}
.consul-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;}
.consul-left p{font-size:15.5px;color:var(--ink-s);line-height:1.7;margin-bottom:14px;}
.consul-left p strong{color:var(--green);}
.consul-alert{
  background:var(--mx-l);border:1px solid rgba(123,45,62,.2);
  border-left:4px solid var(--mx);border-radius:0 8px 8px 0;
  padding:16px 20px;margin-top:20px;
}
.consul-alert p{font-size:13.5px;color:var(--mx);line-height:1.6;margin:0;font-weight:600;}
 
/* Consul cards */
.consul-cards{display:flex;flex-direction:column;gap:10px;}
.consul-card{
  background:var(--cream);border:1px solid var(--rule);
  border-radius:8px;padding:16px 18px;
  display:flex;align-items:center;gap:14px;
  transition:border-color .2s,box-shadow .2s;
}
.consul-card:hover{border-color:var(--mx);box-shadow:0 0 0 3px rgba(123,45,62,.08);}
.consul-flag{font-size:22px;flex-shrink:0;}
.consul-info h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.consul-info p{font-size:12px;color:var(--muted);}
.consul-dot{width:8px;height:8px;border-radius:50%;
  background:var(--mx);flex-shrink:0;margin-left:auto;}
.consul-note{font-size:12px;color:var(--muted);font-style:italic;margin-top:14px;text-align:center;}
 
@media(max-width:860px){.consul-grid{grid-template-columns:1fr;}}
/* ── Lo que no saben ── */
.nodosabe-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nodosabe-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.nodosabe-item:first-child { border-top: 1px solid var(--rule); }
.nodosabe-x {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mx-l);
  border: 1.5px solid rgba(123,45,62,.2);
  color: var(--mx);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.nodosabe-text h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.nodosabe-text p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.nodosabe-closing {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--green-l);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.nodosabe-closing p {
  font-size: 13.5px;
  color: var(--ink-s);
  line-height: 1.55;
}
.nodosabe-closing strong { color: var(--green); }

/* ══════════════════════════════════════
   PROCESO
══════════════════════════════════════ */
.proc-sec{background:var(--cream);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.step{background:var(--white);border:1px solid var(--rule);
  border-radius:10px;padding:26px 22px;transition:transform .3s,box-shadow .3s;}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.sn{font-family:var(--serif);font-size:38px;font-weight:400;font-style:italic;
  color:var(--amber);line-height:1;margin-bottom:12px;font-variation-settings:"opsz" 144;}
.step h3{font-family:var(--serif);font-size:16px;font-weight:600;
  color:var(--ink);margin-bottom:6px;line-height:1.25;font-variation-settings:"opsz" 144;}
.step p{font-size:13px;color:var(--muted);line-height:1.6;}
/* Mexico-specific step highlight */
.step.mx-step{border-color:rgba(123,45,62,.2);}
.step.mx-step .sn{color:var(--mx);}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.steps{grid-template-columns:1fr;}}
 
/* ══════════════════════════════════════
   MODALIDADES
══════════════════════════════════════ */
.mod-sec{background:var(--white);}
.mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.mod-card{border:1.5px solid var(--rule);border-radius:12px;
  padding:36px 30px;position:relative;overflow:hidden;transition:box-shadow .3s;}
.mod-card:hover{box-shadow:var(--shadow);}
.mod-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.mod-card.c::before{background:var(--amber);}
.mod-card.z::before{background:var(--green3);}
.mod-tag{display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;
  border-radius:99px;margin-bottom:14px;}
.mod-card.c .mod-tag{background:rgba(232,151,30,.1);color:var(--amber-d);}
.mod-card.z .mod-tag{background:var(--green-l);color:var(--green3);}
.mod-card h3{font-family:var(--serif);font-size:25px;font-weight:600;
  margin-bottom:12px;font-variation-settings:"opsz" 144;}
.mod-card p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:10px;}
.mod-card p:last-child{margin-bottom:0;}
@media(max-width:720px){.mod-grid{grid-template-columns:1fr;}}
 
/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq-sec{background:var(--cream);}
.faq-wrap{max-width:760px;margin:0 auto;}
.faq-item{border-top:1px solid var(--rule);}
.faq-item:last-child{border-bottom:1px solid var(--rule);}
.faq-btn{width:100%;background:none;border:none;padding:22px 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  text-align:left;font-family:var(--serif);font-size:17px;font-weight:500;
  color:var(--ink);line-height:1.3;transition:color .2s;}
.faq-btn:hover{color:var(--green3);}
.faq-plus{flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--cream);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--ink);transition:all .2s;}
.faq-item.open .faq-plus{background:var(--amber);color:var(--white);
  border-color:var(--amber);transform:rotate(45deg);}
.faq-body{max-height:0;overflow:hidden;transition:max-height .32s ease;
  font-size:14.5px;color:var(--muted);line-height:1.7;}
.faq-in{padding:0 0 22px;max-width:92%;}
.faq-in p{margin-bottom:10px;}
.faq-item.open .faq-body{max-height:480px;}
 
/* ══════════════════════════════════════
   FINAL CTA — Mexico colors
══════════════════════════════════════ */
.fcta{
  background:var(--green);
  padding:96px 0;text-align:center;position:relative;overflow:hidden;
}
.fcta::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 70% at 30% 50%, rgba(123,45,62,.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 70% 50%, rgba(232,151,30,.1) 0%, transparent 55%);}
.fcta-inner{position:relative;z-index:1;}
.fcta h2{font-family:var(--serif);font-size:clamp(32px,5vw,54px);
  font-weight:400;line-height:1.1;letter-spacing:-.025em;color:var(--white);
  margin-bottom:14px;font-variation-settings:"opsz" 144;}
.fcta h2 em{font-style:italic;color:var(--amber);}
.fcta .fcta-sub{font-size:17px;color:rgba(255,255,255,.68);
  max-width:480px;margin:0 auto 40px;line-height:1.6;}
.fcta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.fcta .cta-emg{font-size:17px;padding:20px 36px;}
.fcta .cta-frm{font-size:17px;padding:20px 36px;}
 
/* DISCLAIMER */
.disc{background:var(--cream);border-top:1px solid var(--rule);padding:24px 0;}
.disc p{font-size:11px;color:var(--muted);line-height:1.7;
  text-align:center;max-width:900px;margin:0 auto;}
 
/* STICKY */
.sticky{position:fixed;bottom:0;left:0;right:0;z-index:100;
  display:none;background:var(--ink);border-top:3px solid var(--amber);
  padding:12px 20px;align-items:center;justify-content:space-between;gap:12px;}
.sticky-info strong{display:block;font-size:12.5px;color:var(--white);}
.sticky-info span{font-size:11px;color:rgba(255,255,255,.6);}
.sticky-btn{background:var(--amber);color:var(--green);padding:12px 18px;
  border-radius:6px;text-decoration:none;font-weight:800;font-size:13px;
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;}
.sticky-btn svg{width:14px;height:14px;}
@media(max-width:768px){.sticky{display:flex;}body{padding-bottom:80px;}}
.wtag{position:fixed;top:0;right:0;z-index:999;background:#8C2F2A;
  color:#fff;font-size:9px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 12px;border-bottom-left-radius:4px;}

@media (max-width: 1024px) {
  .how-we-work-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .how-we-work-grid {
    grid-template-columns: 1fr !important;
  }
}
 

 