/* ======================================================================= */
/*   1. FLECHAS “Previous Photo” / “Next Photo” (anita-gallery-nav__)        */
/* ======================================================================= */
/* 1.1. Vamos a sacarlas del centro vertical y bajarlas. */
.anita-gl-slider-gallery .anita-gallery-nav__prev,
.anita-gl-slider-gallery .anita-gallery-nav__next {
  /* Anulamos el top:50% y left/right por defecto */
  top: auto !important;
  bottom: 265px !important;  /* Separadas 100px del fondo (ajustable) */
}

/* 1.2. Reubicamos cada flecha un poco hacia la derecha */
.anita-gl-slider-gallery .anita-gallery-nav__prev {
  right: 100px !important;  /* A 180px del borde derecho del viewport */
  left: auto !important;
}
.anita-gl-slider-gallery .anita-gallery-nav__next {
  right: 50px !important;  /* A 140px del borde derecho */
}

/* 1.3. Reducir un poco el tamaño del botón circular y la flecha interna */
.anita-gl-slider-gallery .anita-gallery-nav {
  width: 40px !important;    /* de 64px a 40px */
  height: 40px !important;   /* de 64px a 40px */
}
.anita-gl-slider-gallery .anita-gallery-nav::before {
  font-size: 18px !important; /* en vez de 24px */
}

/* 1.4. Las etiquetas (“Previous Photo” / “Next Photo”) haremos que aparezcan al hover en pequeño */
.anita-gl-slider-gallery .anita-gallery-nav span {
  font-size: 10px !important;   /* más pequeño */
  /* Por defecto están en opacity:0; se mostrarán al hover según reglas existentes. */
}

/* ======================================================================= */
/*   2. “Volver al listado de proyectos”  +  “Pueblo Serena”                */
/* ======================================================================= */
/* Actualmente .anita-fixed-album-title está en left:0; bottom:0; width:100%. */
/* Lo movemos abajo–derecha. */
.anita-fixed-album-title {
  left: auto !important;       /* ya no quede pegado al left:0 */
  right: 50px !important;     /* a 250px del borde derecho, ajustable */
  bottom: 133px !important;     /* 80px sobre el footer, para que quede justo encima de las redes */
  padding-left: 0      !important;  /* anulamos el padding-left:28px */
  text-align: right   !important;   /* alineamos el contenido a la derecha */
  width: auto         !important;   /* ajustamos al ancho del contenido, no 100% */
  max-width: 390px    !important;   /* opcional: límite máximo para que no se extienda demasiado */
}

.anita-fixed-album-title .anita-album-title {
    display: block;
    margin: 0 !important;
}

/* 2.1. Reducir la fuente del título y del “volver” */
.anita-fixed-album-title .anita-page-title {
  font-size: 22px !important;    /* por defecto era más grande. Ajusta a tu gusto. */
  line-height: 1.2            !important;
}
.anita-fixed-album-title .anita-albums-back {
  font-size: 13px !important;     /* más pequeño que el original */
  padding-top: 13px;

  /*line-height: 1.2 !important;*/
}




/*Alineacion correcta a la derecha*/
.anita-fixed-album-title .anita-album-title {
    text-align: right;
}

.anita-fixed-album-title .anita-post-meta {
    display: block;
    text-align: right;
    width: 100%;
}




/* 2.2. El pequeño meta (Desarrollo Comercial · En colaboración…) */
.anita-fixed-album-title .anita-post-meta {
  font-size: 10px !important;  /* más pequeño */
  margin-top: 2px         !important;
}

/* ======================================================================= */
/*   3. “Prev Project” / “Next Project” (anita-album-nav-prev / -next)     */
/* ======================================================================= */
/* Estas dos por defecto tienen: position:absolute; bottom:170px; left:50px / right:50px. */
/* Las bajamos al mismo nivel que el título y las acercamos a la derecha. */
.anita-album-nav-prev,
.anita-album-nav-next {
  top: auto    !important;
  bottom: 60px !important;  /* el mismo bottom que el título */
}

/* 3.1. Reposicionamos cada una moviéndolas hacia la derecha */
.anita-album-nav-prev {
  right: 420px !important;  /* a 420px del borde derecho, para que quede a la izquierda del “volver al listado”. */
  left: auto   !important;
}
.anita-album-nav-next {
  right: 50px !important;  /* a 350px del borde derecho, justo a la izquierda de Prev Project */
}

/* 3.2. Reducir el texto “Prev Project” / “Next Project” */
.anita-album-nav-prev span,
.anita-album-nav-next span {
  font-size: 13px !important;   /* de ~14px a 10px */
  line-height: 1.2            !important;
}

/* 3.3. Ajustar tamaño de la miniatura de fondo (anita-data-background) */
.anita-album-nav-prev .anita-data-background,
.anita-album-nav-next .anita-data-background {
  width: 40px !important;   /* de 64px a 40px */
  height: 40px !important;  /* de 64px a 40px */
}




.anita-prev-album-link,
.anita-next-album-link {
    height: 40px;
    opacity: 0.7;
}


.anita-next-album-link::before {
    background: none;
}


.anita-next-album-link::after {
    content: '\f345';
    font-family: "dashicons";
    color: var(--anita-s-link);
    font-size: 20px;
    line-height: 1em;
    margin: 0 0 0 5px;
    display: flex;
    align-items: center;
    align-self: stretch;
  }


.anita-next-album-link .anita-data-background {
    right: 20px;
}




/* ===================================================================
   MENÚ “Tarjetas rectangulares con fondo fotográfico” 
   CON ESCALA DE GRISES
   =================================================================== */

.anita-fullscreen-menu-wrap nav.anita-nav {
  min-width: 65%
}

/* 1) Reset de la lista */
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 2) Separación entre ítems */
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li {
  margin-bottom: 11px;
}

/* 3) Estilo base de cada <a>: altura, tipografía, sombra de texto… */
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
  padding-right: 50px;
  font-family: var(--anita-t-heading-ff), sans-serif;
  font-size: 30px;
  font-weight: 500;
  text-decoration: none !important;
  color: #f5f5f5 !important;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  overflow: hidden;
  position: relative;background-size: cover;
  /*background-position: center center;*/

  /* —— Aquí aplicamos la ESCALA DE GRISES —— */
  filter: grayscale(100%) opacity(80%);
  transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;
}


/* Ítem activo siempre en color */
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li.current-menu-item > a {
  filter: grayscale(0%) opacity(100%) !important;
  box-shadow: inset 0 -3px 0 0 #162179;
}


/* 4) Hover: quitamos la escala y levantamos el bloque */
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li > a:hover {
  filter: grayscale(0%);
  transform: translateY(-3px);
}

/* 5) Flecha “→” al hacer hover */
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li > a::after {
  content: "→";
  position: absolute;
  right: 12px;
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  color: #fff;
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li > a:hover::after {
  opacity: 1;
  transform: translateX(2px);
}




/* 6) Asignación de la foto de fondo a cada ítem 
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(1) > a {
  background-image: url("../img/menu/inicio.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(2) > a {
  background-image: url("../img/menu/residencial-2.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(3) > a {
  background-image: url("../img/menu/desarrollos-5.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(4) > a {
  background-image: url("../img/menu/comercial-4.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(5) > a {
  background-image: url("../img/menu/corporativo2.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(6) > a {
  background-image: url("../img/menu/departamentos-2.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(7) > a {
  background-image: url("../img/menu/acerca-de.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(8) > a {
  background-image: url("../img/menu/contacto.jpg");
}
/* …continúa con más nth-child si tienes más items */



/* 6) Asignación de la foto de fondo a cada ítem */
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(1) > a {
  background-image: url("../img/menu/8.webp");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(2) > a {
  background-image: url("../img/menu/19.webp");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(3) > a {
  background-image: url("../img/menu/14.webp");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(4) > a {
  background-image: url("../img/menu/13.webp");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(5) > a {
  background-image: url("../img/menu/corporativo2.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(6) > a {
  background-image: url("../img/menu/2.webp");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(7) > a {
  background-image: url("../img/menu/inicio.jpg");
}
.anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li:nth-child(8) > a {
  background-image: url("../img/menu/15.webp");
}
/* …continúa con más nth-child si tienes más items */

/* 7) Responsive: altura y texto reducidos en móvil */
@media (max-width: 767px) {

  .anita-fullscreen-menu-wrap nav.anita-nav {
    min-width: 95%
  }  
  .anita-fullscreen-menu-wrap nav.anita-nav {
    padding: 0 16px;
  }
  .anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li > a {
    height: 80px;
    font-size: 38px;
    padding-right: 30px;
  }
  .anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li {
    margin-bottom: 8px;
  }
  .anita-fullscreen-menu-wrap nav.anita-nav ul.main-menu > li > a::after {
    font-size: 16px;
    right: 8px;
  }
}




/* ======================================================================= */
/*   4. ToolTipCorrection          */
/* ======================================================================= */
.anita-gallery-nav__prev span {
    right: 100%;
    padding-right: 20px;
    padding-bottom: 70px;
}
.anita-gallery-nav__next span {
      padding-bottom: 70px;  
}






/* ======================================================================= */
/*   4. OPCIONAL: Ajustes para responsive (pantallas pequeñas)             */
/* ======================================================================= */
/* En móviles, quizás convenga ocultar o agrupar de forma diferente. */
/* Por ejemplo: si el viewport < 768px, los “Prev/Next” podrían desaparecer. */
@media (max-width: 767px) {
  /* Ocultamos flechas de foto (para no tapar contenido) 
  .anita-gl-slider-gallery .anita-gallery-nav__prev,
  .anita-gl-slider-gallery .anita-gallery-nav__next {
    display: none !important;
  }*/
  /* Reducimos aún más el título y el “Volver” */
  .anita-fixed-album-title {
    /*bottom: 60px !important;*/
    right: 20px !important;
    max-width: 320px !important;
  }


/* 1.2. Reubicamos cada flecha un poco hacia la derecha */
.anita-gl-slider-gallery .anita-gallery-nav__prev {
  right: 88px !important;  /* A 180px del borde derecho del viewport */
  left: auto !important;
}
.anita-gl-slider-gallery .anita-gallery-nav__next {
  right: 38px !important;  /* A 140px del borde derecho */
}

  .anita-fixed-album-title .anita-page-title {
    font-size: 18px !important;
  }
  .anita-fixed-album-title .anita-albums-back {
    font-size: 10px !important;
  }
  /* Ocultamos Prev/Next Project 
  .anita-album-nav-prev,
  .anita-album-nav-next {
    display: none !important;
  }*/
.anita-album-nav-prev,
.anita-album-nav-next {
  top: auto    !important;
  bottom: 65px !important;  /* el mismo bottom que el título */
  display: flex !important;
}


}




/* ============================================================================
   BOTÓN “Ver detalles” en la galería
   ----------------------------------------------------------------------------
   Convierte el span.anita-gl-gallery__explore en un botón atractivo y clicable
   dentro de .anita-gl-gallery-item__content
   ============================================================================ */

/* 1) Aseguramos que el contenedor permita clicks */
.anita-gl-gallery-item.is-active .anita-gl-gallery-item__content {
  pointer-events: auto;  /* permite que sus hijos reciban eventos */
  position: relative;    /* para el z-index */
  z-index: 2;
}

.anita-gl-gallery-item, .anita-carousel-gallery-captions li {
  padding-bottom: 100px;
}

/* 2) Estilo base del botón */
.anita-gl-gallery__explore, .anita-gallery__explore {
  display: inline-block;
  margin-top: 6px;                        /* separa del título */
  padding: 6px 16px;                      /* genera forma de botón */
  color: #ffffff;                         /* texto blanco */
  background-color: rgba(255,255,255,0.15);/* fondo semitransparente */
  border: 2px solid #ffffff;              /* borde blanco */
  border-radius: 4px;                     /* esquinas redondeadas */
  font-family: var(--anita-t-heading-ff), sans-serif;
  font-size: 14px;                        /* tamaño legible */
  text-transform: uppercase;              /* opción estética */
  letter-spacing: 0.5px;
  text-decoration: none;                  /* quita subrayado si lo hubiera */
  transition: 
    background-color 0.3s ease, 
    color 0.3s ease, 
    transform 0.2s ease-in-out;
  pointer-events: auto;                   /* permite clics sobre el botón */
  position: relative;                     /* eleva sobre overlays */
  z-index: 3;
}
/* Flechita al final */
.anita-gl-gallery__explore::after, .anita-gallery__explore::after {
  content: "→";
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

/* 3) Hover / foco del botón */
.anita-gl-gallery__explore:hover,
.anita-gl-gallery__explore:focus, 
.anita-gallery__explore:hover,
.anita-gallery__explore:focus{
  background-color: #ffffff;              /* fondo blanco completo */
  color: #0d1b2a;                         /* texto carbón oscuro */
  transform: translateY(-2px);            /* ligero “lift” */
  outline: none;                          /* si no quieres contorno por defecto */
}

.anita-gl-gallery__explore:hover::after, .anita-gallery__explore:hover::after {
  transform: translateX(4px);            /* flecha se mueve hacia la derecha */
}

/* 4) Ajuste de accesibilidad: foco visible */
.anita-gl-gallery__explore:focus, .anita-gallery__explore:focus{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.6);  /* halo blanco sutil */
}

/* 5) Responsive (móvil): botón un poco más compacto */
@media (max-width: 767px) {
  .anita-gl-gallery__explore, .anita-gallery__explore {
    padding: 6px 12px;
    font-size: 12px;
  }
}


/* ============================================================================
   Hacer clic en “Ver detalles” pase al enlace subyacente
   ============================================================================ */

/* 1) El span “Ver detalles” no atrapa eventos */
.anita-gl-gallery__explore, .anita-gallery__explore{
  pointer-events: none;
  z-index: 1;  /* por debajo del enlace */
}

/* 2) Aseguramos que el <a> llene todo el área y reciba el clic */
.anita-gl-gallery-item__content > a.anita-album-link {
  pointer-events: all;  
  z-index: 2;           /* por encima del span */
}

/* ====================================================================
   Hover del botón “Ver detalles” vía el contenedor
   ==================================================================== */

/* 1) Aseguramos que el <span> siga sin atrapar eventos */
.anita-gl-gallery__explore, .anita-gallery__explore{
  pointer-events: none;                /* deja pasar el clic hacia el <a> */
  transition:                         /* añadimos transición si no la tenías */
    background-color 0.3s ease, 
    color 0.3s ease, 
    transform 0.2s ease-in-out;
}

/* 2) Al hacer hover sobre el contenedor, estilizamos el botón */
.anita-gl-gallery-item__content:hover .anita-gl-gallery__explore,
.anita-gl-gallery-item__content:focus-within .anita-gl-gallery__explore {
  background-color: #ffffff;           /* fondo blanco */
  color: #0d1b2a;                      /* texto carbón oscuro */
  transform: translateY(-2px);         /* ligero “lift” */
  opacity: 1;                          /* asegúrate de que no quede transparente */
}
/* 2) Al hacer hover sobre el contenedor, estilizamos el botón CARRUSEL PLANO*/
.anita-gallery-item__content:hover .anita-gallery__explore,
.anita-gallery-item__content:focus-within .anita-gallery__explore {
  background-color: #ffffff;           /* fondo blanco */
  color: #0d1b2a;                      /* texto carbón oscuro */
  transform: translateY(-2px);         /* ligero “lift” */
  opacity: 1;                          /* asegúrate de que no quede transparente */
}



/* 3) (Opcional) si quieres animar la flecha dentro del <span> */
.anita-gl-gallery-item__content:hover .anita-gl-gallery__explore::after,
.anita-gl-gallery-item__content:focus-within .anita-gl-gallery__explore::after {
  transform: translateX(4px);          /* mueve la flecha al hacer hover */
}

/* 4) Asegúrate de que el contenedor esté recibiendo pointer-events */
.anita-gl-gallery-item__content {
  pointer-events: auto;                /* para que capte hover y focus */
}





/*ESTILO FUENTE SOCIAL ICONS*/

.anita-socials--english{
  font-weight: bold;
}
.anita-socials--english::before,
.anita-socials--llamanos::before,
.anita-socials--contacto::before {
  content: "";
  display: inline-block;
  width: 1.2em;    /* igual que el tamaño de texto */
  height: 1.2em;
  margin-right: 0.5em;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  filter: invert(.9);
}

/* Globo antes de “English” */
.anita-socials--english::before {
  background-image: url("../img/svg/english.svg");
}

/* Teléfono antes del número */
.anita-socials--llamanos::before {
  background-image: url("../img/svg/phone-7.svg");
}

/* Sobre antes de “Contacto” */
.anita-socials--contacto::before {
  background-image: url("../img/svg/mail-4.svg");
}

/* Alineamiento y estilo común de los enlaces */
.anita-socials--english,
.anita-socials--llamanos,
.anita-socials--contacto {
  
  display: inline-flex;
  align-items: center;
  color: #E6E6E6;                 /* texto blanco */
  text-decoration: none;
  font-family: var(--anita-t-body-ff), sans-serif;
  font-size: 1em;
}




/* Fondo azul global (movil + desktop) */
:root{
  --anita-s-bg-body: #0c253f;
  --anita-s-overlay-gradient: linear-gradient(0deg, #0c253f 0%, #0c253f80 50%, #0c253f100 100%);
}

/* Extra: por si algun CSS lo pisa */
body{ background: var(--anita-s-bg-body) !important; }