/*
Theme Name: Estudio Latini
Theme URI: https://estudiolatini.ar
Author: Navega Mi Sitio
Author URI: https://navegamisitio.com.ar
Description: Tema personalizado para Estudio Latini, orientado a salud, farmacias y bienestar.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: estudiolatini
*/

/* ——————————————————————
   FONTS INCLUIDAS
———————————————————————— */
@font-face {
  font-family: 'AkgBebc';
  src: url('./fonts/akgbebc_.TTF') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'AkgBemc';
  src: url('./fonts/akgbemc_.TTF') format('truetype');
  font-style: normal;
}

/* ——————————————————————
   PALETA DE COLORES
———————————————————————— */
:root {
  --color-primary:        #367f48;
  --color-primary-light:  #8bb287;
  --color-secondary:      #00897B;
  --color-secondary-light:#4DB6AC;
  --color-accent:         #f9d857;
  --color-accent-dark:    #f9d857;
  --color-dark-gray:      #333333;
  --color-medium-gray:    #666666;
  --color-light-gray:     #DDDDDD;
  --color-white:          #FFFFFF;
  --color-black:          #000000;
  --color-foro-blue:      #439DCB;
  --color-foro-dark:      #357AB8;
}

/* ——————————————————————
   ESTILOS GENERALES
———————————————————————— */
body {
  font-family: 'Roboto', sans-serif;
  color: var(--color-dark-gray);
  background: var(--color-white);
  margin: 0;
  padding: 0;
}

h2 {
  color: var(--color-primary);
  font-weight: bold;
}

.navbar-collapse {
  text-align: center;
}

/* ——————————————————————
   APLICAR A TODOS LOS TÍTULOS
———————————————————————— */
h1, h2, h3, h4, h5, h6 {
  /* primero uso la versión normal, y si hay un título con font-weight:bold, cogerá la segunda */
  font-family: 'AkgBebc', 'AkgBemc', sans-serif !important;
  /* si quieres forzar negrita en todos: */
  /* font-weight: bold; */
  text-transform: uppercase;
}


p,
.card-text {
  color: var(--color-medium-gray);
  margin-bottom: 1rem;
}

/* ——————————————————————
   HEADER TRANSPARENTE
———————————————————————— */
header {
  background: transparent;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
header .site-header {
  padding: 10px 0;
}
.custom-logo,
.custom-logo-link {
  max-width: 250px;
  height: auto;
}

/* Footer – Estilo del menú */
footer .nav.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

footer .nav.footer-menu li {
  margin-right: 1.5rem;
}

footer .nav.footer-menu li:last-child {
  margin-right: 0;
}

footer .nav.footer-menu a {
  color: var(--color-black);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

footer .nav.footer-menu a:hover {
  color: var(--color-accent);
}

#gallery-modal.show { display:flex !important; }
#gallery-modal { display:none; }

/* ——————————————————————
   CAROUSEL / HERO SLIDER
———————————————————————— */
/* Fuerza al slider a ocupar 100vh */
.home-slider {
  height: 100vh;
  overflow: hidden;
}
.home-slider .carousel,
.home-slider .carousel-inner,
.home-slider .carousel-item {
  height: 100%;
}

.home-slider .carousel-item .ratio {
  height: 100%;
}

.home-slider .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay de caption con animaciones */
.home-slider .carousel-caption {
  position: absolute;
  top: 50%;
  left:inherit;
  transform: translateY(-50%);
  width: 70%;
  background: rgba(0, 0, 0, 0.7);
  padding: 2rem 1.5rem;
  border-radius: 0.5rem;
  /* aseguramos visibilidad */
  display: block !important;
}

/* Título grande con fade-in y slide-up */
.home-slider .carousel-caption h2 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out 0.2s,
              transform 0.8s ease-out 0.2s;
}

/* Texto descriptivo con delay extra */
.home-slider .carousel-caption p {
  max-width: 960px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-light-gray);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out 0.4s,
              transform 0.8s ease-out 0.4s;
}

/* Cuando el slide se activa, hacemos aparecer ambos */
.home-slider .carousel-item.active .carousel-caption h2,
.home-slider .carousel-item.active .carousel-caption p {
  opacity: 1;
  transform: translateY(0);
}

/* Controles e indicadores */
.home-slider .carousel-control-prev-icon,
.home-slider .carousel-control-next-icon {
  filter: invert(100%);
}
.home-slider .carousel-indicators {
  bottom: 1rem;
}
.home-slider .carousel-indicators button {
  background-color: var(--color-white);
  opacity: 0.7;
}
.home-slider .carousel-indicators .active {
  background-color: var(--color-foro-blue);
  opacity: 1;
}

/* Ajustes mobile */
@media (max-width: 767px) {
  .home-slider .carousel-caption {
    left: 5%;
    width: 90%;
    padding: 1rem;
  }
  .home-slider .carousel-caption h2 {
    font-size: 2.2rem;
  }
  .home-slider .carousel-caption p {
    font-size: 1rem;
  }
}

/* ——————————————————————
   SECCIÓN CONTACTO HOME
———————————————————————— */


/* Asegurar que .btn-primary sea siempre nuestro verde corporativo */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary-light) !important;
  color: var(--color-white) !important;
}

/* btn-outline-primary con verde corporativo */
.btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--color-white) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}


/* ——————————————————————
   TILES DE ACCESO
———————————————————————— */
#home-tiles .card {
  border: 1px solid var(--color-light-gray);
  border-radius: 8px;
  transition: transform 0.3s ease;
}
#home-tiles .card:hover {
  transform: translateY(-5px);
}
#home-tiles .card-title {
  color: var(--color-primary);
}
#home-tiles .card-body i {
  color: var(--color-primary);
}

/* ——————————————————————
   SECCIÓN “SOBRE NOSOTROS”
———————————————————————— */
#about h2 {
  margin-bottom: 1rem;
}
#about p {
  line-height: 1.6;
}

/* — Unidades dinámicas — */
.unidad-card {
  transition: transform 0.3s ease, filter 0.3s ease;
  background: var(--color-white);
}
.unidad-card:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.unidad-card .card-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.unidad-desc {
  color: var(--color-dark-gray);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  line-height: 1.4;
}

.farmalatini-hero {
  /* ajusta la ruta a tu imagen */
  background: 
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("./assets/img/hero-farmalatini.jpg") no-repeat center/cover;
  height: 60vh;          /* altura ajustable */
  min-height: 400px;
}

.farmalatini-hero h1 {
  color: var(--color-primary);
}

.farmalatini-hero p {
  color: rgba(255,255,255,0.9);
}

/* ——————————————————————
   SECCIÓN FORO (colores)
———————————————————————— */
.foro-section h2,
.foro-tabs .nav-link.active {
  color: var(--color-foro-blue);
}
.foro-section .card-img-top {
  border-bottom: 3px solid var(--color-foro-blue);
}
.foro-section .btn-load-more {
  background-color: var(--color-foro-blue);
  border-color: var(--color-foro-blue);
  color: var(--color-white);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.foro-section .btn-load-more:hover {
  background-color: var(--color-foro-dark);
  border-color: var(--color-foro-dark);
}

/* ——————————————————————
   FOOTER
———————————————————————— */
footer {
  background: var(--color-dark-gray);
  color: var(--color-white);
  padding: 20px 0;
}
footer .social-icons a {
  color: var(--color-white);
  margin-right: 1rem;
  font-size: 1.2rem;
}
footer .footer-nav .nav-link {
  color: var(--color-white);
  margin-left: 1rem;
  font-size: 0.9rem;
}
footer .footer-legal {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}
footer a:hover {
  color: var(--color-accent);
}

/* ——————————————————————
   Estilos específicos para la plantilla Foro
———————————————————————— */
body.page-template-page-foro {  
  /* Títulos h2 en color foro-dark */
}
body.page-template-page-foro h2,
body.page-template-page-foro .entry-title {
  color: var(--color-foro-dark) !important;
}

/* Botones sólidos */
body.page-template-page-foro .btn-primary,
body.page-template-page-foro .btn-secondary {
  background-color: var(--color-foro-dark) !important;
  border-color:     var(--color-foro-dark) !important;
  color:            var(--color-white)    !important;
}
body.page-template-page-foro .btn-primary:hover,
body.page-template-page-foro .btn-secondary:hover {
  background-color: var(--color-foro-blue)    !important;
  border-color:     var(--color-foro-blue)    !important;
}

/* Botones outline */
body.page-template-page-foro .btn-outline-primary,
body.page-template-page-foro .btn-outline-secondary {
  color:            var(--color-foro-dark) !important;
  border-color:     var(--color-foro-dark) !important;
  background-color: transparent            !important;
}
body.page-template-page-foro .btn-outline-primary:hover,
body.page-template-page-foro .btn-outline-secondary:hover {
  color:            var(--color-white)       !important;
  background-color: var(--color-foro-dark)  !important;
  border-color:     var(--color-foro-dark)  !important;
}

/* Reducir un poco el espacio entre campos */
.wpcf7-form .mb-2 {
  margin-bottom: 0.5rem;
}

/* Dar una altura cómoda al textarea sin estirarlo al 100% */
.wpcf7-form-control.wpcf7-textarea {
  min-height: 180px;
  max-height: 300px;
  resize: vertical;
}

/* Ajustar gutters en pantallas grandes aún más */
@media (min-width: 992px) {
  .wpcf7-form .gx-3 {
    --bs-gutter-x: 1rem; /* o 0.75rem si quieres más compacto */
  }
}
/* Contenedor principal: recorte limpio de slides fuera de vista */
.nms-gallery.swiper-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem; /* algo de padding horizontal si quieres mostrar un poquito del siguiente slide */
}

/* Wrapper: flex y altura fija para alinear */
.nms-gallery .swiper-wrapper {
  display: flex;
}

/* Cada slide: tamaño uniforme y que no se estreche */
.nms-gallery .swiper-slide {
  flex-shrink: 0;
  width: calc(100% / 1);       /* por defecto 1 slide completo */
  height: 300px;               /* fija la altura de las miniaturas */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ajustes responsive: más slides a la vista */
@media (min-width: 576px) {
  .nms-gallery .swiper-slide {
    width: calc(100% / 2);     /* 2 slides visibles */
  }
}
@media (min-width: 768px) {
  .nms-gallery .swiper-slide {
    width: calc(100% / 3);     /* 3 slides visibles */
  }
}

/* Imagen interna: cover total */
.nms-gallery .swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Flechas: están sobre el contenedor, asegúrate de nivel de z-index */
.nms-gallery .swiper-button-prev,
.nms-gallery .swiper-button-next {
  color: #fff;
  z-index: 10;
  background-color: transparent;
  border: 0;

}

/* Modal */
.nms-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.nms-modal.show {
  display: flex;
}
.nms-modal-content img {
  max-width: 90%;
  max-height: 90%;
}
/* Botón cerrar sin modificar layout */
.nms-close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

/* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: background-color .2s;
}
.whatsapp-float i {
  font-size: 30px;
}
.whatsapp-float:hover {
  background-color: #128C7E;
}
.cf7-stack{max-width:500px;margin:0 auto;border:1px solid #fff;padding:1rem}
.cf7-stack .form-group{display:block;width:100%;margin-bottom:1rem}
.cf7-stack .form-control{width:100%;box-sizing:border-box}

.wp-block-table td, .wp-block-table th {
  border: 0;
}