:root {
  --rio-dark: #121D26;
  --rio-gold: #DFB877;
  --rio-gold-hover: #9E8354;
  --rio-text: #0A1015;
  --rio-light: #FCF8F1;
}


.navbar-rio {
  background-color: var(--rio-dark);
}

.navbar-brand img {
  max-height: 48px;
}


.hero-section {
  min-height: 100vh;
  background-image: url("../img/Hero-rio-o2-1.png");
  background-size: cover;
  background-position: center;
}


.hero h1,
.hero p {
  color: var(--rio-text);
}


.btn-wssp {
  background-color: var(--rio-gold);
  color: #fff;
  border-radius: 5px;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-wssp:hover {
  background-color: var(--rio-gold-hover);
  color: #fff;
  transform: translateY(-2px);
}


.bg-light-rio {
  background-color: var(--rio-light);
}


.card-small {
  width: 21rem;
}

.card-large {
  width: 35rem;
}


.footer-rio {
  background-color: var(--rio-dark);
}

.footer-rio h5,
.footer-rio p {
  color: #fff;
}



/* NOSOTROS.HTML--CSS

/* NAVBAR */
.navbar-custom {
  background-color: #121D26;
}

/* HERO EQUIPO */
.hero-equipo {
  min-height: 100vh;
  background-image: url('../img/grupal.png');
  background-size: cover;
  background-position: center;
}

.hero-title {
  color: #0A1015;
}

/* CARDS CON ANCHO FIJO */
.card-fixed {
  width: 21rem;
}

/* Declaración de la fuente */
@font-face {
  font-family: 'Surgena-Medium';
  src: url('../fonts/Surgena-Medium.otf') format('opentype');
  /* Importante: Definir el peso exacto del archivo */
  font-weight: 500;
  font-style: normal;
}

/* Aplicación a los encabezados */
h2,
h4,
h5 {
  font-family: 'Surgena-Medium', sans-serif !important;

  /* BLOQUE ANTIGROSOR: Esto evita que el navegador la deforme */
  font-weight: 500 !important;
  font-synthesis: none;
  /* Prohíbe al navegador crear negritas falsas */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Mejora de dibujo de la letra */
  text-rendering: optimizeLegibility;

  /* Un pequeño ajuste de color ayuda: el negro puro (#000) siempre se ve más grueso */
  color: #333333;
}

/* Declaración de la fuente Surgena */
@font-face {
  font-family: 'Surgena-Medium';
  src: url('../fonts/Surgena-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

/* Configuración de la sección #razones */
#razones .card {
  border: 1px solid #f0f0f0 !important;
  background-color: #ffffff;
  height: 100%;
  text-align: left;
  /* Alineado a la izquierda según tus imágenes */
}

#razones .card-body {
  /* VALORES EXACTOS DE TU FIGMA */
  padding-top: 24px !important;
  /* Superior */
  padding-bottom: 32px !important;
  /* Inferior */
  padding-left: 18px !important;
  /* Izquierdo */
  padding-right: 18px !important;
  /* Derecho */
}

#razones img {
  /* Mantenemos el icono pequeño y fijo */
  width: 40px !important;
  height: auto;
  margin-bottom: 20px;
  /* Espacio bajo el icono */
  display: block;
}

#razones h5 {
  font-family: 'Surgena-Medium', sans-serif !important;
  font-weight: 500 !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  /* Letra fina como en image_2c35d9.jpg */
  color: #121D26;
  margin-bottom: 12px;
  line-height: 1.3;
}

#razones p {
  font-size: 0.92rem;
  line-height: 1.6 !important;
  /* Interlineado para que el texto respire */
  color: #777;
  margin-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

/* Aplicación a la sección de Beneficios */
#Beneficios .card {
  border: 1px solid #eeeeee !important;
  border-radius: 15px !important;
  background-color: #ffffff;
  height: 100%;
}

#Beneficios .card-body {
  /* PADDING EXACTO 16px en todos los lados */
  padding: 16px !important;
  display: flex;
  align-items: center;
  /* Centra el icono con el texto verticalmente */
}

#Beneficios img {
  /* Mantenemos el icono pequeño para que no domine el espacio */
  width: 32px !important;
  height: auto;
  flex-shrink: 0;
  margin-right: 16px;
  /* Espacio entre icono y texto */
}

#Beneficios .card-text {
  /* FUENTE MÁS BAJA Y FINA */
  font-family: sans-serif;
  font-weight: 300 !important;
  /* Peso ligero para quitar la negrita */
  font-size: 0.9rem;
  line-height: 1.5;
  color: #666666 !important;
  /* Gris suave como en la imagen */
  -webkit-font-smoothing: antialiased;
  margin-bottom: 0;
}

/* El título interno del beneficio también más suave */
#Beneficios .card-text span {
  font-weight: 500 !important;
  color: #121D26;
  /* Apenas un poco más oscuro para resaltar sin ser negrita tosca */
}

/* Selecciona solo el párrafo de introducción que está dentro de la columna de texto centrado */
#Beneficios .text-center+p,
#Beneficios .col-12>p {
  color: #777 !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 2rem;
  text-align: center;
  /* Opcional: para que combine con el título centrado */
}

/* Selecciona específicamente el primer párrafo dentro de la sección de Tratamentos */
#Tratamentos p:first-of-type {
  color: #777 !important;
  font-weight: 400 !important;
  /* Peso normal para evitar que se vea tosco */
  line-height: 1.7 !important;
  /* Interlineado elegante para que respire */
  -webkit-font-smoothing: antialiased;
  /* Suavizado de fuente Surgena */
  margin-bottom: 25px;
}

/* Color #777 para descripciones */
#protocolos .descripcion-gris {
  color: #777 !important;
  font-weight: 400;
  line-height: 1.6;
  display: inline;
}

#protocolos strong {
  font-weight: 400 !important;
  color: #121D26 !important;
}



/* Padding responsivo: 20px en móvil, 30x35 en escritorio */
#protocolos .card-body {
  padding: 25px 20px !important;
}

@media (min-width: 768px) {
  #protocolos .card-body {
    padding: 30px 35px !important;
  }
}

/* Alineación fina de los círculos numerados */
.flex-shrink-0 img {
  margin-top: 3px;
}

/* Ajuste de títulos para que no se vean gigantes en móviles */
@media (max-width: 576px) {
  #protocolos h2 {
    font-size: 1.5rem;
  }

  #protocolos h5 {
    font-size: 1.1rem;
  }
}


/* Color cuando el acordeón está ABIERTO */
.accordion-button:not(.collapsed) {
  background-color: #121D26 !important;
  /* El azul oscuro de tu marca */
  color: #ffffff !important;
  /* Letras blancas */
  box-shadow: none !important;
  /* Quita el borde azul de enfoque */
}

/* Cambiar el color de la flecha cuando está abierto a blanco */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

/* Opcional: Color de las letras en las respuestas (el gris #777 que venías usando) */
.accordion-body {
  color: #777 !important;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Ajuste para que los botones cerrados se vean limpios */
.accordion-button {
  color: #333;
  font-weight: 500;
}

#alianza img {
    /* Asegura que los logos tengan un tamaño armonioso */
    transition: transform 0.3s ease;
    padding: 10px;
  }

  #alianza img:hover {
    transform: scale(1.05);
  }

  #alianza h4 {
    /* Mantiene el estilo de fuente limpio que usas en el sitio */
    line-height: 1.5;
    color: #333;
  }

.redes-sociales-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* Elimina espacios fantasma bajo la imagen */
}

.hitbox {
  position: absolute;
  top: 15%;
  /* Ajustado para el padding py-3 */
  height: 70%;
  /* Altura que cubre los iconos */
  width: 28%;
  /* Ancho de cada icono aproximadamente */
  z-index: 50;
  /* background: rgba(255,0,0,0.3); */
  /* <-- Activa esto para ver los cuadros y ajustarlos */
}

/* Posiciones calculadas con el gap de 16px */
.ig {
  left: 0%;
}

.fb {
  left: 36%;
  /* Salta el primer icono + el gap */
}

.tk {
  left: 72%;
  /* Salta los dos primeros + los gaps */
}

/* Contenedor principal en fila */
.shorts-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
}

/* Tarjeta contenedora con relación de aspecto vertical 9:16 */
.short-card {
  width: 300px;
  height: 533px; /* Proporción 9:16 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: #000;
}

/* Ajuste del iframe para llenar la tarjeta */
.short-card iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Contenedor principal en fila */
.shorts-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
}

/* Tarjeta contenedora con relación de aspecto vertical 9:16 */
.short-card {
  width: 300px;
  height: 533px; /* Proporción 9:16 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: #000;
}

/* Ajuste del iframe para llenar la tarjeta */
.short-card iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Contenedor principal */
.shorts-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

/* Tarjeta con altura y ancho fijos para evitar recortes */
.short-card {
  width: 315px;            /* Ancho estándar del player de Shorts */
  height: 560px;           /* Altura exacta para evitar que el iframe fuerce el scroll o corte */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: #000;
}

/* iFrame sin márgenes extra */
.short-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Estilos para la galería con efecto de sombra y texto */
.gallery-item {
  display: block;
  text-decoration: none;
}

.image-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* Capa de sombra transparente */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 12px;
}

/* Nombre de la instalación en el overlay */
.overlay-text {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

/* Mostrar la sombra al pasar el cursor o presionar */
.gallery-item:hover .overlay,
.gallery-item:focus .overlay,
.gallery-item:active .overlay {
  opacity: 1;
}

.gallery-item:hover img {
  transform: scale(1.05);
}