/* ===========================================================
   ❶ ULTRA-HD  (≥ 2560 px)  — escalado general
   =========================================================== */
@media (min-width:2560px){
  html            {font-size:87.5%;}
  .logo           {font-size:4rem;margin-right:25rem;}
  .nav-links li   {font-size:2.2rem;margin-right:5rem;}
  .btn a          {font-size:2rem;}

  /* Hero */
  .bg_div :first-child{font-size:9rem;}
  .bg_div :last-child {font-size:3rem;}

  /* Bloques imagen – texto */
  .img-text{
    --gap:14rem;--img-basis:36%;--img-max:840px;--line:2;
    --padding:3.5rem 4rem;
  }
  .img-text__title,
  .img-text__subtitle{font-size:3rem;}
  .img-text__list li,
  .img-text__paragraph{font-size:2.6rem;}

  /* Footer */
  footer :nth-child(1),
  footer :nth-child(2){font-size:2.8rem;}
  .footer-text1       {font-size:2.4rem;}
  #langSwitcher       {font-size:1.8rem;}
}

/* ===========================================================
   ❷ DESKTOP/TABLET  (≤ 1200 px)  — panel lateral & logo
   =========================================================== */
@media (max-width:1200px){
  .burgar{display:block;font-size:3rem;}

  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:55vw;max-width:320px;
    flex-direction:column;justify-content:center;gap:2.4rem;
    background:rgba(255,255,255,.55);backdrop-filter:blur(14px);
    border-left:1px solid rgba(255,255,255,.35);box-shadow:-4px 0 18px rgba(0,0,0,.12);
    transform:translateX(100%);transition:.35s ease;z-index:1000;padding-left:2.4rem;
  }
  .nav-links.active{transform:translateX(0);}
  .nav-links a{font-size:3.2rem;font-weight:700;color:#5C4033;}
  .btn,#langSwitcher{display:none;}
  body.nav-open{overflow:hidden;}
}

/* ===========================================================
   ❸ TABLET V  (≤ 900 px)  — formulario bajo el plano
   =========================================================== */
@media (max-width:900px){
  .lead-card{
    position:static;margin:2rem auto 0;transform:none;
    grid-template-columns:1fr 1fr;column-gap:1.6rem;max-width:640px;
  }
  .lead-card h3,.lead-card button{grid-column:1 / -1;}
  .plan-container{display:flex;flex-direction:column;align-items:center;}
}

/* ===========================================================
   ❹ TABLET V  (≤ 768 px)  — bloques img-text y modales
   =========================================================== */
@media (max-width:768px){
  .img-text,
  .img-text--reverse{flex-direction:column;text-align:center;}
  .img-text__img{width:100%;flex-basis:auto;max-width:none;}

  .modal__box{
    max-width:90%;padding:2rem 1.5rem;
  }
  .modal__title        {font-size:1.9rem;}
  .modal__form label,
  .modal__form input,
  .modal__form textarea,
  .modal__send         {font-size:1.3rem;}

  .contact-form        {width:95%;padding:2rem 1.5rem;}
  .contact-form__title {font-size:1.9rem;}
}

/* ===========================================================
   ❺ MÓVIL GRANDE (≤ 600 px) — corrección “Bloque A · Planos”
   =========================================================== */
@media (max-width:600px){

  /* ─── Ajuste base ─────────────────────────────────────── */
  html{font-size:55%;}                 /* 1 rem ≈ 8.8 px */

  /* ─── NAVBAR ──────────────────────────────────────────── */
  .logo{margin-right:1rem;}
  .nav-links a{font-size:2.2rem!important;}

  /* ─── SECCIÓN “availability” ─────────────────────────── */
  .section_1--availability{
    display:flex;flex-direction:column;align-items:center;
    padding:0!important;min-height:75vh;
  }

  /* ── Títulos ─────────────────────────────────────────── */
  .section_1--availability .bg_div{
    position:static;transform:none;text-align:center;
    margin:calc(var(--header-h) + 1rem) 0 .8rem; /* debajo del header fijo */
    order:0;
  }
  .bg_text1{font-size:clamp(2.4rem,7vw,3.2rem);color:#5C4033!important;}
  .bg_text2{font-size:clamp(1.4rem,4vw,2rem);color:#5C4033!important;}

  /* ── Contenedor y plano ─────────────────────────────── */
  .plan-box{
    display:flex;flex-direction:column;align-items:center;
    width:100%!important;margin:0!important;
  }
  /* --- contenedor generado por Mapster -------------------------- */
  .plan-wrapper{
    width:100%!important;       /* se adapta al ancho del móvil   */
    margin:0!important;
    order:1;                    /* después de los títulos         */
  }

  /* --- clones internos ------------------------------------------ */
  /* ①  la IMAGEN clonada no debe tapar el mapa */
  .plan-wrapper img.mapster_el{
    max-width:100%;
    pointer-events:none!important;   /* ← deja pasar el tap        */
  }

  /* ②  el CANVAS DEBE recibir los eventos → NO tocar pointer-events */
  .plan-wrapper canvas{
    max-width:100%;   /* deja que Mapster fije el width real */
  }

  /* --- tu imagen original (lleva usemap) ------------------------ */
  #blockA-img{
    max-width:100%;
    height:auto;
    display:block;
  }

  /* ── Tarjeta info + formulario ───────────────────────── */
  .info-text,
  .lead-card{
    order: 2;
    position:static!important;
    margin:1.2rem auto 0;
    max-width:92%;
  }
  .lead-card{
    /* pasa de grid de 2 × 2 a una única columna */
    display:flex;            /* o display:block; si lo prefieres */
    flex-direction:column;
    gap:1rem;                /* separación vertical */
    order:3;                 /* debajo de la tarjeta info (order:2) */
  }

  .lead-card label{
    width:100%;              /* que ocupen todo el ancho */
  }

  .lead-card input,
  .lead-card textarea{
    width:100%;
    box-sizing:border-box;   /* respeta el padding/border */
  }
  .info-card{margin-bottom:1rem;}
  .lead-card label,
  .lead-card input,
  .lead-card textarea{font-size:1.4rem;}

  /* ── Footer compacto ─────────────────────────────────── */
  footer{padding:3rem 1rem;height:auto;}
  footer p,.footer-text1{font-size:1.4rem;}
  footer .legal-links a{font-size:1.2rem!important;}
  footer .social a{font-size:1.8rem;}

  /* ── Iconos promo (si los usas) ──────────────────────── */
  .promo-icon{width:1.8em;height:1.8em;}
  .promo-count{font-size:1.8em;}
  .promo-info{gap:1rem;row-gap:.6rem;font-size:1.6rem;}

  .process-hero-img{
    /* la hacemos prácticamente a pantalla completa en móvil */
    width: 106%;          /* en lugar del 70 % de escritorio          */
    max-width: none;     /* quitamos el tope de 1200 px              */
    height: auto;        /* mantiene la proporción                   */
    display: block;
    margin: calc(var(--header-h) + 1rem) auto 2.4rem;
    /* si quieres aún más grande, usa width:100% y un padding-inline
      en el contenedor para que no “pegue” contra los bordes.       */
  }
}


/* ===========================================================
   ❻ MÓVIL MEDIO  (≤ 480 px)
   =========================================================== */
@media (max-width:480px){
  .modal__box{max-width:95%;padding:1.5rem 1rem;}
  .modal__title{font-size:1.7rem;}
  .modal__close{font-size:2rem;}
  .modal__send {font-size:1.4rem;}
}

/* ===========================================================
   ❼ MÓVIL PEQUEÑO  (≤ 360 px)
   =========================================================== */
@media (max-width:360px){
  .service-header{width:73%;}
  footer :nth-child(1),
  footer :nth-child(2){font-size:1.5rem;}
  .footer-text1{font-size:1.3rem;}
}

/* ===========================================================
   ❽ MÓVIL XS  (≤ 320 px)
   =========================================================== */
@media (max-width:320px){
  .logo{font-size:2.2rem;margin-right:12rem;}
  .service-header{width:75%;}
  .section3_div1{width:250px;}
}