/* ==========================================================================
   MexAuPair · Página de inicio (mobile-first)
   Usa los tokens definidos en mx-global.css
   ========================================================================== */

.mx-home { color: var(--mx-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); }
.mx-home h1, .mx-home h2, .mx-home h3 { font-family: var(--font-heading); font-weight: 700; line-height: var(--lh-tight); margin: 0; letter-spacing: -0.01em; text-transform: none; }
:where(.mx-home) p { margin: 0 0 var(--sp-3); }
:where(.mx-home) img { max-width: 100%; height: auto; }

.mx-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-3); }
@media (min-width: 768px) { .mx-container { padding: 0 var(--sp-5); } }

.mx-section { padding: var(--sp-7) 0; }
.mx-section--soft { background: var(--mx-bg-soft); }
@media (min-width: 992px) { .mx-section { padding: 96px 0; } }

.mx-section-head { max-width: 720px; margin: 0 auto var(--sp-6); text-align: center; }
.mx-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mx-blue-700);
}
.mx-section-head h2 { font-size: var(--fs-2xl); font-weight: 700; color: var(--mx-navy); margin-bottom: var(--sp-3); text-transform: none; }
.mx-section-head p { color: var(--mx-text-muted); font-size: var(--fs-lg); margin: 0; }

/* ---------- Botones ---------- */
.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.mx-btn:hover, .mx-btn:focus { text-decoration: none; }
.mx-btn:hover { transform: translateY(-2px); }
.mx-btn svg, .mx-btn .fa { width: 20px; height: 20px; font-size: 20px; fill: currentColor; flex: none; }

.mx-btn--primary { background: var(--mx-yellow); color: var(--mx-navy); box-shadow: 0 8px 24px rgba(255, 221, 0, .28); }
.mx-btn--primary:hover, .mx-btn--primary:focus { color: var(--mx-navy); box-shadow: 0 12px 30px rgba(255, 221, 0, .4); }

.mx-btn--secondary { background: transparent; color: var(--mx-navy); border-color: var(--mx-navy); }
.mx-btn--secondary:hover, .mx-btn--secondary:focus { background: var(--mx-navy); color: #fff; }
.mx-on-dark .mx-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, .85); }
.mx-on-dark .mx-btn--secondary:hover, .mx-on-dark .mx-btn--secondary:focus { background: #fff; color: var(--mx-navy); }

.mx-btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.mx-btn-row .mx-btn { flex: 1 1 100%; }
@media (min-width: 480px) { .mx-btn-row .mx-btn { flex: 0 0 auto; } }

.mx-link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 44px;
  font-weight: 500;
  color: var(--mx-blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mx-link-arrow:hover, .mx-link-arrow:focus { color: var(--mx-navy); }
.mx-on-dark .mx-link-arrow { color: #fff; }
.mx-on-dark .mx-link-arrow:hover { color: var(--mx-yellow); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.mx-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1200px 600px at 78% 45%, rgba(35, 166, 221, .32), transparent 60%),
    radial-gradient(700px 500px at 10% 0%, rgba(163, 211, 0, .12), transparent 60%),
    linear-gradient(180deg, #041d30 0%, var(--mx-navy) 55%, #073655 100%);
  padding: 96px 0 0;
}
@media (min-width: 769px) { .mx-hero { padding-top: 120px; } .mx-hero__logo { width: 168px; } }
@media (min-width: 992px) { .mx-hero { padding: 120px 0 var(--sp-6); min-height: min(860px, 100vh); display: flex; align-items: center; } }

.mx-hero__grid { position: relative; display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 992px) { .mx-hero__grid { grid-template-columns: 1.1fr .9fr; gap: var(--sp-4); } }

.mx-hero__content { position: relative; z-index: 2; }
.mx-hero__logo { display: block; width: 128px; height: auto; margin-bottom: var(--sp-4); border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,255,255,.08); }
.mx-hero__kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #e6f4fb;
}
.mx-hero__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-green); box-shadow: 0 0 0 4px rgba(163, 211, 0, .25); }

.mx-hero h1 {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}
.mx-hero h1 .mx-hl { color: var(--mx-green); }
.mx-hero__sub {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-lg);
  color: #d5ebf6;
}
.mx-hero__sub li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mx-hero__sub li + li::before { content: "·"; color: var(--mx-green); font-weight: 700; margin-right: var(--sp-1); }
@media (max-width: 479px) {
  .mx-hero__sub { flex-direction: column; }
  .mx-hero__sub li + li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-green); margin: 0; }
  .mx-hero__sub li:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-green); }
}
.mx-hero__note { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-sm); color: #b9dcee; }
.mx-hero__host { margin-top: var(--sp-1); font-size: var(--fs-sm); }

/* Globo 3D */
.mx-globe {
  position: relative;
  height: 380px;
  margin: 0 calc(var(--sp-3) * -1);
  cursor: grab;
}
.mx-globe.is-dragging { cursor: grabbing; }
@media (min-width: 600px) { .mx-globe { height: 480px; } }
@media (min-width: 992px) { .mx-globe { height: 640px; margin: 0 -48px 0 0; } }
.mx-globe-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease; }
.mx-globe.is-ready .mx-globe-canvas { opacity: 1; }

/* Marcador de posición mientras carga / sin WebGL */
.mx-globe::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(72%, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(92, 200, 240, .35), transparent 55%),
    radial-gradient(circle at 50% 50%, #0a3a5a 0%, #05223a 70%);
  box-shadow: 0 0 80px rgba(35, 166, 221, .35), inset 0 0 40px rgba(35, 166, 221, .35);
  transition: opacity 1s ease;
}
.mx-globe.is-ready::before { opacity: 0; }

.mx-globe-label {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  margin: -44px 0 0 -8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--mx-navy);
  background: var(--mx-yellow);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity .35s ease;
}
.mx-globe-label.is-origin { background: var(--mx-green); margin-top: 14px; }
.mx-globe-label.is-visible { opacity: 1; }

/* ==========================================================================
   2. CONFIANZA
   ========================================================================== */
.mx-trust { background: var(--mx-navy-800); color: #fff; padding: var(--sp-5) 0; border-top: 1px solid rgba(255,255,255,.08); }
.mx-trust__row { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 768px) { .mx-trust__row { grid-template-columns: auto 1fr; gap: var(--sp-6); } }
.mx-trust__logos img { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto; }
.mx-trust__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .mx-trust__stats { grid-template-columns: repeat(4, 1fr); } }
.mx-trust__stats li { padding: var(--sp-3); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.mx-trust__num { display: block; font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; color: var(--mx-yellow); line-height: 1.2; }
.mx-trust__lbl { display: block; font-size: var(--fs-sm); color: #d5ebf6; margin-top: var(--sp-1); }

.mx-unique { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-unique { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .mx-unique { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.mx-unique li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--mx-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
  color: var(--mx-navy);
}
.mx-check {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(163, 211, 0, .18);
  color: #4d6400;
}
.mx-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; }
.mx-pullquote {
  max-width: 760px;
  margin: var(--sp-6) auto 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--mx-navy);
}
.mx-pullquote span { color: var(--mx-blue-700); }

/* ==========================================================================
   3. PAÍSES
   ========================================================================== */
.mx-countries { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mx-countries { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

.mx-country {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  background: var(--mx-navy);
  box-shadow: var(--shadow-sm);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change: transform;
}
.mx-country:hover, .mx-country:focus-visible { --lift: -6px; color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.mx-country > img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 270; object-fit: cover; transition: transform .6s ease; }
.mx-country:hover > img { transform: scale(1.06); }
.mx-country::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 43, 68, 0) 30%, rgba(6, 43, 68, .9) 100%);
}
.mx-country__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-3);
}
@media (min-width: 768px) { .mx-country__body { padding: var(--sp-4); } }
.mx-country__flag { width: 24px; height: 24px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.mx-country__name { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
@media (min-width: 768px) { .mx-country__name { font-size: var(--fs-xl); } }
.mx-tag {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .92);
  color: var(--mx-navy);
}
.mx-tag--lang { background: var(--mx-green); color: #1c2600; }
.mx-countries__subtitle { margin: var(--sp-6) 0 var(--sp-4); font-size: var(--fs-lg); color: var(--mx-navy); text-align: center; }
/* 5 destinos principales: 2 grandes + 3 medianos en escritorio */
@media (min-width: 768px) {
  .mx-countries--main { grid-template-columns: repeat(6, 1fr); }
  .mx-countries--main > li { grid-column: span 2; }
  .mx-countries--main > li:nth-child(-n+2) { grid-column: span 3; }
  .mx-countries--main > li:nth-child(-n+2) .mx-country > img { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .mx-countries--main > li:first-child { grid-column: 1 / -1; }
}
/* otros programas: tarjetas compactas */
@media (min-width: 768px) { .mx-countries--more { grid-template-columns: repeat(4, 1fr); } }
.mx-countries--more .mx-country__name { font-size: var(--fs-base); }

/* ==========================================================================
   4. BENEFICIOS
   ========================================================================== */
.mx-benefits { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 992px) { .mx-benefits { grid-template-columns: 1.15fr .85fr; } }
.mx-benefits .mx-section-head { text-align: left; margin: 0 0 var(--sp-5); }
.mx-benefit-list { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-benefit-list { grid-template-columns: repeat(2, 1fr); } }
.mx-benefit-list li { display: flex; gap: var(--sp-3); align-items: center; color: var(--mx-navy); font-weight: 500; }
.mx-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(35, 166, 221, .12);
  color: var(--mx-blue-700);
  font-size: 20px;
}
.mx-benefits__media { position: relative; }
.mx-benefits__media img { display: block; width: 100%; border-radius: 24px; box-shadow: var(--shadow); }
@media (min-width: 992px) { .mx-benefits__media img { max-height: 620px; object-fit: cover; object-position: center 60%; } }

/* Foto que lleva a la página de testimonios */
.mx-photo-link { display: block; color: #fff; text-decoration: none; }
.mx-photo-link img { transition: transform .5s ease, box-shadow .3s ease; }
.mx-photo-link:hover img, .mx-photo-link:focus-visible img { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(6, 43, 68, .22); }
.mx-photo-link__label {
  position: absolute;
  left: 50%; bottom: var(--sp-4);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--mx-navy);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(6, 43, 68, .35);
  transition: background-color .2s ease, color .2s ease;
}
.mx-photo-link:hover .mx-photo-link__label,
.mx-photo-link:focus-visible .mx-photo-link__label { background: var(--mx-yellow); color: var(--mx-navy); }
.mx-benefits__media::before {
  content: "";
  position: absolute; inset: auto -16px -16px auto;
  width: 60%; height: 60%;
  border-radius: 24px;
  background: var(--mx-green);
  opacity: .25;
  z-index: -1;
}

/* ==========================================================================
   5. TESTIMONIOS
   ========================================================================== */
.mx-testimonials { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-6); padding: 0; list-style: none; }
@media (min-width: 768px) {
  /* 5 testimonios: 2 destacados arriba + 3 debajo */
  .mx-testimonials { grid-template-columns: repeat(6, 1fr); }
  .mx-testimonials > li { grid-column: span 2; }
  .mx-testimonials > li:nth-child(-n+2) { grid-column: span 3; }
  .mx-testimonials > li:nth-child(-n+2) .mx-quote img { aspect-ratio: 4 / 3; object-position: center 30%; }
  .mx-testimonials > li:nth-child(-n+2) blockquote { font-size: var(--fs-lg); }
}
.mx-quote {
  display: flex; flex-direction: column;
  height: 100%;
  margin: 0;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--mx-border);
}
.mx-quote img { display: block; width: 100%; height: auto; aspect-ratio: 567 / 540; object-fit: cover; }
.mx-quote blockquote { margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-3); border: 0; font-size: var(--fs-base); color: var(--mx-text); position: relative; }
.mx-quote blockquote::before { content: "“"; position: absolute; top: -8px; left: var(--sp-3); font-family: Georgia, serif; font-size: 56px; line-height: 1; color: var(--mx-blue); opacity: .45; }
.mx-quote blockquote p { margin: 0; }
.mx-quote figcaption { margin-top: auto; padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); color: var(--mx-text-muted); }
.mx-quote figcaption strong { display: block; font-family: var(--font-heading); font-size: var(--fs-base); color: var(--mx-navy); }

.mx-video-row { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 992px) { .mx-video-row { grid-template-columns: .8fr 1.2fr; } }
.mx-video-row h3 { font-size: var(--fs-xl); font-weight: 700; color: var(--mx-navy); margin-bottom: var(--sp-3); }

.mx-social { margin-top: var(--sp-5); }
.mx-social p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--mx-text-muted); }
.mx-social ul { display: flex; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.mx-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--mx-border);
  color: var(--mx-navy);
  font-size: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.mx-social a:hover, .mx-social a:focus-visible { transform: translateY(-2px); background: var(--mx-navy); color: #fff; }

.mx-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mx-navy);
  box-shadow: var(--shadow);
}
.mx-video img, .mx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.mx-video__play {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  width: 100%;
  border: 0; padding: var(--sp-4);
  background: linear-gradient(180deg, rgba(6,43,68,0) 45%, rgba(6,43,68,.55));
  cursor: pointer;
}
.mx-video__play span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--mx-yellow);
  color: var(--mx-navy);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s ease;
}
.mx-video__play span svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.mx-video__play:hover span, .mx-video__play:focus-visible span { transform: scale(1.1); }

/* ==========================================================================
   6. SEGURIDAD
   ========================================================================== */
.mx-safety { background: linear-gradient(180deg, #fff 0%, var(--mx-bg-soft) 100%); }
.mx-safety__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 992px) { .mx-safety__grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.mx-safety .mx-section-head { text-align: left; margin: 0; }
.mx-safety .mx-section-head p { margin-bottom: var(--sp-3); }
.mx-safety-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.mx-safety-list li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--mx-border);
  border-left: 4px solid var(--mx-blue);
}
.mx-safety-list li .mx-icon { background: rgba(231, 174, 83, .18); color: #8a5a10; }
.mx-safety-list h3 { font-size: var(--fs-base); color: var(--mx-navy); margin-bottom: var(--sp-1); }
.mx-safety-list p { margin: 0; color: var(--mx-text-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   7. PROCESO
   ========================================================================== */
.mx-steps { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-6); padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 768px) { .mx-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mx-steps { grid-template-columns: repeat(4, 1fr); } }
.mx-step {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--mx-border);
  box-shadow: var(--shadow-sm);
  counter-increment: step;
}
.mx-step::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--mx-blue-700), var(--mx-blue));
  box-shadow: 0 6px 16px rgba(10, 106, 148, .3);
}
@media (min-width: 1100px) {
  .mx-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--sp-5) + 24px);
    left: calc(var(--sp-4) + 56px);
    right: calc(var(--sp-4) * -1 - 8px);
    border-top: 2px dashed rgba(35, 166, 221, .5);
  }
}
.mx-step h3 { font-size: var(--fs-lg); color: var(--mx-navy); margin-bottom: var(--sp-2); }
.mx-step p { margin: 0; color: var(--mx-text-muted); font-size: var(--fs-sm); }
.mx-steps-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; justify-content: center; }

/* ==========================================================================
   8. CTA FINAL
   ========================================================================== */
.mx-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--mx-navy);
  background-image:
    linear-gradient(180deg, rgba(6, 43, 68, .88), rgba(6, 43, 68, .92)),
    url("../images/background/homepage-default-banner.jpg");
  background-size: cover;
  background-position: 20% 30%;
}
@media (min-width: 992px) {
  .mx-cta {
    background-image:
      linear-gradient(270deg, rgba(6, 43, 68, .96) 0%, rgba(6, 43, 68, .9) 45%, rgba(6, 43, 68, .15) 75%, rgba(6, 43, 68, 0) 100%),
      url("../images/background/homepage-default-banner.jpg");
    background-position: left 35%;
  }
}
.mx-cta__inner { max-width: 560px; margin-left: auto; }
@media (max-width: 991px) { .mx-cta__inner { margin: 0 auto; } }
.mx-cta h2 { font-size: var(--fs-2xl); color: #fff; margin-bottom: var(--sp-3); }
.mx-cta p { color: #d5ebf6; font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.mx-cta__alt { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); font-size: var(--fs-sm); }

/* ==========================================================================
   Animación de aparición (solo con JS y sin reduced-motion)
   ========================================================================== */
.mx-js .mx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.mx-js .mx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mx-js .mx-reveal { opacity: 1; transform: none; transition: none; }
  .mx-country, .mx-country img, .mx-btn { transition: none; }
}

/* El encabezado del sitio queda sobre el hero oscuro */
.mx-home-page header .bg-transparent { position: absolute; left: 0; right: 0; z-index: 20; }
.mx-home-page .header-main:not(.header-fixed) {
  background-color: rgba(4, 29, 48, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, .12);
}
.mx-home-page .header-main:not(.header-fixed) .navigation .nav-links .main-menu { color: #fff; }
.mx-home-page .header-main:not(.header-fixed) .navigation .nav-links li.active > .main-menu,
.mx-home-page .header-main:not(.header-fixed) .navigation .nav-links li:hover > .main-menu,
.mx-home-page .header-main:not(.header-fixed) .navigation .nav-links li.is-open > .main-menu { color: var(--mx-yellow) !important; }
.mx-home-page .dropdown-menu-1 { background-color: #fff; box-shadow: var(--shadow); }
.mx-home-page .hamburger-menu-wrapper .icons,
.mx-home-page .hamburger-menu-wrapper .icons::before,
.mx-home-page .hamburger-menu-wrapper .icons::after { background-color: #fff; }
.mx-home-page .header-main.header-fixed { background-color: rgba(255, 255, 255, .97); box-shadow: var(--shadow-sm); }
.mx-home-page .header-main.header-fixed .navigation .nav-links .main-menu { color: var(--mx-navy); }
.mx-home-page .header-main.header-fixed .navigation .nav-links li.active > .main-menu,
.mx-home-page .header-main.header-fixed .navigation .nav-links li:hover > .main-menu,
.mx-home-page .header-main.header-fixed .navigation .nav-links li.is-open > .main-menu { color: var(--mx-blue-700) !important; }

/* ==========================================================================
   Páginas de país (usa.html)
   ========================================================================== */
.mx-container--narrow { max-width: 820px; }
.mx-center { text-align: center; margin-top: var(--sp-5); }
.mx-lead { font-size: var(--fs-lg); color: var(--mx-text-muted); margin-bottom: var(--sp-5); }

.mx-split { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 992px) {
  .mx-split { grid-template-columns: 1.1fr .9fr; }
  .mx-split--reverse > :first-child { order: 2; }
}
.mx-home .mx-split__title { font-size: var(--fs-2xl); color: var(--mx-navy); margin: 0 0 var(--sp-4); text-wrap: balance; }
.mx-split__media img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: var(--shadow); }

.mx-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .mx-stats { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.mx-stats li { padding: var(--sp-4); border-radius: var(--radius); background: var(--mx-navy); color: #fff; }
.mx-stats__num { display: block; font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; color: var(--mx-green); line-height: 1.2; }
.mx-stats__lbl { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: #d5ebf6; }

.mx-features { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .mx-features { grid-template-columns: repeat(3, 1fr); } }
.mx-features li { padding: var(--sp-4); background: #fff; border: 1px solid var(--mx-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.mx-features h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-lg); color: var(--mx-navy); }
.mx-features p { margin: 0; font-size: var(--fs-sm); color: var(--mx-text-muted); }
.mx-features__mx { background: var(--mx-navy) !important; border-color: var(--mx-navy) !important; }
.mx-features__mx h3 { color: #fff; }
.mx-features__mx p { color: #d5ebf6; }
.mx-features__mx .mx-icon { background: rgba(163, 211, 0, .2); color: var(--mx-green); }

.mx-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.mx-checklist li { position: relative; padding-left: 36px; color: var(--mx-text); }
.mx-checklist li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(163, 211, 0, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6400' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.mx-options { display: grid; gap: var(--sp-4); max-width: 880px; margin: 0 auto; }
@media (min-width: 768px) { .mx-options { grid-template-columns: 1fr 1fr; } }
.mx-option { position: relative; padding: var(--sp-5) var(--sp-4) var(--sp-4); background: #fff; border: 2px solid var(--mx-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.mx-option--featured { border-color: var(--mx-green); }
.mx-option__tag { display: inline-block; margin-bottom: var(--sp-2); padding: 2px 12px; border-radius: var(--radius-pill); background: var(--mx-navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.mx-option--featured .mx-option__tag { background: var(--mx-green); color: #1c2600; }
.mx-option h3 { font-size: var(--fs-xl); color: var(--mx-navy); margin-bottom: var(--sp-2); }
.mx-option p { margin: 0; color: var(--mx-text-muted); }
.mx-options__note { max-width: 880px; margin: var(--sp-4) auto 0; text-align: center; color: var(--mx-text-muted); }

.mx-compare { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--mx-border); box-shadow: var(--shadow-sm); background: #fff; }
.mx-compare table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--fs-sm); }
.mx-compare th, .mx-compare td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--mx-border); }
.mx-compare tbody tr:last-child th, .mx-compare tbody tr:last-child td { border-bottom: 0; }
.mx-compare thead th { font-family: var(--font-heading); font-size: var(--fs-base); color: var(--mx-navy); background: var(--mx-bg-soft); }
.mx-compare thead th.is-mx { background: var(--mx-navy); color: #fff; }
.mx-compare tbody th { font-weight: 700; color: var(--mx-navy); width: 26%; }
.mx-compare td.is-mx { background: rgba(163, 211, 0, .1); color: var(--mx-navy); font-weight: 500; }
.mx-compare td:not(.is-mx) { color: var(--mx-text-muted); }

.mx-steps--5 { counter-reset: step; }
@media (min-width: 1100px) { .mx-steps--5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 768px) and (max-width: 1099px) { .mx-steps--5 { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 768px) {
  .mx-testimonials--two { grid-template-columns: repeat(2, 1fr) !important; max-width: 920px; margin-left: auto; margin-right: auto; }
  .mx-testimonials--two > li { grid-column: auto !important; }
}
.mx-testimonials--two .mx-quote img { aspect-ratio: 4 / 3; object-position: center 30%; }

.mx-faq { display: grid; gap: var(--sp-3); }
.mx-faq details { background: #fff; border: 1px solid var(--mx-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.mx-faq summary {
  position: relative;
  min-height: 56px;
  padding: var(--sp-3) 56px var(--sp-3) var(--sp-4);
  display: flex; align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--mx-navy);
  cursor: pointer;
  list-style: none;
}
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary::after { content: "+"; position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--mx-blue-700); transition: transform .2s ease; }
.mx-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mx-faq details p { margin: 0; padding: 0 var(--sp-4) var(--sp-4); color: var(--mx-text-muted); }
.mx-callout {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: rgba(163, 211, 0, .14);
  border-left: 4px solid var(--mx-green);
  color: var(--mx-navy);
}
.mx-callout .fa { margin-top: 4px; color: #4d6400; }

/* ---------- Alemania: planes, requisitos y pilares ---------- */
@media (min-width: 992px) { .mx-options--3 { grid-template-columns: repeat(3, 1fr); max-width: none; } }
.mx-option__fine { margin-top: var(--sp-3) !important; padding-top: var(--sp-3); border-top: 1px dashed var(--mx-border); font-size: var(--fs-sm); }

.mx-req3 { display: grid; gap: var(--sp-4); max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 768px) { .mx-req3 { grid-template-columns: repeat(3, 1fr); } }
.mx-req3 li { padding: var(--sp-5) var(--sp-4); text-align: center; background: #fff; border: 2px solid var(--mx-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.mx-req3__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--mx-green); color: #1c2600;
  font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700;
}
.mx-req3 h3 { font-size: var(--fs-lg); color: var(--mx-navy); }
.mx-req3 p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--mx-text-muted); }

@media (min-width: 992px) { .mx-features--4 { grid-template-columns: repeat(4, 1fr); } }
.mx-features--4 { margin-bottom: var(--sp-6); }

.mx-quote-line { margin: var(--sp-5) 0 0; font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; color: var(--mx-blue-700); }

.mx-photo-link--card { position: relative; height: 100%; }
.mx-photo-link--card img { height: 100%; max-height: none; object-fit: cover; aspect-ratio: auto; }
@media (max-width: 767px) { .mx-photo-link--card img { aspect-ratio: 4 / 5; } }
.mx-photo-link--card::before { display: none; }

/* ---------- Francia / Países Bajos / Nosotros ---------- */
.mx-muted { color: var(--mx-text-muted); }

.mx-reasons { margin: 0; padding: 0; list-style: none; counter-reset: reason; display: grid; gap: var(--sp-3); }
.mx-reasons li { position: relative; padding-left: 52px; min-height: 36px; color: var(--mx-text); counter-increment: reason; }
.mx-reasons li::before {
  content: counter(reason, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700;
  color: var(--mx-green);
  -webkit-text-stroke: .5px #4d6400;
}

.mx-stats--light { margin: 0 0 var(--sp-6); }
.mx-stats--light li { background: var(--mx-bg-soft); border: 1px solid var(--mx-border); }
.mx-stats--light .mx-stats__num { color: var(--mx-blue-700); }
.mx-stats--light .mx-stats__lbl { color: var(--mx-text-muted); }

/* Foto con filtro suave: tono cálido, menos saturación y grano fotográfico */
.mx-photo-soft { position: relative; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.mx-photo-soft img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; filter: saturate(.78) contrast(.94) brightness(1.03) sepia(.14); }
.mx-photo-soft::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 236, 210, .14), rgba(6, 43, 68, .14));
  mix-blend-mode: soft-light;
}
.mx-photo-soft::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.mx-trust-band { display: grid; gap: var(--sp-4); align-items: center; padding: var(--sp-5); border-radius: var(--radius); background: var(--mx-navy); color: #d5ebf6; }
@media (min-width: 768px) { .mx-trust-band { grid-template-columns: auto 1fr; gap: var(--sp-5); } }
.mx-trust-band img { display: block; width: 260px; max-width: 100%; height: auto; }
.mx-trust-band p { margin: 0; }

/* ---------- Fotos reales: ajustes generales ---------- */
.mx-split__media img { max-height: 560px; object-fit: cover; }
.mx-features li > .mx-link-arrow { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.mx-country > img[src*="aupairs-alemania"] { object-position: center 62%; }

/* Banner de páginas internas con foto real y velo para contraste */
.page-banner.contact-page.mx-banner-real {
  background-image: linear-gradient(180deg, rgba(6, 43, 68, .25) 0%, rgba(6, 43, 68, .7) 100%), url("../images/reales/disfraces-ninas.jpg");
  background-size: cover;
  background-position: center 30%;
}

/* ---------- Contacto ---------- */
.mx-contact-cards { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .mx-contact-cards { grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; } }
.mx-ccard {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mx-ccard:hover, .mx-ccard:focus-visible { transform: translateY(-6px); color: #fff; text-decoration: none; box-shadow: 0 20px 44px rgba(6, 43, 68, .28); }
.mx-ccard::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.mx-ccard--wa { background: linear-gradient(140deg, #0b5e33 0%, #0f7a43 100%); }
.mx-ccard--apply { background: linear-gradient(140deg, var(--mx-navy) 0%, var(--mx-blue-700) 100%); }
.mx-ccard--mail { background: linear-gradient(140deg, #0a3a5a 0%, #134e72 100%); }
.mx-ccard__badge { padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .18); font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.mx-ccard--apply .mx-ccard__badge { background: var(--mx-yellow); color: var(--mx-navy); }
.mx-ccard__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: var(--sp-2); border-radius: 16px; background: rgba(255, 255, 255, .16); font-size: 26px; }
.mx-ccard__icon svg { width: 32px; height: 32px; fill: #fff; }
.mx-ccard__title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; }
.mx-ccard__data { font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 700; line-height: 1.15; word-break: break-word; }
.mx-ccard--wa .mx-ccard__data { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
.mx-ccard__text { color: rgba(255, 255, 255, .9); font-size: var(--fs-sm); }
.mx-ccard__cta { margin-top: auto; padding-top: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-weight: 700; }
.mx-ccard--wa .mx-ccard__cta { padding: 0 var(--sp-4); border-radius: var(--radius-pill); background: #fff; color: #0f7a43; margin-top: auto; }

.mx-contact-extra { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-4); border-radius: var(--radius); background: var(--mx-bg-soft); border: 1px solid var(--mx-border); }
@media (min-width: 900px) { .mx-contact-extra { grid-template-columns: 1.3fr .8fr 1fr; gap: var(--sp-5); } }
.mx-contact-extra > div { display: flex; gap: var(--sp-3); align-items: flex-start; }
.mx-contact-extra p { margin: 0; color: var(--mx-text-muted); font-size: var(--fs-sm); }
.mx-contact-extra strong { color: var(--mx-navy); font-size: var(--fs-base); }

/* ---------- Galería de fotos reales ---------- */
.mx-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mx-gallery { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.mx-gallery--3 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .mx-gallery--3 { grid-template-columns: repeat(3, 1fr); } }
.mx-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .4s ease; }
.mx-gallery li:hover img { transform: scale(1.02); }

/* CTA de contacto con la foto de Londres */
.mx-cta--london {
  background-image: linear-gradient(180deg, rgba(6, 43, 68, .55), rgba(6, 43, 68, .85)), url("../images/background/bg-section-contact-map.jpg");
  background-position: center 30%;
}
@media (min-width: 992px) {
  .mx-cta--london { min-height: 560px; display: flex; align-items: center; background-image: linear-gradient(90deg, rgba(6, 43, 68, .95) 0%, rgba(6, 43, 68, .85) 30%, rgba(6, 43, 68, 0) 48%), url("../images/background/bg-section-contact-map.jpg"); background-position: center 35%; }
  .mx-cta--london .mx-container { width: 100%; }
  .mx-cta--london .mx-cta__inner { max-width: 440px; margin-left: 0; }
}
.mx-callout--wide { max-width: 920px; margin: var(--sp-5) auto 0; }
.mx-callout .mx-link-arrow { margin-left: var(--sp-1); }
.mx-faq details p .mx-link-arrow { display: inline-flex; }

/* ---------- Ventajas de ser Au Pair ---------- */
.page-banner.vida.mx-banner-real {
  background-image: linear-gradient(180deg, rgba(6, 43, 68, .2) 0%, rgba(6, 43, 68, .72) 100%), url("../images/reales/paris-amigas.jpg");
  background-size: cover;
  background-position: center 52%;
}
.mx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.mx-chips a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  background: #fff; border: 2px solid var(--mx-border);
  font-family: var(--font-heading); font-weight: 700; color: var(--mx-navy);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, border-color .2s ease;
}
.mx-chips a:hover, .mx-chips a:focus-visible { transform: translateY(-2px); border-color: var(--mx-green); color: var(--mx-navy); text-decoration: none; }
.mx-chips img { width: 24px; height: 24px; border-radius: 50%; }

/* ---------- Testimonios con fotos de Nueva York ---------- */
.page-banner.testimonios.mx-banner-real {
  background-image: linear-gradient(180deg, rgba(6, 43, 68, .15) 0%, rgba(6, 43, 68, .7) 100%), url("../images/reales/nyc-amigas-times-square.jpg");
  background-size: cover;
  background-position: center 72%;
}
@media (min-width: 768px) {
  .mx-testimonials--three { grid-template-columns: repeat(3, 1fr) !important; }
  .mx-testimonials--three > li, .mx-testimonials--six > li { grid-column: auto !important; }
  .mx-testimonials--six { grid-template-columns: repeat(2, 1fr) !important; }
  .mx-testimonials--six > li:nth-child(-n+2) .mx-quote img { aspect-ratio: 567 / 540; }
}
@media (min-width: 992px) { .mx-testimonials--six { grid-template-columns: repeat(3, 1fr) !important; } }
.mx-tes-nyc { margin-top: var(--sp-6); }
.mx-tes-nyc .mx-split__media img { max-height: 520px; object-position: center 70%; }
.mx-home .mx-tes-nyc h3.mx-split__title { font-size: var(--fs-2xl); }
.mx-testimonials--three .mx-quote img { aspect-ratio: 4 / 3 !important; object-position: center 30%; }

/* ---------- Inicio: "En 30 segundos" ---------- */
.mx-quick__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .mx-quick__grid { grid-template-columns: repeat(3, 1fr); } }
.mx-quick__card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: #fff;
  border: 1px solid var(--mx-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.mx-quick__card h3 { font-size: var(--fs-xl); color: var(--mx-navy); }
.mx-quick__card p { margin: 0; color: var(--mx-text-muted); }
.mx-quick__card .mx-checklist { gap: var(--sp-2); font-size: var(--fs-sm); }
.mx-quick__card > .mx-link-arrow, .mx-quick__card > .mx-btn { margin-top: auto; align-self: flex-start; }
.mx-quick__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mx-green); color: #1c2600;
  font-family: var(--font-heading); font-weight: 700;
}
.mx-quick__card--next { background: var(--mx-navy); border-color: var(--mx-navy); }
.mx-quick__card--next h3 { color: #fff; }
.mx-quick__steps { margin: 0; padding-left: 20px; display: grid; gap: var(--sp-2); color: #d5ebf6; font-size: var(--fs-sm); }
.mx-quick__steps strong { color: #fff; }
.mx-quick__price { margin: 0 !important; font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--mx-navy) !important; }
.mx-quick__price strong { font-size: var(--fs-2xl); color: var(--mx-blue-700); }

/* ---------- Páginas legales ---------- */
.mx-home .mx-legal__title { font-size: var(--fs-2xl); color: var(--mx-navy); margin: 0 0 var(--sp-2); }
.mx-legal__meta { color: var(--mx-text-muted); font-size: var(--fs-sm); }
.mx-legal__toc { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-4); border-radius: var(--radius); background: var(--mx-bg-soft); border: 1px solid var(--mx-border); }
.mx-legal__toc ol { margin: 0; padding-left: 20px; display: grid; gap: var(--sp-1); }
.mx-legal__toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mx-blue-700); }
.mx-home .mx-legal h2 { font-size: var(--fs-xl); color: var(--mx-navy); margin: var(--sp-6) 0 var(--sp-3); scroll-margin-top: 100px; }
.mx-legal p, .mx-legal li { color: var(--mx-text); line-height: 1.7; }
.mx-legal ul { padding-left: 20px; margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.mx-legal .mx-compare { margin: var(--sp-3) 0; }
.mx-legal a { text-decoration: underline; text-underline-offset: 2px; }
.footer .name-company a, .hyperlink .name-company a { color: inherit; text-decoration: underline; }

/* ---------- Proceso ---------- */
.page-banner.proceso.mx-banner-real {
  background-image: linear-gradient(180deg, rgba(6, 43, 68, .2) 0%, rgba(6, 43, 68, .72) 100%), url("../images/reales/paris-sacre-coeur.jpg");
  background-size: cover;
  background-position: center 30%;
}
.mx-stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); max-width: 900px; margin: 0 auto var(--sp-6); padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 768px) { .mx-stages { grid-template-columns: repeat(4, 1fr); } }
.mx-stages a {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 56px; height: 100%; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm); background: var(--mx-navy); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
}
.mx-stages a:hover, .mx-stages a:focus-visible { background: var(--mx-blue-700); color: #fff; text-decoration: none; }
.mx-stages span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mx-green); color: #1c2600; }

.mx-stage { max-width: 900px; margin: 0 auto var(--sp-6); scroll-margin-top: 100px; }
.mx-stage:last-child { margin-bottom: 0; }
.mx-stage__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mx-stage__num { flex: none; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--mx-green); color: #1c2600; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; }
.mx-home .mx-stage__head h3 { font-size: var(--fs-2xl); color: var(--mx-navy); }

.mx-timeline { position: relative; margin: 0; padding: 0 0 0 28px; list-style: none; display: grid; gap: var(--sp-4); }
.mx-timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, rgba(35,166,221,.6) 0 6px, transparent 6px 12px); }
.mx-timeline > li { position: relative; padding: var(--sp-4); background: #fff; border: 1px solid var(--mx-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.mx-timeline > li::before { content: ""; position: absolute; left: -26px; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: var(--mx-blue); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--mx-border); }
.mx-home .mx-timeline h4 { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; color: var(--mx-navy); line-height: 1.3; }
.mx-timeline h4 .mx-icon { width: 40px; height: 40px; font-size: 18px; }
.mx-timeline__cols { display: grid; gap: var(--sp-2) var(--sp-4); }
@media (min-width: 768px) { .mx-timeline__cols { grid-template-columns: 1fr 1fr; } }
.mx-timeline__cols p { margin: 0; font-size: var(--fs-sm); color: var(--mx-text-muted); }
.mx-timeline__cols strong { color: var(--mx-navy); }
.mx-timeline__tip { margin: var(--sp-3) 0 0 !important; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: rgba(163, 211, 0, .14); font-size: var(--fs-sm); color: var(--mx-navy); }
.mx-timeline__tip .fa { color: #4d6400; margin-right: 4px; }

/* ---------- Preguntas frecuentes ---------- */
.page-banner.faqs.mx-banner-real {
  background-image: linear-gradient(180deg, rgba(6, 43, 68, .2) 0%, rgba(6, 43, 68, .72) 100%), url("../images/reales/viena-schonbrunn.jpg");
  background-size: cover;
  background-position: center 35%;
}
.mx-faq-search { position: relative; margin: 0 0 var(--sp-2); }
.mx-faq-search .fa { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--mx-text-muted); font-size: 18px; pointer-events: none; }
.mx-faq-search input {
  width: 100%; min-height: 56px; padding: 0 var(--sp-4) 0 52px;
  border: 2px solid var(--mx-border); border-radius: var(--radius-pill);
  font: inherit; font-size: var(--fs-base); color: var(--mx-text); background: #fff; box-shadow: var(--shadow-sm);
}
.mx-faq-search input:focus { border-color: var(--mx-blue-700); outline: none; box-shadow: 0 0 0 4px rgba(35, 166, 221, .2); }
.mx-faq-count { min-height: 24px; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--mx-text-muted); text-align: center; }
.mx-faq-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0; list-style: none; }
.mx-faq-nav a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3);
  border-radius: var(--radius-pill); background: var(--mx-bg-soft); border: 1px solid var(--mx-border);
  font-weight: 500; font-size: var(--fs-sm); color: var(--mx-navy); text-decoration: none;
}
.mx-faq-nav a:hover, .mx-faq-nav a:focus-visible { border-color: var(--mx-green); color: var(--mx-navy); text-decoration: none; }
.mx-faq-cat { margin-bottom: var(--sp-6); scroll-margin-top: 100px; }
.mx-home .mx-faq-cat__title { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-xl); color: var(--mx-navy); }
.mx-faq-cat__title .mx-icon { width: 40px; height: 40px; font-size: 18px; }
.mx-faq details p .mx-link-arrow { display: inline-flex; min-height: 0; }
.mx-faq-empty { padding: var(--sp-5); text-align: center; border-radius: var(--radius); background: var(--mx-bg-soft); border: 1px dashed var(--mx-border); }
.mx-faq-empty p { margin: 0 0 var(--sp-3); }
.mx-home [hidden] { display: none !important; }

/* ---------- Comparador de países ---------- */
.page-banner.comparador.mx-banner-real {
  background-image: linear-gradient(180deg, rgba(6, 43, 68, .2) 0%, rgba(6, 43, 68, .72) 100%), url("../images/reales/budapest-parlamento.jpg");
  background-size: cover;
  background-position: center 40%;
}
.mx-compare--countries table { min-width: 860px; }
.mx-compare--countries thead th { text-align: center; vertical-align: middle; }
.mx-compare--countries thead th a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--mx-navy); text-decoration: none; font-weight: 700; }
.mx-compare--countries thead th a:hover { color: var(--mx-blue-700); text-decoration: underline; }
.mx-compare--countries thead th img { width: 24px; height: 24px; border-radius: 50%; }
.mx-compare--countries td { text-align: center; color: var(--mx-text) !important; }
.mx-compare--countries tbody tr:nth-child(even) td, .mx-compare--countries tbody tr:nth-child(even) th { background: #f8fbfd; }
.mx-compare--countries tbody th, .mx-compare--countries thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 2px 0 0 var(--mx-border); }
.mx-compare--countries tbody tr:nth-child(even) th { background: #f8fbfd; }
.mx-compare--countries thead th:first-child { background: var(--mx-bg-soft); }
.mx-compare__hint { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--mx-text-muted); text-align: center; }
@media (min-width: 900px) { .mx-compare__hint { display: none; } }

.mx-personas { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mx-personas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mx-personas { grid-template-columns: repeat(4, 1fr); } }
.mx-persona { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-4); background: #fff; border: 2px solid var(--mx-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--mx-text); transition: transform .2s ease, border-color .2s ease; }
.mx-persona:hover, .mx-persona:focus-visible { transform: translateY(-4px); border-color: var(--mx-green); text-decoration: none; color: var(--mx-text); }
.mx-persona__q { font-style: italic; color: var(--mx-text-muted); }
.mx-persona__a { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; color: var(--mx-navy); }
.mx-persona__t { font-size: var(--fs-sm); color: var(--mx-text); }
.mx-persona .mx-link-arrow { margin-top: auto; }

/* ---------- Guías ---------- */
.page-banner.guia-agencia.mx-banner-real, .page-banner.guia-usa.mx-banner-real, .page-banner.guia-fraudes.mx-banner-real, .page-banner.guia-qro.mx-banner-real, .page-banner.guias-idx.mx-banner-real { background-size: cover; }
.page-banner.guia-agencia.mx-banner-real { background-image: linear-gradient(180deg, rgba(6,43,68,.2), rgba(6,43,68,.72)), url("../images/reales/paris-amigas.jpg"); background-position: center 52%; }
.page-banner.guia-usa.mx-banner-real { background-image: linear-gradient(180deg, rgba(6,43,68,.15), rgba(6,43,68,.7)), url("../images/reales/nyc-amigas-times-square.jpg"); background-position: center 72%; }
.page-banner.guia-fraudes.mx-banner-real { background-image: linear-gradient(180deg, rgba(6,43,68,.25), rgba(6,43,68,.75)), url("../images/reales/paris-familia.jpg"); background-position: center 35%; }
.page-banner.guia-qro.mx-banner-real { background-image: linear-gradient(180deg, rgba(6,43,68,.2), rgba(6,43,68,.72)), url("../images/reales/disfraces-ninas.jpg"); background-position: center 30%; }
.page-banner.guias-idx.mx-banner-real { background-image: linear-gradient(180deg, rgba(6,43,68,.2), rgba(6,43,68,.72)), url("../images/reales/alpes-nieve.jpg"); background-position: center 40%; }

.mx-home .mx-article h2 { font-size: var(--fs-xl); color: var(--mx-navy); margin: var(--sp-6) 0 var(--sp-3); }
.mx-home .mx-article h3 { font-size: var(--fs-lg); color: var(--mx-navy); margin: var(--sp-4) 0 var(--sp-2); }
.mx-article p, .mx-article li { line-height: 1.7; color: var(--mx-text); }
.mx-article ul:not(.mx-checklist), .mx-article ol { padding-left: 22px; margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.mx-article .mx-checklist { margin-bottom: var(--sp-3); }
.mx-article p a, .mx-article li a { color: var(--mx-blue-700); text-decoration: underline; text-underline-offset: 2px; }
.mx-article .mx-compare { margin: var(--sp-3) 0; }
.mx-checklist--alert li::before {
  background: rgba(220, 38, 38, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='3'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.mx-related { margin-top: var(--sp-6); padding: var(--sp-4); border-radius: var(--radius); background: var(--mx-bg-soft); border: 1px solid var(--mx-border); }
.mx-home .mx-related h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.mx-related ul { margin: 0; padding-left: 20px; display: grid; gap: var(--sp-1); }
.mx-related a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1100px) { .mx-personas--guias { grid-template-columns: repeat(3, 1fr); } }
.mx-personas--guias .mx-persona__a { font-size: var(--fs-lg); }

/* ---------- Reseñas de Google ---------- */
.mx-stars { color: #f5b301; letter-spacing: 2px; }
.mx-google-badge { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin: 0 auto var(--sp-3); padding: 0 var(--sp-3); border-radius: var(--radius-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: var(--fs-sm); text-decoration: none; }
.mx-google-badge:hover, .mx-google-badge:focus-visible { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.mx-trust__logos { display: flex; flex-direction: column; align-items: center; }
.mx-google-badge--light { background: #fff; border-color: var(--mx-border); color: var(--mx-navy); box-shadow: var(--shadow-sm); }
.mx-google-badge--light:hover, .mx-google-badge--light:focus-visible { background: var(--mx-bg-soft); color: var(--mx-navy); }
.mx-section--tight { padding: var(--sp-5) 0 0; }
.mx-google-band { display: grid; gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); background: #fff; border: 2px solid #f5b301; box-shadow: var(--shadow-sm); color: var(--mx-text); text-decoration: none; }
@media (min-width: 768px) { .mx-google-band { grid-template-columns: auto 1fr auto; } }
.mx-google-band:hover, .mx-google-band:focus-visible { color: var(--mx-text); text-decoration: none; box-shadow: var(--shadow); }
.mx-google-band__stars { font-size: 28px; color: #f5b301; letter-spacing: 3px; }
.mx-google-band__txt { color: var(--mx-text-muted); font-size: var(--fs-sm); }
.mx-google-band__txt strong { display: block; font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--mx-navy); }

/* ---------- Toques juveniles: stickers y letra manuscrita ---------- */
.mx-sticker {
  display: inline-block;
  font-family: "Caveat", "Segoe Print", cursive;
  font-weight: 700;
  line-height: 1.1;
  padding: 4px 14px 6px;
  border-radius: 14px;
  background: var(--mx-green);
  color: var(--mx-navy);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
  transform: rotate(-4deg);
}
.mx-sticker--hero { display: table; margin: 0 0 var(--sp-3); font-size: 26px; }
@media (min-width: 992px) { .mx-sticker--hero { font-size: 30px; } }
.mx-sticker--card {
  position: absolute; top: 12px; right: 10px; z-index: 2;
  font-size: 18px; padding: 2px 10px 4px;
  background: var(--mx-yellow);
  transform: rotate(4deg);
  transition: transform .25s ease;
}
.mx-country:hover .mx-sticker--card { transform: rotate(-2deg) scale(1.06); }
@media (min-width: 768px) { .mx-sticker--card { font-size: 20px; } }
.mx-handnote { margin: var(--sp-2) 0 0 !important; font-family: "Caveat", "Segoe Print", cursive; font-size: 26px; font-weight: 700; color: var(--mx-blue-700) !important; transform: rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .mx-sticker, .mx-handnote { transform: none; } .mx-country:hover .mx-sticker--card { transform: none; } }

/* ---------- Contacto: tarjetas con colores vivos y texto oscuro ---------- */
.mx-ccard { color: var(--mx-navy); }
.mx-ccard:hover, .mx-ccard:focus-visible { color: var(--mx-navy); }
.mx-ccard::after { background: rgba(255, 255, 255, .28); }
.mx-ccard--wa { background: linear-gradient(140deg, #25d366 0%, #86efac 100%); color: #053d1c; }
.mx-ccard--wa:hover, .mx-ccard--wa:focus-visible { color: #053d1c; }
.mx-ccard--apply { background: linear-gradient(140deg, #ffdd00 0%, #fff3a3 100%); }
.mx-ccard--mail { background: linear-gradient(140deg, #38bdf8 0%, #bae6fd 100%); }
.mx-ccard__badge, .mx-ccard--apply .mx-ccard__badge { background: rgba(255, 255, 255, .6); color: inherit; }
.mx-ccard__icon { background: rgba(255, 255, 255, .55); }
.mx-ccard__icon svg { fill: #053d1c; }
.mx-ccard__text { color: inherit; opacity: .9; }
.mx-ccard__cta, .mx-ccard--wa .mx-ccard__cta { padding: 0 var(--sp-4); border-radius: var(--radius-pill); background: var(--mx-navy); color: #fff; margin-top: auto; }
.mx-ccard--wa .mx-ccard__cta { background: #053d1c; color: #fff; }
/* Requisitos de EE.UU.: 7 tarjetas, la última centrada */
@media (min-width: 992px) {
  .mx-req--7 { grid-template-columns: repeat(6, 1fr); }
  .mx-req--7 > li { grid-column: span 2; }
  .mx-req--7 > li:last-child { grid-column: 3 / span 2; }
}
@media (min-width: 600px) and (max-width: 991px) {
  .mx-req--7 > li:last-child { grid-column: 1 / -1; }
}
/* Sticker de página (primera sección de cada página) */
.mx-sticker--page { display: table; margin: 0 0 var(--sp-3); font-size: 24px; }
.mx-section-head .mx-sticker--page { margin-left: auto; margin-right: auto; }
@media (min-width: 992px) { .mx-sticker--page { font-size: 28px; } }
.mx-article > .mx-sticker--page, .mx-legal .mx-sticker--page { margin-left: 0; }

/* ---------- Banners de país: velo azul marino y país en verde lima ----------
   El título blanco se perdía sobre fotos claras (cielo, río, edificios). */
.page-banner.usa, .page-banner.alemania, .page-banner.francia, .page-banner.holanda {
  background-size: cover;
}
.page-banner.usa      { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/usa.jpg"); }
.page-banner.alemania { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/alemania.jpg"); }
.page-banner.francia  { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/francia.jpg"); }
.page-banner.holanda  { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/holanda.jpg"); }
.page-banner .captions .mx-banner-hl { color: var(--mx-green); }
.page-banner.usa .captions, .page-banner.alemania .captions, .page-banner.francia .captions, .page-banner.holanda .captions,
.page-banner.mx-banner-real .captions { text-shadow: 0 2px 18px rgba(6,43,68,.45); }
/* El tema recorta el título por abajo (bottom: -8px); aquí se muestra completo en todas las páginas */
.page-banner .page-title-content { bottom: 0; padding-bottom: var(--sp-4); }

/* ---------- Páginas rediseñadas: Austria, Bélgica, Luxemburgo, China, Irlanda, Labores, Escuelas, Host Families ---------- */
.page-banner.austria.mx-banner-real    { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/austria.jpg");    background-size: cover; background-position: center 30%; }
.page-banner.belgica.mx-banner-real    { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/belgica.jpg");    background-size: cover; background-position: center 35%; }
.page-banner.luxemburgo.mx-banner-real { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/luxemburgo.jpg"); background-size: cover; background-position: center 35%; }
.page-banner.china.mx-banner-real      { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/china.jpg");      background-size: cover; background-position: center 30%; }
.page-banner.otros.mx-banner-real      { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/otros.jpg");      background-size: cover; background-position: center 30%; }
.page-banner.labores.mx-banner-real    { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/bg-labores.jpg"); background-size: cover; background-position: center 30%; }
.page-banner.escuelas.mx-banner-real   { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/escuelas.jpg");   background-size: cover; background-position: center 40%; }
.page-banner.families.mx-banner-real   { background-image: linear-gradient(180deg, rgba(6,43,68,.45) 0%, rgba(6,43,68,.12) 30%, rgba(6,43,68,.82) 100%), url("../images/background/bg-families.jpg"); background-size: cover; background-position: center 30%; }

/* Fotos con marco blanco y marca de agua integrados: se recortan un poco */
.mx-split__media--crop { overflow: hidden; border-radius: 24px; box-shadow: var(--shadow); }
.mx-split__media--crop img { transform: scale(1.08); border-radius: 0; box-shadow: none; aspect-ratio: 501 / 350; }

/* Opciones de curso (Irlanda) */
.mx-options-2 { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-options-2 { grid-template-columns: 1fr 1fr; } }
.mx-options-2 li { padding: var(--sp-3) var(--sp-4); background: var(--mx-bg-soft); border: 1px solid var(--mx-border); border-radius: var(--radius); color: var(--mx-navy); line-height: 1.4; }
.mx-options-2 .mx-option__tag { display: table; }
.mx-split .mx-checklist { margin-bottom: var(--sp-4); }

/* Recuadro de información importante */
.mx-infobox { margin: 0 0 var(--sp-4); padding: var(--sp-4); border-radius: var(--radius); background: #fff8d6; border: 1px solid #f0dc7a; }
.mx-infobox__title { margin: 0 0 var(--sp-2) !important; font-family: var(--font-heading); font-weight: 700; color: var(--mx-navy); }
.mx-infobox ul { margin: 0; padding-left: 20px; display: grid; gap: var(--sp-2); }
.mx-after-cards { margin-top: var(--sp-5); }

/* Dos tarjetas (Host Families) */
.mx-features--two { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 600px) { .mx-features--two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .mx-features--two { grid-template-columns: 1fr 1fr; } }
.mx-features--two a { font-weight: 700; color: var(--mx-blue-700); word-break: break-word; }

/* Escuelas de idiomas */
.mx-schools { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mx-schools { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 1100px) { .mx-schools { grid-template-columns: repeat(4, 1fr); } }
.mx-school a { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: var(--sp-3); text-align: center; background: #fff; border: 1px solid var(--mx-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--mx-text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.mx-school a:hover, .mx-school a:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--mx-text); }
.mx-school img { width: 100%; max-width: 170px; height: auto; margin-bottom: var(--sp-1); }
.mx-school strong { font-family: var(--font-heading); font-size: var(--fs-sm); line-height: 1.3; color: var(--mx-navy); }
.mx-school span { font-size: 13px; color: var(--mx-text-muted); }
.mx-school .mx-school__go { margin-top: auto; padding-top: var(--sp-2); font-weight: 700; color: var(--mx-blue-700); }
@media (prefers-reduced-motion: reduce) { .mx-school a { transition: none; } }

/* ---------- Países en celular: el sticker ya no tapa el nombre ---------- */
.mx-home .mx-countries__subtitle { margin: var(--sp-6) 0 var(--sp-4); } /* .mx-home h3 le quitaba el margen */
@media (max-width: 767px) {
  /* Tarjetas de 2 columnas más altas: sticker arriba, nombre abajo, sin encimarse */
  .mx-countries--main > li:not(:first-child) .mx-country > img { aspect-ratio: 4 / 5; }
  .mx-countries--main > li:not(:first-child) .mx-country__name { font-size: var(--fs-base); }
  .mx-countries--main > li:not(:first-child) .mx-sticker--card {
    top: 8px; left: 8px; right: 8px; max-width: max-content;
    font-size: 15px; line-height: 1.15; padding: 3px 8px 4px;
  }
}

/* ---------- Botón "Cotiza tu programa": azul del logo con letra azul marino (5.3:1) ---------- */
.mx-btn--cotiza { background: var(--mx-blue); color: var(--mx-navy) !important; border-color: var(--mx-blue); box-shadow: 0 8px 24px rgba(35, 166, 221, .28); }
.mx-btn--cotiza:hover, .mx-btn--cotiza:focus-visible { background: #4bb8e6; border-color: #4bb8e6; color: var(--mx-navy) !important; }
.mx-btn--cotiza .fa { font-size: 20px; }
.mx-faq details p .mx-btn--cotiza, .mx-options__note .mx-btn--cotiza { margin-top: var(--sp-3); }
.mx-cotiza-row { display: block; }

/* ---------- Globo en celular: más compacto, igual de espectacular ---------- */
@media (max-width: 599px) {
  .mx-globe { height: 300px; margin-top: calc(var(--sp-3) * -1); }
}

/* ---------- Índice de acceso rápido (páginas de país) ---------- */
.mx-jump { position: relative; padding: 0 0 var(--sp-2); }
.mx-jump ul { display: flex; gap: var(--sp-2); margin: 0; padding: 4px 0 8px; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mx-jump ul::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .mx-jump ul { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.mx-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; white-space: nowrap;
  border-radius: var(--radius-pill); background: var(--mx-bg-soft); border: 1px solid var(--mx-border);
  font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; color: var(--mx-navy); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.mx-jump a:hover, .mx-jump a:focus-visible { background: var(--mx-navy); color: #fff; }
/* En celular se nota que hay más opciones deslizando */
@media (max-width: 991px) { .mx-jump::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events: none; } }
.mx-home h2[id] { scroll-margin-top: 96px; }

/* ---------- Muro de testimonios con filtro por país ---------- */
.mx-chips { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.mx-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .mx-chips { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.mx-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--mx-border); background: #fff; cursor: pointer;
  font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; color: var(--mx-navy);
}
.mx-chip span { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--mx-bg-soft); font-size: 12px; }
.mx-chip[aria-pressed="true"] { background: var(--mx-navy); border-color: var(--mx-navy); color: #fff; }
.mx-chip[aria-pressed="true"] span { background: var(--mx-green); color: var(--mx-navy); }
.mx-wall { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mx-wall { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
@media (min-width: 1100px) { .mx-wall { grid-template-columns: repeat(3, 1fr); } }
.mx-wall > li[hidden] { display: none; }
.mx-tcard { display: flex; gap: var(--sp-3); align-items: flex-start; height: 100%; margin: 0; padding: var(--sp-3); background: #fff; border: 1px solid var(--mx-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.mx-tcard img { flex: none; width: 92px; height: 92px; object-fit: cover; border-radius: 18px; }
.mx-tcard blockquote { margin: 0 0 var(--sp-2); padding: 0; border: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--mx-text); }
.mx-tcard blockquote p { margin: 0; }
.mx-tcard figcaption { font-size: 13px; color: var(--mx-text-muted); line-height: 1.4; }
.mx-tcard figcaption strong { display: block; font-family: var(--font-heading); font-size: var(--fs-base); color: var(--mx-navy); }
@media (min-width: 768px) { .mx-tcard { padding: var(--sp-4); } .mx-tcard img { width: 110px; height: 110px; } }

/* Redes sociales en píldoras */
.mx-social-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.mx-social-pills a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--radius-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); color: #fff !important; font-family: var(--font-heading); font-weight: 700; text-decoration: none; }
.mx-social-pills a:hover, .mx-social-pills a:focus-visible { background: #fff; color: var(--mx-navy) !important; }
.mx-social-pills .fa { font-size: 20px; }
.mx-social-pills svg { width: 18px; height: 18px; fill: currentColor; }
.mx-jump--top { padding: var(--sp-4) 0 0; }
.mx-jump--top + .mx-section, .mx-jump--top + * + .mx-section { padding-top: var(--sp-5); }

/* ---------- Costos por país ---------- */
.mx-option__price { margin: 0 0 var(--sp-2) !important; font-family: var(--font-heading); font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--mx-navy); }
.mx-option__price small { font-size: var(--fs-sm); font-weight: 700; color: var(--mx-text-muted); }
.mx-section--cost { border-bottom: 1px solid var(--mx-border); }
.mx-cost { margin: var(--sp-4) auto 0; max-width: 820px; padding: var(--sp-4); background: #fff; border: 1px solid var(--mx-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .mx-cost { padding: var(--sp-5); } }
.mx-cost__amount { text-align: center; margin-bottom: var(--sp-4); }
.mx-cost__amount span { display: block; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mx-blue-700); }
.mx-cost__amount strong { display: block; font-family: var(--font-heading); font-size: clamp(30px, 24px + 2vw, 42px); font-weight: 800; color: var(--mx-navy); line-height: 1.15; }
.mx-cost__amount strong small { font-size: var(--fs-base); color: var(--mx-text-muted); }
.mx-cost__amount em { display: block; font-style: normal; color: var(--mx-text-muted); }
.mx-cost__cols { display: grid; gap: var(--sp-3); }
@media (min-width: 600px) { .mx-cost__cols:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; } }
.mx-cost__col { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); }
.mx-cost__col--in { background: #f2fadf; border: 1px solid #d7ec9a; }
.mx-cost__col--out { background: var(--mx-bg-soft); border: 1px solid var(--mx-border); }
.mx-cost__label { margin: 0 0 var(--sp-2) !important; font-family: var(--font-heading); font-weight: 700; color: var(--mx-navy); }
.mx-cost__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mx-cost__col li { position: relative; padding-left: 26px; }
.mx-cost__col--in li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: #3d6b00; }
.mx-cost__col--out li::before { content: "+"; position: absolute; left: 2px; font-weight: 800; color: var(--mx-blue-700); }
.mx-cost__cta { margin-top: var(--sp-4); text-align: center; }

/* ---------- Videos de Instagram (cargan al tocarlos) ---------- */
.mx-reels { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: 4px 2px var(--sp-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mx-reels::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .mx-reels { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.mx-reels > li { scroll-snap-align: start; display: flex; flex-direction: column; }
.mx-reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: var(--mx-navy); box-shadow: var(--shadow-sm); }
.mx-reel__play { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; text-align: left; }
.mx-reel__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mx-reel__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,43,68,.05) 40%, rgba(6,43,68,.85) 100%); }
.mx-reel__play:hover img { transform: scale(1.05); }
.mx-reel__icon { position: absolute; z-index: 1; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.mx-reel__icon svg { width: 28px; height: 28px; margin-left: 4px; fill: var(--mx-navy); }
.mx-reel__cap { position: absolute; z-index: 1; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); font-size: var(--fs-sm); line-height: 1.35; }
.mx-reel__cap strong { display: block; font-family: var(--font-heading); font-size: var(--fs-lg); }
.mx-reel.is-playing { aspect-ratio: auto; background: #fff; }
.mx-reel iframe { display: block; width: 100%; height: 560px; border: 0; }
.mx-reel__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); font-weight: 700; color: var(--mx-blue-700); }
@media (prefers-reduced-motion: reduce) { .mx-reel__play img { transition: none; } }