/* ════════════════════════════════════════════════════════════════════
   SEVILLA WEB & IT SERVICES — Ajustes sobre el build (móvil, PWA y fixes)
   Correcciones sobre el build de React: desbordamiento lateral, alto
   real del viewport en iOS/Android y zonas seguras (muesca, barra de
   estado y barra de gesto) al abrirse desde el icono de inicio.

   Las zonas seguras se aplican siempre: env(safe-area-inset-*) vale 0
   en pantallas sin muesca y en el navegador normal en vertical, así
   que no depende de que el navegador acierte con display-mode.
   ════════════════════════════════════════════════════════════════════ */

html {
  /* El rebote del scroll deja ver el fondo del documento: que sea el de la web */
  background-color: #05070e;
  -webkit-text-size-adjust: 100%;
}

body {
  /* El hero se sale unos píxeles en pantallas de 360px */
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(59, 130, 246, .18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Alto del hero ──────────────────────────────────────────────────
   100vh en móvil cuenta con la barra del navegador oculta, así que el
   contenido queda cortado mientras la barra está visible. 100dvh sigue
   el alto real de la ventana. */

@media (max-width: 767px) {
  @supports (height: 100dvh) {
    .h-screen { height: 100dvh; }
  }
}

/* ── Cabecera fija: respetar muesca y barra de estado ──────────────
   Se replican los paddings del build (py-4 / sm:py-5, px-5 / sm:px-8 /
   lg:px-12) sumándoles la zona segura. */

header.fixed {
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
}

@media (min-width: 640px) {
  header.fixed {
    padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
    padding-left: calc(2rem + env(safe-area-inset-left, 0px));
    padding-right: calc(2rem + env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 1024px) {
  header.fixed {
    padding-left: calc(3rem + env(safe-area-inset-left, 0px));
    padding-right: calc(3rem + env(safe-area-inset-right, 0px));
  }
}

/* ── Secciones: margen lateral seguro en horizontal con muesca ── */

.section,
#demos {
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
}

@media (min-width: 640px) {
  .section,
  #demos {
    padding-left: calc(2rem + env(safe-area-inset-left, 0px));
    padding-right: calc(2rem + env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 1024px) {
  .section,
  #demos {
    padding-left: calc(3rem + env(safe-area-inset-left, 0px));
    padding-right: calc(3rem + env(safe-area-inset-right, 0px));
  }
}

/* ── Sección de demos en pantallas estrechas ── */

@media (max-width: 380px) {
  .swd-card-title { font-size: 1.125rem; }
  .swd-tag { font-size: .6875rem; padding: .3125rem .625rem; }
  .swd-body { padding: 1.375rem; }
  .swd-note { font-size: .6875rem; word-break: break-word; }
}

/* ── Botones de cerrar mal colocados ────────────────────────────────
   .liquid-glass y .liquid-glass > * fijan position:relative y, al ir
   después de las utilidades en la hoja compilada, anulan .absolute.
   Resultado: la ✕ del menú móvil y la del modal de Área de cliente se
   colocan en el flujo, encima del título, en lugar de en su esquina. */

.liquid-glass.absolute,
.liquid-glass > .absolute {
  position: absolute;
}

.liquid-glass.fixed,
.liquid-glass > .fixed {
  position: fixed;
}