/* Variables de Color Oficiales Rotary */
:root {
  --rotary-blue: #00246C;
  --rotary-gold: #F7A81B;
  --rotary-light-bg: #f8f9fa;
  --polio-red: #E31B23;
}

/* Regla Global para Justificar Párrafos */
.text-justify {
  text-align: justify;
}

/* Detalle elegante para Tarjetas */
.card-rotary {
  border: none;
  border-top: 4px solid var(--rotary-gold) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* FIX DEFINITIVO COLOR DE FONDO Y OVER-SCROLL EN CELULARES */
html {
  background-color: #ffffff !important;
  overscroll-behavior-y: none;
  height: 100%;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding-top: 80px;
  background-color: #ffffff !important;
  overscroll-behavior-y: none;
  min-height: 100vh;
  position: relative;
}

/* Fuerza a que el área detrás del navbar en Safari sea percibida como blanca */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  z-index: -1;
}

/* 1. HEADER Y NAV BAR AZUL ROTARY */
.navbar-rotary {
  background-color: var(--rotary-blue) !important;
  border-bottom: 3px solid var(--rotary-gold);
  height: 80px;
}

.navbar-rotary .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
}

.navbar-rotary .nav-link:hover, 
.navbar-rotary .nav-link.active {
  color: #ffffff !important;
}

/* Submenús desplegables suavemente al pasar el mouse (Solo Escritorio) */
@media (min-width: 992px) {
  .navbar-rotary .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .navbar-rotary .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease-in-out;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
}

.logo-img {
  max-height: 55px;
  margin-left: 10px;
}

/* 2. TEXTO ELEGANTE ENGLISHSWITCH */
.lang-switch-text {
  color: var(--rotary-gold, #F7A81B) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  transition: opacity 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
}

.lang-switch-text:hover {
  opacity: 0.85;
  color: #ffffff !important;
}

/* 3. BOTONES BLANCOS CON TEXTO AZUL ROTARY */
.btn-rotary-white {
  background-color: #ffffff !important;
  color: var(--rotary-blue) !important;
  font-weight: bold;
  border-radius: 8px;
  padding: 6px 18px;
  border: 1px solid #ffffff;
  transition: all 0.2s ease-in-out;
}

.btn-rotary-white:hover {
  background-color: #f8f9fa !important;
  color: #001239 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* 4. MÁS PADDING EN MAIN SOLO EN CELULARES */
@media (max-width: 767.98px) {
  main, .main-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Carousel / Slider */
.carousel-item img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
}

/* Seccion Mensaje */
.president-img {
  max-width: 260px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Footer */
footer {
  background-color: var(--rotary-blue);
  color: white;
  position: relative;
  z-index: 2;
}
footer a {
  color: #e0e0e0;
}
footer a:hover {
  color: var(--rotary-gold);
}

/* WhatsApp Flotante */
.whatsapp-btn {
  position: fixed;
  bottom: 30px;
  right: 20px;
  width: 55px;
  height: 55px;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 1050;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-btn:hover {
  background-color: #1ebe5b;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5);
}

/* Efecto hover suave para tarjetas del modal */
.option-card {
  border: 1px solid #e9ecef;
  transition: all 0.25s ease-in-out;
}

.option-card:hover {
  border-color: var(--rotary-gold);
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

.option-card:hover .icon-shape {
  background-color: var(--rotary-blue) !important;
  color: #ffffff !important;
}

.option-card-polio:hover {
  border-color: var(--polio-red) !important;
}

.option-card-polio:hover .icon-shape-polio {
  background-color: var(--polio-red) !important;
  color: #ffffff !important;
}

/* MENÚ MÓVIL (OFFCANVAS) COMPACTO Y DELICADO */
@media (max-width: 991.98px) {
  .offcanvas.offcanvas-start {
    width: 78% !important;
    max-width: 300px !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important;
    top: 80px !important;
    border-bottom-right-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .offcanvas-body {
    overflow-y: auto;
    padding: 1rem 1.25rem !important;
  }

  .offcanvas-body .nav-link {
    color: var(--rotary-blue) !important;
    font-weight: 600;
    padding: 8px 12px;
  }

  .offcanvas-body .nav-link:hover,
  .offcanvas-body .nav-link:focus {
    color: #001239 !important;
    background-color: rgba(0, 36, 108, 0.05);
    border-radius: 6px;
  }

  .offcanvas-body .dropdown-menu {
    border: none !important;
    background-color: #f8f9fa !important;
    margin-top: 4px !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
  }

  .offcanvas-body .dropdown-item {
    color: #333333 !important;
    font-weight: 500;
    padding: 8px 16px;
  }

  .offcanvas-body .dropdown-item:hover,
  .offcanvas-body .dropdown-item:active {
    background-color: var(--rotary-blue) !important;
    color: #ffffff !important;
    border-radius: 4px;
  }

  .offcanvas-body .dropdown-toggle::after {
    color: var(--rotary-blue);
  }
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4) !important;
}

.photo-credits {
  text-align: right;
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 2.5rem;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .photo-credits {
    text-align: right !important;
    font-size: 0.68rem !important;
    margin-top: 2rem !important;
    padding-right: 0.25rem;
  }
}

/* EFECTO FOTO PRESIDENTE EN MÓVILES */
/* FOTO PRESIDENTE - BASE (ESCRITORIO Y GENERAL) */
.presi-photo-reveal {
  opacity: 1;
  transform: none;
  max-width: 100%;
  height: auto;
}

/* FOTO PRESIDENTE - MÓVILES */
@media (max-width: 767.98px) {
  .presi-photo-reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
    
    /* Tamaño reducido y centrado seguro en celular */
    width: 100% !important;        /* Cambiá este % si querés más grande/chico */
    max-width: 240px !important;
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
  }

  .presi-photo-reveal.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
}

/* ==========================================
   ESTILOS BASE: TARJETAS DE VALORES
   ========================================== */
.tarjeta-valor {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 12px;
  background-color: #ffffff;
}

/* Bordes Temáticos */
.tarjeta-azul {
  border: 1.5px solid #00246C !important;
}

.tarjeta-amarilla {
  border: 1.5px solid #F7A81B !important;
}

/* Tamaño base del logo */
.logo-valor {
  width: 150px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   1. ESCRITORIO (PC): Efecto Hover
   ========================================== */
@media (min-width: 768px) {
  .tarjeta-azul:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 36, 108, 0.35) !important;
  }

  .tarjeta-amarilla:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(247, 168, 27, 0.45) !important;
  }
}

/* ==========================================
   2. CELULARES (< 768px): Activación por Scroll (80% en pantalla)
   ========================================== */
@media (max-width: 767.98px) {
  .logo-valor {
    width: 110px !important;
    margin-bottom: 0.5rem;
  }

  .tarjeta-valor h3 {
    font-size: 1.35rem;
  }

  /* La sombra se activa ÚNICAMENTE cuando la tarjeta tiene la clase .visible */
  .tarjeta-azul.visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 36, 108, 0.8) !important;
  }

  .tarjeta-amarilla.visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(247, 168, 27, 0.8) !important;
  }
}

/* ==========================================
   SECCIÓN MIEMBROS - ESTILOS REFORZADOS
   ========================================== */

/* Contenedor principal con margen global */
div.main .container-miembros {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 30px 25px 50px 25px !important;
  box-sizing: border-box !important;
}

/* Título principal: Más aire (márgenes), negrita fuerte y color institucional */
div.main h1.titulo-miembros {
  color: rgb(12, 60, 145) !important;
  text-align: center !important;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important;
  font-size: 2.3rem !important;
  font-weight: 800 !important; /* Negrita marcada */
  margin-top: 35px !important;  /* Mayor espacio superior */
  margin-bottom: 30px !important; /* Mayor espacio inferior */
  line-height: 1.3 !important;
}

/* Párrafos del texto */
div.main .texto-miembros p {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  font-weight: normal !important;
  text-align: justify !important;
  line-height: 1.6 !important;
  font-size: 1.05rem !important;
  color: #333333 !important;
  margin-bottom: 20px !important;
}

/* Imagen centrada y con sombra */
div.main .imagen-miembros-container {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 35px 0 !important;
}

div.main img.imagen-miembros {
  width: 100% !important;
  max-width: 850px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2) !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

/* Sección de Contacto al pie */
div.main .contacto-miembros {
  margin-top: 40px !important;
  text-align: center !important;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}

div.main .contacto-miembros h4 {
  font-weight: bold !important;
  font-size: 1.1rem !important;
  margin-bottom: 10px !important;
  color: #222222 !important;
}

div.main .contacto-miembros p {
  font-size: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

div.main .contacto-miembros a {
  color: rgb(12, 60, 145) !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

div.main .contacto-miembros a:hover {
  text-decoration: underline !important;
}

/* ==========================================
   ADAPTACIÓN PARA CELULARES (MÓVILES)
   ========================================== */
@media (max-width: 768px) {
  /* Margen interno para que no toque los bordes del celular */
  div.main .container-miembros {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 20px !important;
    padding-bottom: 35px !important;
  }

  /* Título en celulares */
  div.main h1.titulo-miembros {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    padding: 0 5px !important;
  }

  /* Párrafos JUSTIFICADOS en celulares */
  div.main .texto-miembros p {
    font-size: 0.98rem !important;
    text-align: justify !important; /* Texto totalmente justificado */
    line-height: 1.55 !important;
  }

  div.main .contacto-miembros p {
    flex-direction: column !important;
    gap: 6px !important;
  }

  div.main .contacto-miembros span {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  /* Asegura visibilidad de todos los títulos del menú desplegable */
  .menu ul li a {
    color: #0c3c7c !important; /* Azul Rotary visible */
    display: block !important;
    padding: 10px 15px !important;
  }
  
  .menu ul li .submenu {
    position: static !important;
    box-shadow: none !important;
    background-color: #f4f6f9 !important;
    padding-left: 15px !important;
  }

  .menu ul li .submenu a {
    color: #333333 !important;
  }
}

/* ==========================================
   ESTILOS ESPECÍFICOS PARA BANDA.HTML
   ========================================== */

/* ESCRITORIO (Pantallas a partir de 992px)
   Comportamiento natural estático idéntico a intercambios.html */
@media (min-width: 992px) {
  .images-container-sticky {
    position: static !important; /* Desactiva el sticky para evitar parpadeos/temblores */
    transform: none !important;
  }

  .band-card-img {
    position: static !important;
    margin-bottom: 20px;
    border: none;
    box-shadow: none;
  }

  .band-card-img img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    display: block;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

/* CELULARES Y TABLETS (Pantallas de menos de 992px)
   Ajuste fino de márgenes para frenado exacto al 85% sin espacio blanco sobrante */
@media (max-width: 991.98px) {
  body, main, .band-grid-section {
    overflow: visible !important;
  }

  .images-container-sticky {
    position: relative;
    width: 100%;
    /* Da el rango exacto de scroll para acoplar la 3ª tarjeta sin dejar hueco */
    margin-bottom: -120px !important; 
    padding-bottom: 140px !important;
  }

  /* Tarjetas Sticky en Celular */
  .band-card-img {
    position: -webkit-sticky !important;
    position: sticky !important;
    width: 100%;
    max-width: 360px;
    margin: 0 auto !important;
    background-color: #ffffff;
    border-radius: 1rem;
    border: 2.5px solid rgba(12, 60, 145, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }

  /* 1ª tarjeta: Frena a 110px */
  .band-card-img:nth-child(1) {
    top: 110px !important;
    z-index: 10;
    margin-bottom: 20px !important;
  }

  /* 2ª tarjeta: Solapa al 85% frena a 145px */
  .band-card-img:nth-child(2) {
    top: 145px !important;
    z-index: 20;
    margin-bottom: 20px !important;
  }

  /* 3ª tarjeta: Solapa al 85% frena a 180px */
  .band-card-img:nth-child(3) {
    top: 180px !important;
    z-index: 30;
    margin-bottom: 0 !important;
  }

  .band-card-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  }
}

/* Ajustes de alineación de texto y tarjeta de contacto */
.band-grid-section .col-lg-7 > p,
.band-grid-section .col-lg-7 ul li div {
  text-align: justify !important;
}

.band-grid-section .bg-light,
.band-grid-section .bg-light p,
.band-grid-section .bg-light h3,
.band-grid-section .bg-light div {
  text-align: center !important;
}