/* ===============================
   JetBox Courier — estilos base
   Inspirado en layout/logos/sectioning de templates logísticos modernos
   =============================== */

:root{
  --bg:#0b1220;          /* navy profundo */
  --bg-2:#0f172a;
  --surface:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --brand:#f97316;       /* naranja acento tipo PackPro */
  --brand-2:#22c55e;     /* verde apoyo */
  --card:#0f172a;
  --white:#fff;
  --light:#f8fafc;
  /* Fallback del ring */
  --ring: 0 0 0 4px rgba(249,115,22,.25);
  --radius: 16px;
  --container: 1140px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Si el navegador soporta color-mix, usamos tu versión */
@supports (color: color-mix(in srgb, #000 0%, #fff 100%)) {
  :root{
    --ring: 0 0 0 4px color-mix(in oklab, var(--brand) 25%, transparent);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), #0c1526 50%, #0d182c);
  line-height:1.6;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Topbar */
.topbar{background:#0a1020;border-bottom:1px solid #131b2e;font-size:.9rem}
.topbar__grid{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.topbar .social{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#121a2e;color:#9fb0c9}
.topbar .divider{opacity:.4;margin:0 6px}
.hide-md{display:inline}
@media (max-width: 860px){.hide-md{display:none}}

/* Header */
.header{position:sticky;top:0;z-index:60;background:rgba(11,18,32,.7);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid #14203a}
.header.scrolled{background:rgba(11,18,32,.95)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#fb923c);color:#0b1220;font-weight:800}
.brand__text{font-family:Poppins, Inter, sans-serif;letter-spacing:.3px}

.nav__toggle{display:none;background:transparent;color:var(--text);border:0;font-size:24px}
.nav__list{display:flex;gap:18px;list-style:none;padding:0;margin:0}
.nav__link{padding:10px 12px;border-radius:10px;color:#b6c2d9}
.nav__link:hover,.nav__link.active{background:#101a2f;color:#fff}

@media (max-width:980px){
  .nav__toggle{display:inline-flex}
  .nav__list{position:fixed;inset:70px 16px auto 16px;background:#0c1530;border:1px solid #16264c;border-radius:14px;padding:16px;flex-direction:column;gap:8px;box-shadow:var(--shadow);transform-origin:top right;transform:scale(.98);opacity:0;pointer-events:none;transition:.25s}
  .nav__list.open{opacity:1;transform:scale(1);pointer-events:auto}
  .hide-sm{display:none}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:600}
.btn--primary{background:linear-gradient(135deg,var(--brand),#fb923c);color:#071021;box-shadow:0 10px 20px rgba(249,115,22,.3)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:#c7d2fe;border:1px solid #1f2a44}
.btn--outline{background:transparent;border:1px solid #344a7a}

/* Hero */
.hero{position:relative}
.hero__slider{position:relative;overflow:hidden;height:72vh;min-height:540px}
.hero__slide{
  position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  background: var(--bg);               /* ✅ color en vez de background-image */
  background-size:cover;background-position:center;
  display:grid;place-items:center
}
.hero__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,24,.6),rgba(6,12,24,.65))}
.hero__slide.is-active{opacity:1;position:absolute}
.hero__content{position:relative;z-index:2;text-align:left}
.hero__content h1{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,52px);margin:0 0 10px}
.hero__content p{max-width:680px;margin:0 0 18px;color:#c5d0e6}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.hero__badges{display:flex;gap:14px;flex-wrap:wrap;padding:0;margin:18px 0 0;list-style:none}
.txt-grad{background:linear-gradient(135deg,#fff,#e7f1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.quick{position:relative;margin-top:-50px}
.quick__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.quick__item{display:flex;gap:12px;align-items:center;background:#0e1832;border:1px solid #162545;padding:16px;border-radius:14px;box-shadow:var(--shadow);cursor:pointer}
.quick__item i{font-size:22px;color:#ffd399}
.quick__item h3{margin:0 0 2px;font-size:1.05rem}
.quick__item p{margin:0;color:#94a3b8;font-size:.92rem}
@media (max-width:960px){.quick__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.quick__grid{grid-template-columns:1fr}}

.section{padding:80px 0}
.section__head{text-align:center;margin-bottom:28px}
.eyebrow{display:inline-block;color:#ffd399;background:#24150a;border:1px solid #3a2414;padding:6px 12px;border-radius:999px;font-size:.85rem;margin-bottom:12px}

/* About */
.about__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
.about__media{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.about__media img{height:100%;object-fit:cover}
.about__stamp{position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:8px}
.checklist{padding:0;margin:14px 0 0;list-style:none;display:grid;gap:8px}
.checklist i{color:#86efac}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.counter{background:#0d1834;border:1px solid #1a2a4e;border-radius:16px;padding:16px;text-align:center}
.counter__num{font:800 clamp(22px,3.2vw,32px)/1 Poppins,Inter,sans-serif;display:block}
.counter__label{color:#9fb0c9;font-size:.92rem}
@media (max-width:980px){
  .about__grid{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(2,1fr)}
}

/* Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#0e1832;border:1px solid #162545;padding:20px;border-radius:16px;transition:.2s}
.card:hover{transform:translateY(-4px)}
.card__icon{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#fb923c);color:#071021;margin-bottom:8px}
@media (max-width:980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* Process */
.steps{list-style:none;padding:0;margin:20px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1000px}
.steps li{background:#0e1832;border:1px solid #162545;border-radius:16px;padding:18px;position:relative}
.step__num{position:absolute;top:-12px;left:-12px;background:#1d2a46;border:1px solid #2a3c66;border-radius:999px;width:36px;height:36px;display:grid;place-items:center;font-weight:700}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Pricing */
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price{background:#0e1832;border:1px solid #162545;border-radius:16px;padding:22px}
.price--featured{border-color:#ffd399;box-shadow:0 12px 30px rgba(255,211,153,.15);position:relative}
.badge{position:absolute;top:12px;right:12px;background:#24150a;color:#ffd399;border:1px solid #3a2414;border-radius:999px;padding:6px 10px;font-size:.8rem}
.price__tag{color:#e2e8f0}
.price__list{list-style:none;padding:0;margin:12px 0 16px;display:grid;gap:8px}
@media (max-width:980px){.pricing__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pricing__grid{grid-template-columns:1fr}}

/* Testimonials */
.ts__slider{position:relative;display:grid;grid-template-columns:1fr;gap:16px}
.ts{background:#0e1832;border:1px solid #162545;border-radius:16px;padding:20px}
.ts p{font-size:1.05rem;margin:0 0 12px}
.ts__meta{display:flex;gap:12px;align-items:center}
.ts__meta img{width:46px;height:46px;border-radius:999px}
.ts__dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.ts__dots button{width:10px;height:10px;border-radius:999px;border:0;background:#273a65;opacity:.6}
.ts__dots button.is-active{opacity:1;background:#ffd399}

/* Partners */
.partners{
  padding:28px 0;
  border-top:1px solid #162545;     /* ✅ compat */
  border-bottom:1px solid #162545;  /* ✅ compat */
  background:#0e1832
}
.partners__row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}

/* Contact */
.contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.contact__form,.contact__aside{background:#0e1832;border:1px solid #162545;border-radius:18px;padding:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
label{display:grid;gap:6px;font-size:.95rem}
input,select,textarea{
  appearance:none;background:#0b142b;border:1px solid #1a294d;border-radius:12px;
  color:#e6eefb;padding:12px; /* ; asegurado */
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:#2a4c90}
.form__hint{font-size:.85rem;color:#99a9c6}
.contact__list{list-style:none;padding:0;margin:10px 0 16px;display:grid;gap:8px}
.contact__list i{color:#86efac}
.map__box{border-radius:12px;overflow:hidden;border:1px solid #182a52}
@media (max-width:980px){
  .contact__grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}

/* Footer */
.footer{margin-top:40px;background:#0a1124;border-top:1px solid #14244a}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:24px;padding:40px 0}
.footer__links{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer__brand p{color:#aebbd4}
.footer__socials a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:10px;background:#0f1832;border:1px solid #1c2a4e;margin-right:8px}
.footer__bar{border-top:1px solid #14244a;background:#0a0f1f}
.footer__bar__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.to-top{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#121a30;border:1px solid #1e2b4e}

@media (max-width:980px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* Modal */
.modal{position:fixed;inset:0;display:none}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal__dialog{position:relative;z-index:2;background:#0e1832;border:1px solid #162545;border-radius:16px;max-width:520px;margin:12vh auto;padding:20px}
.modal__close{position:absolute;top:10px;right:10px;border:0;background:#101a31;color:#cde0ff;border-radius:8px;width:36px;height:36px}

/* WhatsApp floating */
.wapp{position:fixed;right:16px;bottom:18px;z-index:45;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:999px;background:linear-gradient(135deg,#00e676,#22c55e);color:#051014;box-shadow:var(--shadow)}

/* Helpers */
.section h2{font-family:Poppins,Inter,sans-serif;margin:.2rem 0 0}
hr.sep{border:0;border-top:1px solid #1a2b50;margin:24px 0}


/* ===== Logo JetBox ===== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__logo-img {
  display: block;
  height: 48px;           /* ajustá a tu gusto */
  width: auto;            /* mantiene proporción */
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* Versión compacta en móviles (si tu header se achica) */
@media (max-width: 560px) {
  .brand__logo-img { height: 40px; }
}

/* Si tu navbar hace “shrink” al scrollear, podés ajustar acá */
.header.is-scrolled .brand__logo-img { height: 42px; }

/* Texto solo para lectores de pantalla (fallback accesible) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Mostrar/ocultar el submenú SIN tocar el diseño existente */
.nav__item--has-sub > .nav__sublist { display: none; }
.nav__item--has-sub.is-open > .nav__sublist { display: block; }
/* Quitar fondo/blorde/estilo nativo del botón del submenu */
.nav__item--has-sub > .nav__link {
  background: transparent !important;
  border: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  color: inherit;          /* mantiene el color de tus links */
  cursor: pointer;         /* mano al pasar */
  -webkit-tap-highlight-color: transparent; /* iOS */
}

/* Asegura que al focus no aparezca el “pill” blanco */
.nav__item--has-sub > .nav__link:focus,
.nav__item--has-sub > .nav__link:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

/* Ajuste de layout dentro de about__media (sin cambiar tu look) */
.about__logo{
  width: 100%;
  aspect-ratio: 4 / 3;          /* asegura altura estable como si fuera imagen */
  display: grid;
  place-items: center;
}
.about__logo svg{ width: 90%; height: auto; display: block; }


.about__media{
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.about__media .about__stamp{ display:none !important; }

/* ===== Partners — tamaño de logos ===== */
.partners { 
  --partner-h: 46px;            /* 🔧 alto global de los logos */
}

/* contenedor (opcional, solo mejora el espaciado) */
.partners__row{
  gap: 24px 20px;               /* filas x columnas */
}

/* sizing de imágenes */
.partners__row img{
  height: var(--h, var(--partner-h)); /* usa --h si existe, sino --partner-h */
  width: auto;                        /* mantiene proporción */
  max-width: clamp(90px, 14vw, 180px);
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  display: block;
  filter: grayscale(100%) opacity(.85);    /* look suave */
  transition: filter .2s ease, transform .2s ease;
}

.partners__row img:hover{
  filter: none;
  transform: translateY(-2px);
}

/* Responsivo: ajusta alturas por breakpoint (tuneable) */
@media (max-width: 980px){
  .partners{ --partner-h: 40px; }
}
@media (max-width: 560px){
  .partners{ --partner-h: 34px; }
}

.footer__bar__inner .firma {
  font-size: 0.85rem;
  color: #94a3b8;  /* gris suave */
}
.footer__bar__inner .firma a {
  color: var(--brand, #f97316); /* usa tu color de acento naranja */
  text-decoration: none;
  font-weight: 600;
}
.footer__bar__inner .firma a:hover {
  text-decoration: underline;
}

.img-bandera-china {
  width: 120px;   /* ajustá el ancho que quieras */
  height: auto;   /* mantiene la proporción */
}

/* ===== Sección Unete ===== */
.join-section{
  background:#0b4952;
  color:#e6eefb;
  text-align:center;
  padding:60px 20px;
}
.join-section h2{
  font-family:Poppins,Inter,sans-serif;
  font-size:clamp(24px,3vw,36px);
  margin-bottom:16px;
}
.join-section p{
  color:#cfd8e3;
  margin-bottom:28px;
}
.join-btns{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Hover efecto brillante */
.join-btns a{
  transition:transform .25s, box-shadow .25s;
}
.join-btns a:hover{
  transform:scale(1.07);
  box-shadow:0 0 16px rgba(255,255,255,.25);
}

/* Animación WhatsApp: pulso */
.btn-whatsapp{
  background:#25d366;
  color:#fefefe;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

/* Animación Telegram: wiggle */
.btn-telegram{
  background:#0088cc;
  color:#fefefe;
  animation:pulse 2s infinite;
}
@keyframes wiggle{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(4px); }
}

/* Ajustes de tipografía para sección de precios */
.pricing__grid .price h3 {
  font-size: 2.4rem; /* títulos de cada tarjeta */
}

.pricing__grid .price__tag {
  font-size: 1.1rem; /* texto del precio */
}
.pricing__grid .price__tag strong {
  font-size: 1.6rem; /* valor destacado */
}

.pricing__grid .price__list li {
  font-size: 1rem; /* beneficios */
}

/* ===== Fondos personalizados para cada plan ===== */

/* China */
.price.china {
  background: 
    linear-gradient(rgba(11, 17, 32, 0.85), rgba(11, 17, 32, 0.85)), 
    url("img/banderachina.png");
  background-size: 180% auto;
  background-position: center;
  color: #fff;
}

/* Miami (EE.UU.) */
.price.miami {
  background: 
    linear-gradient(rgba(11, 17, 32, 0.85), rgba(11, 17, 32, 0.85)), 
    url("img/baderausa.png");
  background-size: 180% auto;
  background-position: center;
  color: #fff;
}

/* Marítimo (puerto / barco / mar) */
.price.maritime {
  background: 
    linear-gradient(rgba(11, 17, 32, 0.85), rgba(11, 17, 32, 0.85)), 
    url("img/espana.png");
  background-size: 180% auto;
  background-position: center;
  color: #fff;
}

/* =========================
   Spacing system + safe-area
   ========================= */
:root{
  --wrap-max: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xl: 16px;
}

/* Contenedor fluido con margen lateral seguro (iOS notch friendly) */
.container,
.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* Topbar (email / teléfono / redes) */
.topbar {
  padding-block: 10px;
}
.topbar .wrap { 
  display: flex; 
  align-items: center; 
  gap: var(--space-4); 
}

/* Navbar principal */
.navbar {
  /* altura/colores los que ya tengas */
}
.navbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 12px; /* respiración vertical */
}

/* Botón CTA “Registrarme” en mobile: que no quede pegado */
.navbar .cta {
  margin-left: auto;
}

/* =========================
   MENÚ MOBILE (drawer / offcanvas / dropdown)
   Aplica a tu contenedor de menú mobile
   ========================= */
.mobile-menu {
  /* tu posición/animación actual */
  padding: var(--space-6) max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right));
}
.mobile-menu nav a,
.mobile-menu .menu-item {
  display: block;
  padding-block: 12px;
  /* evita que el texto toque el borde */
  padding-inline: 2px;
  border-radius: 10px;
}

/* Touch targets más grandes */
.mobile-menu button,
.mobile-menu a {
  min-height: 44px; /* Apple HIG */
}

/* Separadores sutiles opcionales */
.mobile-menu .section-title {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  opacity: .8;
  font-weight: 600;
}

/* =========================
   FOOTER
   ========================= */
footer {
  /* tu color de fondo actual */
}
footer .wrap {
  padding-block: clamp(24px, 5vw, 56px);
  padding-inline: max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right));
}

.footer-top {  /* bloque con logo + descripción + íconos */
  display: grid;
  gap: var(--space-5);
}

.footer-columns { /* columnas de links */
  display: grid;
  gap: var(--space-4);
}

.footer-columns .col {
  display: grid;
  gap: 10px;
}

/* Íconos sociales con zona táctil cómoda */
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
}

/* =========================
   Breakpoints
   ========================= */
@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* ajusta a tus columnas reales */
    gap: var(--space-8);
  }
  .footer-top {
    grid-template-columns: 1.2fr 1fr; /* logo/desc | redes (opcional) */
    align-items: start;
  }
}

/* ======= OVERRIDES MÓVIL PARA EVITAR “PEGADO” EN BORDES ======= */
/* No borro reglas existentes: solo sumo padding-inline con safe-area */
.topbar__grid,
.header__inner,
.footer__grid,
.footer__bar__inner{
  padding-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
}

/* Menú mobile fijo: usa safe-area y más respiración lateral */
@media (max-width:980px){
  .nav__list{
    /* mantiene tus inset originales, pero respeta notch laterales con padding extra */
    padding-inline: clamp(16px, 5vw, 24px);
    /* opcional: redondeo visual si el viewport es muy chico */
    border-radius: 16px;
  }
}

/* Botón WhatsApp flotante: despegar de bordes curvos */
.wapp{
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
}

/* Footer: que los enlaces no queden apretados en mobile */
@media (max-width:560px){
  .footer__links a{ padding: 6px 0; }
}

/* ===== Modal Sucursales (usa tu tema) ===== */
.branch-list{
  list-style:none; margin: 6px 0 0; padding:0;
  display:grid; gap:12px;
}
.branch{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  align-items:center;
  background:#0e1832; border:1px solid #162545; border-radius:12px; padding:14px;
}
.branch__icon{
  width:36px; height:36px; display:grid; place-items:center;
  font-size:20px; background:#101a31; border:1px solid #1b2a4d; border-radius:10px;
}
.branch__body h4{ margin:0 0 4px; font-size:1.02rem; }
.branch__body p{ margin:0; color:#9fb0c9; font-size:.95rem; }
.branch__map{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),#fb923c); color:#071021; font-weight:700;
  white-space:nowrap;
}
@media (max-width:560px){
  .branch{ grid-template-columns:auto 1fr; }
  .branch__map{ grid-column:1 / -1; margin-top:6px; justify-self:end; }
}

/* Ajuste modal: un poco más de ancho cómodo en mobile */
@media (max-width:560px){
  .modal__dialog{ margin: 10vh 16px; }
}

/* ==== Modal fix: sobre todo (encima del hero) y X clickeable ==== */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;                 /* por encima de hero/header/slider */
}
.modal[aria-hidden="false"]{ display:block; }

/* Backdrop full viewport, siempre debajo del dialog */
.modal__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 0;
}

/* Dialog por encima del backdrop */
.modal__dialog{
  position: relative;
  z-index: 1;
}

/* Botón cerrar por encima de todo dentro del dialog */
.modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  cursor: pointer;
}

/* En móviles, margenes laterales seguros */
@media (max-width:560px){
  .modal__dialog{ margin: 10vh 16px; }
}

/* =========================
   Spacing system + safe-area (bloque repetido en tu archivo original)
   ========================= */
:root{
  --wrap-max: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xl: 16px;
}

/* Contenedor fluido con margen lateral seguro */
.container,
.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* Topbar (email / teléfono / redes) */
.topbar {
  padding-block: 10px;
}
.topbar .wrap { 
  display: flex; 
  align-items: center; 
  gap: var(--space-4); 
}

/* Navbar principal */
.navbar { }
.navbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 12px; /* respiración vertical */
}

/* Botón CTA “Registrarme” en mobile: que no quede pegado */
.navbar .cta { margin-left: auto; }

/* =========================
   MENÚ MOBILE (drawer / offcanvas / dropdown)
   ========================= */
.mobile-menu {
  padding: var(--space-6) max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right));
}
.mobile-menu nav a,
.mobile-menu .menu-item {
  display: block;
  padding-block: 12px;
  padding-inline: 2px;
  border-radius: 10px;
}

/* Touch targets más grandes */
.mobile-menu button,
.mobile-menu a { min-height: 44px; }

/* Separadores sutiles opcionales */
.mobile-menu .section-title {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  opacity: .8;
  font-weight: 600;
}

/* =========================
   FOOTER
   ========================= */
footer { }
footer .wrap {
  padding-block: clamp(24px, 5vw, 56px);
  padding-inline: max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right));
}

.footer-top { display: grid; gap: var(--space-5); }
.footer-columns { display: grid; gap: var(--space-4); }
.footer-columns .col { display: grid; gap: 10px; }

/* Íconos sociales con zona táctil cómoda */
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
}

/* =========================
   Breakpoints
   ========================= */
@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
  .footer-top {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

/* ===== Ocultar email y teléfono en móviles (robusto) + REDES ===== */

/* 1) Corte principal: ≤ 980px (tu breakpoint de navbar) */
@media screen and (max-width: 980px){
  /* Si realmente son mailto/tel */
  .topbar a[href^="mailto"], .nav__list a[href^="mailto"], .mobile-menu a[href^="mailto"],
  .topbar a[href^="tel"],    .nav__list a[href^="tel"],    .mobile-menu a[href^="tel"]{
    display:none !important;
  }

  /* Fallback por href del dominio (sin :has) */
  .topbar a[href*="instagram."], .topbar a[href*="facebook."], .topbar a[href*="twitter."], .topbar a[href*="x.com"],
  .topbar a[href*="linkedin."],  .topbar a[href*="youtube."],  .topbar a[href*="tiktok."],  .topbar a[href*="whatsapp."], .topbar a[href*="telegram."],
  .nav__list a[href*="instagram."], .nav__list a[href*="facebook."], .nav__list a[href*="twitter."], .nav__list a[href*="x.com"],
  .nav__list a[href*="linkedin."],  .nav__list a[href*="youtube."],  .nav__list a[href*="tiktok."],  .nav__list a[href*="whatsapp."], .nav__list a[href*="telegram."],
  .mobile-menu a[href*="instagram."], .mobile-menu a[href*="facebook."], .mobile-menu a[href*="twitter."], .mobile-menu a[href*="x.com"],
  .mobile-menu a[href*="linkedin."],  .mobile-menu a[href*="youtube."],  .mobile-menu a[href*="tiktok."],  .mobile-menu a[href*="whatsapp."], .mobile-menu a[href*="telegram."]{
    display:none !important;
  }

  /* Footer: redes sociales */
  .footer__socials,
  .footer__socials a{
    display:none !important;
  }

  /* Si usás separadores “|” en la topbar */
  .topbar__grid .divider{ display:none !important; }
}

/* 2) Touch grandes (tablets landscape sin reducir ancho) */
@media (hover: none) and (pointer: coarse){
  .topbar a[href^="mailto"], .nav__list a[href^="mailto"], .mobile-menu a[href^="mailto"],
  .topbar a[href^="tel"],    .nav__list a[href^="tel"],    .mobile-menu a[href^="tel"],
  .footer__socials, .footer__socials a{
    display:none !important;
  }

  .topbar__grid .divider{ display:none !important; }
}

/* Bloques con :has() — solo si el motor lo soporta */
@supports selector(:has(*)) {
  @media screen and (max-width: 980px){
    .topbar :where(a, li, div, span):has(> i[class*="ri-mail"], > i[class*="ri-phone"]),
    .nav__list :where(a, li, div, span):has(> i[class*="ri-mail"], > i[class*="ri-phone"]),
    .mobile-menu :where(a, li, div, span):has(> i[class*="ri-mail"], > i[class*="ri-phone"]){
      display:none !important;
    }

    .topbar :where(a, li, div, span):has(> i[class*="ri-instagram"], > i[class*="ri-facebook"], > i[class*="ri-twitter"], > i[class*="ri-x"], > i[class*="ri-linkedin"], > i[class*="ri-youtube"], > i[class*="ri-tiktok"], > i[class*="ri-whatsapp"], > i[class*="ri-telegram"]),
    .nav__list :where(a, li, div, span):has(> i[class*="ri-instagram"], > i[class*="ri-facebook"], > i[class*="ri-twitter"], > i[class*="ri-x"], > i[class*="ri-linkedin"], > i[class*="ri-youtube"], > i[class*="ri-tiktok"], > i[class*="ri-whatsapp"], > i[class*="ri-telegram"]),
    .mobile-menu :where(a, li, div, span):has(> i[class*="ri-instagram"], > i[class*="ri-facebook"], > i[class*="ri-twitter"], > i[class*="ri-x"], > i[class*="ri-linkedin"], > i[class*="ri-youtube"], > i[class*="ri-tiktok"], > i[class*="ri-whatsapp"], > i[class*="ri-telegram"]){
      display:none !important;
    }
  }

  @media (hover: none) and (pointer: coarse){
    .topbar :where(a, li, div, span):has(> i[class*="ri-mail"], > i[class*="ri-phone"]),
    .nav__list :where(a, li, div, span):has(> i[class*="ri-mail"], > i[class*="ri-phone"]),
    .mobile-menu :where(a, li, div, span):has(> i[class*="ri-mail"], > i[class*="ri-phone"]),
    .topbar :where(a, li, div, span):has(> i[class*="ri-instagram"], > i[class*="ri-facebook"], > i[class*="ri-twitter"], > i[class*="ri-x"], > i[class*="ri-linkedin"], > i[class*="ri-youtube"], > i[class*="ri-tiktok"], > i[class*="ri-whatsapp"], > i[class*="ri-telegram"]),
    .nav__list :where(a, li, div, span):has(> i[class*="ri-instagram"], > i[class*="ri-facebook"], > i[class*="ri-twitter"], > i[class*="ri-x"], > i[class*="ri-linkedin"], > i[class*="ri-youtube"], > i[class*="ri-tiktok"], > i[class*="ri-whatsapp"], > i[class*="ri-telegram"]),
    .mobile-menu :where(a, li, div, span):has(> i[class*="ri-instagram"], > i[class*="ri-facebook"], > i[class*="ri-twitter"], > i[class*="ri-x"], > i[class*="ri-linkedin"], > i[class*="ri-youtube"], > i[class*="ri-tiktok"], > i[class*="ri-whatsapp"], > i[class*="ri-telegram"]){
      display:none !important;
    }
  }
}