/* ============================================================
   VARIABLES GENERALES
============================================================ */
html {
  overflow-y: scroll; /* Previene salto del navbar */
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: #222;
  padding-top: 80px; /* Ajusta a altura real del navbar */
  background: linear-gradient(135deg, #5a60f5, #ff8ac0);
}


.navbar a:hover {
  color: #e04891;
}

/* Hero */
.hero {
  text-align: center;
  padding: 4rem 2rem;
  color: white;
}
.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}


/* Botones */
.btn, .btn-volver {
  background: linear-gradient(90deg, #6284FF, #FF70B8);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  text-align: center;
}
/* .btn:hover, .btn-volver:hover {
  background: #c33f80;
} */
.btn-volver span { 
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-volver span:after { 
  content: '\00ab'; /* ← ahora apunta hacia la izquierda */
  position: absolute;
  opacity: 0;
  left: -50px;
  transition: 0s;
}

.btn-volver:hover span { 
  padding-left: 25px;
}
.btn-volver:hover span::after { 
  opacity: 1;
  right: 0;
}

.center {
  text-align: center;
  margin: 2rem 0;
}

.btn_cards { 
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    margin-top: 5px;
}

/* ====== Mantener botones al fondo de las cards ====== */
.service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* separa imagen+texto arriba y botón abajo */
  height: 100%;
}

.service-card .card-body {
  flex-grow: 1; /* hace que el cuerpo ocupe todo el espacio disponible */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card .btn_cards {
  align-self: center; /* centra horizontalmente el botón */
  margin-top: auto; /* empuja el botón hacia el fondo */
}

.reveal{ 
  opacity:0; 
  transform:translateY(30px); 
  transition: all .7s ease-out; 
}

.reveal.visible{ 
  opacity:1; 
  transform:translateY(0); 
}

/* Detalle */
.detalle {
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #5a60f5, #ff8ac0);
  color: white;
  text-align: center;
}
.detalle h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.detalle p {
  max-width: 700px;
  margin: 0 auto 2rem;
}

/* Footer */
.footer {
  text-align: center;
  padding: 1rem;
  background: white;
  color: #555;
  font-size: 0.9rem;
  margin-top: 2rem;
}

/* ====== Zarvela Modals ====== */
.modal-content {
  font-family: 'Poppins', sans-serif;
  color: #333;
}

.modal-header {
  border-radius: 16px 16px 0 0;
}

.modal-body ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.modal-body li {
  margin-bottom: 0.5rem;
}

/* Botón principal de WhatsApp dentro del modal */
.whatsapp-btn {
  background: linear-gradient(90deg, #6284FF, #FF70B8);
  border: none;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.whatsapp-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}



/* ======== Ajustes Responsive para Geriátrica ======== */
@media (max-width: 768px) {

  /* 🔹 Ocultar el botón "Volver" en móvil */
  .btn-volver {
    display: none;
  }

  /* 🔹 Centrar el texto y reducir el padding del encabezado */
  .detalle h2 {
    font-size: 1.6rem;
  }

  .detalle p {
    font-size: 0.95rem;
    padding: 0 1rem;
  }



  /* 🔹 Ajustar márgenes del contenedor principal */
  .detalle {
    padding-top: 6rem;
    padding-bottom: 2rem;
  }
}

/* === Modal scrollable */ 
.modal-dialog-scrollable .modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

body.modal-open {
    overflow-y: hidden;
    padding-right: 0 !important;
}

.modal {
    padding-right: 0 !important;
}



#imgsarcopenia { 
  object-fit: cover;
}


/* ====== Sección de contacto al final de las cards ====== */
.consulta-patologia {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
}

.consulta-box {
  max-width: 800px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Botón de WhatsApp */
.whatsapp-consulta-btn {
  background: linear-gradient(90deg, #6284FF, #FF70B8);
  color: #fff;
  border: none;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-size: 1rem;
  min-width: 280px;
  text-decoration: none;
}

.whatsapp-consulta-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
  text-decoration: none;
  color: #fff;
}

/* Adaptación para móvil */
@media (max-width: 768px) {
  .consulta-box {
    padding: 2rem 1.2rem;
  }

  .whatsapp-consulta-btn {
    width: 100%;
  }
}

#doubts_text { 
  color:#333
}