/* ==========================================================================
   Avalon BC - Correcciones y mejoras (responsive, navegacion, video)
   Este archivo se carga DESPUES de mbr-additional.css y sobrescribe los
   estilos generados por Mobirise. No editar los archivos generados.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VIDEO DE FONDO: eliminar las franjas laterales (pillarbox)
   El iframe de YouTube conserva la relacion 16:9 de su contenido. Cuando el
   iframe queda mas ancho que 16:9 (portada: 2.11:1), YouTube rellena los
   lados con gris. Aqui forzamos que el iframe SIEMPRE cubra la seccion
   (efecto "cover"), recortando el sobrante en lugar de dejar franjas.
   El calculo exacto lo hace avalon-custom.js; esto es el respaldo para el
   instante previo a que corra el script.
   -------------------------------------------------------------------------- */
section[data-bg-video] .mbr-video-foreground {
  overflow: hidden;
}

section[data-bg-video] .mbr-background-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* 100vw x 56.25vw = 16:9 sobre el ancho; min-* garantiza cubrir en alto */
  width: 100vw !important;
  height: 56.25vw !important;
  min-width: 177.78vh !important;
  min-height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0;
  pointer-events: none;
}

/* Cuando el script ya midio la seccion, se usan estas medidas exactas */
section[data-bg-video] .mbr-background-video.avalon-video-fitted {
  width: var(--avalon-video-w) !important;
  height: var(--avalon-video-h) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* La imagen de respaldo (poster) tambien debe cubrir, nunca deformarse */
section[data-bg-video] .mbr-background-video-preview,
section[data-bg-video] .mbr-fallback-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* En moviles Mobirise no reproduce el video: se muestra el poster */
@media (max-width: 767px) {
  section[data-bg-video] .mbr-background-video-preview {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   2. MENU: marcar visualmente la pagina activa
   Antes "Inicio" estaba fijo como activo en todas las paginas, por lo que el
   menu nunca reflejaba donde estaba el usuario.
   -------------------------------------------------------------------------- */
.navbar .nav-item .nav-link {
  position: relative;
  transition: color .2s ease;
}

.navbar .nav-item .nav-link.active,
.navbar .nav-item .nav-link[aria-current="page"] {
  color: #1f5eb6 !important;
  font-weight: 700 !important;
}

.navbar .nav-item .nav-link.active::after,
.navbar .nav-item .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: 0;
  height: 3px;
  background: #1f5eb6;
  border-radius: 3px;
}

/* Retroalimentacion tactil al tocar un enlace del menu */
.navbar .nav-item .nav-link:active {
  opacity: .7;
}

/* Mobirise quitaba el contorno de foco; se devuelve por accesibilidad */
.navbar .nav-link:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #4284df !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. MENU EN MOVIL
   Problemas del menu original (medidos a 375x812):
     - La barra fija ocupaba 155px de alto (el 19% de la pantalla) porque el
       logotipo y el boton hamburguesa iban en dos filas distintas.
     - Logotipo y boton salian centrados, no en las esquinas.
     - Al abrir, la barra crecia a 572px y el boton de cerrar se desplazaba
       hacia abajo, asi que costaba encontrarlo.
     - Los datos de contacto aparecian ENTRE el logotipo y los enlaces.
     - El boton HABLEMOS quedaba chico y perdido en medio del panel.
   Ahora: barra de una sola fila (logotipo a la izquierda, boton fijo a la
   derecha) y un panel desplegable con enlaces comodos, boton de ancho
   completo, datos de contacto al final y fondo oscuro detras.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  nav.navbar {
    padding: 0 !important;
  }

  /* --- Barra: una sola fila --- */
  .navbar .menu-content-top {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    /* el relleno derecho reserva el sitio del boton hamburguesa */
    padding: .25rem 3.5rem .25rem 1rem !important;
    min-height: 0;
    overflow: visible;
    border-bottom: 1px solid #ececec;
  }

  .navbar .menu-logo {
    margin-right: auto;
  }

  .navbar .menu-content-top .navbar-brand {
    margin-left: 0 !important;
    padding: .3rem 0 !important;
    min-height: 0;
    display: flex;
    align-items: center;
  }

  .navbar .menu-content-top .navbar-brand img {
    height: 2.4rem !important;
  }

  .navbar .navbar-caption-wrap .brand-link {
    font-size: 1.2rem !important;
    line-height: 1.2;
  }

  /* El boton se ancla a la barra, no a su fila: al abrir el menu se queda
     en la misma esquina en lugar de bajar con el contenido */
  .navbar .navbar-toggler {
    position: absolute !important;
    top: 10px;
    right: 12px;
    /* 44px es el area minima recomendada para tocar con el dedo */
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1002;
  }

  /* Las tres barras son <span> absolutos con right:0 y top 0/8/16, asi que
     necesitan una caja de 30x18 que las contenga; sin ella se pegaban al
     borde superior del boton en lugar de quedar centradas. */
  .navbar .navbar-toggler .hamburger {
    position: relative;
    display: block;
    width: 30px;
    height: 18px;
  }

  /* Mobirise le pone position:relative y el boton absoluto se colgaba de
     esta fila, que mide 0 px de alto y empieza debajo del logotipo.
     Con static el ancla pasa a ser la barra fija. */
  .navbar .menu-bottom {
    position: static !important;
    width: 100%;
    padding: 0 !important;
  }

  /* --- Panel desplegable --- */
  .navbar .navbar-collapse.show,
  .navbar .navbar-collapse.collapsing {
    width: 100%;
    /* si algun dia hay mas opciones, el panel se desplaza por dentro
       en lugar de salirse de la pantalla */
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    background: #fff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
  }

  .navbar .navbar-nav {
    width: 100%;
    padding: .25rem 0 !important;
    margin: 0 !important;
  }

  .navbar .navbar-nav .nav-item {
    width: 100%;
    margin: 0 !important;
    border-bottom: 1px solid #f1f1f1;
  }

  .navbar .navbar-nav .nav-item:last-child {
    border-bottom: 0;
  }

  /* Area tactil comoda (minimo recomendado 44px) */
  .navbar .navbar-nav .nav-item .nav-link {
    display: block;
    /* alineados a la izquierda: es una lista, y asi combina con la barra
       azul que marca la pagina actual */
    text-align: left !important;
    padding: .85rem 1.4rem !important;
    margin: 0 !important;
    font-size: 1.0625rem !important;
    line-height: 1.4;
  }

  /* La pagina actual: barra azul a la izquierda y fondo tenue. El subrayado
     de escritorio quedaria desproporcionado ocupando todo el ancho. */
  .navbar .nav-item .nav-link.active,
  .navbar .nav-item .nav-link[aria-current="page"] {
    background: rgba(66, 132, 223, .08);
  }

  .navbar .nav-item .nav-link.active::after,
  .navbar .nav-item .nav-link[aria-current="page"]::after {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 4px;
    height: auto;
    border-radius: 0;
  }

  /* Boton HABLEMOS de ancho completo: es la accion principal */
  .navbar .navbar-buttons {
    width: 100%;
    padding: .85rem 1.15rem !important;
    margin: 0 !important;
  }

  /* En tabletas el boton se estiraba a lo ancho de la pantalla */
  .navbar .navbar-buttons .btn {
    max-width: 24rem;
    width: 100%;
    justify-content: center;
    min-height: 48px;
    margin: 0 !important;
    font-size: 1rem;
  }

  /* --- Datos de contacto ---
     avalon-custom.js los traslada al final del panel; antes aparecian
     entre el logotipo y los enlaces. */
  .navbar .menu-content-right {
    display: none !important;
  }

  .navbar #navbarSupportedContent .menu-content-right {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: .85rem 1.15rem 1rem;
    background: #fafafa;
    border-top: 1px solid #ececec;
  }

  .navbar #navbarSupportedContent .menu-content-right .info-widget {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: .4rem 0 !important;
    border-left: none !important;
  }

  .navbar #navbarSupportedContent .menu-content-right .widget-icon {
    padding-right: .7rem;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #4284df;
  }

  .navbar #navbarSupportedContent .menu-content-right .widget-title,
  .navbar #navbarSupportedContent .menu-content-right .widget-text {
    margin-bottom: 0;
    line-height: 1.45;
  }

  .navbar #navbarSupportedContent .menu-content-right .widget-text:empty {
    display: none;
  }

  /* --- Fondo oscuro detras del panel ---
     Da a entender que el menu esta abierto y permite cerrarlo tocando fuera.
     z-index 1010: encima del boton flotante de WhatsApp (1000) y debajo de
     la barra (1030). */
  .avalon-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1010;
  }

  .avalon-menu-backdrop.avalon-visible {
    opacity: 1;
    visibility: visible;
  }

  /* Con el menu abierto la pagina de atras no debe desplazarse */
  body.avalon-menu-open {
    overflow: hidden;
  }
}

@media (min-width: 992px) {
  .avalon-menu-backdrop {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   4. TARJETAS DE SERVICIOS DE LA PORTADA (#custom-html-6)
   Se conserva la maqueta original (columnas con imagenes de distintos altos).
   Aqui solo se corrigen detalles que la rompian en pantallas chicas.
   -------------------------------------------------------------------------- */
/* Las imagenes traen width/height reales para que el navegador reserve el
   espacio antes de descargarlas; height:auto conserva su proporcion */
#custom-html-6 .flexbox .item img {
  height: auto;
}

/* El bloque completo se apagaba al pasar el mouse por cualquier parte y en
   pantallas tactiles el efecto se quedaba pegado. Se limita a dispositivos
   con mouse real. */
@media (hover: none) {
  #custom-html-6 .flexbox:hover img {
    opacity: 1;
  }
}

/* El rotulo tenia 30px fijos: en pantallas chicas se salia de su caja */
#custom-html-6 .flexbox .item .title {
  font-size: clamp(1rem, 2.2vw, 30px);
  line-height: 1.2;
  margin-bottom: 0;
}

@media (max-width: 667px) {
  #custom-html-6 .flexbox .item .title {
    width: auto;
    max-width: 70%;
    font-size: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   5. BOTON FLOTANTE DE WHATSAPP
   Estaba fijo arriba a la derecha, encimado con el menu, y oculto en
   escritorio. Se mueve a la esquina inferior derecha y se muestra siempre.
   -------------------------------------------------------------------------- */
/* Los estilos originales usan selectores de ID (#custom-html-1f .my-image),
   de mayor especificidad, por eso hace falta !important aqui. */
.avalon-whatsapp-float .my-image {
  width: 56px !important;
  height: 56px !important;
  padding-top: 0 !important;
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 88px !important;
  top: auto !important;
  z-index: 1000 !important;
  visibility: visible !important;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}

.avalon-whatsapp-float .my-image:hover {
  transform: scale(1.08);
}

@media (min-width: 921px) {
  .avalon-whatsapp-float .my-image {
    visibility: visible !important;
    width: 60px !important;
    height: 60px !important;
  }
}

/* --------------------------------------------------------------------------
   6. AJUSTES RESPONSIVE GENERALES
   -------------------------------------------------------------------------- */

/* Ningun elemento debe provocar desplazamiento horizontal */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* Los titulos largos en mayusculas se desbordaban en pantallas angostas */
h1, h2, h3, h4,
.mbr-section-title,
.mbr-section-subtitle {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* La barra superior es fija y su alto cambia con el ancho de pantalla.
   avalon-custom.js mide el alto real y lo publica aqui; este valor solo
   es el punto de partida antes de que corra el script. */
:root {
  --avalon-nav-h: 132px;
}

/* El heroe de la portada tenia 180px de relleno superior fijo: en moviles
   el titulo quedaba tapado por la barra. Ahora reserva su alto real. */
@media (max-width: 767px) {
  .cid-qRbSe56nw8 {
    padding-top: calc(var(--avalon-nav-h) + 2rem) !important;
    padding-bottom: 56px !important;
  }

  .mbr-section-btn .btn {
    white-space: normal;
    text-align: center;
  }
}

/* Secciones de video a pantalla completa en moviles */
@media (max-width: 767px) {
  .mbr-fullscreen .mbr-overlay {
    min-height: 100%;
  }

  section.mbr-fullscreen {
    min-height: 100vh;
    padding-top: calc(var(--avalon-nav-h) + 2rem);
    padding-bottom: 3rem;
  }
}

/* Campos y botones del formulario comodos al tacto */
@media (max-width: 767px) {
  .form-control.input,
  .btn.btn-form {
    min-height: 44px;
    font-size: 16px; /* evita el zoom automatico de iOS al enfocar */
  }

  .input-group-btn .btn {
    width: 100%;
  }
}

/* Pie de pagina: enlaces separados y legibles en pantallas chicas */
.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 575px) {
  .mbr-section-btn .btn-underline {
    display: inline-block;
    margin: .35rem .5rem;
  }
}

/* Boton "subir": no debe encimarse con el de WhatsApp */
#scrollToTop.scrollToTop {
  bottom: 16px;
  right: 16px;
}

/* Respetar la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Texto solo para lectores de pantalla */
.avalon-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   7. RECORRIDOS 3D (MATTERPORT) CON CARGA DIFERIDA
   Antes el iframe de Matterport se incrustaba directo: descargaba varios MB
   de reproductor aunque el visitante nunca lo usara. Ahora se muestra una
   portada (la miniatura del propio recorrido) y el reproductor solo se carga
   cuando la persona hace clic. avalon-custom.js hace el reemplazo.
   -------------------------------------------------------------------------- */
.avalon-tours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.avalon-tour-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: box-shadow .3s ease, transform .3s ease;
}

.avalon-tour-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  transform: translateY(-2px);
}

/* La portada mantiene 16:9 para que la tarjeta no salte al cargar */
.avalon-tour-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1b53a0 0%, #4284df 100%);
}

.avalon-tour-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: block;
  overflow: hidden;
}

.avalon-tour-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.avalon-tour-facade:hover img,
.avalon-tour-facade:focus-visible img {
  transform: scale(1.05);
}

.avalon-tour-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .45));
  transition: background .3s ease;
}

.avalon-tour-facade:hover .avalon-tour-veil {
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, .4));
}

.avalon-tour-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  text-align: center;
}

.avalon-tour-play {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, background .3s ease;
}

.avalon-tour-facade:hover .avalon-tour-play,
.avalon-tour-facade:focus-visible .avalon-tour-play {
  transform: scale(1.1);
  background: rgba(255, 255, 255, .55);
}

.avalon-tour-play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  fill: #fff;
}

.avalon-tour-label {
  flex: 0 0 auto;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.avalon-tour-meta {
  flex: 0 0 auto;
  font-size: .75rem;
  opacity: .9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* El reproductor sustituye a la portada dentro de la misma caja 16:9 */
.avalon-tour-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.avalon-tour-body {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem;
}

.avalon-tour-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e8f1fb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avalon-tour-icon svg {
  width: 20px;
  height: 20px;
  fill: #1f5eb6;
}

.avalon-tour-card .avalon-tour-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #232323;
}

.avalon-tour-card .avalon-tour-sub {
  margin: .15rem 0 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: #767676;
}


/* --------------------------------------------------------------------------
   8. PAGINA DE CONTACTO
   Se retiro el formulario (tres campos y envio a un servidor externo) y en su
   lugar la pagina empuja a WhatsApp, que es el canal donde la gente si
   responde. Hay cuatro puntos de entrada: el boton principal, las tarjetas
   por tema, la franja de cierre y el boton flotante.
   -------------------------------------------------------------------------- */
:root {
  --avalon-azul: #1f5eb6;
  --avalon-azul-claro: #4284df;
  --avalon-wa: #25d366;
  --avalon-wa-oscuro: #1da851;
  --avalon-tinta: #232323;
  --avalon-gris: #767676;
}

.avalon-contacto {
  padding: calc(var(--avalon-nav-h, 132px) + 2.5rem) 0 3.5rem;
  background-color: #f5f8fc;
}

/* El degradado del hero viaja en --glow-base: .avalon-glow se declara mas
   abajo y con la propiedad background-image suelta lo borraria. */
.avalon-contacto.avalon-glow {
  --glow-base: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
}

.avalon-contacto .container,
.avalon-temas .container,
.avalon-cierre .container {
  max-width: 1100px;
}

.avalon-contacto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 3rem;
  align-items: center;
}

.avalon-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(66, 132, 223, .1);
  color: var(--avalon-azul);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.avalon-contacto h1 {
  margin: 0 0 1rem;
  color: var(--avalon-tinta);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.15;
}

.avalon-contacto h1 em {
  color: var(--avalon-azul);
  font-style: normal;
}

.avalon-lead {
  margin: 0 0 1.75rem;
  color: var(--avalon-gris);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
}

/* --- Lista de lo que se lleva quien escribe --- */
.avalon-checks {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.avalon-checks li {
  position: relative;
  padding: 0 0 0 2rem;
  margin-bottom: .7rem;
  color: var(--avalon-tinta);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* La palomita va como fondo para no ensuciar el HTML con un SVG por linea */
.avalon-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background-color: var(--avalon-azul);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: .7rem;
}

/* --- Botones --- */
.avalon-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 1rem;
}

.avalon-btn-wa,
.avalon-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 54px;
  padding: .9rem 1.6rem;
  border-radius: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

.avalon-btn-wa {
  background: var(--avalon-wa);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, .35);
}

.avalon-btn-wa:hover,
.avalon-btn-wa:focus-visible {
  background: var(--avalon-wa-oscuro);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37, 211, 102, .45);
}

.avalon-btn-ghost {
  background: #fff;
  color: var(--avalon-azul) !important;
  border: 2px solid rgba(66, 132, 223, .35);
}

.avalon-btn-ghost:hover,
.avalon-btn-ghost:focus-visible {
  border-color: var(--avalon-azul);
  background: rgba(66, 132, 223, .06);
  color: var(--avalon-azul) !important;
}

.avalon-btn-wa svg,
.avalon-btn-ghost svg {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

.avalon-cta-note {
  margin: 0;
  color: var(--avalon-gris);
  font-size: .9375rem;
}

/* --- Tarjeta lateral con los datos --- */
.avalon-contacto-card {
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(35, 35, 35, .12);
}

/* La foto es vertical (564x845) y el Angel ocupa la mitad de arriba. Con una
   altura fija en pixeles la ventana de recorte cambiaba de proporcion segun el
   ancho de la tarjeta y le cortaba la cabeza. Con aspect-ratio la ventana
   siempre es la misma y object-position la sube para dejar la estatua completa. */
.avalon-contacto-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 12%;
}

.avalon-contacto-datos {
  padding: 1.5rem 1.5rem 1.75rem;
}

.avalon-contacto-datos h2 {
  margin: 0 0 1.1rem;
  color: var(--avalon-tinta);
  font-size: 1.125rem;
  font-weight: 800;
}

.avalon-dato {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1rem;
}

.avalon-dato:last-child {
  margin-bottom: 0;
}

.avalon-dato-icono {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9px;
  background: rgba(66, 132, 223, .1);
  color: var(--avalon-azul);
}

.avalon-dato-icono svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.avalon-dato-texto {
  min-width: 0;
}

.avalon-dato-rotulo {
  display: block;
  color: var(--avalon-gris);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.avalon-dato-valor {
  display: block;
  color: var(--avalon-tinta);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

a.avalon-dato-valor:hover,
a.avalon-dato-valor:focus-visible {
  color: var(--avalon-azul);
}

/* --- Tarjetas por tema: cada una abre WhatsApp con el mensaje ya escrito --- */
.avalon-temas {
  padding: 3.5rem 0;
  background-color: #fff;
}

.avalon-temas-encabezado {
  margin-bottom: 2.25rem;
  text-align: center;
}

.avalon-temas-encabezado h2 {
  margin: 0 0 .6rem;
  color: var(--avalon-tinta);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 800;
}

.avalon-temas-encabezado p {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--avalon-gris);
  font-size: 1.0625rem;
}

.avalon-temas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.15rem;
}

.avalon-tema {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.35rem 1.5rem;
  border: 1px solid #e6ecf3;
  border-radius: 14px;
  background: #fff;
  color: inherit !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}

.avalon-tema:hover,
.avalon-tema:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(66, 132, 223, .35);
  box-shadow: 0 16px 32px rgba(35, 35, 35, .12);
}

.avalon-tema-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .9rem;
  border-radius: 10px;
  background: rgba(66, 132, 223, .12);
  color: var(--avalon-azul);
}

.avalon-tema-icono svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.avalon-tema h3 {
  margin: 0 0 .4rem;
  color: var(--avalon-tinta);
  font-size: 1.0625rem;
  font-weight: 800;
}

.avalon-tema p {
  margin: 0 0 1rem;
  color: var(--avalon-gris);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.avalon-tema .avalon-tema-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  color: var(--avalon-wa-oscuro);
  font-size: .9375rem;
  font-weight: 700;
}

.avalon-tema .avalon-tema-cta svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

/* --- Franja de cierre --- */
/* El degradado azul de borde a borde competia con el boton verde y con el
   resto del sitio. Queda un azul tinta plano -que ademas entra bien en el
   pie negro- y el color aparece solo con el resplandor del cursor. */
.avalon-cierre {
  padding: 3.25rem 0;
  background-color: #14243d;
  color: #fff;
  text-align: center;
}

/* Sobre el azul tinta el resplandor necesita mas fuerza que sobre el blanco.
   Va con las dos clases porque .avalon-glow se declara mas abajo y con un
   solo nombre de clase ganaria por orden. */
.avalon-cierre.avalon-glow {
  --glow-op-1: .55;
  --glow-op-2: .32;
}

.avalon-cierre h2 {
  margin: 0 0 .75rem;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 800;
}

.avalon-cierre p {
  margin: 0 auto 1.75rem;
  max-width: 40rem;
  color: rgba(255, 255, 255, .92);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.avalon-cierre .avalon-btn-wa {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.avalon-cierre .avalon-cta-note {
  margin-top: 1rem;
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 991px) {
  .avalon-contacto-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  /* A una columna la tarjeta se iria a todo el ancho y la foto quedaria
     enorme; se limita y se centra para conservar la misma proporcion. */
  .avalon-contacto-card {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575px) {
  .avalon-contacto {
    padding-top: calc(var(--avalon-nav-h, 65px) + 1.5rem);
    padding-bottom: 2.5rem;
  }

  /* En el telefono el boton de WhatsApp se iba debajo del pliegue: se sube
     justo despues del parrafo de entrada y la lista de beneficios pasa
     abajo, que es donde de verdad se lee. */
  .avalon-contacto-copy {
    display: flex;
    flex-direction: column;
  }

  .avalon-eyebrow { order: 1; margin-bottom: .75rem; font-size: .75rem; }
  .avalon-contacto h1 { order: 2; font-size: 1.65rem; line-height: 1.2; }
  .avalon-lead { order: 3; margin-bottom: 1.35rem; font-size: 1rem; line-height: 1.55; }
  .avalon-cta-row { order: 4; }
  .avalon-cta-note { order: 5; }
  .avalon-checks { order: 6; margin: 1.6rem 0 0; }
  .avalon-checks li { font-size: 1rem; }

  /* El correo se partia a la mitad de la palabra en la tarjeta */
  .avalon-dato-valor { font-size: 1rem; }

  /* En movil los botones ocupan todo el ancho: son el objetivo de la pagina */
  .avalon-cta-row {
    flex-direction: column;
  }

  .avalon-btn-wa,
  .avalon-btn-ghost,
  .avalon-cierre .avalon-btn-wa {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   9. FRANJA DE PILARES (paginas de servicio)
   Las cuatro paginas de servicio terminaban en tarjetas blancas sobre fondo
   blanco y sin ninguna llamada a la accion. Esta franja oscura corta la
   pagina, destaca los tres servicios que hoy se piden mas -atencion por
   WhatsApp, IA conversacional y desarrollo a la medida- y manda a WhatsApp.
   Reutiliza .avalon-btn-wa, .avalon-eyebrow y .avalon-cta-note de la seccion 8.
   -------------------------------------------------------------------------- */
/* --- Motor del resplandor que sigue al cursor -----------------------------
   Las dos franjas (pilares y cierre) iban con un azul saturado de borde a
   borde que se salia del resto del sitio, mucho mas sobrio. Ahora el fondo
   queda plano y el color solo aparece donde esta el cursor: dos circulos muy
   difuminados -el azul de marca y el verde de WhatsApp- que se mueven con el
   raton y se desvanecen al salir de la franja.
   Aqui vive el dibujado; cada franja solo declara sus colores y su base.
     --gx / --gy   posicion del cursor dentro de la franja, en px. La escribe
                   avalon-custom.js; sin JS se quedan en el centro.
     --avalon-glow 0 = apagado, 1 = encendido. Se registra con @property para
                   poder animarlo; los navegadores que no soporten @property
                   hacen el cambio sin transicion y se sigue viendo bien.
   -------------------------------------------------------------------------- */
@property --avalon-glow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.avalon-glow {
  --gx: 50%;
  --gy: 45%;
  --avalon-glow: 0;
  --glow-1: 66, 132, 223;  /* #4284df, azul de marca */
  --glow-2: 37, 211, 102;  /* #25d366, verde de WhatsApp */
  /* Valores de fondo, para las secciones de contenido. Las dos franjas
     destacadas (pilares y cierre) los suben mas abajo. */
  --glow-op-1: .26;
  --glow-op-2: .15;
  transition: --avalon-glow .45s ease;
  background-image:
    radial-gradient(circle 520px at var(--gx) var(--gy),
      rgba(var(--glow-1), calc(var(--glow-op-1) * var(--avalon-glow))) 0%,
      rgba(var(--glow-1), 0) 62%),
    radial-gradient(circle 640px at calc(var(--gx) + 10%) calc(var(--gy) + 14%),
      rgba(var(--glow-2), calc(var(--glow-op-2) * var(--avalon-glow))) 0%,
      rgba(var(--glow-2), 0) 60%),
    var(--glow-base, none);
}

@media (hover: hover) {
  .avalon-glow:hover {
    --avalon-glow: 1;
  }
}

/* En telefono no hay cursor que seguir: se deja encendido y centrado */
@media (hover: none) {
  .avalon-glow {
    --avalon-glow: .85;
  }
}

/* Quien pide menos movimiento ve el resplandor fijo, sin seguimiento */
@media (prefers-reduced-motion: reduce) {
  .avalon-glow {
    --avalon-glow: .85;
    transition: none;
  }
}

.avalon-pilares {
  padding: 4rem 0;
  background-color: #f6f9fc;
  color: var(--avalon-tinta);
}

/* La franja de pilares es un alto en la pagina: lleva mas color que las
   secciones de contenido. Va con las dos clases para no depender del
   orden en que quedan declaradas. */
.avalon-pilares.avalon-glow {
  --glow-base: linear-gradient(180deg, #ffffff 0%, #eff4fa 100%);
  --glow-op-1: .38;
  --glow-op-2: .22;
}

.avalon-pilares .container {
  max-width: 1100px;
}

.avalon-pilares-head {
  max-width: 47rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* La franja dejo de ser oscura: la etiqueta vuelve al azul del tema.
   Se conserva el nombre de la clase para no tocar las cuatro paginas. */
.avalon-eyebrow-claro {
  background: #e8f1fb;
  color: var(--avalon-azul);
}

.avalon-pilares-head h2 {
  margin: 0 0 .85rem;
  color: var(--avalon-tinta);
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.22;
}

.avalon-pilares-head p {
  margin: 0;
  color: var(--avalon-gris);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.avalon-pilares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}

/* Mismo lenguaje que las tarjetas .features9 del resto de la pagina, pero
   con el blanco a 78% para que el resplandor del fondo se vea a traves. */
.avalon-pilar {
  padding: 1.65rem 1.5rem 1.75rem;
  border: 1px solid #e6ecf3;
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 1px 2px rgba(35, 35, 35, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.avalon-pilar:hover {
  transform: translateY(-3px);
  border-color: #4284df;
  box-shadow: 0 10px 24px rgba(35, 35, 35, .09);
}

.avalon-pilar-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 11px;
  /* Azul por omision; el de WhatsApp va en verde para que se reconozca */
  background: #e8f1fb;
  color: var(--avalon-azul);
  transition: background-color .18s ease, color .18s ease;
}

.avalon-pilar-icono.es-wa {
  background: rgba(37, 211, 102, .14);
  color: var(--avalon-wa-oscuro);
}

/* Al pasar el raton la placa se llena, igual que en .features9 */
.avalon-pilar:hover .avalon-pilar-icono {
  background: var(--avalon-azul-claro);
  color: #ffffff;
}

.avalon-pilar:hover .avalon-pilar-icono.es-wa {
  background: var(--avalon-wa);
  color: #ffffff;
}

.avalon-pilar-icono svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

.avalon-pilar h3 {
  margin: 0 0 .55rem;
  color: var(--avalon-tinta);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
}

.avalon-pilar p {
  margin: 0;
  color: var(--avalon-gris);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.avalon-pilar strong {
  color: var(--avalon-tinta);
  font-weight: 700;
}

.avalon-pilares-cta {
  margin-top: 2.35rem;
  text-align: center;
}

.avalon-pilares-cta .avalon-cta-note {
  margin-top: .9rem;
  color: var(--avalon-gris);
}

/* En las paginas de servicio la franja de cierre va pegada al pie */
.avalon-cierre + .cid-qRd3w87EFf,
.avalon-cierre + .cid-qRd3z7mJFF,
.avalon-cierre + .cid-qRd3BFhsmW,
.avalon-cierre + .cid-qRd3EyKyGE {
  margin-top: 0;
}

@media (max-width: 575px) {
  .avalon-pilares {
    padding: 2.75rem 0;
  }

  .avalon-pilares-head {
    margin-bottom: 1.85rem;
    text-align: left;
  }

  .avalon-pilar {
    padding: 1.35rem 1.25rem 1.45rem;
  }

  /* El boton de la franja ya se estira al 100% por la regla de la seccion 8 */
  .avalon-pilares-cta {
    text-align: left;
  }
}


/* --------------------------------------------------------------------------
   10. TIPOGRAFIA DE LOS BLOQUES PROPIOS
   El tema carga solo dos familias: Poppins para titulos (body, .display-1/2/5)
   y Roboto para el texto de las tarjetas (.display-7). Los bloques que
   agregamos heredaban Poppins tambien en los parrafos, asi que el cuerpo de
   texto no coincidia con el de las secciones de Mobirise. Aqui se alinean:
   titulos en Poppins, cuerpo en Roboto al mismo tamano y color del tema.
   No se agrega ninguna familia nueva.
   -------------------------------------------------------------------------- */
.avalon-lead,
.avalon-contacto-copy p,
.avalon-checks li,
.avalon-dato-rotulo,
.avalon-dato-valor,
.avalon-dato-texto,
.avalon-cta-note,
.avalon-temas-encabezado p,
.avalon-tema p,
.avalon-tour-sub,
.avalon-tour-meta,
.avalon-pilares-head p,
.avalon-pilar p,
.avalon-cierre p {
  font-family: 'Roboto', sans-serif;
}

/* Titulos de los bloques propios: la misma familia y el mismo peso que usa
   Mobirise en .display-2 / .display-5, para que no se note el corte. */
.avalon-contacto-copy h1,
.avalon-contacto-copy h2,
.avalon-temas-encabezado h2,
.avalon-tema h3,
.avalon-tour-title,
.avalon-pilares-head h2,
.avalon-pilar h3,
.avalon-cierre h2 {
  font-family: 'Poppins', sans-serif;
}

/* Los botones y las etiquetas si van en Poppins, igual que .btn del tema. */
.avalon-btn-wa,
.avalon-btn-ghost,
.avalon-eyebrow,
.avalon-tour-label,
.avalon-tour-cta {
  font-family: 'Poppins', sans-serif;
}


/* --------------------------------------------------------------------------
   11. TARJETAS DE LAS PAGINAS DE SERVICIO (features9)
   Las secciones generadas por Mobirise dejaban las tarjetas como texto suelto
   sobre el fondo de la seccion: sin borde, sin separacion entre ellas, con
   alturas distintas y con el icono como un glifo suelto de 3rem. Se les da
   superficie propia, altura pareja y el icono en una placa con el azul del
   tema. Colores unicamente de la paleta: #4284df, #1f5eb6, #e6ecf3, #e8f1fb,
   #232323 y #767676.
   -------------------------------------------------------------------------- */
.features9 .mbr-section-subtitle {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

/* Alturas parejas: por omision el tema las alinea arriba y quedan desiguales */
.features9 .media-container-row {
  align-items: stretch;
}

.features9 .card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  /* En las secciones con resplandor baja a 78% (ver mas abajo) */
  border: 1px solid #e6ecf3;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(35, 35, 35, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.features9 .card:hover {
  transform: translateY(-3px);
  border-color: #4284df;
  box-shadow: 0 10px 24px rgba(35, 35, 35, .09);
}

.features9 .card-box {
  flex-grow: 1;
}

/* Sobre una seccion con resplandor la tarjeta deja pasar el color del fondo,
   igual que las de la franja de pilares. */
.features9.avalon-glow .card {
  background: rgba(255, 255, 255, .78);
}

.features9.avalon-glow .card:hover {
  background: rgba(255, 255, 255, .92);
}

/* Las tarjetas de contacto y los recorridos 3D siguen el mismo criterio */
.avalon-temas.avalon-glow .avalon-tema,
.avalon-contacto.avalon-glow .avalon-contacto-card,
.header10.avalon-glow .avalon-tour-card {
  background-color: rgba(255, 255, 255, .82);
}

/* El icono pasa de glifo suelto a placa cuadrada con el azul del tema */
.features9 .card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  padding-bottom: 0 !important;
  border-radius: 12px;
  background: #e8f1fb;
  font-size: 1.6rem;
}

.features9 .card:hover .card-img {
  background: #4284df;
}

.features9 .card:hover .card-img .mbr-iconfont {
  color: #ffffff;
}

.features9 .card-img .mbr-iconfont {
  transition: color .18s ease;
}

.features9 .card-title {
  color: #232323;
}

/* En pantalla grande el tema pone las columnas pegadas (padding de la rejilla
   de Bootstrap); con superficie propia necesitan aire entre ellas. */
@media (min-width: 768px) {
  .features9 .card.col-md-4 {
    flex: 0 0 calc(33.3333% - 1.5rem);
    max-width: calc(33.3333% - 1.5rem);
    margin: 0 .75rem 1.5rem;
  }

  .features9 .card.col-md-6 {
    flex: 0 0 calc(50% - 1.5rem);
    max-width: calc(50% - 1.5rem);
    margin: 0 .75rem 1.5rem;
  }
}

@media (max-width: 767px) {
  .features9 .card {
    margin-bottom: 1.25rem;
  }
}

/* La primera seccion de /estrategia venia con 45px arriba y 15px abajo, muy
   apretada contra el pie de las tarjetas; se iguala a sus hermanas. */
.cid-qRcFirQiNx {
  padding-top: 70px;
  padding-bottom: 70px;
}


/* --------------------------------------------------------------------------
   12. BLOQUES DE TEXTO + IMAGEN DE /tecnologia (header10)
   Las tres secciones (Cloud, Ciberseguridad, Desarrollo a la medida) traian la
   foto a bordes rectos, el texto pegado arriba y colores propios de cada
   bloque (#000000, #464646, #efefef) distintos a los del resto del sitio.
   Se unifican con la tinta y el gris del tema y se centra el texto contra la
   imagen. Sin familias tipograficas nuevas.
   -------------------------------------------------------------------------- */
.header10 .media-container-row {
  align-items: center;
}

.header10 .mbr-figure img {
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(35, 35, 35, .12);
}

.header10 .mbr-section-title,
.header10 h2 {
  color: #232323;
}

.header10 .mbr-section-subtitle,
.header10 h3,
.header10 p {
  color: #767676;
}

/* La franja intermedia venia en #efefef; el resto del sitio alterna
   #ffffff / #f9f9f9. */
.cid-qRcOJNZYwN {
  background-color: #f9f9f9;
}

@media (max-width: 991px) {
  .header10 .media-container-row {
    align-items: stretch;
  }

  /* A una columna la foto iba antes que el texto en la seccion invertida */
  .cid-qRcOJNZYwN .media-container-row {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

/* En /tecnologia la tarjeta del recorrido 3D vive dentro de un .mbr-figure;
   la miniatura ya va recortada por la tarjeta y no debe llevar el redondeo ni
   la sombra de las fotos de estas secciones. */
.header10 .mbr-figure .avalon-tour-card img {
  border-radius: 0;
  box-shadow: none;
}