/* General */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #fff;
    overflow-x: hidden; /* Previene el desbordamiento horizontal */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Clases Reutilizables de Títulos --- */
.section-subtitle {
    color: #FF6B6B;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-align: center;
}

.section-title-serif {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #FF6B6B;
    font-size: 2.8em;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 40px; /* Espacio después del título */
    text-align: center;
}

.container.text-center {
    display: block; /* Anula el flex para contenedores de solo texto */
    max-width: 800px;
}

.text-left {
    text-align: left;
}

/* --- Top Bar (Sección 1) --- */
.top-bar {
    background-color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para responsividad */
}

.top-bar .logo {
    display: flex;
    align-items: center;
}

.top-bar .logo img {
    height: 40px; 
    margin-right: 10px;
}

.top-bar .logo-text span {
    font-size: 1.5em;
    font-weight: bold;
    color: #FF6B6B; 
    display: block;
}

.top-bar .logo-text p {
    font-size: 0.8em;
    color: #999;
    margin: 0;
    margin-left: 1px; /* Pequeño ajuste */
}

/* (NUEVO) Estilo para el logo de texto "MEDDICAL" */
.logo-text-main {
    padding: 10px 0; /* Asegura altura consistente */
}
.logo-text-main a {
    font-family: 'Georgia', 'Times New Roman', serif; /* Misma fuente que títulos */
    font-size: 2.2em; /* Tamaño grande */
    font-weight: normal;
    color: #FF6B6B; /* Color rosa */
    text-decoration: none;
    letter-spacing: 1px;
}
/* Fin (NUEVO) */

.top-bar .contact-info {
    display: flex;
    gap: 30px;
    font-size: 0.9em;
    color: #555;
    flex-wrap: wrap; /* Para responsividad */
}

.top-bar .contact-info > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-bar .contact-info i {
    color: #FF6B6B;
    font-size: 1.5em; /* Iconos un poco más grandes */
}

.top-bar .contact-info .contact-details span {
    font-weight: bold;
    display: block;
    font-size: 0.9em;
}

.top-bar .contact-info .contact-details p {
    margin: 0;
    font-size: 0.9em;
    color: #777;
}

/* --- Main Navigation (Sección 2) --- */
.main-nav {
    background-color: #FF6B6B; 
    padding: 15px 0;
}

.main-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para responsividad */
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
    flex-wrap: wrap; /* Para responsividad */
}

.main-nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold; /* Inactivo es bold */
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: #ffe0e0;
}

/* El enlace activo (página actual) no es bold */
.main-nav ul li.active a {
    font-weight: normal;
}

.main-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-nav .nav-actions i {
    color: #fff;
    font-size: 1.2em;
    cursor: pointer;
}

.main-nav .appointment-btn {
    background-color: #F8D8D8; 
    color: #FF6B6B; 
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.main-nav .appointment-btn:hover {
    background-color: #f7c0c0;
}

/* --- Hero Section (Sección 3 - SOLO INDEX) --- */
.hero-section {
    background-color: #F8D8D8; 
    position: relative;
    padding: 80px 0;
    overflow: hidden; 
    min-height: 400px; /* Altura mínima */
}

.hero-section .container {
    position: relative;
    z-index: 1; 
    align-items: center; /* Centrar verticalmente el contenido */
    justify-content: flex-start;
}

.hero-section .hero-content {
    flex: 1;
    max-width: 50%; /* Limita el ancho del texto */
    text-align: left;
}

.hero-section .section-subtitle {
    text-align: left; /* Anula el centrado general */
}

.hero-section h1 {
    font-size: 3.5em;
    color: #333;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 30px;
}

.hero-section .our-services-btn {
    background-color: #FF6B6B;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.hero-section .our-services-btn:hover {
    background-color: #e05e5e;
}

/* Imagen de la doctora como pseudo-elemento */
.hero-section::after { 
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* Ancho de la imagen */
    height: 100%;
    /* REEMPLAZA ESTA URL por la de tu imagen de la doctora */
    background-image: url('https://placehold.co/800x600/E8E8E8/AAA?text=Imagen+Doctora'); 
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0; 
}

/* --- Appointment Cards (Sección 4) --- */
.appointment-cards {
    background-color: #fff; 
    padding: 0; 
    margin-top: -60px; /* Superpone las tarjetas sobre el hero */
    position: relative;
    z-index: 2; 
}

.appointment-cards .container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap; /* Para responsividad */
}

.appointment-cards .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 20px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 280px; 
    min-height: 120px;
    box-sizing: border-box;
}

.appointment-cards .card i {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.appointment-cards .card span {
    font-size: 1.2em;
    font-weight: bold;
}

.appointment-cards .card-pink {
    background-color: #FF6B6B;
}

.appointment-cards .card-light-pink {
    background-color: #F8D8D8;
    color: #FF6B6B; /* Texto rosa para tarjetas claras */
}

/* --- Welcome Section (Sección 5) --- */
.welcome-section {
    padding: 80px 0 0 0; /* Sin padding inferior, la barra de progreso lo maneja */
    background-color: #fff;
}

.welcome-section .welcome-text {
    max-width: 600px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
    color: #555;
    font-size: 1.1em; 
}

.welcome-section .learn-more-link {
    color: #FF6B6B;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.welcome-section .learn-more-link i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.welcome-section .learn-more-link:hover {
    color: #e05e5e; /* Un rosa más oscuro al pasar el ratón */
}

.welcome-section .learn-more-link:hover i {
    transform: translateX(5px);
}

/* --- Welcome Image and Progress Bar (Sección 5) --- */
/* Esta clase ahora es reutilizada por .page-banner */
.container-fullwidth-image {
    margin-top: 60px;
    width: 100%;
    position: relative; /* Para la barra de progreso */
}

.container-fullwidth-image img {
    width: 100%;
    display: block; /* Elimina espacio extra debajo de la imagen */
    height: auto;
}

/* --- Banner de Página (para About Us, News, etc.) --- */
.page-banner {
    width: 100%;
    position: relative;
    /* Sin margen superior, va pegado a la nav */
}

.page-banner img {
    width: 100%;
    display: block;
    height: auto;
    max-height: 450px; /* Altura máxima para el banner */
    object-fit: cover; /* Asegura que la imagen cubra el espacio */
}


/* Contenedor de la barra de progreso (reutilizado) */
.progress-bar-container {
    width: 100%;
    /* Empuja la barra hacia adentro, como en la imagen */
    padding: 0 10%; 
    box-sizing: border-box; /* Para que el padding no afecte el width */
    position: relative;
    margin-top: -10px; /* Superpone la barra sobre la imagen */
    z-index: 5;
}

.progress-bar {
    display: flex;
    width: 100%;
    height: 10px; /* Altura de la barra */
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.progress-segment {
    height: 100%;
}

/* Colores y anchos de los segmentos (ajustados a la imagen) */
.segment-1 {
    background-color: #F8D8D8; /* Rosa claro */
    flex-basis: 30%; /* 30% del ancho */
}

.segment-2 {
    background-color: #f7baba; /* Rosa medio */
    flex-basis: 40%; /* 40% del ancho */
}

.segment-3 {
    background-color: #FF6B6B; /* Rosa principal */
    flex-basis: 30%; /* 30% del ancho */
}

/* --- Services Section (Sección 6) --- */
.services-section {
    padding: 80px 0;
    background-color: #fff;
}

.services-container {
    display: flex;
    gap: 30px;
    align-items: flex-start; /* Alinea las columnas arriba */
}

/* Columna Izquierda: Pestañas */
.service-tabs {
    flex-basis: 25%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.service-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-tab {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    text-decoration: none;
    color: #555;
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    background-color: #fff;
}

.service-tab i {
    color: #FF6B6B;
    font-size: 1.8em;
    margin-right: 20px;
    width: 30px;
    text-align: center;
}

/* Pestaña gris (como en la imagen "Free Checkup") */
.service-tab.tab-grey {
    background-color: #e9ecef; /* Un gris claro */
    color: #6c757d; /* Texto gris */
}
.service-tab.tab-grey i {
    opacity: 0.7;
}

/* Pestaña activa (rosa) */
.service-tab.active {
    background-color: #FF6B6B;
    color: #fff;
    border-color: #FF6B6B;
}
.service-tab.active i {
    color: #fff;
}

/* Hover para pestañas inactivas (blancas) */
.service-tab:not(.active):not(.tab-grey):hover {
    background-color: #fdf5f5; /* Un rosa muy pálido */
}

.view-all-btn {
    display: block;
    background-color: #FF6B6B;
    color: #fff;
    text-align: center;
    padding: 20px 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.view-all-btn:hover {
    background-color: #e05e5e;
}

/* Columna Derecha: Contenido */
.service-content {
    flex-basis: 75%;
    display: flex;
    gap: 30px;
}

.service-text {
    flex-basis: 60%;
}

.service-text h3 {
    font-size: 1.8em;
    color: #333;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600; /* Un poco más de peso */
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    column-count: 2; /* Dos columnas para la lista */
    column-gap: 20px;
}

.service-features li {
    display: flex;
    align-items: center;
    font-size: 1.05em; /* Ligeramente más pequeño */
    color: #555;
    margin-bottom: 15px;
}

.service-features i {
    color: #FF6B6B;
    margin-right: 10px;
    font-size: 1.2em;
}

.service-text p {
    color: #777;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95em;
}

/* Sub-columna de Imágenes */
.service-images {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.image-wrapper img {
    width: 100%;
    display: block;
}

.image-accent-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #FF6B6B;
    opacity: 0.8;
}

/* --- Specialties Section (Sección 7) --- */
.specialties-section {
    padding: 80px 0;
    background-color: #fff;
}

.specialties-grid {
    display: grid;
    /* 4 columnas de igual tamaño */
    grid-template-columns: repeat(4, 1fr); 
    /* Borde superior e izquierdo en el contenedor de la cuadrícula */
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
}

.specialty-card {
    /* Borde derecho e inferior en cada celda */
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 40px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.specialty-card i {
    font-size: 2.5em; /* Icono grande */
    color: #FF6B6B; /* Icono rosa */
    margin-bottom: 20px;
    display: block; /* Para que el margen funcione */
    transition: all 0.3s ease;
}

.specialty-card span {
    font-size: 1.1em;
    color: #333;
    font-weight: 600; /* Texto semi-negrita */
    transition: all 0.3s ease;
}

/* Estado Activo (tarjeta rosa) */
.specialty-card.active {
    background-color: #FF6B6B;
}

.specialty-card.active i,
.specialty-card.active span {
    color: #fff; /* Icono y texto blancos */
}

/* Estado Hover (para tarjetas no activas) */
.specialty-card:not(.active):hover {
    background-color: #FF6B6B;
    cursor: pointer;
}

.specialty-card:not(.active):hover i,
.specialty-card:not(.active):hover span {
    color: #fff;
}

/* --- Appointment Form Section (Sección 8) --- */
.appointment-form-section {
    padding: 80px 0;
    position: relative;
    /* REEMPLAZA ESTA URL por la de tu imagen de fondo */
    background-image: url('https://placehold.co/1200x800/E8E8E8/AAA?text=Fondo+consultorio');
    background-size: cover;
    background-position: center;
}

/* Superposición blanca translúcida */
.appointment-form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Blanco con 85% opacidad */
    z-index: 1;
}

/* El contenedor se posiciona sobre la superposición */
.appointment-form-section .container {
    position: relative;
    z-index: 2;
    align-items: flex-start; /* Alinea las columnas arriba */
    gap: 30px;
}

.appointment-text {
    flex-basis: 45%;
    padding-right: 30px;
    box-sizing: border-box;
}

.appointment-text .section-title-serif {
    margin-bottom: 25px; /* Menos espacio para el párrafo */
}

.appointment-text p {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
}

.appointment-form-wrapper {
    flex-basis: 55%;
    background-color: #FF6B6B;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.form-field {
    border-bottom: 1px solid #ff8f8f; /* Borde rosa más claro */
}

/* Borde derecho para las celdas de la izquierda */
.form-field:nth-child(odd):not(.full-width) {
    border-right: 1px solid #ff8f8f;
}

/* Campo de mensaje a ancho completo */
.form-field.full-width {
    grid-column: 1 / -1; /* Ocupa ambas columnas */
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 20px 25px;
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    box-sizing: border-box; /* Asegura que el padding no rompa el layout */
}

.form-field textarea {
    resize: vertical;
    min-height: 120px;
}

/* Estilo de placeholders */
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #fdeaea;
    opacity: 1;
}

/* Estilo para Select */
.form-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Flecha SVG blanca para el dropdown */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 12.5a.5.5 0 0 1-.35-.15l-4-4a.5.5 0 0 1 .7-.7L8 11.29l3.65-3.64a.5.5 0 0 1 .7 .7l-4 4a.5.5 0 0 1-.35.15z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 25px center;
    background-size: 1em;
    cursor: pointer;
}

/* Opciones del select */
.form-field select option {
    color: #333; /* Texto oscuro para las opciones */
    background-color: #fff;
}
.form-field select option[disabled] {
    color: #999;
}

/* Botón de envío */
.submit-btn {
    display: block;
    width: 100%;
    background-color: #F8D8D8; /* Rosa claro */
    color: #FF6B6B; /* Texto rosa oscuro */
    border: none;
    padding: 20px 25px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
}

.submit-btn:hover {
    background-color: #fff;
}

/* --- Doctors Section (Sección 9) --- */
.doctors-section {
    padding: 80px 0;
    background-color: #fff;
}

.doctors-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap; /* Para responsividad */
}

.doctor-card {
    flex-basis: 31%; /* ~1/3 del ancho con espacio */
    min-width: 280px; /* Ancho mínimo para responsividad */
    flex-grow: 1; /* Permite crecer si hay espacio */
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.doctor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.doctor-image {
    background-color: #f4f4f4; /* Fondo mientras carga la imagen */
}

.doctor-image img {
    width: 100%;
    height: auto;
    display: block;
}

.doctor-info {
    background-color: #F8D8D8; /* Fondo rosa pálido */
    padding: 25px;
    text-align: center;
    color: #FF6B6B; /* Texto rosa oscuro */
}

.doctor-info h3 {
    font-size: 1.4em;
    font-weight: 600;
    color: #333; /* Nombre en color oscuro */
    margin: 0 0 5px 0;
}

.doctor-info p {
    font-size: 1em;
    color: #555; /* Especialidad en gris oscuro */
    margin: 0 0 20px 0;
}

.doctor-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.doctor-socials a {
    color: #FF6B6B; /* Iconos en rosa */
    text-decoration: none;
    font-size: 1.1em;
    border: 1px solid #FF6B6B;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.doctor-socials a:hover {
    background-color: #FF6B6B;
    color: #fff;
}

.doctor-profile-link {
    display: block;
    background-color: #FF6B6B; /* Rosa principal */
    color: #fff;
    padding: 18px 25px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.doctor-profile-link:hover {
    background-color: #e05e5e; /* Rosa más oscuro */
}

/* Paginación / Puntos */
.slider-dots {
    text-align: center;
    margin-top: 40px;
}

.slider-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #F8D8D8; /* Puntos inactivos rosa claro */
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-dots .dot.active {
    background-color: #FF6B6B; /* Punto activo rosa oscuro */
}

/* --- News Section (Sección 10) --- */
.news-section {
    padding: 80px 0;
    /* Un fondo gris muy sutil para esta sección, como en la imagen */
    background-color: #fcfcfc; 
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    gap: 30px;
}

.news-card {
    display: flex;
    align-items: center;
    background-color: #fff; /* Fondo blanco para la tarjeta */
    transition: box-shadow 0.3s ease;
    border: 1px solid #f0f0f0; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Para que la imagen no se salga */
}

.news-card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Sombra sutil al pasar el ratón */
}

.news-image {
    flex-basis: 40%; /* La imagen ocupa el 40% */
}

.news-image img {
    width: 100%;
    height: 100%; /* Asegura que la imagen llene el contenedor */
    object-fit: cover; /* Recorta la imagen para que quepa */
    display: block;
}

.news-content {
    flex-basis: 60%; /* El contenido ocupa el 60% */
    padding: 25px;
    box-sizing: border-box;
}

.news-meta {
    font-size: 0.9em;
    color: #FF6B6B; /* Meta info en rosa */
    margin: 0 0 10px 0;
}

.news-content h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.news-content h3 a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

.news-content h3 a:hover {
    color: #FF6B6B;
}

.news-stats {
    display: flex;
    gap: 20px;
    font-size: 0.9em;
    color: #777;
}

.news-stats span {
    display: flex;
    align-items: center;
}

.news-stats i {
    color: #FF6B6B; /* Iconos en rosa */
    margin-right: 8px;
}

/* --- Contact Cards Section (Sección 11 - CORREGIDA) --- */
.contact-cards-section {
    padding: 80px 0;
    background-color: #fff; 
}

.contact-cards-grid {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact-card {
    flex-basis: 22%; /* 4 columnas, con espacio */
    min-width: 250px;
    flex-grow: 1;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: left; /* CORRECCIÓN: Alinear a la izquierda */
    box-sizing: border-box; /* Asegura padding correcto */
}

.contact-card i {
    font-size: 2.5em;
    margin-bottom: 25px; /* Más espacio */
    display: block; /* Para que el margen funcione */
}

.contact-card h3 {
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 15px 0;
    text-transform: uppercase; /* Como en la imagen */
}

.contact-card p {
    font-size: 1em;
    line-height: 1.6;
    margin: 0 0 5px 0;
}

/* --- Colores de Tarjetas de Contacto --- */
.contact-card.card-light-pink {
    background-color: #F8D8D8;
    color: #FF6B6B; /* Texto */
}

.contact-card.card-light-pink i {
    color: #FF6B6B; /* Icono */
}

.contact-card.card-light-pink h3 {
    color: #FF6B6B;
}
.contact-card.card-light-pink p {
    color: #e05e5e; /* Un poco más oscuro para legibilidad */
    opacity: 1;
}


.contact-card.card-main-pink {
    background-color: #FF6B6B;
    color: #fff; /* Texto */
}

.contact-card.card-main-pink i {
    color: #fff; /* Icono */
}

.contact-card.card-main-pink h3 {
    color: #fff;
}
.contact-card.card-main-pink p {
    color: #fdeaea; /* Blanco un poco más suave */
    opacity: 1;
}

/* --- Site Footer (Sección 12 - CORREGIDO) --- */
.site-footer {
    background-color: #FF6B6B; /* Rosa principal */
    color: #fdeaea; /* Texto blanco-rosa pálido */
    padding: 60px 0 0 0; /* Padding superior, sin padding inferior (lo maneja .footer-bottom) */
    font-size: 0.95em;
    line-height: 1.7;
}

/* Re-configura .container para el footer, para que no sea flex por defecto */
.site-footer .container {
    /*display: block; /* Anula el flex global */
    position: relative;
}

.footer-grid {
    display: grid;
    /* 4 columnas */
    grid-template-columns: 30% 20% 25% 25%; 
    gap: 30px;
    align-items: start; /* Alinea las columnas arriba */
}

.footer-col {
    padding-right: 20px; /* Espacio para que no se peguen */
}

/* Columna 1: Logo y Lema */
.footer-logo-col .footer-logo {
    height: 40px; /* Altura del logo en blanco */
    margin-bottom: 20px;
}

.footer-logo-col p {
    max-width: 250px; /* Limita el ancho del lema */
    margin: 0;
    color: #fff; /* Lema en blanco más puro */
}

/* Títulos de las columnas del footer */
.footer-col-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff; /* Títulos en blanco puro */
    margin: 0 0 20px 0;
}

/* Columna 2: Enlaces */
.footer-links-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links-col li {
    margin-bottom: 10px;
}

.footer-links-col a {
    text-decoration: none;
    color: #fdeaea; /* Texto blanco-rosa pálido */
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-links-col a:hover {
    color: #fff; /* Blanco puro al pasar el ratón */
    padding-left: 5px; /* Pequeño efecto de indentación */
}

/* Columna 3: Contacto */
.footer-contact-col p {
    margin: 0 0 10px 0;
    color: #fdeaea;
}

/* Columna 4: Newsletter */
.newsletter-input-wrapper {
    position: relative;
    background-color: #F8D8D8; /* Fondo rosa claro */
    border-radius: 8px; /* Bordes rectos como en la imagen */
    overflow: hidden;
    max-width: 300px;
}

.newsletter-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 15px 50px 15px 20px; /* Espacio para el botón y a la izquierda */
    color: #FF6B6B; /* Texto rosa oscuro */
    font-size: 0.9em;
    box-sizing: border-box;
}

.newsletter-input::placeholder {
    color: #e05e5e; /* Placeholder rosa oscuro */
    opacity: 0.8;
}

.newsletter-btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    border: none;
    background: transparent;
    color: #FF6B6B; /* Icono rosa oscuro */
    font-size: 1.2em;
    cursor: pointer;
    transition: color 0.3s ease;
}

.newsletter-btn:hover {
    color: #c04e4e; /* Más oscuro al pasar el ratón */
}

/* --- Barra Inferior del Footer --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ff8f8f; /* Línea divisora rosa claro */
    padding: 30px 0;
    margin-top: 40px; /* Espacio sobre la línea */
}

.footer-copyright {
    margin: 0;
    color: #fdeaea;
    font-size: 0.9em;
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    color: #FF6B6B; /* Icono rosa */
    background-color: #F8D8D8; /* Círculo rosa claro */
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background-color: #fff; /* Círculo blanco al pasar el ratón */
    color: #FF6B6B;
}

/* --- About Content Section (Página About Us) --- */
.about-content-section {
    padding: 80px 0;
    background-color: #fff;
}

.about-content-grid {
    display: flex;
    align-items: center;
    gap: 40px;
}

.about-image-wrapper {
    flex-basis: 45%;
    flex-shrink: 0; /* Evita que la imagen se encoja */
}

.about-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.about-text-content {
    flex-basis: 55%;
}

.about-text-content p {
    color: #777;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- Testimonial Section (Página About Us) --- */
.testimonial-section {
    padding: 80px 0;
    position: relative;
    /* REEMPLAZA ESTA URL por la de tu imagen de fondo */
    background-image: url('https://placehold.co/1920x500/E8E8E8/AAA?text=Fondo+Testimonio');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto parallax */
}

.testimonial-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Superposición rosa translúcida */
    background-color: rgba(255, 107, 107, 0.85); 
    z-index: 1;
}

/* Reajuste del container para esta sección */
.testimonial-section .container {
    position: relative;
    z-index: 2;
    justify-content: center; /* Centra el contenido */
    align-items: center;
    display: block; /* Anula el flex global */
}

.testimonial-content {
    max-width: 700px; /* Ancho máximo del testimonio */
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.testimonial-content .fa-quote-left {
    font-size: 3em;
    opacity: 0.7;
    margin-bottom: 20px;
}

.testimonial-content p {
    font-size: 1.3em;
    font-style: italic;
    line-height: 1.7;
    margin: 0 0 30px 0;
}

.testimonial-author {
    font-size: 1.1em;
    font-weight: bold;
    display: inline-block;
    padding-top: 20px;
    margin-bottom: 30px;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
}

/* Ajuste de los slider-dots para fondo oscuro */
.testimonial-section .slider-dots {
    margin-top: 0; /* Ya tiene margen del autor */
}

.testimonial-section .slider-dots .dot {
    background-color: rgba(255, 255, 255, 0.4); /* Puntos inactivos blancos translúcidos */
}

.testimonial-section .slider-dots .dot.active {
    background-color: #fff; /* Punto activo blanco */
}


/* --- (NUEVO) News Page Content Area --- */
.page-content-area {
    padding: 80px 0;
    background-color: #fcfcfc; /* Mismo fondo que .news-section */
}

.news-layout-container {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.news-main-content {
    flex: 7; /* Ocupa 7 partes del espacio */
}

.news-sidebar {
    flex: 3; /* Ocupa 3 partes del espacio */
    position: sticky; /* Sidebar se queda fija al hacer scroll */
    top: 40px; /* Espacio desde arriba */
}

/* --- Estilos de Artículos (Columna Principal) --- */
.news-list-item {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: box-shadow 0.3s ease;
}

.news-list-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
}

.news-list-image img {
    width: 100%;
    display: block;
}

.news-list-content {
    padding: 30px 35px;
}

.news-list-content .news-meta {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para responsividad */
}

.news-list-content .news-stats {
    margin: 0; /* Anula el margen de .news-section */
}

.news-list-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #FF6B6B;
    font-size: 2em;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 15px;
}

.news-list-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-list-title a:hover {
    color: #e05e5e;
}

.news-list-content p {
    color: #777;
    line-height: 1.6;
    margin-bottom: 25px;
}

.read-more-btn {
    background: #F8D8D8;
    color: #FF6B6B;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: all 0.3s ease;
    display: inline-block;
}

.read-more-btn:hover {
    background: #FF6B6B;
    color: #fff;
}

.read-more-btn i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.read-more-btn:hover i {
    transform: translateX(3px);
}

/* --- Estilos del Sidebar --- */
.sidebar-widget {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden; /* Para que el contenido no se salga */
}

.widget-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #FF6B6B;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0;
    padding: 20px 25px;
    border-bottom: 1px solid #f0f0f0;
}

/* --- Widget de Búsqueda --- */
.search-widget {
    padding: 0;
    border: none; /* Sin borde, solo el form */
}

.search-form {
    position: relative;
    display: flex;
}

.search-form input {
    width: 100%;
    border: none;
    background: #FF6B6B;
    color: #fff;
    padding: 20px 50px 20px 25px;
    font-size: 1em;
    border-radius: 8px;
    box-sizing: border-box;
}

.search-form input::placeholder {
    color: #fdeaea;
    opacity: 1;
}

.search-form input:focus {
    outline: none;
}

.search-form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.1em;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.search-form button:hover {
    opacity: 1;
}

/* --- Widget de Posts Recientes --- */
.recent-posts-widget ul {
    list-style: none;
    margin: 0;
    padding: 25px;
}

.recent-posts-widget li {
    margin-bottom: 20px;
}

.recent-posts-widget li:last-child {
    margin-bottom: 0;
}

.recent-post-item {
    display: flex;
    gap: 15px;
    text-decoration: none;
    align-items: center; /* Centra verticalmente */
}

.recent-post-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0; /* Evita que la imagen se encoja */
}

.recent-post-info small {
    display: block;
    color: #FF6B6B;
    font-size: 0.8em;
    margin-bottom: 5px;
}

.recent-post-info span {
    display: block;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

.recent-post-item:hover .recent-post-info span {
    color: #FF6B6B;
}

/* --- Widget de Categorías --- */
.categories-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.categories-widget li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    transition: all 0.3s ease;
}

.categories-widget li:last-child a {
    border-bottom: none;
}

.categories-widget li a:hover {
    background: #fdf5f5;
    color: #FF6B6B;
}

.categories-widget li a span {
    background: #F8D8D8;
    color: #FF6B6B;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.8em;
    font-weight: bold;
    transition: all 0.3s ease;
}

.categories-widget li a:hover span {
    background: #FF6B6B;
    color: #fff;
}

/* --- (NUEVO) News Single Content --- */

.news-single-item {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
}

.news-single-image {
    margin-bottom: 30px; /* Espacio entre imagen y texto */
}

.news-single-image img {
    width: 100%;
    display: block;
    border-radius: 8px; /* Bordes redondeados solo para la imagen */
}

.news-single-content {
    padding: 0 35px 30px 35px; /* Padding solo horizontal y abajo */
}

.news-single-content p {
    color: #555; /* Texto un poco más oscuro que el de la lista */
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* --- (NUEVO) Post Pagination --- */
.post-pagination {
    display: flex;
    justify-content: space-between;
    padding: 30px 35px;
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
}

.pagination-btn {
    background: #F8D8D8;
    color: #FF6B6B;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.pagination-btn:hover {
    background: #FF6B6B;
    color: #fff;
}

.pagination-btn.prev-post i {
    margin-right: 8px;
}

.pagination-btn.next-post i {
    margin-left: 8px;
}

/* --- (NUEVO) Banner de Página con Overlay (para Services) --- */
.page-banner.with-overlay {
    position: relative; /* Necesario para el overlay */
}

.page-banner.with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Overlay oscuro sutil */
    z-index: 1; /* Detrás del texto, delante de la imagen */
}

.page-banner.with-overlay img {
    position: relative;
    z-index: 0; /* Detrás del ::before */
}

.page-banner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Encima del overlay ::before */
}

/* --- (NUEVO) Estilo para el mapa en contact.html --- */
.map-section {
    width: 100%;
    line-height: 0; /* Elimina espacio extra debajo de la imagen */
}

.map-section img {
    width: 100%;
    height: auto;
    display: block; /* Asegura que no haya espacio extra */
}
/* --- Fin (NUEVO) --- */


/* --- (NUEVO) Cuadrícula de Servicios (Página Services) --- */
.services-page-grid-section {
    padding: 80px 0;
    background-color: #fcfcfc; /* Fondo gris claro sutil */
}

.services-grid-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 30px;
}

.service-grid-card {
    display: block;
    text-decoration: none;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.service-card-image {
    position: relative;
}

.service-card-image img {
    width: 100%;
    display: block;
    height: 250px; /* Altura fija para las imágenes */
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-grid-card:hover .service-card-image img {
    transform: scale(1.05); /* Ligero zoom a la imagen */
}

.service-card-icon {
    position: absolute;
    bottom: -25px; /* Mitad adentro, mitad afuera */
    right: 25px;
    background-color: #FF6B6B; /* Rosa principal */
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 2; /* Encima del overlay */
}

/* --- Overlay para estado Activo / Hover --- */
.service-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FF6B6B; /* Rosa principal */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1; /* Encima de la imagen, debajo del icono */
}

.service-grid-card.active .service-card-image::before,
.service-grid-card:hover .service-card-image::before {
    opacity: 0.8; /* Muestra el overlay rosa */
}

.service-grid-card.active .service-card-icon,
.service-grid-card:hover .service-card-icon {
    background-color: #fff; /* Icono se vuelve blanco */
    color: #FF6B6B; /* Icono interior se vuelve rosa */
}
/* --- Fin Overlay --- */

.service-card-content {
    padding: 40px 25px 30px 25px; /* Padding extra arriba por el icono */
}

.service-card-content h3 {
    font-size: 1.4em;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.service-card-content p {
    color: #777;
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.service-card-link {
    color: #FF6B6B;
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: none;
}

.service-card-link i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.service-grid-card:hover .service-card-link i {
    transform: translateX(3px); /* Mueve la flecha */
}

.service-grid-card:hover .service-card-content h3 {
    color: #FF6B6B; /* Cambia color del título en hover */
}

/* --- (NUEVO) Service Single Content --- */

/* Contenedor para la barra lateral de navegación de servicios */
.service-tabs-sidebar {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.service-tabs-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Reutilizamos .service-tab de index.html, que ya tiene todos los estilos */

/* Contenedor del contenido principal (columna derecha) */
.service-single-main-content {
    /* No usamos la caja blanca de .news-single-item para que coincida con la imagen */
    padding: 0; 
}

.service-single-image {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 30px;
    height: auto;
    display: block;
}

.service-single-title {
    /* Estilo copiado de .service-text h3 */
    font-size: 1.8em;
    color: #333;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
}

.service-single-main-content p {
    /* Estilo copiado de .about-text-content p */
    color: #777;
    line-height: 1.6;
    margin-bottom: 20px;
}
/* Reutilizamos .service-features de index.html */


/* --- Responsive adjustments --- */
@media (max-width: 992px) {
    .hero-section .hero-content {
        max-width: 100%; /* El contenido ocupa todo el ancho */
        text-align: center; /* Texto centrado */
    }
    .hero-section .section-subtitle {
        text-align: center; /* Centra subtítulo en tablets */
    }

    .hero-section::after {
        /* Oculta la imagen de fondo en tablets */
        display: none; 
    }

    .top-bar .contact-info {
        justify-content: center; /* Centra la info de contacto */
        width: 100%;
        margin-top: 15px;
    }

    .main-nav .container {
        justify-content: center;
    }

    /* Responsivo para Servicios */
    .services-container {
        flex-direction: column;
    }
    .service-tabs, .service-content {
        flex-basis: 100%;
    }

    /* Responsivo para Especialidades */
    .specialties-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablets */
    }

    /* Responsivo para Formulario de Cita */
    .appointment-form-section .container {
        flex-direction: column;
        align-items: center;
    }
    .appointment-text {
        flex-basis: 100%;
        max-width: 600px;
        padding-right: 0;
        margin-bottom: 30px;
        text-align: center;
    }
    .appointment-form-wrapper {
        flex-basis: 100%;
        width: 100%;
        max-width: 600px; /* Limita el ancho del form */
    }
    .appointment-text .section-title-serif {
        text-align: center; /* Centra el título en tablets/móviles */
    }

    /* Responsivo para Doctores */
    .doctors-grid {
        justify-content: center; /* Centra las tarjetas */
    }
    .doctor-card {
        flex-basis: 45%; /* 2 tarjetas por fila en tablets */
    }

    /* Responsivo para Noticias */
    .news-grid {
        grid-template-columns: 1fr; /* 1 columna en tablets */
    }

    /* Responsivo para Tarjetas de Contacto */
    .contact-card {
        flex-basis: 45%; /* 2 por fila en tablet */
    }

    /* Responsivo para Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas en tablet */
        gap: 40px;
    }
    .footer-logo-col {
        grid-column: 1 / -1; /* El logo ocupa todo el ancho */
        text-align: center;
    }
    .footer-logo-col p {
        max-width: 100%;
    }
    .footer-logo-col .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }

    /* Responsivo para About Content */
    .about-content-grid {
        flex-direction: column; /* Apila las columnas */
    }
    .about-text-content {
        text-align: center; /* Centra el texto en tablet */
    }
    .about-text-content .section-subtitle,
    .about-text-content .section-title-serif {
        text-align: center; /* Centra los títulos */
    }
    .about-text-content .service-features {
        column-count: 1; /* 1 columna para la lista */
        display: inline-block; /* Centra la lista */
        text-align: left; /* Mantiene el texto de la lista alineado */
    }
}

@media (max-width: 768px) {
    .top-bar .container,
    .main-nav .container {
        flex-direction: column;
        gap: 15px;
    }
    
    .top-bar .contact-info {
        flex-direction: column;
        align-items: center; /* Centra los items de contacto */
        gap: 10px;
        width: 100%;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .hero-section h1 {
        font-size: 2.5em; /* Título más pequeño */
    }

    .appointment-cards .container {
        flex-direction: column;
        align-items: center;
        margin-top: 20px; /* Ajusta el margen superior para móviles */
    }

    .appointment-cards .card {
        width: 90%;
        margin-bottom: 20px;
    }

    /* --- Responsivo para Welcome y Títulos --- */
    .section-title-serif {
        font-size: 2.2em; /* Título más pequeño en móviles */
    }
    .welcome-section .welcome-text {
        font-size: 1em;
        padding: 0 15px; /* Evita que el texto toque los bordes */
        box-sizing: border-box;
    }
    .progress-bar-container {
        padding: 0 5%; /* Menos padding en móviles */
        margin-top: -5px; /* Menos superposición */
    }
    .progress-bar {
        height: 8px;
    }

    /* --- Responsivo para Servicios --- */
    .service-content {
        flex-direction: column; /* Apila texto e imágenes */
    }
    .service-text, .service-images {
        flex-basis: 100%;
    }
    .service-features {
        column-count: 1; /* Una sola columna para la lista */
    }

    /* --- Responsivo para Especialidades --- */
    .specialties-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
    }
    .specialty-card {
        padding: 30px 15px; /* Menos padding */
    }
    .specialty-card span {
        font-size: 1em; /* Texto más pequeño para que quepa */
    }

    /* --- Responsivo para Formulario de Cita --- */
    .form-grid {
        grid-template-columns: 1fr; /* Una columna */
    }
    .form-field:nth-child(odd):not(.full-width) {
        border-right: none; /* Elimina el borde derecho */
    }

    /* --- Responsivo para Doctores --- */
    .doctor-card {
        flex-basis: 80%; /* 1 tarjeta por fila en móviles */
        max-width: 350px; /* Ancho máximo para que no se estire demasiado */
    }

    /* --- Responsivo para Noticias --- */
    .news-card {
        flex-direction: column; /* Apila imagen y texto */
    }
    .news-image, .news-content {
        flex-basis: 100%; /* Ocupa todo el ancho */
    }
    .news-content {
        text-align: center;
    }
    .news-stats {
        justify-content: center; /* Centra las estadísticas */
    }

    /* --- Responsivo para Tarjetas de Contacto --- */
    .contact-cards-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .contact-card {
        width: 90%;
        max-width: 350px; /* Ancho máximo */
        flex-basis: 100%;
        padding: 30px 25px;
    }

    /* --- Responsivo para Footer --- */
    .footer-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        text-align: center;
    }
    .footer-col {
        padding-right: 0;
    }
    .footer-links-col ul {
        display: inline-block;
        text-align: left; /* Mantiene los enlaces alineados a la izquierda */
    }
    .newsletter-input-wrapper {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-bottom {
        flex-direction: column; /* Apila copyright y redes */
        gap: 20px;
        padding: 25px 0;
    }
    .footer-copyright {
        order: 2; /* El copyright va después */
    }
    .footer-socials {
        order: 1; /* Las redes van primero */
    }

    /* Responsivo para About Content */
    .about-content-grid {
        flex-direction: column; /* Apila las columnas */
    }
    .about-text-content {
        text-align: center; /* Centra el texto en móvil */
    }
    .about-text-content .section-subtitle,
    .about-text-content .section-title-serif {
        text-align: center; /* Centra los títulos */
    }
    .about-text-content .service-features {
        column-count: 1; /* 1 columna para la lista */
        display: inline-block; /* Centra la lista */
        text-align: left; /* Mantiene el texto de la lista alineado */
    }

    /* (NUEVO) Responsivo para News Page Layout */
    .news-layout-container {
        flex-direction: column; /* Apila las columnas */
    }
    .news-sidebar {
        position: static; /* Quita el sticky */
        width: 100%;
        max-width: 400px; /* Limita el ancho del sidebar */
        margin: 0 auto; /* Centra el sidebar */
    }
}

@media (max-width: 768px) {
    /* Responsivo para Testimonial */
    .testimonial-section {
        padding: 60px 20px; /* Menos padding en móvil */
        background-attachment: scroll; /* Desactiva parallax en móvil */
    }
    .testimonial-content p {
        font-size: 1.1em; /* Texto más pequeño */
    }

    /* (NUEVO) Responsivo para News Page */
    .news-list-content {
        padding: 25px; /* Menos padding en móvil */
    }
    .news-list-title {
        font-size: 1.6em; /* Título más pequeño */
    }
    .news-list-content .news-meta {
        font-size: 0.9em;
    }

    /* (NUEVO) Responsivo para News Single */
    .news-single-content {
        padding: 0 20px 20px 20px;
    }
    .news-single-content p {
        font-size: 1em;
    }
    .post-pagination {
        padding: 20px 25px;
        flex-direction: column; /* Apila los botones */
        gap: 15px;
    }
    .pagination-btn {
        justify-content: center; /* Centra el texto del botón */
    }

    /* (NUEVO) Responsivo para título de banner */
    .page-banner-overlay .page-title {
        font-size: 2.5em; /* Título más pequeño */
    }

    /* (NUEVO) Responsivo para Cuadrícula de Servicios */
    .services-grid-main {
        grid-template-columns: 1fr; /* 1 columna */
    }
}

/* --- (NUEVO) Contact Page Form & Info Grid --- */
.contact-page-main {
    padding: 80px 0;
    background-color: #fff;
}

.contact-page-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.contact-page-form-wrapper {
    flex-basis: 60%;
    background-color: #FF6B6B; /* Rosa principal */
    border-radius: 8px;
    overflow: hidden;
}

.contact-form-styled .form-row {
    display: flex;
    border-bottom: 1px solid #ff8f8f; /* Línea rosa claro */
}

.contact-form-styled input,
.contact-form-styled textarea {
    background: transparent;
    border: none;
    padding: 20px 25px;
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    width: 100%;
}

.contact-form-styled input:first-child {
    border-right: 1px solid #ff8f8f; /* Borde entre Name y Email */
    width: 50%;
}
 .contact-form-styled input:last-child {
    width: 50%;
 }
 .contact-form-styled .form-row:nth-last-of-type(2) { /* El penúltimo (textarea) no tiene borde abajo */
     border-bottom: none;
 }

.contact-form-styled textarea {
    resize: vertical;
    min-height: 180px; /* Más alto para que coincida */
}

.contact-form-styled input::placeholder,
.contact-form-styled textarea::placeholder {
    color: #fdeaea;
    opacity: 1;
}

.contact-submit-btn {
    display: block;
    width: 100%;
    background: #F8D8D8; /* Rosa claro */
    color: #FF6B6B; /* Texto rosa oscuro */
    border: none;
    padding: 20px 25px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.contact-submit-btn:hover {
    background-color: #fff;
}


.contact-page-info-grid {
    flex-basis: 40%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-info-card-small {
    /* Copia estilos de .contact-card pero más simple */
    padding: 30px 25px;
    border-radius: 8px;
    text-align: left;
}

.contact-info-card-small i {
    font-size: 2em;
    margin-bottom: 20px;
    display: block;
}

.contact-info-card-small h3 {
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.contact-info-card-small p {
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0 0 5px 0;
}

/* Reutilizamos los colores de .contact-card */
.contact-info-card-small.card-light-pink {
    background-color: #F8D8D8;
    color: #FF6B6B;
}
.contact-info-card-small.card-light-pink i,
.contact-info-card-small.card-light-pink h3 {
    color: #FF6B6B;
}
.contact-info-card-small.card-light-pink p {
    color: #e05e5e;
}

.contact-info-card-small.card-main-pink {
    background-color: #FF6B6B;
    color: #fff;
}
.contact-info-card-small.card-main-pink i,
.contact-info-card-small.card-main-pink h3 {
    color: #fff;
}
.contact-info-card-small.card-main-pink p {
    color: #fdeaea;
}

/* (NUEVO) Responsivo para la nueva sección de contacto */
@media (max-width: 992px) {
    .contact-page-layout {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .contact-page-form-wrapper,
    .contact-page-info-grid {
        flex-basis: 100%;
        width: 100%;
        max-width: 600px; /* Limita el ancho en tablet */
    }
}

@media (max-width: 768px) {
    .contact-form-styled .form-row {
        flex-direction: column;
    }
    .contact-form-styled input:first-child,
    .contact-form-styled input:last-child {
        width: 100%;
        border-right: none;
    }
    .contact-form-styled input:first-child {
         border-bottom: 1px solid #ff8f8f; /* Añade borde inferior en móvil */
    }
    .contact-page-info-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        max-width: 350px; /* Limita ancho de tarjetas */
    }
}

/* --- (NUEVO) Appointment Page Content --- */
.appointment-page-main {
    padding: 80px 0;
    background-color: #fff;
}

.appointment-page-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.appointment-page-left {
    flex-basis: 60%;
}

.appointment-page-right {
    flex-basis: 40%;
}

.appointment-page-left p {
    color: #777;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- (NUEVO) Caja de Horarios --- */
.schedule-box {
    background-color: #FF6B6B; /* Rosa principal */
    border-radius: 8px;
    padding: 40px 30px;
    color: #fdeaea; /* Texto rosa pálido */
}

.schedule-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #fff;
    font-size: 2.2em;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 30px;
}

.schedule-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.schedule-list li {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    padding: 12px 0;
    border-bottom: 1px solid #ff8f8f; /* Borde rosa claro */
}

.schedule-list li:last-child {
    border-bottom: none;
}

.schedule-list .hours {
    font-weight: bold;
}

.schedule-list .closed {
    font-style: italic;
    font-weight: normal;
}

.schedule-divider {
    border: 0;
    border-top: 1px solid #ff8f8f;
    margin: 30px 0;
}

.schedule-emergency {
    text-align: center;
}

.schedule-emergency i {
    font-size: 2em;
    color: #fff;
    margin-bottom: 15px;
    display: block;
}

.schedule-emergency-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #fff;
    font-size: 1.5em;
    margin: 0 0 5px 0;
    font-weight: normal;
}

.schedule-emergency p {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    margin: 0;
}

/* (NUEVO) Responsivo para Appointment Page */
@media (max-width: 992px) {
    .appointment-page-layout {
        flex-direction: column;
        align-items: center;
    }
    .appointment-page-left,
    .appointment-page-right {
        flex-basis: 100%;
        width: 100%;
        max-width: 600px; /* Limita el ancho */
    }
    .appointment-page-right {
        margin-top: 40px;
    }
    .appointment-page-left .section-title-serif,
    .appointment-page-left p {
        text-align: center;
    }
}