@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --header-color: #E0D1B6;
}

body {
  margin: 0;
  padding-top: 0;
}

* {
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
}


/* ========================================
   HEADER PUERTA DE ALCALÁ
======================================== */

.site-header {
  position: fixed !important;
  top: 0;
  left: 0;

  width: 100%;
  height: clamp(88px, 5vw, 100px);

  padding: 0 clamp(30px, 2.8vw, 60px);
  box-sizing: border-box;

  z-index: 9999 !important;

  display: flex;
  align-items: center;

  /* Sin backdrop-filter para evitar artefactos */
  background: rgba(22, 45, 36, 0.72);

  border-bottom: 1px solid rgba(224, 209, 182, 0.35);
}

/* Contenedor principal */

.header-container {
  width: 100%;
  height: 100%;

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

  align-items: center;
}

/* IZQUIERDA */

.header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  justify-self: start;

  gap: clamp(10px, 0.8vw, 18px);

  min-width: 0;
}


/* CENTRO */

.header-center {
  position: static;

  display: flex;
  align-items: center;
  justify-content: center;

  justify-self: center;

  transform: none;

  z-index: 3;
}


/* DERECHA */

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  justify-self: end;

  gap: clamp(8px, 0.65vw, 14px);

  min-width: 0;
}



/* ========================================
   LOGO
======================================== */

.header-logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-logo {
  display: block;

  width: auto;

  /* Crece proporcionalmente en pantallas grandes */
  height: clamp(52px, 3.3vw, 68px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.header-logo-link:hover .header-logo {
  opacity: 0.85;
}


/* ========================================
   HAMBURGUESA
======================================== */

button#menu-btn {
  appearance: none;

  padding: 0;
  margin: 0;

  background: transparent;
  border: none;
  box-shadow: none;

  display: flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;

  cursor: pointer;
}

.menu-icon {
  display: block;

  width: clamp(40px, 2.5vw, 50px);
  height: auto;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Hover únicamente sobre el icono que está visible */

body:not(.menu-open) #menu-btn:hover .menu-icon-open {
  opacity: 0.75;
}

body.menu-open #menu-btn:hover .menu-icon-close {
  opacity: 0.75;
}


/* ========================================
   BOTONES
======================================== */

.header-btn {
  height: clamp(34px, 2.25vw, 44px);

  padding-left: clamp(16px, 1.15vw, 24px);
  padding-right: clamp(16px, 1.15vw, 24px);

  box-sizing: border-box;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;

  border: 1px solid #E0D1B6;
  border-radius: 999px;

  background: transparent;

  color: #E0D1B6;

  font-family: 'Montserrat', sans-serif;

  /* También escala con la pantalla */
  font-size: clamp(10px, 0.68vw, 13px);

  font-weight: 400;
  line-height: 1;

  white-space: nowrap;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    opacity 0.3s ease;
}

.header-btn:hover {
  background-color: #E0D1B6;
  color: #40382E;
}


/* ========================================
   WHATSAPP
======================================== */

.header-whatsapp {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;

  margin-left: clamp(2px, 0.3vw, 7px);
}

.icon-whatsapp {
  display: block;

  width: clamp(27px, 1.8vw, 36px);
  height: auto;

  object-fit: contain;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.header-whatsapp:hover .icon-whatsapp {
  opacity: 0.75;
  transform: scale(1.05);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .site-header {
    height: 78px;
    padding: 0 20px;

    background: rgba(22, 45, 36, 0.72);
  }


  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


  .header-left {
    gap: 10px;
  }


  /*
    En móvil dejamos únicamente:
    menú + apartamentos + logo.
  */

  .header-left .header-btn:nth-of-type(2) {
    display: none;
  }


  .header-right {
    display: none;
  }


  .header-center {
    position: static;

    transform: none;

    margin-left: auto;
  }


  .header-logo {
    height: 45px;
  }


  .menu-icon {
    width: 36px;
  }


  .header-btn {
    height: 31px;

    padding: 0 13px;

    font-size: 9px;
  }

}

/* ========================================
   PANEL VIRTUAL TOUR
======================================== */

.virtual-tour-backdrop {
  position: fixed;
  inset: 0;

  z-index: 19990;

  background: rgba(0, 0, 0, 0);

  pointer-events: none;

  transition: background 0.5s ease;
}


/* Fondo clicable cuando abre */

.virtual-tour-backdrop.active {
  background: rgba(0, 0, 0, 0.08);

  pointer-events: auto;
}


/* ========================================
   PANEL
======================================== */

.virtual-tour-panel {
  position: fixed;

  top: 0;
  right: 0;

  width: clamp(420px, 30vw, 590px);
  height: 100dvh;

  z-index: 20000;

  display: grid;

  /*
    Imagen arriba + dos apartamentos
  */
  grid-template-rows:
    minmax(230px, 37vh)
    1fr
    1fr;

  background:
  radial-gradient(
    ellipse at 100% 100%,
    rgba(61, 170, 53, 0.55) 0%,
    rgba(61, 170, 53, 0.20) 25%,
    rgba(61, 170, 53, 0) 70%
  ),
  #162D24;

  transform: translateX(100%);

  visibility: hidden;
  pointer-events: none;

  transition:
    transform 0.75s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 0.75s;

  will-change: transform;

  overflow: hidden;
}


/* ABIERTO */

.virtual-tour-panel.active {
  transform: translateX(0);

  visibility: visible;
  pointer-events: auto;

  transition:
    transform 0.75s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s;
}


/* ========================================
   IMAGEN SUPERIOR
======================================== */

.tour-featured {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  display: flex;

  /* Texto abajo a la izquierda */
  justify-content: flex-start;
  align-items: flex-end;

  /* Padding del texto */
  padding: clamp(28px, 2.5vw, 50px);

  box-sizing: border-box;
}


.tour-featured img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
}


.tour-featured::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.15)
    );
}


.tour-featured span {
  position: relative;

  z-index: 2;

  color: #E0D1B6;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(30px, 2.2vw, 44px);

  font-weight: 300;

  line-height: 1;

  letter-spacing: 0.015em;
}


.tour-featured:hover img {
  transform: scale(1.035);
  filter: brightness(0.92);
}


/* ========================================
   APARTAMENTOS
======================================== */

.tour-apartment {
  position: relative;

  display: flex;
  align-items: center;

  padding: clamp(35px, 4vw, 70px);

  box-sizing: border-box;

  border-top: 1px solid rgba(224, 209, 182, 0.65);
}


.tour-apartment-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.tour-apartment h3 {
  margin: 0 0 10px;

  color: #E0D1B6;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(24px, 1.75vw, 34px);

  font-weight: 400;

  line-height: 1.1;
}


.tour-apartment p {
  margin: 0 0 20px;

  color: #E0D1B6;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(18px, 1.35vw, 26px);

  font-weight: 300;
}


/* Botón interno */

.tour-panel-btn {
  min-height: 38px;

  padding: 0 22px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  border: 1px solid #E0D1B6;
  border-radius: 999px;

  color: #E0D1B6;

  font-family: 'Montserrat', sans-serif;

  font-size: 11px;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}


.tour-panel-btn:hover {
  background: #E0D1B6;
  color: #162D24;
  transform: translateY(-2px);
}


/* ========================================
   ENTRADA DEL CONTENIDO
======================================== */

.virtual-tour-panel .tour-featured span,
.virtual-tour-panel .tour-apartment-content {
  opacity: 0;

  transform: translateX(30px);

  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


.virtual-tour-panel.active .tour-featured span {
  opacity: 1;
  transform: translateX(0);

  transition-delay: 0.25s;
}


.virtual-tour-panel.active .tour-apartment:nth-of-type(1)
.tour-apartment-content {
  opacity: 1;
  transform: translateX(0);

  transition-delay: 0.32s;
}


.virtual-tour-panel.active .tour-apartment:nth-of-type(2)
.tour-apartment-content {
  opacity: 1;
  transform: translateX(0);

  transition-delay: 0.39s;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .virtual-tour-panel {
    width: 100%;

    grid-template-rows:
      minmax(190px, 34vh)
      1fr
      1fr;
  }


  .tour-apartment {
    padding: 30px;
  }


  .tour-featured span {
    font-size: clamp(28px, 9vw, 40px);
  }


  .tour-apartment h3 {
    font-size: clamp(22px, 6vw, 30px);
  }

}


/* ========================================
   VIRTUAL TOUR - RESPONSIVE POR ALTURA
======================================== */

/* Pantallas con poca altura */
@media (max-height: 850px) and (min-width: 769px) {

  .virtual-tour-panel {
    grid-template-rows:
      minmax(160px, 32vh)
      1fr
      1fr;
  }

  .tour-featured {
    padding: clamp(20px, 3vh, 32px);
  }

  .tour-featured span {
    font-size: clamp(26px, 4vh, 38px);
  }

  .tour-apartment {
    padding:
      clamp(18px, 3vh, 32px)
      clamp(30px, 3vw, 50px);
  }

  .tour-apartment h3 {
    margin-bottom: clamp(4px, 0.8vh, 8px);
    font-size: clamp(20px, 3vh, 28px);
  }

  .tour-apartment p {
    margin-bottom: clamp(10px, 1.5vh, 16px);
    font-size: clamp(15px, 2.3vh, 21px);
  }

  .tour-panel-btn {
    min-height: 32px;
    padding: 0 18px;
    font-size: 10px;
  }
}


/* Pantallas todavía más bajitas */
@media (max-height: 650px) and (min-width: 769px) {

  .virtual-tour-panel {
    grid-template-rows:
      minmax(125px, 27vh)
      1fr
      1fr;
  }

  .tour-featured {
    padding: 18px 28px;
  }

  .tour-featured span {
    font-size: 25px;
  }

  .tour-apartment {
    padding: 14px 30px;
  }

  .tour-apartment h3 {
    margin-bottom: 4px;
    font-size: 19px;
  }

  .tour-apartment p {
    margin-bottom: 9px;
    font-size: 15px;
  }

  .tour-panel-btn {
    min-height: 29px;
    padding: 0 16px;
    font-size: 9px;
  }
}


/* ========================================
   MENÚ DESPLEGADO - PUERTA DE ALCALÁ
======================================== */

.menu-overlay {
  position: fixed;

  inset: 0;

  width: 100%;
  height: 100dvh;

  z-index: 9000;

  overflow: hidden;

  /*
    Fondo generado por código.
    Verde oscuro + iluminación verde inferior.
  */

 background:
  radial-gradient(
    ellipse at 100% 100%,
    rgba(61, 170, 53, 0.55) 0%,
    rgba(61, 170, 53, 0.20) 25%,
    rgba(61, 170, 53, 0) 70%
  ),
  #162D24;

  /*
    Estado cerrado:
    está debajo de la pantalla.
  */

  transform: translateY(100%);

  visibility: hidden;
  pointer-events: none;

  transition:
    transform 0.85s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 0.85s;

  will-change: transform;
}


/* ========================================
   MENÚ ABIERTO
======================================== */

.menu-overlay.active {
  transform: translateY(0);

  visibility: visible;
  pointer-events: auto;

  transition:
    transform 0.85s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s;
}


/* ========================================
   CONTENIDO
======================================== */

.menu-overlay-content {
  position: relative;

  width: 100%;
  height: 100%;

  box-sizing: border-box;

  padding:
    clamp(120px, 10vh, 190px)
    clamp(30px, 5vw, 90px)
    clamp(35px, 5vh, 70px);

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ========================================
   NAVEGACIÓN PRINCIPAL
======================================== */

.menu-nav {
  width: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: clamp(10px, 1.6vh, 24px);

  flex: 1;
}


/* Links */

.menu-main-link {
  position: relative;

  display: inline-block;

  color: #E0D1B6;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(20px, 2.1vw, 46px);

  font-weight: 400;

  line-height: 1.1;

  text-align: center;

  letter-spacing: 0;

  opacity: 0;

  transform: translateY(35px);

  transition:
    color 0.35s ease,
    letter-spacing 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
}


/* Línea animada */

.menu-main-link::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -6px;

  width: 0;
  height: 1px;

  background: #E0D1B6;

  transform: translateX(-50%);

  transition:
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;

  opacity: 0.7;
}


/* Hover */

.menu-main-link:hover {
  letter-spacing: 0.045em;

  transform: translateY(-2px);
}

.menu-main-link:hover::after {
  width: 100%;
}


/* ========================================
   ENTRADA ESCALONADA
======================================== */

.menu-overlay.active .menu-main-link {
  opacity: 1;
  transform: translateY(0);
}


.menu-overlay.active .menu-main-link:nth-child(1) {
  transition-delay: 0.24s;
}

.menu-overlay.active .menu-main-link:nth-child(2) {
  transition-delay: 0.29s;
}

.menu-overlay.active .menu-main-link:nth-child(3) {
  transition-delay: 0.34s;
}

.menu-overlay.active .menu-main-link:nth-child(4) {
  transition-delay: 0.39s;
}

.menu-overlay.active .menu-main-link:nth-child(5) {
  transition-delay: 0.44s;
}

.menu-overlay.active .menu-main-link:nth-child(6) {
  transition-delay: 0.49s;
}


/* ========================================
   LINKS SECUNDARIOS
======================================== */

.menu-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 5px;

  margin-top: clamp(18px, 3vh, 45px);

  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.menu-overlay.active .menu-secondary {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.58s;
}


.menu-secondary a {
  color: #E0D1B6;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(11px, 1.1vw, 21px);

  font-weight: 400;

  line-height: 1.35;

  transition:
    opacity 0.3s ease,
    letter-spacing 0.3s ease;
}


.menu-secondary a:hover {
  opacity: 0.6;
  letter-spacing: 0.03em;
}


/* ========================================
   REDES
======================================== */

.menu-social {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(18px, 1.5vw, 28px);

  margin-top: clamp(18px, 2.5vh, 40px);

  opacity: 0;
  transform: translateY(15px);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}


.menu-overlay.active .menu-social {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.66s;
}


.menu-social a {
  display: flex;
  justify-content: center;
  align-items: center;
}


.menu-social img {
  width: clamp(18px, 1.45vw, 28px);
  height: clamp(18px, 1.45vw, 28px);

  object-fit: contain;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}


.menu-social a:hover img {
  transform: translateY(-4px) scale(1.08);
  opacity: 0.7;
}


/* ========================================
   CAMBIO HAMBURGUESA → X
======================================== */

#menu-btn {
  position: relative;
  z-index: 10002;
}

/* HAMBURGUESA */

.menu-icon-open {
  position: relative;

  opacity: 1;
  visibility: visible;

  transform: rotate(0deg) scale(1);

  transition:
    opacity 0.25s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}


/* X */

.menu-icon-close {
  position: absolute;

  left: 50%;
  top: 50%;

  opacity: 0;
  visibility: hidden;

  transform:
    translate(-50%, -50%)
    rotate(-45deg)
    scale(0.7);

  transition:
    opacity 0.25s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.25s;
}


/* ========================================
   MENÚ ABIERTO
======================================== */

body.menu-open .menu-icon-open {
  opacity: 0;
  visibility: hidden;

  transform:
    rotate(45deg)
    scale(0.7);

  transition:
    opacity 0.2s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.2s;
}


body.menu-open .menu-icon-close {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(1);

  transition:
    opacity 0.25s ease 0.1s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    visibility 0s;
}


/* Hover hamburguesa */

body:not(.menu-open) #menu-btn:hover .menu-icon-open {
  opacity: 0.7;
}


/* Hover X */

body.menu-open #menu-btn:hover .menu-icon-close {
  opacity: 0.7;
}


/* ========================================
   HEADER CUANDO EL MENÚ ESTÁ ABIERTO
======================================== */

/* ========================================
   BOTONES HEADER - SALIDA HACIA ARRIBA
======================================== */

.header-left .header-btn,
.header-right .header-btn {
  transform: translateY(0);

  opacity: 1;
  visibility: visible;

  transition:
    transform 0.65s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s;
}


/* MENÚ ABIERTO */

body.menu-open .header-left .header-btn,
body.menu-open .header-right .header-btn {
  transform: translateY(-110px);

  /*
    No cambiamos opacity.
    El botón físicamente sale por arriba.
  */
  opacity: 1;

  pointer-events: none;

  /*
    Lo escondemos solamente DESPUÉS
    de terminar la animación.
  */
  visibility: hidden;

  transition:
    transform 0.65s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 0.65s;
}

/* ========================================
   STAGGER BOTONES HEADER
======================================== */

/* IZQUIERDA */

body.menu-open .header-left .header-btn:nth-of-type(1) {
  transition-delay: 0s, 0.65s;
}

body.menu-open .header-left .header-btn:nth-of-type(2) {
  transition-delay: 0.06s, 0.71s;
}


/* DERECHA */

body.menu-open .header-right .header-btn:nth-of-type(1) {
  transition-delay: 0s, 0.65s;
}

body.menu-open .header-right .header-btn:nth-of-type(2) {
  transition-delay: 0.04s, 0.69s;
}

body.menu-open .header-right .header-btn:nth-of-type(3) {
  transition-delay: 0.08s, 0.73s;
}


/*
  WhatsApp permanece.
*/

body.menu-open .header-whatsapp {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


/*
  Header sin fondo porque el overlay
  ya ocupa toda la pantalla.
*/

body.menu-open .site-header {
  background: transparent;

  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  border-bottom-color: transparent;
}

/* ========================================
   HEADER POR ENCIMA DEL OVERLAY
======================================== */

.header-container {
  position: relative;
  z-index: 10001;
}


/* El fondo del menú pasa por debajo */

.menu-overlay {
  z-index: 9000;
}


/* Mantener activos los elementos superiores */

body.menu-open #menu-btn,
body.menu-open .header-center,
body.menu-open .header-whatsapp {
  position: relative;
  z-index: 10002;
}



/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .menu-overlay-content {
    padding:
      120px
      25px
      30px;
  }


  .menu-nav {
    gap: clamp(14px, 2vh, 22px);
  }


  .menu-main-link {
    font-size: clamp(25px, 7.3vw, 36px);
  }


  .menu-secondary a {
    font-size: clamp(12px, 3.8vw, 16px);
  }


  .menu-social img {
    width: 23px;
    height: 23px;
  }

}



/* ========================================
   FOOTER PUERTA DE ALCALÁ
======================================== */

.site-footer {
  position: relative;

  width: 100%;

  box-sizing: border-box;

  padding:
    clamp(45px, 4vw, 80px)
    clamp(40px, 4vw, 80px)
    clamp(20px, 2vw, 35px);

  overflow: hidden;

  color: #F5E8D1;

  font-family: 'Montserrat', sans-serif;

  background:
    radial-gradient(
      ellipse at 30% 120%,
      rgba(61, 170, 53, 0.35) 0%,
      rgba(61, 170, 53, 0.12) 32%,
      rgba(61, 170, 53, 0) 65%
    ),
    #162D24;
}


/* ========================================
   FILA SUPERIOR
======================================== */

.footer-top {
  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1.5fr;

  align-items: start;

  gap: 40px;
}


/* ========================================
   INFORMACIÓN
======================================== */

.footer-info {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
}


.footer-info p {
  margin: 0;

  color: #F5E8D1;

  font-family: 'Montserrat', sans-serif;
}


.footer-label {
  margin-bottom: 18px !important;

  font-size: clamp(9px, 0.95vw, 16px);

  font-weight: 500;
}


.footer-address {
  font-size: clamp(10px, 0.85vw, 16px);

  font-weight: 400;

  line-height: 1.35;
}


.footer-hours {
  margin-top: 18px !important;

  font-size: clamp(9px, 0.85vw, 16px);

  font-weight: 400;
}



/* ========================================
   REDES
======================================== */

.footer-social {
  display: flex;

  align-items: center;

  gap: clamp(20px, 2vw, 30px);

  margin-top: clamp(20px, 2vw, 30px);
}


.footer-social a {
  display: flex;

  justify-content: center;
  align-items: center;
}


.footer-social img {
  width: clamp(20px, 1.7vw, 28px);
  height: clamp(20px, 1.7vw, 28px);

  object-fit: contain;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


.footer-social a:hover img {
  opacity: 0.65;

  transform: translateY(-3px);
}


/* ========================================
   TELÉFONO
======================================== */

.footer-phone {
  display: flex;

  justify-content: flex-end;

  align-items: flex-start;
}


.footer-phone a {
  color: #F5E8D1;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(44px, 5vw, 92px);

  font-weight: 700;

  line-height: 0.95;

  letter-spacing: -0.03em;

  white-space: nowrap;

  transition:
    opacity 0.3s ease;
}


.footer-phone a:hover {
  opacity: 0.7;
}


/* ========================================
   FILA MEDIA
======================================== */

.footer-middle {
  width: 100%;

  margin-top: clamp(70px, 4vw, 160px);

  display: grid;

  grid-template-columns: 1fr 1.5fr;

  align-items: end;

  gap: 40px;
}


/* ========================================
   BROCHURE
======================================== */

.footer-download {
  display: flex;

  align-items: flex-end;
}


.download-link {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #F5E8D1;
}


.download-icon {
  width: clamp(28px, 2.3vw, 42px);

  height: auto;
}


.download-link > div {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.download-link span {
  color: #F5E8D1;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(9px, 0.65vw, 12px);

  font-weight: 400;
}


.download-link:hover {
  opacity: 0.7;
}


/* ========================================
   PARTNERS
======================================== */

.footer-partners {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  gap: clamp(35px, 3vw, 60px);

  width: 100%;
}


.footer-partner {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
  flex: 0 0 auto;
}


.footer-partner p {
  
  color: #F5E8D1;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(9px, 0.85vw, 16px);

  font-weight: 400;
}


.footer-partner img {
  display: block;

  width: auto;

  max-width: clamp(110px, 15vw, 240px);
  max-height: clamp(35px, 6vw, 100px);

  object-fit: contain;
}

/* ========================================
   NOTA LEGAL
======================================== */

.footer-legal{

  font-size: clamp(8px, 0.6vw, 14px);

  font-weight: 300;

   width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


.footer-legal-wrapper {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  justify-content: center;

  margin-top: 20px;
}


/* ========================================
   SEPARADOR
======================================== */

.footer-divider {
  width: 100%;

  height: 1px;

  margin-top: clamp(45px, 2vw, 75px);

  background: rgba(245, 232, 209, 0.85);
}


/* ========================================
   BOTTOM
======================================== */

.footer-bottom {
  width: 100%;

  padding-top: clamp(15px, 1.5vw, 25px);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;
}


.footer-bottom p {
  margin: 0;

  color: #F5E8D1;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(8px, 0.6vw, 11px);

  font-weight: 400;
}


.footer-bottom a {
  color: #F5E8D1;

  transition: opacity 0.3s ease;
}


.footer-bottom a:hover {
  opacity: 0.65;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

  .footer-phone a {
    font-size: clamp(38px, 5.5vw, 60px);
  }


  .footer-middle {
    margin-top: 90px;
  }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .site-footer {
    padding:
      50px
      20px
      25px;
  }


  .footer-top {
    display: flex;

    flex-direction: column;

    gap: 55px;
  }


  .footer-phone {
    width: 100%;

    justify-content: flex-start;
  }


  .footer-phone a {
    font-size: clamp(34px, 10vw, 48px);

    white-space: normal;
  }


  .footer-middle {
    margin-top: 70px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 60px;
  }


  .footer-partners {
  width: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: flex-end;

  gap: 25px;
}


  .footer-partner p {
    margin-bottom: 20px;

    font-size: 9px;
  }


  .footer-partner img {
    max-width: 120px;
    max-height: 45px;
  }


  .footer-divider {
    margin-top: 50px;
  }


  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
  }


  .footer-bottom p {
    font-size: 9px;
  }

}




/* =========================
   FLOATING WHATSAPP
========================= */

.floating-whatsapp-btn {
  position: fixed;
  right: 28px;
  bottom: 28px;

  width: 68px;
  height: 68px;

  border-radius: 50%;
  background: #3DAA35;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1200;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.22),
    0 0 0 rgba(255, 255, 255, 0.6);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  animation:
    whatsappFloat 3s ease-in-out infinite,
    whatsappPulse 2.8s infinite;
}

.floating-whatsapp-btn:hover {
  transform: translateY(-4px) scale(1.06);

  box-shadow:
    0 14px 36px rgba(0,0,0,0.26),
    0 0 28px rgba(255, 255, 255, 0.55);
}

.floating-whatsapp-btn img {
  width: 34px;
  height: 34px;
  display: block;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes whatsappPulse {

  0% {
    box-shadow:
      0 10px 30px rgba(0,0,0,0.22),
      0 0 0 0 rgba(255, 255, 255, 0.55);
  }

  70% {
    box-shadow:
      0 10px 30px rgba(0,0,0,0.22),
      0 0 0 18px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow:
      0 10px 30px rgba(0,0,0,0.22),
      0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes whatsappFloat {

  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 640px) {

  .floating-whatsapp-btn {
    width: 58px;
    height: 58px;

    right: 18px;
    bottom: 18px;
  }

  .floating-whatsapp-btn img {
    width: 30px;
    height: 30px;
  }
}