/* ═══════════════════════════════════════════════════════════════
   AJUSTES PARA MÓVIL — zonelan.es (15/09/2026)

   Se carga en TODAS las páginas, después de sus estilos propios, y solo
   actúa en pantallas de 767px o menos: en ordenador la web se ve
   exactamente igual que antes.

   Los selectores empiezan por "html" a propósito: así ganan a las reglas
   originales de cada página sin tener que usar !important.

   Incluye también los estilos de la barra inferior de accesos rápidos
   (Llamar · WhatsApp · Tienda · Presupuesto), que crea js/movil.js.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Base ─────────────────────────────────────────────────── */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* 16px en los campos: el iPhone no hace zoom al tocarlos */
  html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  html select,
  html textarea { font-size: 16px; }

  /* ── Barra superior ───────────────────────────────────────── */
  html .tb { padding: .3rem 1rem; }
  html .tb-chip { min-width: 40px; min-height: 36px; justify-content: center; }
  html .tb-chip svg { width: 15px; height: 15px; }
  html .tb-soc { width: 34px; height: 34px; }
  html .tb-soc img { width: 16px; height: 16px; }
  html .biz-state { font-size: .72rem; }

  /* ── Cabecera y menú ☰ ────────────────────────────────────── */
  html .nav { padding: 0 1rem; }
  html .logo img { height: 36px; }
  html .hbg { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  html .hbg span { width: 22px; height: 2px; }
  html #mnav { padding: .6rem 1rem 1rem; }
  html #mnav a { padding: .95rem 1rem; font-size: 1rem; }

  /* ── Textos pequeños → legibles ───────────────────────────── */
  html .slbl,
  html .ph-eyebrow,
  html .kh-eyebrow,
  html .hours-card-title,
  html .kh-amount-lbl,
  html .of-etiqueta,
  html .svc-tag,
  html .svc-cat-tag { font-size: .7rem; }
  html .hs .lbl,
  html .sabia-eyebrow,
  html .sl-cat,
  html .sm,
  html .img-badge { font-size: .68rem; }
  html .ph-breadcrumb { font-size: .7rem; }
  html .ph-breadcrumb a { display: inline-block; padding: .5rem 0; }

  /* ── Controles de carruseles y enlaces sueltos ────────────── */
  html .sc-btn { width: 42px; height: 42px; }
  html .g-nav { width: 44px; height: 44px; }
  /* Puntos de la galería: la raya se ve igual, pero la zona pulsable crece */
  html .g-dot { position: relative; }
  html .g-dot::after { content: ''; position: absolute; left: -4px; right: -4px; top: -18px; bottom: -18px; }
  html .map-cta { min-height: 44px; }
  html .svc-link { padding: .55rem 0; font-size: .9rem; }
  html .back { display: inline-block; padding: .6rem 0; }

  /* ── Formulario de contacto ───────────────────────────────── */
  html .form-input,
  html .form-select,
  html .form-textarea { min-height: 48px; }
  html #contact-form button[type=submit] { min-height: 50px; width: 100%; }
  html .form-consent input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
  html .form-consent a { display: inline-block; padding: .25rem 0; }

  /* ── Páginas legales (aviso legal, privacidad, cookies) ──── */
  html main li a,
  html main p a { display: inline-block; padding: .3rem 0; }
  html body > footer > a { display: inline-block; padding: .7rem .4rem; }

  /* ── Pie de página ────────────────────────────────────────── */
  html .fg { gap: 2rem; padding: 2.5rem 0 1.5rem; }
  html .fc h4 { font-size: .72rem; }
  html .fc ul { gap: 0; }
  html .fc ul a { display: block; padding: .55rem 0; font-size: .95rem; }
  html .fci a { display: inline-block; padding: .3rem 0; font-size: .95rem; }
  html .fci strong { font-size: .75rem; }
  html .soc { width: 44px; height: 44px; }
  html .soc svg { width: 17px; height: 17px; }
  html .fbot { font-size: .72rem; }
  html .flegal a { display: inline-block; padding: .5rem .2rem; font-size: .78rem; }

  /* ── Barra inferior de accesos rápidos (js/movil.js) ──────── */
  html body.con-accesos { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html .zl-accesos {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--bdr, #e2e8f0);
    box-shadow: 0 -6px 20px rgba(43, 49, 69, .08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html .zl-accesos a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    min-height: 64px; padding: .4rem .2rem;
    font-family: 'Sora', ui-sans-serif, sans-serif; font-size: .72rem; font-weight: 700;
    color: var(--navy, #2b3145); text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 108, 34, .15);
  }
  html .zl-accesos a:active { background: rgba(255, 108, 34, .08); }
  html .zl-accesos svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  html .zl-accesos .zl-acc-wa { color: #128c4a; }
  html .zl-accesos .zl-acc-cta { background: var(--o, #ff6c22); color: #fff; }
  html .zl-accesos .zl-acc-cta:active { background: var(--odk, #d9531a); }
  /* El aviso de cookies sube para no quedar tapado por la barra */
  html body.con-accesos #cookie { bottom: calc(76px + env(safe-area-inset-bottom)); left: 1rem; right: 1rem; max-width: none; }
}

/* En ordenador la barra no existe */
@media (min-width: 768px) {
  .zl-accesos { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTOAJUSTE A CUALQUIER ANCHO DE PANTALLA (16/09/2026)

   Mismo arreglo que en la tienda: con zoom del navegador o con el
   tamaño de letra del sistema grande, el ancho útil de un móvil baja a
   ~300px y varias rejillas y filas no sabían encogerse, así que la web
   se salía por la derecha y se veía cortada.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* 1) Que nada imponga un ancho mínimo mayor que la pantalla */
  html .svc-grid > *, html .stats-grid > *, html .agrid > *, html .chks > *,
  html .fg > *, html .nav > *, html .tb > *, html .tb .left, html .tb .right,
  html .fci > *, html .hs, html .of-card > *, html .zl-accesos a { min-width: 0; }
  html .zl-accesos a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* Rejillas que pedían un mínimo fijo (280/320px): ahora nunca piden
     más de lo que hay disponible. */
  html .svc-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

  /* 2) Márgenes laterales fluidos */
  html .nav, html .ph, html .si, html .kh, html .timeline {
    padding-left: clamp(.65rem, 4vw, 1.5rem);
    padding-right: clamp(.65rem, 4vw, 1.5rem);
  }
  html .tb { padding-left: clamp(.5rem, 3vw, 1rem); padding-right: clamp(.5rem, 3vw, 1rem); flex-wrap: wrap; row-gap: .35rem; }
  html .tb .left, html .tb .right { flex-wrap: wrap; }

  /* Logo proporcional */
  html .logo img { height: auto; max-height: 36px; max-width: 45vw; }

  /* Aviso de cookies siempre dentro de la pantalla */
  html #cookie { max-width: calc(100vw - 1.2rem); left: .6rem; right: .6rem; }

  /* Titulares grandes: tamaño fluido para que no desborden */
  html .ph h1, html .hero h1, html h1 { overflow-wrap: anywhere; }
}

/* ── Pantallas estrechas (o con zoom/letra grande): ≤ 420px ── */
@media (max-width: 420px) {
  html .stats-grid, html .chks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .zl-accesos a { font-size: .68rem; }
}

/* ── Muy estrecho: ≤ 340px ── */
@media (max-width: 340px) {
  html .stats-grid, html .chks, html .agrid { grid-template-columns: 1fr; }
  html .logo img { max-height: 32px; }
  html .zl-accesos a { font-size: .62rem; gap: .1rem; }
  html .zl-accesos svg { width: 20px; height: 20px; }
}

/* La insignia "+13 años en Ceuta" (página "Nosotros") sobresalía unos
   milímetros por la derecha en pantallas muy estrechas. */
@media (max-width: 767px) {
  html .abadge { right: 0; max-width: calc(100% - .5rem); }
}

/* ═══════════════════════════════════════════════════════════════
   BARRA SUPERIOR SIEMPRE EN UNA SOLA LÍNEA (16/09/2026)
   Antes se partía en dos filas en pantallas estrechas y ocupaba el
   doble. Ahora los chips, las redes y el aviso de horario encogen a la
   vez para caber en una sola línea; por debajo de 340px las redes se
   ocultan (siguen en el pie de página).
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html .tb { flex-wrap: nowrap; gap: .3rem; }
  html .tb .left, html .tb .right { flex-wrap: nowrap; gap: .3rem; min-width: 0; }
  html .tb-chip { min-width: 32px; min-height: 32px; padding: .28rem .4rem; flex-shrink: 0; }
  html .tb-chip svg { width: 14px; height: 14px; }
  html .tb-soc { width: 30px; height: 30px; flex-shrink: 0; }
  html .tb-soc img { width: 14px; height: 14px; }
  html .biz-badge { padding: .25rem .5rem; margin-left: 0; min-width: 0; }
  html .biz-state { font-size: .66rem; }
}
@media (max-width: 400px) {
  html .tb-soc { width: 27px; height: 27px; }
  html .tb-soc img { width: 13px; height: 13px; }
  html .tb-chip { min-width: 30px; padding: .25rem .32rem; }
  html .tb { gap: .22rem; }
  html .tb .left, html .tb .right { gap: .22rem; }
}


/* Las redes solo desaparecen de la barra superior en pantallas
   diminutas (por debajo de 290px): hasta ahí caben en la misma línea. */
@media (max-width: 289px) {
  html .tb-soc { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BARRA INFERIOR QUIETA (16/09/2026)

   Antes iba "flotando" sobre la página (position:fixed). En los móviles
   Android eso da saltos: cuando el navegador esconde o enseña su barra
   de direcciones, la zona visible cambia de alto y la barra flotante se
   recoloca a destiempo — de ahí los brincos y la franja blanca.

   Ahora va pegada por adherencia (position:sticky): forma parte de la
   página, ocupa su propio sitio al final y el navegador la mantiene
   pegada abajo mientras se baja. Ni salta, ni tapa el pie, ni hace
   falta reservarle hueco.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html .zl-accesos {
    position: sticky;
    bottom: 0;
    left: auto; right: auto;
    z-index: 400;
    background: #fff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding-bottom: 0;
  }
  html .zl-accesos::after { content: none; }
  /* Sin hueco reservado: la barra ya ocupa su propio espacio */
  html body.con-accesos { padding-bottom: 0; }
  html body.con-accesos > footer { padding-bottom: 0; }
  /* El aviso de cookies se apoya justo encima de la barra */
  html body.con-accesos #cookie { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}