Symfony Profiler

{% block body %}
<style>
/* ===== VARIABLES PARA MODO OSCURO ===== */
[data-theme="dark"] {
--bg-primary: #1a1d23;
--bg-secondary: #24292e;
--bg-tertiary: #2d333b;
--text-primary: #f0f6fc;
--text-secondary: #c9d1d9;
--text-muted: #8b949e;
--border-color: #30363d;
--card-bg: #24292e;
--header-bg: #1a1d23;
--shadow-color: rgba(0, 0, 0, 0.3);
--hover-shadow: rgba(0, 0, 0, 0.5);
--link-color: #58a6ff;
--link-hover: #79c0ff;
}
/* ===== ESTILOS SOLO PARA MODO OSCURO ===== */
[data-theme="dark"] body {
background-color: var(--bg-primary);
color: var(--text-primary);
}
/* ===== ENLACES DE CORREO ===== */
[data-theme="dark"] a[href^="mailto:"] {
color: var(--link-color) !important;
text-decoration: none;
transition: color 0.2s ease;
}
[data-theme="dark"] a[href^="mailto:"]:hover {
color: var(--link-hover) !important;
text-decoration: underline;
}
/* ===== ENCABEZADOS DEL FOOTER EN BLANCO ===== */
[data-theme="dark"] footer h5,
[data-theme="dark"] footer h4,
[data-theme="dark"] footer h3,
[data-theme="dark"] footer .footer-heading {
color: var(--text-primary) !important;
}
/* ===== HOVER EN AZUL CLARO PARA FOOTER ===== */
[data-theme="dark"] footer a:hover {
color: var(--link-hover) !important;
}
/* ===== SECCIÓN HERO ===== */
[data-theme="dark"] .hero-section {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
}
[data-theme="dark"] .main-title,
[data-theme="dark"] .text-dark-custom {
color: var(--text-primary) !important;
}
/* ===== CARDS ===== */
[data-theme="dark"] .card {
background-color: var(--card-bg);
border-color: var(--border-color);
color: var(--text-primary);
box-shadow: 0 4px 20px var(--shadow-color);
}
[data-theme="dark"] .card-header {
background-color: var(--card-bg) !important;
border-bottom-color: var(--border-color);
}
/* ===== SERVICIOS ===== */
[data-theme="dark"] .servicio-card-profesional {
background: var(--card-bg);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .servicio-card-profesional .card-header {
background: transparent !important;
}
[data-theme="dark"] .features-list .feature-item {
background: rgba(13, 110, 253, 0.05);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .category-header {
color: var(--text-primary);
}
/* ===== EXPERIENCIA ===== */
[data-theme="dark"] .features-list .feature-item {
background: var(--bg-secondary);
border-left-color: var(--border-color);
}
/* ===== CONTACTO ===== */
[data-theme="dark"] .contact-card {
background: var(--card-bg);
}
[data-theme="dark"] .map-container {
border-color: var(--border-color);
}
/* ===== FORMULARIOS MÉDICOS ===== */
[data-theme="dark"] .document-item {
border-bottom-color: var(--border-color);
}
/* ===== EQUIPO ===== */
[data-theme="dark"] .avatar-wrapper .img-cover {
border-color: var(--bg-secondary);
}
/* ===== PRIVACIDAD Y TÉRMINOS ===== */
[data-theme="dark"] .privacy-card,
[data-theme="dark"] .terms-card {
background: var(--card-bg);
}
[data-theme="dark"] .alert-light {
background-color: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-primary);
}
/* ===== MODALES MEJORADOS ===== */
[data-theme="dark"] .modal-content {
background-color: var(--card-bg);
color: var(--text-primary);
border-color: var(--border-color);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .modal-header {
border-bottom-color: var(--border-color);
background-color: var(--bg-secondary);
padding: 1.25rem 1.5rem;
}
[data-theme="dark"] .modal-title {
color: var(--text-primary);
font-weight: 600;
}
[data-theme="dark"] .modal-body {
padding: 1.5rem;
}
[data-theme="dark"] .modal-footer {
border-top-color: var(--border-color);
background-color: var(--bg-secondary);
padding: 1rem 1.5rem;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
background-color: var(--bg-primary);
border-color: var(--border-color);
color: var(--text-primary);
transition: all 0.3s ease;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
background-color: var(--bg-primary);
border-color: #0d6efd;
color: var(--text-primary);
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
[data-theme="dark"] .form-label {
color: var(--text-primary);
font-weight: 500;
}
[data-theme="dark"] .btn-close {
filter: invert(1) brightness(1.5);
opacity: 0.8;
}
[data-theme="dark"] .btn-close:hover {
opacity: 1;
}
/* ===== BOTÓN FLOTANTE ===== */
[data-theme="dark"] .dropdown-menu-user {
background: var(--card-bg);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item-user {
color: var(--text-primary);
}
/* ===== TEXTOS ESPECÍFICOS ===== */
[data-theme="dark"] .text-muted {
color: var(--text-muted) !important;
}
[data-theme="dark"] .text-dark {
color: var(--text-primary) !important;
}
[data-theme="dark"] .bg-light {
background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] .bg-white {
background-color: var(--card-bg) !important;
}
[data-theme="dark"] .border {
border-color: var(--border-color) !important;
}
[data-theme="dark"] .border-bottom {
border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .border-top {
border-top-color: var(--border-color) !important;
}
/* ===== BADGES Y ALERTAS ===== */
[data-theme="dark"] .badge.bg-white {
background-color: var(--card-bg) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .alert-success {
background-color: rgba(25, 135, 84, 0.1);
border-color: rgba(25, 135, 84, 0.2);
color: var(--text-primary);
}
[data-theme="dark"] .alert-info {
background-color: rgba(13, 202, 240, 0.1);
border-color: rgba(13, 202, 240, 0.2);
color: var(--text-primary);
}
[data-theme="dark"] .alert-warning {
background-color: rgba(255, 193, 7, 0.1);
border-color: rgba(255, 193, 7, 0.2);
color: var(--text-primary);
}
[data-theme="dark"] .alert-danger {
background-color: rgba(220, 53, 69, 0.1);
border-color: rgba(220, 53, 69, 0.2);
color: var(--text-primary);
}
/* ===== ICON WRAPPERS ===== */
[data-theme="dark"] .icon-wrapper {
background-color: var(--bg-secondary) !important;
}
/* ===== BOTONES ===== */
[data-theme="dark"] .btn-outline-primary {
color: var(--link-color);
border-color: var(--link-color);
}
[data-theme="dark"] .btn-outline-primary:hover {
background-color: var(--link-color);
border-color: var(--link-color);
color: var(--bg-primary);
}
/* ===== ESTILOS ESPECÍFICOS PARA FORMULARIO DE CITAS ===== */
[data-theme="dark"] #agendarCitaModal .form-group,
[data-theme="dark"] #agendarCitaPaso2 .form-group,
[data-theme="dark"] #agendarCitaPaso3 .form-group,
[data-theme="dark"] #confirmacionFinalModal .form-group {
margin-bottom: 1.5rem;
}
[data-theme="dark"] #agendarCitaModal .form-label,
[data-theme="dark"] #agendarCitaPaso2 .form-label,
[data-theme="dark"] #agendarCitaPaso3 .form-label,
[data-theme="dark"] #confirmacionFinalModal .form-label {
color: var(--text-primary);
font-weight: 500;
margin-bottom: 0.5rem;
display: block;
}
[data-theme="dark"] #agendarCitaModal .modal-body,
[data-theme="dark"] #agendarCitaPaso2 .modal-body,
[data-theme="dark"] #agendarCitaPaso3 .modal-body,
[data-theme="dark"] #confirmacionFinalModal .modal-body {
background-color: var(--bg-primary);
}
[data-theme="dark"] #agendarCitaModal .form-control,
[data-theme="dark"] #agendarCitaPaso2 .form-control,
[data-theme="dark"] #agendarCitaPaso3 .form-control,
[data-theme="dark"] #confirmacionFinalModal .form-control {
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 0.75rem 1rem;
border-radius: 0.375rem;
width: 100%;
transition: all 0.3s ease;
}
[data-theme="dark"] #agendarCitaModal .form-control:focus,
[data-theme="dark"] #agendarCitaPaso2 .form-control:focus,
[data-theme="dark"] #agendarCitaPaso3 .form-control:focus,
[data-theme="dark"] #confirmacionFinalModal .form-control:focus {
background-color: var(--bg-primary);
border-color: #0d6efd;
color: var(--text-primary);
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
outline: none;
}
[data-theme="dark"] #agendarCitaModal .form-control::placeholder,
[data-theme="dark"] #agendarCitaPaso2 .form-control::placeholder,
[data-theme="dark"] #agendarCitaPaso3 .form-control::placeholder,
[data-theme="dark"] #confirmacionFinalModal .form-control::placeholder {
color: var(--text-muted);
}
[data-theme="dark"] #agendarCitaModal .form-select,
[data-theme="dark"] #agendarCitaPaso2 .form-select,
[data-theme="dark"] #agendarCitaPaso3 .form-select,
[data-theme="dark"] #confirmacionFinalModal .form-select {
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 0.75rem 1rem;
border-radius: 0.375rem;
width: 100%;
}
[data-theme="dark"] #agendarCitaModal .form-select:focus,
[data-theme="dark"] #agendarCitaPaso2 .form-select:focus,
[data-theme="dark"] #agendarCitaPaso3 .form-select:focus,
[data-theme="dark"] #confirmacionFinalModal .form-select:focus {
background-color: var(--bg-primary);
border-color: #0d6efd;
color: var(--text-primary);
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
[data-theme="dark"] #agendarCitaModal .step-indicator,
[data-theme="dark"] #agendarCitaPaso2 .step-indicator,
[data-theme="dark"] #agendarCitaPaso3 .step-indicator,
[data-theme="dark"] #confirmacionFinalModal .step-indicator {
color: var(--text-muted);
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
[data-theme="dark"] #agendarCitaModal .step-title,
[data-theme="dark"] #agendarCitaPaso2 .step-title,
[data-theme="dark"] #agendarCitaPaso3 .step-title,
[data-theme="dark"] #confirmacionFinalModal .step-title {
color: var(--text-primary);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
[data-theme="dark"] #agendarCitaModal .form-row,
[data-theme="dark"] #agendarCitaPaso2 .form-row,
[data-theme="dark"] #agendarCitaPaso3 .form-row,
[data-theme="dark"] #confirmacionFinalModal .form-row {
display: flex;
flex-wrap: wrap;
margin: 0 -0.5rem;
}
[data-theme="dark"] #agendarCitaModal .form-col,
[data-theme="dark"] #agendarCitaPaso2 .form-col,
[data-theme="dark"] #agendarCitaPaso3 .form-col,
[data-theme="dark"] #confirmacionFinalModal .form-col {
flex: 1;
padding: 0 0.5rem;
min-width: 200px;
}
[data-theme="dark"] #agendarCitaModal .btn-cancel,
[data-theme="dark"] #agendarCitaPaso2 .btn-cancel,
[data-theme="dark"] #agendarCitaPaso3 .btn-cancel,
[data-theme="dark"] #confirmacionFinalModal .btn-cancel {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] #agendarCitaModal .btn-cancel:hover,
[data-theme="dark"] #agendarCitaPaso2 .btn-cancel:hover,
[data-theme="dark"] #agendarCitaPaso3 .btn-cancel:hover,
[data-theme="dark"] #confirmacionFinalModal .btn-cancel:hover {
background-color: var(--bg-secondary);
border-color: var(--text-muted);
}
[data-theme="dark"] #agendarCitaModal .btn-next,
[data-theme="dark"] #agendarCitaPaso2 .btn-next,
[data-theme="dark"] #agendarCitaPaso3 .btn-next,
[data-theme="dark"] #confirmacionFinalModal .btn-next {
background-color: #0d6efd;
border: 1px solid #0d6efd;
color: white;
}
[data-theme="dark"] #agendarCitaModal .btn-next:hover,
[data-theme="dark"] #agendarCitaPaso2 .btn-next:hover,
[data-theme="dark"] #agendarCitaPaso3 .btn-next:hover,
[data-theme="dark"] #confirmacionFinalModal .btn-next:hover {
background-color: #0b5ed7;
border-color: #0a58ca;
}
/* ===== ESTILOS ESPECÍFICOS PARA MODAL DE CONFIRMACIÓN ===== */
[data-theme="dark"] #confirmacionFinalModal .confirmation-icon {
color: #28a745;
font-size: 3rem;
margin-bottom: 1rem;
}
[data-theme="dark"] #confirmacionFinalModal .confirmation-title {
color: var(--text-primary);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
[data-theme="dark"] #confirmacionFinalModal .confirmation-message {
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
[data-theme="dark"] #confirmacionFinalModal .appointment-details {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 0.375rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
[data-theme="dark"] #confirmacionFinalModal .detail-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] #confirmacionFinalModal .detail-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
[data-theme="dark"] #confirmacionFinalModal .detail-label {
color: var(--text-muted);
font-weight: 500;
}
[data-theme="dark"] #confirmacionFinalModal .detail-value {
color: var(--text-primary);
font-weight: 600;
}
[data-theme="dark"] #confirmacionFinalModal .btn-confirm {
background-color: #28a745;
border: 1px solid #28a745;
color: white;
font-weight: 600;
}
[data-theme="dark"] #confirmacionFinalModal .btn-confirm:hover {
background-color: #218838;
border-color: #1e7e34;
}
/* ===== TRANSICIONES SUAVES ===== */
[data-theme="dark"] body,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
transition: all 0.3s ease;
}
</style>
<section class="hero-section py-5 bg-light position-relative overflow-hidden" style="padding-top: 180px !important;">
<div class="container position-relative">
<div class="row align-items-center min-vh-80">
{# Columna izquierda: Texto, botones y certificaciones #}
<div class="col-lg-6 mb-4 mb-lg-0">

<div class="badge-custom mb-4">
<i class="bi bi-award-fill icon-custom"></i>
<span class="fw-semibold">
<span class="text-content" data-lang="es">25+ años de <span class="text-dark-custom">excelencia médica</span></span>
<span class="text-content" data-lang="en" style="display:none;">25+ years of <span class="text-dark-custom">medical excellence</span></span>
</span>
</div>

<h1 class="main-title mb-4">
<span class="text-content" data-lang="es">Diagnóstico Médico <span class="text-primary-custom d-block d-md-inline">de Excelencia</span></span>
<span class="text-content" data-lang="en" style="display:none;">Medical Diagnosis <span class="text-primary-custom d-block d-md-inline">of Excellence</span></span>
</h1>
<p class="lead text-muted mb-4 fs-5 lh-base">
<span class="text-content" data-lang="es">Tecnología de vanguardia y profesionales especializados para brindarte el mejor servicio en diagnóstico por imágenes médicas con resultados precisos y confiables.</span>
<span class="text-content" data-lang="en" style="display:none;">State-of-the-art technology and specialized professionals to provide you with the best medical imaging diagnostic service with precise and reliable results.</span>
</p>

<div class="d-flex flex-column flex-sm-row gap-3 mb-5">
<a href="#" class="btn btn-primary btn-lg px-4 py-3 shadow-sm fw-semibold hover-lift" data-bs-toggle="modal" data-bs-target="#agendarCitaModal">
<span class="text-content" data-lang="es">
<i class="bi bi-calendar-check me-2"></i>
Agendar Cita
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-calendar-check me-2"></i>
Schedule Appointment
</span>
</a>
<a href="#servicios" class="btn btn-outline-primary btn-lg px-4 py-3 fw-semibold hover-lift">
<span class="text-content" data-lang="es">
<i class="bi bi-list-ul me-2"></i>
Ver Servicios
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-list-ul me-2"></i>
View Services
</span>
</a>
</div>

<div class="d-flex flex-column flex-sm-row gap-3 align-items-center">
<div class="d-flex align-items-center small">
<i class="bi bi-award me-2 text-primary fs-6"></i>
<span class="fw-semibold text-dark">
<span class="text-content" data-lang="es">Certificaciones:</span>
<span class="text-content" data-lang="en" style="display:none;">Certifications:</span>
</span>
</div>
<div class="d-flex gap-2 flex-wrap">
<span class="badge bg-white bg-opacity-80 border border-2 border-success text-success p-2 px-3 d-flex align-items-center shadow-sm hover-lift">
<i class="bi bi-check-circle-fill me-2"></i>
ISO 9001
</span>
<span class="badge bg-white bg-opacity-80 border border-2 border-primary text-primary p-2 px-3 d-flex align-items-center shadow-sm hover-lift">
<i class="bi bi-shield-lock-fill me-2"></i>
HIPAA Compliant
</span>
</div>
</div>
</div>
{# Columna derecha: Métricas #}
<div class="col-lg-6">
<div class="row g-4">

<div class="col-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="bi bi-people-fill text-primary fs-2"></i>
</div>
<h2 class="fw-bold text-primary display-5 mb-2">25,000+</h2>
<p class="text-muted mb-0 fw-semibold">
<span class="text-content" data-lang="es">Pacientes Atendidos</span>
<span class="text-content" data-lang="en" style="display:none;">Patients Served</span>
</p>
</div>
</div>
</div>

<div class="col-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="bi bi-award-fill text-success fs-2"></i>
</div>
<h2 class="fw-bold text-success display-5 mb-2">25+</h2>
<p class="text-muted mb-0 fw-semibold">
<span class="text-content" data-lang="es">Años de Experiencia</span>
<span class="text-content" data-lang="en" style="display:none;">Years of Experience</span>
</p>
</div>
</div>
</div>

<div class="col-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="bi bi-person-badge-fill text-info fs-2"></i>
</div>
<h2 class="fw-bold text-info display-5 mb-2">50+</h2>
<p class="text-muted mb-0 fw-semibold">
<span class="text-content" data-lang="es">Especialistas Médicos</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Specialists</span>
</p>
</div>
</div>
</div>

<div class="col-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="bi bi-graph-up-arrow text-warning fs-2"></i>
</div>
<h2 class="fw-bold text-warning display-5 mb-2">99.9%</h2>
<p class="text-muted mb-0 fw-semibold">
<span class="text-content" data-lang="es">Precisión Diagnóstica</span>
<span class="text-content" data-lang="en" style="display:none;">Diagnostic Accuracy</span>
</p>
</div>
</div>
</div>
</div>

<div class="mt-4 p-4 bg-white rounded-3 shadow-lg border-0 hover-lift">
<div class="row text-center g-3">
<div class="col-4">
<div class="d-flex flex-column align-items-center">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mb-2 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-clock-history text-success fs-5"></i>
</div>
<span class="fw-bold text-dark fs-5">24/7</span>
<small class="text-muted">
<span class="text-content" data-lang="es">Disponibilidad</span>
<span class="text-content" data-lang="en" style="display:none;">Availability</span>
</small>
</div>
</div>
<div class="col-4">
<div class="d-flex flex-column align-items-center">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mb-2 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-lightning-charge text-warning fs-5"></i>
</div>
<span class="fw-bold text-dark fs-5">24h</span>
<small class="text-muted">
<span class="text-content" data-lang="es">Resultados</span>
<span class="text-content" data-lang="en" style="display:none;">Results</span>
</small>
</div>
</div>
<div class="col-4">
<div class="d-flex flex-column align-items-center">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mb-2 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-star-fill text-warning fs-5"></i>
</div>
<span class="fw-bold text-dark fs-5">4.9/5</span>
<small class="text-muted">
<span class="text-content" data-lang="es">Rating</span>
<span class="text-content" data-lang="en" style="display:none;">Rating</span>
</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.badge-custom {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
border: 2px solid #0d6efd;
font-size: clamp(0.875rem, 2vw, 1rem);
padding: 0.5rem 1rem;
border-radius: 50rem;
display: inline-flex;
align-items: center;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.main-title {
font-weight: 700;
line-height: 1.2;
color: #212529;
font-size: clamp(2rem, 5vw, 3.5rem);
}
.text-primary-custom {
color: #0d6efd !important;
}
.text-dark-custom {
color: #212529 !important;
}
.icon-custom {
margin-right: 0.5rem;
color: #ffc107;
font-size: 1.25rem;
}
@media (max-width: 576px) {
.badge-custom {
padding: 0.375rem 0.75rem;
}
}
</style>
</section>

<section class="hero-section py-5 bg-white" id="servicios">
<div class="container">

<div class="text-center mb-5 position-relative">

<div class="badge-custom mb-3">
<i class="bi bi-cpu-fill icon-custom"></i>
<span class="text-content" data-lang="es">Tecnología Médica Avanzada</span>
<span class="text-content" data-lang="en" style="display:none;">Advanced Medical Technology</span>
</div>

<h2 class="fw-bold text-dark mb-3 display-5">
<span class="text-content" data-lang="es">Nuestros <span class="text-primary-custom">Servicios</span></span>
<span class="text-content" data-lang="en" style="display:none;">Our <span class="text-primary-custom">Services</span></span>
</h2>
<div class="row justify-content-center">
<div class="col-lg-8 col-xl-6">
<p class="lead text-muted fs-5 lh-base mb-4">
<span class="text-content" data-lang="es">Ofrecemos una completa gama de servicios de diagnóstico por imagen con tecnología de última generación, máxima precisión y los más altos estándares de calidad para el cuidado integral de tu salud.</span>
<span class="text-content" data-lang="en" style="display:none;">We offer a complete range of medical imaging diagnostic services with state-of-the-art technology, maximum precision, and the highest quality standards for your comprehensive health care.</span>
</p>
</div>
</div>

<div class="border-bottom border-2 border-primary w-25 mx-auto opacity-50"></div>

<div class="row justify-content-center mt-4">
<div class="col-lg-10">
<div class="d-flex flex-wrap justify-content-center gap-3">
<a href="#ultrasonidos-especializados" class="btn btn-outline-success rounded-pill px-4 py-2 fw-semibold">
<span class="text-content" data-lang="es">
<i class="bi bi-1-circle me-2"></i>
Ultrasonidos
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-1-circle me-2"></i>
Ultrasounds
</span>
</a>
<a href="#estudios-vasculares" class="btn btn-outline-info rounded-pill px-4 py-2 fw-semibold">
<span class="text-content" data-lang="es">
<i class="bi bi-2-circle me-2"></i>
Estudios Vasculares
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-2-circle me-2"></i>
Vascular Studies
</span>
</a>
<a href="#organos-especificos" class="btn btn-outline-warning rounded-pill px-4 py-2 fw-semibold">
<span class="text-content" data-lang="es">
<i class="bi bi-3-circle me-2"></i>
Órganos Específicos
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-3-circle me-2"></i>
Specific Organs
</span>
</a>
<a href="#estudios-generales" class="btn btn-outline-primary rounded-pill px-4 py-2 fw-semibold">
<span class="text-content" data-lang="es">
<i class="bi bi-4-circle me-2"></i>
Estudios Generales
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-4-circle me-2"></i>
General Studies
</span>
</a>
</div>
</div>
</div>
</div>

<div id="ultrasonidos-especializados">
<h3 class="category-header text-center mt-5 mb-3">
<span class="text-content" data-lang="es">
<span class="badge bg-success category-badge me-2">1</span>
Ultrasonidos Especializados
</span>
<span class="text-content" data-lang="en" style="display:none;">
<span class="badge bg-success category-badge me-2">1</span>
Specialized Ultrasounds
</span>
</h3>
<div class="row g-4">

<div class="col-md-6 col-lg-4" id="u-4D">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-camera-video fs-2 text-success"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido 4D</span>
<span class="text-content" data-lang="en" style="display:none;">4D Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Imágenes en tiempo real de alta definición para diagnósticos precisos.</span>
<span class="text-content" data-lang="en" style="display:none;">Real-time high-definition images for precise diagnostics.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-soundwave text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Imágenes en 3D/4D</span>
<span class="text-content" data-lang="en" style="display:none;">3D/4D Images</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-heart-pulse text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">No invasivo</span>
<span class="text-content" data-lang="en" style="display:none;">Non-invasive</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-chat-dots text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Mejor asesoría</span>
<span class="text-content" data-lang="en" style="display:none;">Better advice</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-4d">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-abdominal">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-bounding-box fs-2 text-success"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Abdominal</span>
<span class="text-content" data-lang="en" style="display:none;">Abdominal Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Detecta cálculos biliares, tumores y evalúa órganos abdominales.</span>
<span class="text-content" data-lang="en" style="display:none;">Detects gallstones, tumors and evaluates abdominal organs.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-search text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Detección precisa</span>
<span class="text-content" data-lang="en" style="display:none;">Accurate detection</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-heart text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">No doloroso</span>
<span class="text-content" data-lang="en" style="display:none;">Painless</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-clipboard-check text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Evaluación completa</span>
<span class="text-content" data-lang="en" style="display:none;">Complete evaluation</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-abdominal">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-mama">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-circle fs-2 text-success"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido de Mama</span>
<span class="text-content" data-lang="en" style="display:none;">Breast Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Evaluación complementaria para diagnóstico mamario completo.</span>
<span class="text-content" data-lang="en" style="display:none;">Complementary evaluation for complete breast diagnosis.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-eye text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Evaluación detallada</span>
<span class="text-content" data-lang="en" style="display:none;">Detailed evaluation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-shield-check text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Seguro</span>
<span class="text-content" data-lang="en" style="display:none;">Safe</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-graph-up text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Alta precisión</span>
<span class="text-content" data-lang="en" style="display:none;">High precision</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-mama">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="ecocardiograma">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-heart-pulse fs-2 text-success"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ecocardiograma</span>
<span class="text-content" data-lang="en" style="display:none;">Echocardiogram</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Ultrasonido cardíaco para evaluar estructura y función del corazón.</span>
<span class="text-content" data-lang="en" style="display:none;">Cardiac ultrasound to evaluate heart structure and function.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-heart text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Evaluación cardíaca</span>
<span class="text-content" data-lang="en" style="display:none;">Cardiac evaluation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-speedometer2 text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Función cardíaca</span>
<span class="text-content" data-lang="en" style="display:none;">Heart function</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-clipboard2-pulse text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Diagnóstico completo</span>
<span class="text-content" data-lang="en" style="display:none;">Complete diagnosis</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
disabled style="cursor: not-allowed; opacity: 0.9;">
<i class="bi bi-slash-circle me-2 fs-5"></i>
<span class="text-content" data-lang="es">No disponible aún</span>
<span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
</button>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-musculoesqueletico">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-person-arms-up fs-2 text-success"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Musculoesquelético</span>
<span class="text-content" data-lang="en" style="display:none;">Musculoskeletal Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Examina articulaciones, músculos, tendones y ligamentos.</span>
<span class="text-content" data-lang="en" style="display:none;">Examines joints, muscles, tendons and ligaments.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-activity text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Evaluación dinámica</span>
<span class="text-content" data-lang="en" style="display:none;">Dynamic evaluation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-bounding-box text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Estructuras articulares</span>
<span class="text-content" data-lang="en" style="display:none;">Joint structures</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-wrench text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Lesiones deportivas</span>
<span class="text-content" data-lang="en" style="display:none;">Sports injuries</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-musculoesqueletico">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-obstetrico">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-motherboard fs-2 text-success"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Obstétrico</span>
<span class="text-content" data-lang="en" style="display:none;">Obstetric Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Monitorea el desarrollo del feto durante el embarazo.</span>
<span class="text-content" data-lang="en" style="display:none;">Monitors fetal development during pregnancy.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-baby text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Control fetal</span>
<span class="text-content" data-lang="en" style="display:none;">Fetal monitoring</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-graph-up text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Desarrollo adecuado</span>
<span class="text-content" data-lang="en" style="display:none;">Proper development</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-hearts text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Seguridad materna</span>
<span class="text-content" data-lang="en" style="display:none;">Maternal safety</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-obstetrico">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="estudios-vasculares">
<h3 class="category-header text-center mt-5 mb-3">
<span class="text-content" data-lang="es">
<span class="badge bg-info category-badge me-2">2</span>
Estudios Vasculares y Especializados
</span>
<span class="text-content" data-lang="en" style="display:none;">
<span class="badge bg-info category-badge me-2">2</span>
Vascular and Specialized Studies
</span>
</h3>
<div class="row g-4">

<div class="col-md-6 col-lg-4" id="arteriografia-venografia">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-droplet fs-2 text-info"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Arteriografía y Venografía</span>
<span class="text-content" data-lang="en" style="display:none;">Arteriography and Venography</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Diagnostica anomalías en el flujo sanguíneo arterial y venoso.</span>
<span class="text-content" data-lang="en" style="display:none;">Diagnoses abnormalities in arterial and venous blood flow.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-heart text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Flujo sanguíneo</span>
<span class="text-content" data-lang="en" style="display:none;">Blood flow</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-shuffle text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Circulación</span>
<span class="text-content" data-lang="en" style="display:none;">Circulation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-bug text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Anomalías vasculares</span>
<span class="text-content" data-lang="en" style="display:none;">Vascular abnormalities</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-info w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="arteriografia-venografia">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-intravascular">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-arrow-right-circle fs-2 text-info"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Intravascular</span>
<span class="text-content" data-lang="en" style="display:none;">Intravascular Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Permite visualizar la pared interna de los vasos sanguíneos.</span>
<span class="text-content" data-lang="en" style="display:none;">Allows visualization of the inner wall of blood vessels.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-eye text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Visualización interna</span>
<span class="text-content" data-lang="en" style="display:none;">Internal visualization</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-tools text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Precisión diagnóstica</span>
<span class="text-content" data-lang="en" style="display:none;">Diagnostic accuracy</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-clipboard2-pulse text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Evaluación vascular</span>
<span class="text-content" data-lang="en" style="display:none;">Vascular evaluation</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-info w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-intravascular">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-vascular-periferico">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-symmetry-vertical fs-2 text-info"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Vascular Periférico</span>
<span class="text-content" data-lang="en" style="display:none;">Peripheral Vascular Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Diagnostica afecciones vasculares en extremidades.</span>
<span class="text-content" data-lang="en" style="display:none;">Diagnoses vascular conditions in extremities.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-person-walking text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Extremidades</span>
<span class="text-content" data-lang="en" style="display:none;">Extremities</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-droplet-half text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Circulación periférica</span>
<span class="text-content" data-lang="en" style="display:none;">Peripheral circulation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-heart-pulse text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Salud vascular</span>
<span class="text-content" data-lang="en" style="display:none;">Vascular health</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-info w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-vascular-periferico">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-vascular">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-soundwave fs-2 text-info"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Vascular</span>
<span class="text-content" data-lang="en" style="display:none;">Vascular Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Examen dúplex arterial, carotídeo, Doppler transcraneal y más.</span>
<span class="text-content" data-lang="en" style="display:none;">Arterial duplex, carotid, transcranial Doppler exams and more.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-graph-up-arrow text-info fs-5 me-3"></i>
<span class="text-dark">Doppler</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-speedometer text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Flujo sanguíneo</span>
<span class="text-content" data-lang="en" style="display:none;">Blood flow</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-cpu text-info fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Tecnología avanzada</span>
<span class="text-content" data-lang="en" style="display:none;">Advanced technology</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-info w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-vascular">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="organos-especificos">
<h3 class="category-header text-center mt-5 mb-3">
<span class="text-content" data-lang="es">
<span class="badge bg-warning category-badge me-2">3</span>
Estudios de Órganos Específicos
</span>
<span class="text-content" data-lang="en" style="display:none;">
<span class="badge bg-warning category-badge me-2">3</span>
Specific Organ Studies
</span>
</h3>
<div class="row g-4">

<div class="col-md-6 col-lg-4" id="u-pelvico">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-circle-square fs-2 text-warning"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Pélvico</span>
<span class="text-content" data-lang="en" style="display:none;">Pelvic Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Identifica tumores, masas y evalúa órganos pélvicos.</span>
<span class="text-content" data-lang="en" style="display:none;">Identifies tumors, masses and evaluates pelvic organs.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-search text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Detección de masas</span>
<span class="text-content" data-lang="en" style="display:none;">Mass detection</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-clipboard2-check text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Evaluación pélvica</span>
<span class="text-content" data-lang="en" style="display:none;">Pelvic evaluation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-gender-ambiguous text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Hombres y mujeres</span>
<span class="text-content" data-lang="en" style="display:none;">Men and women</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-pelvico">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-prostata">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-square fs-2 text-warning"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido de Próstata</span>
<span class="text-content" data-lang="en" style="display:none;">Prostate Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Examina nódulos y evalúa la salud prostática.</span>
<span class="text-content" data-lang="en" style="display:none;">Examines nodules and evaluates prostate health.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-search text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Detección de nódulos</span>
<span class="text-content" data-lang="en" style="display:none;">Nodule detection</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-clipboard2-pulse text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Salud prostática</span>
<span class="text-content" data-lang="en" style="display:none;">Prostate health</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-gender-male text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Específico hombres</span>
<span class="text-content" data-lang="en" style="display:none;">Specific for men</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-prostata">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-renal">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-prescription2 fs-2 text-warning"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Renal</span>
<span class="text-content" data-lang="en" style="display:none;">Renal Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Examina riñones y evalúa el tracto urinario.</span>
<span class="text-content" data-lang="en" style="display:none;">Examines kidneys and evaluates the urinary tract.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-filter text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Función renal</span>
<span class="text-content" data-lang="en" style="display:none;">Renal function</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-droplet text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Tracto urinario</span>
<span class="text-content" data-lang="en" style="display:none;">Urinary tract</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-prescription2 text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Diagnóstico preciso</span>
<span class="text-content" data-lang="en" style="display:none;">Precise diagnosis</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-renal">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-escrotal">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-circle-half fs-2 text-warning"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Escrotal</span>
<span class="text-content" data-lang="en" style="display:none;">Scrotal Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Examina testículos y evalúa salud reproductiva masculina.</span>
<span class="text-content" data-lang="en" style="display:none;">Examines testicles and evaluates male reproductive health.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-search text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Evaluación testicular</span>
<span class="text-content" data-lang="en" style="display:none;">Testicular evaluation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-clipboard2-pulse text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Salud reproductiva</span>
<span class="text-content" data-lang="en" style="display:none;">Reproductive health</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-gender-male text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Específico hombres</span>
<span class="text-content" data-lang="en" style="display:none;">Specific for men</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-escrotal">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="u-tiroidea">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-bullseye fs-2 text-warning"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Ultrasonido Tiroideo</span>
<span class="text-content" data-lang="en" style="display:none;">Thyroid Ultrasound</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Evalúa la glándula tiroides y detecta nódulos.</span>
<span class="text-content" data-lang="en" style="display:none;">Evaluates the thyroid gland and detects nodules.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-bullseye text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Glándula tiroides</span>
<span class="text-content" data-lang="en" style="display:none;">Thyroid gland</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-search text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Nódulos tiroideos</span>
<span class="text-content" data-lang="en" style="display:none;">Thyroid nodules</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-activity text-warning fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Función tiroidea</span>
<span class="text-content" data-lang="en" style="display:none;">Thyroid function</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-tiroideo">
<i class="bi bi-calendar-check me-2 fs-5"></i>
<span class="text-content" data-lang="es">Agendar Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="estudios-generales">
<h3 class="category-header text-center mt-5 mb-3">
<span class="text-content" data-lang="es">
<span class="badge bg-primary category-badge me-2">4</span>
Estudios Generales
</span>
<span class="text-content" data-lang="en" style="display:none;">
<span class="badge bg-primary category-badge me-2">4</span>
General Studies
</span>
</h3>
<div class="row g-4">

<div class="col-md-6 col-lg-4" id="rayos-x">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-camera fs-2 text-primary"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Rayos X Digital</span>
<span class="text-content" data-lang="en" style="display:none;">Digital X-Ray</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Tecnología de última generación con mínima radiación y resultados inmediatos.</span>
<span class="text-content" data-lang="en" style="display:none;">State-of-the-art technology with minimal radiation and immediate results.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-shield-check text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Baja radiación</span>
<span class="text-content" data-lang="en" style="display:none;">Low radiation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-currency-dollar text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Bajo costo</span>
<span class="text-content" data-lang="en" style="display:none;">Low cost</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-graph-up-arrow text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Alta precisión</span>
<span class="text-content" data-lang="en" style="display:none;">High precision</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
disabled style="cursor: not-allowed; opacity: 0.9;">
<i class="bi bi-slash-circle me-2 fs-5"></i>
<span class="text-content" data-lang="es">No disponible aún</span>
<span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
</button>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="radiografia">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-image-alt fs-2 text-primary"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Radiografía</span>
<span class="text-content" data-lang="en" style="display:none;">Radiography</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Estudio básico para evaluación de estructuras óseas y algunos tejidos.</span>
<span class="text-content" data-lang="en" style="display:none;">Basic study for evaluation of bone structures and some tissues.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-lightning-charge text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Rápido</span>
<span class="text-content" data-lang="en" style="display:none;">Fast</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-cash-coin text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Económico</span>
<span class="text-content" data-lang="en" style="display:none;">Economical</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-file-medical text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Diagnóstico inicial</span>
<span class="text-content" data-lang="en" style="display:none;">Initial diagnosis</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
disabled style="cursor: not-allowed; opacity: 0.9;">
<i class="bi bi-slash-circle me-2 fs-5"></i>
<span class="text-content" data-lang="es">No disponible aún</span>
<span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
</button>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="tomografia">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-layers fs-2 text-primary"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Tomografía Computarizada</span>
<span class="text-content" data-lang="en" style="display:none;">Computed Tomography</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Estudios detallados en 3D para diagnósticos complejos y precisos.</span>
<span class="text-content" data-lang="en" style="display:none;">Detailed 3D studies for complex and precise diagnostics.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-box text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Imágenes en 3D</span>
<span class="text-content" data-lang="en" style="display:none;">3D images</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-zoom-in text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Alta resolución</span>
<span class="text-content" data-lang="en" style="display:none;">High resolution</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-check2-circle text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Diagnóstico preciso</span>
<span class="text-content" data-lang="en" style="display:none;">Precise diagnosis</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
disabled style="cursor: not-allowed; opacity: 0.9;">
<i class="bi bi-slash-circle me-2 fs-5"></i>
<span class="text-content" data-lang="es">No disponible aún</span>
<span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
</button>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="resonancia">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-magnet fs-2 text-primary"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Resonancia Magnética</span>
<span class="text-content" data-lang="en" style="display:none;">Magnetic Resonance</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">La más avanzada tecnología para visualizar tejidos blandos.</span>
<span class="text-content" data-lang="en" style="display:none;">The most advanced technology for visualizing soft tissues.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-shield text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Sin radiación</span>
<span class="text-content" data-lang="en" style="display:none;">No radiation</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-eye text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Máximo detalle</span>
<span class="text-content" data-lang="en" style="display:none;">Maximum detail</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-body-text text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Tejidos blandos</span>
<span class="text-content" data-lang="en" style="display:none;">Soft tissues</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
disabled style="cursor: not-allowed; opacity: 0.9;">
<i class="bi bi-slash-circle me-2 fs-5"></i>
<span class="text-content" data-lang="es">No disponible aún</span>
<span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
</button>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="mamografia">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-heart fs-2 text-primary"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Mamografía Digital</span>
<span class="text-content" data-lang="en" style="display:none;">Digital Mammography</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Tecnología avanzada para detectar oportunamente el cáncer de mama.</span>
<span class="text-content" data-lang="en" style="display:none;">Advanced technology for timely detection of breast cancer.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-highlighter text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Alta resolución</span>
<span class="text-content" data-lang="en" style="display:none;">High resolution</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-clock-history text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Detección temprana</span>
<span class="text-content" data-lang="en" style="display:none;">Early detection</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-bullseye text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Precisión diagnóstica</span>
<span class="text-content" data-lang="en" style="display:none;">Diagnostic accuracy</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
disabled style="cursor: not-allowed; opacity: 0.9;">
<i class="bi bi-slash-circle me-2 fs-5"></i>
<span class="text-content" data-lang="es">No disponible aún</span>
<span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
</button>
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4" id="nuclear">
<div class="card h-100 shadow-lg border-0 servicio-card-profesional">
<div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-activity fs-2 text-primary"></i>
</div>
<h5 class="fw-bold text-dark mb-2">
<span class="text-content" data-lang="es">Medicina Nuclear</span>
<span class="text-content" data-lang="en" style="display:none;">Nuclear Medicine</span>
</h5>
<div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
<span class="fw-bold">
<span class="text-content" data-lang="es">Consultar precio</span>
<span class="text-content" data-lang="en" style="display:none;">Check price</span>
</span>
</div>
</div>
<div class="card-body d-flex flex-column pt-3">
<div class="flex-grow-1">
<p class="text-muted text-center mb-4">
<span class="text-content" data-lang="es">Estudios funcionales especializados para órganos específicos.</span>
<span class="text-content" data-lang="en" style="display:none;">Specialized functional studies for specific organs.</span>
</p>
<div class="features-list">
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-gear text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Estudios especializados</span>
<span class="text-content" data-lang="en" style="display:none;">Specialized studies</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-graph-up text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Alta precisión</span>
<span class="text-content" data-lang="en" style="display:none;">High precision</span>
</span>
</div>
<div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
<i class="bi bi-star text-success fs-5 me-3"></i>
<span class="text-dark">
<span class="text-content" data-lang="es">Diagnóstico único</span>
<span class="text-content" data-lang="en" style="display:none;">Unique diagnosis</span>
</span>
</div>
</div>
</div>
<div class="mt-auto pt-3">
<button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm"
disabled style="cursor: not-allowed; opacity: 0.9;">
<i class="bi bi-slash-circle me-2 fs-5"></i>
<span class="text-content" data-lang="es">No disponible aún</span>
<span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.badge-custom {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
border: 2px solid #0d6efd;
font-size: clamp(0.875rem, 2vw, 1rem);
padding: 0.5rem 1rem;
border-radius: 50rem;
display: inline-flex;
align-items: center;
}
.services-title {
font-weight: 700;
line-height: 1.2;
color: #212529;
font-size: clamp(1.75rem, 4.5vw, 3rem);
position: relative;
}
.text-primary-custom {
color: #0d6efd !important;
}
.icon-custom {
margin-right: 0.5rem;
color: #0dcaf0;
}
@media (max-width: 576px) {
.badge-custom {
padding: 0.375rem 0.75rem;
}
}
</style>
</section>
<section class="py-5 bg-light" id="experiencia">
<div class="container">
<div class="row align-items-center g-5">

<div class="col-lg-6">

<div class="badge-custom mb-3">
<i class="bi bi-heart-pulse icon-custom"></i>
<span class="text-content" data-lang="es">Excelencia Comprobada</span>
<span class="text-content" data-lang="en" style="display:none;">Proven Excellence</span>
</div>
<h2 class="fw-bold text-dark mb-4 display-5">
<span class="text-content" data-lang="es">25 Años de <span class="text-primary-custom">Excelencia Médica</span></span>
<span class="text-content" data-lang="en" style="display:none;">25 Years of <span class="text-primary-custom">Medical Excellence</span></span>
</h2>
<p class="lead text-muted mb-4 fs-6">
<span class="text-content" data-lang="es">Lideramos el sector de diagnóstico por imágenes con un compromiso inquebrantable con la precisión, innovación tecnológica y atención personalizada que cada paciente merece.</span>
<span class="text-content" data-lang="en" style="display:none;">We lead the medical imaging diagnostics sector with an unwavering commitment to precision, technological innovation, and personalized care that every patient deserves.</span>
</p>

<div class="features-list">
<div class="feature-item d-flex align-items-start p-3 rounded-3 mb-3 bg-light bg-opacity-50 border-start border-4 border-success">
<i class="bi bi-award-fill text-success fs-4 me-3 mt-1"></i>
<div>
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Certificación Internacional</span>
<span class="text-content" data-lang="en" style="display:none;">International Certification</span>
</h6>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Acreditados con ISO 9001 y certificaciones médicas internacionales de máximo nivel.</span>
<span class="text-content" data-lang="en" style="display:none;">Accredited with ISO 9001 and highest-level international medical certifications.</span>
</p>
</div>
</div>
<div class="feature-item d-flex align-items-start p-3 rounded-3 mb-3 bg-light bg-opacity-50 border-start border-4 border-warning">
<i class="bi bi-clock-fill text-warning fs-4 me-3 mt-1"></i>
<div>
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Resultados Expeditos</span>
<span class="text-content" data-lang="en" style="display:none;">Expedited Results</span>
</h6>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Entregamos resultados diagnósticos en menos de 24 horas con total <strong>confiabilidad</strong>.</span>
<span class="text-content" data-lang="en" style="display:none;">We deliver diagnostic results in less than 24 hours with total <strong>reliability</strong>.</span>
</p>
</div>
</div>
<div class="feature-item d-flex align-items-start p-3 rounded-3 mb-3 bg-light bg-opacity-50 border-start border-4 border-primary">
<i class="bi bi-cpu-fill text-primary fs-4 me-3 mt-1"></i>
<div>
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Tecnología de Vanguardia</span>
<span class="text-content" data-lang="en" style="display:none;">Cutting-edge Technology</span>
</h6>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Equipamiento de última generación para máxima precisión diagnóstica.</span>
<span class="text-content" data-lang="en" style="display:none;">State-of-the-art equipment for maximum diagnostic precision.</span>
</p>
</div>
</div>
<div class="feature-item d-flex align-items-start p-3 rounded-3 bg-light bg-opacity-50 border-start border-4 border-info">
<i class="bi bi-people-fill text-info fs-4 me-3 mt-1"></i>
<div>
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Equipo Especializado</span>
<span class="text-content" data-lang="en" style="display:none;">Specialized Team</span>
</h6>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Más de 50 profesionales médicos altamente capacitados y en constante actualización.</span>
<span class="text-content" data-lang="en" style="display:none;">More than 50 highly qualified medical professionals in constant training.</span>
</p>
</div>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="row g-4">

<div class="col-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="bi bi-graph-up-arrow text-primary fs-2"></i>
</div>
<h3 class="fw-bold text-primary display-6 mb-2">25K+</h3>
<p class="text-muted mb-0 fw-semibold">
<span class="text-content" data-lang="es">Estudios Anuales</span>
<span class="text-content" data-lang="en" style="display:none;">Annual Studies</span>
</p>
</div>
</div>
</div>

<div class="col-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="bi bi-check-all text-success fs-2"></i>
</div>
<h3 class="fw-bold text-success display-6 mb-2">99.9%</h3>
<p class="text-muted mb-0 fw-semibold">
<span class="text-content" data-lang="es">Precisión</span>
<span class="text-content" data-lang="en" style="display:none;">Accuracy</span>
</p>
</div>
</div>
</div>

<div class="col-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="bi bi-person-badge text-info fs-2"></i>
</div>
<h3 class="fw-bold text-info display-6 mb-2">50+</h3>
<p class="text-muted mb-0 fw-semibold">
<span class="text-content" data-lang="es">Especialistas</span>
<span class="text-content" data-lang="en" style="display:none;">Specialists</span>
</p>
</div>
</div>
</div>

<div class="col-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="bi bi-award text-warning fs-2"></i>
</div>
<h3 class="fw-bold text-warning display-6 mb-2">25+</h3>
<p class="text-muted mb-0 fw-semibold">
<span class="text-content" data-lang="es">Años</span>
<span class="text-content" data-lang="en" style="display:none;">Years</span>
</p>
</div>
</div>
</div>
</div>

<div class="mt-4 p-4 bg-primary bg-opacity-10 border border-primary border-2 rounded-3">
<div class="row align-items-center">
<div class="col-8">
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Confianza Garantizada</span>
<span class="text-content" data-lang="en" style="display:none;">Guaranteed Trust</span>
</h6>
<p class="small text-muted mb-0">
<span class="text-content" data-lang="es">Miles de pacientes nos eligen cada año</span>
<span class="text-content" data-lang="en" style="display:none;">Thousands of patients choose us every year</span>
</p>
</div>
<div class="col-4 text-end">
<div class="rating-badge">
<span class="star-icon">★</span>
<span>4.9/5</span>
</div>
<small class="text-muted d-block mt-1">
<span class="text-content" data-lang="es">+500 valoraciones</span>
<span class="text-content" data-lang="en" style="display:none;">+500 ratings</span>
</small>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}
.features-list .feature-item {
transition: all 0.3s ease;
}
.features-list .feature-item:hover {
transform: translateX(5px);
background: rgba(13, 110, 253, 0.05) !important;
}
.badge-custom {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
border: 2px solid #0d6efd;
font-size: clamp(0.875rem, 2vw, 1rem);
padding: 0.5rem 1rem;
border-radius: 50rem;
display: inline-flex;
align-items: center;
}
.icon-custom {
margin-right: 0.5rem;
}
@media (max-width: 576px) {
.badge-custom {
padding: 0.375rem 0.75rem;
}
}
.rating-badge {
background-color: #0d6efd;
color: white;
border-radius: 50rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
transition: all 0.3s ease;
}
.rating-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
}
.star-icon {
margin-right: 0.25rem;
}
/* Tamaños responsivos */
@media (min-width: 1200px) {
.rating-badge {
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.rating-badge {
padding: 0.65rem 1.25rem;
font-size: 1.05rem;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.rating-badge {
padding: 0.55rem 1rem;
font-size: 1rem;
}
}
@media (max-width: 767px) {
.rating-badge {
padding: 0.5rem 1rem;
font-size: 0.95rem;
}
}
@media (max-width: 576px) {
.rating-badge {
padding: 0.4rem 0.8rem;
font-size: 0.9rem;
}
.star-icon {
margin-right: 0.15rem;
}
}
@media (max-width: 400px) {
.rating-badge {
padding: 0.35rem 0.7rem;
font-size: 0.85rem;
}
}
</style>
</section>
<section class="hero-section py-5 bg-white" id="contacto">
<div class="container">

<div class="text-center mb-5">
<div class="badge-custom mb-3">
<i class="bi bi-headset icon-custom"></i>
<span class="text-content" data-lang="es">Atención Personalizada</span>
<span class="text-content" data-lang="en" style="display:none;">Personalized Attention</span>
</div>
<h2 class="fw-bold text-dark mb-3 display-5">
<span class="text-content" data-lang="es">Estamos Aquí Para <span class="text-primary-custom">Ayudarte</span></span>
<span class="text-content" data-lang="en" style="display:none;">We Are Here To <span class="text-primary-custom">Help You</span></span>
</h2>
<div class="row justify-content-center">
<div class="col-lg-8">
<p class="lead text-muted fs-5 lh-base">
<span class="text-content" data-lang="es">Nuestro equipo de profesionales está listo para atenderte. Agenda tu cita, resuelve tus dudas o visita nuestras instalaciones con la confianza de estar en las mejores manos.</span>
<span class="text-content" data-lang="en" style="display:none;">Our team of professionals is ready to assist you. Schedule your appointment, resolve your doubts, or visit our facilities with the confidence of being in the best hands.</span>
</p>
</div>
</div>
</div>
<div class="row g-5 align-items-stretch">

<div class="col-lg-6">
<div class="contact-info-wrapper">

<div class="card contact-card border-0 shadow-lg hover-lift mb-4">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-telephone-fill text-primary fs-5"></i>
</div>
<div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Teléfono</span>
<span class="text-content" data-lang="en" style="display:none;">Phone</span>
</h5>
<small class="text-muted">
<span class="text-content" data-lang="es">Comunicación inmediata</span>
<span class="text-content" data-lang="en" style="display:none;">Immediate communication</span>
</small>
</div>
</div>
<div class="ps-5">
<div class="d-flex align-items-center mb-2">
<i class="bi bi-phone text-success me-2"></i>
<a href="tel:+18172647814" class="text-dark text-decoration-none fw-semibold">+1 817-264-7814</a>
</div>
<div class="d-flex align-items-center">
<i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
<span class="text-muted small">
<span class="text-content" data-lang="es">Línea de emergencia 24/7</span>
<span class="text-content" data-lang="en" style="display:none;">24/7 emergency line</span>
</span>
</div>
</div>
</div>
</div>

<div class="card contact-card border-0 shadow-lg hover-lift mb-4">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-envelope-fill text-success fs-5"></i>
</div>
<div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Correo Electrónico</span>
<span class="text-content" data-lang="en" style="display:none;">Email</span>
</h5>
<small class="text-muted">
<span class="text-content" data-lang="es">Respuesta en menos de 24h</span>
<span class="text-content" data-lang="en" style="display:none;">Response in less than 24h</span>
</small>
</div>
</div>

<div class="contact-container ps-3 ps-md-5">
<div class="contact-item mb-3">
<i class="bi bi-envelope contact-icon"></i>
<a href="mailto:imagingprodallas@gmail.com" class="contact-link">
imagingprodallas@gmail.com
</a>
</div>
</div>
</div>
</div>

<div class="card contact-card border-0 shadow-lg hover-lift">
<div class="card-body p-4">
<div class="row">

<div class="col-md-6 mb-3 mb-md-0">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-geo-alt-fill text-warning fs-5"></i>
</div>
<div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Ubicación</span>
<span class="text-content" data-lang="en" style="display:none;">Location</span>
</h5>
<small class="text-muted">
<span class="text-content" data-lang="es">Visítanos</span>
<span class="text-content" data-lang="en" style="display:none;">Visit us</span>
</small>
</div>
</div>
<div class="ps-5">
<p class="mb-1 small">800 W Airport Fwy Suite 1033,</p>
<p class="mb-0 small">Irving, TX 75062, Estados Unidos</p>
<a href="https://maps.app.goo.gl/CQ4eqTiyNWKBhsmV6"
class="text-primary small text-decoration-none mt-2 d-inline-block"
target="_blank"
rel="noopener noreferrer">
<i class="bi bi-geo-alt me-1"></i>
<span class="text-content" data-lang="es">Ver en el mapa</span>
<span class="text-content" data-lang="en" style="display:none;">View on map</span>
</a>
</div>
</div>

<div class="col-md-6">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-clock-fill text-info fs-5"></i>
</div>
<div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Horarios</span>
<span class="text-content" data-lang="en" style="display:none;">Hours</span>
</h5>
<small class="text-muted">
<span class="text-content" data-lang="es">Atención continua</span>
<span class="text-content" data-lang="en" style="display:none;">Continuous attention</span>
</small>
</div>
</div>
<div class="ps-5">
<p class="mb-1 small">
<span class="text-content" data-lang="es">Lunes - Sábados: 9:00 AM – 6:00 PM</span>
<span class="text-content" data-lang="en" style="display:none;">Monday - Saturday: 9:00 AM – 6:00 PM</span>
</p>
<p class="mb-0 small text-muted">
<span class="text-content" data-lang="es">Dom: Cerrado</span>
<span class="text-content" data-lang="en" style="display:none;">Sun: Closed</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="map-container position-relative rounded-3 overflow-hidden shadow-lg">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d53642.379872204445!2d-96.9653237!3d32.8280708!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864e83933dd7ed7b%3A0x59b3ba91021d57c!2sImaging%20Pro!5e0!3m2!1ses!2scu!4v1760401643327!5m2!1ses!2scu"
width="100%"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>

<div class="row g-3 mt-4">
<div class="col-6">
<a href="#" class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center py-3 fw-semibold" data-bs-toggle="modal" data-bs-target="#agendarCitaModal">
<i class="bi bi-calendar-check me-2"></i>
<span class="text-content" data-lang="es">Agendar Cita</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Appointment</span>
</a>
</div>
<div class="col-6">
<a href="tel:+18172647814" class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center py-3 fw-semibold">
<i class="bi bi-telephone me-2"></i>
<span class="text-content" data-lang="es">Llamar Ahora</span>
<span class="text-content" data-lang="en" style="display:none;">Call Now</span>
</a>
</div>
</div>
</div>
</div>
</div>
<style>
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}
.map-container {
border: 2px solid #e9ecef;
}
.map-overlay {
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.map-container:hover .map-overlay {
opacity: 1;
}
.contact-card {
transition: all 0.3s ease;
}
.icon-wrapper {
transition: transform 0.3s ease;
}
.contact-card:hover .icon-wrapper {
transform: scale(1.1);
}
.badge-custom {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
border: 2px solid #0d6efd;
font-size: clamp(0.875rem, 2vw, 1rem);
padding: 0.5rem 1rem;
border-radius: 50rem;
display: inline-flex;
align-items: center;
}
.contact-title {
font-weight: 700;
line-height: 1.2;
color: #212529;
font-size: clamp(1.75rem, 4.5vw, 3rem);
position: relative;
}
.text-primary-custom {
color: #0d6efd !important;
}
.icon-custom {
margin-right: 0.5rem;
color: #0dcaf0;
}
@media (max-width: 576px) {
.badge-custom {
padding: 0.375rem 0.75rem;
}
}
.contact-container {
padding-left: 1.5rem !important;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.contact-icon {
color: #6c757d;
margin-right: 0.5rem;
font-size: 1.1rem;
flex-shrink: 0;
}
.contact-link {
color: #212529 !important;
text-decoration: none !important;
font-size: clamp(0.9rem, 2vw, 1rem);
word-break: break-word;
transition: color 0.3s ease;
}
.contact-link:hover {
color: #0d6efd !important;
}
/* Mejoras para móviles */
@media (max-width: 768px) {
.contact-container {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.contact-item {
margin-bottom: 1rem;
}
.contact-link {
font-size: 1rem;
line-height: 1.4;
}
}
@media (max-width: 576px) {
.contact-container {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.contact-item {
flex-direction: column;
align-items: flex-start;
margin-bottom: 1.25rem;
}
.contact-icon {
margin-bottom: 0.25rem;
margin-right: 0;
}
.contact-link {
font-size: 0.95rem;
padding: 0.25rem 0;
}
}
@media (max-width: 360px) {
.contact-link {
font-size: 0.9rem;
}
.contact-icon {
font-size: 1rem;
}
}
</style>
</section>
<section class="hero-section py-5 bg-light" id="formas-medicas">
<div class="container">

<div class="row justify-content-center text-center mb-5">
<div class="col-lg-8">

<div class="badge-custom mb-3">
<i class="bi bi-file-earmark-medical icon-custom"></i>
<span class="text-content" data-lang="es">Documentación Médica</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Documentation</span>
</div>
<h2 class="fw-bold text-dark mb-4 display-5">
<span class="text-content" data-lang="es">Formas Médicas <span class="text-primary-custom">Disponibles</span></span>
<span class="text-content" data-lang="en" style="display:none;">Medical Forms <span class="text-primary-custom">Available</span></span>
</h2>
<p class="lead text-muted mb-4 fs-6">
<span class="text-content" data-lang="es">Encuentra aquí todos los formularios médicos necesarios para tu atención. Descarga, completa y lleva contigo los documentos requeridos para agilizar tu visita.</span>
<span class="text-content" data-lang="en" style="display:none;">Find here all the necessary medical forms for your care. Download, complete and bring with you the required documents to streamline your visit.</span>
</p>
</div>
</div>

<div class="row align-items-center g-5">

<div class="col-lg-6">

<div class="features-list">
<div class="feature-item d-flex align-items-start p-3 rounded-3 mb-3 bg-light bg-opacity-50 border-start border-4 border-success">
<i class="bi bi-download text-success fs-4 me-3 mt-1"></i>
<div>
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Descarga Inmediata</span>
<span class="text-content" data-lang="en" style="display:none;">Instant Download</span>
</h6>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Accede instantáneamente a todos nuestros formularios en formato PDF.</span>
<span class="text-content" data-lang="en" style="display:none;">Instantly access all our forms in PDF format.</span>
</p>
</div>
</div>
<div class="feature-item d-flex align-items-start p-3 rounded-3 mb-3 bg-light bg-opacity-50 border-start border-4 border-warning">
<i class="bi bi-clock-fill text-warning fs-4 me-3 mt-1"></i>
<div>
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Ahorra Tiempo</span>
<span class="text-content" data-lang="en" style="display:none;">Save Time</span>
</h6>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Completa los formularios desde casa y evita esperas en la consulta.</span>
<span class="text-content" data-lang="en" style="display:none;">Complete forms from home and avoid waiting at the appointment.</span>
</p>
</div>
</div>
<div class="feature-item d-flex align-items-start p-3 rounded-3 mb-3 bg-light bg-opacity-50 border-start border-4 border-primary">
<i class="bi bi-shield-check text-primary fs-4 me-3 mt-1"></i>
<div>
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Información Segura</span>
<span class="text-content" data-lang="en" style="display:none;">Secure Information</span>
</h6>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Tus datos médicos están protegidos bajo estrictos protocolos de confidencialidad.</span>
<span class="text-content" data-lang="en" style="display:none;">Your medical data is protected under strict confidentiality protocols.</span>
</p>
</div>
</div>
<div class="feature-item d-flex align-items-start p-3 rounded-3 bg-light bg-opacity-50 border-start border-4 border-info">
<i class="bi bi-question-circle text-info fs-4 me-3 mt-1"></i>
<div>
<h6 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Instrucciones Claras</span>
<span class="text-content" data-lang="en" style="display:none;">Clear Instructions</span>
</h6>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Cada formulario incluye guías paso a paso para completarlo correctamente.</span>
<span class="text-content" data-lang="en" style="display:none;">Each form includes step-by-step guides to complete it correctly.</span>
</p>
</div>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="card border-0 shadow-lg">
<div class="card-header bg-primary text-white py-4">
<h4 class="mb-0 text-center">
<i class="bi bi-file-pdf me-2"></i>
<span class="text-content" data-lang="es">Formularios Disponibles</span>
<span class="text-content" data-lang="en" style="display:none;">Available Forms</span>
</h4>
</div>
<div class="card-body p-4">

<div class="document-item border-bottom pb-4 mb-4">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="icon-wrapper bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
<i class="bi bi-file-earmark-pdf text-danger fs-3"></i>
</div>
<div>
<h5 class="fw-bold text-dark mb-1">
<span class="text-content" data-lang="es">Indicación Médica para Ultrasonidos</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Indication for Ultrasounds</span>
</h5>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Documento completo para nuevos proveedores de salud</span>
<span class="text-content" data-lang="en" style="display:none;">Complete document for new healthcare providers</span>
</p>
</div>
</div>
<a href="/upload/pdf/IMU3.pdf" class="btn btn-primary btn-lg px-4" download>
<i class="bi bi-download me-2"></i>
<span class="text-content" data-lang="es">Descargar</span>
<span class="text-content" data-lang="en" style="display:none;">Download</span>
</a>
</div>
</div>

<div class="mt-4 p-3 bg-light rounded-3">
<div class="d-flex align-items-center">
<span class="text-content" data-lang="es">
<i class="bi bi-info-circle text-primary fs-5 me-2"></i>
<div>
<p class="small text-muted mb-0">
<strong>Recomendación:</strong> Descarga, imprime y completa los formularios antes de tu cita.
</p>
</div>
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-info-circle text-primary fs-5 me-2"></i>
<div>
<p class="small text-muted mb-0">
<strong>Recommendation:</strong> Download, print and complete the forms before your appointment.
</p>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}
.features-list .feature-item {
transition: all 0.3s ease;
}
.features-list .feature-item:hover {
transform: translateX(5px);
background: rgba(13, 110, 253, 0.05) !important;
}
.badge-custom {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
border: 2px solid #0d6efd;
font-size: clamp(0.875rem, 2vw, 1rem);
padding: 0.5rem 1rem;
border-radius: 50rem;
display: inline-flex;
align-items: center;
}
.icon-custom {
margin-right: 0.5rem;
}
.document-item {
transition: all 0.3s ease;
}
.document-item:hover {
background-color: rgba(13, 110, 253, 0.02);
border-radius: 8px;
padding: 0 10px;
margin: 0 -10px;
}
.document-mini {
transition: all 0.2s ease;
}
.document-mini:hover {
background-color: rgba(13, 110, 253, 0.02);
border-radius: 6px;
padding: 0 10px;
margin: 0 -10px;
}
@media (max-width: 768px) {
.document-item .d-flex {
flex-direction: column;
align-items: flex-start !important;
}
.document-item .btn {
margin-top: 1rem;
align-self: stretch;
}
}
</style>
</section>
<section class="hero-section py-5 bg-white" id="equipo">
<div class="container">

<div class="row justify-content-center text-center mb-5">
<div class="col-lg-8">

<div class="badge-custom mb-3">
<i class="bi bi-people-fill icon-custom"></i>
<span class="text-content" data-lang="es">Equipo Especializado</span>
<span class="text-content" data-lang="en" style="display:none;">Specialized Team</span>
</div>
<h2 class="fw-bold text-dark mb-4 display-5">
<span class="text-content" data-lang="es">Nuestro <span class="text-primary-custom">Equipo Profesional</span></span>
<span class="text-content" data-lang="en" style="display:none;">Our <span class="text-primary-custom">Professional Team</span></span>
</h2>
<p class="lead text-muted mb-4 fs-6">
<span class="text-content" data-lang="es">Contamos con un equipo multidisciplinario de especialistas en diagnóstico por imágenes, comprometidos con ofrecer la más alta calidad en atención médica y resultados precisos.</span>
<span class="text-content" data-lang="en" style="display:none;">We have a multidisciplinary team of imaging diagnostics specialists, committed to providing the highest quality in medical care and accurate results.</span>
</p>
</div>
</div>

<div class="row align-items-start g-5">

<div class="col-lg-6">

<div class="position-relative rounded-3 overflow-hidden shadow-lg mb-4">
<img src="{{ asset('images/logo-team.jpg') }}"
alt="Equipo médico de diagnóstico por imágenes"
class="img-fluid w-100 custom-img-height">
<div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-50 text-white p-4">
<h5 class="mb-1">
<span class="text-content" data-lang="es">Equipo de profesionales</span>
<span class="text-content" data-lang="en" style="display:none;">Team of professionals</span>
</h5>
<p class="mb-0 small">
<span class="text-content" data-lang="es">Trabajando juntos por tu salud</span>
<span class="text-content" data-lang="en" style="display:none;">Working together for your health</span>
</p>
</div>
</div>

<div class="mt-4">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<span class="text-dark fw-semibold">
<span class="text-content" data-lang="es">Especialistas certificados</span>
<span class="text-content" data-lang="en" style="display:none;">Certified specialists</span>
</span>
</div>
<div class="d-flex align-items-center mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<span class="text-dark fw-semibold">
<span class="text-content" data-lang="es">Amplia experiencia clínica</span>
<span class="text-content" data-lang="en" style="display:none;">Extensive clinical experience</span>
</span>
</div>
<div class="d-flex align-items-center">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<span class="text-dark fw-semibold">
<span class="text-content" data-lang="es">Actualización continua</span>
<span class="text-content" data-lang="en" style="display:none;">Continuous updating</span>
</span>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="row g-4">

<div class="col-md-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="avatar-wrapper mx-auto mb-3 position-relative">
<img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Dr. Carlos Rodríguez"
class="rounded-circle img-cover">
<div class="status-indicator bg-success"></div>
</div>
<h5 class="fw-bold text-dark mb-1">Dr. Carlos Rodríguez</h5>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Radiólogo General</span>
<span class="text-content" data-lang="en" style="display:none;">General Radiologist</span>
</p>
<div class="mt-2">
<span class="badge bg-primary bg-opacity-10 text-primary small">
<span class="text-content" data-lang="es">15 años exp.</span>
<span class="text-content" data-lang="en" style="display:none;">15 years exp.</span>
</span>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="avatar-wrapper mx-auto mb-3 position-relative">
<img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Dra. María González"
class="rounded-circle img-cover">
<div class="status-indicator bg-success"></div>
</div>
<h5 class="fw-bold text-dark mb-1">Dra. María González</h5>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Especialista en Ultrasonido</span>
<span class="text-content" data-lang="en" style="display:none;">Ultrasound Specialist</span>
</p>
<div class="mt-2">
<span class="badge bg-primary bg-opacity-10 text-primary small">
<span class="text-content" data-lang="es">12 años exp.</span>
<span class="text-content" data-lang="en" style="display:none;">12 years exp.</span>
</span>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="avatar-wrapper mx-auto mb-3 position-relative">
<img src="https://images.unsplash.com/photo-1582750433449-648ed127bb54?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Dr. Javier López"
class="rounded-circle img-cover">
<div class="status-indicator bg-success"></div>
</div>
<h5 class="fw-bold text-dark mb-1">Dr. Javier López</h5>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Neurorradiólogo</span>
<span class="text-content" data-lang="en" style="display:none;">Neuroradiologist</span>
</p>
<div class="mt-2">
<span class="badge bg-primary bg-opacity-10 text-primary small">
<span class="text-content" data-lang="es">14 años exp.</span>
<span class="text-content" data-lang="en" style="display:none;">14 years exp.</span>
</span>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<div class="card border-0 shadow-lg h-100 hover-lift">
<div class="card-body text-center p-4">
<div class="avatar-wrapper mx-auto mb-3 position-relative">
<img src="https://images.unsplash.com/photo-1551601651-2a8555f1a136?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Dra. Laura Fernández"
class="rounded-circle img-cover">
<div class="status-indicator bg-success"></div>
</div>
<h5 class="fw-bold text-dark mb-1">Dra. Laura Fernández</h5>
<p class="text-muted mb-0 small">
<span class="text-content" data-lang="es">Radióloga Pediátrica</span>
<span class="text-content" data-lang="en" style="display:none;">Pediatric Radiologist</span>
</p>
<div class="mt-2">
<span class="badge bg-primary bg-opacity-10 text-primary small">
<span class="text-content" data-lang="es">9 años exp.</span>
<span class="text-content" data-lang="en" style="display:none;">9 years exp.</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.custom-img-height {
height: 400px; /* Ajusta este valor según necesites */
object-fit: cover;
}
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}
.badge-custom {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
border: 2px solid #0d6efd;
font-size: clamp(0.875rem, 2vw, 1rem);
padding: 0.5rem 1rem;
border-radius: 50rem;
display: inline-flex;
align-items: center;
}
.icon-custom {
margin-right: 0.5rem;
}
.avatar-wrapper {
width: 100px;
height: 100px;
position: relative;
}
.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
border: 3px solid #f8f9fa;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.status-indicator {
position: absolute;
bottom: 5px;
right: 5px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid white;
}
@media (max-width: 576px) {
.badge-custom {
padding: 0.375rem 0.75rem;
}
.avatar-wrapper {
width: 80px;
height: 80px;
}
}
</style>
</section>
<section class="hero-section py-5 bg-light" id="privacidad">
<div class="container">

<div class="text-center mb-5">
<div class="badge-custom mb-3">
<i class="bi bi-shield-lock icon-custom"></i>
<span class="text-content" data-lang="es">Protección de Datos</span>
<span class="text-content" data-lang="en" style="display:none;">Data Protection</span>
</div>

<h1 class="fw-bold text-dark mb-3 display-5">
<span class="text-content" data-lang="es">Política de <span class="text-primary-custom">Privacidad</span></span>
<span class="text-content" data-lang="en" style="display:none;">Privacy <span class="text-primary-custom">Policy</span></span>
</h1>
<p class="text-muted mb-3">
<span class="text-content" data-lang="es">
<i class="bi bi-clock-history me-1"></i>
Última actualización: 26 de septiembre de 2025
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-clock-history me-1"></i>
Last updated: September 26, 2025
</span>
</p>
<div class="row justify-content-center">
<div class="col-lg-8">
<p class="lead text-muted fs-5 lh-base">
<span class="text-content" data-lang="es">En <strong class="text-primary">ImagingPro</strong>, protegemos con el máximo rigor la confidencialidad
y seguridad de la información de nuestros pacientes. Esta política detalla nuestro compromiso
con la protección de tus datos personales y médicos.</span>
<span class="text-content" data-lang="en" style="display:none;">At <strong class="text-primary">ImagingPro</strong>, we protect with the utmost rigor the confidentiality
and security of our patients' information. This policy details our commitment
to protecting your personal and medical data.</span>
</p>
</div>
</div>
</div>

<div class="row g-4">

<div class="col-lg-4 col-md-6">
<div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-database-fill text-primary fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Información Recopilada</span>
<span class="text-content" data-lang="en" style="display:none;">Information Collected</span>
</h5>
</div>
<div class="privacy-content">
<div class="info-item d-flex align-items-start mb-3">
<i class="bi bi-person-check text-success mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Datos Personales</span>
<span class="text-content" data-lang="en" style="display:none;">Personal Data</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Nombre, dirección, teléfono, correo electrónico e identificación oficial.</span>
<span class="text-content" data-lang="en" style="display:none;">Name, address, phone, email and official identification.</span>
</p>
</div>
</div>
<div class="info-item d-flex align-items-start mb-3">
<i class="bi bi-file-medical text-info mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Información Médica</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Information</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Historial clínico, resultados de estudios diagnósticos y citas programadas.</span>
<span class="text-content" data-lang="en" style="display:none;">Medical history, diagnostic test results and scheduled appointments.</span>
</p>
</div>
</div>
<div class="info-item d-flex align-items-start">
<i class="bi bi-laptop text-warning mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Datos Técnicos</span>
<span class="text-content" data-lang="en" style="display:none;">Technical Data</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Dirección IP, tipo de dispositivo, navegador y ubicación aproximada.</span>
<span class="text-content" data-lang="en" style="display:none;">IP address, device type, browser and approximate location.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-gear-fill text-success fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Uso de la Información</span>
<span class="text-content" data-lang="en" style="display:none;">Use of Information</span>
</h5>
</div>
<div class="privacy-content">
<div class="info-item d-flex align-items-start mb-3">
<i class="bi bi-calendar-check text-primary mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Gestión Médica</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Management</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Programación y administración de estudios y consultas médicas.</span>
<span class="text-content" data-lang="en" style="display:none;">Scheduling and administration of studies and medical consultations.</span>
</p>
</div>
</div>
<div class="info-item d-flex align-items-start mb-3">
<i class="bi bi-bell-fill text-warning mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Comunicación</span>
<span class="text-content" data-lang="en" style="display:none;">Communication</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Envío de recordatorios, resultados y información clínica relevante.</span>
<span class="text-content" data-lang="en" style="display:none;">Sending reminders, results and relevant clinical information.</span>
</p>
</div>
</div>
<div class="info-item d-flex align-items-start">
<i class="bi bi-graph-up text-info mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Mejora Continua</span>
<span class="text-content" data-lang="en" style="display:none;">Continuous Improvement</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Optimización de experiencia de usuario y seguridad del sistema.</span>
<span class="text-content" data-lang="en" style="display:none;">Optimization of user experience and system security.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-shield-check text-warning fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Protección de Datos</span>
<span class="text-content" data-lang="en" style="display:none;">Data Protection</span>
</h5>
</div>
<div class="privacy-content">
<div class="security-badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-1 small mb-3 d-inline-block">
<i class="bi bi-lock-fill me-1"></i>
<span class="text-content" data-lang="es">Cifrado Avanzado</span>
<span class="text-content" data-lang="en" style="display:none;">Advanced Encryption</span>
</div>
<p class="text-muted small mb-3">
<span class="text-content" data-lang="es">Implementamos cifrado de grado médico, autenticación multifactorial
y controles de acceso basados en roles para garantizar la máxima
seguridad de tu información.</span>
<span class="text-content" data-lang="en" style="display:none;">We implement medical-grade encryption, multi-factor authentication
and role-based access controls to ensure maximum security of your information.</span>
</p>
<div class="d-flex align-items-center text-muted small">
<i class="bi bi-person-check text-primary me-2"></i>
<span class="text-content" data-lang="es">Acceso restringido a personal autorizado</span>
<span class="text-content" data-lang="en" style="display:none;">Access restricted to authorized personnel</span>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-share-fill text-info fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Compartición de Datos</span>
<span class="text-content" data-lang="en" style="display:none;">Data Sharing</span>
</h5>
</div>
<div class="privacy-content">
<div class="alert alert-warning border-0 small mb-3">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
<span class="text-content" data-lang="es"><strong>Nunca vendemos</strong> tu información personal</span>
<span class="text-content" data-lang="en" style="display:none;"><strong>We never sell</strong> your personal information</span>
</div>
<div class="info-item d-flex align-items-start mb-3">
<i class="bi bi-hospital text-success mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Proveedores Médicos</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Providers</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Compartición con especialistas autorizados para tu tratamiento.</span>
<span class="text-content" data-lang="en" style="display:none;">Sharing with authorized specialists for your treatment.</span>
</p>
</div>
</div>
<div class="info-item d-flex align-items-start">
<i class="bi bi-balance text-primary mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Requerimientos Legales</span>
<span class="text-content" data-lang="en" style="display:none;">Legal Requirements</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Cumplimiento de obligaciones legales y regulatorias.</span>
<span class="text-content" data-lang="en" style="display:none;">Compliance with legal and regulatory obligations.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-danger bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-person-badge-fill text-danger fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Tus Derechos</span>
<span class="text-content" data-lang="en" style="display:none;">Your Rights</span>
</h5>
</div>
<div class="privacy-content">
<div class="info-item d-flex align-items-start mb-3">
<i class="bi bi-eye-fill text-info mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Acceso y Rectificación</span>
<span class="text-content" data-lang="en" style="display:none;">Access and Rectification</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Consultar, actualizar o corregir tu información personal.</span>
<span class="text-content" data-lang="en" style="display:none;">Consult, update or correct your personal information.</span>
</p>
</div>
</div>
<div class="info-item d-flex align-items-start mb-3">
<i class="bi bi-file-earmark-arrow-down text-primary mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Portabilidad</span>
<span class="text-content" data-lang="en" style="display:none;">Portability</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Solicitar copia de tus datos clínicos en formato digital.</span>
<span class="text-content" data-lang="en" style="display:none;">Request a copy of your clinical data in digital format.</span>
</p>
</div>
</div>
<div class="info-item d-flex align-items-start">
<i class="bi bi-x-circle-fill text-warning mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Revocación</span>
<span class="text-content" data-lang="en" style="display:none;">Revocation</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Retirar consentimiento para tratamientos específicos.</span>
<span class="text-content" data-lang="en" style="display:none;">Withdraw consent for specific treatments.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-secondary bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-file-earmark-check-fill text-secondary fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Cumplimiento Legal</span>
<span class="text-content" data-lang="en" style="display:none;">Legal Compliance</span>
</h5>
</div>
<div class="privacy-content">
<div class="compliance-badges mb-3">
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary me-2 mb-2">HIPAA</span>
<span class="badge bg-success bg-opacity-10 text-success border border-success me-2 mb-2">GDPR</span>
<span class="badge bg-info bg-opacity-10 text-info border border-info mb-2">LGPD</span>
</div>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Cumplimos estrictamente con regulaciones internacionales de protección
de datos médicos, incluyendo HIPAA (EE.UU.), GDPR (Europa) y normativas
locales aplicables.</span>
<span class="text-content" data-lang="en" style="display:none;">We strictly comply with international medical data protection
regulations, including HIPAA (USA), GDPR (Europe) and applicable
local regulations.</span>
</p>
</div>
</div>
</div>
</div>
</div>

<div class="text-center mt-5 pt-4 border-top">
<p class="text-muted small mb-2">
<span class="text-content" data-lang="es">
<i class="bi bi-info-circle me-1"></i>
Para ejercer tus derechos o consultas sobre privacidad, contacta con nuestra clínica en
<a href="mailto:imagingprodallas@gmail.com" class="text-primary text-decoration-none">imagingprodallas@gmail.com</a>
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-info-circle me-1"></i>
To exercise your rights or privacy inquiries, contact our clinic at
<a href="mailto:imagingprodallas@gmail.com" class="text-primary text-decoration-none">imagingprodallas@gmail.com</a>
</span>
</p>
</div>
</div>
<style>
.privacy-card {
transition: all 0.3s ease;
border: 1px solid transparent;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
border-color: #e9ecef;
}
.icon-wrapper {
transition: transform 0.3s ease;
}
.privacy-card:hover .icon-wrapper {
transform: scale(1.1);
}
.privacy-content .info-item {
transition: all 0.3s ease;
padding: 0.5rem;
border-radius: 0.5rem;
}
.privacy-content .info-item:hover {
background-color: rgba(13, 110, 253, 0.05);
}
.security-badge, .compliance-badges .badge {
font-size: 0.75rem;
}
.badge-custom {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
border: 2px solid #0d6efd;
font-size: clamp(0.875rem, 2vw, 1rem);
padding: 0.5rem 1rem;
border-radius: 50rem;
display: inline-flex;
align-items: center;
}
.privacidad-title {
font-weight: 700;
line-height: 1.2;
color: #212529;
font-size: clamp(1.75rem, 4.5vw, 3rem);
position: relative;
}
.text-primary-custom {
color: #0d6efd !important;
}
.icon-custom {
margin-right: 0.5rem;
color: #0dcaf0;
}
@media (max-width: 576px) {
.badge-custom {
padding: 0.375rem 0.75rem;
}
}
</style>
</section>
<section class="hero-section py-5 bg-white" id="terminos">
<div class="container">

<div class="text-center mb-5">
<div class="badge-custom mb-3">
<i class="bi bi-journal-text icon-custom"></i>
<span class="text-content" data-lang="es">Acuerdo Legal</span>
<span class="text-content" data-lang="en" style="display:none;">Legal Agreement</span>
</div>

<h1 class="fw-bold text-dark mb-3 display-5">
<span class="text-content" data-lang="es">Términos de <span class="text-primary-custom">Uso</span></span>
<span class="text-content" data-lang="en" style="display:none;">Terms of <span class="text-primary-custom">Use</span></span>
</h1>
<p class="text-muted mb-3">
<span class="text-content" data-lang="es">
<i class="bi bi-clock-history me-1"></i>
Última actualización: 26 de septiembre de 2025
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-clock-history me-1"></i>
Last updated: September 26, 2025
</span>
</p>
<div class="row justify-content-center">
<div class="col-lg-8">
<p class="lead text-muted fs-5 lh-base">
<span class="text-content" data-lang="es">Al acceder y utilizar nuestros servicios digitales, aceptas cumplir con los siguientes
términos y condiciones que rigen la relación entre <strong class="text-primary">ImagingPro</strong>
y nuestros usuarios. Te recomendamos leer detenidamente esta información.</span>
<span class="text-content" data-lang="en" style="display:none;">By accessing and using our digital services, you agree to comply with the following
terms and conditions that govern the relationship between <strong class="text-primary">ImagingPro</strong>
and our users. We recommend reading this information carefully.</span>
</p>
</div>
</div>
</div>

<div class="row g-4">

<div class="col-lg-4 col-md-6">
<div class="card terms-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-success bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-check-circle-fill text-success fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Uso Permitido</span>
<span class="text-content" data-lang="en" style="display:none;">Permitted Use</span>
</h5>
</div>
<div class="terms-content">
<div class="feature-item d-flex align-items-start mb-3">
<i class="bi bi-person-check text-primary mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Acceso Autorizado</span>
<span class="text-content" data-lang="en" style="display:none;">Authorized Access</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Exclusivo para pacientes, proveedores médicos y personal autorizado.</span>
<span class="text-content" data-lang="en" style="display:none;">Exclusive for patients, medical providers and authorized personnel.</span>
</p>
</div>
</div>
<div class="feature-item d-flex align-items-start mb-3">
<i class="bi bi-heart-pulse text-success mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Fines Clínicos</span>
<span class="text-content" data-lang="en" style="display:none;">Clinical Purposes</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Uso destinado a gestión médica, diagnósticos y atención al paciente.</span>
<span class="text-content" data-lang="en" style="display:none;">Use intended for medical management, diagnostics and patient care.</span>
</p>
</div>
</div>
<div class="feature-item d-flex align-items-start">
<i class="bi bi-briefcase text-warning mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">No Comercial</span>
<span class="text-content" data-lang="en" style="display:none;">Non-Commercial</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Prohibido uso con fines comerciales o de reventa.</span>
<span class="text-content" data-lang="en" style="display:none;">Commercial use or resale prohibited.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card terms-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-danger bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-slash-circle-fill text-danger fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Conductas Prohibidas</span>
<span class="text-content" data-lang="en" style="display:none;">Prohibited Conduct</span>
</h5>
</div>
<div class="terms-content">
<div class="alert alert-danger border-0 small mb-3">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
<span class="text-content" data-lang="es"><strong>Actividades restrictivas</strong> sujetas a acción legal</span>
<span class="text-content" data-lang="en" style="display:none;"><strong>Restrictive activities</strong> subject to legal action</span>
</div>
<div class="prohibition-item d-flex align-items-start mb-3">
<i class="bi bi-shield-exclamation text-danger mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Seguridad</span>
<span class="text-content" data-lang="en" style="display:none;">Security</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Manipulación de datos, suplantación de identidad o vulneración de sistemas.</span>
<span class="text-content" data-lang="en" style="display:none;">Data manipulation, identity theft or system breach.</span>
</p>
</div>
</div>
<div class="prohibition-item d-flex align-items-start mb-3">
<i class="bi bi-robot text-warning mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Automatización</span>
<span class="text-content" data-lang="en" style="display:none;">Automation</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Uso de bots, scrapers o herramientas automatizadas sin autorización.</span>
<span class="text-content" data-lang="en" style="display:none;">Use of bots, scrapers or automated tools without authorization.</span>
</p>
</div>
</div>
<div class="prohibition-item d-flex align-items-start">
<i class="bi bi-graph-down text-info mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Alteración</span>
<span class="text-content" data-lang="en" style="display:none;">Alteration</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Modificación, reverse engineering o descompilación del software.</span>
<span class="text-content" data-lang="en" style="display:none;">Modification, reverse engineering or software decompilation.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card terms-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-warning bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-c-circle-fill text-warning fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Propiedad Intelectual</span>
<span class="text-content" data-lang="en" style="display:none;">Intellectual Property</span>
</h5>
</div>
<div class="terms-content">
<div class="intellectual-badges mb-3">
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary me-1 mb-2">© Copyright</span>
<span class="badge bg-success bg-opacity-10 text-success border border-success me-1 mb-2">
<span class="text-content" data-lang="es">Marca</span>
<span class="text-content" data-lang="en" style="display:none;">Trademark</span>
</span>
<span class="badge bg-info bg-opacity-10 text-info border border-info mb-2">® Registrado</span>
</div>
<div class="property-item d-flex align-items-start mb-3">
<i class="bi bi-file-text text-primary mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Contenido Protegido</span>
<span class="text-content" data-lang="en" style="display:none;">Protected Content</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Textos, imágenes, logotipos y diseños son propiedad de <strong>ImagingPro</strong>.</span>
<span class="text-content" data-lang="en" style="display:none;">Texts, images, logos and designs are property of <strong>ImagingPro</strong>.</span>
</p>
</div>
</div>
<div class="property-item d-flex align-items-start">
<i class="bi bi-copy text-muted mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Derechos Reservados</span>
<span class="text-content" data-lang="en" style="display:none;">All Rights Reserved</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Prohibida la reproducción total o parcial sin autorización expresa.</span>
<span class="text-content" data-lang="en" style="display:none;">Total or partial reproduction prohibited without express authorization.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card terms-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-info bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-shield-exclamation text-info fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Limitación de Responsabilidad</span>
<span class="text-content" data-lang="en" style="display:none;">Liability Limitation</span>
</h5>
</div>
<div class="terms-content">
<div class="alert alert-info border-0 small mb-3">
<i class="bi bi-info-circle-fill me-2"></i>
<span class="text-content" data-lang="es">Servicio proporcionado "tal cual"</span>
<span class="text-content" data-lang="en" style="display:none;">Service provided "as is"</span>
</div>
<div class="responsibility-item d-flex align-items-start mb-3">
<i class="bi bi-wifi-off text-secondary mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Disponibilidad</span>
<span class="text-content" data-lang="en" style="display:none;">Availability</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">No garantizamos disponibilidad continua ni estamos obligados a mantener el servicio.</span>
<span class="text-content" data-lang="en" style="display:none;">We do not guarantee continuous availability nor are we obligated to maintain the service.</span>
</p>
</div>
</div>
<div class="responsibility-item d-flex align-items-start mb-3">
<i class="bi bi-bug text-warning mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Errores Técnicos</span>
<span class="text-content" data-lang="en" style="display:none;">Technical Errors</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Exentos de responsabilidad por interrupciones, bugs o fallos del sistema.</span>
<span class="text-content" data-lang="en" style="display:none;">Exempt from liability for interruptions, bugs or system failures.</span>
</p>
</div>
</div>
<div class="responsibility-item d-flex align-items-start">
<i class="bi bi-person-x text-danger mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Mal Uso</span>
<span class="text-content" data-lang="en" style="display:none;">Misuse</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">No nos hacemos responsables por uso inadecuado por parte del usuario.</span>
<span class="text-content" data-lang="en" style="display:none;">We are not responsible for inappropriate use by the user.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card terms-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-primary bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-arrow-repeat text-primary fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Modificaciones</span>
<span class="text-content" data-lang="en" style="display:none;">Modifications</span>
</h5>
</div>
<div class="terms-content">
<div class="modification-item d-flex align-items-start mb-3">
<i class="bi bi-megaphone text-warning mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Actualizaciones</span>
<span class="text-content" data-lang="en" style="display:none;">Updates</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Nos reservamos el derecho de modificar estos términos en cualquier momento.</span>
<span class="text-content" data-lang="en" style="display:none;">We reserve the right to modify these terms at any time.</span>
</p>
</div>
</div>
<div class="modification-item d-flex align-items-start mb-3">
<i class="bi bi-bell text-info mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Notificación</span>
<span class="text-content" data-lang="en" style="display:none;">Notification</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Los cambios pueden realizarse sin notificación previa obligatoria.</span>
<span class="text-content" data-lang="en" style="display:none;">Changes may be made without mandatory prior notification.</span>
</p>
</div>
</div>
<div class="modification-item d-flex align-items-start">
<i class="bi bi-eye text-success mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Vigilancia</span>
<span class="text-content" data-lang="en" style="display:none;">Monitoring</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Recomendamos revisar periódicamente los términos de uso vigentes.</span>
<span class="text-content" data-lang="en" style="display:none;">We recommend periodically reviewing current terms of use.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6">
<div class="card terms-card border-0 shadow-lg h-100 hover-lift">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="icon-wrapper bg-secondary bg-opacity-10 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<i class="bi bi-building text-secondary fs-5"></i>
</div>
<h5 class="fw-bold text-dark mb-0">
<span class="text-content" data-lang="es">Jurisdicción y Ley Aplicable</span>
<span class="text-content" data-lang="en" style="display:none;">Jurisdiction and Applicable Law</span>
</h5>
</div>
<div class="terms-content">
<div class="jurisdiction-badges mb-3">
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary me-1 mb-2">Florida</span>
<span class="badge bg-success bg-opacity-10 text-success border border-success me-1 mb-2">
<span class="text-content" data-lang="es">EE.UU.</span>
<span class="text-content" data-lang="en" style="display:none;">USA</span>
</span>
<span class="badge bg-info bg-opacity-10 text-info border border-info mb-2">
<span class="text-content" data-lang="es">Federal</span>
<span class="text-content" data-lang="en" style="display:none;">Federal</span>
</span>
</div>
<div class="jurisdiction-item d-flex align-items-start mb-3">
<i class="bi bi-geo-alt text-primary mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Ley Aplicable</span>
<span class="text-content" data-lang="en" style="display:none;">Applicable Law</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Estos términos se rigen por las leyes del Estado de Florida.</span>
<span class="text-content" data-lang="en" style="display:none;">These terms are governed by the laws of the State of Florida.</span>
</p>
</div>
</div>
<div class="jurisdiction-item d-flex align-items-start">
<i class="bi bi-house-door text-success mt-1 me-2"></i>
<div>
<strong class="text-dark">
<span class="text-content" data-lang="es">Foro Competente</span>
<span class="text-content" data-lang="en" style="display:none;">Competent Forum</span>
</strong>
<p class="text-muted small mb-0">
<span class="text-content" data-lang="es">Tribunales de Miami-Dade, Florida, tendrán jurisdicción exclusiva.</span>
<span class="text-content" data-lang="en" style="display:none;">Courts of Miami-Dade, Florida, will have exclusive jurisdiction.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="text-center mt-5 pt-4 border-top">
<div class="alert alert-light border small">
<span class="text-content" data-lang="es">
<i class="bi bi-lightbulb text-warning me-2"></i>
<strong>Importante:</strong> El uso continuado de nuestros servicios tras cualquier modificación
constituye aceptación de los nuevos términos. Para consultas legales, contacta a
<a href="mailto:imagingprodallas@gmail.com" class="text-primary text-decoration-none">imagingprodallas@gmail.com</a>
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-lightbulb text-warning me-2"></i>
<strong>Important:</strong> Continued use of our services after any modification
constitutes acceptance of the new terms. For legal inquiries, contact
<a href="mailto:imagingprodallas@gmail.com" class="text-primary text-decoration-none">imagingprodallas@gmail.com</a>
</span>
</div>
</div>
</div>
<style>
.terms-card {
transition: all 0.3s ease;
border: 1px solid transparent;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
border-color: #e9ecef;
}
.icon-wrapper {
transition: transform 0.3s ease;
}
.terms-card:hover .icon-wrapper {
transform: scale(1.1);
}
.terms-content .feature-item,
.terms-content .prohibition-item,
.terms-content .property-item,
.terms-content .responsibility-item,
.terms-content .modification-item,
.terms-content .jurisdiction-item {
transition: all 0.3s ease;
padding: 0.5rem;
border-radius: 0.5rem;
}
.terms-content .feature-item:hover,
.terms-content .prohibition-item:hover,
.terms-content .property-item:hover,
.terms-content .responsibility-item:hover,
.terms-content .modification-item:hover,
.terms-content .jurisdiction-item:hover {
background-color: rgba(13, 110, 253, 0.05);
}
.intellectual-badges .badge,
.jurisdiction-badges .badge {
font-size: 0.7rem;
}
.badge-custom {
background-color: rgba(13, 110, 253, 0.1);
color: #0d6efd;
border: 2px solid #0d6efd;
font-size: clamp(0.875rem, 2vw, 1rem);
padding: 0.5rem 1rem;
border-radius: 50rem;
display: inline-flex;
align-items: center;
}
.terminos-title {
font-weight: 700;
line-height: 1.2;
color: #212529;
font-size: clamp(1.75rem, 4.5vw, 3rem);
position: relative;
}
.text-primary-custom {
color: #0d6efd !important;
}
.icon-custom {
margin-right: 0.5rem;
color: #0dcaf0;
}
@media (max-width: 576px) {
.badge-custom {
padding: 0.375rem 0.75rem;
}
}
</style>
</section>
{# Modal Paso 1 #}
<div class="modal fade" id="agendarCitaModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title d-flex align-items-center">
<i class="bi bi-journal-text me-2 text-primary"></i>
<span class="text-content" data-lang="es">Agendar Cita Médica</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Medical Appointment</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<div class="d-flex align-items-center mb-4">
<span class="badge bg-primary me-2">
<span class="text-content" data-lang="es">Paso 1 de 3</span>
<span class="text-content" data-lang="en" style="display:none;">Step 1 of 3</span>
</span>
<span class="text-muted">
<span class="text-content" data-lang="es">Datos personales</span>
<span class="text-content" data-lang="en" style="display:none;">Personal information</span>
</span>
</div>
<form id="wizardStep1Form" class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">
<span class="text-content" data-lang="es">Nombre</span>
<span class="text-content" data-lang="en" style="display:none;">First Name</span>
</label>
<input type="text" id="firstName" name="firstName" class="form-control"
placeholder="Tu nombre" required minlength="4" data-lang-es="Tu nombre" data-lang-en="Your name">
<div class="invalid-feedback">
<span class="text-content" data-lang="es">Por favor, ingresa tu nombre (mínimo 4 caracteres).</span>
<span class="text-content" data-lang="en" style="display:none;">Please enter your name (minimum 4 characters).</span>
</div>
</div>
<div class="col-sm-6">
<label for="lastName" class="form-label">
<span class="text-content" data-lang="es">Apellidos</span>
<span class="text-content" data-lang="en" style="display:none;">Last Name</span>
</label>
<input type="text" id="lastName" name="lastName" class="form-control"
placeholder="Tus apellidos" required minlength="4" data-lang-es="Tus apellidos" data-lang-en="Your last name">
<div class="invalid-feedback">
<span class="text-content" data-lang="es">Por favor, ingresa tus apellidos (mínimo 4 caracteres).</span>
<span class="text-content" data-lang="en" style="display:none;">Please enter your last name (minimum 4 characters).</span>
</div>
</div>
<div class="col-sm-6">
<label for="age" class="form-label">
<span class="text-content" data-lang="es">Edad</span>
<span class="text-content" data-lang="en" style="display:none;">Age</span>
</label>
<input type="number" id="age" name="age" class="form-control"
placeholder="Tu edad" required min="0" max="120" data-lang-es="Tu edad" data-lang-en="Your age">
<div class="invalid-feedback">
<span class="text-content" data-lang="es">Ingresa una edad válida (0-120 años).</span>
<span class="text-content" data-lang="en" style="display:none;">Enter a valid age (0-120 years).</span>
</div>
</div>
<div class="col-sm-6">
<label for="phone" class="form-label">
<span class="text-content" data-lang="es">Teléfono</span>
<span class="text-content" data-lang="en" style="display:none;">Phone</span>
</label>
<input type="tel" id="phone" name="phone" class="form-control"
placeholder="+15555555555" required
pattern="^\+?[0-9]{10,15}$"
minlength="10" maxlength="16" data-lang-es="+15555555555" data-lang-en="+15555555555">
<div class="invalid-feedback">
<span class="text-content" data-lang="es">Ingresa un teléfono válido (10-15 dígitos, opcional + al inicio).</span>
<span class="text-content" data-lang="en" style="display:none;">Enter a valid phone number (10-15 digits, optional + at the beginning).</span>
</div>
</div>
<div class="col-12">
<label for="email" class="form-label">
<span class="text-content" data-lang="es">Correo electrónico</span>
<span class="text-content" data-lang="en" style="display:none;">Email</span>
</label>
<input type="email" id="email" name="email" class="form-control"
placeholder="ejemplo@dominio.com" required data-lang-es="ejemplo@dominio.com" data-lang-en="example@domain.com">
<div class="invalid-feedback">
<span class="text-content" data-lang="es">Ingresa un correo electrónico válido.</span>
<span class="text-content" data-lang="en" style="display:none;">Enter a valid email address.</span>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
<span class="text-content" data-lang="es">Cancelar</span>
<span class="text-content" data-lang="en" style="display:none;">Cancel</span>
</button>
<button type="button" id="nextBtn" class="btn btn-primary" disabled>
<span class="text-content" data-lang="es">Siguiente</span>
<span class="text-content" data-lang="en" style="display:none;">Next</span>
</button>
</div>
</div>
</div>
</div>
{# Modal Paso 2 #}
<div class="modal fade" id="agendarCitaPaso2" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title d-flex align-items-center">
<i class="bi bi-clipboard-check me-2 text-primary"></i>
<span class="text-content" data-lang="es">Agendar Cita Médica</span>
<span class="text-content" data-lang="en" style="display:none;">Schedule Medical Appointment</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<div class="d-flex align-items-center mb-4">
<span class="badge bg-primary me-2">
<span class="text-content" data-lang="es">Paso 2 de 3</span>
<span class="text-content" data-lang="en" style="display:none;">Step 2 of 3</span>
</span>
<span class="text-muted">
<span class="text-content" data-lang="es">Selecciona el tipo de estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Select study type</span>
</span>
</div>
<form id="wizardStep2Form" class="needs-validation" novalidate>
<div class="mb-3">
<label for="studyType" class="form-label fw-semibold">
<span class="text-content" data-lang="es">Tipo de Estudio</span>
<span class="text-content" data-lang="en" style="display:none;">Study Type</span>
</label>
<select id="studyType" name="studyType" class="form-select" required>
<option value="" selected disabled data-lang-es="Selecciona el tipo de estudio *" data-lang-en="Select study type *">
Selecciona el tipo de estudio *
</option>

<option value="ultrasonido-abdominal" data-lang-es="Ultrasonido abdominal" data-lang-en="Abdominal ultrasound">
Ultrasonido abdominal
</option>
<option value="ultrasonido-mama" data-lang-es="Ultrasonido de mama" data-lang-en="Breast ultrasound">
Ultrasonido de mama
</option>
<option value="ecocardiograma" data-lang-es="Ecocardiograma" data-lang-en="Echocardiogram">
Ecocardiograma
</option>
<option value="ultrasonido-intravascular" data-lang-es="Ultrasonido intravascular (IVU)" data-lang-en="Intravascular ultrasound (IVU)">
Ultrasonido intravascular (IVU)
</option>
<option value="ultrasonido-musculoesqueletico" data-lang-es="Ultrasonido musculoesquelético" data-lang-en="Musculoskeletal ultrasound">
Ultrasonido musculoesquelético
</option>
<option value="ultrasonido-obstetrico" data-lang-es="Ultrasonido obstétrico" data-lang-en="Obstetric ultrasound">
Ultrasonido obstétrico
</option>
<option value="ultrasonido-pelvico" data-lang-es="Ultrasonido pélvico" data-lang-en="Pelvic ultrasound">
Ultrasonido pélvico
</option>
<option value="ultrasonido-vascular-periferico" data-lang-es="Ultrasonido vascular periférico" data-lang-en="Peripheral vascular ultrasound">
Ultrasonido vascular periférico
</option>
<option value="ultrasonido-prostata" data-lang-es="Ultrasonido de próstata" data-lang-en="Prostate ultrasound">
Ultrasonido de próstata
</option>
<option value="ultrasonido-renal" data-lang-es="Ultrasonido renal" data-lang-en="Renal ultrasound">
Ultrasonido renal
</option>
<option value="ultrasonido-escrotal" data-lang-es="Ultrasonido escrotal" data-lang-en="Scrotal ultrasound">
Ultrasonido escrotal
</option>
<option value="ultrasonido-tiroideo" data-lang-es="Ultrasonido tiroideo" data-lang-en="Thyroid ultrasound">
Ultrasonido tiroideo
</option>
<option value="ultrasonido-vascular" data-lang-es="Ultrasonido vascular" data-lang-en="Vascular ultrasound">
Ultrasonido vascular
</option>

<option value="radiografia" data-lang-es="Radiografía" data-lang-en="Radiography">
Radiografía
</option>

<option value="arteriografia-venografia" data-lang-es="Arteriografía y venografía" data-lang-en="Arteriography and venography">
Arteriografía y venografía
</option>

<option value="rayos-x" data-lang-es="Rayos X Digital" data-lang-en="Digital X-Ray">
Rayos X Digital
</option>
<option value="tomografia" data-lang-es="Tomografía Computarizada" data-lang-en="Computed Tomography">
Tomografía Computarizada
</option>
<option value="resonancia" data-lang-es="Resonancia Magnética" data-lang-en="Magnetic Resonance">
Resonancia Magnética
</option>
<option value="mamografia" data-lang-es="Mamografía Digital" data-lang-en="Digital Mammography">
Mamografía Digital
</option>
<option value="nuclear" data-lang-es="Medicina Nuclear" data-lang-en="Nuclear Medicine">
Medicina Nuclear
</option>
</select>
<div class="invalid-feedback">
<span class="text-content" data-lang="es">Por favor, selecciona un tipo de estudio.</span>
<span class="text-content" data-lang="en" style="display:none;">Please select a study type.</span>
</div>
</div>
<div class="mb-3">
<label for="observaciones" class="form-label fw-semibold">
<span class="text-content" data-lang="es">Observaciones adicionales</span>
<span class="text-content" data-lang="en" style="display:none;">Additional observations</span>
</label>
<textarea id="observaciones" name="observaciones" class="form-control" rows="3"
placeholder="Información adicional que consideres relevante" data-lang-es="Información adicional que consideres relevante" data-lang-en="Additional information you consider relevant"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" id="prevStepBtn">
<span class="text-content" data-lang="es">Anterior</span>
<span class="text-content" data-lang="en" style="display:none;">Previous</span>
</button>
<button type="button" class="btn btn-primary" id="nextStepBtn" disabled>
<span class="text-content" data-lang="es">Siguiente</span>
<span class="text-content" data-lang="en" style="display:none;">Next</span>
</button>
</div>
</div>
</div>
</div>
{# Modal Paso 3 #}
<div class="modal fade" id="agendarCitaPaso3" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title d-flex align-items-center">
<i class="bi bi-calendar-check me-2 text-primary"></i>
<span class="text-content" data-lang="es">Confirmar Cita Médica</span>
<span class="text-content" data-lang="en" style="display:none;">Confirm Medical Appointment</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<div class="d-flex align-items-center mb-4">
<span class="badge bg-primary me-2">
<span class="text-content" data-lang="es">Paso 3 de 3</span>
<span class="text-content" data-lang="en" style="display:none;">Step 3 of 3</span>
</span>
<span class="text-muted">
<span class="text-content" data-lang="es">Fecha y Hora</span>
<span class="text-content" data-lang="en" style="display:none;">Date and Time</span>
</span>
</div>
<form id="wizardStep3Form" class="needs-validation" novalidate>
<div class="row g-3 mb-4">
<div class="col-sm-6">
<label for="preferredDate" class="form-label">
<span class="text-content" data-lang="es">Fecha preferida</span>
<span class="text-content" data-lang="en" style="display:none;">Preferred Date</span>
</label>
<input type="date" id="preferredDate" name="preferredDate" min="{{ "now"|date("Y-m-d") }}" class="form-control" required>
<div class="invalid-feedback">
<span class="text-content" data-lang="es">Selecciona una fecha válida.</span>
<span class="text-content" data-lang="en" style="display:none;">Select a valid date.</span>
</div>
</div>
<div class="col-sm-6">
<label for="preferredTime" class="form-label">
<span class="text-content" data-lang="es">Hora preferida</span>
<span class="text-content" data-lang="en" style="display:none;">Preferred Time</span>
</label>
<select id="preferredTime" name="preferredTime" class="form-select" required>
<option value="" selected disabled data-lang-es="Selecciona una hora" data-lang-en="Select a time">
Selecciona una hora
</option>
</select>
<div class="invalid-feedback">
<span class="text-content" data-lang="es">Selecciona una hora válida.</span>
<span class="text-content" data-lang="en" style="display:none;">Select a valid time.</span>
</div>
</div>
</div>
<div class="card border rounded p-3 mb-3">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-info-circle me-2 text-primary fs-5"></i>
<h6 class="fw-bold mb-0">
<span class="text-content" data-lang="es">Resumen de tu cita</span>
<span class="text-content" data-lang="en" style="display:none;">Appointment Summary</span>
</h6>
</div>
<ul class="list-unstyled mb-0">
<li>
<strong>
<span class="text-content" data-lang="es">Paciente:</span>
<span class="text-content" data-lang="en" style="display:none;">Patient:</span>
</strong>
<span id="resumenNombre">—</span>
</li>
<li>
<strong>
<span class="text-content" data-lang="es">Estudio:</span>
<span class="text-content" data-lang="en" style="display:none;">Study:</span>
</strong>
<span id="resumenEstudio">—</span>
</li>
<li>
<strong>
<span class="text-content" data-lang="es">Fecha:</span>
<span class="text-content" data-lang="en" style="display:none;">Date:</span>
</strong>
<span id="resumenFecha">—</span>
</li>
<li>
<strong>
<span class="text-content" data-lang="es">Hora:</span>
<span class="text-content" data-lang="en" style="display:none;">Time:</span>
</strong>
<span id="resumenHora">—</span>
</li>
</ul>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" id="prevStep3Btn">
<span class="text-content" data-lang="es">Anterior</span>
<span class="text-content" data-lang="en" style="display:none;">Previous</span>
</button>
<button type="submit" class="btn btn-success" id="confirmBtn" disabled>
<span class="text-content" data-lang="es">Confirmar Cita</span>
<span class="text-content" data-lang="en" style="display:none;">Confirm Appointment</span>
</button>
</div>
</div>
</div>
</div>
{# Modal de Confirmación Final#}
<div class="modal fade" id="confirmacionFinalModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md">
<div class="modal-content border-0 shadow-lg rounded-3">
{# Header con gradiente #}
<div class="modal-header border-0 bg-gradient-primary text-white rounded-top-3 py-4">
<div class="d-flex align-items-center w-100">
<div class="flex-shrink-0">
<div class="success-icon-wrapper bg-white rounded-circle border border-2 border-success d-flex align-items-center justify-content-center me-3"
style="width: 42px; height: 42px;">
<i class="bi bi-check-lg text-success fs-4"></i>
</div>
</div>
<div class="flex-grow-1">
<h4 class="modal-title fw-bold mb-0">
<span class="text-content" data-lang="es">¡Cita Confirmada!</span>
<span class="text-content" data-lang="en" style="display:none;">Appointment Confirmed!</span>
</h4>
<p class="mb-0 opacity-90">
<span class="text-content" data-lang="es">Todo listo para tu estudio médico</span>
<span class="text-content" data-lang="en" style="display:none;">All set for your medical study</span>
</p>
</div>
</div>
</div>
<div class="modal-body p-4">
{# Tarjeta de detalles #}
<div class="card border-0 shadow-sm mb-4">
<div class="card-body p-3">
<div class="row g-3">
{# Fecha #}
<div class="col-12">
<div class="d-flex align-items-center">
<div class="icon-circle bg-primary bg-opacity-10 text-primary rounded-circle p-2 me-3">
<i class="bi bi-calendar2-check fs-5"></i>
</div>
<div>
<small class="text-muted d-block">
<span class="text-content" data-lang="es">Fecha</span>
<span class="text-content" data-lang="en" style="display:none;">Date</span>
</small>
<strong class="text-dark" id="fechaCitaConfirmada"></strong>
</div>
</div>
</div>
{# Hora #}
<div class="col-12">
<div class="d-flex align-items-center">
<div class="icon-circle bg-success bg-opacity-10 text-success rounded-circle p-2 me-3">
<i class="bi bi-clock fs-5"></i>
</div>
<div>
<small class="text-muted d-block">
<span class="text-content" data-lang="es">Hora</span>
<span class="text-content" data-lang="en" style="display:none;">Time</span>
</small>
<strong class="text-dark" id="horaCitaConfirmada"></strong>
</div>
</div>
</div>
{# Email #}
<div class="col-12">
<div class="d-flex align-items-center">
<div class="icon-circle bg-info bg-opacity-10 text-info rounded-circle p-2 me-3">
<i class="bi bi-envelope-check fs-5"></i>
</div>
<div>
<small class="text-muted d-block">
<span class="text-content" data-lang="es">Confirmación enviada a</span>
<span class="text-content" data-lang="en" style="display:none;">Confirmation sent to</span>
</small>
<strong class="text-dark" id="emailCitaConfirmada"></strong>
</div>
</div>
</div>
</div>
</div>
</div>
{# Nota importante #}
<div class="alert alert-light border alert-dismissible fade show mb-4" role="alert">
<div class="d-flex">
<i class="bi bi-bell-fill text-warning fs-5 me-2"></i>
<div>
<strong>
<span class="text-content" data-lang="es">Recordatorio importante</span>
<span class="text-content" data-lang="en" style="display:none;">Important reminder</span>
</strong>
<p class="mb-0 small">
<span class="text-content" data-lang="es">Recibirás un recordatorio 24 horas antes de tu cita vía correo electrónico.</span>
<span class="text-content" data-lang="en" style="display:none;">You will receive a reminder 24 hours before your appointment via email.</span>
</p>
</div>
</div>
</div>
{# Botón de acción #}
<div class="text-center">
<button type="button" class="btn btn-primary px-4 py-2 rounded-pill fw-semibold" data-bs-dismiss="modal">
<span class="text-content" data-lang="es">
<i class="bi bi-check-circle me-2"></i>Entendido
</span>
<span class="text-content" data-lang="en" style="display:none;">
<i class="bi bi-check-circle me-2"></i>Got it
</span>
</button>
</div>
</div>
</div>
</div>
</div>
{% if app.user %}

<div class="position-fixed" style="z-index: 1030; bottom: 30px; right: 30px;">
<div class="dropdown">
<button class="quick-access-btn"
type="button"
data-bs-toggle="dropdown"
title="Acceso rápido">
<i class="fas fa-bolt"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-user">
<li>
<h6 class="dropdown-header fw-bold text-primary d-flex align-items-center">
<i class="fas fa-bolt me-2"></i>
<span class="text-content" data-lang="es">Acceso Rápido</span>
<span class="text-content" data-lang="en" style="display:none;">Quick Access</span>
</h6>
</li>
{# Opciones para ADMIN #}
{% if 'ROLE_ADMIN' in app.user.roles %}
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_index') }}">
<i class="fas fa-tachometer-alt me-2"></i>
<div>
<span class="text-content" data-lang="es">Dashboard</span>
<span class="text-content" data-lang="en" style="display:none;">Dashboard</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_pacientes') }}">
<i class="fas fa-user-injured me-2"></i>
<div>
<span class="text-content" data-lang="es">Pacientes</span>
<span class="text-content" data-lang="en" style="display:none;">Patients</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_proveedores') }}">
<i class="fas fa-user-md me-2"></i>
<div>
<span class="text-content" data-lang="es">Proveedores</span>
<span class="text-content" data-lang="en" style="display:none;">Providers</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_appointment') }}">
<i class="fas fa-calendar-check me-2"></i>
<div>
<span class="text-content" data-lang="es">Agenda de Citas</span>
<span class="text-content" data-lang="en" style="display:none;">Appointment Schedule</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_horario') }}">
<i class="fas fa-clock me-2"></i>
<div>
<span class="text-content" data-lang="es">Horarios Médicos</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Schedules</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_profile') }}">
<i class="fas fa-user-cog me-2"></i>
<div>
<span class="text-content" data-lang="es">Perfil</span>
<span class="text-content" data-lang="en" style="display:none;">Profile</span>
</div>
</a>
</li>
{# Opciones para PROVEEDOR #}
{% elseif 'ROLE_PROVIDER' in app.user.roles %}
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('provider_index') }}">
<i class="fas fa-tachometer-alt me-2"></i>
<div>
<span class="text-content" data-lang="es">Dashboard</span>
<span class="text-content" data-lang="en" style="display:none;">Dashboard</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('provider_patients') }}">
<i class="fas fa-user-injured me-2"></i>
<div>
<span class="text-content" data-lang="es">Mis Pacientes</span>
<span class="text-content" data-lang="en" style="display:none;">My Patients</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('provider_appointment') }}">
<i class="fas fa-calendar-check me-2"></i>
<div>
<span class="text-content" data-lang="es">Mis Citas</span>
<span class="text-content" data-lang="en" style="display:none;">My Appointments</span>
</div>
</a>
</li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('provider_profile') }}">
<i class="fas fa-user-cog me-2"></i>
<div>
<span class="text-content" data-lang="es">Mi Perfil</span>
<span class="text-content" data-lang="en" style="display:none;">My Profile</span>
</div>
</a>
</li>
{% endif %}
<li><hr class="dropdown-divider mx-3"></li>
<li>
<a class="dropdown-item dropdown-item-user d-flex align-items-center text-muted" href="{{ path('app_logout') }}">
<i class="fas fa-sign-out-alt me-2"></i>
<div>
<span class="text-content" data-lang="es">Cerrar Sesión</span>
<span class="text-content" data-lang="en" style="display:none;">Logout</span>
</div>
</a>
</li>
</ul>
</div>
</div>
{% endif %}
<style>
.bg-gradient-primary {
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
}
.success-icon-wrapper {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}
.icon-circle {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rounded-3 {
border-radius: 1rem !important;
}
.rounded-top-3 {
border-top-left-radius: 1rem !important;
border-top-right-radius: 1rem !important;
}
.shadow-lg {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
/* ===== BOTÓN FLOTANTE ===== */
.quick-access-btn {
width: 65px;
height: 65px;
background: #2980b9;
border: none;
border-radius: 50%;
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
animation: float 3s ease-in-out infinite;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1050;
}
.quick-access-btn:hover {
transform: scale(1.1) rotate(10deg);
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.6);
animation: none;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0px); }
}
.dropdown-menu-user {
border: none;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
border-left: 4px solid var(--primary-color);
}
.dropdown-item-user {
padding: 10px 15px;
transition: all 0.3s ease;
border-radius: 6px;
margin: 2px 8px;
width: auto;
}
.dropdown-item-user:hover {
background: #2980b9;
color: white !important;
transform: translateX(5px);
}
@media (max-width: 768px) {
.quick-access-btn {
bottom: 20px;
right: 20px;
width: 55px;
height: 55px;
font-size: 1.3rem;
}
}
</style>
{% endblock %}
{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Función para actualizar placeholders según el idioma
function updatePlaceholders() {
const currentLang = document.documentElement.lang || 'es';
// Actualizar placeholders de inputs
document.querySelectorAll('input[data-lang-es]').forEach(input => {
const langKey = `data-lang-${currentLang}`;
if (input.hasAttribute(langKey)) {
input.placeholder = input.getAttribute(langKey);
}
});
// Actualizar placeholder del textarea
const observacionesTextarea = document.getElementById('observaciones');
if (observacionesTextarea && observacionesTextarea.hasAttribute(`data-lang-${currentLang}`)) {
observacionesTextarea.placeholder = observacionesTextarea.getAttribute(`data-lang-${currentLang}`);
}
}
// Observar cambios en el idioma
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'lang') {
updatePlaceholders();
}
});
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['lang']
});
// Actualizar inicialmente
updatePlaceholders();
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Función para actualizar las opciones del select según el idioma
function updateSelectLanguage() {
const studySelect = document.getElementById('studyType');
if (!studySelect) return;
const currentLang = document.documentElement.lang || 'es';
const selectedValue = studySelect.value;
// Actualizar el texto de cada option
Array.from(studySelect.options).forEach(option => {
const langKey = `data-lang-${currentLang}`;
if (option.hasAttribute(langKey)) {
option.textContent = option.getAttribute(langKey);
}
});
// Restaurar el valor seleccionado
studySelect.value = selectedValue;
}
// Observar cambios en el idioma
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'lang') {
updateSelectLanguage();
}
});
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['lang']
});
// Actualizar inicialmente
updateSelectLanguage();
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Variable global para controlar parámetros URL
let urlParamProcessed = false;
let currentEstudioFromUrl = '';
// Mapa global para almacenar horarios disponibles
let horariosDisponibles = {};
// 🔥 NUEVA FUNCIÓN: Obtener offset de Dallas según el mes
function obtenerOffsetDallas() {
const mesActual = new Date().getMonth() + 1; // 1-12
// Dallas: CST (UTC-6) de Noviembre a Marzo, CDT (UTC-5) de Abril a Octubre
if (mesActual >= 4 && mesActual <= 10) {
return -5; // CDT - Horario de verano
} else {
return -6; // CST - Horario estándar
}
}
// 🔥 NUEVA FUNCIÓN: Convertir UTC a hora de Dallas
function obtenerHoraActualDallas() {
const ahoraUTC = new Date();
const offsetDallas = obtenerOffsetDallas();
// Convertir UTC a Dallas
const horaDallas = new Date(ahoraUTC.getTime() + offsetDallas * 60 * 60 * 1000);
return {
horas: horaDallas.getUTCHours(),
minutos: horaDallas.getUTCMinutes(),
offset: offsetDallas
};
}
function filtrarHorasParaHoy(horas, fechaSeleccionada) {
const hoy = new Date().toLocaleDateString('en-CA');
if (fechaSeleccionada !== hoy) {
return Promise.resolve(horas);
}
return fetch('/api/hora-actual-servidor')
.then(response => {
if (!response.ok) throw new Error('Error al obtener hora del servidor');
return response.json();
})
.then(data => {
const horaServidor = data.hora_servidor;
const [horaStr, minutoStr, segundoStr] = horaServidor.split(':');
const totalMinutosServidor = parseInt(horaStr) * 60 + parseInt(minutoStr);
console.log('🕐 Filtro - Hora servidor:', horaServidor, 'Minutos:', totalMinutosServidor);
// 🔥 CORRECCIÓN: Convertir horas 12h a 24h para comparar
return horas.filter(horaObj => {
// Convertir hora disponible (12h) a minutos totales en formato 24h
const totalMinutosDisponible = convertir12hA24hEnMinutos(horaObj.hora);
// ✅ Comparar en el mismo formato (24h)
const pasaFiltro = totalMinutosDisponible >= totalMinutosServidor;
console.log('⚡ Evaluando hora:', {
horaDisponible: horaObj.hora,
totalMinutosDisponible: totalMinutosDisponible,
horaServidor: horaServidor,
totalMinutosServidor: totalMinutosServidor,
pasaFiltro: pasaFiltro
});
return pasaFiltro;
});
})
.catch(error => {
console.error('Error al obtener hora servidor:', error);
// Fallback: usar hora local del cliente
const ahora = new Date();
const totalMinutosActual = ahora.getHours() * 60 + ahora.getMinutes();
console.log('🔄 Usando fallback - Hora local:', ahora.toLocaleTimeString());
return horas.filter(horaObj => {
const totalMinutosDisponible = convertir12hA24hEnMinutos(horaObj.hora);
return totalMinutosDisponible >= (totalMinutosActual - 15);
});
});
}
// 🔥 NUEVA FUNCIÓN: Convertir formato 12h (ej: "02:30 PM") a minutos totales en 24h
function convertir12hA24hEnMinutos(hora12h) {
// Dividir la cadena (ej: "02:30 PM" -> ["02", "30", "PM"])
const [horaMin, ampm] = hora12h.split(' ');
const [horasStr, minutosStr] = horaMin.split(':');
let horas = parseInt(horasStr);
const minutos = parseInt(minutosStr);
// Convertir a formato 24h
if (ampm.toUpperCase() === 'PM' && horas !== 12) {
horas += 12;
} else if (ampm.toUpperCase() === 'AM' && horas === 12) {
horas = 0;
}
return horas * 60 + minutos;
}
// 🔥 NUEVA FUNCIÓN: Manejar horas filtradas con mensajes específicos
function manejarHorasFiltradas(horasFiltradas, horasOriginales, fechaSeleccionada) {
const hoy = new Date().toLocaleDateString('en-CA');
if (fechaSeleccionada === hoy && horasFiltradas.length === 0) {
// Caso: Es hoy y no hay horas disponibles después de la hora actual
if (horasOriginales.length > 0) {
return {
horas: [],
mensaje: getTranslatedText('no_more_times_today')
};
} else {
return {
horas: [],
mensaje: getTranslatedText('no_availability')
};
}
} else if (fechaSeleccionada === hoy && horasFiltradas.length < horasOriginales.length) {
// Caso: Es hoy y se filtraron algunas horas
console.log(`⏰ Se filtraron ${horasOriginales.length - horasFiltradas.length} horas pasadas para hoy`);
}
return {
horas: horasFiltradas,
mensaje: null
};
}
// 🔥 NUEVA FUNCIÓN: Manejo mejorado de transición entre modales
function switchModal(currentModalId, nextModalId, callback) {
const currentModal = bootstrap.Modal.getInstance(document.getElementById(currentModalId));
const nextModalElement = document.getElementById(nextModalId);
if (currentModal) {
// Usar evento hidden.bs.modal para asegurar la transición limpia
document.getElementById(currentModalId).addEventListener('hidden.bs.modal', function handler() {
// Remover el event listener después de usarlo
this.removeEventListener('hidden.bs.modal', handler);
// Pequeño delay para asegurar que Bootstrap limpió el backdrop
setTimeout(() => {
if (nextModalElement) {
const nextModal = new bootstrap.Modal(nextModalElement);
nextModal.show();
// Ejecutar callback si existe
if (callback && typeof callback === 'function') {
callback();
}
}
}, 50);
});
currentModal.hide();
} else if (nextModalElement) {
// Si no hay modal actual, simplemente abrir el siguiente
const nextModal = new bootstrap.Modal(nextModalElement);
nextModal.show();
}
}
// 🔥 NUEVA FUNCIÓN: Cerrar todos los modales y limpiar
function closeAllModals() {
const modals = document.querySelectorAll('.modal');
modals.forEach(modal => {
const modalInstance = bootstrap.Modal.getInstance(modal);
if (modalInstance) {
modalInstance.hide();
}
});
// Limpiar manualmente el backdrop
const backdrops = document.querySelectorAll('.modal-backdrop');
backdrops.forEach(backdrop => {
backdrop.remove();
});
// Restaurar el body
document.body.classList.remove('modal-open');
document.body.style.overflow = '';
document.body.style.paddingRight = '';
}
// Función para obtener texto traducido
function getTranslatedText(key) {
const translations = {
// Mensajes de error y validación
'select_valid_date': {
es: 'Selecciona una fecha válida.',
en: 'Select a valid date.'
},
'select_valid_time': {
es: 'Selecciona una hora válida.',
en: 'Select a valid time.'
},
'no_availability': {
es: 'Sin disponibilidad',
en: 'No availability'
},
'error_loading_schedules': {
es: 'Error al cargar horarios',
en: 'Error loading schedules'
},
'error_saving_appointment': {
es: 'Error al guardar la cita',
en: 'Error saving appointment'
},
'date_not_selected': {
es: 'Fecha no seleccionada',
en: 'Date not selected'
},
'time_not_selected': {
es: 'Hora no seleccionada',
en: 'Time not selected'
},
'time_not_available': {
es: 'Hora no disponible',
en: 'Time not available'
},
// Mensajes de éxito/error
'appointment_confirmed_success': {
es: '✅ Tu cita ha sido confirmada correctamente.',
en: '✅ Your appointment has been confirmed successfully.'
},
'appointment_error': {
es: '❌ Hubo un problema al registrar la cita.',
en: '❌ There was a problem registering the appointment.'
},
// Textos para resumen
'patient': {
es: 'Paciente:',
en: 'Patient:'
},
'study': {
es: 'Estudio:',
en: 'Study:'
},
'date': {
es: 'Fecha:',
en: 'Date:'
},
'time': {
es: 'Hora:',
en: 'Time:'
},
'dash': {
es: '—',
en: '—'
},
// 🔥 NUEVAS TRADUCCIONES PARA FILTRADO DE HORAS
'no_more_times_today': {
es: 'No hay más horarios disponibles para hoy',
en: 'No more available times for today'
},
'times_filtered_today': {
es: 'Mostrando horarios disponibles a partir de ahora',
en: 'Showing available times from now on'
}
};
const currentLang = document.documentElement.lang || 'es';
return translations[key] ? translations[key][currentLang] || translations[key]['es'] : key;
}
// Tu código existente para parámetros URL...
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
// Obtener el estudio desde la URL
const estudioFromUrl = getUrlParameter('estudio');
currentEstudioFromUrl = estudioFromUrl;
// Mapeo de parámetros URL a valores del select
const estudioMapping = {
'rayos-x': 'rayos-x',
'ultrasonido': 'ultrasonido-4d',
'tomografia': 'tomografia',
'resonancia': 'resonancia',
'mamografia': 'mamografia',
'nuclear': 'nuclear',
'radiografia': 'radiografia',
'ultrasonido-abdominal': 'ultrasonido-abdominal',
'ultrasonido-mama': 'ultrasonido-mama',
'ecocardiograma': 'ecocardiograma',
'ultrasonido-musculoesqueletico': 'ultrasonido-musculoesqueletico',
'ultrasonido-obstetrico': 'ultrasonido-obstetrico',
'arteriografia-venografia': 'arteriografia-venografia',
'ultrasonido-intravascular': 'ultrasonido-intravascular',
'ultrasonido-vascular-periferico': 'ultrasonido-vascular-periferico',
'ultrasonido-vascular': 'ultrasonido-vascular',
'ultrasonido-pelvico': 'ultrasonido-pelvico',
'ultrasonido-prostata': 'ultrasonido-prostata',
'ultrasonido-renal': 'ultrasonido-renal',
'ultrasonido-escrotal': 'ultrasonido-escrotal',
'ultrasonido-tiroideo': 'ultrasonido-tiroideo'
};
// Paso 1: Datos personales
const formStep1 = document.getElementById('wizardStep1Form');
const nextBtnStep1 = document.getElementById('nextBtn');
function checkFieldsFilledStep1() {
const inputs = formStep1.querySelectorAll('input');
let allFilled = true;
inputs.forEach(input => {
if (input.value.trim() === '') {
allFilled = false;
}
});
if (nextBtnStep1) {
nextBtnStep1.disabled = !allFilled;
}
}
if (formStep1) {
formStep1.querySelectorAll('input').forEach(input => {
input.addEventListener('input', checkFieldsFilledStep1);
});
}
// Función para seleccionar estudio automáticamente
function selectStudyFromUrl() {
if (currentEstudioFromUrl && estudioMapping[currentEstudioFromUrl] && !urlParamProcessed) {
const studySelect = document.getElementById('studyType');
if (studySelect) {
for (let i = 0; i < studySelect.options.length; i++) {
if (studySelect.options[i].value === estudioMapping[currentEstudioFromUrl]) {
studySelect.selectedIndex = i;
const event = new Event('change', { bubbles: true });
studySelect.dispatchEvent(event);
urlParamProcessed = true;
break;
}
}
}
}
}
// Manejar parámetro URL cuando se abre el modal paso 2
if (estudioFromUrl && estudioMapping[estudioFromUrl]) {
setTimeout(() => {
const modalElement = document.getElementById('agendarCitaModal');
if (modalElement) {
const modal = new bootstrap.Modal(modalElement);
modal.show();
}
}, 1000);
}
// Manejar clicks en botones de servicios específicos
document.querySelectorAll('[data-estudio]').forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const estudio = this.getAttribute('data-estudio');
const url = new URL(window.location);
url.searchParams.set('estudio', estudio);
window.history.replaceState({}, '', url);
currentEstudioFromUrl = estudio;
urlParamProcessed = false;
closeAllModals(); // 🔥 Limpiar antes de abrir nuevo modal
const modalElement = document.getElementById('agendarCitaModal');
if (modalElement) {
const modal = new bootstrap.Modal(modalElement);
modal.show();
}
});
});
// 🔥 CONFIGURACIÓN MEJORADA: Botón siguiente del paso 1
if (nextBtnStep1) {
nextBtnStep1.addEventListener('click', () => {
if (formStep1) {
formStep1.classList.add('was-validated');
if (formStep1.checkValidity()) {
// Usar la nueva función de transición
switchModal('agendarCitaModal', 'agendarCitaPaso2', selectStudyFromUrl);
}
}
});
}
// Paso 2: Selección de estudio
const formStep2 = document.getElementById('wizardStep2Form');
const studySelect = document.getElementById('studyType');
const nextBtnStep2 = document.getElementById('nextStepBtn');
const prevBtnStep2 = document.getElementById('prevStepBtn');
if (studySelect && nextBtnStep2) {
studySelect.addEventListener('change', () => {
nextBtnStep2.disabled = studySelect.value === '';
});
nextBtnStep2.disabled = studySelect.value === '';
}
if (nextBtnStep2) {
nextBtnStep2.addEventListener('click', () => {
if (formStep2) {
formStep2.classList.add('was-validated');
if (formStep2.checkValidity()) {
// Actualizar resumen antes de cambiar de modal
const resumenNombre = document.getElementById('resumenNombre');
const resumenEstudio = document.getElementById('resumenEstudio');
const firstName = document.getElementById('firstName');
const lastName = document.getElementById('lastName');
if (resumenNombre && firstName && lastName) {
resumenNombre.textContent = firstName.value + ' ' + lastName.value;
}
if (resumenEstudio && studySelect) {
resumenEstudio.textContent = studySelect.options[studySelect.selectedIndex].text;
}
// Usar la nueva función de transición
switchModal('agendarCitaPaso2', 'agendarCitaPaso3');
}
}
});
}
if (prevBtnStep2) {
prevBtnStep2.addEventListener('click', () => {
switchModal('agendarCitaPaso2', 'agendarCitaModal');
});
}
// Paso 3: Fecha y hora
const formStep3 = document.getElementById('wizardStep3Form');
const confirmBtn = document.getElementById('confirmBtn');
const dateSelect = document.getElementById('preferredDate');
const timeSelect = document.getElementById('preferredTime');
const prevBtnStep3 = document.getElementById('prevStep3Btn');
function setMinDate() {
if (dateSelect) {
const today = new Date().toISOString().split('T')[0];
dateSelect.setAttribute('min', today);
}
}
setMinDate();
function getHoraLegible(timeId) {
return horariosDisponibles[timeId] || getTranslatedText('time_not_available');
}
function updateResumenStep3() {
const resumenFecha = document.getElementById('resumenFecha');
const resumenHora = document.getElementById('resumenHora');
if (resumenFecha && dateSelect) {
resumenFecha.textContent = dateSelect.value || getTranslatedText('dash');
}
if (resumenHora && timeSelect) {
if (timeSelect.value) {
resumenHora.textContent = getHoraLegible(timeSelect.value);
} else {
resumenHora.textContent = getTranslatedText('dash');
}
}
}
function checkStep3Validity() {
const valid = dateSelect && dateSelect.value && timeSelect && timeSelect.value;
if (confirmBtn) {
confirmBtn.disabled = !valid;
}
updateResumenStep3();
}
// 🔥 MODIFICAR el event listener del dateSelect
if (dateSelect) {
dateSelect.addEventListener('change', function () {
const fecha = this.value;
if (timeSelect) {
timeSelect.innerHTML = '';
timeSelect.disabled = true;
const loadingOption = document.createElement('option');
loadingOption.textContent = 'Cargando horarios...';
loadingOption.disabled = true;
timeSelect.appendChild(loadingOption);
// Primero obtener los horarios disponibles
fetch(`/admin/horario/horarios-disponibles/${fecha}`)
.then(response => {
if (!response.ok) throw new Error('Error al cargar horarios');
return response.json();
})
.then(horas => {
console.log('📅 Horarios recibidos:', horas.length);
// Sigue aplicando tu filtro actual
return filtrarHorasParaHoy(horas, fecha);
})
.then(horasFiltradas => {
timeSelect.innerHTML = '';
horariosDisponibles = {};
console.log('✅ Horarios después del filtro:', horasFiltradas.length);
if (horasFiltradas.length === 0) {
const option = document.createElement('option');
option.textContent = getTranslatedText('no_availability');
option.disabled = true;
timeSelect.appendChild(option);
} else {
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = getTranslatedText('select_valid_time');
defaultOption.disabled = true;
defaultOption.selected = true;
timeSelect.appendChild(defaultOption);
horasFiltradas.forEach(horaObj => {
const option = document.createElement('option');
option.value = horaObj.id;
option.textContent = horaObj.hora;
// DISPONIBLE
if (horaObj.estado === 'disponible') {
horariosDisponibles[horaObj.id] = horaObj.hora;
option.textContent += ` (${getTranslatedText('Disponible')})`;
}
// OCUPADO
if (horaObj.estado === 'ocupado') {
option.disabled = true;
option.style.opacity = '0.5';
option.textContent += ` (${getTranslatedText('Ocupado')})`;
}
// CERRADO
if (horaObj.estado === 'cerrado') {
option.disabled = true;
option.style.opacity = '0.4';
option.textContent += ` (${getTranslatedText('Cerrado')})`;
}
timeSelect.appendChild(option);
});
}
timeSelect.disabled = false;
checkStep3Validity();
})
.catch(error => {
console.error('Error en carga de horarios:', error);
timeSelect.innerHTML = '';
const option = document.createElement('option');
option.textContent = getTranslatedText('error_loading_schedules');
option.disabled = true;
timeSelect.appendChild(option);
timeSelect.disabled = false;
checkStep3Validity();
});
}
});
}
if (timeSelect) {
timeSelect.addEventListener('change', checkStep3Validity);
}
if (confirmBtn) {
confirmBtn.addEventListener('click', () => {
if (formStep3) {
formStep3.classList.add('was-validated');
if (formStep3.checkValidity()) {
const fechaSeleccionada = document.getElementById('preferredDate').value;
const horaIdSeleccionada = document.getElementById('preferredTime').value;
const horaSeleccionada = getHoraLegible(horaIdSeleccionada);
const payload = {
user: {
name: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value,
email: document.getElementById('email').value,
phone: document.getElementById('phone').value,
age: parseInt(document.getElementById('age').value) || null
},
cita: {
fecha: fechaSeleccionada,
horarioId: horaIdSeleccionada,
tipoEstudio: document.getElementById('studyType').value,
notas: document.getElementById('observaciones').value,
origen: currentEstudioFromUrl ? 'url_param' : 'directo'
}
};
fetch('/api/confirmar-cita', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
})
.then(response => {
if (!response.ok) throw new Error(getTranslatedText('error_saving_appointment'));
return response.json();
})
.then(data => {
// 🔥 Cerrar todos los modales antes de mostrar confirmación
closeAllModals();
// Pequeño delay para asegurar limpieza
setTimeout(() => {
mostrarModalConfirmacion(fechaSeleccionada, horaSeleccionada);
if (typeof addFlash === 'function') {
addFlash('success', getTranslatedText('appointment_confirmed_success'));
}
}, 100);
})
.catch(error => {
console.error('Error al guardar cita:', error);
// 🔥 Cerrar modales incluso en error
closeAllModals();
setTimeout(() => {
mostrarModalConfirmacion(fechaSeleccionada, horaSeleccionada);
if (typeof addFlash === 'function') {
addFlash('danger', getTranslatedText('appointment_error'));
}
}, 100);
});
}
}
});
}
// Función para mostrar el modal de confirmación final
function mostrarModalConfirmacion(fecha, hora) {
let fechaFormateada = getTranslatedText('date_not_selected');
if (fecha) {
try {
const currentLang = document.documentElement.lang || 'es';
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
fechaFormateada = new Date(fecha).toLocaleDateString(currentLang, options);
fechaFormateada = fechaFormateada.charAt(0).toUpperCase() + fechaFormateada.slice(1);
} catch (e) {
fechaFormateada = fecha;
}
}
const fechaElement = document.getElementById('fechaCitaConfirmada');
const horaElement = document.getElementById('horaCitaConfirmada');
const emailElement = document.getElementById('emailCitaConfirmada');
const emailInput = document.getElementById('email');
if (fechaElement) fechaElement.textContent = fechaFormateada;
if (horaElement) horaElement.textContent = hora || getTranslatedText('time_not_selected');
if (emailElement && emailInput) emailElement.textContent = emailInput.value;
const confirmacionModalElement = document.getElementById('confirmacionFinalModal');
if (confirmacionModalElement) {
const confirmacionModal = new bootstrap.Modal(confirmacionModalElement);
confirmacionModal.show();
confirmacionModalElement.addEventListener('hidden.bs.modal', function () {
resetAllForms();
});
}
}
// Función para resetear todos los formularios
function resetAllForms() {
if (formStep1) {
formStep1.reset();
formStep1.classList.remove('was-validated');
}
if (formStep2) {
formStep2.reset();
formStep2.classList.remove('was-validated');
}
if (formStep3) {
formStep3.reset();
formStep3.classList.remove('was-validated');
}
if (nextBtnStep1) nextBtnStep1.disabled = true;
if (nextBtnStep2) nextBtnStep2.disabled = true;
if (confirmBtn) confirmBtn.disabled = true;
if (currentEstudioFromUrl) {
const url = new URL(window.location);
url.searchParams.delete('estudio');
window.history.replaceState({}, '', url);
currentEstudioFromUrl = '';
urlParamProcessed = false;
}
}
if (prevBtnStep3) {
prevBtnStep3.addEventListener('click', () => {
switchModal('agendarCitaPaso3', 'agendarCitaPaso2');
});
}
// 🔥 MEJOR MANEJO DE EVENTOS DE MODAL
document.querySelectorAll('.modal').forEach(modal => {
modal.addEventListener('show.bs.modal', function () {
// Asegurar que solo hay un backdrop
const existingBackdrops = document.querySelectorAll('.modal-backdrop');
if (existingBackdrops.length > 1) {
existingBackdrops.forEach((backdrop, index) => {
if (index > 0) backdrop.remove();
});
}
});
modal.addEventListener('hidden.bs.modal', function () {
// Solo limpiar si no hay más modales abiertos
const openModals = document.querySelectorAll('.modal.show');
if (openModals.length === 0) {
const backdrops = document.querySelectorAll('.modal-backdrop');
backdrops.forEach(backdrop => {
backdrop.remove();
});
document.body.classList.remove('modal-open');
document.body.style.overflow = '';
document.body.style.paddingRight = '';
}
});
});
});
</script>
{% endblock %}

templates/content.html.twig line 1