/* ==========================================================================
   Alquitel - estilos custom
   Solo lo que NinjaBootstrap no cubre: tipografía, colores de marca,
   bordes y placeholders. Estructura y espaciado van con clases de Bootstrap.
   ========================================================================== */

body {
  font-family: "Inter", sans-serif;
}

/* Placeholder de assets (imágenes, íconos SVG, fondos) */
.ph {
  background-color: #f00;
}

/* Colores de marca */
.text-brand { color: #06c; }
.text-brand-light { color: #0ba1ff; }
.text-gray { color: #727272; }
.text-gray-mid { color: #848484; }
.bg-page-light { background-color: #f7f7f7; }
.bg-card-light { background-color: #deedf2; }
.bg-tab-light { background-color: #e0edf5; }
.text-item { color: #4697d3; }
.border-item { border-color: #4697d3 !important; }
.bg-brand { background-color: #06c; }
.bg-brand-light { background-color: #0ba1ff; }
.bg-gray-light { background-color: #f0f1f2; }
.border-brand-light { border-color: #0ba1ff !important; }

/* Tipografía (tamaños del diseño a 1440px, reducidos en mobile) */
.fs-display { font-size: 34px; line-height: 1.2; }
.fs-title { font-size: 34px; line-height: 1.3; }
.fs-stat { font-size: 30px; line-height: 1.3; }
.fs-card { font-size: 26px; line-height: 1.3; }
.fs-author { font-size: 24px; line-height: 1.3; }
.fs-lead { font-size: 18px; line-height: 1.3; }
.fs-input { font-size: 18px; }
.fs-btn { font-size: 15.8px; }
.fs-btn-sm { font-size: 9.7px; }
.fs-body { font-size: 14.8px; line-height: 20px; }
.fs-subtitle { font-size: 22px; line-height: 1.3; }
.fs-label { font-size: 18px; line-height: 1.3; }
.fs-feature { font-size: 18px; line-height: 1.3; }
.fs-caption { font-size: 16px; line-height: 1.3; }
.fs-link { font-size: 18px; }
.fs-item { font-size: 22px; line-height: 1.3; }
.fs-spec { font-size: 13.7px; line-height: 23px; }
.fs-tab { font-size: 13.8px; line-height: 18px; }

@media (min-width: 992px) {
  .fs-item { font-size: 27.6px; line-height: 37px; }
}

@media (min-width: 992px) {
  .fs-subtitle { font-size: 27.4px; line-height: 35px; }
  .fs-label { font-size: 20.7px; line-height: 27px; }
  .fs-feature { font-size: 23.6px; line-height: 31px; }
  .fs-caption { font-size: 19.1px; line-height: 25px; }
  .fs-link { font-size: 20px; }
}

@media (min-width: 992px) {
  .fs-display { font-size: 55.3px; line-height: 72px; }
  .fs-title { font-size: 44.4px; line-height: 58px; }
  .fs-stat { font-size: 36.5px; line-height: 48px; }
  .fs-card { font-size: 20px; line-height: 1.3; }
  .fs-author { font-size: 36.8px; line-height: 47px; }
  .fs-lead { font-size: 23.6px; line-height: 31px; }
  .fs-input { font-size: 21.9px; }
}

/* Títulos de las cards de Soluciones: en lg/xl las 4 columnas son más
   angostas que en el diseño; el tamaño del diseño recién entra en xxl
   (medido con la palabra más larga, "Presentaciones") */
@media (min-width: 1200px) {
  .fs-card { font-size: 26px; }
}

@media (min-width: 1400px) {
  .fs-card { font-size: 31.6px; line-height: 41px; }
}

/* Barra decorativa bajo títulos de sección */
.title-bar {
  width: 81px;
  height: 8px;
  /* Gradiente medido del diseño (PDF) */
  background: linear-gradient(90deg, #061230 0%, #12358e 10%, #1776d0 20%, #539fda 30%, #96d2e9 44%, #1da7fc 55%, #0184f5 75%, #0067cd 85%, #003162 95%, #00152b 100%);
}

/* Botones */
.btn-cta {
  width: 276px;
  height: 50px;
}

.btn-form {
  width: 183px;
  height: 50px;
}

.btn-card {
  width: 82px;
  height: 31px;
}

.btn-cta,
.btn-form,
.btn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Formulario */
.input-line {
  height: 83px;
  border: 1px solid #9e9e9e;
  color: #636363;
}

.input-line::placeholder {
  color: #636363;
  opacity: 1;
}

/* Tamaños de placeholders */
.icon-box { height: 61px; }
.service-icon-box { height: 100px; }
.ph-case { height: 220px; }

@media (min-width: 992px) {
  .ph-case { height: 381px; }
}

/* Marcador vertical previo al título de cada ítem del listado */
.item-marker {
  width: 12px;
  height: 23px;
  background-color: #4697d3;
}

/* Tabs de categorías */
.tab-box { min-height: 62px; }

/* Alto fijo para etiquetas de 1 o 2 líneas en las cards de servicio */
.label-box { min-height: 54px; }

/* Imagen de las cards de Soluciones: sobresale por encima del borde superior.
   El % de margin-top es relativo al ancho, así el desborde escala con la imagen. */
.img-sol { margin-top: -11%; }

/* Servicios: foto del bloque de enfoque y rubro destacado */
.enfoque-foto { aspect-ratio: 4 / 3; }

.card-servicio--destacada {
  outline: 2px solid #0ba1ff;
  outline-offset: -2px;
}

/* Casos: fotos superpuestas que se cruzan con un fundido (flechas en JS) */
.caso {
  opacity: 0;
  transition: opacity .7s ease;
}

.caso.activo { opacity: 1; }

.flecha-prev, .flecha-next { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .caso { transition: none; }
}

/* Casos: sombreado inferior para legibilidad del epígrafe (medido del diseño) */
.case-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 64%, #000 96%); }

/* ==========================================================================
   Hovers y foco
   Botones: solo color y sombra (sin transform, para no chocar con las
   entradas de GSAP). Movimiento solo en dispositivos con hover real.
   ========================================================================== */
.btn-cta,
.btn-form,
.btn-card,
.tab-box,
.link-sutil,
.input-line {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}

/* Cliente sin logo: el nombre en el gris de los logos */
.logo-texto {
  color: #bababa;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-sol,
.card-servicio,
.img-sol,
.logo-cliente,
.flecha-prev img,
.flecha-next img {
  transition: transform .35s ease, box-shadow .35s ease;
}

.img-sol { transform-origin: center bottom; }

.input-line:focus {
  border-color: #0ba1ff;
  outline: none;
}

@media (hover: hover) {
  .btn-cta:hover,
  .btn-form.bg-brand-light:hover {
    background-color: #06c;
    box-shadow: 0 8px 20px rgba(11, 161, 255, .35);
  }

  .btn-form.border:hover,
  .btn-card:hover {
    background-color: #0ba1ff;
    color: #fff;
  }

  .tab-box:hover {
    background-color: #0ba1ff;
    color: #fff;
  }

  .link-sutil:hover { opacity: .7; }

  .card-sol:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 102, 204, .15);
  }

  .card-sol:hover .img-sol { transform: scale(1.04); }

  .card-servicio:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 102, 204, .12);
  }

  .logo-cliente:hover { transform: scale(1.06); }

  .flecha-prev:hover img { transform: translateX(-4px); }
  .flecha-next:hover img { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta, .btn-form, .btn-card, .tab-box, .link-sutil, .input-line,
  .card-sol, .card-servicio, .img-sol, .logo-cliente,
  .flecha-prev img, .flecha-next img { transition: none; }
}

/* ==========================================================================
   Formulario: etiqueta flotante
   La etiqueta ocupa el lugar del placeholder; con foco o con contenido se
   achica y sube arriba a la izquierda dentro del mismo campo.
   (placeholder=" " es necesario para detectar :placeholder-shown)
   ========================================================================== */
.campo label {
  position: absolute;
  top: 50%;
  left: 25px;
  color: #636363;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: left top;
  transition: top .25s ease, transform .25s ease, color .25s ease;
}

.campo .input-line:focus + label,
.campo .input-line:not(:placeholder-shown) + label,
.campo .input-line:-webkit-autofill + label {
  top: 12px;
  transform: translateY(0) scale(.62);
}

.campo .input-line:focus + label { color: #0ba1ff; }

@media (prefers-reduced-motion: reduce) {
  .campo label { transition: none; }
}

/* Reparte las palabras en líneas parejas (evita una palabra sola al final) */
.text-balance { text-wrap: balance; }

/* Campo de texto largo (mensaje): la etiqueta reposa arriba, no centrada */
.campo textarea.input-line {
  height: auto;
  min-height: 200px;
  padding-top: 2.25rem;
  resize: vertical;
}

.campo textarea.input-line + label { top: 2.1rem; }

/* ==========================================================================
   Preguntas frecuentes: acordeón con <details> nativo (funciona sin JS).
   Donde el navegador lo soporta, abre con transición de alto.
   ========================================================================== */
.faq-item summary {
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icono {
  position: relative;
  width: 18px;
  height: 18px;
}

.faq-icono::before,
.faq-icono::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background-color: #4697d3;
  transition: transform .3s ease;
}

.faq-icono::after { transform: rotate(90deg); }
.faq-item[open] .faq-icono::after { transform: rotate(0deg); }

@media (hover: hover) {
  .faq-item summary:hover { opacity: .8; }
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item { interpolate-size: allow-keywords; }

  .faq-item::details-content {
    height: 0;
    overflow: hidden;
    transition: height .35s ease, content-visibility .35s allow-discrete;
  }

  .faq-item[open]::details-content { height: auto; }
}

/* ==========================================================================
   Nosotros: banner azul con isotipo de fondo y video con póster
   ========================================================================== */
/* Isotipo agrandado como marca de agua (decorativo, se sale por la derecha) */
.deco-hero {
  width: 560px;
  height: auto;
  top: 24px;
  right: -80px;
  opacity: .1;
}

/* Velo para que el botón y el texto se lean sobre la foto */
.video-velo {
  background: linear-gradient(to top, rgba(0, 20, 60, .7), rgba(0, 20, 60, .15) 65%);
}

.video-play {
  width: 64px;
  height: 64px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .35s ease;
}

@media (min-width: 768px) {
  .video-play { width: 88px; height: 88px; }
}

/* Triángulo de play (levemente corrido a la derecha para verse centrado) */
.video-play::before {
  content: "";
  margin-left: 6px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #06c;
}

.video-poster img { transition: transform .6s ease; }

@media (hover: hover) {
  .video-poster a:hover img { transform: scale(1.04); }
  .video-poster a:hover .video-play { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .video-poster img, .video-play { transition: none; }
}

/* ==========================================================================
   Nosotros v2: detalles de la escena de apertura y lista de servicios
   ========================================================================== */
/* Brillo suave detrás del isotipo */
.escena-brillo {
  position: absolute;
  top: -14%;
  right: -12%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}

/* Línea corta antes del antetítulo */
.escena-linea {
  width: 32px;
  height: 1px;
  background-color: currentColor;
}

/* Datos separados por un punto */
.escena-datos li + li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 1.5rem;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
}

/* Indicador de scroll: línea con un brillo que la recorre */
.escena-scroll {
  position: relative;
  width: 56px;
  height: 1px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .35);
}

.escena-scroll::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  transform: translateX(-100%);
}

@media (prefers-reduced-motion: no-preference) {
  .escena-scroll::after { animation: escena-scroll 2.4s ease-in-out infinite; }
}

@keyframes escena-scroll {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Servicios: lista con flecha que avanza en el hover */
.servicio-flecha {
  position: relative;
  width: 18px;
  height: 2px;
  background-color: currentColor;
  transition: transform .3s ease;
}

.servicio-flecha::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.servicio-link { transition: color .25s ease; }

@media (hover: hover) {
  .servicio-link:hover { color: #0ba1ff !important; }
  .servicio-link:hover .servicio-flecha { transform: translateX(6px); }
}

/* Textura de la escena de apertura: trama de puntos que se desvanece en
   diagonal + degradado que oscurece el azul hacia abajo (profundidad) */
.escena-textura {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.escena-textura::before,
.escena-textura::after {
  content: "";
  position: absolute;
  inset: 0;
}

.escena-textura::before {
  background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(155deg, #000 0%, rgba(0, 0, 0, .4) 40%, transparent 72%);
  mask-image: linear-gradient(155deg, #000 0%, rgba(0, 0, 0, .4) 40%, transparent 72%);
}

.escena-textura::after {
  background: linear-gradient(180deg, rgba(0, 16, 48, 0) 35%, rgba(0, 16, 48, .35) 100%);
}

/* ==========================================================================
   Theme WordPress: filtros del equipamiento y fichas
   ========================================================================== */
/* Filtros del equipamiento (pulgadas / resolución) */
.filtro-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #0ba1ff;
  border-radius: 999px;
  color: #06c;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.filtro-chip.activo {
  background-color: #0ba1ff;
  color: #fff;
}

@media (hover: hover) {
  .filtro-chip:hover { background-color: #0ba1ff; color: #fff; }
}

.tab-box.activo {
  background-color: #0ba1ff;
  color: #fff !important;
}

/* Imagen de producto: caja 3:2 como en el diseño, la foto entra completa */
.producto-imagen img { object-fit: contain; }

/* Formularios de Contact Form 7 (encuesta) con el estilo de los campos */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  border: 1px solid #9e9e9e;
  padding: .75rem 1rem;
}

.wpcf7 input[type="submit"] {
  border: 0;
  border-radius: .5rem;
  background-color: #0ba1ff;
  color: #fff;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .9rem 2.5rem;
}

/* ==========================================================================
   Header y footer (del diseño)
   Header: en la home va transparente sobre el hero; en las internas es una
   franja negra que termina en azul (182px en desktop, como el diseño).
   ========================================================================== */
.sitio-header {
  position: relative;
  z-index: 30;
}

/* Internas: negro que termina en un azul marino muy oscuro (sin franja
   marcada), así corta suave contra los heros claros. */
.sitio-header--interno {
  background: linear-gradient(180deg, #000 0%, #000 45%, #0b1d40 100%);
}

/* Cuando lo que sigue es azul (Nosotros): el degradado termina exactamente
   en el azul de la sección, así header y sección son una misma superficie. */
.sitio-header--funde-azul {
  background: linear-gradient(180deg, #000 0%, #02142e 30%, #06c 100%);
}

/* En la home va fijo y transparente sobre el hero; al bajar toma la franja
   oscura (clase .header-fondo, la pone el JS). En las internas es sticky. */
.sitio-header--home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.sitio-header--interno {
  position: sticky;
  top: 0;
}

.sitio-header {
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

/* Un degradado no se puede transicionar: la franja oscura va en una capa
   propia que aparece y desaparece con un fundido largo y suave. */
.sitio-header--home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #000 0%, #000 45%, #0b1d40 100%);
  opacity: 0;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.sitio-header--home.header-fondo::before { opacity: 1; }

/* Al bajar se esconde hacia arriba; al subir vuelve (clase del JS) */
.sitio-header.header-oculto { transform: translateY(-100%); }

.sitio-header-fila { min-height: 76px; }

.sitio-logo {
  position: relative;
  z-index: 2;
}

.sitio-logo img {
  display: block;
  width: 104px;
  height: auto;
}

@media (min-width: 992px) {
  .sitio-header-fila { min-height: 124px; }
  .sitio-logo img { width: 150px; }
}

/* Menú de escritorio */
.nav-principal a {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s ease;
}

.nav-principal [aria-current="page"] { color: #0ba1ff; }

@media (hover: hover) {
  .nav-principal a:hover { color: #0ba1ff; }
}

/* Submenú (Servicios): se despliega al pasar el puntero o al llegar con el
   teclado. Mismas clases que WordPress usa en los menús asignados. */
.nav-principal [aria-current="true"] { color: #0ba1ff; }

.nav-principal .menu-item-has-children { position: relative; }

.nav-principal .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: .55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

.nav-principal .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 290px;
  margin: 0;
  padding: 1.1rem 0;
  border-radius: 12px;
  background-color: #0b1d40;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 18px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

/* Puente invisible entre el link y el panel, para no perder el hover */
.nav-principal .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}

.nav-principal .menu-item-has-children:hover > .sub-menu,
.nav-principal .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 10px);
  transition: opacity .3s ease, transform .3s ease;
}

.nav-principal .sub-menu a {
  display: block;
  padding: .6rem 1.6rem;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .nav-principal .sub-menu { transition: none; }
}

/* ---- Menú mobile: botón hamburguesa ↔ cerrar y panel a pantalla completa.
   Funciona sin JS (<details>); con la capa de JS además cierra con Escape,
   al tocar un ancla y pausa el scroll suave mientras está abierto. */
.menu-movil > summary {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  list-style: none;
  cursor: pointer;
}

.menu-movil > summary::-webkit-details-marker { display: none; }

.menu-icono {
  position: relative;
  width: 28px;
  height: 18px;
}

.menu-icono span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
  transition: transform .4s cubic-bezier(.7, 0, .3, 1);
}

.menu-icono span:nth-child(1) { top: 0; }
.menu-icono span:nth-child(2) { top: 8px; }
.menu-icono span:nth-child(3) { top: 16px; }

.menu-movil[open] .menu-icono span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-movil[open] .menu-icono span:nth-child(2) { transform: scaleX(0); }
.menu-movil[open] .menu-icono span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Con el menú abierto el header queda fijo arriba (logo y botón visibles
   sobre el panel) y la página no se desplaza */
.sitio-header:has(.menu-movil[open]) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: none;
  transform: none;
}

html:has(.menu-movil[open]) { overflow: hidden; }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: 6rem 1.5rem 2.5rem;
  background-color: #06c;
  overflow-y: auto;
  transition: opacity .35s ease;
}

.menu-panel-lista a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 576px) {
  .menu-panel-lista a { font-size: 20px; }
}

@media (min-width: 768px) {
  .menu-panel-lista a { font-size: 22px; }
}

/* Pantallas bajas (teléfono apaisado): todo entra sin scroll */
@media (max-height: 500px) {
  .menu-panel { padding-top: 4.5rem; padding-bottom: 1.5rem; }
  .menu-panel-lista { row-gap: .6rem !important; }
  .menu-panel-lista a { font-size: 16px; }
  .menu-panel p { margin-top: 1.25rem !important; }
}

/* Submenú de Servicios en el panel mobile: siempre visible, más chico */
.menu-panel-lista .sub-menu {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: .9rem 0 .2rem;
  padding: 0;
}

.menu-panel-lista .sub-menu a {
  font-size: 13px;
  letter-spacing: .1em;
  opacity: .75;
}

@media (min-width: 576px) {
  .menu-panel-lista .sub-menu a { font-size: 14px; }
}

@media (max-height: 500px) {
  .menu-panel-lista .sub-menu { gap: .3rem; margin-top: .5rem; }
  .menu-panel-lista .sub-menu a { font-size: 12px; }
}

.menu-panel-lista [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.menu-panel-lista li {
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .55s ease;
}

.menu-panel-lista li:nth-child(2) { transition-delay: .04s; }
.menu-panel-lista li:nth-child(3) { transition-delay: .08s; }
.menu-panel-lista li:nth-child(4) { transition-delay: .12s; }
.menu-panel-lista li:nth-child(5) { transition-delay: .16s; }
.menu-panel-lista li:nth-child(6) { transition-delay: .2s; }

/* Entrada del panel y de los links al abrir (donde el navegador lo soporta) */
@starting-style {
  .menu-movil[open] .menu-panel { opacity: 0; }
  .menu-movil[open] .menu-panel-lista li { transform: translateY(24px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-icono span, .menu-panel, .menu-panel-lista li { transition: none; }
}

/* ---- Footer ---------------------------------------------------------- */
.sitio-footer { background-color: #0ba1ff; }

.footer-datos li::before {
  content: "›";
  margin-right: .5em;
}

.footer-datos a,
.footer-link {
  color: #fff;
  transition: opacity .25s ease;
}

@media (hover: hover) {
  .footer-datos a:hover,
  .footer-link:hover { opacity: .75; }
}

/* ---- Botón flotante de WhatsApp -------------------------------------- */
/* Fijo en la esquina: acompaña todo el recorrido, también sobre el footer. */
.whatsapp-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 25;
  display: block;
  width: 48px;
  border-radius: 22%;
  overflow: hidden;
  isolation: isolate;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .25));
  transition: transform .3s ease;
}

.whatsapp-flotante img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .whatsapp-flotante { right: 28px; bottom: 28px; width: 60px; }
}

/* Tornasolado sutil: un brillo en azules, celestes y un toque violeta
   (cercanos al degradado del botón) que cruza una sola vez al entrar el
   puntero. Con mix-blend-mode: screen solo aclara: el ícono blanco sigue igual. */
.whatsapp-flotante::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(150, 215, 255, .6) 45%, rgba(140, 150, 255, .4) 55%, rgba(255, 255, 255, 0) 70%);
  background-size: 250% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, background-position .9s cubic-bezier(.4, 0, .2, 1);
}

@media (hover: hover) {
  .whatsapp-flotante:hover { transform: scale(1.06); }
  .whatsapp-flotante:hover::after { opacity: 1; background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-flotante::after { transition: opacity .3s ease; }
}

/* ==========================================================================
   Footer que se descubre debajo del contenido
   El footer queda "sticky" al pie de la ventana pero por DEBAJO del contenido
   (z-index menor); el contenido, con fondo propio, lo tapa hasta el final y
   al terminar se corre y lo deja ver. El largo de la página no cambia.
   ========================================================================== */
.sitio-contenido {
  position: relative;
  z-index: 1;
  background-color: #fff;
}

.sitio-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
}