/* RESET BÁSICO Y FUENTE QUICKSAND */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
}

/* FONDO MENTA CON PATRÓN PATTERN.PNG Y DEGRADADO SUAVE */
body {
  background-color: #9de4d6;
  background-image: 
    linear-gradient(to top, rgba(157, 228, 214, 0.85) 0%, rgba(255, 255, 255, 0.25) 100%),
    url('pattern.png');
  background-repeat: repeat;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

/* CONTENEDOR PRINCIPAL */
.site-card {
  background-color: #FFFFFF; /* Marco blanco */
  width: 100%;
  max-width: 900px;
  border-radius: 35px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 30px 25px 0 25px; /* Quitamos padding inferior para pegarlo al borde */
  overflow: hidden; /* Mantiene el banner recortado a las esquinas redondeadas inferiores */
  display: flex;
  flex-direction: column;
}

/* LOGO */
.header {
  text-align: center;
  margin-bottom: 20px;
}

.logo {
  max-width: 320px;
  height: auto;
}

/* MENÚ NAVEGACIÓN SUPERIOR (PERMANECE CENTRADO) */
.main-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 25px;
  padding: 0 20px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.nav-item span {
  color: #ab57b6;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.nav-item:hover {
  transform: translateY(-4px);
}

.icon-circle {
  width: 70px;
  height: 70px;
  background-color: #FFFFFF;
  border: 2px solid #F8BADE;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
}

.icon-circle img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

/* CONTENEDOR BLANCO CENTRAL CON SOMBRA DIFUMINADA (#17637d al 40%) */
.content-box {
  background-color: #FFFFFF;
  border-radius: 25px;
  box-shadow: 0px 8px 25px rgba(23, 99, 125, 0.4);
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.1fr;
  overflow: hidden;
  margin-bottom: 30px;
}

/* ESTILOS GENERALES DE LAS COLUMNAS */
.column {
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* DIVISORIA PUNTEADA ÚNICAMENTE A LA DERECHA DE LA PRIMERA COLUMNA */
.profile-col {
  background-color: #FAF6E9; /* Fondo crema */
  border-right: 2px dashed #C8E3EA;
}

.avatar-box img {
  width: 140px;
  height: 140px;
  border-radius: 20px;
  object-fit: cover;
  margin-bottom: 12px;
}

.profile-info {
  color: #E2AD70; /* Permanecerá centrado para "info | info | info | info" */
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 15px;
  text-align: center;
}

.profile-bio {
  color: #E2AD70;
  font-weight: 400;
  font-size: 11.5px;
  text-align: left; /* CAMBIADO A LA IZQUIERDA */
  line-height: 1.4;
  width: 100%;
}

/* COLUMNA 2: REDES SOCIALES Y TEXTO AZUL PASTEL */
.center-col {
  background-color: #FFFFFF;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 15px;
  width: 100%;
}

.social-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.social-icons img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #F8BADE;
  margin-bottom: 3px;
}

.social-icons span {
  color: #F8BADE;
  font-size: 10px;
  font-weight: 500;
}

.title-banner img {
  width: 160px;
  height: auto;
  margin-bottom: 8px;
}

.bio-text {
  color: #A2C3CE;
  font-weight: 400;
  font-size: 11.5px;
  text-align: left; /* CAMBIADO A LA IZQUIERDA */
  line-height: 1.4;
  margin-bottom: 12px;
  width: 100%;
}

/* COLUMNA 3: TABLA DE HORARIOS Y COMPONENTES ROSAS */
.schedule-col {
  background-color: #FFFFFF;
}

.title-banner-large img {
  width: 100%;
  max-width: 210px;
  height: auto;
  margin-bottom: 12px;
}

.schedule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #F8BADE;
  border-radius: 15px;
  overflow: hidden;
}

.schedule-table td {
  border-bottom: 1.5px solid #F8BADE;
  padding: 6px 10px;
  font-size: 12px;
}

.schedule-table tr:last-child td {
  border-bottom: none;
}

.schedule-table .day {
  color: #F8BADE;
  font-weight: 700;
  width: 35%;
  text-align: left;
  border-right: 1.5px solid #F8BADE;
}

.schedule-table .info {
  background-color: #FFFFFF;
  text-align: left;
}

/* BANNER INFERIOR CON TEXTO */
.footer-banner {
  width: calc(100% + 50px);
  margin-left: -25px;
  height: 80px;
  background-color: #f8bade;
  background-image: linear-gradient(130deg, #f8bade 0%, #ffd0e8 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
}