templates/content.html.twig line 1

Open in your IDE?
  1. {% block body %}
  3.   <style>
  4.     /* ===== VARIABLES PARA MODO OSCURO ===== */
  5.     [data-theme="dark"] {
  6.       --bg-primary: #1a1d23;
  7.       --bg-secondary: #24292e;
  8.       --bg-tertiary: #2d333b;
  9.       --text-primary: #f0f6fc;
  10.       --text-secondary: #c9d1d9;
  11.       --text-muted: #8b949e;
  12.       --border-color: #30363d;
  13.       --card-bg: #24292e;
  14.       --header-bg: #1a1d23;
  15.       --shadow-color: rgba(0, 0, 0, 0.3);
  16.       --hover-shadow: rgba(0, 0, 0, 0.5);
  17.       --link-color: #58a6ff;
  18.       --link-hover: #79c0ff;
  19.     }
  21.     /* ===== ESTILOS SOLO PARA MODO OSCURO ===== */
  22.     [data-theme="dark"] body {
  23.       background-color: var(--bg-primary);
  24.       color: var(--text-primary);
  25.     }
  27.     /* ===== ENLACES DE CORREO ===== */
  28.     [data-theme="dark"] a[href^="mailto:"] {
  29.       color: var(--link-color) !important;
  30.       text-decoration: none;
  31.       transition: color 0.2s ease;
  32.     }
  34.     [data-theme="dark"] a[href^="mailto:"]:hover {
  35.       color: var(--link-hover) !important;
  36.       text-decoration: underline;
  37.     }
  39.     /* ===== ENCABEZADOS DEL FOOTER EN BLANCO ===== */
  40.     [data-theme="dark"] footer h5,
  41.     [data-theme="dark"] footer h4,
  42.     [data-theme="dark"] footer h3,
  43.     [data-theme="dark"] footer .footer-heading {
  44.       color: var(--text-primary) !important;
  45.     }
  47.     /* ===== HOVER EN AZUL CLARO PARA FOOTER ===== */
  48.     [data-theme="dark"] footer a:hover {
  49.       color: var(--link-hover) !important;
  50.     }
  52.     /* ===== SECCIÓN HERO ===== */
  53.     [data-theme="dark"] .hero-section {
  54.       background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
  55.     }
  57.     [data-theme="dark"] .main-title,
  58.     [data-theme="dark"] .text-dark-custom {
  59.       color: var(--text-primary) !important;
  60.     }
  62.     /* ===== CARDS ===== */
  63.     [data-theme="dark"] .card {
  64.       background-color: var(--card-bg);
  65.       border-color: var(--border-color);
  66.       color: var(--text-primary);
  67.       box-shadow: 0 4px 20px var(--shadow-color);
  68.     }
  70.     [data-theme="dark"] .card-header {
  71.       background-color: var(--card-bg) !important;
  72.       border-bottom-color: var(--border-color);
  73.     }
  75.     /* ===== SERVICIOS ===== */
  76.     [data-theme="dark"] .servicio-card-profesional {
  77.       background: var(--card-bg);
  78.       border: 1px solid var(--border-color);
  79.     }
  81.     [data-theme="dark"] .servicio-card-profesional .card-header {
  82.       background: transparent !important;
  83.     }
  85.     [data-theme="dark"] .features-list .feature-item {
  86.       background: rgba(13, 110, 253, 0.05);
  87.       border: 1px solid var(--border-color);
  88.     }
  90.     [data-theme="dark"] .category-header {
  91.       color: var(--text-primary);
  92.     }
  94.     /* ===== EXPERIENCIA ===== */
  95.     [data-theme="dark"] .features-list .feature-item {
  96.       background: var(--bg-secondary);
  97.       border-left-color: var(--border-color);
  98.     }
  100.     /* ===== CONTACTO ===== */
  101.     [data-theme="dark"] .contact-card {
  102.       background: var(--card-bg);
  103.     }
  105.     [data-theme="dark"] .map-container {
  106.       border-color: var(--border-color);
  107.     }
  109.     /* ===== FORMULARIOS MÉDICOS ===== */
  110.     [data-theme="dark"] .document-item {
  111.       border-bottom-color: var(--border-color);
  112.     }
  114.     /* ===== EQUIPO ===== */
  115.     [data-theme="dark"] .avatar-wrapper .img-cover {
  116.       border-color: var(--bg-secondary);
  117.     }
  119.     /* ===== PRIVACIDAD Y TÉRMINOS ===== */
  120.     [data-theme="dark"] .privacy-card,
  121.     [data-theme="dark"] .terms-card {
  122.       background: var(--card-bg);
  123.     }
  125.     [data-theme="dark"] .alert-light {
  126.       background-color: var(--bg-secondary);
  127.       border-color: var(--border-color);
  128.       color: var(--text-primary);
  129.     }
  131.     /* ===== MODALES MEJORADOS ===== */
  132.     [data-theme="dark"] .modal-content {
  133.       background-color: var(--card-bg);
  134.       color: var(--text-primary);
  135.       border-color: var(--border-color);
  136.       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  137.     }
  139.     [data-theme="dark"] .modal-header {
  140.       border-bottom-color: var(--border-color);
  141.       background-color: var(--bg-secondary);
  142.       padding: 1.25rem 1.5rem;
  143.     }
  145.     [data-theme="dark"] .modal-title {
  146.       color: var(--text-primary);
  147.       font-weight: 600;
  148.     }
  150.     [data-theme="dark"] .modal-body {
  151.       padding: 1.5rem;
  152.     }
  154.     [data-theme="dark"] .modal-footer {
  155.       border-top-color: var(--border-color);
  156.       background-color: var(--bg-secondary);
  157.       padding: 1rem 1.5rem;
  158.     }
  160.     [data-theme="dark"] .form-control,
  161.     [data-theme="dark"] .form-select {
  162.       background-color: var(--bg-primary);
  163.       border-color: var(--border-color);
  164.       color: var(--text-primary);
  165.       transition: all 0.3s ease;
  166.     }
  168.     [data-theme="dark"] .form-control:focus,
  169.     [data-theme="dark"] .form-select:focus {
  170.       background-color: var(--bg-primary);
  171.       border-color: #0d6efd;
  172.       color: var(--text-primary);
  173.       box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  174.     }
  176.     [data-theme="dark"] .form-label {
  177.       color: var(--text-primary);
  178.       font-weight: 500;
  179.     }
  181.     [data-theme="dark"] .btn-close {
  182.       filter: invert(1) brightness(1.5);
  183.       opacity: 0.8;
  184.     }
  186.     [data-theme="dark"] .btn-close:hover {
  187.       opacity: 1;
  188.     }
  190.     /* ===== BOTÓN FLOTANTE ===== */
  191.     [data-theme="dark"] .dropdown-menu-user {
  192.       background: var(--card-bg);
  193.       border-color: var(--border-color);
  194.       color: var(--text-primary);
  195.     }
  197.     [data-theme="dark"] .dropdown-item-user {
  198.       color: var(--text-primary);
  199.     }
  201.     /* ===== TEXTOS ESPECÍFICOS ===== */
  202.     [data-theme="dark"] .text-muted {
  203.       color: var(--text-muted) !important;
  204.     }
  206.     [data-theme="dark"] .text-dark {
  207.       color: var(--text-primary) !important;
  208.     }
  210.     [data-theme="dark"] .bg-light {
  211.       background-color: var(--bg-secondary) !important;
  212.     }
  214.     [data-theme="dark"] .bg-white {
  215.       background-color: var(--card-bg) !important;
  216.     }
  218.     [data-theme="dark"] .border {
  219.       border-color: var(--border-color) !important;
  220.     }
  222.     [data-theme="dark"] .border-bottom {
  223.       border-bottom-color: var(--border-color) !important;
  224.     }
  226.     [data-theme="dark"] .border-top {
  227.       border-top-color: var(--border-color) !important;
  228.     }
  230.     /* ===== BADGES Y ALERTAS ===== */
  231.     [data-theme="dark"] .badge.bg-white {
  232.       background-color: var(--card-bg) !important;
  233.       color: var(--text-primary) !important;
  234.     }
  236.     [data-theme="dark"] .alert-success {
  237.       background-color: rgba(25, 135, 84, 0.1);
  238.       border-color: rgba(25, 135, 84, 0.2);
  239.       color: var(--text-primary);
  240.     }
  242.     [data-theme="dark"] .alert-info {
  243.       background-color: rgba(13, 202, 240, 0.1);
  244.       border-color: rgba(13, 202, 240, 0.2);
  245.       color: var(--text-primary);
  246.     }
  248.     [data-theme="dark"] .alert-warning {
  249.       background-color: rgba(255, 193, 7, 0.1);
  250.       border-color: rgba(255, 193, 7, 0.2);
  251.       color: var(--text-primary);
  252.     }
  254.     [data-theme="dark"] .alert-danger {
  255.       background-color: rgba(220, 53, 69, 0.1);
  256.       border-color: rgba(220, 53, 69, 0.2);
  257.       color: var(--text-primary);
  258.     }
  260.     /* ===== ICON WRAPPERS ===== */
  261.     [data-theme="dark"] .icon-wrapper {
  262.       background-color: var(--bg-secondary) !important;
  263.     }
  265.     /* ===== BOTONES ===== */
  266.     [data-theme="dark"] .btn-outline-primary {
  267.       color: var(--link-color);
  268.       border-color: var(--link-color);
  269.     }
  271.     [data-theme="dark"] .btn-outline-primary:hover {
  272.       background-color: var(--link-color);
  273.       border-color: var(--link-color);
  274.       color: var(--bg-primary);
  275.     }
  277.     /* ===== ESTILOS ESPECÍFICOS PARA FORMULARIO DE CITAS ===== */
  278.     [data-theme="dark"] #agendarCitaModal .form-group,
  279.     [data-theme="dark"] #agendarCitaPaso2 .form-group,
  280.     [data-theme="dark"] #agendarCitaPaso3 .form-group,
  281.     [data-theme="dark"] #confirmacionFinalModal .form-group {
  282.       margin-bottom: 1.5rem;
  283.     }
  284.     
  285.     [data-theme="dark"] #agendarCitaModal .form-label,
  286.     [data-theme="dark"] #agendarCitaPaso2 .form-label,
  287.     [data-theme="dark"] #agendarCitaPaso3 .form-label,
  288.     [data-theme="dark"] #confirmacionFinalModal .form-label {
  289.       color: var(--text-primary);
  290.       font-weight: 500;
  291.       margin-bottom: 0.5rem;
  292.       display: block;
  293.     }
  294.     
  295.     [data-theme="dark"] #agendarCitaModal .modal-body,
  296.     [data-theme="dark"] #agendarCitaPaso2 .modal-body,
  297.     [data-theme="dark"] #agendarCitaPaso3 .modal-body,
  298.     [data-theme="dark"] #confirmacionFinalModal .modal-body {
  299.       background-color: var(--bg-primary);
  300.     }
  301.     
  302.     [data-theme="dark"] #agendarCitaModal .form-control,
  303.     [data-theme="dark"] #agendarCitaPaso2 .form-control,
  304.     [data-theme="dark"] #agendarCitaPaso3 .form-control,
  305.     [data-theme="dark"] #confirmacionFinalModal .form-control {
  306.       background-color: var(--bg-primary);
  307.       border: 1px solid var(--border-color);
  308.       color: var(--text-primary);
  309.       padding: 0.75rem 1rem;
  310.       border-radius: 0.375rem;
  311.       width: 100%;
  312.       transition: all 0.3s ease;
  313.     }
  314.     
  315.     [data-theme="dark"] #agendarCitaModal .form-control:focus,
  316.     [data-theme="dark"] #agendarCitaPaso2 .form-control:focus,
  317.     [data-theme="dark"] #agendarCitaPaso3 .form-control:focus,
  318.     [data-theme="dark"] #confirmacionFinalModal .form-control:focus {
  319.       background-color: var(--bg-primary);
  320.       border-color: #0d6efd;
  321.       color: var(--text-primary);
  322.       box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  323.       outline: none;
  324.     }
  325.     
  326.     [data-theme="dark"] #agendarCitaModal .form-control::placeholder,
  327.     [data-theme="dark"] #agendarCitaPaso2 .form-control::placeholder,
  328.     [data-theme="dark"] #agendarCitaPaso3 .form-control::placeholder,
  329.     [data-theme="dark"] #confirmacionFinalModal .form-control::placeholder {
  330.       color: var(--text-muted);
  331.     }
  332.     
  333.     [data-theme="dark"] #agendarCitaModal .form-select,
  334.     [data-theme="dark"] #agendarCitaPaso2 .form-select,
  335.     [data-theme="dark"] #agendarCitaPaso3 .form-select,
  336.     [data-theme="dark"] #confirmacionFinalModal .form-select {
  337.       background-color: var(--bg-primary);
  338.       border: 1px solid var(--border-color);
  339.       color: var(--text-primary);
  340.       padding: 0.75rem 1rem;
  341.       border-radius: 0.375rem;
  342.       width: 100%;
  343.     }
  344.     
  345.     [data-theme="dark"] #agendarCitaModal .form-select:focus,
  346.     [data-theme="dark"] #agendarCitaPaso2 .form-select:focus,
  347.     [data-theme="dark"] #agendarCitaPaso3 .form-select:focus,
  348.     [data-theme="dark"] #confirmacionFinalModal .form-select:focus {
  349.       background-color: var(--bg-primary);
  350.       border-color: #0d6efd;
  351.       color: var(--text-primary);
  352.       box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  353.     }
  354.     
  355.     [data-theme="dark"] #agendarCitaModal .step-indicator,
  356.     [data-theme="dark"] #agendarCitaPaso2 .step-indicator,
  357.     [data-theme="dark"] #agendarCitaPaso3 .step-indicator,
  358.     [data-theme="dark"] #confirmacionFinalModal .step-indicator {
  359.       color: var(--text-muted);
  360.       font-size: 0.875rem;
  361.       margin-bottom: 1.5rem;
  362.     }
  363.     
  364.     [data-theme="dark"] #agendarCitaModal .step-title,
  365.     [data-theme="dark"] #agendarCitaPaso2 .step-title,
  366.     [data-theme="dark"] #agendarCitaPaso3 .step-title,
  367.     [data-theme="dark"] #confirmacionFinalModal .step-title {
  368.       color: var(--text-primary);
  369.       font-size: 1.25rem;
  370.       font-weight: 600;
  371.       margin-bottom: 1.5rem;
  372.     }
  373.     
  374.     [data-theme="dark"] #agendarCitaModal .form-row,
  375.     [data-theme="dark"] #agendarCitaPaso2 .form-row,
  376.     [data-theme="dark"] #agendarCitaPaso3 .form-row,
  377.     [data-theme="dark"] #confirmacionFinalModal .form-row {
  378.       display: flex;
  379.       flex-wrap: wrap;
  380.       margin: 0 -0.5rem;
  381.     }
  382.     
  383.     [data-theme="dark"] #agendarCitaModal .form-col,
  384.     [data-theme="dark"] #agendarCitaPaso2 .form-col,
  385.     [data-theme="dark"] #agendarCitaPaso3 .form-col,
  386.     [data-theme="dark"] #confirmacionFinalModal .form-col {
  387.       flex: 1;
  388.       padding: 0 0.5rem;
  389.       min-width: 200px;
  390.     }
  391.     
  392.     [data-theme="dark"] #agendarCitaModal .btn-cancel,
  393.     [data-theme="dark"] #agendarCitaPaso2 .btn-cancel,
  394.     [data-theme="dark"] #agendarCitaPaso3 .btn-cancel,
  395.     [data-theme="dark"] #confirmacionFinalModal .btn-cancel {
  396.       background-color: transparent;
  397.       border: 1px solid var(--border-color);
  398.       color: var(--text-primary);
  399.     }
  400.     
  401.     [data-theme="dark"] #agendarCitaModal .btn-cancel:hover,
  402.     [data-theme="dark"] #agendarCitaPaso2 .btn-cancel:hover,
  403.     [data-theme="dark"] #agendarCitaPaso3 .btn-cancel:hover,
  404.     [data-theme="dark"] #confirmacionFinalModal .btn-cancel:hover {
  405.       background-color: var(--bg-secondary);
  406.       border-color: var(--text-muted);
  407.     }
  408.     
  409.     [data-theme="dark"] #agendarCitaModal .btn-next,
  410.     [data-theme="dark"] #agendarCitaPaso2 .btn-next,
  411.     [data-theme="dark"] #agendarCitaPaso3 .btn-next,
  412.     [data-theme="dark"] #confirmacionFinalModal .btn-next {
  413.       background-color: #0d6efd;
  414.       border: 1px solid #0d6efd;
  415.       color: white;
  416.     }
  417.     
  418.     [data-theme="dark"] #agendarCitaModal .btn-next:hover,
  419.     [data-theme="dark"] #agendarCitaPaso2 .btn-next:hover,
  420.     [data-theme="dark"] #agendarCitaPaso3 .btn-next:hover,
  421.     [data-theme="dark"] #confirmacionFinalModal .btn-next:hover {
  422.       background-color: #0b5ed7;
  423.       border-color: #0a58ca;
  424.     }
  425.     
  426.     /* ===== ESTILOS ESPECÍFICOS PARA MODAL DE CONFIRMACIÓN ===== */
  427.     [data-theme="dark"] #confirmacionFinalModal .confirmation-icon {
  428.       color: #28a745;
  429.       font-size: 3rem;
  430.       margin-bottom: 1rem;
  431.     }
  432.     
  433.     [data-theme="dark"] #confirmacionFinalModal .confirmation-title {
  434.       color: var(--text-primary);
  435.       font-size: 1.5rem;
  436.       font-weight: 600;
  437.       margin-bottom: 1rem;
  438.     }
  439.     
  440.     [data-theme="dark"] #confirmacionFinalModal .confirmation-message {
  441.       color: var(--text-secondary);
  442.       margin-bottom: 1.5rem;
  443.     }
  444.     
  445.     [data-theme="dark"] #confirmacionFinalModal .appointment-details {
  446.       background-color: var(--bg-secondary);
  447.       border: 1px solid var(--border-color);
  448.       border-radius: 0.375rem;
  449.       padding: 1.5rem;
  450.       margin-bottom: 1.5rem;
  451.     }
  452.     
  453.     [data-theme="dark"] #confirmacionFinalModal .detail-item {
  454.       display: flex;
  455.       justify-content: space-between;
  456.       margin-bottom: 0.5rem;
  457.       padding-bottom: 0.5rem;
  458.       border-bottom: 1px solid var(--border-color);
  459.     }
  460.     
  461.     [data-theme="dark"] #confirmacionFinalModal .detail-item:last-child {
  462.       border-bottom: none;
  463.       margin-bottom: 0;
  464.     }
  465.     
  466.     [data-theme="dark"] #confirmacionFinalModal .detail-label {
  467.       color: var(--text-muted);
  468.       font-weight: 500;
  469.     }
  470.     
  471.     [data-theme="dark"] #confirmacionFinalModal .detail-value {
  472.       color: var(--text-primary);
  473.       font-weight: 600;
  474.     }
  475.     
  476.     [data-theme="dark"] #confirmacionFinalModal .btn-confirm {
  477.       background-color: #28a745;
  478.       border: 1px solid #28a745;
  479.       color: white;
  480.       font-weight: 600;
  481.     }
  482.     
  483.     [data-theme="dark"] #confirmacionFinalModal .btn-confirm:hover {
  484.       background-color: #218838;
  485.       border-color: #1e7e34;
  486.     }
  488.     /* ===== TRANSICIONES SUAVES ===== */
  489.     [data-theme="dark"] body,
  490.     [data-theme="dark"] .card,
  491.     [data-theme="dark"] .modal-content,
  492.     [data-theme="dark"] .form-control,
  493.     [data-theme="dark"] .form-select {
  494.       transition: all 0.3s ease;
  495.     }
  496.   </style>
  497.   
  498.   <section class="hero-section py-5 bg-light position-relative overflow-hidden" style="padding-top: 180px !important;">
  499.       <div class="container position-relative">
  500.         <div class="row align-items-center min-vh-80">
  501.     
  502.             {# Columna izquierda: Texto, botones y certificaciones #}
  503.             <div class="col-lg-6 mb-4 mb-lg-0">
  504.                 <!-- Badge destacado CORREGIDO -->
  505.                 <div class="badge-custom mb-4">
  506.                     <i class="bi bi-award-fill icon-custom"></i>
  507.                     <span class="fw-semibold">
  508.                         <span class="text-content" data-lang="es">25+ años de <span class="text-dark-custom">excelencia médica</span></span>
  509.                         <span class="text-content" data-lang="en" style="display:none;">25+ years of <span class="text-dark-custom">medical excellence</span></span>
  510.                     </span>
  511.                 </div>
  512.     
  513.                 <!-- Título principal CORREGIDO -->
  514.                 <h1 class="main-title mb-4">
  515.                     <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>
  516.                     <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>
  517.                 </h1>
  518.     
  519.                 <p class="lead text-muted mb-4 fs-5 lh-base">
  520.                     <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>
  521.                     <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>
  522.                 </p>
  523.     
  524.                 <!-- Botones de acción CORREGIDOS -->
  525.                 <div class="d-flex flex-column flex-sm-row gap-3 mb-5">
  526.                    <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">
  527.                         <span class="text-content" data-lang="es">
  528.                             <i class="bi bi-calendar-check me-2"></i>
  529.                             Agendar Cita
  530.                         </span>
  531.                         <span class="text-content" data-lang="en" style="display:none;">
  532.                             <i class="bi bi-calendar-check me-2"></i>
  533.                             Schedule Appointment
  534.                         </span>
  535.                     </a>
  536.                     <a href="#servicios" class="btn btn-outline-primary btn-lg px-4 py-3 fw-semibold hover-lift">
  537.                         <span class="text-content" data-lang="es">
  538.                             <i class="bi bi-list-ul me-2"></i>
  539.                             Ver Servicios
  540.                         </span>
  541.                         <span class="text-content" data-lang="en" style="display:none;">
  542.                             <i class="bi bi-list-ul me-2"></i>
  543.                             View Services
  544.                         </span>
  545.                     </a>
  546.                 </div>
  547.     
  548.                 <!-- Certificaciones -->
  549.                 <div class="d-flex flex-column flex-sm-row gap-3 align-items-center">
  550.                     <div class="d-flex align-items-center small">
  551.                         <i class="bi bi-award me-2 text-primary fs-6"></i>
  552.                         <span class="fw-semibold text-dark">
  553.                             <span class="text-content" data-lang="es">Certificaciones:</span>
  554.                             <span class="text-content" data-lang="en" style="display:none;">Certifications:</span>
  555.                         </span>
  556.                     </div>
  557.                     <div class="d-flex gap-2 flex-wrap">
  558.                         <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">
  559.                             <i class="bi bi-check-circle-fill me-2"></i>
  560.                             ISO 9001     
  561.                         </span>
  562.                         <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">
  563.                             <i class="bi bi-shield-lock-fill me-2"></i>
  564.                             HIPAA Compliant
  565.                         </span>
  566.                     </div>
  567.                 </div>
  568.             </div>  
  569.     
  570.             {# Columna derecha: Métricas #}
  571.             <div class="col-lg-6">
  572.                 <div class="row g-4">
  573.                     <!-- Pacientes -->
  574.                     <div class="col-6">
  575.                         <div class="card border-0 shadow-lg h-100 hover-lift">
  576.                             <div class="card-body text-center p-4">
  577.                                 <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;">
  578.                                     <i class="bi bi-people-fill text-primary fs-2"></i>
  579.                                 </div>
  580.                                 <h2 class="fw-bold text-primary display-5 mb-2">25,000+</h2>
  581.                                 <p class="text-muted mb-0 fw-semibold">
  582.                                     <span class="text-content" data-lang="es">Pacientes Atendidos</span>
  583.                                     <span class="text-content" data-lang="en" style="display:none;">Patients Served</span>
  584.                                 </p>
  585.                             </div>
  586.                         </div>
  587.                     </div>
  588.                     
  589.                     <!-- Experiencia -->
  590.                     <div class="col-6">
  591.                         <div class="card border-0 shadow-lg h-100 hover-lift">
  592.                             <div class="card-body text-center p-4">
  593.                                 <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;">
  594.                                     <i class="bi bi-award-fill text-success fs-2"></i>
  595.                                 </div>
  596.                                 <h2 class="fw-bold text-success display-5 mb-2">25+</h2>
  597.                                 <p class="text-muted mb-0 fw-semibold">
  598.                                     <span class="text-content" data-lang="es">Años de Experiencia</span>
  599.                                     <span class="text-content" data-lang="en" style="display:none;">Years of Experience</span>
  600.                                 </p>
  601.                             </div>
  602.                         </div>
  603.                     </div>
  604.                     
  605.                     <!-- Especialistas -->
  606.                     <div class="col-6">
  607.                         <div class="card border-0 shadow-lg h-100 hover-lift">
  608.                             <div class="card-body text-center p-4">
  609.                                 <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;">
  610.                                     <i class="bi bi-person-badge-fill text-info fs-2"></i>
  611.                                 </div>
  612.                                 <h2 class="fw-bold text-info display-5 mb-2">50+</h2>
  613.                                 <p class="text-muted mb-0 fw-semibold">
  614.                                     <span class="text-content" data-lang="es">Especialistas Médicos</span>
  615.                                     <span class="text-content" data-lang="en" style="display:none;">Medical Specialists</span>
  616.                                 </p>
  617.                             </div>
  618.                         </div>
  619.                     </div>
  620.                     
  621.                     <!-- Precisión -->
  622.                     <div class="col-6">
  623.                         <div class="card border-0 shadow-lg h-100 hover-lift">
  624.                             <div class="card-body text-center p-4">
  625.                                 <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;">
  626.                                     <i class="bi bi-graph-up-arrow text-warning fs-2"></i>
  627.                                 </div>
  628.                                 <h2 class="fw-bold text-warning display-5 mb-2">99.9%</h2>
  629.                                 <p class="text-muted mb-0 fw-semibold">
  630.                                     <span class="text-content" data-lang="es">Precisión Diagnóstica</span>
  631.                                     <span class="text-content" data-lang="en" style="display:none;">Diagnostic Accuracy</span>
  632.                                 </p>
  633.                             </div>
  634.                         </div>
  635.                     </div>
  636.                 </div>
  637.                 
  638.                 <!-- Indicadores de confianza -->
  639.                 <div class="mt-4 p-4 bg-white rounded-3 shadow-lg border-0 hover-lift">
  640.                     <div class="row text-center g-3">
  641.                         <div class="col-4">
  642.                             <div class="d-flex flex-column align-items-center">
  643.                                 <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;">
  644.                                     <i class="bi bi-clock-history text-success fs-5"></i>
  645.                                 </div>
  646.                                 <span class="fw-bold text-dark fs-5">24/7</span>
  647.                                 <small class="text-muted">
  648.                                     <span class="text-content" data-lang="es">Disponibilidad</span>
  649.                                     <span class="text-content" data-lang="en" style="display:none;">Availability</span>
  650.                                 </small>
  651.                             </div>
  652.                         </div>
  653.                         <div class="col-4">
  654.                             <div class="d-flex flex-column align-items-center">
  655.                                 <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;">
  656.                                     <i class="bi bi-lightning-charge text-warning fs-5"></i>
  657.                                 </div>
  658.                                 <span class="fw-bold text-dark fs-5">24h</span>
  659.                                 <small class="text-muted">
  660.                                     <span class="text-content" data-lang="es">Resultados</span>
  661.                                     <span class="text-content" data-lang="en" style="display:none;">Results</span>
  662.                                 </small>
  663.                             </div>
  664.                         </div>
  665.                         <div class="col-4">
  666.                             <div class="d-flex flex-column align-items-center">
  667.                                 <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;">
  668.                                     <i class="bi bi-star-fill text-warning fs-5"></i>
  669.                                 </div>
  670.                                 <span class="fw-bold text-dark fs-5">4.9/5</span>
  671.                                 <small class="text-muted">
  672.                                     <span class="text-content" data-lang="es">Rating</span>
  673.                                     <span class="text-content" data-lang="en" style="display:none;">Rating</span>
  674.                                 </small>
  675.                             </div>
  676.                         </div>
  677.                     </div>
  678.                 </div>
  679.             </div>
  680.         </div>
  681.     </div>
  682.     
  683.     <style>
  684.         .badge-custom {
  685.             background-color: rgba(13, 110, 253, 0.1);
  686.             color: #0d6efd;
  687.             border: 2px solid #0d6efd;
  688.             font-size: clamp(0.875rem, 2vw, 1rem);
  689.             padding: 0.5rem 1rem;
  690.             border-radius: 50rem;
  691.             display: inline-flex;
  692.             align-items: center;
  693.             box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  694.         }
  695.         
  696.         .main-title {
  697.             font-weight: 700;
  698.             line-height: 1.2;
  699.             color: #212529;
  700.             font-size: clamp(2rem, 5vw, 3.5rem);
  701.         }
  702.         
  703.         .text-primary-custom {
  704.             color: #0d6efd !important;
  705.         }
  706.         
  707.         .text-dark-custom {
  708.             color: #212529 !important;
  709.         }
  710.         
  711.         .icon-custom {
  712.             margin-right: 0.5rem;
  713.             color: #ffc107;
  714.             font-size: 1.25rem;
  715.         }
  716.         
  717.         @media (max-width: 576px) {
  718.             .badge-custom {
  719.                 padding: 0.375rem 0.75rem;
  720.             }
  721.         }
  722.     </style>
  723.   </section>
  724.   
  725.   
  726.   <!-- SECCIÓN SERVICIOS COMPLETA -->
  727.   <section class="hero-section py-5 bg-white" id="servicios">
  728.       <div class="container">
  729.         <!-- Encabezado -->
  730.         <div class="text-center mb-5 position-relative">
  731.             <!-- Badge destacado -->
  732.             <div class="badge-custom mb-3">
  733.                 <i class="bi bi-cpu-fill icon-custom"></i>
  734.                 <span class="text-content" data-lang="es">Tecnología Médica Avanzada</span>
  735.                 <span class="text-content" data-lang="en" style="display:none;">Advanced Medical Technology</span>
  736.             </div>
  737.     
  738.             <!-- Título principal CORREGIDO -->
  739.             <h2 class="fw-bold text-dark mb-3 display-5">
  740.                 <span class="text-content" data-lang="es">Nuestros <span class="text-primary-custom">Servicios</span></span>
  741.                 <span class="text-content" data-lang="en" style="display:none;">Our <span class="text-primary-custom">Services</span></span>
  742.             </h2>
  743.             
  744.             <div class="row justify-content-center">
  745.                 <div class="col-lg-8 col-xl-6">
  746.                     <p class="lead text-muted fs-5 lh-base mb-4">
  747.                         <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>
  748.                         <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>
  749.                     </p>
  750.                 </div>
  751.             </div>
  752.     
  753.             <!-- Línea decorativa -->
  754.             <div class="border-bottom border-2 border-primary w-25 mx-auto opacity-50"></div>
  755.     
  756.             <!-- Menú de navegación por categorías CORREGIDO -->
  757.             <div class="row justify-content-center mt-4">
  758.               <div class="col-lg-10">
  759.                  <div class="d-flex flex-wrap justify-content-center gap-3">
  760.                     <a href="#ultrasonidos-especializados" class="btn btn-outline-success rounded-pill px-4 py-2 fw-semibold">
  761.                         <span class="text-content" data-lang="es">
  762.                             <i class="bi bi-1-circle me-2"></i>
  763.                             Ultrasonidos
  764.                         </span>
  765.                         <span class="text-content" data-lang="en" style="display:none;">
  766.                             <i class="bi bi-1-circle me-2"></i>
  767.                             Ultrasounds
  768.                         </span>
  769.                     </a>
  770.                     <a href="#estudios-vasculares" class="btn btn-outline-info rounded-pill px-4 py-2 fw-semibold">
  771.                         <span class="text-content" data-lang="es">
  772.                             <i class="bi bi-2-circle me-2"></i>
  773.                             Estudios Vasculares
  774.                         </span>
  775.                         <span class="text-content" data-lang="en" style="display:none;">
  776.                             <i class="bi bi-2-circle me-2"></i>
  777.                             Vascular Studies
  778.                         </span>
  779.                     </a>
  780.                     <a href="#organos-especificos" class="btn btn-outline-warning rounded-pill px-4 py-2 fw-semibold">
  781.                         <span class="text-content" data-lang="es">
  782.                             <i class="bi bi-3-circle me-2"></i>
  783.                             Órganos Específicos
  784.                         </span>
  785.                         <span class="text-content" data-lang="en" style="display:none;">
  786.                             <i class="bi bi-3-circle me-2"></i>
  787.                             Specific Organs
  788.                         </span>
  789.                     </a>
  790.                     <a href="#estudios-generales" class="btn btn-outline-primary rounded-pill px-4 py-2 fw-semibold">
  791.                         <span class="text-content" data-lang="es">
  792.                             <i class="bi bi-4-circle me-2"></i>
  793.                             Estudios Generales
  794.                         </span>
  795.                         <span class="text-content" data-lang="en" style="display:none;">
  796.                             <i class="bi bi-4-circle me-2"></i>
  797.                             General Studies
  798.                         </span>
  799.                     </a>
  800.                 </div>
  801.               </div>
  802.             </div>
  803.         </div>
  804.     
  805.         <!-- Categoría: Ultrasonidos Especializados -->
  806.         <div id="ultrasonidos-especializados">
  807.             <h3 class="category-header text-center mt-5 mb-3">
  808.                 <span class="text-content" data-lang="es">
  809.                     <span class="badge bg-success category-badge me-2">1</span>
  810.                     Ultrasonidos Especializados
  811.                 </span>
  812.                 <span class="text-content" data-lang="en" style="display:none;">
  813.                     <span class="badge bg-success category-badge me-2">1</span>
  814.                     Specialized Ultrasounds
  815.                 </span>
  816.             </h3>
  817.           
  818.           <div class="row g-4">
  819.               <!-- Ultrasonido 4D -->
  820.               <div class="col-md-6 col-lg-4" id="u-4D">
  821.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  822.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  823.                           <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;">
  824.                               <i class="bi bi-camera-video fs-2 text-success"></i>
  825.                           </div>
  826.                           <h5 class="fw-bold text-dark mb-2">
  827.                             <span class="text-content" data-lang="es">Ultrasonido 4D</span>
  828.                             <span class="text-content" data-lang="en" style="display:none;">4D Ultrasound</span>
  829.                           </h5>
  830.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  831.                               <span class="fw-bold">
  832.                                 <span class="text-content" data-lang="es">Consultar precio</span>
  833.                                 <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  834.                               </span>
  835.                           </div>
  836.                       </div>
  837.                       
  838.                       <div class="card-body d-flex flex-column pt-3">
  839.                           <div class="flex-grow-1">
  840.                               <p class="text-muted text-center mb-4">
  841.                                 <span class="text-content" data-lang="es">Imágenes en tiempo real de alta definición para diagnósticos precisos.</span>
  842.                                 <span class="text-content" data-lang="en" style="display:none;">Real-time high-definition images for precise diagnostics.</span>
  843.                               </p>
  844.                               
  845.                               <div class="features-list">
  846.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  847.                                       <i class="bi bi-soundwave text-success fs-5 me-3"></i>
  848.                                       <span class="text-dark">
  849.                                         <span class="text-content" data-lang="es">Imágenes en 3D/4D</span>
  850.                                         <span class="text-content" data-lang="en" style="display:none;">3D/4D Images</span>
  851.                                       </span>
  852.                                   </div>
  853.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  854.                                       <i class="bi bi-heart-pulse text-success fs-5 me-3"></i>
  855.                                       <span class="text-dark">
  856.                                         <span class="text-content" data-lang="es">No invasivo</span>
  857.                                         <span class="text-content" data-lang="en" style="display:none;">Non-invasive</span>
  858.                                       </span>
  859.                                   </div>
  860.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  861.                                       <i class="bi bi-chat-dots text-success fs-5 me-3"></i>
  862.                                       <span class="text-dark">
  863.                                         <span class="text-content" data-lang="es">Mejor asesoría</span>
  864.                                         <span class="text-content" data-lang="en" style="display:none;">Better advice</span>
  865.                                       </span>
  866.                                   </div>
  867.                               </div>
  868.                           </div>
  869.                           
  870.                           <div class="mt-auto pt-3">
  871.                               <a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  872.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-4d">
  873.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  874.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  875.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  876.                               </a>
  877.                           </div>
  878.                       </div>
  879.                   </div>
  880.               </div>
  881.     
  882.               <!-- Ultrasonido Abdominal -->
  883.               <div class="col-md-6 col-lg-4" id="u-abdominal">
  884.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  885.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  886.                           <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;">
  887.                               <i class="bi bi-bounding-box fs-2 text-success"></i>
  888.                           </div>
  889.                           <h5 class="fw-bold text-dark mb-2">
  890.                             <span class="text-content" data-lang="es">Ultrasonido Abdominal</span>
  891.                             <span class="text-content" data-lang="en" style="display:none;">Abdominal Ultrasound</span>
  892.                           </h5>
  893.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  894.                               <span class="fw-bold">
  895.                                 <span class="text-content" data-lang="es">Consultar precio</span>
  896.                                 <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  897.                               </span>
  898.                           </div>
  899.                       </div>
  900.                       
  901.                       <div class="card-body d-flex flex-column pt-3">
  902.                           <div class="flex-grow-1">
  903.                               <p class="text-muted text-center mb-4">
  904.                                 <span class="text-content" data-lang="es">Detecta cálculos biliares, tumores y evalúa órganos abdominales.</span>
  905.                                 <span class="text-content" data-lang="en" style="display:none;">Detects gallstones, tumors and evaluates abdominal organs.</span>
  906.                               </p>
  907.                               
  908.                               <div class="features-list">
  909.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  910.                                       <i class="bi bi-search text-success fs-5 me-3"></i>
  911.                                       <span class="text-dark">
  912.                                         <span class="text-content" data-lang="es">Detección precisa</span>
  913.                                         <span class="text-content" data-lang="en" style="display:none;">Accurate detection</span>
  914.                                       </span>
  915.                                   </div>
  916.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  917.                                       <i class="bi bi-heart text-success fs-5 me-3"></i>
  918.                                       <span class="text-dark">
  919.                                         <span class="text-content" data-lang="es">No doloroso</span>
  920.                                         <span class="text-content" data-lang="en" style="display:none;">Painless</span>
  921.                                       </span>
  922.                                   </div>
  923.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  924.                                       <i class="bi bi-clipboard-check text-success fs-5 me-3"></i>
  925.                                       <span class="text-dark">
  926.                                         <span class="text-content" data-lang="es">Evaluación completa</span>
  927.                                         <span class="text-content" data-lang="en" style="display:none;">Complete evaluation</span>
  928.                                       </span>
  929.                                   </div>
  930.                               </div>
  931.                           </div>
  932.                           
  933.                           <div class="mt-auto pt-3">
  934.                               <a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  935.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-abdominal">
  936.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  937.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  938.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  939.                               </a>
  940.                           </div>
  941.                       </div>
  942.                   </div>
  943.               </div>
  944.     
  945.               <!-- Ultrasonido de Mama -->
  946.               <div class="col-md-6 col-lg-4" id="u-mama">
  947.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  948.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  949.                           <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;">
  950.                               <i class="bi bi-circle fs-2 text-success"></i>
  951.                           </div>
  952.                           <h5 class="fw-bold text-dark mb-2">
  953.                             <span class="text-content" data-lang="es">Ultrasonido de Mama</span>
  954.                             <span class="text-content" data-lang="en" style="display:none;">Breast Ultrasound</span>
  955.                           </h5>
  956.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  957.                               <span class="fw-bold">
  958.                                 <span class="text-content" data-lang="es">Consultar precio</span>
  959.                                 <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  960.                               </span>
  961.                           </div>
  962.                       </div>
  963.                       
  964.                       <div class="card-body d-flex flex-column pt-3">
  965.                           <div class="flex-grow-1">
  966.                               <p class="text-muted text-center mb-4">
  967.                                 <span class="text-content" data-lang="es">Evaluación complementaria para diagnóstico mamario completo.</span>
  968.                                 <span class="text-content" data-lang="en" style="display:none;">Complementary evaluation for complete breast diagnosis.</span>
  969.                               </p>
  970.                               
  971.                               <div class="features-list">
  972.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  973.                                       <i class="bi bi-eye text-success fs-5 me-3"></i>
  974.                                       <span class="text-dark">
  975.                                         <span class="text-content" data-lang="es">Evaluación detallada</span>
  976.                                         <span class="text-content" data-lang="en" style="display:none;">Detailed evaluation</span>
  977.                                       </span>
  978.                                   </div>
  979.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  980.                                       <i class="bi bi-shield-check text-success fs-5 me-3"></i>
  981.                                       <span class="text-dark">
  982.                                         <span class="text-content" data-lang="es">Seguro</span>
  983.                                         <span class="text-content" data-lang="en" style="display:none;">Safe</span>
  984.                                       </span>
  985.                                   </div>
  986.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  987.                                       <i class="bi bi-graph-up text-success fs-5 me-3"></i>
  988.                                       <span class="text-dark">
  989.                                         <span class="text-content" data-lang="es">Alta precisión</span>
  990.                                         <span class="text-content" data-lang="en" style="display:none;">High precision</span>
  991.                                       </span>
  992.                                   </div>
  993.                               </div>
  994.                           </div>
  995.                           
  996.                           <div class="mt-auto pt-3">
  997.                               <a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  998.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-mama">
  999.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1000.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1001.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1002.                               </a>
  1003.                           </div>
  1004.                       </div>
  1005.                   </div>
  1006.               </div>
  1007.     
  1008.               <!-- Ecocardiograma -->
  1009.              <div class="col-md-6 col-lg-4" id="ecocardiograma">
  1010.                 <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1011.                     <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1012.                         <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;">
  1013.                             <i class="bi bi-heart-pulse fs-2 text-success"></i>
  1014.                         </div>
  1015.                         <h5 class="fw-bold text-dark mb-2">
  1016.                             <span class="text-content" data-lang="es">Ecocardiograma</span>
  1017.                             <span class="text-content" data-lang="en" style="display:none;">Echocardiogram</span>
  1018.                         </h5>
  1019.                         <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1020.                             <span class="fw-bold">
  1021.                                 <span class="text-content" data-lang="es">Consultar precio</span>
  1022.                                 <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1023.                             </span>
  1024.                         </div>
  1025.                     </div>
  1026.                     
  1027.                     <div class="card-body d-flex flex-column pt-3">
  1028.                         <div class="flex-grow-1">
  1029.                             <p class="text-muted text-center mb-4">
  1030.                                 <span class="text-content" data-lang="es">Ultrasonido cardíaco para evaluar estructura y función del corazón.</span>
  1031.                                 <span class="text-content" data-lang="en" style="display:none;">Cardiac ultrasound to evaluate heart structure and function.</span>
  1032.                             </p>
  1033.                             
  1034.                             <div class="features-list">
  1035.                                 <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1036.                                     <i class="bi bi-heart text-success fs-5 me-3"></i>
  1037.                                     <span class="text-dark">
  1038.                                         <span class="text-content" data-lang="es">Evaluación cardíaca</span>
  1039.                                         <span class="text-content" data-lang="en" style="display:none;">Cardiac evaluation</span>
  1040.                                     </span>
  1041.                                 </div>
  1042.                                 <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1043.                                     <i class="bi bi-speedometer2 text-success fs-5 me-3"></i>
  1044.                                     <span class="text-dark">
  1045.                                         <span class="text-content" data-lang="es">Función cardíaca</span>
  1046.                                         <span class="text-content" data-lang="en" style="display:none;">Heart function</span>
  1047.                                     </span>
  1048.                                 </div>
  1049.                                 <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1050.                                     <i class="bi bi-clipboard2-pulse text-success fs-5 me-3"></i>
  1051.                                     <span class="text-dark">
  1052.                                         <span class="text-content" data-lang="es">Diagnóstico completo</span>
  1053.                                         <span class="text-content" data-lang="en" style="display:none;">Complete diagnosis</span>
  1054.                                     </span>
  1055.                                 </div>
  1056.                             </div>
  1057.                         </div>
  1058.                         
  1059.                         <div class="mt-auto pt-3">
  1060.                             <button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1061.                                     disabled style="cursor: not-allowed; opacity: 0.9;">
  1062.                                 <i class="bi bi-slash-circle me-2 fs-5"></i>
  1063.                                 <span class="text-content" data-lang="es">No disponible aún</span>
  1064.                                 <span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
  1065.                             </button>
  1066.                         </div>
  1067.                     </div>
  1068.                 </div>
  1069.             </div>
  1070.     
  1071.               <!-- Ultrasonido Musculoesquelético -->
  1072.               <div class="col-md-6 col-lg-4" id="u-musculoesqueletico">
  1073.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1074.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1075.                           <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;">
  1076.                               <i class="bi bi-person-arms-up fs-2 text-success"></i>
  1077.                           </div>
  1078.                           <h5 class="fw-bold text-dark mb-2">
  1079.                             <span class="text-content" data-lang="es">Ultrasonido Musculoesquelético</span>
  1080.                             <span class="text-content" data-lang="en" style="display:none;">Musculoskeletal Ultrasound</span>
  1081.                           </h5>
  1082.                            <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1083.                               <span class="fw-bold">
  1084.                                 <span class="text-content" data-lang="es">Consultar precio</span>
  1085.                                 <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1086.                               </span>
  1087.                           </div>
  1088.                       </div>
  1089.                       
  1090.                       <div class="card-body d-flex flex-column pt-3">
  1091.                           <div class="flex-grow-1">
  1092.                               <p class="text-muted text-center mb-4">
  1093.                                 <span class="text-content" data-lang="es">Examina articulaciones, músculos, tendones y ligamentos.</span>
  1094.                                 <span class="text-content" data-lang="en" style="display:none;">Examines joints, muscles, tendons and ligaments.</span>
  1095.                               </p>
  1096.                               
  1097.                               <div class="features-list">
  1098.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1099.                                       <i class="bi bi-activity text-success fs-5 me-3"></i>
  1100.                                       <span class="text-dark">
  1101.                                         <span class="text-content" data-lang="es">Evaluación dinámica</span>
  1102.                                         <span class="text-content" data-lang="en" style="display:none;">Dynamic evaluation</span>
  1103.                                       </span>
  1104.                                   </div>
  1105.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1106.                                       <i class="bi bi-bounding-box text-success fs-5 me-3"></i>
  1107.                                       <span class="text-dark">
  1108.                                         <span class="text-content" data-lang="es">Estructuras articulares</span>
  1109.                                         <span class="text-content" data-lang="en" style="display:none;">Joint structures</span>
  1110.                                       </span>
  1111.                                   </div>
  1112.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1113.                                       <i class="bi bi-wrench text-success fs-5 me-3"></i>
  1114.                                       <span class="text-dark">
  1115.                                         <span class="text-content" data-lang="es">Lesiones deportivas</span>
  1116.                                         <span class="text-content" data-lang="en" style="display:none;">Sports injuries</span>
  1117.                                       </span>
  1118.                                   </div>
  1119.                               </div>
  1120.                           </div>
  1121.                           
  1122.                           <div class="mt-auto pt-3">
  1123.                               <a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1124.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-musculoesqueletico">
  1125.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1126.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1127.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1128.                               </a>
  1129.                           </div>
  1130.                       </div>
  1131.                   </div>
  1132.               </div>
  1133.     
  1134.               <!-- Ultrasonido Obstétrico -->
  1135.               <div class="col-md-6 col-lg-4" id="u-obstetrico">
  1136.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1137.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1138.                           <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;">
  1139.                               <i class="bi bi-motherboard fs-2 text-success"></i>
  1140.                           </div>
  1141.                           <h5 class="fw-bold text-dark mb-2">
  1142.                             <span class="text-content" data-lang="es">Ultrasonido Obstétrico</span>
  1143.                             <span class="text-content" data-lang="en" style="display:none;">Obstetric Ultrasound</span>
  1144.                           </h5>
  1145.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1146.                               <span class="fw-bold">
  1147.                                 <span class="text-content" data-lang="es">Consultar precio</span>
  1148.                                 <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1149.                               </span>
  1150.                           </div>
  1151.                       </div>
  1152.                       
  1153.                       <div class="card-body d-flex flex-column pt-3">
  1154.                           <div class="flex-grow-1">
  1155.                               <p class="text-muted text-center mb-4">
  1156.                                 <span class="text-content" data-lang="es">Monitorea el desarrollo del feto durante el embarazo.</span>
  1157.                                 <span class="text-content" data-lang="en" style="display:none;">Monitors fetal development during pregnancy.</span>
  1158.                               </p>
  1159.                               
  1160.                               <div class="features-list">
  1161.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1162.                                       <i class="bi bi-baby text-success fs-5 me-3"></i>
  1163.                                       <span class="text-dark">
  1164.                                         <span class="text-content" data-lang="es">Control fetal</span>
  1165.                                         <span class="text-content" data-lang="en" style="display:none;">Fetal monitoring</span>
  1166.                                       </span>
  1167.                                   </div>
  1168.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1169.                                       <i class="bi bi-graph-up text-success fs-5 me-3"></i>
  1170.                                       <span class="text-dark">
  1171.                                         <span class="text-content" data-lang="es">Desarrollo adecuado</span>
  1172.                                         <span class="text-content" data-lang="en" style="display:none;">Proper development</span>
  1173.                                       </span>
  1174.                                   </div>
  1175.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1176.                                       <i class="bi bi-hearts text-success fs-5 me-3"></i>
  1177.                                       <span class="text-dark">
  1178.                                         <span class="text-content" data-lang="es">Seguridad materna</span>
  1179.                                         <span class="text-content" data-lang="en" style="display:none;">Maternal safety</span>
  1180.                                       </span>
  1181.                                   </div>
  1182.                               </div>
  1183.                           </div>
  1184.                           
  1185.                           <div class="mt-auto pt-3">
  1186.                               <a href="#" class="btn btn-success w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1187.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-obstetrico">
  1188.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1189.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1190.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1191.                               </a>
  1192.                           </div>
  1193.                       </div>
  1194.                   </div>
  1195.               </div>
  1196.           </div>
  1197.         </div>
  1198.     
  1199.         <!-- Categoría: Estudios Vasculares y Especializados -->
  1200.         <div id="estudios-vasculares">
  1201.             <h3 class="category-header text-center mt-5 mb-3">
  1202.                 <span class="text-content" data-lang="es">
  1203.                     <span class="badge bg-info category-badge me-2">2</span>
  1204.                     Estudios Vasculares y Especializados
  1205.                 </span>
  1206.                 <span class="text-content" data-lang="en" style="display:none;">
  1207.                     <span class="badge bg-info category-badge me-2">2</span>
  1208.                     Vascular and Specialized Studies
  1209.                 </span>
  1210.             </h3>
  1211.           
  1212.           <div class="row g-4">
  1213.               <!-- Arteriografía y Venografía -->
  1214.               <div class="col-md-6 col-lg-4" id="arteriografia-venografia">
  1215.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1216.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1217.                           <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;">
  1218.                               <i class="bi bi-droplet fs-2 text-info"></i>
  1219.                           </div>
  1220.                           <h5 class="fw-bold text-dark mb-2">
  1221.                             <span class="text-content" data-lang="es">Arteriografía y Venografía</span>
  1222.                             <span class="text-content" data-lang="en" style="display:none;">Arteriography and Venography</span>
  1223.                           </h5>
  1224.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1225.                               <span class="fw-bold">
  1226.                                 <span class="text-content" data-lang="es">Consultar precio</span>
  1227.                                 <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1228.                               </span>
  1229.                           </div>
  1230.                       </div>
  1231.                       
  1232.                       <div class="card-body d-flex flex-column pt-3">
  1233.                           <div class="flex-grow-1">
  1234.                               <p class="text-muted text-center mb-4">
  1235.                                 <span class="text-content" data-lang="es">Diagnostica anomalías en el flujo sanguíneo arterial y venoso.</span>
  1236.                                 <span class="text-content" data-lang="en" style="display:none;">Diagnoses abnormalities in arterial and venous blood flow.</span>
  1237.                               </p>
  1238.                               
  1239.                               <div class="features-list">
  1240.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1241.                                       <i class="bi bi-heart text-info fs-5 me-3"></i>
  1242.                                       <span class="text-dark">
  1243.                                         <span class="text-content" data-lang="es">Flujo sanguíneo</span>
  1244.                                         <span class="text-content" data-lang="en" style="display:none;">Blood flow</span>
  1245.                                       </span>
  1246.                                   </div>
  1247.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1248.                                       <i class="bi bi-shuffle text-info fs-5 me-3"></i>
  1249.                                       <span class="text-dark">
  1250.                                         <span class="text-content" data-lang="es">Circulación</span>
  1251.                                         <span class="text-content" data-lang="en" style="display:none;">Circulation</span>
  1252.                                       </span>
  1253.                                   </div>
  1254.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1255.                                       <i class="bi bi-bug text-info fs-5 me-3"></i>
  1256.                                       <span class="text-dark">
  1257.                                         <span class="text-content" data-lang="es">Anomalías vasculares</span>
  1258.                                         <span class="text-content" data-lang="en" style="display:none;">Vascular abnormalities</span>
  1259.                                       </span>
  1260.                                   </div>
  1261.                               </div>
  1262.                           </div>
  1263.                           
  1264.                           <div class="mt-auto pt-3">
  1265.                               <a href="#" class="btn btn-info w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1266.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="arteriografia-venografia">
  1267.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1268.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1269.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1270.                               </a>
  1271.                           </div>
  1272.                       </div>
  1273.                   </div>
  1274.               </div>
  1275.     
  1276.               <!-- Ultrasonido Intravascular -->
  1277.               <div class="col-md-6 col-lg-4" id="u-intravascular">
  1278.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1279.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1280.                           <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;">
  1281.                               <i class="bi bi-arrow-right-circle fs-2 text-info"></i>
  1282.                           </div>
  1283.                           <h5 class="fw-bold text-dark mb-2">
  1284.                               <span class="text-content" data-lang="es">Ultrasonido Intravascular</span>
  1285.                               <span class="text-content" data-lang="en" style="display:none;">Intravascular Ultrasound</span>
  1286.                           </h5>
  1287.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1288.                               <span class="fw-bold">
  1289.                                   <span class="text-content" data-lang="es">Consultar precio</span>
  1290.                                   <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1291.                               </span>
  1292.                           </div>
  1293.                       </div>
  1294.                       
  1295.                       <div class="card-body d-flex flex-column pt-3">
  1296.                           <div class="flex-grow-1">
  1297.                               <p class="text-muted text-center mb-4">
  1298.                                   <span class="text-content" data-lang="es">Permite visualizar la pared interna de los vasos sanguíneos.</span>
  1299.                                   <span class="text-content" data-lang="en" style="display:none;">Allows visualization of the inner wall of blood vessels.</span>
  1300.                               </p>
  1301.                               
  1302.                               <div class="features-list">
  1303.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1304.                                       <i class="bi bi-eye text-info fs-5 me-3"></i>
  1305.                                       <span class="text-dark">
  1306.                                           <span class="text-content" data-lang="es">Visualización interna</span>
  1307.                                           <span class="text-content" data-lang="en" style="display:none;">Internal visualization</span>
  1308.                                       </span>
  1309.                                   </div>
  1310.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1311.                                       <i class="bi bi-tools text-info fs-5 me-3"></i>
  1312.                                       <span class="text-dark">
  1313.                                           <span class="text-content" data-lang="es">Precisión diagnóstica</span>
  1314.                                           <span class="text-content" data-lang="en" style="display:none;">Diagnostic accuracy</span>
  1315.                                       </span>
  1316.                                   </div>
  1317.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1318.                                       <i class="bi bi-clipboard2-pulse text-info fs-5 me-3"></i>
  1319.                                       <span class="text-dark">
  1320.                                           <span class="text-content" data-lang="es">Evaluación vascular</span>
  1321.                                           <span class="text-content" data-lang="en" style="display:none;">Vascular evaluation</span>
  1322.                                       </span>
  1323.                                   </div>
  1324.                               </div>
  1325.                           </div>
  1326.                           
  1327.                           <div class="mt-auto pt-3">
  1328.                               <a href="#" class="btn btn-info w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1329.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-intravascular">
  1330.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1331.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1332.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1333.                               </a>
  1334.                           </div>
  1335.                       </div>
  1336.                   </div>
  1337.               </div>
  1338.               
  1339.               <!-- Ultrasonido Vascular Periférico -->
  1340.               <div class="col-md-6 col-lg-4" id="u-vascular-periferico">
  1341.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1342.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1343.                           <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;">
  1344.                               <i class="bi bi-symmetry-vertical fs-2 text-info"></i>
  1345.                           </div>
  1346.                              <h5 class="fw-bold text-dark mb-2">
  1347.                                   <span class="text-content" data-lang="es">Ultrasonido Vascular Periférico</span>
  1348.                                   <span class="text-content" data-lang="en" style="display:none;">Peripheral Vascular Ultrasound</span>
  1349.                               </h5>
  1350.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1351.                               <span class="fw-bold">
  1352.                                   <span class="text-content" data-lang="es">Consultar precio</span>
  1353.                                   <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1354.                               </span>
  1355.                           </div>
  1356.                       </div>
  1357.                       
  1358.                       <div class="card-body d-flex flex-column pt-3">
  1359.                           <div class="flex-grow-1">
  1360.                               <p class="text-muted text-center mb-4">
  1361.                                   <span class="text-content" data-lang="es">Diagnostica afecciones vasculares en extremidades.</span>
  1362.                                   <span class="text-content" data-lang="en" style="display:none;">Diagnoses vascular conditions in extremities.</span>
  1363.                               </p>
  1364.                               
  1365.                               <div class="features-list">
  1366.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1367.                                       <i class="bi bi-person-walking text-info fs-5 me-3"></i>
  1368.                                       <span class="text-dark">
  1369.                                           <span class="text-content" data-lang="es">Extremidades</span>
  1370.                                           <span class="text-content" data-lang="en" style="display:none;">Extremities</span>
  1371.                                       </span>
  1372.                                   </div>
  1373.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1374.                                       <i class="bi bi-droplet-half text-info fs-5 me-3"></i>
  1375.                                       <span class="text-dark">
  1376.                                           <span class="text-content" data-lang="es">Circulación periférica</span>
  1377.                                           <span class="text-content" data-lang="en" style="display:none;">Peripheral circulation</span>
  1378.                                       </span>
  1379.                                   </div>
  1380.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1381.                                       <i class="bi bi-heart-pulse text-info fs-5 me-3"></i>
  1382.                                       <span class="text-dark">
  1383.                                           <span class="text-content" data-lang="es">Salud vascular</span>
  1384.                                           <span class="text-content" data-lang="en" style="display:none;">Vascular health</span>
  1385.                                       </span>
  1386.                                   </div>
  1387.                               </div>
  1388.                           </div>
  1389.                           
  1390.                           <div class="mt-auto pt-3">
  1391.                               <a href="#" class="btn btn-info w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1392.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-vascular-periferico">
  1393.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1394.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1395.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1396.                               </a>
  1397.                           </div>
  1398.                       </div>
  1399.                   </div>
  1400.               </div>
  1401.               
  1402.               <!-- Ultrasonido Vascular -->
  1403.               <div class="col-md-6 col-lg-4" id="u-vascular">
  1404.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1405.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1406.                           <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;">
  1407.                               <i class="bi bi-soundwave fs-2 text-info"></i>
  1408.                           </div>
  1409.                               <h5 class="fw-bold text-dark mb-2">
  1410.                                   <span class="text-content" data-lang="es">Ultrasonido Vascular</span>
  1411.                                   <span class="text-content" data-lang="en" style="display:none;">Vascular Ultrasound</span>
  1412.                               </h5>
  1413.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1414.                               <span class="fw-bold">
  1415.                                   <span class="text-content" data-lang="es">Consultar precio</span>
  1416.                                   <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1417.                               </span>
  1418.                           </div>
  1419.                       </div>
  1420.                       
  1421.                       <div class="card-body d-flex flex-column pt-3">
  1422.                           <div class="flex-grow-1">
  1423.                               <p class="text-muted text-center mb-4">
  1424.                                   <span class="text-content" data-lang="es">Examen dúplex arterial, carotídeo, Doppler transcraneal y más.</span>
  1425.                                   <span class="text-content" data-lang="en" style="display:none;">Arterial duplex, carotid, transcranial Doppler exams and more.</span>
  1426.                               </p>
  1427.                               
  1428.                               <div class="features-list">
  1429.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1430.                                       <i class="bi bi-graph-up-arrow text-info fs-5 me-3"></i>
  1431.                                       <span class="text-dark">Doppler</span>
  1432.                                   </div>
  1433.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1434.                                       <i class="bi bi-speedometer text-info fs-5 me-3"></i>
  1435.                                       <span class="text-dark">
  1436.                                           <span class="text-content" data-lang="es">Flujo sanguíneo</span>
  1437.                                           <span class="text-content" data-lang="en" style="display:none;">Blood flow</span>
  1438.                                       </span>
  1439.                                   </div>
  1440.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1441.                                       <i class="bi bi-cpu text-info fs-5 me-3"></i>
  1442.                                       <span class="text-dark">
  1443.                                           <span class="text-content" data-lang="es">Tecnología avanzada</span>
  1444.                                           <span class="text-content" data-lang="en" style="display:none;">Advanced technology</span>
  1445.                                       </span>
  1446.                                   </div>
  1447.                               </div>
  1448.                           </div>
  1449.                           
  1450.                           <div class="mt-auto pt-3">
  1451.                               <a href="#" class="btn btn-info w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1452.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-vascular">
  1453.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1454.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1455.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1456.                               </a>
  1457.                           </div>
  1458.                       </div>
  1459.                   </div>
  1460.               </div>
  1461.           </div>
  1462.         </div>  
  1463.         
  1464.         <!-- Categoría: Estudios de Órganos Específicos -->
  1465.         <div id="organos-especificos">
  1466.             <h3 class="category-header text-center mt-5 mb-3">
  1467.                 <span class="text-content" data-lang="es">
  1468.                     <span class="badge bg-warning category-badge me-2">3</span>
  1469.                     Estudios de Órganos Específicos
  1470.                 </span>
  1471.                 <span class="text-content" data-lang="en" style="display:none;">
  1472.                     <span class="badge bg-warning category-badge me-2">3</span>
  1473.                     Specific Organ Studies
  1474.                 </span>
  1475.             </h3>
  1476.           
  1477.           <div class="row g-4">
  1478.               <!-- Ultrasonido Pélvico -->
  1479.               <div class="col-md-6 col-lg-4" id="u-pelvico">
  1480.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1481.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1482.                           <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;">
  1483.                               <i class="bi bi-circle-square fs-2 text-warning"></i>
  1484.                           </div>
  1485.                              <h5 class="fw-bold text-dark mb-2">
  1486.                                   <span class="text-content" data-lang="es">Ultrasonido Pélvico</span>
  1487.                                   <span class="text-content" data-lang="en" style="display:none;">Pelvic Ultrasound</span>
  1488.                               </h5>
  1489.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1490.                               <span class="fw-bold">
  1491.                                   <span class="text-content" data-lang="es">Consultar precio</span>
  1492.                                   <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1493.                               </span>
  1494.                           </div>
  1495.                       </div>
  1496.                       
  1497.                       <div class="card-body d-flex flex-column pt-3">
  1498.                           <div class="flex-grow-1">
  1499.                               <p class="text-muted text-center mb-4">
  1500.                                   <span class="text-content" data-lang="es">Identifica tumores, masas y evalúa órganos pélvicos.</span>
  1501.                                   <span class="text-content" data-lang="en" style="display:none;">Identifies tumors, masses and evaluates pelvic organs.</span>
  1502.                               </p>
  1503.                               
  1504.                               <div class="features-list">
  1505.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1506.                                       <i class="bi bi-search text-warning fs-5 me-3"></i>
  1507.                                       <span class="text-dark">
  1508.                                           <span class="text-content" data-lang="es">Detección de masas</span>
  1509.                                           <span class="text-content" data-lang="en" style="display:none;">Mass detection</span>
  1510.                                       </span>
  1511.                                   </div>
  1512.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1513.                                       <i class="bi bi-clipboard2-check text-warning fs-5 me-3"></i>
  1514.                                       <span class="text-dark">
  1515.                                           <span class="text-content" data-lang="es">Evaluación pélvica</span>
  1516.                                           <span class="text-content" data-lang="en" style="display:none;">Pelvic evaluation</span>
  1517.                                       </span>
  1518.                                   </div>
  1519.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1520.                                       <i class="bi bi-gender-ambiguous text-warning fs-5 me-3"></i>
  1521.                                       <span class="text-dark">
  1522.                                           <span class="text-content" data-lang="es">Hombres y mujeres</span>
  1523.                                           <span class="text-content" data-lang="en" style="display:none;">Men and women</span>
  1524.                                       </span>
  1525.                                   </div>
  1526.                               </div>
  1527.                           </div>
  1528.                           
  1529.                           <div class="mt-auto pt-3">
  1530.                               <a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1531.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-pelvico">
  1532.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1533.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1534.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1535.                               </a>
  1536.                           </div>
  1537.                       </div>
  1538.                   </div>
  1539.               </div>
  1540.           
  1541.               <!-- Ultrasonido de Próstata -->
  1542.               <div class="col-md-6 col-lg-4" id="u-prostata">
  1543.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1544.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1545.                           <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;">
  1546.                               <i class="bi bi-square fs-2 text-warning"></i>
  1547.                           </div>
  1548.                               <h5 class="fw-bold text-dark mb-2">
  1549.                                   <span class="text-content" data-lang="es">Ultrasonido de Próstata</span>
  1550.                                   <span class="text-content" data-lang="en" style="display:none;">Prostate Ultrasound</span>
  1551.                               </h5>
  1552.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1553.                               <span class="fw-bold">
  1554.                                   <span class="text-content" data-lang="es">Consultar precio</span>
  1555.                                   <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1556.                               </span>
  1557.                           </div>
  1558.                       </div>
  1559.                       
  1560.                       <div class="card-body d-flex flex-column pt-3">
  1561.                           <div class="flex-grow-1">
  1562.                               <p class="text-muted text-center mb-4">
  1563.                                   <span class="text-content" data-lang="es">Examina nódulos y evalúa la salud prostática.</span>
  1564.                                   <span class="text-content" data-lang="en" style="display:none;">Examines nodules and evaluates prostate health.</span>
  1565.                               </p>
  1566.                               
  1567.                               <div class="features-list">
  1568.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1569.                                       <i class="bi bi-search text-warning fs-5 me-3"></i>
  1570.                                       <span class="text-dark">
  1571.                                           <span class="text-content" data-lang="es">Detección de nódulos</span>
  1572.                                           <span class="text-content" data-lang="en" style="display:none;">Nodule detection</span>
  1573.                                       </span>
  1574.                                   </div>
  1575.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1576.                                       <i class="bi bi-clipboard2-pulse text-warning fs-5 me-3"></i>
  1577.                                       <span class="text-dark">
  1578.                                           <span class="text-content" data-lang="es">Salud prostática</span>
  1579.                                           <span class="text-content" data-lang="en" style="display:none;">Prostate health</span>
  1580.                                       </span>
  1581.                                   </div>
  1582.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1583.                                       <i class="bi bi-gender-male text-warning fs-5 me-3"></i>
  1584.                                       <span class="text-dark">
  1585.                                           <span class="text-content" data-lang="es">Específico hombres</span>
  1586.                                           <span class="text-content" data-lang="en" style="display:none;">Specific for men</span>
  1587.                                       </span>
  1588.                                   </div>
  1589.                               </div>
  1590.                           </div>
  1591.                           
  1592.                           <div class="mt-auto pt-3">
  1593.                               <a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1594.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-prostata">
  1595.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1596.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1597.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1598.                               </a>
  1599.                           </div>
  1600.                       </div>
  1601.                   </div>
  1602.               </div>
  1603.           
  1604.               <!-- Ultrasonido Renal -->
  1605.               <div class="col-md-6 col-lg-4" id="u-renal">
  1606.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1607.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1608.                           <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;">
  1609.                               <i class="bi bi-prescription2 fs-2 text-warning"></i>
  1610.                           </div>
  1611.                            <h5 class="fw-bold text-dark mb-2">
  1612.                               <span class="text-content" data-lang="es">Ultrasonido Renal</span>
  1613.                               <span class="text-content" data-lang="en" style="display:none;">Renal Ultrasound</span>
  1614.                           </h5>
  1615.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1616.                               <span class="fw-bold">
  1617.                                   <span class="text-content" data-lang="es">Consultar precio</span>
  1618.                                   <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1619.                               </span>
  1620.                           </div>
  1621.                       </div>
  1622.                       
  1623.                       <div class="card-body d-flex flex-column pt-3">
  1624.                           <div class="flex-grow-1">
  1625.                               <p class="text-muted text-center mb-4">
  1626.                                   <span class="text-content" data-lang="es">Examina riñones y evalúa el tracto urinario.</span>
  1627.                                   <span class="text-content" data-lang="en" style="display:none;">Examines kidneys and evaluates the urinary tract.</span>
  1628.                               </p>
  1629.                               
  1630.                               <div class="features-list">
  1631.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1632.                                       <i class="bi bi-filter text-warning fs-5 me-3"></i>
  1633.                                       <span class="text-dark">
  1634.                                           <span class="text-content" data-lang="es">Función renal</span>
  1635.                                           <span class="text-content" data-lang="en" style="display:none;">Renal function</span>
  1636.                                       </span>
  1637.                                   </div>
  1638.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1639.                                       <i class="bi bi-droplet text-warning fs-5 me-3"></i>
  1640.                                       <span class="text-dark">
  1641.                                           <span class="text-content" data-lang="es">Tracto urinario</span>
  1642.                                           <span class="text-content" data-lang="en" style="display:none;">Urinary tract</span>
  1643.                                       </span>
  1644.                                   </div>
  1645.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1646.                                       <i class="bi bi-prescription2 text-warning fs-5 me-3"></i>
  1647.                                       <span class="text-dark">
  1648.                                           <span class="text-content" data-lang="es">Diagnóstico preciso</span>
  1649.                                           <span class="text-content" data-lang="en" style="display:none;">Precise diagnosis</span>
  1650.                                       </span>
  1651.                                   </div>
  1652.                               </div>
  1653.                           </div>
  1654.                           
  1655.                           <div class="mt-auto pt-3">
  1656.                               <a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1657.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-renal">
  1658.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1659.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1660.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1661.                               </a>
  1662.                           </div>
  1663.                       </div>
  1664.                   </div>
  1665.               </div>
  1666.           
  1667.               <!-- Ultrasonido Escrotal -->
  1668.               <div class="col-md-6 col-lg-4" id="u-escrotal">
  1669.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1670.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1671.                           <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;">
  1672.                               <i class="bi bi-circle-half fs-2 text-warning"></i>
  1673.                           </div>
  1674.                                <h5 class="fw-bold text-dark mb-2">
  1675.                                   <span class="text-content" data-lang="es">Ultrasonido Escrotal</span>
  1676.                                   <span class="text-content" data-lang="en" style="display:none;">Scrotal Ultrasound</span>
  1677.                               </h5>
  1678.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1679.                               <span class="fw-bold">
  1680.                                   <span class="text-content" data-lang="es">Consultar precio</span>
  1681.                                   <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1682.                               </span>
  1683.                           </div>
  1684.                       </div>
  1685.                       
  1686.                       <div class="card-body d-flex flex-column pt-3">
  1687.                           <div class="flex-grow-1">
  1688.                               <p class="text-muted text-center mb-4">
  1689.                                   <span class="text-content" data-lang="es">Examina testículos y evalúa salud reproductiva masculina.</span>
  1690.                                   <span class="text-content" data-lang="en" style="display:none;">Examines testicles and evaluates male reproductive health.</span>
  1691.                               </p>
  1692.                               
  1693.                               <div class="features-list">
  1694.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1695.                                       <i class="bi bi-search text-warning fs-5 me-3"></i>
  1696.                                       <span class="text-dark">
  1697.                                           <span class="text-content" data-lang="es">Evaluación testicular</span>
  1698.                                           <span class="text-content" data-lang="en" style="display:none;">Testicular evaluation</span>
  1699.                                       </span>
  1700.                                   </div>
  1701.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1702.                                       <i class="bi bi-clipboard2-pulse text-warning fs-5 me-3"></i>
  1703.                                       <span class="text-dark">
  1704.                                           <span class="text-content" data-lang="es">Salud reproductiva</span>
  1705.                                           <span class="text-content" data-lang="en" style="display:none;">Reproductive health</span>
  1706.                                       </span>
  1707.                                   </div>
  1708.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1709.                                       <i class="bi bi-gender-male text-warning fs-5 me-3"></i>
  1710.                                       <span class="text-dark">
  1711.                                           <span class="text-content" data-lang="es">Específico hombres</span>
  1712.                                           <span class="text-content" data-lang="en" style="display:none;">Specific for men</span>
  1713.                                       </span>
  1714.                                   </div>
  1715.                               </div>
  1716.                           </div>
  1717.                           
  1718.                           <div class="mt-auto pt-3">
  1719.                               <a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1720.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-escrotal">
  1721.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1722.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1723.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1724.                               </a>
  1725.                           </div>
  1726.                       </div>
  1727.                   </div>
  1728.               </div>
  1729.           
  1730.               <!-- Ultrasonido Tiroideo -->
  1731.               <div class="col-md-6 col-lg-4" id="u-tiroidea">
  1732.                   <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1733.                       <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1734.                           <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;">
  1735.                               <i class="bi bi-bullseye fs-2 text-warning"></i>
  1736.                           </div>
  1737.                                    <h5 class="fw-bold text-dark mb-2">
  1738.                                       <span class="text-content" data-lang="es">Ultrasonido Tiroideo</span>
  1739.                                       <span class="text-content" data-lang="en" style="display:none;">Thyroid Ultrasound</span>
  1740.                                   </h5>
  1741.                           <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1742.                               <span class="fw-bold">
  1743.                                   <span class="text-content" data-lang="es">Consultar precio</span>
  1744.                                   <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1745.                               </span>
  1746.                           </div>
  1747.                       </div>
  1748.                       
  1749.                       <div class="card-body d-flex flex-column pt-3">
  1750.                           <div class="flex-grow-1">
  1751.                               <p class="text-muted text-center mb-4">
  1752.                                   <span class="text-content" data-lang="es">Evalúa la glándula tiroides y detecta nódulos.</span>
  1753.                                   <span class="text-content" data-lang="en" style="display:none;">Evaluates the thyroid gland and detects nodules.</span>
  1754.                               </p>
  1755.                               
  1756.                               <div class="features-list">
  1757.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1758.                                       <i class="bi bi-bullseye text-warning fs-5 me-3"></i>
  1759.                                       <span class="text-dark">
  1760.                                           <span class="text-content" data-lang="es">Glándula tiroides</span>
  1761.                                           <span class="text-content" data-lang="en" style="display:none;">Thyroid gland</span>
  1762.                                       </span>
  1763.                                   </div>
  1764.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1765.                                       <i class="bi bi-search text-warning fs-5 me-3"></i>
  1766.                                       <span class="text-dark">
  1767.                                           <span class="text-content" data-lang="es">Nódulos tiroideos</span>
  1768.                                           <span class="text-content" data-lang="en" style="display:none;">Thyroid nodules</span>
  1769.                                       </span>
  1770.                                   </div>
  1771.                                   <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1772.                                       <i class="bi bi-activity text-warning fs-5 me-3"></i>
  1773.                                       <span class="text-dark">
  1774.                                           <span class="text-content" data-lang="es">Función tiroidea</span>
  1775.                                           <span class="text-content" data-lang="en" style="display:none;">Thyroid function</span>
  1776.                                       </span>
  1777.                                   </div>
  1778.                               </div>
  1779.                           </div>
  1780.                           
  1781.                           <div class="mt-auto pt-3">
  1782.                               <a href="#" class="btn btn-warning w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1783.                                   data-bs-toggle="modal" data-bs-target="#agendarCitaModal" data-estudio="ultrasonido-tiroideo">
  1784.                                   <i class="bi bi-calendar-check me-2 fs-5"></i>
  1785.                                   <span class="text-content" data-lang="es">Agendar Estudio</span>
  1786.                                   <span class="text-content" data-lang="en" style="display:none;">Schedule Study</span>
  1787.                               </a>
  1788.                           </div>
  1789.                       </div>
  1790.                   </div>
  1791.               </div>
  1792.           </div>
  1793.         </div>  
  1794.         
  1795.         <!-- Categoría: Estudios Generales -->
  1796.         <div id="estudios-generales">
  1797.             <h3 class="category-header text-center mt-5 mb-3">
  1798.                 <span class="text-content" data-lang="es">
  1799.                     <span class="badge bg-primary category-badge me-2">4</span>
  1800.                     Estudios Generales
  1801.                 </span>
  1802.                 <span class="text-content" data-lang="en" style="display:none;">
  1803.                     <span class="badge bg-primary category-badge me-2">4</span>
  1804.                     General Studies
  1805.                 </span>
  1806.             </h3>
  1807.             
  1808.             <div class="row g-4">
  1809.                 <!-- Rayos X Digital -->
  1810.                <div class="col-md-6 col-lg-4" id="rayos-x">
  1811.                     <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1812.                         <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1813.                             <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;">
  1814.                                 <i class="bi bi-camera fs-2 text-primary"></i>
  1815.                             </div>
  1816.                             <h5 class="fw-bold text-dark mb-2">
  1817.                                 <span class="text-content" data-lang="es">Rayos X Digital</span>
  1818.                                 <span class="text-content" data-lang="en" style="display:none;">Digital X-Ray</span>
  1819.                             </h5>
  1820.                             <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1821.                                 <span class="fw-bold">
  1822.                                     <span class="text-content" data-lang="es">Consultar precio</span>
  1823.                                     <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1824.                                 </span>
  1825.                             </div>
  1826.                         </div>
  1827.                         
  1828.                         <div class="card-body d-flex flex-column pt-3">
  1829.                             <div class="flex-grow-1">
  1830.                                 <p class="text-muted text-center mb-4">
  1831.                                     <span class="text-content" data-lang="es">Tecnología de última generación con mínima radiación y resultados inmediatos.</span>
  1832.                                     <span class="text-content" data-lang="en" style="display:none;">State-of-the-art technology with minimal radiation and immediate results.</span>
  1833.                                 </p>
  1834.                                 
  1835.                                 <div class="features-list">
  1836.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1837.                                         <i class="bi bi-shield-check text-success fs-5 me-3"></i>
  1838.                                         <span class="text-dark">
  1839.                                             <span class="text-content" data-lang="es">Baja radiación</span>
  1840.                                             <span class="text-content" data-lang="en" style="display:none;">Low radiation</span>
  1841.                                         </span>
  1842.                                     </div>
  1843.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1844.                                         <i class="bi bi-currency-dollar text-success fs-5 me-3"></i>
  1845.                                         <span class="text-dark">
  1846.                                             <span class="text-content" data-lang="es">Bajo costo</span>
  1847.                                             <span class="text-content" data-lang="en" style="display:none;">Low cost</span>
  1848.                                         </span>
  1849.                                     </div>
  1850.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1851.                                         <i class="bi bi-graph-up-arrow text-success fs-5 me-3"></i>
  1852.                                         <span class="text-dark">
  1853.                                             <span class="text-content" data-lang="es">Alta precisión</span>
  1854.                                             <span class="text-content" data-lang="en" style="display:none;">High precision</span>
  1855.                                         </span>
  1856.                                     </div>
  1857.                                 </div>
  1858.                             </div>
  1859.                             
  1860.                             <div class="mt-auto pt-3">
  1861.                                 <button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1862.                                         disabled style="cursor: not-allowed; opacity: 0.9;">
  1863.                                     <i class="bi bi-slash-circle me-2 fs-5"></i>
  1864.                                     <span class="text-content" data-lang="es">No disponible aún</span>
  1865.                                     <span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
  1866.                                 </button>
  1867.                             </div>
  1868.                         </div>
  1869.                     </div>
  1870.                 </div>
  1871.         
  1872.                 <!-- Radiografía -->
  1873.                 <div class="col-md-6 col-lg-4" id="radiografia">
  1874.                     <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1875.                         <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1876.                             <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;">
  1877.                                 <i class="bi bi-image-alt fs-2 text-primary"></i>
  1878.                             </div>
  1879.                             <h5 class="fw-bold text-dark mb-2">
  1880.                                 <span class="text-content" data-lang="es">Radiografía</span>
  1881.                                 <span class="text-content" data-lang="en" style="display:none;">Radiography</span>
  1882.                             </h5>
  1883.                             <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1884.                                 <span class="fw-bold">
  1885.                                     <span class="text-content" data-lang="es">Consultar precio</span>
  1886.                                     <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1887.                                 </span>
  1888.                             </div>
  1889.                         </div>
  1890.                         
  1891.                         <div class="card-body d-flex flex-column pt-3">
  1892.                             <div class="flex-grow-1">
  1893.                                 <p class="text-muted text-center mb-4">
  1894.                                     <span class="text-content" data-lang="es">Estudio básico para evaluación de estructuras óseas y algunos tejidos.</span>
  1895.                                     <span class="text-content" data-lang="en" style="display:none;">Basic study for evaluation of bone structures and some tissues.</span>
  1896.                                 </p>
  1897.                                 
  1898.                                 <div class="features-list">
  1899.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1900.                                         <i class="bi bi-lightning-charge text-success fs-5 me-3"></i>
  1901.                                         <span class="text-dark">
  1902.                                             <span class="text-content" data-lang="es">Rápido</span>
  1903.                                             <span class="text-content" data-lang="en" style="display:none;">Fast</span>
  1904.                                         </span>
  1905.                                     </div>
  1906.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1907.                                         <i class="bi bi-cash-coin text-success fs-5 me-3"></i>
  1908.                                         <span class="text-dark">
  1909.                                             <span class="text-content" data-lang="es">Económico</span>
  1910.                                             <span class="text-content" data-lang="en" style="display:none;">Economical</span>
  1911.                                         </span>
  1912.                                     </div>
  1913.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1914.                                         <i class="bi bi-file-medical text-success fs-5 me-3"></i>
  1915.                                         <span class="text-dark">
  1916.                                             <span class="text-content" data-lang="es">Diagnóstico inicial</span>
  1917.                                             <span class="text-content" data-lang="en" style="display:none;">Initial diagnosis</span>
  1918.                                         </span>
  1919.                                     </div>
  1920.                                 </div>
  1921.                             </div>
  1922.                             
  1923.                             <div class="mt-auto pt-3">
  1924.                                 <button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1925.                                         disabled style="cursor: not-allowed; opacity: 0.9;">
  1926.                                     <i class="bi bi-slash-circle me-2 fs-5"></i>
  1927.                                     <span class="text-content" data-lang="es">No disponible aún</span>
  1928.                                     <span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
  1929.                                 </button>
  1930.                             </div>
  1931.                         </div>
  1932.                     </div>
  1933.                 </div>
  1934.         
  1935.                 <!-- Tomografía Computarizada -->
  1936.                 <div class="col-md-6 col-lg-4" id="tomografia">
  1937.                     <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  1938.                         <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  1939.                             <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;">
  1940.                                 <i class="bi bi-layers fs-2 text-primary"></i>
  1941.                             </div>
  1942.                             <h5 class="fw-bold text-dark mb-2">
  1943.                                 <span class="text-content" data-lang="es">Tomografía Computarizada</span>
  1944.                                 <span class="text-content" data-lang="en" style="display:none;">Computed Tomography</span>
  1945.                             </h5>
  1946.                             <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  1947.                                 <span class="fw-bold">
  1948.                                     <span class="text-content" data-lang="es">Consultar precio</span>
  1949.                                     <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  1950.                                 </span>
  1951.                             </div>
  1952.                         </div>
  1953.                         
  1954.                         <div class="card-body d-flex flex-column pt-3">
  1955.                             <div class="flex-grow-1">
  1956.                                 <p class="text-muted text-center mb-4">
  1957.                                     <span class="text-content" data-lang="es">Estudios detallados en 3D para diagnósticos complejos y precisos.</span>
  1958.                                     <span class="text-content" data-lang="en" style="display:none;">Detailed 3D studies for complex and precise diagnostics.</span>
  1959.                                 </p>
  1960.                                 
  1961.                                 <div class="features-list">
  1962.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1963.                                         <i class="bi bi-box text-success fs-5 me-3"></i>
  1964.                                         <span class="text-dark">
  1965.                                             <span class="text-content" data-lang="es">Imágenes en 3D</span>
  1966.                                             <span class="text-content" data-lang="en" style="display:none;">3D images</span>
  1967.                                         </span>
  1968.                                     </div>
  1969.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1970.                                         <i class="bi bi-zoom-in text-success fs-5 me-3"></i>
  1971.                                         <span class="text-dark">
  1972.                                             <span class="text-content" data-lang="es">Alta resolución</span>
  1973.                                             <span class="text-content" data-lang="en" style="display:none;">High resolution</span>
  1974.                                         </span>
  1975.                                     </div>
  1976.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  1977.                                         <i class="bi bi-check2-circle text-success fs-5 me-3"></i>
  1978.                                         <span class="text-dark">
  1979.                                             <span class="text-content" data-lang="es">Diagnóstico preciso</span>
  1980.                                             <span class="text-content" data-lang="en" style="display:none;">Precise diagnosis</span>
  1981.                                         </span>
  1982.                                     </div>
  1983.                                 </div>
  1984.                             </div>
  1985.                             
  1986.                             <div class="mt-auto pt-3">
  1987.                                 <button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  1988.                                         disabled style="cursor: not-allowed; opacity: 0.9;">
  1989.                                     <i class="bi bi-slash-circle me-2 fs-5"></i>
  1990.                                     <span class="text-content" data-lang="es">No disponible aún</span>
  1991.                                     <span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
  1992.                                 </button>
  1993.                             </div>
  1994.                         </div>
  1995.                     </div>
  1996.                 </div>
  1997.                 
  1998.                 <!-- Resonancia Magnética -->
  1999.                 <div class="col-md-6 col-lg-4" id="resonancia">
  2000.                     <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  2001.                         <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  2002.                             <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;">
  2003.                                 <i class="bi bi-magnet fs-2 text-primary"></i>
  2004.                             </div>
  2005.                             <h5 class="fw-bold text-dark mb-2">
  2006.                                 <span class="text-content" data-lang="es">Resonancia Magnética</span>
  2007.                                 <span class="text-content" data-lang="en" style="display:none;">Magnetic Resonance</span>
  2008.                             </h5>
  2009.                             <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  2010.                                 <span class="fw-bold">
  2011.                                     <span class="text-content" data-lang="es">Consultar precio</span>
  2012.                                     <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  2013.                                 </span>
  2014.                             </div>
  2015.                         </div>
  2016.                         
  2017.                         <div class="card-body d-flex flex-column pt-3">
  2018.                             <div class="flex-grow-1">
  2019.                                 <p class="text-muted text-center mb-4">
  2020.                                     <span class="text-content" data-lang="es">La más avanzada tecnología para visualizar tejidos blandos.</span>
  2021.                                     <span class="text-content" data-lang="en" style="display:none;">The most advanced technology for visualizing soft tissues.</span>
  2022.                                 </p>
  2023.                                 
  2024.                                 <div class="features-list">
  2025.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2026.                                         <i class="bi bi-shield text-success fs-5 me-3"></i>
  2027.                                         <span class="text-dark">
  2028.                                             <span class="text-content" data-lang="es">Sin radiación</span>
  2029.                                             <span class="text-content" data-lang="en" style="display:none;">No radiation</span>
  2030.                                         </span>
  2031.                                     </div>
  2032.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2033.                                         <i class="bi bi-eye text-success fs-5 me-3"></i>
  2034.                                         <span class="text-dark">
  2035.                                             <span class="text-content" data-lang="es">Máximo detalle</span>
  2036.                                             <span class="text-content" data-lang="en" style="display:none;">Maximum detail</span>
  2037.                                         </span>
  2038.                                     </div>
  2039.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2040.                                         <i class="bi bi-body-text text-success fs-5 me-3"></i>
  2041.                                         <span class="text-dark">
  2042.                                             <span class="text-content" data-lang="es">Tejidos blandos</span>
  2043.                                             <span class="text-content" data-lang="en" style="display:none;">Soft tissues</span>
  2044.                                         </span>
  2045.                                     </div>
  2046.                                 </div>
  2047.                             </div>
  2048.                             
  2049.                             <div class="mt-auto pt-3">
  2050.                                 <button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  2051.                                         disabled style="cursor: not-allowed; opacity: 0.9;">
  2052.                                     <i class="bi bi-slash-circle me-2 fs-5"></i>
  2053.                                     <span class="text-content" data-lang="es">No disponible aún</span>
  2054.                                     <span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
  2055.                                 </button>
  2056.                             </div>
  2057.                         </div>
  2058.                     </div>
  2059.                 </div>
  2060.                 
  2061.                 <!-- Mamografía Digital -->
  2062.                 <div class="col-md-6 col-lg-4" id="mamografia">
  2063.                     <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  2064.                         <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  2065.                             <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;">
  2066.                                 <i class="bi bi-heart fs-2 text-primary"></i>
  2067.                             </div>
  2068.                             <h5 class="fw-bold text-dark mb-2">
  2069.                                 <span class="text-content" data-lang="es">Mamografía Digital</span>
  2070.                                 <span class="text-content" data-lang="en" style="display:none;">Digital Mammography</span>
  2071.                             </h5>
  2072.                             <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  2073.                                 <span class="fw-bold">
  2074.                                     <span class="text-content" data-lang="es">Consultar precio</span>
  2075.                                     <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  2076.                                 </span>
  2077.                             </div>
  2078.                         </div>
  2079.                         
  2080.                         <div class="card-body d-flex flex-column pt-3">
  2081.                             <div class="flex-grow-1">
  2082.                                 <p class="text-muted text-center mb-4">
  2083.                                     <span class="text-content" data-lang="es">Tecnología avanzada para detectar oportunamente el cáncer de mama.</span>
  2084.                                     <span class="text-content" data-lang="en" style="display:none;">Advanced technology for timely detection of breast cancer.</span>
  2085.                                 </p>
  2086.                                 
  2087.                                 <div class="features-list">
  2088.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2089.                                         <i class="bi bi-highlighter text-success fs-5 me-3"></i>
  2090.                                         <span class="text-dark">
  2091.                                             <span class="text-content" data-lang="es">Alta resolución</span>
  2092.                                             <span class="text-content" data-lang="en" style="display:none;">High resolution</span>
  2093.                                         </span>
  2094.                                     </div>
  2095.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2096.                                         <i class="bi bi-clock-history text-success fs-5 me-3"></i>
  2097.                                         <span class="text-dark">
  2098.                                             <span class="text-content" data-lang="es">Detección temprana</span>
  2099.                                             <span class="text-content" data-lang="en" style="display:none;">Early detection</span>
  2100.                                         </span>
  2101.                                     </div>
  2102.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2103.                                         <i class="bi bi-bullseye text-success fs-5 me-3"></i>
  2104.                                         <span class="text-dark">
  2105.                                             <span class="text-content" data-lang="es">Precisión diagnóstica</span>
  2106.                                             <span class="text-content" data-lang="en" style="display:none;">Diagnostic accuracy</span>
  2107.                                         </span>
  2108.                                     </div>
  2109.                                 </div>
  2110.                             </div>
  2111.                             
  2112.                             <div class="mt-auto pt-3">
  2113.                                 <button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  2114.                                         disabled style="cursor: not-allowed; opacity: 0.9;">
  2115.                                     <i class="bi bi-slash-circle me-2 fs-5"></i>
  2116.                                     <span class="text-content" data-lang="es">No disponible aún</span>
  2117.                                     <span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
  2118.                                 </button>
  2119.                             </div>
  2120.                         </div>
  2121.                     </div>
  2122.                 </div>
  2123.                 
  2124.                 <!-- Medicina Nuclear -->
  2125.                 <div class="col-md-6 col-lg-4" id="nuclear">
  2126.                     <div class="card h-100 shadow-lg border-0 servicio-card-profesional">
  2127.                         <div class="card-header bg-transparent border-0 pt-4 pb-0 text-center">
  2128.                             <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;">
  2129.                                 <i class="bi bi-activity fs-2 text-primary"></i>
  2130.                             </div>
  2131.                             <h5 class="fw-bold text-dark mb-2">
  2132.                                 <span class="text-content" data-lang="es">Medicina Nuclear</span>
  2133.                                 <span class="text-content" data-lang="en" style="display:none;">Nuclear Medicine</span>
  2134.                             </h5>
  2135.                             <div class="price-tag bg-warning text-dark rounded-pill px-3 py-1 d-inline-block">
  2136.                                 <span class="fw-bold">
  2137.                                     <span class="text-content" data-lang="es">Consultar precio</span>
  2138.                                     <span class="text-content" data-lang="en" style="display:none;">Check price</span>
  2139.                                 </span>
  2140.                             </div>
  2141.                         </div>
  2142.                         
  2143.                         <div class="card-body d-flex flex-column pt-3">
  2144.                             <div class="flex-grow-1">
  2145.                                 <p class="text-muted text-center mb-4">
  2146.                                     <span class="text-content" data-lang="es">Estudios funcionales especializados para órganos específicos.</span>
  2147.                                     <span class="text-content" data-lang="en" style="display:none;">Specialized functional studies for specific organs.</span>
  2148.                                 </p>
  2149.                                 
  2150.                                 <div class="features-list">
  2151.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2152.                                         <i class="bi bi-gear text-success fs-5 me-3"></i>
  2153.                                         <span class="text-dark">
  2154.                                             <span class="text-content" data-lang="es">Estudios especializados</span>
  2155.                                             <span class="text-content" data-lang="en" style="display:none;">Specialized studies</span>
  2156.                                         </span>
  2157.                                     </div>
  2158.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2159.                                         <i class="bi bi-graph-up text-success fs-5 me-3"></i>
  2160.                                         <span class="text-dark">
  2161.                                             <span class="text-content" data-lang="es">Alta precisión</span>
  2162.                                             <span class="text-content" data-lang="en" style="display:none;">High precision</span>
  2163.                                         </span>
  2164.                                     </div>
  2165.                                     <div class="feature-item d-flex align-items-center mb-3 p-2 rounded hover-effect">
  2166.                                         <i class="bi bi-star text-success fs-5 me-3"></i>
  2167.                                         <span class="text-dark">
  2168.                                             <span class="text-content" data-lang="es">Diagnóstico único</span>
  2169.                                             <span class="text-content" data-lang="en" style="display:none;">Unique diagnosis</span>
  2170.                                         </span>
  2171.                                     </div>
  2172.                                 </div>
  2173.                             </div>
  2174.                             
  2175.                             <div class="mt-auto pt-3">
  2176.                                 <button class="btn btn-secondary w-100 d-inline-flex align-items-center justify-content-center py-3 fw-semibold shadow-sm" 
  2177.                                         disabled style="cursor: not-allowed; opacity: 0.9;">
  2178.                                     <i class="bi bi-slash-circle me-2 fs-5"></i>
  2179.                                     <span class="text-content" data-lang="es">No disponible aún</span>
  2180.                                     <span class="text-content" data-lang="en" style="display:none;">Not available yet</span>
  2181.                                 </button>
  2182.                             </div>
  2183.                         </div>
  2184.                     </div>
  2185.                 </div>
  2186.             </div>
  2187.         </div>
  2188.     </div>
  2190.         
  2191.         <style>
  2192.             .badge-custom {
  2193.                 background-color: rgba(13, 110, 253, 0.1);
  2194.                 color: #0d6efd;
  2195.                 border: 2px solid #0d6efd;
  2196.                 font-size: clamp(0.875rem, 2vw, 1rem);
  2197.                 padding: 0.5rem 1rem;
  2198.                 border-radius: 50rem;
  2199.                 display: inline-flex;
  2200.                 align-items: center;
  2201.             }
  2202.             
  2203.             .services-title {
  2204.                 font-weight: 700;
  2205.                 line-height: 1.2;
  2206.                 color: #212529;
  2207.                 font-size: clamp(1.75rem, 4.5vw, 3rem);
  2208.                 position: relative;
  2209.             }
  2210.             
  2211.             .text-primary-custom {
  2212.                 color: #0d6efd !important;
  2213.             }
  2214.             
  2215.             .icon-custom {
  2216.                 margin-right: 0.5rem;
  2217.                 color: #0dcaf0;
  2218.             }
  2219.             
  2220.             @media (max-width: 576px) {
  2221.                 .badge-custom {
  2222.                     padding: 0.375rem 0.75rem;
  2223.                 }
  2224.             }
  2225.         </style>
  2226.     </section>
  2228.    
  2230.     <section class="py-5 bg-light" id="experiencia">
  2231.        <div class="container">
  2232.             <div class="row align-items-center g-5">
  2233.         
  2234.                 <!-- Columna izquierda: texto + bullets -->
  2235.                 <div class="col-lg-6">
  2236.                     <!-- Badge de categoría MEJORADO -->
  2237.                     <div class="badge-custom mb-3">
  2238.                         <i class="bi bi-heart-pulse icon-custom"></i>
  2239.                         <span class="text-content" data-lang="es">Excelencia Comprobada</span>
  2240.                         <span class="text-content" data-lang="en" style="display:none;">Proven Excellence</span>
  2241.                     </div>
  2242.         
  2243.                     <h2 class="fw-bold text-dark mb-4 display-5">
  2244.                         <span class="text-content" data-lang="es">25 Años de <span class="text-primary-custom">Excelencia Médica</span></span>
  2245.                         <span class="text-content" data-lang="en" style="display:none;">25 Years of <span class="text-primary-custom">Medical Excellence</span></span>
  2246.                     </h2>
  2247.                     
  2248.                     <p class="lead text-muted mb-4 fs-6">
  2249.                         <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>
  2250.                         <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>
  2251.                     </p>
  2252.         
  2253.                     <!-- Lista de ventajas CORREGIDA -->
  2254.                     <div class="features-list">
  2255.                         <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">
  2256.                             <i class="bi bi-award-fill text-success fs-4 me-3 mt-1"></i>
  2257.                             <div>
  2258.                                 <h6 class="fw-bold text-dark mb-1">
  2259.                                     <span class="text-content" data-lang="es">Certificación Internacional</span>
  2260.                                     <span class="text-content" data-lang="en" style="display:none;">International Certification</span>
  2261.                                 </h6>
  2262.                                 <p class="text-muted mb-0 small">
  2263.                                     <span class="text-content" data-lang="es">Acreditados con ISO 9001 y certificaciones médicas internacionales de máximo nivel.</span>
  2264.                                     <span class="text-content" data-lang="en" style="display:none;">Accredited with ISO 9001 and highest-level international medical certifications.</span>
  2265.                                 </p>
  2266.                             </div>
  2267.                         </div>
  2268.         
  2269.                         <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">
  2270.                             <i class="bi bi-clock-fill text-warning fs-4 me-3 mt-1"></i>
  2271.                             <div>
  2272.                                 <h6 class="fw-bold text-dark mb-1">
  2273.                                     <span class="text-content" data-lang="es">Resultados Expeditos</span>
  2274.                                     <span class="text-content" data-lang="en" style="display:none;">Expedited Results</span>
  2275.                                 </h6>
  2276.                                 <p class="text-muted mb-0 small">
  2277.                                     <span class="text-content" data-lang="es">Entregamos resultados diagnósticos en menos de 24 horas con total <strong>confiabilidad</strong>.</span>
  2278.                                     <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>
  2279.                                 </p>
  2280.                             </div>
  2281.                         </div>
  2282.         
  2283.                         <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">
  2284.                             <i class="bi bi-cpu-fill text-primary fs-4 me-3 mt-1"></i>
  2285.                             <div>
  2286.                                 <h6 class="fw-bold text-dark mb-1">
  2287.                                     <span class="text-content" data-lang="es">Tecnología de Vanguardia</span>
  2288.                                     <span class="text-content" data-lang="en" style="display:none;">Cutting-edge Technology</span>
  2289.                                 </h6>
  2290.                                 <p class="text-muted mb-0 small">
  2291.                                     <span class="text-content" data-lang="es">Equipamiento de última generación para máxima precisión diagnóstica.</span>
  2292.                                     <span class="text-content" data-lang="en" style="display:none;">State-of-the-art equipment for maximum diagnostic precision.</span>
  2293.                                 </p>
  2294.                             </div>
  2295.                         </div>
  2296.         
  2297.                         <div class="feature-item d-flex align-items-start p-3 rounded-3 bg-light bg-opacity-50 border-start border-4 border-info">
  2298.                             <i class="bi bi-people-fill text-info fs-4 me-3 mt-1"></i>
  2299.                             <div>
  2300.                                 <h6 class="fw-bold text-dark mb-1">
  2301.                                     <span class="text-content" data-lang="es">Equipo Especializado</span>
  2302.                                     <span class="text-content" data-lang="en" style="display:none;">Specialized Team</span>
  2303.                                 </h6>
  2304.                                 <p class="text-muted mb-0 small">
  2305.                                     <span class="text-content" data-lang="es">Más de 50 profesionales médicos altamente capacitados y en constante actualización.</span>
  2306.                                     <span class="text-content" data-lang="en" style="display:none;">More than 50 highly qualified medical professionals in constant training.</span>
  2307.                                 </p>
  2308.                             </div>
  2309.                         </div>
  2310.                     </div>
  2311.                 </div>
  2312.         
  2313.                 <!-- Columna derecha: métricas REORGANIZADA -->
  2314.                 <div class="col-lg-6">
  2315.                     <div class="row g-4">
  2316.                         <!-- Métrica 1 -->
  2317.                         <div class="col-6">
  2318.                             <div class="card border-0 shadow-lg h-100 hover-lift">
  2319.                                 <div class="card-body text-center p-4">
  2320.                                     <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;">
  2321.                                         <i class="bi bi-graph-up-arrow text-primary fs-2"></i>
  2322.                                     </div>
  2323.                                     <h3 class="fw-bold text-primary display-6 mb-2">25K+</h3>
  2324.                                     <p class="text-muted mb-0 fw-semibold">
  2325.                                         <span class="text-content" data-lang="es">Estudios Anuales</span>
  2326.                                         <span class="text-content" data-lang="en" style="display:none;">Annual Studies</span>
  2327.                                     </p>
  2328.                                 </div>
  2329.                             </div>
  2330.                         </div>
  2331.                         
  2332.                         <!-- Métrica 2 -->
  2333.                         <div class="col-6">
  2334.                             <div class="card border-0 shadow-lg h-100 hover-lift">
  2335.                                 <div class="card-body text-center p-4">
  2336.                                     <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;">
  2337.                                         <i class="bi bi-check-all text-success fs-2"></i>
  2338.                                     </div>
  2339.                                     <h3 class="fw-bold text-success display-6 mb-2">99.9%</h3>
  2340.                                     <p class="text-muted mb-0 fw-semibold">
  2341.                                         <span class="text-content" data-lang="es">Precisión</span>
  2342.                                         <span class="text-content" data-lang="en" style="display:none;">Accuracy</span>
  2343.                                     </p>
  2344.                                 </div>
  2345.                             </div>
  2346.                         </div>
  2347.                         
  2348.                         <!-- Métrica 3 -->
  2349.                         <div class="col-6">
  2350.                             <div class="card border-0 shadow-lg h-100 hover-lift">
  2351.                                 <div class="card-body text-center p-4">
  2352.                                     <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;">
  2353.                                         <i class="bi bi-person-badge text-info fs-2"></i>
  2354.                                     </div>
  2355.                                     <h3 class="fw-bold text-info display-6 mb-2">50+</h3>
  2356.                                     <p class="text-muted mb-0 fw-semibold">
  2357.                                         <span class="text-content" data-lang="es">Especialistas</span>
  2358.                                         <span class="text-content" data-lang="en" style="display:none;">Specialists</span>
  2359.                                     </p>
  2360.                                 </div>
  2361.                             </div>
  2362.                         </div>
  2363.                         
  2364.                         <!-- Métrica 4 -->
  2365.                         <div class="col-6">
  2366.                             <div class="card border-0 shadow-lg h-100 hover-lift">
  2367.                                 <div class="card-body text-center p-4">
  2368.                                     <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;">
  2369.                                         <i class="bi bi-award text-warning fs-2"></i>
  2370.                                     </div>
  2371.                                     <h3 class="fw-bold text-warning display-6 mb-2">25+</h3>
  2372.                                     <p class="text-muted mb-0 fw-semibold">
  2373.                                         <span class="text-content" data-lang="es">Años</span>
  2374.                                         <span class="text-content" data-lang="en" style="display:none;">Years</span>
  2375.                                     </p>
  2376.                                 </div>
  2377.                             </div>
  2378.                         </div>
  2379.                     </div>
  2380.         
  2381.                     <!-- Barra de confianza CORREGIDA -->
  2382.                     <div class="mt-4 p-4 bg-primary bg-opacity-10 border border-primary border-2 rounded-3">
  2383.                         <div class="row align-items-center">
  2384.                             <div class="col-8">
  2385.                                 <h6 class="fw-bold text-dark mb-1">
  2386.                                     <span class="text-content" data-lang="es">Confianza Garantizada</span>
  2387.                                     <span class="text-content" data-lang="en" style="display:none;">Guaranteed Trust</span>
  2388.                                 </h6>
  2389.                                 <p class="small text-muted mb-0">
  2390.                                     <span class="text-content" data-lang="es">Miles de pacientes nos eligen cada año</span>
  2391.                                     <span class="text-content" data-lang="en" style="display:none;">Thousands of patients choose us every year</span>
  2392.                                 </p>
  2393.                             </div>
  2394.                             <div class="col-4 text-end">
  2395.                                 <div class="rating-badge">
  2396.                                     <span class="star-icon">★</span>
  2397.                                     <span>4.9/5</span>
  2398.                                 </div>
  2399.                                 <small class="text-muted d-block mt-1">
  2400.                                     <span class="text-content" data-lang="es">+500 valoraciones</span>
  2401.                                     <span class="text-content" data-lang="en" style="display:none;">+500 ratings</span>
  2402.                                 </small>
  2403.                             </div>
  2404.                         </div>
  2405.                     </div>
  2406.                 </div>
  2407.             </div>
  2408.         </div>
  2410.        <style>
  2411.           .hover-lift {
  2412.               transition: all 0.3s ease;
  2413.           }
  2414.           .hover-lift:hover {
  2415.               transform: translateY(-5px);
  2416.               box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
  2417.           }
  2418.           .features-list .feature-item {
  2419.               transition: all 0.3s ease;
  2420.           }
  2421.           .features-list .feature-item:hover {
  2422.               transform: translateX(5px);
  2423.               background: rgba(13, 110, 253, 0.05) !important;
  2424.           }
  2426.           .badge-custom {
  2427.             background-color: rgba(13, 110, 253, 0.1);
  2428.             color: #0d6efd;
  2429.             border: 2px solid #0d6efd;
  2430.             font-size: clamp(0.875rem, 2vw, 1rem);
  2431.             padding: 0.5rem 1rem;
  2432.             border-radius: 50rem;
  2433.             display: inline-flex;
  2434.             align-items: center;
  2435.         }
  2436.         
  2437.         .icon-custom {
  2438.             margin-right: 0.5rem;
  2439.         }
  2440.         
  2441.         @media (max-width: 576px) {
  2442.             .badge-custom {
  2443.                 padding: 0.375rem 0.75rem;
  2444.             }
  2445.         }
  2447.         .rating-badge {
  2448.             background-color: #0d6efd;
  2449.             color: white;
  2450.             border-radius: 50rem;
  2451.             display: inline-flex;
  2452.             align-items: center;
  2453.             justify-content: center;
  2454.             font-weight: 700;
  2455.             box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
  2456.             transition: all 0.3s ease;
  2457.         }
  2458.         
  2459.         .rating-badge:hover {
  2460.             transform: translateY(-2px);
  2461.             box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
  2462.         }
  2463.         
  2464.         .star-icon {
  2465.             margin-right: 0.25rem;
  2466.         }
  2467.         
  2468.         /* Tamaños responsivos */
  2469.         @media (min-width: 1200px) {
  2470.             .rating-badge {
  2471.                 padding: 0.75rem 1.5rem;
  2472.                 font-size: 1.1rem;
  2473.             }
  2474.         }
  2475.         
  2476.         @media (min-width: 992px) and (max-width: 1199px) {
  2477.             .rating-badge {
  2478.                 padding: 0.65rem 1.25rem;
  2479.                 font-size: 1.05rem;
  2480.             }
  2481.         }
  2482.         
  2483.         @media (min-width: 768px) and (max-width: 991px) {
  2484.             .rating-badge {
  2485.                 padding: 0.55rem 1rem;
  2486.                 font-size: 1rem;
  2487.             }
  2488.         }
  2489.         
  2490.         @media (max-width: 767px) {
  2491.             .rating-badge {
  2492.                 padding: 0.5rem 1rem;
  2493.                 font-size: 0.95rem;
  2494.             }
  2495.         }
  2496.         
  2497.         @media (max-width: 576px) {
  2498.             .rating-badge {
  2499.                 padding: 0.4rem 0.8rem;
  2500.                 font-size: 0.9rem;
  2501.             }
  2502.             
  2503.             .star-icon {
  2504.                 margin-right: 0.15rem;
  2505.             }
  2506.         }
  2507.         
  2508.         @media (max-width: 400px) {
  2509.             .rating-badge {
  2510.                 padding: 0.35rem 0.7rem;
  2511.                 font-size: 0.85rem;
  2512.             }
  2513.         }
  2514.       </style>
  2515.   </section>
  2517.   <section class="hero-section py-5 bg-white" id="contacto">
  2518.         <div class="container">
  2519.             <!-- Encabezado Mejorado -->
  2520.             <div class="text-center mb-5">
  2521.                 <div class="badge-custom mb-3">
  2522.                     <i class="bi bi-headset icon-custom"></i>
  2523.                     <span class="text-content" data-lang="es">Atención Personalizada</span>
  2524.                     <span class="text-content" data-lang="en" style="display:none;">Personalized Attention</span>
  2525.                 </div>
  2526.         
  2527.                 <h2 class="fw-bold text-dark mb-3 display-5">
  2528.                     <span class="text-content" data-lang="es">Estamos Aquí Para <span class="text-primary-custom">Ayudarte</span></span>
  2529.                     <span class="text-content" data-lang="en" style="display:none;">We Are Here To <span class="text-primary-custom">Help You</span></span>
  2530.                 </h2>
  2531.         
  2532.                 <div class="row justify-content-center">
  2533.                     <div class="col-lg-8">
  2534.                         <p class="lead text-muted fs-5 lh-base">
  2535.                             <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>
  2536.                             <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>
  2537.                         </p>
  2538.                     </div>
  2539.                 </div>
  2540.             </div>
  2541.         
  2542.             <div class="row g-5 align-items-stretch">
  2543.                 <!-- Columna izquierda: información de contacto mejorada -->
  2544.                 <div class="col-lg-6">
  2545.                     <div class="contact-info-wrapper">
  2546.                         <!-- Teléfonos - Card Mejorada -->
  2547.                         <div class="card contact-card border-0 shadow-lg hover-lift mb-4">
  2548.                             <div class="card-body p-4">
  2549.                                 <div class="d-flex align-items-center mb-3">
  2550.                                     <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;">
  2551.                                         <i class="bi bi-telephone-fill text-primary fs-5"></i>
  2552.                                     </div>
  2553.                                     <div>
  2554.                                         <h5 class="fw-bold text-dark mb-0">
  2555.                                             <span class="text-content" data-lang="es">Teléfono</span>
  2556.                                             <span class="text-content" data-lang="en" style="display:none;">Phone</span>
  2557.                                         </h5>
  2558.                                         <small class="text-muted">
  2559.                                             <span class="text-content" data-lang="es">Comunicación inmediata</span>
  2560.                                             <span class="text-content" data-lang="en" style="display:none;">Immediate communication</span>
  2561.                                         </small>
  2562.                                     </div>
  2563.                                 </div>
  2564.                                 <div class="ps-5">
  2565.                                     <div class="d-flex align-items-center mb-2">
  2566.                                         <i class="bi bi-phone text-success me-2"></i>
  2567.                                         <a href="tel:+18172647814" class="text-dark text-decoration-none fw-semibold">+1 817-264-7814</a>
  2568.                                     </div>
  2569.                                     <div class="d-flex align-items-center">
  2570.                                         <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
  2571.                                         <span class="text-muted small">
  2572.                                             <span class="text-content" data-lang="es">Línea de emergencia 24/7</span>
  2573.                                             <span class="text-content" data-lang="en" style="display:none;">24/7 emergency line</span>
  2574.                                         </span>
  2575.                                     </div>
  2576.                                 </div>
  2577.                             </div>
  2578.                         </div>
  2579.         
  2580.                         <!-- Email - Card Mejorada -->
  2581.                         <div class="card contact-card border-0 shadow-lg hover-lift mb-4">
  2582.                             <div class="card-body p-4">
  2583.                                 <div class="d-flex align-items-center mb-3">
  2584.                                     <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;">
  2585.                                         <i class="bi bi-envelope-fill text-success fs-5"></i>
  2586.                                     </div>
  2587.                                     <div>
  2588.                                         <h5 class="fw-bold text-dark mb-0">
  2589.                                             <span class="text-content" data-lang="es">Correo Electrónico</span>
  2590.                                             <span class="text-content" data-lang="en" style="display:none;">Email</span>
  2591.                                         </h5>
  2592.                                         <small class="text-muted">
  2593.                                             <span class="text-content" data-lang="es">Respuesta en menos de 24h</span>
  2594.                                             <span class="text-content" data-lang="en" style="display:none;">Response in less than 24h</span>
  2595.                                         </small>
  2596.                                     </div>
  2597.                                 </div>
  2598.                                 <!-- Contenedor de contactos responsivo -->
  2599.                                 <div class="contact-container ps-3 ps-md-5">
  2600.                                     <div class="contact-item mb-3">
  2601.                                         <i class="bi bi-envelope contact-icon"></i>
  2602.                                         <a href="mailto:imagingprodallas@gmail.com" class="contact-link">
  2603.                                             imagingprodallas@gmail.com
  2604.                                         </a>
  2605.                                     </div>
  2606.                                 </div>
  2607.                             </div>
  2608.                         </div>
  2609.         
  2610.                         <!-- Ubicación y Horarios en una misma card -->
  2611.                         <div class="card contact-card border-0 shadow-lg hover-lift">
  2612.                             <div class="card-body p-4">
  2613.                                 <div class="row">
  2614.                                     <!-- Ubicación -->
  2615.                                     <div class="col-md-6 mb-3 mb-md-0">
  2616.                                         <div class="d-flex align-items-center mb-3">
  2617.                                             <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;">
  2618.                                                 <i class="bi bi-geo-alt-fill text-warning fs-5"></i>
  2619.                                             </div>
  2620.                                             <div>
  2621.                                                 <h5 class="fw-bold text-dark mb-0">
  2622.                                                     <span class="text-content" data-lang="es">Ubicación</span>
  2623.                                                     <span class="text-content" data-lang="en" style="display:none;">Location</span>
  2624.                                                 </h5>
  2625.                                                 <small class="text-muted">
  2626.                                                     <span class="text-content" data-lang="es">Visítanos</span>
  2627.                                                     <span class="text-content" data-lang="en" style="display:none;">Visit us</span>
  2628.                                                 </small>
  2629.                                             </div>
  2630.                                         </div>
  2631.                                         <div class="ps-5">
  2632.                                             <p class="mb-1 small">800 W Airport Fwy Suite 1033,</p>
  2633.                                             <p class="mb-0 small">Irving, TX 75062, Estados Unidos</p>
  2634.                                             <a href="https://maps.app.goo.gl/CQ4eqTiyNWKBhsmV6" 
  2635.                                             class="text-primary small text-decoration-none mt-2 d-inline-block" 
  2636.                                             target="_blank" 
  2637.                                             rel="noopener noreferrer">
  2638.                                                 <i class="bi bi-geo-alt me-1"></i>
  2639.                                                 <span class="text-content" data-lang="es">Ver en el mapa</span>
  2640.                                                 <span class="text-content" data-lang="en" style="display:none;">View on map</span>
  2641.                                             </a>
  2642.                                         </div>
  2643.                                     </div>
  2644.                                     
  2645.                                     <!-- Horarios -->
  2646.                                     <div class="col-md-6">
  2647.                                         <div class="d-flex align-items-center mb-3">
  2648.                                             <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;">
  2649.                                                 <i class="bi bi-clock-fill text-info fs-5"></i>
  2650.                                             </div>
  2651.                                             <div>
  2652.                                                 <h5 class="fw-bold text-dark mb-0">
  2653.                                                     <span class="text-content" data-lang="es">Horarios</span>
  2654.                                                     <span class="text-content" data-lang="en" style="display:none;">Hours</span>
  2655.                                                 </h5>
  2656.                                                 <small class="text-muted">
  2657.                                                     <span class="text-content" data-lang="es">Atención continua</span>
  2658.                                                     <span class="text-content" data-lang="en" style="display:none;">Continuous attention</span>
  2659.                                                 </small>
  2660.                                             </div>
  2661.                                         </div>
  2662.                                         <div class="ps-5">
  2663.                                             <!-- Abierto -->
  2664.                                             <p class="mb-2 small">
  2665.                                                 <span class="text-content" data-lang="es">
  2666.                                                     <span class="badge bg-success bg-opacity-10 text-success me-2">Abierto</span><br>
  2667.                                                     <span class="fw-bold">10:00 a.m. – 6:00 p.m.</span><br>
  2668.                                                     <span class="text-secondary">Lunes, miércoles, viernes y sábados</span>
  2669.                                                 </span>
  2670.                                                 <span class="text-content" data-lang="en" style="display:none;">
  2671.                                                     <span class="badge bg-success bg-opacity-10 text-success me-2">Open</span><br>
  2672.                                                     <span class="fw-bold">10:00 a.m. – 6:00 p.m.</span><br>
  2673.                                                     <span class="text-secondary">Monday, Wednesday, Friday & Saturday</span>
  2674.                                                 </span>
  2675.                                             </p>
  2676.                                             <!-- Cerrado -->
  2677.                                             <p class="mb-0 small">
  2678.                                                 <span class="text-content" data-lang="es">
  2679.                                                     <span class="badge bg-danger bg-opacity-10 text-danger me-2">Cerrado</span><br>
  2680.                                                     <span class="text-secondary">Martes, jueves y domingo</span>
  2681.                                                 </span>
  2682.                                                 <span class="text-content" data-lang="en" style="display:none;">
  2683.                                                     <span class="badge bg-danger bg-opacity-10 text-danger me-2">Closed</span><br>
  2684.                                                     <span class="text-secondary">Tuesday, Thursday & Sunday</span>
  2685.                                                 </span>
  2686.                                             </p>
  2687.                                         </div>
  2688.                                     </div>
  2689.                                 </div>
  2690.                             </div>
  2691.                         </div>
  2692.                     </div>
  2693.                 </div>
  2694.         
  2695.                 <!-- Columna derecha: mapa mejorado -->
  2696.                 <div class="col-lg-6">
  2697.                     <div class="map-container position-relative rounded-3 overflow-hidden shadow-lg"> 
  2698.                         <iframe 
  2699.                             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" 
  2700.                             width="100%" 
  2701.                             height="450" 
  2702.                             style="border:0;" 
  2703.                             allowfullscreen="" 
  2704.                             loading="lazy" 
  2705.                             referrerpolicy="no-referrer-when-downgrade">
  2706.                         </iframe>
  2707.                     </div>  
  2708.                     
  2709.                     <!-- Botones de acción debajo del mapa CORREGIDOS -->
  2710.                     <div class="row g-3 mt-4">
  2711.                         <div class="col-6">
  2712.                             <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">
  2713.                                 <i class="bi bi-calendar-check me-2"></i>
  2714.                                 <span class="text-content" data-lang="es">Agendar Cita</span>
  2715.                                 <span class="text-content" data-lang="en" style="display:none;">Schedule Appointment</span>
  2716.                             </a>
  2717.                         </div>
  2718.                         <div class="col-6">
  2719.                             <a href="tel:+18172647814" class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center py-3 fw-semibold">
  2720.                                 <i class="bi bi-telephone me-2"></i>
  2721.                                 <span class="text-content" data-lang="es">Llamar Ahora</span>
  2722.                                 <span class="text-content" data-lang="en" style="display:none;">Call Now</span>
  2723.                             </a>
  2724.                         </div>
  2725.                     </div>
  2726.                 </div>
  2727.             </div>
  2728.         </div>
  2729.         
  2730.         <style>
  2731.           .hover-lift {
  2732.               transition: all 0.3s ease;
  2733.           }
  2734.           .hover-lift:hover {
  2735.               transform: translateY(-5px);
  2736.               box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
  2737.           }
  2738.           .map-container {
  2739.               border: 2px solid #e9ecef;
  2740.           }
  2741.           .map-overlay {
  2742.               pointer-events: none;
  2743.               opacity: 0;
  2744.               transition: opacity 0.3s ease;
  2745.           }
  2746.           .map-container:hover .map-overlay {
  2747.               opacity: 1;
  2748.           }
  2749.           .contact-card {
  2750.               transition: all 0.3s ease;
  2751.           }
  2752.           .icon-wrapper {
  2753.               transition: transform 0.3s ease;
  2754.           }
  2755.           .contact-card:hover .icon-wrapper {
  2756.               transform: scale(1.1);
  2757.           }
  2759.         .badge-custom {
  2760.             background-color: rgba(13, 110, 253, 0.1);
  2761.             color: #0d6efd;
  2762.             border: 2px solid #0d6efd;
  2763.             font-size: clamp(0.875rem, 2vw, 1rem);
  2764.             padding: 0.5rem 1rem;
  2765.             border-radius: 50rem;
  2766.             display: inline-flex;
  2767.             align-items: center;
  2768.         }
  2769.         
  2770.         .contact-title {
  2771.             font-weight: 700;
  2772.             line-height: 1.2;
  2773.             color: #212529;
  2774.             font-size: clamp(1.75rem, 4.5vw, 3rem);
  2775.             position: relative;
  2776.         }
  2777.         
  2778.         .text-primary-custom {
  2779.             color: #0d6efd !important;
  2780.         }
  2781.         
  2782.         .icon-custom {
  2783.             margin-right: 0.5rem;
  2784.             color: #0dcaf0;
  2785.         }
  2786.         
  2787.         @media (max-width: 576px) {
  2788.             .badge-custom {
  2789.                 padding: 0.375rem 0.75rem;
  2790.             }
  2791.         }
  2793.             .contact-container {
  2794.             padding-left: 1.5rem !important;
  2795.         }
  2796.         
  2797.         .contact-item {
  2798.             display: flex;
  2799.             align-items: center;
  2800.             margin-bottom: 0.75rem;
  2801.             flex-wrap: wrap;
  2802.         }
  2803.         
  2804.         .contact-icon {
  2805.             color: #6c757d;
  2806.             margin-right: 0.5rem;
  2807.             font-size: 1.1rem;
  2808.             flex-shrink: 0;
  2809.         }
  2810.         
  2811.         .contact-link {
  2812.             color: #212529 !important;
  2813.             text-decoration: none !important;
  2814.             font-size: clamp(0.9rem, 2vw, 1rem);
  2815.             word-break: break-word;
  2816.             transition: color 0.3s ease;
  2817.         }
  2818.         
  2819.         .contact-link:hover {
  2820.             color: #0d6efd !important;
  2821.         }
  2822.         
  2823.         /* Mejoras para móviles */
  2824.         @media (max-width: 768px) {
  2825.             .contact-container {
  2826.                 padding-left: 1rem !important;
  2827.                 padding-right: 1rem !important;
  2828.             }
  2829.             
  2830.             .contact-item {
  2831.                 margin-bottom: 1rem;
  2832.             }
  2833.             
  2834.             .contact-link {
  2835.                 font-size: 1rem;
  2836.                 line-height: 1.4;
  2837.             }
  2838.         }
  2839.         
  2840.         @media (max-width: 576px) {
  2841.             .contact-container {
  2842.                 padding-left: 0.5rem !important;
  2843.                 padding-right: 0.5rem !important;
  2844.             }
  2845.             
  2846.             .contact-item {
  2847.                 flex-direction: column;
  2848.                 align-items: flex-start;
  2849.                 margin-bottom: 1.25rem;
  2850.             }
  2851.             
  2852.             .contact-icon {
  2853.                 margin-bottom: 0.25rem;
  2854.                 margin-right: 0;
  2855.             }
  2856.             
  2857.             .contact-link {
  2858.                 font-size: 0.95rem;
  2859.                 padding: 0.25rem 0;
  2860.             }
  2861.         }
  2862.         
  2863.         @media (max-width: 360px) {
  2864.             .contact-link {
  2865.                 font-size: 0.9rem;
  2866.             }
  2867.             
  2868.             .contact-icon {
  2869.                 font-size: 1rem;
  2870.             }
  2871.         }
  2872.       </style>
  2873.     </section>
  2874.     
  2875.     <section class="hero-section py-5 bg-light" id="formas-medicas">
  2876.          <div class="container">
  2877.             <!-- Encabezado centrado -->
  2878.             <div class="row justify-content-center text-center mb-5">
  2879.                 <div class="col-lg-8">
  2880.                     <!-- Badge de categoría -->
  2881.                     <div class="badge-custom mb-3">
  2882.                         <i class="bi bi-file-earmark-medical icon-custom"></i>
  2883.                         <span class="text-content" data-lang="es">Documentación Médica</span>
  2884.                         <span class="text-content" data-lang="en" style="display:none;">Medical Documentation</span>
  2885.                     </div>
  2886.         
  2887.                     <h2 class="fw-bold text-dark mb-4 display-5">
  2888.                         <span class="text-content" data-lang="es">Formas Médicas <span class="text-primary-custom">Disponibles</span></span>
  2889.                         <span class="text-content" data-lang="en" style="display:none;">Medical Forms <span class="text-primary-custom">Available</span></span>
  2890.                     </h2>
  2891.                     
  2892.                     <p class="lead text-muted mb-4 fs-6">
  2893.                         <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>
  2894.                         <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>
  2895.                     </p>
  2896.                 </div>
  2897.             </div>
  2898.         
  2899.             <!-- Contenido dividido en izquierda y derecha -->
  2900.             <div class="row align-items-center g-5">
  2901.                 <!-- Columna izquierda: características -->
  2902.                 <div class="col-lg-6">
  2903.                     <!-- Lista de características -->
  2904.                     <div class="features-list">
  2905.                         <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">
  2906.                             <i class="bi bi-download text-success fs-4 me-3 mt-1"></i>
  2907.                             <div>
  2908.                                 <h6 class="fw-bold text-dark mb-1">
  2909.                                     <span class="text-content" data-lang="es">Descarga Inmediata</span>
  2910.                                     <span class="text-content" data-lang="en" style="display:none;">Instant Download</span>
  2911.                                 </h6>
  2912.                                 <p class="text-muted mb-0 small">
  2913.                                     <span class="text-content" data-lang="es">Accede instantáneamente a todos nuestros formularios en formato PDF.</span>
  2914.                                     <span class="text-content" data-lang="en" style="display:none;">Instantly access all our forms in PDF format.</span>
  2915.                                 </p>
  2916.                             </div>
  2917.                         </div>
  2918.         
  2919.                         <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">
  2920.                             <i class="bi bi-clock-fill text-warning fs-4 me-3 mt-1"></i>
  2921.                             <div>
  2922.                                 <h6 class="fw-bold text-dark mb-1">
  2923.                                     <span class="text-content" data-lang="es">Ahorra Tiempo</span>
  2924.                                     <span class="text-content" data-lang="en" style="display:none;">Save Time</span>
  2925.                                 </h6>
  2926.                                 <p class="text-muted mb-0 small">
  2927.                                     <span class="text-content" data-lang="es">Completa los formularios desde casa y evita esperas en la consulta.</span>
  2928.                                     <span class="text-content" data-lang="en" style="display:none;">Complete forms from home and avoid waiting at the appointment.</span>
  2929.                                 </p>
  2930.                             </div>
  2931.                         </div>
  2932.         
  2933.                         <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">
  2934.                             <i class="bi bi-shield-check text-primary fs-4 me-3 mt-1"></i>
  2935.                             <div>
  2936.                                 <h6 class="fw-bold text-dark mb-1">
  2937.                                     <span class="text-content" data-lang="es">Información Segura</span>
  2938.                                     <span class="text-content" data-lang="en" style="display:none;">Secure Information</span>
  2939.                                 </h6>
  2940.                                 <p class="text-muted mb-0 small">
  2941.                                     <span class="text-content" data-lang="es">Tus datos médicos están protegidos bajo estrictos protocolos de confidencialidad.</span>
  2942.                                     <span class="text-content" data-lang="en" style="display:none;">Your medical data is protected under strict confidentiality protocols.</span>
  2943.                                 </p>
  2944.                             </div>
  2945.                         </div>
  2946.         
  2947.                         <div class="feature-item d-flex align-items-start p-3 rounded-3 bg-light bg-opacity-50 border-start border-4 border-info">
  2948.                             <i class="bi bi-question-circle text-info fs-4 me-3 mt-1"></i>
  2949.                             <div>
  2950.                                 <h6 class="fw-bold text-dark mb-1">
  2951.                                     <span class="text-content" data-lang="es">Instrucciones Claras</span>
  2952.                                     <span class="text-content" data-lang="en" style="display:none;">Clear Instructions</span>
  2953.                                 </h6>
  2954.                                 <p class="text-muted mb-0 small">
  2955.                                     <span class="text-content" data-lang="es">Cada formulario incluye guías paso a paso para completarlo correctamente.</span>
  2956.                                     <span class="text-content" data-lang="en" style="display:none;">Each form includes step-by-step guides to complete it correctly.</span>
  2957.                                 </p>
  2958.                             </div>
  2959.                         </div>
  2960.                     </div>
  2961.                 </div>
  2962.         
  2963.                 <!-- Columna derecha: Documentos para descargar -->
  2964.                 <div class="col-lg-6">
  2965.                     <div class="card border-0 shadow-lg">
  2966.                         <div class="card-header bg-primary text-white py-4">
  2967.                             <h4 class="mb-0 text-center">
  2968.                                 <i class="bi bi-file-pdf me-2"></i>
  2969.                                 <span class="text-content" data-lang="es">Formularios Disponibles</span>
  2970.                                 <span class="text-content" data-lang="en" style="display:none;">Available Forms</span>
  2971.                             </h4>
  2972.                         </div>
  2973.                         <div class="card-body p-4">
  2974.                             
  2975.                             <!-- Documento principal -->
  2976.                             <div class="document-item border-bottom pb-4 mb-4">
  2977.                                 <div class="d-flex align-items-center justify-content-between">
  2978.                                     <div class="d-flex align-items-center">
  2979.                                         <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;">
  2980.                                             <i class="bi bi-file-earmark-pdf text-danger fs-3"></i>
  2981.                                         </div>
  2982.                                         <div>
  2983.                                             <h5 class="fw-bold text-dark mb-1">
  2984.                                                 <span class="text-content" data-lang="es">Indicación Médica para Ultrasonidos</span>
  2985.                                                 <span class="text-content" data-lang="en" style="display:none;">Medical Indication for Ultrasounds</span>
  2986.                                             </h5>
  2987.                                             <p class="text-muted mb-0 small">
  2988.                                                 <span class="text-content" data-lang="es">Documento completo para nuevos proveedores de salud</span>
  2989.                                                 <span class="text-content" data-lang="en" style="display:none;">Complete document for new healthcare providers</span>
  2990.                                             </p>
  2991.                                         </div>
  2992.                                     </div>
  2993.                                     <a href="/upload/pdf/IMU3.pdf" class="btn btn-primary btn-lg px-4" download>
  2994.                                         <i class="bi bi-download me-2"></i>
  2995.                                         <span class="text-content" data-lang="es">Descargar</span>
  2996.                                         <span class="text-content" data-lang="en" style="display:none;">Download</span>
  2997.                                     </a>
  2998.                                 </div>
  2999.                             </div>
  3000.         
  3001.                             <!-- Información adicional CORREGIDA -->
  3002.                             <div class="mt-4 p-3 bg-light rounded-3">
  3003.                                 <div class="d-flex align-items-center">
  3004.                                     <span class="text-content" data-lang="es">
  3005.                                         <i class="bi bi-info-circle text-primary fs-5 me-2"></i>
  3006.                                         <div>
  3007.                                             <p class="small text-muted mb-0">
  3008.                                                 <strong>Recomendación:</strong> Descarga, imprime y completa los formularios antes de tu cita.
  3009.                                             </p>
  3010.                                         </div>
  3011.                                     </span>
  3012.                                     <span class="text-content" data-lang="en" style="display:none;">
  3013.                                         <i class="bi bi-info-circle text-primary fs-5 me-2"></i>
  3014.                                         <div>
  3015.                                             <p class="small text-muted mb-0">
  3016.                                                 <strong>Recommendation:</strong> Download, print and complete the forms before your appointment.
  3017.                                             </p>
  3018.                                         </div>
  3019.                                     </span>
  3020.                                 </div>
  3021.                             </div>
  3022.                         </div>
  3023.                     </div>
  3024.                 </div>
  3025.             </div>
  3026.         </div>
  3027.     
  3028.         <style>
  3029.             .hover-lift {
  3030.                 transition: all 0.3s ease;
  3031.             }
  3032.             .hover-lift:hover {
  3033.                 transform: translateY(-5px);
  3034.                 box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
  3035.             }
  3036.             .features-list .feature-item {
  3037.                 transition: all 0.3s ease;
  3038.             }
  3039.             .features-list .feature-item:hover {
  3040.                 transform: translateX(5px);
  3041.                 background: rgba(13, 110, 253, 0.05) !important;
  3042.             }
  3043.     
  3044.             .badge-custom {
  3045.                 background-color: rgba(13, 110, 253, 0.1);
  3046.                 color: #0d6efd;
  3047.                 border: 2px solid #0d6efd;
  3048.                 font-size: clamp(0.875rem, 2vw, 1rem);
  3049.                 padding: 0.5rem 1rem;
  3050.                 border-radius: 50rem;
  3051.                 display: inline-flex;
  3052.                 align-items: center;
  3053.             }
  3054.             
  3055.             .icon-custom {
  3056.                 margin-right: 0.5rem;
  3057.             }
  3058.     
  3059.             .document-item {
  3060.                 transition: all 0.3s ease;
  3061.             }
  3062.             
  3063.             .document-item:hover {
  3064.                 background-color: rgba(13, 110, 253, 0.02);
  3065.                 border-radius: 8px;
  3066.                 padding: 0 10px;
  3067.                 margin: 0 -10px;
  3068.             }
  3069.     
  3070.             .document-mini {
  3071.                 transition: all 0.2s ease;
  3072.             }
  3073.             
  3074.             .document-mini:hover {
  3075.                 background-color: rgba(13, 110, 253, 0.02);
  3076.                 border-radius: 6px;
  3077.                 padding: 0 10px;
  3078.                 margin: 0 -10px;
  3079.             }
  3080.     
  3081.             @media (max-width: 768px) {
  3082.                 .document-item .d-flex {
  3083.                     flex-direction: column;
  3084.                     align-items: flex-start !important;
  3085.                 }
  3086.                 
  3087.                 .document-item .btn {
  3088.                     margin-top: 1rem;
  3089.                     align-self: stretch;
  3090.                 }
  3091.             }
  3092.         </style>
  3093.     </section>
  3095.     <section class="hero-section py-5 bg-white" id="equipo">
  3096.           <div class="container">
  3097.             <!-- Encabezado centrado -->
  3098.             <div class="row justify-content-center text-center mb-5">
  3099.                 <div class="col-lg-8">
  3100.                     <!-- Badge de categoría -->
  3101.                     <div class="badge-custom mb-3">
  3102.                         <i class="bi bi-people-fill icon-custom"></i>
  3103.                         <span class="text-content" data-lang="es">Equipo Especializado</span>
  3104.                         <span class="text-content" data-lang="en" style="display:none;">Specialized Team</span>
  3105.                     </div>
  3106.         
  3107.                     <h2 class="fw-bold text-dark mb-4 display-5">
  3108.                         <span class="text-content" data-lang="es">Nuestro <span class="text-primary-custom">Equipo Profesional</span></span>
  3109.                         <span class="text-content" data-lang="en" style="display:none;">Our <span class="text-primary-custom">Professional Team</span></span>
  3110.                     </h2>
  3111.                     
  3112.                     <p class="lead text-muted mb-4 fs-6">
  3113.                         <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>
  3114.                         <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>
  3115.                     </p>
  3116.                 </div>
  3117.             </div>
  3118.         
  3119.             <!-- Contenido dividido en izquierda y derecha -->
  3120.             <div class="row align-items-start g-5">
  3121.                 <!-- Columna izquierda: imagen y características -->
  3122.                 <div class="col-lg-6">
  3123.                     <!-- Imagen del equipo -->
  3124.                     <div class="position-relative rounded-3 overflow-hidden shadow-lg mb-4">
  3125.                         <img src="{{ asset('images/logo-team.jpg') }}" 
  3126.                             alt="Equipo médico de diagnóstico por imágenes" 
  3127.                             class="img-fluid w-100 custom-img-height">
  3128.                         <div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-50 text-white p-4">
  3129.                             <h5 class="mb-1">
  3130.                                 <span class="text-content" data-lang="es">Equipo de profesionales</span>
  3131.                                 <span class="text-content" data-lang="en" style="display:none;">Team of professionals</span>
  3132.                             </h5>
  3133.                             <p class="mb-0 small">
  3134.                                 <span class="text-content" data-lang="es">Trabajando juntos por tu salud</span>
  3135.                                 <span class="text-content" data-lang="en" style="display:none;">Working together for your health</span>
  3136.                             </p>
  3137.                         </div>
  3138.                     </div>
  3139.         
  3140.                     <!-- Características del equipo -->
  3141.                     <div class="mt-4">
  3142.                         <div class="d-flex align-items-center mb-3">
  3143.                             <i class="bi bi-check-circle-fill text-success me-2"></i>
  3144.                             <span class="text-dark fw-semibold">
  3145.                                 <span class="text-content" data-lang="es">Especialistas certificados</span>
  3146.                                 <span class="text-content" data-lang="en" style="display:none;">Certified specialists</span>
  3147.                             </span>
  3148.                         </div>
  3149.                         <div class="d-flex align-items-center mb-3">
  3150.                             <i class="bi bi-check-circle-fill text-success me-2"></i>
  3151.                             <span class="text-dark fw-semibold">
  3152.                                 <span class="text-content" data-lang="es">Amplia experiencia clínica</span>
  3153.                                 <span class="text-content" data-lang="en" style="display:none;">Extensive clinical experience</span>
  3154.                             </span>
  3155.                         </div>
  3156.                         <div class="d-flex align-items-center">
  3157.                             <i class="bi bi-check-circle-fill text-success me-2"></i>
  3158.                             <span class="text-dark fw-semibold">
  3159.                                 <span class="text-content" data-lang="es">Actualización continua</span>
  3160.                                 <span class="text-content" data-lang="en" style="display:none;">Continuous updating</span>
  3161.                             </span>
  3162.                         </div>
  3163.                     </div>
  3164.                 </div>
  3165.         
  3166.                 <!-- Columna derecha: equipo médico -->
  3167.                 <div class="col-lg-6">
  3168.                     <div class="row g-4">
  3169.                         <!-- Médico 1 -->
  3170.                         <div class="col-md-6">
  3171.                             <div class="card border-0 shadow-lg h-100 hover-lift">
  3172.                                 <div class="card-body text-center p-4">
  3173.                                     <div class="avatar-wrapper mx-auto mb-3 position-relative">
  3174.                                         <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" 
  3175.                                             alt="Dr. Carlos Rodríguez" 
  3176.                                             class="rounded-circle img-cover">
  3177.                                         <div class="status-indicator bg-success"></div>
  3178.                                     </div>
  3179.                                     <h5 class="fw-bold text-dark mb-1">Dr. Carlos Rodríguez</h5>
  3180.                                     <p class="text-muted mb-0 small">
  3181.                                         <span class="text-content" data-lang="es">Radiólogo General</span>
  3182.                                         <span class="text-content" data-lang="en" style="display:none;">General Radiologist</span>
  3183.                                     </p>
  3184.                                     <div class="mt-2">
  3185.                                         <span class="badge bg-primary bg-opacity-10 text-primary small">
  3186.                                             <span class="text-content" data-lang="es">15 años exp.</span>
  3187.                                             <span class="text-content" data-lang="en" style="display:none;">15 years exp.</span>
  3188.                                         </span>
  3189.                                     </div>
  3190.                                 </div>
  3191.                             </div>
  3192.                         </div>
  3193.                         
  3194.                         <!-- Médico 2 -->
  3195.                         <div class="col-md-6">
  3196.                             <div class="card border-0 shadow-lg h-100 hover-lift">
  3197.                                 <div class="card-body text-center p-4">
  3198.                                     <div class="avatar-wrapper mx-auto mb-3 position-relative">
  3199.                                         <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" 
  3200.                                             alt="Dra. María González" 
  3201.                                             class="rounded-circle img-cover">
  3202.                                         <div class="status-indicator bg-success"></div>
  3203.                                     </div>
  3204.                                     <h5 class="fw-bold text-dark mb-1">Dra. María González</h5>
  3205.                                     <p class="text-muted mb-0 small">
  3206.                                         <span class="text-content" data-lang="es">Especialista en Ultrasonido</span>
  3207.                                         <span class="text-content" data-lang="en" style="display:none;">Ultrasound Specialist</span>
  3208.                                     </p>
  3209.                                     <div class="mt-2">
  3210.                                         <span class="badge bg-primary bg-opacity-10 text-primary small">
  3211.                                             <span class="text-content" data-lang="es">12 años exp.</span>
  3212.                                             <span class="text-content" data-lang="en" style="display:none;">12 years exp.</span>
  3213.                                         </span>
  3214.                                     </div>
  3215.                                 </div>
  3216.                             </div>
  3217.                         </div>
  3218.         
  3219.                         <!-- Médico 3 -->
  3220.                         <div class="col-md-6">
  3221.                             <div class="card border-0 shadow-lg h-100 hover-lift">
  3222.                                 <div class="card-body text-center p-4">
  3223.                                     <div class="avatar-wrapper mx-auto mb-3 position-relative">
  3224.                                         <img src="https://images.unsplash.com/photo-1582750433449-648ed127bb54?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" 
  3225.                                             alt="Dr. Javier López" 
  3226.                                             class="rounded-circle img-cover">
  3227.                                         <div class="status-indicator bg-success"></div>
  3228.                                     </div>
  3229.                                     <h5 class="fw-bold text-dark mb-1">Dr. Javier López</h5>
  3230.                                     <p class="text-muted mb-0 small">
  3231.                                         <span class="text-content" data-lang="es">Neurorradiólogo</span>
  3232.                                         <span class="text-content" data-lang="en" style="display:none;">Neuroradiologist</span>
  3233.                                     </p>
  3234.                                     <div class="mt-2">
  3235.                                         <span class="badge bg-primary bg-opacity-10 text-primary small">
  3236.                                             <span class="text-content" data-lang="es">14 años exp.</span>
  3237.                                             <span class="text-content" data-lang="en" style="display:none;">14 years exp.</span>
  3238.                                         </span>
  3239.                                     </div>
  3240.                                 </div>
  3241.                             </div>
  3242.                         </div>
  3243.         
  3244.                         <!-- Médico 4 -->
  3245.                         <div class="col-md-6">
  3246.                             <div class="card border-0 shadow-lg h-100 hover-lift">
  3247.                                 <div class="card-body text-center p-4">
  3248.                                     <div class="avatar-wrapper mx-auto mb-3 position-relative">
  3249.                                         <img src="https://images.unsplash.com/photo-1551601651-2a8555f1a136?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" 
  3250.                                             alt="Dra. Laura Fernández" 
  3251.                                             class="rounded-circle img-cover">
  3252.                                         <div class="status-indicator bg-success"></div>
  3253.                                     </div>
  3254.                                     <h5 class="fw-bold text-dark mb-1">Dra. Laura Fernández</h5>
  3255.                                     <p class="text-muted mb-0 small">
  3256.                                         <span class="text-content" data-lang="es">Radióloga Pediátrica</span>
  3257.                                         <span class="text-content" data-lang="en" style="display:none;">Pediatric Radiologist</span>
  3258.                                     </p>
  3259.                                     <div class="mt-2">
  3260.                                         <span class="badge bg-primary bg-opacity-10 text-primary small">
  3261.                                             <span class="text-content" data-lang="es">9 años exp.</span>
  3262.                                             <span class="text-content" data-lang="en" style="display:none;">9 years exp.</span>
  3263.                                         </span>
  3264.                                     </div>
  3265.                                 </div>
  3266.                             </div>
  3267.                         </div>
  3268.                     </div>
  3269.                 </div>
  3270.             </div>
  3271.         </div>
  3273.         <style>
  3274.           
  3275.             .custom-img-height {
  3276.                 height: 400px; /* Ajusta este valor según necesites */
  3277.                 object-fit: cover;
  3278.             }
  3280.             .hover-lift {
  3281.                 transition: all 0.3s ease;
  3282.             }
  3283.             .hover-lift:hover {
  3284.                 transform: translateY(-5px);
  3285.                 box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
  3286.             }
  3288.             .badge-custom {
  3289.                 background-color: rgba(13, 110, 253, 0.1);
  3290.                 color: #0d6efd;
  3291.                 border: 2px solid #0d6efd;
  3292.                 font-size: clamp(0.875rem, 2vw, 1rem);
  3293.                 padding: 0.5rem 1rem;
  3294.                 border-radius: 50rem;
  3295.                 display: inline-flex;
  3296.                 align-items: center;
  3297.             }
  3298.             
  3299.             .icon-custom {
  3300.                 margin-right: 0.5rem;
  3301.             }
  3303.             .avatar-wrapper {
  3304.                 width: 100px;
  3305.                 height: 100px;
  3306.                 position: relative;
  3307.             }
  3309.             .img-cover {
  3310.                 width: 100%;
  3311.                 height: 100%;
  3312.                 object-fit: cover;
  3313.                 border: 3px solid #f8f9fa;
  3314.                 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  3315.             }
  3317.             .status-indicator {
  3318.                 position: absolute;
  3319.                 bottom: 5px;
  3320.                 right: 5px;
  3321.                 width: 12px;
  3322.                 height: 12px;
  3323.                 border-radius: 50%;
  3324.                 border: 2px solid white;
  3325.             }
  3327.             @media (max-width: 576px) {
  3328.                 .badge-custom {
  3329.                     padding: 0.375rem 0.75rem;
  3330.                 }
  3331.                 
  3332.                 .avatar-wrapper {
  3333.                     width: 80px;
  3334.                     height: 80px;
  3335.                 }
  3336.             }
  3337.         </style>
  3338.     </section>
  3340.     <section class="hero-section py-5 bg-light" id="privacidad">
  3341.          <div class="container">
  3342.             <!-- Encabezado Mejorado -->
  3343.             <div class="text-center mb-5">
  3344.                 <div class="badge-custom mb-3">
  3345.                     <i class="bi bi-shield-lock icon-custom"></i>
  3346.                     <span class="text-content" data-lang="es">Protección de Datos</span>
  3347.                     <span class="text-content" data-lang="en" style="display:none;">Data Protection</span>
  3348.                 </div>
  3349.         
  3350.                 <!-- Título principal CORREGIDO -->
  3351.                 <h1 class="fw-bold text-dark mb-3 display-5">
  3352.                     <span class="text-content" data-lang="es">Política de <span class="text-primary-custom">Privacidad</span></span>
  3353.                     <span class="text-content" data-lang="en" style="display:none;">Privacy <span class="text-primary-custom">Policy</span></span>
  3354.                 </h1>
  3355.         
  3356.                 <p class="text-muted mb-3">
  3357.                     <span class="text-content" data-lang="es">
  3358.                         <i class="bi bi-clock-history me-1"></i>
  3359.                         Última actualización: 26 de septiembre de 2025
  3360.                     </span>
  3361.                     <span class="text-content" data-lang="en" style="display:none;">
  3362.                         <i class="bi bi-clock-history me-1"></i>
  3363.                         Last updated: September 26, 2025
  3364.                     </span>
  3365.                 </p>
  3366.                 <div class="row justify-content-center">
  3367.                     <div class="col-lg-8">
  3368.                         <p class="lead text-muted fs-5 lh-base">
  3369.                             <span class="text-content" data-lang="es">En <strong class="text-primary">ImagingPro</strong>, protegemos con el máximo rigor la confidencialidad 
  3370.                             y seguridad de la información de nuestros pacientes. Esta política detalla nuestro compromiso 
  3371.                             con la protección de tus datos personales y médicos.</span>
  3372.                             <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 
  3373.                             and security of our patients' information. This policy details our commitment 
  3374.                             to protecting your personal and medical data.</span>
  3375.                         </p>
  3376.                     </div>
  3377.                 </div>
  3378.             </div>
  3379.         
  3380.             <!-- Secciones Mejoradas -->
  3381.             <div class="row g-4">
  3382.                 <!-- Información que recopilamos -->
  3383.                 <div class="col-lg-4 col-md-6">
  3384.                     <div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
  3385.                         <div class="card-body p-4">
  3386.                             <div class="d-flex align-items-center mb-3">
  3387.                                 <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;">
  3388.                                     <i class="bi bi-database-fill text-primary fs-5"></i>
  3389.                                 </div>
  3390.                                 <h5 class="fw-bold text-dark mb-0">
  3391.                                     <span class="text-content" data-lang="es">Información Recopilada</span>
  3392.                                     <span class="text-content" data-lang="en" style="display:none;">Information Collected</span>
  3393.                                 </h5>
  3394.                             </div>
  3395.                             <div class="privacy-content">
  3396.                                 <div class="info-item d-flex align-items-start mb-3">
  3397.                                     <i class="bi bi-person-check text-success mt-1 me-2"></i>
  3398.                                     <div>
  3399.                                         <strong class="text-dark">
  3400.                                             <span class="text-content" data-lang="es">Datos Personales</span>
  3401.                                             <span class="text-content" data-lang="en" style="display:none;">Personal Data</span>
  3402.                                         </strong>
  3403.                                         <p class="text-muted small mb-0">
  3404.                                             <span class="text-content" data-lang="es">Nombre, dirección, teléfono, correo electrónico e identificación oficial.</span>
  3405.                                             <span class="text-content" data-lang="en" style="display:none;">Name, address, phone, email and official identification.</span>
  3406.                                         </p>
  3407.                                     </div>
  3408.                                 </div>
  3409.                                 <div class="info-item d-flex align-items-start mb-3">
  3410.                                     <i class="bi bi-file-medical text-info mt-1 me-2"></i>
  3411.                                     <div>
  3412.                                         <strong class="text-dark">
  3413.                                             <span class="text-content" data-lang="es">Información Médica</span>
  3414.                                             <span class="text-content" data-lang="en" style="display:none;">Medical Information</span>
  3415.                                         </strong>
  3416.                                         <p class="text-muted small mb-0">
  3417.                                             <span class="text-content" data-lang="es">Historial clínico, resultados de estudios diagnósticos y citas programadas.</span>
  3418.                                             <span class="text-content" data-lang="en" style="display:none;">Medical history, diagnostic test results and scheduled appointments.</span>
  3419.                                         </p>
  3420.                                     </div>
  3421.                                 </div>
  3422.                                 <div class="info-item d-flex align-items-start">
  3423.                                     <i class="bi bi-laptop text-warning mt-1 me-2"></i>
  3424.                                     <div>
  3425.                                         <strong class="text-dark">
  3426.                                             <span class="text-content" data-lang="es">Datos Técnicos</span>
  3427.                                             <span class="text-content" data-lang="en" style="display:none;">Technical Data</span>
  3428.                                         </strong>
  3429.                                         <p class="text-muted small mb-0">
  3430.                                             <span class="text-content" data-lang="es">Dirección IP, tipo de dispositivo, navegador y ubicación aproximada.</span>
  3431.                                             <span class="text-content" data-lang="en" style="display:none;">IP address, device type, browser and approximate location.</span>
  3432.                                         </p>
  3433.                                     </div>
  3434.                                 </div>
  3435.                             </div>
  3436.                         </div>
  3437.                     </div>
  3438.                 </div>
  3439.         
  3440.                 <!-- Uso de la información -->
  3441.                 <div class="col-lg-4 col-md-6">
  3442.                     <div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
  3443.                         <div class="card-body p-4">
  3444.                             <div class="d-flex align-items-center mb-3">
  3445.                                 <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;">
  3446.                                     <i class="bi bi-gear-fill text-success fs-5"></i>
  3447.                                 </div>
  3448.                                 <h5 class="fw-bold text-dark mb-0">
  3449.                                     <span class="text-content" data-lang="es">Uso de la Información</span>
  3450.                                     <span class="text-content" data-lang="en" style="display:none;">Use of Information</span>
  3451.                                 </h5>
  3452.                             </div>
  3453.                             <div class="privacy-content">
  3454.                                 <div class="info-item d-flex align-items-start mb-3">
  3455.                                     <i class="bi bi-calendar-check text-primary mt-1 me-2"></i>
  3456.                                     <div>
  3457.                                         <strong class="text-dark">
  3458.                                             <span class="text-content" data-lang="es">Gestión Médica</span>
  3459.                                             <span class="text-content" data-lang="en" style="display:none;">Medical Management</span>
  3460.                                         </strong>
  3461.                                         <p class="text-muted small mb-0">
  3462.                                             <span class="text-content" data-lang="es">Programación y administración de estudios y consultas médicas.</span>
  3463.                                             <span class="text-content" data-lang="en" style="display:none;">Scheduling and administration of studies and medical consultations.</span>
  3464.                                         </p>
  3465.                                     </div>
  3466.                                 </div>
  3467.                                 <div class="info-item d-flex align-items-start mb-3">
  3468.                                     <i class="bi bi-bell-fill text-warning mt-1 me-2"></i>
  3469.                                     <div>
  3470.                                         <strong class="text-dark">
  3471.                                             <span class="text-content" data-lang="es">Comunicación</span>
  3472.                                             <span class="text-content" data-lang="en" style="display:none;">Communication</span>
  3473.                                         </strong>
  3474.                                         <p class="text-muted small mb-0">
  3475.                                             <span class="text-content" data-lang="es">Envío de recordatorios, resultados y información clínica relevante.</span>
  3476.                                             <span class="text-content" data-lang="en" style="display:none;">Sending reminders, results and relevant clinical information.</span>
  3477.                                         </p>
  3478.                                     </div>
  3479.                                 </div>
  3480.                                 <div class="info-item d-flex align-items-start">
  3481.                                     <i class="bi bi-graph-up text-info mt-1 me-2"></i>
  3482.                                     <div>
  3483.                                         <strong class="text-dark">
  3484.                                             <span class="text-content" data-lang="es">Mejora Continua</span>
  3485.                                             <span class="text-content" data-lang="en" style="display:none;">Continuous Improvement</span>
  3486.                                         </strong>
  3487.                                         <p class="text-muted small mb-0">
  3488.                                             <span class="text-content" data-lang="es">Optimización de experiencia de usuario y seguridad del sistema.</span>
  3489.                                             <span class="text-content" data-lang="en" style="display:none;">Optimization of user experience and system security.</span>
  3490.                                         </p>
  3491.                                     </div>
  3492.                                 </div>
  3493.                             </div>
  3494.                         </div>
  3495.                     </div>
  3496.                 </div>
  3497.         
  3498.                 <!-- Protección de datos -->
  3499.                 <div class="col-lg-4 col-md-6">
  3500.                     <div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
  3501.                         <div class="card-body p-4">
  3502.                             <div class="d-flex align-items-center mb-3">
  3503.                                 <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;">
  3504.                                     <i class="bi bi-shield-check text-warning fs-5"></i>
  3505.                                 </div>
  3506.                                 <h5 class="fw-bold text-dark mb-0">
  3507.                                     <span class="text-content" data-lang="es">Protección de Datos</span>
  3508.                                     <span class="text-content" data-lang="en" style="display:none;">Data Protection</span>
  3509.                                 </h5>
  3510.                             </div>
  3511.                             <div class="privacy-content">
  3512.                                 <div class="security-badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-1 small mb-3 d-inline-block">
  3513.                                     <i class="bi bi-lock-fill me-1"></i>
  3514.                                     <span class="text-content" data-lang="es">Cifrado Avanzado</span>
  3515.                                     <span class="text-content" data-lang="en" style="display:none;">Advanced Encryption</span>
  3516.                                 </div>
  3517.                                 <p class="text-muted small mb-3">
  3518.                                     <span class="text-content" data-lang="es">Implementamos cifrado de grado médico, autenticación multifactorial 
  3519.                                     y controles de acceso basados en roles para garantizar la máxima 
  3520.                                     seguridad de tu información.</span>
  3521.                                     <span class="text-content" data-lang="en" style="display:none;">We implement medical-grade encryption, multi-factor authentication 
  3522.                                     and role-based access controls to ensure maximum security of your information.</span>
  3523.                                 </p>
  3524.                                 <div class="d-flex align-items-center text-muted small">
  3525.                                     <i class="bi bi-person-check text-primary me-2"></i>
  3526.                                     <span class="text-content" data-lang="es">Acceso restringido a personal autorizado</span>
  3527.                                     <span class="text-content" data-lang="en" style="display:none;">Access restricted to authorized personnel</span>
  3528.                                 </div>
  3529.                             </div>
  3530.                         </div>
  3531.                     </div>
  3532.                 </div>
  3533.         
  3534.                 <!-- Compartición de datos CORREGIDO -->
  3535.                 <div class="col-lg-4 col-md-6">
  3536.                     <div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
  3537.                         <div class="card-body p-4">
  3538.                             <div class="d-flex align-items-center mb-3">
  3539.                                 <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;">
  3540.                                     <i class="bi bi-share-fill text-info fs-5"></i>
  3541.                                 </div>
  3542.                                 <h5 class="fw-bold text-dark mb-0">
  3543.                                     <span class="text-content" data-lang="es">Compartición de Datos</span>
  3544.                                     <span class="text-content" data-lang="en" style="display:none;">Data Sharing</span>
  3545.                                 </h5>
  3546.                             </div>
  3547.                             <div class="privacy-content">
  3548.                                 <div class="alert alert-warning border-0 small mb-3">
  3549.                                     <i class="bi bi-exclamation-triangle-fill me-2"></i>
  3550.                                     <span class="text-content" data-lang="es"><strong>Nunca vendemos</strong> tu información personal</span>
  3551.                                     <span class="text-content" data-lang="en" style="display:none;"><strong>We never sell</strong> your personal information</span>
  3552.                                 </div>
  3553.                                 <div class="info-item d-flex align-items-start mb-3">
  3554.                                     <i class="bi bi-hospital text-success mt-1 me-2"></i>
  3555.                                     <div>
  3556.                                         <strong class="text-dark">
  3557.                                             <span class="text-content" data-lang="es">Proveedores Médicos</span>
  3558.                                             <span class="text-content" data-lang="en" style="display:none;">Medical Providers</span>
  3559.                                         </strong>
  3560.                                         <p class="text-muted small mb-0">
  3561.                                             <span class="text-content" data-lang="es">Compartición con especialistas autorizados para tu tratamiento.</span>
  3562.                                             <span class="text-content" data-lang="en" style="display:none;">Sharing with authorized specialists for your treatment.</span>
  3563.                                         </p>
  3564.                                     </div>
  3565.                                 </div>
  3566.                                 <div class="info-item d-flex align-items-start">
  3567.                                     <i class="bi bi-balance text-primary mt-1 me-2"></i>
  3568.                                     <div>
  3569.                                         <strong class="text-dark">
  3570.                                             <span class="text-content" data-lang="es">Requerimientos Legales</span>
  3571.                                             <span class="text-content" data-lang="en" style="display:none;">Legal Requirements</span>
  3572.                                         </strong>
  3573.                                         <p class="text-muted small mb-0">
  3574.                                             <span class="text-content" data-lang="es">Cumplimiento de obligaciones legales y regulatorias.</span>
  3575.                                             <span class="text-content" data-lang="en" style="display:none;">Compliance with legal and regulatory obligations.</span>
  3576.                                         </p>
  3577.                                     </div>
  3578.                                 </div>
  3579.                             </div>
  3580.                         </div>
  3581.                     </div>
  3582.                 </div>
  3583.         
  3584.                 <!-- Tus derechos -->
  3585.                 <div class="col-lg-4 col-md-6">
  3586.                     <div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
  3587.                         <div class="card-body p-4">
  3588.                             <div class="d-flex align-items-center mb-3">
  3589.                                 <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;">
  3590.                                     <i class="bi bi-person-badge-fill text-danger fs-5"></i>
  3591.                                 </div>
  3592.                                 <h5 class="fw-bold text-dark mb-0">
  3593.                                     <span class="text-content" data-lang="es">Tus Derechos</span>
  3594.                                     <span class="text-content" data-lang="en" style="display:none;">Your Rights</span>
  3595.                                 </h5>
  3596.                             </div>
  3597.                             <div class="privacy-content">
  3598.                                 <div class="info-item d-flex align-items-start mb-3">
  3599.                                     <i class="bi bi-eye-fill text-info mt-1 me-2"></i>
  3600.                                     <div>
  3601.                                         <strong class="text-dark">
  3602.                                             <span class="text-content" data-lang="es">Acceso y Rectificación</span>
  3603.                                             <span class="text-content" data-lang="en" style="display:none;">Access and Rectification</span>
  3604.                                         </strong>
  3605.                                         <p class="text-muted small mb-0">
  3606.                                             <span class="text-content" data-lang="es">Consultar, actualizar o corregir tu información personal.</span>
  3607.                                             <span class="text-content" data-lang="en" style="display:none;">Consult, update or correct your personal information.</span>
  3608.                                         </p>
  3609.                                     </div>
  3610.                                 </div>
  3611.                                 <div class="info-item d-flex align-items-start mb-3">
  3612.                                     <i class="bi bi-file-earmark-arrow-down text-primary mt-1 me-2"></i>
  3613.                                     <div>
  3614.                                         <strong class="text-dark">
  3615.                                             <span class="text-content" data-lang="es">Portabilidad</span>
  3616.                                             <span class="text-content" data-lang="en" style="display:none;">Portability</span>
  3617.                                         </strong>
  3618.                                         <p class="text-muted small mb-0">
  3619.                                             <span class="text-content" data-lang="es">Solicitar copia de tus datos clínicos en formato digital.</span>
  3620.                                             <span class="text-content" data-lang="en" style="display:none;">Request a copy of your clinical data in digital format.</span>
  3621.                                         </p>
  3622.                                     </div>
  3623.                                 </div>
  3624.                                 <div class="info-item d-flex align-items-start">
  3625.                                     <i class="bi bi-x-circle-fill text-warning mt-1 me-2"></i>
  3626.                                     <div>
  3627.                                         <strong class="text-dark">
  3628.                                             <span class="text-content" data-lang="es">Revocación</span>
  3629.                                             <span class="text-content" data-lang="en" style="display:none;">Revocation</span>
  3630.                                         </strong>
  3631.                                         <p class="text-muted small mb-0">
  3632.                                             <span class="text-content" data-lang="es">Retirar consentimiento para tratamientos específicos.</span>
  3633.                                             <span class="text-content" data-lang="en" style="display:none;">Withdraw consent for specific treatments.</span>
  3634.                                         </p>
  3635.                                     </div>
  3636.                                 </div>
  3637.                             </div>
  3638.                         </div>
  3639.                     </div>
  3640.                 </div>
  3641.         
  3642.                 <!-- Cumplimiento legal -->
  3643.                 <div class="col-lg-4 col-md-6">
  3644.                     <div class="card privacy-card border-0 shadow-lg h-100 hover-lift">
  3645.                         <div class="card-body p-4">
  3646.                             <div class="d-flex align-items-center mb-3">
  3647.                                 <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;">
  3648.                                     <i class="bi bi-file-earmark-check-fill text-secondary fs-5"></i>
  3649.                                 </div>
  3650.                                 <h5 class="fw-bold text-dark mb-0">
  3651.                                     <span class="text-content" data-lang="es">Cumplimiento Legal</span>
  3652.                                     <span class="text-content" data-lang="en" style="display:none;">Legal Compliance</span>
  3653.                                 </h5>
  3654.                             </div>
  3655.                             <div class="privacy-content">
  3656.                                 <div class="compliance-badges mb-3">
  3657.                                     <span class="badge bg-primary bg-opacity-10 text-primary border border-primary me-2 mb-2">HIPAA</span>
  3658.                                     <span class="badge bg-success bg-opacity-10 text-success border border-success me-2 mb-2">GDPR</span>
  3659.                                     <span class="badge bg-info bg-opacity-10 text-info border border-info mb-2">LGPD</span>
  3660.                                 </div>
  3661.                                 <p class="text-muted small mb-0">
  3662.                                     <span class="text-content" data-lang="es">Cumplimos estrictamente con regulaciones internacionales de protección 
  3663.                                     de datos médicos, incluyendo HIPAA (EE.UU.), GDPR (Europa) y normativas 
  3664.                                     locales aplicables.</span>
  3665.                                     <span class="text-content" data-lang="en" style="display:none;">We strictly comply with international medical data protection 
  3666.                                     regulations, including HIPAA (USA), GDPR (Europe) and applicable 
  3667.                                     local regulations.</span>
  3668.                                 </p>
  3669.                             </div>
  3670.                         </div>
  3671.                     </div>
  3672.                 </div>
  3673.             </div>
  3674.         
  3675.             <!-- Footer de la política CORREGIDO -->
  3676.             <div class="text-center mt-5 pt-4 border-top">
  3677.                 <p class="text-muted small mb-2">
  3678.                     <span class="text-content" data-lang="es">
  3679.                         <i class="bi bi-info-circle me-1"></i>
  3680.                         Para ejercer tus derechos o consultas sobre privacidad, contacta con nuestra clínica en 
  3681.                         <a href="mailto:imagingprodallas@gmail.com" class="text-primary text-decoration-none">imagingprodallas@gmail.com</a>
  3682.                     </span>
  3683.                     <span class="text-content" data-lang="en" style="display:none;">
  3684.                         <i class="bi bi-info-circle me-1"></i>
  3685.                         To exercise your rights or privacy inquiries, contact our clinic at 
  3686.                         <a href="mailto:imagingprodallas@gmail.com" class="text-primary text-decoration-none">imagingprodallas@gmail.com</a>
  3687.                     </span>
  3688.                 </p>
  3689.             </div>
  3690.         </div>
  3692.         <style>
  3693.           .privacy-card {
  3694.               transition: all 0.3s ease;
  3695.               border: 1px solid transparent;
  3696.           }
  3697.           .hover-lift:hover {
  3698.               transform: translateY(-5px);
  3699.               box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
  3700.               border-color: #e9ecef;
  3701.           }
  3702.           .icon-wrapper {
  3703.               transition: transform 0.3s ease;
  3704.           }
  3705.           .privacy-card:hover .icon-wrapper {
  3706.               transform: scale(1.1);
  3707.           }
  3708.           .privacy-content .info-item {
  3709.               transition: all 0.3s ease;
  3710.               padding: 0.5rem;
  3711.               border-radius: 0.5rem;
  3712.           }
  3713.           .privacy-content .info-item:hover {
  3714.               background-color: rgba(13, 110, 253, 0.05);
  3715.           }
  3716.           .security-badge, .compliance-badges .badge {
  3717.               font-size: 0.75rem;
  3718.           }
  3720.         .badge-custom {
  3721.             background-color: rgba(13, 110, 253, 0.1);
  3722.             color: #0d6efd;
  3723.             border: 2px solid #0d6efd;
  3724.             font-size: clamp(0.875rem, 2vw, 1rem);
  3725.             padding: 0.5rem 1rem;
  3726.             border-radius: 50rem;
  3727.             display: inline-flex;
  3728.             align-items: center;
  3729.         }
  3730.         
  3731.         .privacidad-title {
  3732.             font-weight: 700;
  3733.             line-height: 1.2;
  3734.             color: #212529;
  3735.             font-size: clamp(1.75rem, 4.5vw, 3rem);
  3736.             position: relative;
  3737.         }
  3738.         
  3739.         .text-primary-custom {
  3740.             color: #0d6efd !important;
  3741.         }
  3742.         
  3743.         .icon-custom {
  3744.             margin-right: 0.5rem;
  3745.             color: #0dcaf0;
  3746.         }
  3747.         
  3748.         @media (max-width: 576px) {
  3749.             .badge-custom {
  3750.                 padding: 0.375rem 0.75rem;
  3751.             }
  3752.         }
  3753.       </style>
  3754.   </section>
  3757.   <section class="hero-section py-5 bg-white" id="terminos">
  3758.        <div class="container">
  3759.             <!-- Encabezado Mejorado -->
  3760.             <div class="text-center mb-5">
  3761.                 <div class="badge-custom mb-3">
  3762.                     <i class="bi bi-journal-text icon-custom"></i>
  3763.                     <span class="text-content" data-lang="es">Acuerdo Legal</span>
  3764.                     <span class="text-content" data-lang="en" style="display:none;">Legal Agreement</span>
  3765.                 </div>
  3766.         
  3767.                 <!-- Título principal -->
  3768.                 <h1 class="fw-bold text-dark mb-3 display-5">
  3769.                     <span class="text-content" data-lang="es">Términos de <span class="text-primary-custom">Uso</span></span>
  3770.                     <span class="text-content" data-lang="en" style="display:none;">Terms of <span class="text-primary-custom">Use</span></span>
  3771.                 </h1>
  3772.         
  3773.                 <p class="text-muted mb-3">
  3774.                     <span class="text-content" data-lang="es">
  3775.                         <i class="bi bi-clock-history me-1"></i>
  3776.                         Última actualización: 26 de septiembre de 2025
  3777.                     </span>
  3778.                     <span class="text-content" data-lang="en" style="display:none;">
  3779.                         <i class="bi bi-clock-history me-1"></i>
  3780.                         Last updated: September 26, 2025
  3781.                     </span>
  3782.                 </p>
  3783.                 <div class="row justify-content-center">
  3784.                     <div class="col-lg-8">
  3785.                         <p class="lead text-muted fs-5 lh-base">
  3786.                             <span class="text-content" data-lang="es">Al acceder y utilizar nuestros servicios digitales, aceptas cumplir con los siguientes 
  3787.                             términos y condiciones que rigen la relación entre <strong class="text-primary">ImagingPro</strong> 
  3788.                             y nuestros usuarios. Te recomendamos leer detenidamente esta información.</span>
  3789.                             <span class="text-content" data-lang="en" style="display:none;">By accessing and using our digital services, you agree to comply with the following 
  3790.                             terms and conditions that govern the relationship between <strong class="text-primary">ImagingPro</strong> 
  3791.                             and our users. We recommend reading this information carefully.</span>
  3792.                         </p>
  3793.                     </div>
  3794.                 </div>
  3795.             </div>
  3796.         
  3797.             <!-- Secciones Mejoradas -->
  3798.             <div class="row g-4">
  3799.                 <!-- Uso permitido -->
  3800.                 <div class="col-lg-4 col-md-6">
  3801.                     <div class="card terms-card border-0 shadow-lg h-100 hover-lift">
  3802.                         <div class="card-body p-4">
  3803.                             <div class="d-flex align-items-center mb-3">
  3804.                                 <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;">
  3805.                                     <i class="bi bi-check-circle-fill text-success fs-5"></i>
  3806.                                 </div>
  3807.                                 <h5 class="fw-bold text-dark mb-0">
  3808.                                     <span class="text-content" data-lang="es">Uso Permitido</span>
  3809.                                     <span class="text-content" data-lang="en" style="display:none;">Permitted Use</span>
  3810.                                 </h5>
  3811.                             </div>
  3812.                             <div class="terms-content">
  3813.                                 <div class="feature-item d-flex align-items-start mb-3">
  3814.                                     <i class="bi bi-person-check text-primary mt-1 me-2"></i>
  3815.                                     <div>
  3816.                                         <strong class="text-dark">
  3817.                                             <span class="text-content" data-lang="es">Acceso Autorizado</span>
  3818.                                             <span class="text-content" data-lang="en" style="display:none;">Authorized Access</span>
  3819.                                         </strong>
  3820.                                         <p class="text-muted small mb-0">
  3821.                                             <span class="text-content" data-lang="es">Exclusivo para pacientes, proveedores médicos y personal autorizado.</span>
  3822.                                             <span class="text-content" data-lang="en" style="display:none;">Exclusive for patients, medical providers and authorized personnel.</span>
  3823.                                         </p>
  3824.                                     </div>
  3825.                                 </div>
  3826.                                 <div class="feature-item d-flex align-items-start mb-3">
  3827.                                     <i class="bi bi-heart-pulse text-success mt-1 me-2"></i>
  3828.                                     <div>
  3829.                                         <strong class="text-dark">
  3830.                                             <span class="text-content" data-lang="es">Fines Clínicos</span>
  3831.                                             <span class="text-content" data-lang="en" style="display:none;">Clinical Purposes</span>
  3832.                                         </strong>
  3833.                                         <p class="text-muted small mb-0">
  3834.                                             <span class="text-content" data-lang="es">Uso destinado a gestión médica, diagnósticos y atención al paciente.</span>
  3835.                                             <span class="text-content" data-lang="en" style="display:none;">Use intended for medical management, diagnostics and patient care.</span>
  3836.                                         </p>
  3837.                                     </div>
  3838.                                 </div>
  3839.                                 <div class="feature-item d-flex align-items-start">
  3840.                                     <i class="bi bi-briefcase text-warning mt-1 me-2"></i>
  3841.                                     <div>
  3842.                                         <strong class="text-dark">
  3843.                                             <span class="text-content" data-lang="es">No Comercial</span>
  3844.                                             <span class="text-content" data-lang="en" style="display:none;">Non-Commercial</span>
  3845.                                         </strong>
  3846.                                         <p class="text-muted small mb-0">
  3847.                                             <span class="text-content" data-lang="es">Prohibido uso con fines comerciales o de reventa.</span>
  3848.                                             <span class="text-content" data-lang="en" style="display:none;">Commercial use or resale prohibited.</span>
  3849.                                         </p>
  3850.                                     </div>
  3851.                                 </div>
  3852.                             </div>
  3853.                         </div>
  3854.                     </div>
  3855.                 </div>
  3856.         
  3857.                 <!-- Prohibiciones -->
  3858.                 <div class="col-lg-4 col-md-6">
  3859.                     <div class="card terms-card border-0 shadow-lg h-100 hover-lift">
  3860.                         <div class="card-body p-4">
  3861.                             <div class="d-flex align-items-center mb-3">
  3862.                                 <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;">
  3863.                                     <i class="bi bi-slash-circle-fill text-danger fs-5"></i>
  3864.                                 </div>
  3865.                                 <h5 class="fw-bold text-dark mb-0">
  3866.                                     <span class="text-content" data-lang="es">Conductas Prohibidas</span>
  3867.                                     <span class="text-content" data-lang="en" style="display:none;">Prohibited Conduct</span>
  3868.                                 </h5>
  3869.                             </div>
  3870.                             <div class="terms-content">
  3871.                                 <div class="alert alert-danger border-0 small mb-3">
  3872.                                     <i class="bi bi-exclamation-triangle-fill me-2"></i>
  3873.                                     <span class="text-content" data-lang="es"><strong>Actividades restrictivas</strong> sujetas a acción legal</span>
  3874.                                     <span class="text-content" data-lang="en" style="display:none;"><strong>Restrictive activities</strong> subject to legal action</span>
  3875.                                 </div>
  3876.                                 <div class="prohibition-item d-flex align-items-start mb-3">
  3877.                                     <i class="bi bi-shield-exclamation text-danger mt-1 me-2"></i>
  3878.                                     <div>
  3879.                                         <strong class="text-dark">
  3880.                                             <span class="text-content" data-lang="es">Seguridad</span>
  3881.                                             <span class="text-content" data-lang="en" style="display:none;">Security</span>
  3882.                                         </strong>
  3883.                                         <p class="text-muted small mb-0">
  3884.                                             <span class="text-content" data-lang="es">Manipulación de datos, suplantación de identidad o vulneración de sistemas.</span>
  3885.                                             <span class="text-content" data-lang="en" style="display:none;">Data manipulation, identity theft or system breach.</span>
  3886.                                         </p>
  3887.                                     </div>
  3888.                                 </div>
  3889.                                 <div class="prohibition-item d-flex align-items-start mb-3">
  3890.                                     <i class="bi bi-robot text-warning mt-1 me-2"></i>
  3891.                                     <div>
  3892.                                         <strong class="text-dark">
  3893.                                             <span class="text-content" data-lang="es">Automatización</span>
  3894.                                             <span class="text-content" data-lang="en" style="display:none;">Automation</span>
  3895.                                         </strong>
  3896.                                         <p class="text-muted small mb-0">
  3897.                                             <span class="text-content" data-lang="es">Uso de bots, scrapers o herramientas automatizadas sin autorización.</span>
  3898.                                             <span class="text-content" data-lang="en" style="display:none;">Use of bots, scrapers or automated tools without authorization.</span>
  3899.                                         </p>
  3900.                                     </div>
  3901.                                 </div>
  3902.                                 <div class="prohibition-item d-flex align-items-start">
  3903.                                     <i class="bi bi-graph-down text-info mt-1 me-2"></i>
  3904.                                     <div>
  3905.                                         <strong class="text-dark">
  3906.                                             <span class="text-content" data-lang="es">Alteración</span>
  3907.                                             <span class="text-content" data-lang="en" style="display:none;">Alteration</span>
  3908.                                         </strong>
  3909.                                         <p class="text-muted small mb-0">
  3910.                                             <span class="text-content" data-lang="es">Modificación, reverse engineering o descompilación del software.</span>
  3911.                                             <span class="text-content" data-lang="en" style="display:none;">Modification, reverse engineering or software decompilation.</span>
  3912.                                         </p>
  3913.                                     </div>
  3914.                                 </div>
  3915.                             </div>
  3916.                         </div>
  3917.                     </div>
  3918.                 </div>
  3919.         
  3920.                 <!-- Propiedad intelectual -->
  3921.                 <div class="col-lg-4 col-md-6">
  3922.                     <div class="card terms-card border-0 shadow-lg h-100 hover-lift">
  3923.                         <div class="card-body p-4">
  3924.                             <div class="d-flex align-items-center mb-3">
  3925.                                 <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;">
  3926.                                     <i class="bi bi-c-circle-fill text-warning fs-5"></i>
  3927.                                 </div>
  3928.                                 <h5 class="fw-bold text-dark mb-0">
  3929.                                     <span class="text-content" data-lang="es">Propiedad Intelectual</span>
  3930.                                     <span class="text-content" data-lang="en" style="display:none;">Intellectual Property</span>
  3931.                                 </h5>
  3932.                             </div>
  3933.                             <div class="terms-content">
  3934.                                 <div class="intellectual-badges mb-3">
  3935.                                     <span class="badge bg-primary bg-opacity-10 text-primary border border-primary me-1 mb-2">© Copyright</span>
  3936.                                     <span class="badge bg-success bg-opacity-10 text-success border border-success me-1 mb-2">
  3937.                                         <span class="text-content" data-lang="es">Marca</span>
  3938.                                         <span class="text-content" data-lang="en" style="display:none;">Trademark</span>
  3939.                                     </span>
  3940.                                     <span class="badge bg-info bg-opacity-10 text-info border border-info mb-2">® Registrado</span>
  3941.                                 </div>
  3942.                                 <div class="property-item d-flex align-items-start mb-3">
  3943.                                     <i class="bi bi-file-text text-primary mt-1 me-2"></i>
  3944.                                     <div>
  3945.                                         <strong class="text-dark">
  3946.                                             <span class="text-content" data-lang="es">Contenido Protegido</span>
  3947.                                             <span class="text-content" data-lang="en" style="display:none;">Protected Content</span>
  3948.                                         </strong>
  3949.                                         <p class="text-muted small mb-0">
  3950.                                             <span class="text-content" data-lang="es">Textos, imágenes, logotipos y diseños son propiedad de <strong>ImagingPro</strong>.</span>
  3951.                                             <span class="text-content" data-lang="en" style="display:none;">Texts, images, logos and designs are property of <strong>ImagingPro</strong>.</span>
  3952.                                         </p>
  3953.                                     </div>
  3954.                                 </div>
  3955.                                 <div class="property-item d-flex align-items-start">
  3956.                                     <i class="bi bi-copy text-muted mt-1 me-2"></i>
  3957.                                     <div>
  3958.                                         <strong class="text-dark">
  3959.                                             <span class="text-content" data-lang="es">Derechos Reservados</span>
  3960.                                             <span class="text-content" data-lang="en" style="display:none;">All Rights Reserved</span>
  3961.                                         </strong>
  3962.                                         <p class="text-muted small mb-0">
  3963.                                             <span class="text-content" data-lang="es">Prohibida la reproducción total o parcial sin autorización expresa.</span>
  3964.                                             <span class="text-content" data-lang="en" style="display:none;">Total or partial reproduction prohibited without express authorization.</span>
  3965.                                         </p>
  3966.                                     </div>
  3967.                                 </div>
  3968.                             </div>
  3969.                         </div>
  3970.                     </div>
  3971.                 </div>
  3972.         
  3973.                 <!-- Responsabilidad -->
  3974.                 <div class="col-lg-4 col-md-6">
  3975.                     <div class="card terms-card border-0 shadow-lg h-100 hover-lift">
  3976.                         <div class="card-body p-4">
  3977.                             <div class="d-flex align-items-center mb-3">
  3978.                                 <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;">
  3979.                                     <i class="bi bi-shield-exclamation text-info fs-5"></i>
  3980.                                 </div>
  3981.                                 <h5 class="fw-bold text-dark mb-0">
  3982.                                     <span class="text-content" data-lang="es">Limitación de Responsabilidad</span>
  3983.                                     <span class="text-content" data-lang="en" style="display:none;">Liability Limitation</span>
  3984.                                 </h5>
  3985.                             </div>
  3986.                             <div class="terms-content">
  3987.                                 <div class="alert alert-info border-0 small mb-3">
  3988.                                     <i class="bi bi-info-circle-fill me-2"></i>
  3989.                                     <span class="text-content" data-lang="es">Servicio proporcionado "tal cual"</span>
  3990.                                     <span class="text-content" data-lang="en" style="display:none;">Service provided "as is"</span>
  3991.                                 </div>
  3992.                                 <div class="responsibility-item d-flex align-items-start mb-3">
  3993.                                     <i class="bi bi-wifi-off text-secondary mt-1 me-2"></i>
  3994.                                     <div>
  3995.                                         <strong class="text-dark">
  3996.                                             <span class="text-content" data-lang="es">Disponibilidad</span>
  3997.                                             <span class="text-content" data-lang="en" style="display:none;">Availability</span>
  3998.                                         </strong>
  3999.                                         <p class="text-muted small mb-0">
  4000.                                             <span class="text-content" data-lang="es">No garantizamos disponibilidad continua ni estamos obligados a mantener el servicio.</span>
  4001.                                             <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>
  4002.                                         </p>
  4003.                                     </div>
  4004.                                 </div>
  4005.                                 <div class="responsibility-item d-flex align-items-start mb-3">
  4006.                                     <i class="bi bi-bug text-warning mt-1 me-2"></i>
  4007.                                     <div>
  4008.                                         <strong class="text-dark">
  4009.                                             <span class="text-content" data-lang="es">Errores Técnicos</span>
  4010.                                             <span class="text-content" data-lang="en" style="display:none;">Technical Errors</span>
  4011.                                         </strong>
  4012.                                         <p class="text-muted small mb-0">
  4013.                                             <span class="text-content" data-lang="es">Exentos de responsabilidad por interrupciones, bugs o fallos del sistema.</span>
  4014.                                             <span class="text-content" data-lang="en" style="display:none;">Exempt from liability for interruptions, bugs or system failures.</span>
  4015.                                         </p>
  4016.                                     </div>
  4017.                                 </div>
  4018.                                 <div class="responsibility-item d-flex align-items-start">
  4019.                                     <i class="bi bi-person-x text-danger mt-1 me-2"></i>
  4020.                                     <div>
  4021.                                         <strong class="text-dark">
  4022.                                             <span class="text-content" data-lang="es">Mal Uso</span>
  4023.                                             <span class="text-content" data-lang="en" style="display:none;">Misuse</span>
  4024.                                         </strong>
  4025.                                         <p class="text-muted small mb-0">
  4026.                                             <span class="text-content" data-lang="es">No nos hacemos responsables por uso inadecuado por parte del usuario.</span>
  4027.                                             <span class="text-content" data-lang="en" style="display:none;">We are not responsible for inappropriate use by the user.</span>
  4028.                                         </p>
  4029.                                     </div>
  4030.                                 </div>
  4031.                             </div>
  4032.                         </div>
  4033.                     </div>
  4034.                 </div>
  4035.         
  4036.                 <!-- Modificaciones -->
  4037.                 <div class="col-lg-4 col-md-6">
  4038.                     <div class="card terms-card border-0 shadow-lg h-100 hover-lift">
  4039.                         <div class="card-body p-4">
  4040.                             <div class="d-flex align-items-center mb-3">
  4041.                                 <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;">
  4042.                                     <i class="bi bi-arrow-repeat text-primary fs-5"></i>
  4043.                                 </div>
  4044.                                 <h5 class="fw-bold text-dark mb-0">
  4045.                                     <span class="text-content" data-lang="es">Modificaciones</span>
  4046.                                     <span class="text-content" data-lang="en" style="display:none;">Modifications</span>
  4047.                                 </h5>
  4048.                             </div>
  4049.                             <div class="terms-content">
  4050.                                 <div class="modification-item d-flex align-items-start mb-3">
  4051.                                     <i class="bi bi-megaphone text-warning mt-1 me-2"></i>
  4052.                                     <div>
  4053.                                         <strong class="text-dark">
  4054.                                             <span class="text-content" data-lang="es">Actualizaciones</span>
  4055.                                             <span class="text-content" data-lang="en" style="display:none;">Updates</span>
  4056.                                         </strong>
  4057.                                         <p class="text-muted small mb-0">
  4058.                                             <span class="text-content" data-lang="es">Nos reservamos el derecho de modificar estos términos en cualquier momento.</span>
  4059.                                             <span class="text-content" data-lang="en" style="display:none;">We reserve the right to modify these terms at any time.</span>
  4060.                                         </p>
  4061.                                     </div>
  4062.                                 </div>
  4063.                                 <div class="modification-item d-flex align-items-start mb-3">
  4064.                                     <i class="bi bi-bell text-info mt-1 me-2"></i>
  4065.                                     <div>
  4066.                                         <strong class="text-dark">
  4067.                                             <span class="text-content" data-lang="es">Notificación</span>
  4068.                                             <span class="text-content" data-lang="en" style="display:none;">Notification</span>
  4069.                                         </strong>
  4070.                                         <p class="text-muted small mb-0">
  4071.                                             <span class="text-content" data-lang="es">Los cambios pueden realizarse sin notificación previa obligatoria.</span>
  4072.                                             <span class="text-content" data-lang="en" style="display:none;">Changes may be made without mandatory prior notification.</span>
  4073.                                         </p>
  4074.                                     </div>
  4075.                                 </div>
  4076.                                 <div class="modification-item d-flex align-items-start">
  4077.                                     <i class="bi bi-eye text-success mt-1 me-2"></i>
  4078.                                     <div>
  4079.                                         <strong class="text-dark">
  4080.                                             <span class="text-content" data-lang="es">Vigilancia</span>
  4081.                                             <span class="text-content" data-lang="en" style="display:none;">Monitoring</span>
  4082.                                         </strong>
  4083.                                         <p class="text-muted small mb-0">
  4084.                                             <span class="text-content" data-lang="es">Recomendamos revisar periódicamente los términos de uso vigentes.</span>
  4085.                                             <span class="text-content" data-lang="en" style="display:none;">We recommend periodically reviewing current terms of use.</span>
  4086.                                         </p>
  4087.                                     </div>
  4088.                                 </div>
  4089.                             </div>
  4090.                         </div>
  4091.                     </div>
  4092.                 </div>
  4093.         
  4094.                 <!-- Jurisdicción -->
  4095.                 <div class="col-lg-4 col-md-6">
  4096.                     <div class="card terms-card border-0 shadow-lg h-100 hover-lift">
  4097.                         <div class="card-body p-4">
  4098.                             <div class="d-flex align-items-center mb-3">
  4099.                                 <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;">
  4100.                                     <i class="bi bi-building text-secondary fs-5"></i>
  4101.                                 </div>
  4102.                                 <h5 class="fw-bold text-dark mb-0">
  4103.                                     <span class="text-content" data-lang="es">Jurisdicción y Ley Aplicable</span>
  4104.                                     <span class="text-content" data-lang="en" style="display:none;">Jurisdiction and Applicable Law</span>
  4105.                                 </h5>
  4106.                             </div>
  4107.                             <div class="terms-content">
  4108.                                 <div class="jurisdiction-badges mb-3">
  4109.                                     <span class="badge bg-primary bg-opacity-10 text-primary border border-primary me-1 mb-2">Florida</span>
  4110.                                     <span class="badge bg-success bg-opacity-10 text-success border border-success me-1 mb-2">
  4111.                                         <span class="text-content" data-lang="es">EE.UU.</span>
  4112.                                         <span class="text-content" data-lang="en" style="display:none;">USA</span>
  4113.                                     </span>
  4114.                                     <span class="badge bg-info bg-opacity-10 text-info border border-info mb-2">
  4115.                                         <span class="text-content" data-lang="es">Federal</span>
  4116.                                         <span class="text-content" data-lang="en" style="display:none;">Federal</span>
  4117.                                     </span>
  4118.                                 </div>
  4119.                                 <div class="jurisdiction-item d-flex align-items-start mb-3">
  4120.                                     <i class="bi bi-geo-alt text-primary mt-1 me-2"></i>
  4121.                                     <div>
  4122.                                         <strong class="text-dark">
  4123.                                             <span class="text-content" data-lang="es">Ley Aplicable</span>
  4124.                                             <span class="text-content" data-lang="en" style="display:none;">Applicable Law</span>
  4125.                                         </strong>
  4126.                                         <p class="text-muted small mb-0">
  4127.                                             <span class="text-content" data-lang="es">Estos términos se rigen por las leyes del Estado de Florida.</span>
  4128.                                             <span class="text-content" data-lang="en" style="display:none;">These terms are governed by the laws of the State of Florida.</span>
  4129.                                         </p>
  4130.                                     </div>
  4131.                                 </div>
  4132.                                 <div class="jurisdiction-item d-flex align-items-start">
  4133.                                     <i class="bi bi-house-door text-success mt-1 me-2"></i>
  4134.                                     <div>
  4135.                                         <strong class="text-dark">
  4136.                                             <span class="text-content" data-lang="es">Foro Competente</span>
  4137.                                             <span class="text-content" data-lang="en" style="display:none;">Competent Forum</span>
  4138.                                         </strong>
  4139.                                         <p class="text-muted small mb-0">
  4140.                                             <span class="text-content" data-lang="es">Tribunales de Miami-Dade, Florida, tendrán jurisdicción exclusiva.</span>
  4141.                                             <span class="text-content" data-lang="en" style="display:none;">Courts of Miami-Dade, Florida, will have exclusive jurisdiction.</span>
  4142.                                         </p>
  4143.                                     </div>
  4144.                                 </div>
  4145.                             </div>
  4146.                         </div>
  4147.                     </div>
  4148.                 </div>
  4149.             </div>
  4150.         
  4151.             <!-- Footer de los términos -->
  4152.     
  4153.             <div class="text-center mt-5 pt-4 border-top">
  4154.                 <div class="alert alert-light border small">
  4155.                     <span class="text-content" data-lang="es">
  4156.                         <i class="bi bi-lightbulb text-warning me-2"></i>
  4157.                         <strong>Importante:</strong> El uso continuado de nuestros servicios tras cualquier modificación 
  4158.                         constituye aceptación de los nuevos términos. Para consultas legales, contacta a 
  4159.                         <a href="mailto:imagingprodallas@gmail.com" class="text-primary text-decoration-none">imagingprodallas@gmail.com</a>
  4160.                     </span>
  4161.                     <span class="text-content" data-lang="en" style="display:none;">
  4162.                         <i class="bi bi-lightbulb text-warning me-2"></i>
  4163.                         <strong>Important:</strong> Continued use of our services after any modification 
  4164.                         constitutes acceptance of the new terms. For legal inquiries, contact 
  4165.                         <a href="mailto:imagingprodallas@gmail.com" class="text-primary text-decoration-none">imagingprodallas@gmail.com</a>
  4166.                     </span>
  4167.                 </div>
  4168.             </div>
  4169.         </div>
  4171.         <style>
  4172.           .terms-card {
  4173.               transition: all 0.3s ease;
  4174.               border: 1px solid transparent;
  4175.           }
  4176.           .hover-lift:hover {
  4177.               transform: translateY(-5px);
  4178.               box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
  4179.               border-color: #e9ecef;
  4180.           }
  4181.           .icon-wrapper {
  4182.               transition: transform 0.3s ease;
  4183.           }
  4184.           .terms-card:hover .icon-wrapper {
  4185.               transform: scale(1.1);
  4186.           }
  4187.           .terms-content .feature-item,
  4188.           .terms-content .prohibition-item,
  4189.           .terms-content .property-item,
  4190.           .terms-content .responsibility-item,
  4191.           .terms-content .modification-item,
  4192.           .terms-content .jurisdiction-item {
  4193.               transition: all 0.3s ease;
  4194.               padding: 0.5rem;
  4195.               border-radius: 0.5rem;
  4196.           }
  4197.           .terms-content .feature-item:hover,
  4198.           .terms-content .prohibition-item:hover,
  4199.           .terms-content .property-item:hover,
  4200.           .terms-content .responsibility-item:hover,
  4201.           .terms-content .modification-item:hover,
  4202.           .terms-content .jurisdiction-item:hover {
  4203.               background-color: rgba(13, 110, 253, 0.05);
  4204.           }
  4205.           .intellectual-badges .badge,
  4206.           .jurisdiction-badges .badge {
  4207.               font-size: 0.7rem;
  4208.           }
  4210.           .badge-custom {
  4211.             background-color: rgba(13, 110, 253, 0.1);
  4212.             color: #0d6efd;
  4213.             border: 2px solid #0d6efd;
  4214.             font-size: clamp(0.875rem, 2vw, 1rem);
  4215.             padding: 0.5rem 1rem;
  4216.             border-radius: 50rem;
  4217.             display: inline-flex;
  4218.             align-items: center;
  4219.         }
  4220.         
  4221.         .terminos-title {
  4222.             font-weight: 700;
  4223.             line-height: 1.2;
  4224.             color: #212529;
  4225.             font-size: clamp(1.75rem, 4.5vw, 3rem);
  4226.             position: relative;
  4227.         }
  4228.         
  4229.         .text-primary-custom {
  4230.             color: #0d6efd !important;
  4231.         }
  4232.         
  4233.         .icon-custom {
  4234.             margin-right: 0.5rem;
  4235.             color: #0dcaf0;
  4236.         }
  4237.         
  4238.         @media (max-width: 576px) {
  4239.             .badge-custom {
  4240.                 padding: 0.375rem 0.75rem;
  4241.             }
  4242.         }
  4243.       </style>
  4244.     </section>
  4247.     {# Modal Paso 1 #}
  4248.     <div class="modal fade" id="agendarCitaModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  4249.         <div class="modal-dialog modal-lg modal-dialog-centered">
  4250.             <div class="modal-content">
  4251.                 <div class="modal-header">
  4252.                     <h5 class="modal-title d-flex align-items-center">
  4253.                         <i class="bi bi-journal-text me-2 text-primary"></i>
  4254.                         <span class="text-content" data-lang="es">Agendar Cita Médica</span>
  4255.                         <span class="text-content" data-lang="en" style="display:none;">Schedule Medical Appointment</span>
  4256.                     </h5>
  4257.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
  4258.                 </div>
  4259.     
  4260.                 <div class="modal-body">
  4261.                     <div class="d-flex align-items-center mb-4">
  4262.                         <span class="badge bg-primary me-2">
  4263.                             <span class="text-content" data-lang="es">Paso 1 de 3</span>
  4264.                             <span class="text-content" data-lang="en" style="display:none;">Step 1 of 3</span>
  4265.                         </span>
  4266.                         <span class="text-muted">
  4267.                             <span class="text-content" data-lang="es">Datos personales</span>
  4268.                             <span class="text-content" data-lang="en" style="display:none;">Personal information</span>
  4269.                         </span>
  4270.                     </div>
  4271.     
  4272.                     <form id="wizardStep1Form" class="needs-validation" novalidate>
  4273.                         <div class="row g-3">
  4274.                             <div class="col-sm-6">
  4275.                                 <label for="firstName" class="form-label">
  4276.                                     <span class="text-content" data-lang="es">Nombre</span>
  4277.                                     <span class="text-content" data-lang="en" style="display:none;">First Name</span>
  4278.                                 </label>
  4279.                                 <input type="text" id="firstName" name="firstName" class="form-control" 
  4280.                                     placeholder="Tu nombre" required minlength="4" data-lang-es="Tu nombre" data-lang-en="Your name">
  4281.                                 <div class="invalid-feedback">
  4282.                                     <span class="text-content" data-lang="es">Por favor, ingresa tu nombre (mínimo 4 caracteres).</span>
  4283.                                     <span class="text-content" data-lang="en" style="display:none;">Please enter your name (minimum 4 characters).</span>
  4284.                                 </div>
  4285.                             </div>
  4286.     
  4287.                             <div class="col-sm-6">
  4288.                                 <label for="lastName" class="form-label">
  4289.                                     <span class="text-content" data-lang="es">Apellidos</span>
  4290.                                     <span class="text-content" data-lang="en" style="display:none;">Last Name</span>
  4291.                                 </label>
  4292.                                 <input type="text" id="lastName" name="lastName" class="form-control" 
  4293.                                     placeholder="Tus apellidos" required minlength="4" data-lang-es="Tus apellidos" data-lang-en="Your last name">
  4294.                                 <div class="invalid-feedback">
  4295.                                     <span class="text-content" data-lang="es">Por favor, ingresa tus apellidos (mínimo 4 caracteres).</span>
  4296.                                     <span class="text-content" data-lang="en" style="display:none;">Please enter your last name (minimum 4 characters).</span>
  4297.                                 </div>
  4298.                             </div>
  4299.     
  4300.                             <div class="col-sm-6">
  4301.                                 <label for="birthDate" class="form-label">
  4302.                                     <span class="text-content" data-lang="es">Fecha de nacimiento</span>
  4303.                                     <span class="text-content" data-lang="en" style="display:none;">Birth date</span>
  4304.                                 </label>
  4305.                             
  4306.                                 <input
  4307.                                     type="date"
  4308.                                     id="birthDate"
  4309.                                     name="birthDate"
  4310.                                     class="form-control"
  4311.                                     required
  4312.                                     max="{{ 'now -5 years'|date('Y-m-d') }}"
  4313.                                 >
  4314.                             
  4315.                                 <div class="invalid-feedback">
  4316.                                     <span class="text-content" data-lang="es">
  4317.                                         El paciente debe tener al menos 5 años de edad.
  4318.                                     </span>
  4319.                                     <span class="text-content" data-lang="en" style="display:none;">
  4320.                                         The patient must be at least 5 years old.
  4321.                                     </span>
  4322.                                 </div>
  4323.                             </div>
  4325.     
  4326.                             <div class="col-sm-6">
  4327.                                 <label for="phone" class="form-label">
  4328.                                     <span class="text-content" data-lang="es">Teléfono</span>
  4329.                                     <span class="text-content" data-lang="en" style="display:none;">Phone</span>
  4330.                                 </label>
  4331.                                 <input type="tel" id="phone" name="phone" class="form-control" 
  4332.                                     placeholder="+15555555555" required 
  4333.                                     pattern="^\+?[0-9]{10,15}$"
  4334.                                     minlength="10" maxlength="16" data-lang-es="+15555555555" data-lang-en="+15555555555">
  4335.                                 <div class="invalid-feedback">
  4336.                                     <span class="text-content" data-lang="es">Ingresa un teléfono válido (10-15 dígitos, opcional + al inicio).</span>
  4337.                                     <span class="text-content" data-lang="en" style="display:none;">Enter a valid phone number (10-15 digits, optional + at the beginning).</span>
  4338.                                 </div>
  4339.                             </div>
  4340.                             
  4341.                             <div class="col-12">
  4342.                                 <label for="email" class="form-label">
  4343.                                     <span class="text-content" data-lang="es">Correo electrónico</span>
  4344.                                     <span class="text-content" data-lang="en" style="display:none;">Email</span>
  4345.                                 </label>
  4346.                                 <input type="email" id="email" name="email" class="form-control" 
  4347.                                     placeholder="ejemplo@dominio.com" required data-lang-es="ejemplo@dominio.com" data-lang-en="example@domain.com">
  4348.                                 <div class="invalid-feedback" id="email-error-message">
  4349.                                     <!-- Mensaje de error se insertará aquí -->
  4350.                                 </div>
  4351.                             </div>
  4352.     
  4353.                             <div class="col-12 mt-2">
  4354.                                 <div class="form-check">
  4355.                                     <input class="form-check-input" type="checkbox" id="noEmailCheckbox">
  4356.                                     <label class="form-check-label fw-semibold text-warning d-flex align-items-center" for="noEmailCheckbox">
  4357.                                         <i class="fas fa-exclamation-circle me-1"></i>
  4358.                                         <span class="text-content" data-lang="es">No tengo correo electrónico</span>
  4359.                                         <span class="text-content" data-lang="en" style="display:none;">I don't have an email</span>
  4360.                                     </label>
  4361.                                 </div>
  4362.                                 <div id="noEmailInfo" class="small text-muted mt-1" style="display: none; padding-left: 1.75rem;">
  4363.                                     <span class="text-content" data-lang="es">Se generará un correo automáticamente para tu cita.</span>
  4364.                                     <span class="text-content" data-lang="en" style="display:none;">An email will be automatically generated for your appointment.</span>
  4365.                                 </div>
  4366.                             </div>
  4367.                         </div>
  4368.                     </form>
  4369.                 </div>
  4370.     
  4371.                 <div class="modal-footer">
  4372.                     <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
  4373.                         <span class="text-content" data-lang="es">Cancelar</span>
  4374.                         <span class="text-content" data-lang="en" style="display:none;">Cancel</span>
  4375.                     </button>
  4376.                     <button type="button" id="nextBtn" class="btn btn-primary" disabled>
  4377.                         <span class="text-content" data-lang="es">Siguiente</span>
  4378.                         <span class="text-content" data-lang="en" style="display:none;">Next</span>
  4379.                     </button>
  4380.                 </div>
  4381.             </div>
  4382.         </div>
  4383.     </div>
  4384.     
  4385.     {# Modal Paso 2 #}
  4386.     <div class="modal fade" id="agendarCitaPaso2" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  4387.         <div class="modal-dialog modal-lg modal-dialog-centered">
  4388.             <div class="modal-content">
  4389.                 <div class="modal-header">
  4390.                     <h5 class="modal-title d-flex align-items-center">
  4391.                         <i class="bi bi-clipboard-check me-2 text-primary"></i>
  4392.                         <span class="text-content" data-lang="es">Agendar Cita Médica</span>
  4393.                         <span class="text-content" data-lang="en" style="display:none;">Schedule Medical Appointment</span>
  4394.                     </h5>
  4395.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
  4396.                 </div>
  4397.     
  4398.                 <div class="modal-body">
  4399.                     <div class="d-flex align-items-center mb-4">
  4400.                         <span class="badge bg-primary me-2">
  4401.                             <span class="text-content" data-lang="es">Paso 2 de 3</span>
  4402.                             <span class="text-content" data-lang="en" style="display:none;">Step 2 of 3</span>
  4403.                         </span>
  4404.                         <span class="text-muted">
  4405.                             <span class="text-content" data-lang="es">Selecciona el tipo de estudio</span>
  4406.                             <span class="text-content" data-lang="en" style="display:none;">Select study type</span>
  4407.                         </span>
  4408.                     </div>
  4409.     
  4410.                     <form id="wizardStep2Form" class="needs-validation" novalidate>
  4411.                         <div class="mb-3">
  4412.                             <label for="studyType" class="form-label fw-semibold">
  4413.                                 <span class="text-content" data-lang="es">Tipo de Estudio</span>
  4414.                                 <span class="text-content" data-lang="en" style="display:none;">Study Type</span>
  4415.                             </label>
  4416.                             <select id="studyType" name="studyType" class="form-select" required>
  4417.                                 <option value="" selected disabled data-lang-es="Selecciona el tipo de estudio *" data-lang-en="Select study type *">
  4418.                                     Selecciona el tipo de estudio *
  4419.                                 </option>
  4420.                                 
  4421.                                 <!-- Ultrasonidos -->
  4422.                                 <option value="ultrasonido-abdominal" data-lang-es="Ultrasonido abdominal" data-lang-en="Abdominal ultrasound">
  4423.                                     Ultrasonido abdominal
  4424.                                 </option>
  4425.                                 <option value="ultrasonido-mama" data-lang-es="Ultrasonido de mama" data-lang-en="Breast ultrasound">
  4426.                                     Ultrasonido de mama
  4427.                                 </option>
  4428.                                 <option value="ecocardiograma" data-lang-es="Ecocardiograma" data-lang-en="Echocardiogram">
  4429.                                     Ecocardiograma
  4430.                                 </option>
  4431.                                 <option value="ultrasonido-intravascular" data-lang-es="Ultrasonido intravascular (IVU)" data-lang-en="Intravascular ultrasound (IVU)">
  4432.                                     Ultrasonido intravascular (IVU)
  4433.                                 </option>
  4434.                                 <option value="ultrasonido-musculoesqueletico" data-lang-es="Ultrasonido musculoesquelético" data-lang-en="Musculoskeletal ultrasound">
  4435.                                     Ultrasonido musculoesquelético
  4436.                                 </option>
  4437.                                 <option value="ultrasonido-obstetrico" data-lang-es="Ultrasonido obstétrico" data-lang-en="Obstetric ultrasound">
  4438.                                     Ultrasonido obstétrico
  4439.                                 </option>
  4440.                                 <option value="ultrasonido-pelvico" data-lang-es="Ultrasonido pélvico" data-lang-en="Pelvic ultrasound">
  4441.                                     Ultrasonido pélvico
  4442.                                 </option>
  4443.                                 <option value="ultrasonido-vascular-periferico" data-lang-es="Ultrasonido vascular periférico" data-lang-en="Peripheral vascular ultrasound">
  4444.                                     Ultrasonido vascular periférico
  4445.                                 </option>
  4446.                                 <option value="ultrasonido-prostata" data-lang-es="Ultrasonido de próstata" data-lang-en="Prostate ultrasound">
  4447.                                     Ultrasonido de próstata
  4448.                                 </option>
  4449.                                 <option value="ultrasonido-renal" data-lang-es="Ultrasonido renal" data-lang-en="Renal ultrasound">
  4450.                                     Ultrasonido renal
  4451.                                 </option>
  4452.                                 <option value="ultrasonido-escrotal" data-lang-es="Ultrasonido escrotal" data-lang-en="Scrotal ultrasound">
  4453.                                     Ultrasonido escrotal
  4454.                                 </option>
  4455.                                 <option value="ultrasonido-tiroideo" data-lang-es="Ultrasonido tiroideo" data-lang-en="Thyroid ultrasound">
  4456.                                     Ultrasonido tiroideo
  4457.                                 </option>
  4458.                                 <option value="ultrasonido-vascular" data-lang-es="Ultrasonido vascular" data-lang-en="Vascular ultrasound">
  4459.                                     Ultrasonido vascular
  4460.                                 </option>
  4461.                                 
  4462.                                 <!-- Radiografía -->
  4463.                                 <option value="radiografia" data-lang-es="Radiografía" data-lang-en="Radiography">
  4464.                                     Radiografía
  4465.                                 </option>
  4466.     
  4467.                                 <!-- Anomalías en el flujo sanguíneo -->
  4468.                                 <option value="arteriografia-venografia" data-lang-es="Arteriografía y venografía" data-lang-en="Arteriography and venography">
  4469.                                     Arteriografía y venografía
  4470.                                 </option>
  4471.                                 
  4472.                                 <!-- Otros estudios que tenías originalmente -->
  4473.                                 <option value="rayos-x" data-lang-es="Rayos X Digital" data-lang-en="Digital X-Ray">
  4474.                                     Rayos X Digital
  4475.                                 </option>
  4476.                                 <option value="tomografia" data-lang-es="Tomografía Computarizada" data-lang-en="Computed Tomography">
  4477.                                     Tomografía Computarizada
  4478.                                 </option>
  4479.                                 <option value="resonancia" data-lang-es="Resonancia Magnética" data-lang-en="Magnetic Resonance">
  4480.                                     Resonancia Magnética
  4481.                                 </option>
  4482.                                 <option value="mamografia" data-lang-es="Mamografía Digital" data-lang-en="Digital Mammography">
  4483.                                     Mamografía Digital
  4484.                                 </option>
  4485.                                 <option value="nuclear" data-lang-es="Medicina Nuclear" data-lang-en="Nuclear Medicine">
  4486.                                     Medicina Nuclear
  4487.                                 </option>
  4488.                             </select>
  4489.                             <div class="invalid-feedback">
  4490.                                 <span class="text-content" data-lang="es">Por favor, selecciona un tipo de estudio.</span>
  4491.                                 <span class="text-content" data-lang="en" style="display:none;">Please select a study type.</span>
  4492.                             </div>
  4493.                         </div>
  4494.     
  4495.                         <div class="mb-3">
  4496.                             <label for="observaciones" class="form-label fw-semibold">
  4497.                                 <span class="text-content" data-lang="es">Observaciones adicionales</span>
  4498.                                 <span class="text-content" data-lang="en" style="display:none;">Additional observations</span>
  4499.                             </label>
  4500.                             <textarea id="observaciones" name="observaciones" class="form-control" rows="3" 
  4501.                                 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>
  4502.                         </div>
  4503.                     </form>
  4504.                 </div>
  4505.     
  4506.                 <div class="modal-footer">
  4507.                     <button type="button" class="btn btn-outline-secondary" id="prevStepBtn">
  4508.                         <span class="text-content" data-lang="es">Anterior</span>
  4509.                         <span class="text-content" data-lang="en" style="display:none;">Previous</span>
  4510.                     </button>
  4511.                     <button type="button" class="btn btn-primary" id="nextStepBtn" disabled>
  4512.                         <span class="text-content" data-lang="es">Siguiente</span>
  4513.                         <span class="text-content" data-lang="en" style="display:none;">Next</span>
  4514.                     </button>
  4515.                 </div>
  4516.             </div>
  4517.         </div>
  4518.     </div>
  4519.     
  4520.     {# Modal Paso 3 #}
  4521.     <div class="modal fade" id="agendarCitaPaso3" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  4522.         <div class="modal-dialog modal-lg modal-dialog-centered">
  4523.             <div class="modal-content">
  4524.                 <div class="modal-header">
  4525.                     <h5 class="modal-title d-flex align-items-center">
  4526.                         <i class="bi bi-calendar-check me-2 text-primary"></i>
  4527.                         <span class="text-content" data-lang="es">Confirmar Cita Médica</span>
  4528.                         <span class="text-content" data-lang="en" style="display:none;">Confirm Medical Appointment</span>
  4529.                     </h5>
  4530.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
  4531.                 </div>
  4532.     
  4533.                 <div class="modal-body">
  4534.                     <div class="d-flex align-items-center mb-4">
  4535.                         <span class="badge bg-primary me-2">
  4536.                             <span class="text-content" data-lang="es">Paso 3 de 3</span>
  4537.                             <span class="text-content" data-lang="en" style="display:none;">Step 3 of 3</span>
  4538.                         </span>
  4539.                         <span class="text-muted">
  4540.                             <span class="text-content" data-lang="es">Fecha y Hora</span>
  4541.                             <span class="text-content" data-lang="en" style="display:none;">Date and Time</span>
  4542.                         </span>
  4543.                     </div>
  4544.     
  4545.                     <form id="wizardStep3Form" class="needs-validation" novalidate>
  4546.                         <div class="row g-3 mb-4">
  4547.                             <div class="col-sm-6">
  4548.                                 <label for="preferredDate" class="form-label">
  4549.                                     <span class="text-content" data-lang="es">Fecha preferida</span>
  4550.                                     <span class="text-content" data-lang="en" style="display:none;">Preferred Date</span>
  4551.                                 </label>
  4552.                                 <input type="date" id="preferredDate" name="preferredDate" min="{{ "now"|date("Y-m-d") }}" class="form-control" required>
  4553.                                 <div class="invalid-feedback">
  4554.                                     <span class="text-content" data-lang="es">Selecciona una fecha válida.</span>
  4555.                                     <span class="text-content" data-lang="en" style="display:none;">Select a valid date.</span>
  4556.                                 </div>
  4557.                             </div>
  4558.     
  4559.                             <div class="col-sm-6">
  4560.                                 <label for="preferredTime" class="form-label">
  4561.                                     <span class="text-content" data-lang="es">Hora preferida</span>
  4562.                                     <span class="text-content" data-lang="en" style="display:none;">Preferred Time</span>
  4563.                                 </label>
  4564.                                 <select id="preferredTime" name="preferredTime" class="form-select" required>
  4565.                                     <option value="" selected disabled data-lang-es="Selecciona una hora" data-lang-en="Select a time">
  4566.                                         Selecciona una hora
  4567.                                     </option>
  4568.                                 </select>
  4569.                                 <div class="invalid-feedback">
  4570.                                     <span class="text-content" data-lang="es">Selecciona una hora válida.</span>
  4571.                                     <span class="text-content" data-lang="en" style="display:none;">Select a valid time.</span>
  4572.                                 </div>
  4573.                             </div>
  4574.                         </div>
  4575.     
  4576.                         <div class="card border rounded p-3 mb-3">
  4577.                             <div class="d-flex align-items-center mb-3">
  4578.                                 <i class="bi bi-info-circle me-2 text-primary fs-5"></i>
  4579.                                 <h6 class="fw-bold mb-0">
  4580.                                     <span class="text-content" data-lang="es">Resumen de tu cita</span>
  4581.                                     <span class="text-content" data-lang="en" style="display:none;">Appointment Summary</span>
  4582.                                 </h6>
  4583.                             </div>
  4584.                             
  4585.                             <ul class="list-unstyled mb-0">
  4586.                                 <li>
  4587.                                     <strong>
  4588.                                         <span class="text-content" data-lang="es">Paciente:</span>
  4589.                                         <span class="text-content" data-lang="en" style="display:none;">Patient:</span>
  4590.                                     </strong> 
  4591.                                     <span id="resumenNombre">—</span>
  4592.                                 </li>
  4593.                                 <li>
  4594.                                     <strong>
  4595.                                         <span class="text-content" data-lang="es">Estudio:</span>
  4596.                                         <span class="text-content" data-lang="en" style="display:none;">Study:</span>
  4597.                                     </strong> 
  4598.                                     <span id="resumenEstudio">—</span>
  4599.                                 </li>
  4600.                                 <li>
  4601.                                     <strong>
  4602.                                         <span class="text-content" data-lang="es">Fecha:</span>
  4603.                                         <span class="text-content" data-lang="en" style="display:none;">Date:</span>
  4604.                                     </strong> 
  4605.                                     <span id="resumenFecha">—</span>
  4606.                                 </li>
  4607.                                 <li>
  4608.                                     <strong>
  4609.                                         <span class="text-content" data-lang="es">Hora:</span>
  4610.                                         <span class="text-content" data-lang="en" style="display:none;">Time:</span>
  4611.                                     </strong> 
  4612.                                     <span id="resumenHora">—</span>
  4613.                                 </li>
  4614.                             </ul>
  4615.                         </div>
  4616.                     </form>
  4617.                 </div>
  4618.     
  4619.                 <div class="modal-footer">
  4620.                     <button type="button" class="btn btn-outline-secondary" id="prevStep3Btn">
  4621.                         <span class="text-content" data-lang="es">Anterior</span>
  4622.                         <span class="text-content" data-lang="en" style="display:none;">Previous</span>
  4623.                     </button>
  4624.                     <button type="submit" class="btn btn-success" id="confirmBtn" disabled>
  4625.                         <span class="text-content" data-lang="es">Confirmar Cita</span>
  4626.                         <span class="text-content" data-lang="en" style="display:none;">Confirm Appointment</span>
  4627.                     </button>
  4628.                 </div>
  4629.             </div>
  4630.         </div>
  4631.     </div>
  4632.     
  4633.     {# Modal de Confirmación Final#}
  4634.     <div class="modal fade" id="confirmacionFinalModal" tabindex="-1" aria-hidden="true">
  4635.         <div class="modal-dialog modal-dialog-centered modal-md">
  4636.             <div class="modal-content border-0 shadow-lg rounded-3">
  4637.                 {# Header con gradiente #}
  4638.                 <div class="modal-header border-0 bg-gradient-primary text-white rounded-top-3 py-4">
  4639.                     <div class="d-flex align-items-center w-100">
  4640.                         <div class="flex-shrink-0">
  4641.                             <div class="success-icon-wrapper bg-white rounded-circle border border-2 border-success d-flex align-items-center justify-content-center me-3" 
  4642.                                 style="width: 42px; height: 42px;">
  4643.                                 <i class="bi bi-check-lg text-success fs-4"></i>
  4644.                             </div>
  4645.                         </div>
  4646.                         <div class="flex-grow-1">
  4647.                             <h4 class="modal-title fw-bold mb-0">
  4648.                                 <span class="text-content" data-lang="es">¡Cita Confirmada!</span>
  4649.                                 <span class="text-content" data-lang="en" style="display:none;">Appointment Confirmed!</span>
  4650.                             </h4>
  4651.                             <p class="mb-0 opacity-90">
  4652.                                 <span class="text-content" data-lang="es">Todo listo para tu estudio médico</span>
  4653.                                 <span class="text-content" data-lang="en" style="display:none;">All set for your medical study</span>
  4654.                             </p>
  4655.                         </div>
  4656.                     </div>
  4657.                 </div>
  4658.     
  4659.                 <div class="modal-body p-4">
  4660.                     {# Tarjeta de detalles #}
  4661.                     <div class="card border-0 shadow-sm mb-4">
  4662.                         <div class="card-body p-3">
  4663.                             <div class="row g-3">
  4664.                                 {# Fecha #}
  4665.                                 <div class="col-12">
  4666.                                     <div class="d-flex align-items-center">
  4667.                                         <div class="icon-circle bg-primary bg-opacity-10 text-primary rounded-circle p-2 me-3">
  4668.                                             <i class="bi bi-calendar2-check fs-5"></i>
  4669.                                         </div>
  4670.                                         <div>
  4671.                                             <small class="text-muted d-block">
  4672.                                                 <span class="text-content" data-lang="es">Fecha</span>
  4673.                                                 <span class="text-content" data-lang="en" style="display:none;">Date</span>
  4674.                                             </small>
  4675.                                             <strong class="text-dark" id="fechaCitaConfirmada"></strong>
  4676.                                         </div>
  4677.                                     </div>
  4678.                                 </div>
  4679.                                 
  4680.                                 {# Hora #}
  4681.                                 <div class="col-12">
  4682.                                     <div class="d-flex align-items-center">
  4683.                                         <div class="icon-circle bg-success bg-opacity-10 text-success rounded-circle p-2 me-3">
  4684.                                             <i class="bi bi-clock fs-5"></i>
  4685.                                         </div>
  4686.                                         <div>
  4687.                                             <small class="text-muted d-block">
  4688.                                                 <span class="text-content" data-lang="es">Hora</span>
  4689.                                                 <span class="text-content" data-lang="en" style="display:none;">Time</span>
  4690.                                             </small>
  4691.                                             <strong class="text-dark" id="horaCitaConfirmada"></strong>
  4692.                                         </div>
  4693.                                     </div>
  4694.                                 </div>
  4695.                                 
  4696.                                 {# Email #}
  4697.                                 <div class="col-12">
  4698.                                     <div class="d-flex align-items-center">
  4699.                                         <div class="icon-circle bg-info bg-opacity-10 text-info rounded-circle p-2 me-3">
  4700.                                             <i class="bi bi-envelope-check fs-5"></i>
  4701.                                         </div>
  4702.                                         <div>
  4703.                                             <small class="text-muted d-block">
  4704.                                                 <span class="text-content" data-lang="es">Confirmación enviada a</span>
  4705.                                                 <span class="text-content" data-lang="en" style="display:none;">Confirmation sent to</span>
  4706.                                             </small>
  4707.                                             <strong class="text-dark" id="emailCitaConfirmada"></strong>
  4708.                                         </div>
  4709.                                     </div>
  4710.                                 </div>
  4711.                             </div>
  4712.                         </div>
  4713.                     </div>
  4714.     
  4715.                     {# Nota importante #}
  4716.                     <div class="alert alert-light border alert-dismissible fade show mb-4" role="alert">
  4717.                         <div class="d-flex">
  4718.                             <i class="bi bi-bell-fill text-warning fs-5 me-2"></i>
  4719.                             <div>
  4720.                                 <strong>
  4721.                                     <span class="text-content" data-lang="es">Recordatorio importante</span>
  4722.                                     <span class="text-content" data-lang="en" style="display:none;">Important reminder</span>
  4723.                                 </strong>
  4724.                                 <p class="mb-0 small">
  4725.                                     <span class="text-content" data-lang="es">Recibirás un recordatorio 24 horas antes de tu cita vía correo electrónico.</span>
  4726.                                     <span class="text-content" data-lang="en" style="display:none;">You will receive a reminder 24 hours before your appointment via email.</span>
  4727.                                 </p>
  4728.                             </div>
  4729.                         </div>
  4730.                     </div>
  4731.     
  4732.                     {# Botón de acción #}
  4733.                     <div class="text-center">
  4734.                         <button type="button" class="btn btn-primary px-4 py-2 rounded-pill fw-semibold" data-bs-dismiss="modal">
  4735.                             <span class="text-content" data-lang="es">
  4736.                                 <i class="bi bi-check-circle me-2"></i>Entendido
  4737.                             </span>
  4738.                             <span class="text-content" data-lang="en" style="display:none;">
  4739.                                 <i class="bi bi-check-circle me-2"></i>Got it
  4740.                             </span>
  4741.                         </button>
  4742.                     </div>
  4743.                 </div>
  4744.             </div>
  4745.         </div>
  4746.     </div>
  4748.    {% if app.user %}
  4749.     <!-- Botón flotante -->
  4750.         <div class="position-fixed" style="z-index: 1030; bottom: 30px; right: 30px;">
  4751.             <div class="dropdown">
  4752.                 <button class="quick-access-btn" 
  4753.                         type="button" 
  4754.                         data-bs-toggle="dropdown"
  4755.                         title="Acceso rápido">
  4756.                     <i class="fas fa-bolt"></i>
  4757.                 </button>
  4758.                 <ul class="dropdown-menu dropdown-menu-end dropdown-menu-user">
  4759.                     <li>
  4760.                         <h6 class="dropdown-header fw-bold text-primary d-flex align-items-center">
  4761.                             <i class="fas fa-bolt me-2"></i>
  4762.                             <span class="text-content" data-lang="es">Acceso Rápido</span>
  4763.                             <span class="text-content" data-lang="en" style="display:none;">Quick Access</span>
  4764.                         </h6>
  4765.                     </li>
  4766.                     
  4767.                     {# Opciones para ADMIN #}
  4768.                     {% if 'ROLE_ADMIN' in app.user.roles %}
  4769.                         <li>
  4770.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_index') }}">
  4771.                                 <i class="fas fa-tachometer-alt me-2"></i>
  4772.                                 <div>
  4773.                                     <span class="text-content" data-lang="es">Dashboard</span>
  4774.                                     <span class="text-content" data-lang="en" style="display:none;">Dashboard</span>
  4775.                                 </div>
  4776.                             </a>
  4777.                         </li>
  4778.                         <li>
  4779.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_pacientes') }}">
  4780.                                 <i class="fas fa-user-injured me-2"></i>
  4781.                                 <div>
  4782.                                     <span class="text-content" data-lang="es">Pacientes</span>
  4783.                                     <span class="text-content" data-lang="en" style="display:none;">Patients</span>
  4784.                                 </div>
  4785.                             </a>
  4786.                         </li>
  4787.                         <li>
  4788.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_proveedores') }}">
  4789.                                 <i class="fas fa-user-md me-2"></i>
  4790.                                 <div>
  4791.                                     <span class="text-content" data-lang="es">Proveedores</span>
  4792.                                     <span class="text-content" data-lang="en" style="display:none;">Providers</span>
  4793.                                 </div>
  4794.                             </a>
  4795.                         </li>
  4796.                         <li>
  4797.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_appointment') }}">
  4798.                                 <i class="fas fa-calendar-check me-2"></i>
  4799.                                 <div>
  4800.                                     <span class="text-content" data-lang="es">Agenda de Citas</span>
  4801.                                     <span class="text-content" data-lang="en" style="display:none;">Appointment Schedule</span>
  4802.                                 </div>
  4803.                             </a>
  4804.                         </li>
  4805.                         <li>
  4806.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_horario') }}">
  4807.                                 <i class="fas fa-clock me-2"></i>
  4808.                                 <div>
  4809.                                     <span class="text-content" data-lang="es">Horarios Médicos</span>
  4810.                                     <span class="text-content" data-lang="en" style="display:none;">Medical Schedules</span>
  4811.                                 </div>
  4812.                             </a>
  4813.                         </li>
  4814.                         <li>
  4815.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('admin_profile') }}">
  4816.                                 <i class="fas fa-user-cog me-2"></i>
  4817.                                 <div>
  4818.                                     <span class="text-content" data-lang="es">Perfil</span>
  4819.                                     <span class="text-content" data-lang="en" style="display:none;">Profile</span>
  4820.                                 </div>
  4821.                             </a>
  4822.                         </li>
  4823.                     
  4824.                     {# Opciones para PROVEEDOR #}
  4825.                     {% elseif 'ROLE_PROVIDER' in app.user.roles %}
  4826.                         <li>
  4827.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('provider_index') }}">
  4828.                                 <i class="fas fa-tachometer-alt me-2"></i>
  4829.                                 <div>
  4830.                                     <span class="text-content" data-lang="es">Dashboard</span>
  4831.                                     <span class="text-content" data-lang="en" style="display:none;">Dashboard</span>
  4832.                                 </div>
  4833.                             </a>
  4834.                         </li>
  4835.                         <li>
  4836.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('provider_patients') }}">
  4837.                                 <i class="fas fa-user-injured me-2"></i>
  4838.                                 <div>
  4839.                                     <span class="text-content" data-lang="es">Mis Pacientes</span>
  4840.                                     <span class="text-content" data-lang="en" style="display:none;">My Patients</span>
  4841.                                 </div>
  4842.                             </a>
  4843.                         </li>
  4844.                         <li>
  4845.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('provider_appointment') }}">
  4846.                                 <i class="fas fa-calendar-check me-2"></i>
  4847.                                 <div>
  4848.                                     <span class="text-content" data-lang="es">Mis Citas</span>
  4849.                                     <span class="text-content" data-lang="en" style="display:none;">My Appointments</span>
  4850.                                 </div>
  4851.                             </a>
  4852.                         </li>
  4853.                         <li>
  4854.                             <a class="dropdown-item dropdown-item-user d-flex align-items-center" href="{{ path('provider_profile') }}">
  4855.                                 <i class="fas fa-user-cog me-2"></i>
  4856.                                 <div>
  4857.                                     <span class="text-content" data-lang="es">Mi Perfil</span>
  4858.                                     <span class="text-content" data-lang="en" style="display:none;">My Profile</span>
  4859.                                 </div>
  4860.                             </a>
  4861.                         </li>
  4862.                     {% endif %}
  4863.                     
  4864.                     <li><hr class="dropdown-divider mx-3"></li>
  4865.                     <li>
  4866.                         <a class="dropdown-item dropdown-item-user d-flex align-items-center text-muted" href="{{ path('app_logout') }}">
  4867.                             <i class="fas fa-sign-out-alt me-2"></i>
  4868.                             <div>
  4869.                                 <span class="text-content" data-lang="es">Cerrar Sesión</span>
  4870.                                 <span class="text-content" data-lang="en" style="display:none;">Logout</span>
  4871.                             </div>
  4872.                         </a>
  4873.                     </li>
  4874.                 </ul>
  4875.             </div>
  4876.         </div>
  4877.     {% endif %}
  4879.     <style>
  4880.       .bg-gradient-primary {
  4881.           background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
  4882.       }
  4883.     
  4884.       .success-icon-wrapper {
  4885.           box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  4886.       }
  4887.     
  4888.       .icon-circle {
  4889.           width: 48px;
  4890.           height: 48px;
  4891.           display: flex;
  4892.           align-items: center;
  4893.           justify-content: center;
  4894.           flex-shrink: 0;
  4895.       }
  4896.     
  4897.       .rounded-3 {
  4898.           border-radius: 1rem !important;
  4899.       }
  4900.     
  4901.       .rounded-top-3 {
  4902.           border-top-left-radius: 1rem !important;
  4903.           border-top-right-radius: 1rem !important;
  4904.       }
  4905.     
  4906.       .shadow-lg {
  4907.           box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  4908.       }
  4910.   /* ===== BOTÓN FLOTANTE ===== */
  4911.         .quick-access-btn {
  4912.             width: 65px;
  4913.             height: 65px;
  4914.             background: #2980b9;
  4915.             border: none;
  4916.             border-radius: 50%;
  4917.             box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
  4918.             transition: all 0.3s ease;
  4919.             display: flex;
  4920.             align-items: center;
  4921.             justify-content: center;
  4922.             font-size: 1.5rem;
  4923.             color: white;
  4924.             animation: float 3s ease-in-out infinite;
  4925.             position: fixed;
  4926.             bottom: 30px;
  4927.             right: 30px;
  4928.             z-index: 1050;
  4929.         }
  4930.         
  4931.         .quick-access-btn:hover {
  4932.             transform: scale(1.1) rotate(10deg);
  4933.             box-shadow: 0 8px 25px rgba(52, 152, 219, 0.6);
  4934.             animation: none;
  4935.         }
  4936.         
  4937.         @keyframes float {
  4938.             0% { transform: translateY(0px); }
  4939.             50% { transform: translateY(-8px); }
  4940.             100% { transform: translateY(0px); }
  4941.         }
  4942.         
  4943.         .dropdown-menu-user {
  4944.             border: none;
  4945.             border-radius: 12px;
  4946.             box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  4947.             border-left: 4px solid var(--primary-color);
  4948.         }
  4949.         
  4950.         .dropdown-item-user {
  4951.             padding: 10px 15px;
  4952.             transition: all 0.3s ease;
  4953.             border-radius: 6px;
  4954.             margin: 2px 8px;
  4955.             width: auto;
  4956.         }
  4957.         
  4958.         .dropdown-item-user:hover {
  4959.             background: #2980b9;
  4960.             color: white !important;
  4961.             transform: translateX(5px);
  4962.         }
  4964.         @media (max-width: 768px) {
  4965.             .quick-access-btn {
  4966.                 bottom: 20px;
  4967.                 right: 20px;
  4968.                 width: 55px;
  4969.                 height: 55px;
  4970.                 font-size: 1.3rem;
  4971.             }
  4972.         }
  4973.    </style>
  4974. {% endblock %}
  4976. {% block javascripts %}
  4977.  
  4978. <script>
  4979. document.addEventListener('DOMContentLoaded', function() {
  4980.     // Función para actualizar placeholders según el idioma
  4981.     function updatePlaceholders() {
  4982.         const currentLang = document.documentElement.lang || 'es';
  4983.         
  4984.         // Actualizar placeholders de inputs
  4985.         document.querySelectorAll('input[data-lang-es]').forEach(input => {
  4986.             const langKey = `data-lang-${currentLang}`;
  4987.             if (input.hasAttribute(langKey)) {
  4988.                 input.placeholder = input.getAttribute(langKey);
  4989.             }
  4990.         });
  4991.         
  4992.         // Actualizar placeholder del textarea
  4993.         const observacionesTextarea = document.getElementById('observaciones');
  4994.         if (observacionesTextarea && observacionesTextarea.hasAttribute(`data-lang-${currentLang}`)) {
  4995.             observacionesTextarea.placeholder = observacionesTextarea.getAttribute(`data-lang-${currentLang}`);
  4996.         }
  4997.     }
  4998.     
  4999.     // Observar cambios en el idioma
  5000.     const observer = new MutationObserver(function(mutations) {
  5001.         mutations.forEach(function(mutation) {
  5002.             if (mutation.attributeName === 'lang') {
  5003.                 updatePlaceholders();
  5004.             }
  5005.         });
  5006.     });
  5007.     
  5008.     observer.observe(document.documentElement, {
  5009.         attributes: true,
  5010.         attributeFilter: ['lang']
  5011.     });
  5012.     
  5013.     // Actualizar inicialmente
  5014.     updatePlaceholders();
  5015. });
  5016. </script>
  5018. <script>
  5019. // document.addEventListener('DOMContentLoaded', function() {
  5020. //     // Función para actualizar las opciones del select según el idioma
  5021. //     function updateSelectLanguage() {
  5022. //         const studySelect = document.getElementById('studyType');
  5023. //         if (!studySelect) return;
  5024.         
  5025. //         const currentLang = document.documentElement.lang || 'es';
  5026. //         const selectedValue = studySelect.value;
  5027.         
  5028. //         // Actualizar el texto de cada option
  5029. //         Array.from(studySelect.options).forEach(option => {
  5030. //             const langKey = `data-lang-${currentLang}`;
  5031. //             if (option.hasAttribute(langKey)) {
  5032. //                 option.textContent = option.getAttribute(langKey);
  5033. //             }
  5034. //         });
  5035.         
  5036. //         // Restaurar el valor seleccionado
  5037. //         studySelect.value = selectedValue;
  5038. //     }
  5039.     
  5040. //     // Observar cambios en el idioma
  5041. //     const observer = new MutationObserver(function(mutations) {
  5042. //         mutations.forEach(function(mutation) {
  5043. //             if (mutation.attributeName === 'lang') {
  5044. //                 updateSelectLanguage();
  5045. //             }
  5046. //         });
  5047. //     });
  5048.     
  5049. //     observer.observe(document.documentElement, {
  5050. //         attributes: true,
  5051. //         attributeFilter: ['lang']
  5052. //     });
  5053.     
  5054. //     // Actualizar inicialmente
  5055. //     updateSelectLanguage();
  5056. // });
  5057. // </script>
  5059. // <script>
  5060. // document.addEventListener('DOMContentLoaded', function () {
  5061. //     // Variable global para controlar parámetros URL
  5062. //     let urlParamProcessed = false;
  5063. //     let currentEstudioFromUrl = '';
  5065. //     // Mapa global para almacenar horarios disponibles
  5066. //     let horariosDisponibles = {};
  5068. //     // 🔥 NUEVA FUNCIÓN: Obtener offset de Dallas según el mes
  5069. //     function obtenerOffsetDallas() {
  5070. //         const mesActual = new Date().getMonth() + 1; // 1-12
  5071.         
  5072. //         // Dallas: CST (UTC-6) de Noviembre a Marzo, CDT (UTC-5) de Abril a Octubre
  5073. //         if (mesActual >= 4 && mesActual <= 10) {
  5074. //             return -5; // CDT - Horario de verano
  5075. //         } else {
  5076. //             return -6; // CST - Horario estándar
  5077. //         }
  5078. //     }
  5080. //     // 🔥 NUEVA FUNCIÓN: Convertir UTC a hora de Dallas
  5081. //     function obtenerHoraActualDallas() {
  5082. //         const ahoraUTC = new Date();
  5083. //         const offsetDallas = obtenerOffsetDallas();
  5084.         
  5085. //         // Convertir UTC a Dallas
  5086. //         const horaDallas = new Date(ahoraUTC.getTime() + offsetDallas * 60 * 60 * 1000);
  5087.         
  5088. //         return {
  5089. //             horas: horaDallas.getUTCHours(),
  5090. //             minutos: horaDallas.getUTCMinutes(),
  5091. //             offset: offsetDallas
  5092. //         };
  5093. //     }
  5095. //     function filtrarHorasParaHoy(horas, fechaSeleccionada) {
  5096. //         const hoy = new Date().toLocaleDateString('en-CA');
  5097.         
  5098. //         if (fechaSeleccionada !== hoy) {
  5099. //             return Promise.resolve(horas);
  5100. //         }
  5101.         
  5102. //         return fetch('/api/hora-actual-servidor') 
  5103. //             .then(response => {
  5104. //                 if (!response.ok) throw new Error('Error al obtener hora del servidor');
  5105. //                 return response.json();
  5106. //             })
  5107. //             .then(data => {
  5108. //                 const horaServidor = data.hora_servidor;
  5109. //                 const [horaStr, minutoStr, segundoStr] = horaServidor.split(':');
  5110. //                 const totalMinutosServidor = parseInt(horaStr) * 60 + parseInt(minutoStr);
  5111.                 
  5112. //                 console.log('🕐 Filtro - Hora servidor:', horaServidor, 'Minutos:', totalMinutosServidor);
  5113.                 
  5114. //                 // 🔥 CORRECCIÓN: Convertir horas 12h a 24h para comparar
  5115. //                 return horas.filter(horaObj => {
  5116. //                     // Convertir hora disponible (12h) a minutos totales en formato 24h
  5117. //                     const totalMinutosDisponible = convertir12hA24hEnMinutos(horaObj.hora);
  5118.                     
  5119. //                     // ✅ Comparar en el mismo formato (24h)
  5120. //                     const pasaFiltro = totalMinutosDisponible >= totalMinutosServidor;
  5121.                     
  5122. //                     console.log('⚡ Evaluando hora:', {
  5123. //                         horaDisponible: horaObj.hora,
  5124. //                         totalMinutosDisponible: totalMinutosDisponible,
  5125. //                         horaServidor: horaServidor,
  5126. //                         totalMinutosServidor: totalMinutosServidor,
  5127. //                         pasaFiltro: pasaFiltro
  5128. //                     });
  5129.                     
  5130. //                     return pasaFiltro;
  5131. //                 });
  5132. //             })
  5133. //             .catch(error => {
  5134. //                 console.error('Error al obtener hora servidor:', error);
  5135. //                 // Fallback: usar hora local del cliente
  5136. //                 const ahora = new Date();
  5137. //                 const totalMinutosActual = ahora.getHours() * 60 + ahora.getMinutes();
  5138.                 
  5139. //                 console.log('🔄 Usando fallback - Hora local:', ahora.toLocaleTimeString());
  5140.                 
  5141. //                 return horas.filter(horaObj => {
  5142. //                     const totalMinutosDisponible = convertir12hA24hEnMinutos(horaObj.hora);
  5143. //                     return totalMinutosDisponible >= (totalMinutosActual - 15);
  5144. //                 });
  5145. //             });
  5146. //     }
  5147.     
  5148. //     // 🔥 NUEVA FUNCIÓN: Convertir formato 12h (ej: "02:30 PM") a minutos totales en 24h
  5149. //     function convertir12hA24hEnMinutos(hora12h) {
  5150. //         // Dividir la cadena (ej: "02:30 PM" -> ["02", "30", "PM"])
  5151. //         const [horaMin, ampm] = hora12h.split(' ');
  5152. //         const [horasStr, minutosStr] = horaMin.split(':');
  5153.         
  5154. //         let horas = parseInt(horasStr);
  5155. //         const minutos = parseInt(minutosStr);
  5156.         
  5157. //         // Convertir a formato 24h
  5158. //         if (ampm.toUpperCase() === 'PM' && horas !== 12) {
  5159. //             horas += 12;
  5160. //         } else if (ampm.toUpperCase() === 'AM' && horas === 12) {
  5161. //             horas = 0;
  5162. //         }
  5163.         
  5164. //         return horas * 60 + minutos;
  5165. //     }
  5168. //     // 🔥 NUEVA FUNCIÓN: Manejar horas filtradas con mensajes específicos
  5169. //     function manejarHorasFiltradas(horasFiltradas, horasOriginales, fechaSeleccionada) {
  5170. //         const hoy = new Date().toLocaleDateString('en-CA');
  5171.         
  5172. //         if (fechaSeleccionada === hoy && horasFiltradas.length === 0) {
  5173. //             // Caso: Es hoy y no hay horas disponibles después de la hora actual
  5174. //             if (horasOriginales.length > 0) {
  5175. //                 return {
  5176. //                     horas: [],
  5177. //                     mensaje: getTranslatedText('no_more_times_today')
  5178. //                 };
  5179. //             } else {
  5180. //                 return {
  5181. //                     horas: [],
  5182. //                     mensaje: getTranslatedText('no_availability')
  5183. //                 };
  5184. //             }
  5185. //         } else if (fechaSeleccionada === hoy && horasFiltradas.length < horasOriginales.length) {
  5186. //             // Caso: Es hoy y se filtraron algunas horas
  5187. //             console.log(`⏰ Se filtraron ${horasOriginales.length - horasFiltradas.length} horas pasadas para hoy`);
  5188. //         }
  5189.         
  5190. //         return {
  5191. //             horas: horasFiltradas,
  5192. //             mensaje: null
  5193. //         };
  5194. //     }
  5196. //     // 🔥 NUEVA FUNCIÓN: Manejo mejorado de transición entre modales
  5197. //     function switchModal(currentModalId, nextModalId, callback) {
  5198. //         const currentModal = bootstrap.Modal.getInstance(document.getElementById(currentModalId));
  5199. //         const nextModalElement = document.getElementById(nextModalId);
  5200.         
  5201. //         if (currentModal) {
  5202. //             // Usar evento hidden.bs.modal para asegurar la transición limpia
  5203. //             document.getElementById(currentModalId).addEventListener('hidden.bs.modal', function handler() {
  5204. //                 // Remover el event listener después de usarlo
  5205. //                 this.removeEventListener('hidden.bs.modal', handler);
  5206.                 
  5207. //                 // Pequeño delay para asegurar que Bootstrap limpió el backdrop
  5208. //                 setTimeout(() => {
  5209. //                     if (nextModalElement) {
  5210. //                         const nextModal = new bootstrap.Modal(nextModalElement);
  5211. //                         nextModal.show();
  5212.                         
  5213. //                         // Ejecutar callback si existe
  5214. //                         if (callback && typeof callback === 'function') {
  5215. //                             callback();
  5216. //                         }
  5217. //                     }
  5218. //                 }, 50);
  5219. //             });
  5220.             
  5221. //             currentModal.hide();
  5222. //         } else if (nextModalElement) {
  5223. //             // Si no hay modal actual, simplemente abrir el siguiente
  5224. //             const nextModal = new bootstrap.Modal(nextModalElement);
  5225. //             nextModal.show();
  5226. //         }
  5227. //     }
  5229. //     // 🔥 NUEVA FUNCIÓN: Cerrar todos los modales y limpiar
  5230. //     function closeAllModals() {
  5231. //         const modals = document.querySelectorAll('.modal');
  5232. //         modals.forEach(modal => {
  5233. //             const modalInstance = bootstrap.Modal.getInstance(modal);
  5234. //             if (modalInstance) {
  5235. //                 modalInstance.hide();
  5236. //             }
  5237. //         });
  5238.         
  5239. //         // Limpiar manualmente el backdrop
  5240. //         const backdrops = document.querySelectorAll('.modal-backdrop');
  5241. //         backdrops.forEach(backdrop => {
  5242. //             backdrop.remove();
  5243. //         });
  5244.         
  5245. //         // Restaurar el body
  5246. //         document.body.classList.remove('modal-open');
  5247. //         document.body.style.overflow = '';
  5248. //         document.body.style.paddingRight = '';
  5249. //     }
  5251. //     // Función para obtener texto traducido
  5252. //     function getTranslatedText(key) {
  5253. //         const translations = {
  5254. //             // Mensajes de error y validación
  5255. //             'select_valid_date': {
  5256. //                 es: 'Selecciona una fecha válida.',
  5257. //                 en: 'Select a valid date.'
  5258. //             },
  5259. //             'select_valid_time': {
  5260. //                 es: 'Selecciona una hora válida.',
  5261. //                 en: 'Select a valid time.'
  5262. //             },
  5263. //             'no_availability': {
  5264. //                 es: 'Sin disponibilidad',
  5265. //                 en: 'No availability'
  5266. //             },
  5267. //             'error_loading_schedules': {
  5268. //                 es: 'Error al cargar horarios',
  5269. //                 en: 'Error loading schedules'
  5270. //             },
  5271. //             'error_saving_appointment': {
  5272. //                 es: 'Error al guardar la cita',
  5273. //                 en: 'Error saving appointment'
  5274. //             },
  5275. //             'date_not_selected': {
  5276. //                 es: 'Fecha no seleccionada',
  5277. //                 en: 'Date not selected'
  5278. //             },
  5279. //             'time_not_selected': {
  5280. //                 es: 'Hora no seleccionada',
  5281. //                 en: 'Time not selected'
  5282. //             },
  5283. //             'time_not_available': {
  5284. //                 es: 'Hora no disponible',
  5285. //                 en: 'Time not available'
  5286. //             },
  5287.             
  5288. //             // Mensajes de éxito/error
  5289. //             'appointment_confirmed_success': {
  5290. //                 es: '✅ Tu cita ha sido confirmada correctamente.',
  5291. //                 en: '✅ Your appointment has been confirmed successfully.'
  5292. //             },
  5293. //             'appointment_error': {
  5294. //                 es: '❌ Hubo un problema al registrar la cita.',
  5295. //                 en: '❌ There was a problem registering the appointment.'
  5296. //             },
  5297.             
  5298. //             // Textos para resumen
  5299. //             'patient': {
  5300. //                 es: 'Paciente:',
  5301. //                 en: 'Patient:'
  5302. //             },
  5303. //             'study': {
  5304. //                 es: 'Estudio:',
  5305. //                 en: 'Study:'
  5306. //             },
  5307. //             'date': {
  5308. //                 es: 'Fecha:',
  5309. //                 en: 'Date:'
  5310. //             },
  5311. //             'time': {
  5312. //                 es: 'Hora:',
  5313. //                 en: 'Time:'
  5314. //             },
  5315. //             'dash': {
  5316. //                 es: '—',
  5317. //                 en: '—'
  5318. //             },
  5320. //             // 🔥 NUEVAS TRADUCCIONES PARA FILTRADO DE HORAS
  5321. //             'no_more_times_today': {
  5322. //                 es: 'No hay más horarios disponibles para hoy',
  5323. //                 en: 'No more available times for today'
  5324. //             },
  5325. //             'times_filtered_today': {
  5326. //                 es: 'Mostrando horarios disponibles a partir de ahora',
  5327. //                 en: 'Showing available times from now on'
  5328. //             },
  5329. //             'email_prohibited': {
  5330. //                 es: 'Este correo pertenece a un administrador o proveedor. Por favor usa un correo personal.',
  5331. //                 en: 'This email belongs to an admin or provider. Please use a personal email.'
  5332. //             },
  5333. //             'email_required': {
  5334. //                 es: 'El correo electrónico es obligatorio.',
  5335. //                 en: 'Email is required.'
  5336. //             },
  5337. //             'email_invalid': {
  5338. //                 es: 'Por favor ingresa un correo electrónico válido.',
  5339. //                 en: 'Please enter a valid email address.'
  5340. //             }
  5341.             
  5342. //         };
  5344. //         const currentLang = document.documentElement.lang || 'es';
  5345. //         return translations[key] ? translations[key][currentLang] || translations[key]['es'] : key;
  5346. //     }
  5347.     
  5348.     
  5349. //     // Tu código existente para parámetros URL...
  5350. //     function getUrlParameter(name) {
  5351. //         name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
  5352. //         var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
  5353. //         var results = regex.exec(location.search);
  5354. //         return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  5355. //     }
  5357. //     // Obtener el estudio desde la URL
  5358. //     const estudioFromUrl = getUrlParameter('estudio');
  5359. //     currentEstudioFromUrl = estudioFromUrl;
  5360.     
  5361. //     // Mapeo de parámetros URL a valores del select
  5362. //     const estudioMapping = {
  5363. //         'rayos-x': 'rayos-x',
  5364. //         'ultrasonido': 'ultrasonido-4d',
  5365. //         'tomografia': 'tomografia', 
  5366. //         'resonancia': 'resonancia',
  5367. //         'mamografia': 'mamografia',
  5368. //         'nuclear': 'nuclear',
  5369. //         'radiografia': 'radiografia',
  5370. //         'ultrasonido-abdominal': 'ultrasonido-abdominal',
  5371. //         'ultrasonido-mama': 'ultrasonido-mama',
  5372. //         'ecocardiograma': 'ecocardiograma',
  5373. //         'ultrasonido-musculoesqueletico': 'ultrasonido-musculoesqueletico',
  5374. //         'ultrasonido-obstetrico': 'ultrasonido-obstetrico',
  5375. //         'arteriografia-venografia': 'arteriografia-venografia',
  5376. //         'ultrasonido-intravascular': 'ultrasonido-intravascular',
  5377. //         'ultrasonido-vascular-periferico': 'ultrasonido-vascular-periferico',
  5378. //         'ultrasonido-vascular': 'ultrasonido-vascular',
  5379. //         'ultrasonido-pelvico': 'ultrasonido-pelvico',
  5380. //         'ultrasonido-prostata': 'ultrasonido-prostata',
  5381. //         'ultrasonido-renal': 'ultrasonido-renal',
  5382. //         'ultrasonido-escrotal': 'ultrasonido-escrotal',
  5383. //         'ultrasonido-tiroideo': 'ultrasonido-tiroideo'
  5384. //     };
  5386. //     // Paso 1: Datos personales
  5387. //     const formStep1 = document.getElementById('wizardStep1Form');
  5388. //     const nextBtnStep1 = document.getElementById('nextBtn');
  5390. //     function checkFieldsFilledStep1() {
  5391. //         const inputs = formStep1.querySelectorAll('input');
  5392. //         let allFilled = true;
  5394. //         inputs.forEach(input => {
  5395. //             if (input.value.trim() === '') {
  5396. //                 allFilled = false;
  5397. //             }
  5398. //         });
  5400. //         if (nextBtnStep1) {
  5401. //             nextBtnStep1.disabled = !allFilled;
  5402. //         }
  5403. //     }
  5405. //     if (formStep1) {
  5406. //         formStep1.querySelectorAll('input').forEach(input => {
  5407. //             input.addEventListener('input', checkFieldsFilledStep1);
  5408. //         });
  5409. //     }
  5411. //     // Función para seleccionar estudio automáticamente
  5412. //     function selectStudyFromUrl() {
  5413. //         if (currentEstudioFromUrl && estudioMapping[currentEstudioFromUrl] && !urlParamProcessed) {
  5414. //             const studySelect = document.getElementById('studyType');
  5415. //             if (studySelect) {
  5416. //                 for (let i = 0; i < studySelect.options.length; i++) {
  5417. //                     if (studySelect.options[i].value === estudioMapping[currentEstudioFromUrl]) {
  5418. //                         studySelect.selectedIndex = i;
  5419. //                         const event = new Event('change', { bubbles: true });
  5420. //                         studySelect.dispatchEvent(event);
  5421. //                         urlParamProcessed = true;
  5422. //                         break;
  5423. //                     }
  5424. //                 }
  5425. //             }
  5426. //         }
  5427. //     }
  5429. //     // Manejar parámetro URL cuando se abre el modal paso 2
  5430. //     if (estudioFromUrl && estudioMapping[estudioFromUrl]) {
  5431. //         setTimeout(() => {
  5432. //             const modalElement = document.getElementById('agendarCitaModal');
  5433. //             if (modalElement) {
  5434. //                 const modal = new bootstrap.Modal(modalElement);
  5435. //                 modal.show();
  5436. //             }
  5437. //         }, 1000);
  5438. //     }
  5440. //     // Manejar clicks en botones de servicios específicos
  5441. //     document.querySelectorAll('[data-estudio]').forEach(button => {
  5442. //         button.addEventListener('click', function(e) {
  5443. //             e.preventDefault();
  5444. //             const estudio = this.getAttribute('data-estudio');
  5445.             
  5446. //             const url = new URL(window.location);
  5447. //             url.searchParams.set('estudio', estudio);
  5448. //             window.history.replaceState({}, '', url);
  5449.             
  5450. //             currentEstudioFromUrl = estudio;
  5451. //             urlParamProcessed = false;
  5452.             
  5453. //             closeAllModals(); // 🔥 Limpiar antes de abrir nuevo modal
  5454.             
  5455. //             const modalElement = document.getElementById('agendarCitaModal');
  5456. //             if (modalElement) {
  5457. //                 const modal = new bootstrap.Modal(modalElement);
  5458. //                 modal.show();
  5459. //             }
  5460. //         });
  5461. //     });
  5463. //     // 🔥 CONFIGURACIÓN MEJORADA: Botón siguiente del paso 1
  5464. //     if (nextBtnStep1) {
  5465. //         nextBtnStep1.addEventListener('click', () => {
  5466. //             if (formStep1) {
  5467. //                 formStep1.classList.add('was-validated');
  5469. //                 if (formStep1.checkValidity()) {
  5470. //                     // Usar la nueva función de transición
  5471. //                     switchModal('agendarCitaModal', 'agendarCitaPaso2', selectStudyFromUrl);
  5472. //                 }
  5473. //             }
  5474. //         });
  5475. //     }
  5477. //     // Paso 2: Selección de estudio
  5478. //     const formStep2 = document.getElementById('wizardStep2Form');
  5479. //     const studySelect = document.getElementById('studyType');
  5480. //     const nextBtnStep2 = document.getElementById('nextStepBtn');
  5481. //     const prevBtnStep2 = document.getElementById('prevStepBtn');
  5483. //     if (studySelect && nextBtnStep2) {
  5484. //         studySelect.addEventListener('change', () => {
  5485. //             nextBtnStep2.disabled = studySelect.value === '';
  5486. //         });
  5488. //         nextBtnStep2.disabled = studySelect.value === '';
  5489. //     }
  5491. //     if (nextBtnStep2) {
  5492. //         nextBtnStep2.addEventListener('click', () => {
  5493. //             if (formStep2) {
  5494. //                 formStep2.classList.add('was-validated');
  5496. //                 if (formStep2.checkValidity()) {
  5497. //                     // Actualizar resumen antes de cambiar de modal
  5498. //                     const resumenNombre = document.getElementById('resumenNombre');
  5499. //                     const resumenEstudio = document.getElementById('resumenEstudio');
  5500. //                     const firstName = document.getElementById('firstName');
  5501. //                     const lastName = document.getElementById('lastName');
  5502.                     
  5503. //                     if (resumenNombre && firstName && lastName) {
  5504. //                         resumenNombre.textContent = firstName.value + ' ' + lastName.value;
  5505. //                     }
  5506.                     
  5507. //                     if (resumenEstudio && studySelect) {
  5508. //                         resumenEstudio.textContent = studySelect.options[studySelect.selectedIndex].text;
  5509. //                     }
  5511. //                     // Usar la nueva función de transición
  5512. //                     switchModal('agendarCitaPaso2', 'agendarCitaPaso3');
  5513. //                 }
  5514. //             }
  5515. //         });
  5516. //     }
  5518. //     if (prevBtnStep2) {
  5519. //         prevBtnStep2.addEventListener('click', () => {
  5520. //             switchModal('agendarCitaPaso2', 'agendarCitaModal');
  5521. //         });
  5522. //     }
  5524. //     // Paso 3: Fecha y hora
  5525. //     const formStep3 = document.getElementById('wizardStep3Form');
  5526. //     const confirmBtn = document.getElementById('confirmBtn');
  5527. //     const dateSelect = document.getElementById('preferredDate');
  5528. //     const timeSelect = document.getElementById('preferredTime');
  5529. //     const prevBtnStep3 = document.getElementById('prevStep3Btn');
  5530.     
  5531. //     function setMinDate() {
  5532. //         if (dateSelect) {
  5533. //             const today = new Date().toISOString().split('T')[0];
  5534. //             dateSelect.setAttribute('min', today);
  5535. //         }
  5536. //     }
  5537.     
  5538. //     setMinDate();
  5540. //     function getHoraLegible(timeId) {
  5541. //         return horariosDisponibles[timeId] || getTranslatedText('time_not_available');
  5542. //     }
  5544. //     function updateResumenStep3() {
  5545. //         const resumenFecha = document.getElementById('resumenFecha');
  5546. //         const resumenHora = document.getElementById('resumenHora');
  5547.         
  5548. //         if (resumenFecha && dateSelect) {
  5549. //             resumenFecha.textContent = dateSelect.value || getTranslatedText('dash');
  5550. //         }
  5551.         
  5552. //         if (resumenHora && timeSelect) {
  5553. //             if (timeSelect.value) {
  5554. //                 resumenHora.textContent = getHoraLegible(timeSelect.value);
  5555. //             } else {
  5556. //                 resumenHora.textContent = getTranslatedText('dash');
  5557. //             }
  5558. //         }
  5559. //     }
  5561. //     function checkStep3Validity() {
  5562. //         const valid = dateSelect && dateSelect.value && timeSelect && timeSelect.value;
  5563. //         if (confirmBtn) {
  5564. //             confirmBtn.disabled = !valid;
  5565. //         }
  5566. //         updateResumenStep3();
  5567. //     }
  5569. //     // 🔥 MODIFICAR el event listener del dateSelect
  5570. //     if (dateSelect) {
  5571. //         dateSelect.addEventListener('change', function () {
  5572. //             const fecha = this.value;
  5573. //             if (timeSelect) {
  5574.                 
  5575. //                 // --- NUEVA VALIDACIÓN: días cerrados ---
  5576. //                 const [year, month, day] = fecha.split('-').map(Number);
  5577. //                 const dateObj = new Date(year, month - 1, day); // mes en JS es 0-indexado
  5578. //                 const diaSemana = dateObj.getDay(); // 0 Dom, 1 Lun, 2 Mar, 3 Mié, 4 Jue, 5 Vie, 6 Sáb
  5579.         
  5580. //                 // Días no laborables: martes (2), jueves (4), domingo (0)
  5581. //                 const diasCerrados = [0, 2, 4];
  5582. //                 if (diasCerrados.includes(diaSemana)) {
  5583. //                     timeSelect.innerHTML = '';
  5584. //                     timeSelect.disabled = false; // mostramos el mensaje sin poder seleccionar
  5585.         
  5586. //                     const option = document.createElement('option');
  5587. //                     // Usa tu función de traducción o un texto fijo
  5588. //                     option.textContent = 'Cerrado (día no laborable)';
  5589. //                     option.disabled = true;
  5590. //                     timeSelect.appendChild(option);
  5591.         
  5592. //                     // Si existe una función que valide el paso (como checkStep3Validity), ejecútala
  5593. //                     if (typeof checkStep3Validity === 'function') checkStep3Validity();
  5594. //                     return; // Salimos sin hacer fetch
  5595. //                 }
  5596. //                 // --- FIN VALIDACIÓN ---
  5597.                 
  5598. //                 timeSelect.innerHTML = '';
  5599. //                 timeSelect.disabled = true;
  5601. //                 const loadingOption = document.createElement('option');
  5602. //                 loadingOption.textContent = 'Cargando horarios...';
  5603. //                 loadingOption.disabled = true;
  5604. //                 timeSelect.appendChild(loadingOption);
  5606. //                 // Primero obtener los horarios disponibles
  5607. //                 fetch(`/admin/horario/horarios-disponibles/${fecha}`)
  5608. //                 .then(response => {
  5609. //                     if (!response.ok) throw new Error('Error al cargar horarios');
  5610. //                     return response.json();
  5611. //                 })
  5612. //                 .then(horas => {
  5613. //                     console.log('📅 Horarios recibidos:', horas.length);
  5614.             
  5615. //                     // Sigue aplicando tu filtro actual
  5616. //                     return filtrarHorasParaHoy(horas, fecha);
  5617. //                 })
  5618. //                 .then(horasFiltradas => {
  5619. //                     timeSelect.innerHTML = '';
  5620. //                     horariosDisponibles = {};
  5621.             
  5622. //                     console.log('✅ Horarios después del filtro:', horasFiltradas.length);
  5623.             
  5624. //                     if (horasFiltradas.length === 0) {
  5625. //                         const option = document.createElement('option');
  5626. //                         option.textContent = getTranslatedText('no_availability');
  5627. //                         option.disabled = true;
  5628. //                         timeSelect.appendChild(option);
  5629. //                     } else {
  5630.             
  5631. //                         const defaultOption = document.createElement('option');
  5632. //                         defaultOption.value = '';
  5633. //                         defaultOption.textContent = getTranslatedText('select_valid_time');
  5634. //                         defaultOption.disabled = true;
  5635. //                         defaultOption.selected = true;
  5636. //                         timeSelect.appendChild(defaultOption);
  5637.             
  5638. //                         horasFiltradas.forEach(horaObj => {
  5639. //                             const option = document.createElement('option');
  5640. //                             option.value = horaObj.id;
  5641. //                             option.textContent = horaObj.hora;
  5642.             
  5643. //                             // DISPONIBLE
  5644. //                             if (horaObj.estado === 'disponible') {
  5645. //                                 horariosDisponibles[horaObj.id] = horaObj.hora;
  5646. //                                 option.textContent += ` (${getTranslatedText('Disponible')})`;
  5647. //                             }
  5648.             
  5649. //                             // OCUPADO
  5650. //                             if (horaObj.estado === 'ocupado') {
  5651. //                                 option.disabled = true;
  5652. //                                 option.style.opacity = '0.5';
  5653. //                                 option.textContent += ` (${getTranslatedText('Ocupado')})`;
  5654. //                             }
  5655.             
  5656. //                             // CERRADO
  5657. //                             if (horaObj.estado === 'cerrado') {
  5658. //                                 option.disabled = true;
  5659. //                                 option.style.opacity = '0.4';
  5660. //                                 option.textContent += ` (${getTranslatedText('Cerrado')})`;
  5661. //                             }
  5662.             
  5663. //                             timeSelect.appendChild(option);
  5664. //                         });
  5665. //                     }
  5666.             
  5667. //                     timeSelect.disabled = false;
  5668. //                     checkStep3Validity();
  5669. //                 })
  5670. //                 .catch(error => {
  5671. //                     console.error('Error en carga de horarios:', error);
  5672.             
  5673. //                     timeSelect.innerHTML = '';
  5674. //                     const option = document.createElement('option');
  5675. //                     option.textContent = getTranslatedText('error_loading_schedules');
  5676. //                     option.disabled = true;
  5677. //                     timeSelect.appendChild(option);
  5678.             
  5679. //                     timeSelect.disabled = false;
  5680. //                     checkStep3Validity();
  5681. //                 });
  5683. //             }
  5684. //         });
  5685. //     }
  5687. //     if (timeSelect) {
  5688. //         timeSelect.addEventListener('change', checkStep3Validity);
  5689. //     }
  5691. //     if (confirmBtn) {
  5692. //         confirmBtn.addEventListener('click', () => {
  5693. //             if (formStep3) {
  5694. //                 formStep3.classList.add('was-validated');
  5696. //                 if (formStep3.checkValidity()) {
  5697. //                     const fechaSeleccionada = document.getElementById('preferredDate').value;
  5698. //                     const horaIdSeleccionada = document.getElementById('preferredTime').value;
  5699. //                     const horaSeleccionada = getHoraLegible(horaIdSeleccionada);
  5701. //                     const payload = {
  5702. //                         user: {
  5703. //                             name: document.getElementById('firstName').value,
  5704. //                             lastName: document.getElementById('lastName').value,
  5705. //                             email: document.getElementById('email').value,
  5706. //                             phone: document.getElementById('phone').value,
  5707. //                             birthDate: document.getElementById('birthDate').value || null
  5708. //                         },
  5709. //                         cita: {
  5710. //                             fecha: fechaSeleccionada,
  5711. //                             horarioId: horaIdSeleccionada,
  5712. //                             tipoEstudio: document.getElementById('studyType').value,
  5713. //                             notas: document.getElementById('observaciones').value,
  5714. //                             origen: currentEstudioFromUrl ? 'url_param' : 'directo'
  5715. //                         }
  5716. //                     };
  5718. //                     fetch('/api/confirmar-cita', {
  5719. //                         method: 'POST',
  5720. //                         headers: { 'Content-Type': 'application/json' },
  5721. //                         body: JSON.stringify(payload)
  5722. //                     })
  5723. //                     .then(response => {
  5724. //                         if (!response.ok) throw new Error(getTranslatedText('error_saving_appointment'));
  5725. //                         return response.json();
  5726. //                     })
  5727. //                     .then(data => {
  5728. //                         // 🔥 Cerrar todos los modales antes de mostrar confirmación
  5729. //                         closeAllModals();
  5730.                         
  5731. //                         // Pequeño delay para asegurar limpieza
  5732. //                         setTimeout(() => {
  5733. //                             mostrarModalConfirmacion(fechaSeleccionada, horaSeleccionada);
  5734. //                             if (typeof addFlash === 'function') {
  5735. //                                 addFlash('success', getTranslatedText('appointment_confirmed_success'));
  5736. //                             }
  5737. //                         }, 100);
  5738. //                     })
  5739. //                     .catch(error => {
  5740. //                         console.error('Error al guardar cita:', error);
  5741. //                         // 🔥 Cerrar modales incluso en error
  5742. //                         closeAllModals();
  5743.                         
  5744. //                         setTimeout(() => {
  5745. //                             mostrarModalConfirmacion(fechaSeleccionada, horaSeleccionada);
  5746. //                             if (typeof addFlash === 'function') {
  5747. //                                 addFlash('danger', getTranslatedText('appointment_error'));
  5748. //                             }
  5749. //                         }, 100);
  5750. //                     });
  5751. //                 }
  5752. //             }
  5753. //         });
  5754. //     }
  5756. //     // Función para mostrar el modal de confirmación final
  5757. //     function mostrarModalConfirmacion(fecha, hora) {
  5758. //         let fechaFormateada = getTranslatedText('date_not_selected');
  5759. //         if (fecha) {
  5760. //             try {
  5761. //                 const currentLang = document.documentElement.lang || 'es';
  5762. //                 const options = {
  5763. //                     weekday: 'long',
  5764. //                     year: 'numeric',
  5765. //                     month: 'long',
  5766. //                     day: 'numeric'
  5767. //                 };
  5768.                 
  5769. //                 fechaFormateada = new Date(fecha).toLocaleDateString(currentLang, options);
  5770. //                 fechaFormateada = fechaFormateada.charAt(0).toUpperCase() + fechaFormateada.slice(1);
  5771. //             } catch (e) {
  5772. //                 fechaFormateada = fecha;
  5773. //             }
  5774. //         }
  5775.         
  5776. //         const fechaElement = document.getElementById('fechaCitaConfirmada');
  5777. //         const horaElement = document.getElementById('horaCitaConfirmada');
  5778. //         const emailElement = document.getElementById('emailCitaConfirmada');
  5779. //         const emailInput = document.getElementById('email');
  5780.         
  5781. //         if (fechaElement) fechaElement.textContent = fechaFormateada;
  5782. //         if (horaElement) horaElement.textContent = hora || getTranslatedText('time_not_selected');
  5783. //         if (emailElement && emailInput) emailElement.textContent = emailInput.value;
  5784.         
  5785. //         const confirmacionModalElement = document.getElementById('confirmacionFinalModal');
  5786. //         if (confirmacionModalElement) {
  5787. //             const confirmacionModal = new bootstrap.Modal(confirmacionModalElement);
  5788. //             confirmacionModal.show();
  5789.             
  5790. //             confirmacionModalElement.addEventListener('hidden.bs.modal', function () {
  5791. //                 resetAllForms();
  5792. //             });
  5793. //         }
  5794. //     }
  5796. //     // Función para resetear todos los formularios
  5797. //     function resetAllForms() {
  5798. //         if (formStep1) {
  5799. //             formStep1.reset();
  5800. //             formStep1.classList.remove('was-validated');
  5801. //         }
  5802. //         if (formStep2) {
  5803. //             formStep2.reset();
  5804. //             formStep2.classList.remove('was-validated');
  5805. //         }
  5806. //         if (formStep3) {
  5807. //             formStep3.reset();
  5808. //             formStep3.classList.remove('was-validated');
  5809. //         }
  5810.         
  5811. //         if (nextBtnStep1) nextBtnStep1.disabled = true;
  5812. //         if (nextBtnStep2) nextBtnStep2.disabled = true;
  5813. //         if (confirmBtn) confirmBtn.disabled = true;
  5815. //         if (currentEstudioFromUrl) {
  5816. //             const url = new URL(window.location);
  5817. //             url.searchParams.delete('estudio');
  5818. //             window.history.replaceState({}, '', url);
  5819. //             currentEstudioFromUrl = '';
  5820. //             urlParamProcessed = false;
  5821. //         }
  5822. //     }
  5824. //     if (prevBtnStep3) {
  5825. //         prevBtnStep3.addEventListener('click', () => {
  5826. //             switchModal('agendarCitaPaso3', 'agendarCitaPaso2');
  5827. //         });
  5828. //     }
  5830. //     // 🔥 MEJOR MANEJO DE EVENTOS DE MODAL
  5831. //     document.querySelectorAll('.modal').forEach(modal => {
  5832. //         modal.addEventListener('show.bs.modal', function () {
  5833. //             // Asegurar que solo hay un backdrop
  5834. //             const existingBackdrops = document.querySelectorAll('.modal-backdrop');
  5835. //             if (existingBackdrops.length > 1) {
  5836. //                 existingBackdrops.forEach((backdrop, index) => {
  5837. //                     if (index > 0) backdrop.remove();
  5838. //                 });
  5839. //             }
  5840. //         });
  5841.         
  5842. //         modal.addEventListener('hidden.bs.modal', function () {
  5843. //             // Solo limpiar si no hay más modales abiertos
  5844. //             const openModals = document.querySelectorAll('.modal.show');
  5845. //             if (openModals.length === 0) {
  5846. //                 const backdrops = document.querySelectorAll('.modal-backdrop');
  5847. //                 backdrops.forEach(backdrop => {
  5848. //                     backdrop.remove();
  5849. //                 });
  5850. //                 document.body.classList.remove('modal-open');
  5851. //                 document.body.style.overflow = '';
  5852. //                 document.body.style.paddingRight = '';
  5853. //             }
  5854. //         });
  5855. //     });
  5856.     
  5857. //     // ========== VALIDACIÓN DE CORREO Y CHECKBOX ==========
  5858. //     const emailInput = document.getElementById('email');
  5859. //     const noEmailCheckbox = document.getElementById('noEmailCheckbox');
  5860. //     const noEmailInfo = document.getElementById('noEmailInfo');
  5861. //     const emailErrorMessage = document.getElementById('email-error-message');
  5862.     
  5863. //     let emailValid = false;
  5864. //     let emailCheckTimeout = null;
  5865.     
  5866. //     // Función para mostrar error de correo
  5867. //     function showEmailError(message) {
  5868. //         emailErrorMessage.innerHTML = message;
  5869. //         emailErrorMessage.style.display = 'block';
  5870. //         emailValid = false;
  5871. //         // Agregar clase is-invalid al input para estilo Bootstrap
  5872. //         emailInput.classList.add('is-invalid');
  5873. //     }
  5874.     
  5875. //     // Función para limpiar error de correo
  5876. //     function clearEmailError() {
  5877. //         emailErrorMessage.innerHTML = '';
  5878. //         emailErrorMessage.style.display = 'none';
  5879. //         emailInput.classList.remove('is-invalid');
  5880. //         emailValid = true;
  5881. //     }
  5882.     
  5883. //     // Función para verificar correo contra el backend (con debounce)
  5884. //     function checkEmail(email) {
  5885. //         if (emailCheckTimeout) clearTimeout(emailCheckTimeout);
  5886. //         emailCheckTimeout = setTimeout(() => {
  5887. //             fetch(`/api/verificar-correo?email=${encodeURIComponent(email)}`)
  5888. //                 .then(response => response.json())
  5889. //                 .then(data => {
  5890. //                     if (data.isProhibited) {
  5891. //                         showEmailError(getTranslatedText('email_prohibited'));
  5892. //                     } else {
  5893. //                         clearEmailError();
  5894. //                     }
  5895. //                 })
  5896. //                 .catch(error => {
  5897. //                     console.error('Error verificando correo:', error);
  5898. //                     // Si falla la petición, asumimos que es válido (mejor UX)
  5899. //                     clearEmailError();
  5900. //                 });
  5901. //         }, 500);
  5902. //     }
  5903.     
  5904. //     // Evento de cambio en el checkbox
  5905. //     if (noEmailCheckbox) {
  5906. //         noEmailCheckbox.addEventListener('change', function() {
  5907. //             if (this.checked) {
  5908. //                 // Deshabilitar input de email y limpiar
  5909. //                 emailInput.disabled = true;
  5910. //                 emailInput.value = '';
  5911. //                 emailInput.removeAttribute('required');
  5912. //                 emailInput.classList.remove('is-invalid');
  5913. //                 clearEmailError();
  5914. //                 noEmailInfo.style.display = 'block';
  5915. //                 // Marcar que el email es válido (no se validará)
  5916. //                 emailValid = true;
  5917. //             } else {
  5918. //                 // Habilitar input de email
  5919. //                 emailInput.disabled = false;
  5920. //                 emailInput.setAttribute('required', 'required');
  5921. //                 noEmailInfo.style.display = 'none';
  5922. //                 // Forzar revalidación si hay valor
  5923. //                 if (emailInput.value.trim() !== '') {
  5924. //                     checkEmail(emailInput.value);
  5925. //                 } else {
  5926. //                     // Si está vacío, limpiar error y marcar como inválido hasta que se complete
  5927. //                     clearEmailError();
  5928. //                     emailValid = false;
  5929. //                 }
  5930. //             }
  5931. //             // Actualizar estado del botón siguiente
  5932. //             checkFieldsFilledStep1();
  5933. //         });
  5934. //     }
  5935.     
  5936. //     // Evento de entrada en el email
  5937. //     if (emailInput) {
  5938. //         emailInput.addEventListener('input', function() {
  5939. //             if (!noEmailCheckbox.checked) {
  5940. //                 const email = this.value.trim();
  5941. //                 if (email === '') {
  5942. //                     // Si está vacío, error
  5943. //                     showEmailError(getTranslatedText('email_required'));
  5944. //                     emailValid = false;
  5945. //                 } else {
  5946. //                     // Verificar formato básico de email (opcional, HTML5 ya valida)
  5947. //                     if (!this.checkValidity()) {
  5948. //                         showEmailError(getTranslatedText('email_invalid'));
  5949. //                         emailValid = false;
  5950. //                     } else {
  5951. //                         checkEmail(email);
  5952. //                     }
  5953. //                 }
  5954. //             }
  5955. //             checkFieldsFilledStep1();
  5956. //         });
  5957. //     }
  5958.     
  5959. //     // Modificar la función checkFieldsFilledStep1 original para que incluya el estado del checkbox y la validación del email
  5960. //     const originalCheckFieldsFilledStep1 = window.checkFieldsFilledStep1 || function() { /* placeholder */ };
  5961. //     window.checkFieldsFilledStep1 = function() {
  5962. //         const inputs = document.querySelectorAll('#wizardStep1Form input:not([disabled])');
  5963. //         let allFilled = true;
  5964. //         inputs.forEach(input => {
  5965. //             if (input.value.trim() === '') {
  5966. //                 allFilled = false;
  5967. //             }
  5968. //         });
  5969.         
  5970. //         // Si el checkbox está marcado, no validamos email
  5971. //         if (noEmailCheckbox.checked) {
  5972. //             // Ya está todo listo, email no requerido
  5973. //             nextBtnStep1.disabled = !allFilled;
  5974. //             return;
  5975. //         }
  5976.         
  5977. //         // Si no está marcado, validamos email
  5978. //         const email = emailInput.value.trim();
  5979. //         const emailOk = email !== '' && emailValid;
  5980. //         const allValid = allFilled && emailOk;
  5981. //         nextBtnStep1.disabled = !allValid;
  5982. //     };
  5983.     
  5984. //     // También debemos asegurar que cuando se cargue la página, el estado inicial esté correcto
  5985. //     if (noEmailCheckbox.checked) {
  5986. //         // Si por alguna razón el checkbox está marcado al inicio (no debería), deshabilitamos email
  5987. //         emailInput.disabled = true;
  5988. //         emailInput.removeAttribute('required');
  5989. //         emailValid = true;
  5990. //         noEmailInfo.style.display = 'block';
  5991. //     } else {
  5992. //         emailInput.disabled = false;
  5993. //         emailInput.setAttribute('required', 'required');
  5994. //         noEmailInfo.style.display = 'none';
  5995. //         // Si el campo email ya tiene valor, lo validamos
  5996. //         if (emailInput.value.trim() !== '') {
  5997. //             checkEmail(emailInput.value);
  5998. //         } else {
  5999. //             emailValid = false;
  6000. //         }
  6001. //     }
  6002.     
  6003. //     // Llamar a la función para actualizar el botón inicial
  6004. //     checkFieldsFilledStep1();
  6005.     
  6006. //     // ========== FIN VALIDACIÓN DE CORREO ==========
  6007. // });
  6008. document.addEventListener('DOMContentLoaded', function () {
  6009.     // ========== VARIABLES GLOBALES Y FUNCIONES AUXILIARES ==========
  6010.     let urlParamProcessed = false;
  6011.     let currentEstudioFromUrl = '';
  6012.     let horariosDisponibles = {};
  6014.     // Función para obtener offset de Dallas (opcional, según tu lógica)
  6015.     function obtenerOffsetDallas() {
  6016.         const mesActual = new Date().getMonth() + 1;
  6017.         return (mesActual >= 4 && mesActual <= 10) ? -5 : -6;
  6018.     }
  6020.     function obtenerHoraActualDallas() {
  6021.         const ahoraUTC = new Date();
  6022.         const offsetDallas = obtenerOffsetDallas();
  6023.         const horaDallas = new Date(ahoraUTC.getTime() + offsetDallas * 60 * 60 * 1000);
  6024.         return {
  6025.             horas: horaDallas.getUTCHours(),
  6026.             minutos: horaDallas.getUTCMinutes(),
  6027.             offset: offsetDallas
  6028.         };
  6029.     }
  6031.     function convertir12hA24hEnMinutos(hora12h) {
  6032.         const [horaMin, ampm] = hora12h.split(' ');
  6033.         const [horasStr, minutosStr] = horaMin.split(':');
  6034.         let horas = parseInt(horasStr);
  6035.         const minutos = parseInt(minutosStr);
  6036.         if (ampm.toUpperCase() === 'PM' && horas !== 12) horas += 12;
  6037.         else if (ampm.toUpperCase() === 'AM' && horas === 12) horas = 0;
  6038.         return horas * 60 + minutos;
  6039.     }
  6041.     function filtrarHorasParaHoy(horas, fechaSeleccionada) {
  6042.         const hoy = new Date().toLocaleDateString('en-CA');
  6043.         if (fechaSeleccionada !== hoy) return Promise.resolve(horas);
  6044.         return fetch('/api/hora-actual-servidor')
  6045.             .then(response => response.json())
  6046.             .then(data => {
  6047.                 const [horaStr, minutoStr] = data.hora_servidor.split(':');
  6048.                 const totalMinutosServidor = parseInt(horaStr) * 60 + parseInt(minutoStr);
  6049.                 return horas.filter(horaObj => {
  6050.                     const totalMinutosDisponible = convertir12hA24hEnMinutos(horaObj.hora);
  6051.                     return totalMinutosDisponible >= totalMinutosServidor;
  6052.                 });
  6053.             })
  6054.             .catch(() => {
  6055.                 const ahora = new Date();
  6056.                 const totalMinutosActual = ahora.getHours() * 60 + ahora.getMinutes();
  6057.                 return horas.filter(horaObj => {
  6058.                     const totalMinutosDisponible = convertir12hA24hEnMinutos(horaObj.hora);
  6059.                     return totalMinutosDisponible >= (totalMinutosActual - 15);
  6060.                 });
  6061.             });
  6062.     }
  6064.     function manejarHorasFiltradas(horasFiltradas, horasOriginales, fechaSeleccionada) {
  6065.         const hoy = new Date().toLocaleDateString('en-CA');
  6066.         if (fechaSeleccionada === hoy && horasFiltradas.length === 0) {
  6067.             return {
  6068.                 horas: [],
  6069.                 mensaje: horasOriginales.length > 0 ? getTranslatedText('no_more_times_today') : getTranslatedText('no_availability')
  6070.             };
  6071.         }
  6072.         return { horas: horasFiltradas, mensaje: null };
  6073.     }
  6075.     function switchModal(currentModalId, nextModalId, callback) {
  6076.         const currentModal = bootstrap.Modal.getInstance(document.getElementById(currentModalId));
  6077.         const nextModalElement = document.getElementById(nextModalId);
  6078.         if (currentModal) {
  6079.             document.getElementById(currentModalId).addEventListener('hidden.bs.modal', function handler() {
  6080.                 this.removeEventListener('hidden.bs.modal', handler);
  6081.                 setTimeout(() => {
  6082.                     if (nextModalElement) {
  6083.                         new bootstrap.Modal(nextModalElement).show();
  6084.                         if (callback && typeof callback === 'function') callback();
  6085.                     }
  6086.                 }, 50);
  6087.             });
  6088.             currentModal.hide();
  6089.         } else if (nextModalElement) {
  6090.             new bootstrap.Modal(nextModalElement).show();
  6091.         }
  6092.     }
  6094.     function closeAllModals() {
  6095.         document.querySelectorAll('.modal').forEach(modal => {
  6096.             const instance = bootstrap.Modal.getInstance(modal);
  6097.             if (instance) instance.hide();
  6098.         });
  6099.         document.querySelectorAll('.modal-backdrop').forEach(backdrop => backdrop.remove());
  6100.         document.body.classList.remove('modal-open');
  6101.         document.body.style.overflow = '';
  6102.         document.body.style.paddingRight = '';
  6103.     }
  6105.     function getTranslatedText(key) {
  6106.         const translations = {
  6107.             'select_valid_date': { es: 'Selecciona una fecha válida.', en: 'Select a valid date.' },
  6108.             'select_valid_time': { es: 'Selecciona una hora válida.', en: 'Select a valid time.' },
  6109.             'no_availability': { es: 'Sin disponibilidad', en: 'No availability' },
  6110.             'error_loading_schedules': { es: 'Error al cargar horarios', en: 'Error loading schedules' },
  6111.             'error_saving_appointment': { es: 'Error al guardar la cita', en: 'Error saving appointment' },
  6112.             'date_not_selected': { es: 'Fecha no seleccionada', en: 'Date not selected' },
  6113.             'time_not_selected': { es: 'Hora no seleccionada', en: 'Time not selected' },
  6114.             'time_not_available': { es: 'Hora no disponible', en: 'Time not available' },
  6115.             'appointment_confirmed_success': { es: '✅ Tu cita ha sido confirmada correctamente.', en: '✅ Your appointment has been confirmed successfully.' },
  6116.             'appointment_error': { es: '❌ Hubo un problema al registrar la cita.', en: '❌ There was a problem registering the appointment.' },
  6117.             'patient': { es: 'Paciente:', en: 'Patient:' },
  6118.             'study': { es: 'Estudio:', en: 'Study:' },
  6119.             'date': { es: 'Fecha:', en: 'Date:' },
  6120.             'time': { es: 'Hora:', en: 'Time:' },
  6121.             'dash': { es: '—', en: '—' },
  6122.             'no_more_times_today': { es: 'No hay más horarios disponibles para hoy', en: 'No more available times for today' },
  6123.             'email_prohibited': { es: 'Este correo pertenece a un administrador o proveedor. Por favor usa un correo personal.', en: 'This email belongs to an admin or provider. Please use a personal email.' },
  6124.             'email_required': { es: 'El correo electrónico es obligatorio.', en: 'Email is required.' },
  6125.             'email_invalid': { es: 'Por favor ingresa un correo electrónico válido.', en: 'Please enter a valid email address.' }
  6126.         };
  6127.         const currentLang = document.documentElement.lang || 'es';
  6128.         return translations[key] ? translations[key][currentLang] || translations[key]['es'] : key;
  6129.     }
  6131.     function getUrlParameter(name) {
  6132.         name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
  6133.         const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
  6134.         const results = regex.exec(location.search);
  6135.         return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  6136.     }
  6138.     const estudioFromUrl = getUrlParameter('estudio');
  6139.     currentEstudioFromUrl = estudioFromUrl;
  6141.     const estudioMapping = {
  6142.         'rayos-x': 'rayos-x',
  6143.         'ultrasonido': 'ultrasonido-4d',
  6144.         'tomografia': 'tomografia',
  6145.         'resonancia': 'resonancia',
  6146.         'mamografia': 'mamografia',
  6147.         'nuclear': 'nuclear',
  6148.         'radiografia': 'radiografia',
  6149.         'ultrasonido-abdominal': 'ultrasonido-abdominal',
  6150.         'ultrasonido-mama': 'ultrasonido-mama',
  6151.         'ecocardiograma': 'ecocardiograma',
  6152.         'ultrasonido-musculoesqueletico': 'ultrasonido-musculoesqueletico',
  6153.         'ultrasonido-obstetrico': 'ultrasonido-obstetrico',
  6154.         'arteriografia-venografia': 'arteriografia-venografia',
  6155.         'ultrasonido-intravascular': 'ultrasonido-intravascular',
  6156.         'ultrasonido-vascular-periferico': 'ultrasonido-vascular-periferico',
  6157.         'ultrasonido-vascular': 'ultrasonido-vascular',
  6158.         'ultrasonido-pelvico': 'ultrasonido-pelvico',
  6159.         'ultrasonido-prostata': 'ultrasonido-prostata',
  6160.         'ultrasonido-renal': 'ultrasonido-renal',
  6161.         'ultrasonido-escrotal': 'ultrasonido-escrotal',
  6162.         'ultrasonido-tiroideo': 'ultrasonido-tiroideo'
  6163.     };
  6165.     // ========== ELEMENTOS DEL PASO 1 ==========
  6166.     const formStep1 = document.getElementById('wizardStep1Form');
  6167.     const nextBtnStep1 = document.getElementById('nextBtn');
  6168.     const emailInput = document.getElementById('email');
  6169.     const noEmailCheckbox = document.getElementById('noEmailCheckbox');
  6170.     const noEmailInfo = document.getElementById('noEmailInfo');
  6171.     const emailErrorMessage = document.getElementById('email-error-message');
  6173.     // Variables para validación de email
  6174.     let emailValid = false;
  6175.     let emailCheckTimeout = null;
  6177.     // Funciones auxiliares de email
  6178.     function showEmailError(message) {
  6179.         if (emailErrorMessage) {
  6180.             emailErrorMessage.innerHTML = message;
  6181.             emailErrorMessage.style.display = 'block';
  6182.         }
  6183.         emailValid = false;
  6184.         emailInput.classList.add('is-invalid');
  6185.         emailInput.classList.remove('is-valid');
  6186.     }
  6188.     function clearEmailError() {
  6189.         if (emailErrorMessage) {
  6190.             emailErrorMessage.innerHTML = '';
  6191.             emailErrorMessage.style.display = 'none';
  6192.         }
  6193.         emailInput.classList.remove('is-invalid');
  6194.         emailValid = true;
  6195.     }
  6197.     function checkEmail(email) {
  6198.         if (emailCheckTimeout) clearTimeout(emailCheckTimeout);
  6199.         emailCheckTimeout = setTimeout(() => {
  6200.             fetch(`/api/verificar-correo?email=${encodeURIComponent(email)}`)
  6201.                 .then(response => {
  6202.                     if (!response.ok) throw new Error('Error en la respuesta');
  6203.                     return response.json();
  6204.                 })
  6205.                 .then(data => {
  6206.                     if (data.isProhibited) {
  6207.                         showEmailError(getTranslatedText('email_prohibited'));
  6208.                     } else {
  6209.                         clearEmailError();
  6210.                         emailInput.classList.add('is-valid');
  6211.                     }
  6212.                     checkFieldsFilledStep1(); // actualizar botón después de validación
  6213.                 })
  6214.                 .catch(error => {
  6215.                     console.error('Error verificando correo:', error);
  6216.                     clearEmailError(); // fallback: asumir válido
  6217.                     checkFieldsFilledStep1();
  6218.                 });
  6219.         }, 500);
  6220.     }
  6222.     // ========== FUNCIÓN DE VALIDACIÓN COMPLETA DEL PASO 1 ==========
  6223.     function checkFieldsFilledStep1() {
  6224.         const inputs = document.querySelectorAll('#wizardStep1Form input:not([disabled])');
  6225.         let allFilled = true;
  6226.         inputs.forEach(input => {
  6227.             if (input.value.trim() === '') {
  6228.                 allFilled = false;
  6229.             }
  6230.         });
  6232.         if (noEmailCheckbox.checked) {
  6233.             nextBtnStep1.disabled = !allFilled;
  6234.             return;
  6235.         }
  6237.         const email = emailInput.value.trim();
  6238.         const emailOk = email !== '' && emailValid;
  6239.         const allValid = allFilled && emailOk;
  6240.         nextBtnStep1.disabled = !allValid;
  6241.     }
  6243.     // ========== CONFIGURAR ESTADO INICIAL ==========
  6244.     if (noEmailCheckbox.checked) {
  6245.         emailInput.disabled = true;
  6246.         emailInput.removeAttribute('required');
  6247.         emailValid = true;
  6248.         noEmailInfo.style.display = 'block';
  6249.     } else {
  6250.         emailInput.disabled = false;
  6251.         emailInput.setAttribute('required', 'required');
  6252.         noEmailInfo.style.display = 'none';
  6253.         if (emailInput.value.trim() !== '') {
  6254.             checkEmail(emailInput.value);
  6255.         } else {
  6256.             emailValid = false;
  6257.         }
  6258.     }
  6260.     // ========== ASIGNAR EVENTOS DE VALIDACIÓN ==========
  6261.     // Para todos los campos del formulario
  6262.     if (formStep1) {
  6263.         formStep1.querySelectorAll('input').forEach(input => {
  6264.             input.addEventListener('input', checkFieldsFilledStep1);
  6265.         });
  6266.     }
  6268.     // Checkbox
  6269.     if (noEmailCheckbox) {
  6270.         noEmailCheckbox.addEventListener('change', function () {
  6271.             if (this.checked) {
  6272.                 emailInput.disabled = true;
  6273.                 emailInput.value = '';
  6274.                 emailInput.removeAttribute('required');
  6275.                 emailInput.classList.remove('is-invalid', 'is-valid');
  6276.                 clearEmailError();
  6277.                 noEmailInfo.style.display = 'block';
  6278.                 emailValid = true;
  6279.             } else {
  6280.                 emailInput.disabled = false;
  6281.                 emailInput.setAttribute('required', 'required');
  6282.                 noEmailInfo.style.display = 'none';
  6283.                 if (emailInput.value.trim() !== '') {
  6284.                     checkEmail(emailInput.value);
  6285.                 } else {
  6286.                     clearEmailError();
  6287.                     emailValid = false;
  6288.                 }
  6289.             }
  6290.             checkFieldsFilledStep1();
  6291.         });
  6292.     }
  6294.     // Email input
  6295.     if (emailInput) {
  6296.         emailInput.addEventListener('input', function () {
  6297.             if (!noEmailCheckbox.checked) {
  6298.                 const email = this.value.trim();
  6299.                 if (email === '') {
  6300.                     showEmailError(getTranslatedText('email_required'));
  6301.                     emailValid = false;
  6302.                 } else if (!this.checkValidity()) {
  6303.                     showEmailError(getTranslatedText('email_invalid'));
  6304.                     emailValid = false;
  6305.                 } else {
  6306.                     checkEmail(email);
  6307.                 }
  6308.             }
  6309.             checkFieldsFilledStep1();
  6310.         });
  6311.     }
  6313.     // Llamada inicial
  6314.     checkFieldsFilledStep1();
  6316.     // ========== FUNCIONES PARA PARÁMETROS URL Y MODALES ==========
  6317.     function selectStudyFromUrl() {
  6318.         if (currentEstudioFromUrl && estudioMapping[currentEstudioFromUrl] && !urlParamProcessed) {
  6319.             const studySelect = document.getElementById('studyType');
  6320.             if (studySelect) {
  6321.                 for (let i = 0; i < studySelect.options.length; i++) {
  6322.                     if (studySelect.options[i].value === estudioMapping[currentEstudioFromUrl]) {
  6323.                         studySelect.selectedIndex = i;
  6324.                         const event = new Event('change', { bubbles: true });
  6325.                         studySelect.dispatchEvent(event);
  6326.                         urlParamProcessed = true;
  6327.                         break;
  6328.                     }
  6329.                 }
  6330.             }
  6331.         }
  6332.     }
  6334.     if (estudioFromUrl && estudioMapping[estudioFromUrl]) {
  6335.         setTimeout(() => {
  6336.             const modalElement = document.getElementById('agendarCitaModal');
  6337.             if (modalElement) new bootstrap.Modal(modalElement).show();
  6338.         }, 1000);
  6339.     }
  6341.     document.querySelectorAll('[data-estudio]').forEach(button => {
  6342.         button.addEventListener('click', function (e) {
  6343.             e.preventDefault();
  6344.             const estudio = this.getAttribute('data-estudio');
  6345.             const url = new URL(window.location);
  6346.             url.searchParams.set('estudio', estudio);
  6347.             window.history.replaceState({}, '', url);
  6348.             currentEstudioFromUrl = estudio;
  6349.             urlParamProcessed = false;
  6350.             closeAllModals();
  6351.             const modalElement = document.getElementById('agendarCitaModal');
  6352.             if (modalElement) new bootstrap.Modal(modalElement).show();
  6353.         });
  6354.     });
  6356.     if (nextBtnStep1) {
  6357.         nextBtnStep1.addEventListener('click', () => {
  6358.             if (formStep1) {
  6359.                 formStep1.classList.add('was-validated');
  6360.                 if (formStep1.checkValidity()) {
  6361.                     switchModal('agendarCitaModal', 'agendarCitaPaso2', selectStudyFromUrl);
  6362.                 }
  6363.             }
  6364.         });
  6365.     }
  6367.     // Paso 2
  6368.     const formStep2 = document.getElementById('wizardStep2Form');
  6369.     const studySelect = document.getElementById('studyType');
  6370.     const nextBtnStep2 = document.getElementById('nextStepBtn');
  6371.     const prevBtnStep2 = document.getElementById('prevStepBtn');
  6373.     if (studySelect && nextBtnStep2) {
  6374.         studySelect.addEventListener('change', () => {
  6375.             nextBtnStep2.disabled = studySelect.value === '';
  6376.         });
  6377.         nextBtnStep2.disabled = studySelect.value === '';
  6378.     }
  6380.     if (nextBtnStep2) {
  6381.         nextBtnStep2.addEventListener('click', () => {
  6382.             if (formStep2) {
  6383.                 formStep2.classList.add('was-validated');
  6384.                 if (formStep2.checkValidity()) {
  6385.                     const resumenNombre = document.getElementById('resumenNombre');
  6386.                     const resumenEstudio = document.getElementById('resumenEstudio');
  6387.                     const firstName = document.getElementById('firstName');
  6388.                     const lastName = document.getElementById('lastName');
  6389.                     if (resumenNombre && firstName && lastName) resumenNombre.textContent = firstName.value + ' ' + lastName.value;
  6390.                     if (resumenEstudio && studySelect) resumenEstudio.textContent = studySelect.options[studySelect.selectedIndex].text;
  6391.                     switchModal('agendarCitaPaso2', 'agendarCitaPaso3');
  6392.                 }
  6393.             }
  6394.         });
  6395.     }
  6397.     if (prevBtnStep2) {
  6398.         prevBtnStep2.addEventListener('click', () => {
  6399.             switchModal('agendarCitaPaso2', 'agendarCitaModal');
  6400.         });
  6401.     }
  6403.     // Paso 3
  6404.     const formStep3 = document.getElementById('wizardStep3Form');
  6405.     const confirmBtn = document.getElementById('confirmBtn');
  6406.     const dateSelect = document.getElementById('preferredDate');
  6407.     const timeSelect = document.getElementById('preferredTime');
  6408.     const prevBtnStep3 = document.getElementById('prevStep3Btn');
  6410.     function setMinDate() {
  6411.         if (dateSelect) {
  6412.             const today = new Date().toISOString().split('T')[0];
  6413.             dateSelect.setAttribute('min', today);
  6414.         }
  6415.     }
  6416.     setMinDate();
  6418.     function getHoraLegible(timeId) {
  6419.         return horariosDisponibles[timeId] || getTranslatedText('time_not_available');
  6420.     }
  6422.     function updateResumenStep3() {
  6423.         const resumenFecha = document.getElementById('resumenFecha');
  6424.         const resumenHora = document.getElementById('resumenHora');
  6425.         if (resumenFecha && dateSelect) resumenFecha.textContent = dateSelect.value || getTranslatedText('dash');
  6426.         if (resumenHora && timeSelect) {
  6427.             resumenHora.textContent = timeSelect.value ? getHoraLegible(timeSelect.value) : getTranslatedText('dash');
  6428.         }
  6429.     }
  6431.     function checkStep3Validity() {
  6432.         const valid = dateSelect && dateSelect.value && timeSelect && timeSelect.value;
  6433.         if (confirmBtn) confirmBtn.disabled = !valid;
  6434.         updateResumenStep3();
  6435.     }
  6437.     if (dateSelect) {
  6438.         dateSelect.addEventListener('change', function () {
  6439.             const fecha = this.value;
  6440.             if (timeSelect) {
  6441.                 const [year, month, day] = fecha.split('-').map(Number);
  6442.                 const dateObj = new Date(year, month - 1, day);
  6443.                 const diaSemana = dateObj.getDay();
  6444.                 const diasCerrados = [0, 2, 4];
  6445.                 if (diasCerrados.includes(diaSemana)) {
  6446.                     timeSelect.innerHTML = '';
  6447.                     timeSelect.disabled = false;
  6448.                     const option = document.createElement('option');
  6449.                     option.textContent = 'Cerrado (día no laborable)';
  6450.                     option.disabled = true;
  6451.                     timeSelect.appendChild(option);
  6452.                     if (typeof checkStep3Validity === 'function') checkStep3Validity();
  6453.                     return;
  6454.                 }
  6456.                 timeSelect.innerHTML = '';
  6457.                 timeSelect.disabled = true;
  6458.                 const loadingOption = document.createElement('option');
  6459.                 loadingOption.textContent = 'Cargando horarios...';
  6460.                 loadingOption.disabled = true;
  6461.                 timeSelect.appendChild(loadingOption);
  6463.                 fetch(`/admin/horario/horarios-disponibles/${fecha}`)
  6464.                     .then(response => {
  6465.                         if (!response.ok) throw new Error('Error al cargar horarios');
  6466.                         return response.json();
  6467.                     })
  6468.                     .then(horas => filtrarHorasParaHoy(horas, fecha))
  6469.                     .then(horasFiltradas => {
  6470.                         timeSelect.innerHTML = '';
  6471.                         horariosDisponibles = {};
  6472.                         if (horasFiltradas.length === 0) {
  6473.                             const option = document.createElement('option');
  6474.                             option.textContent = getTranslatedText('no_availability');
  6475.                             option.disabled = true;
  6476.                             timeSelect.appendChild(option);
  6477.                         } else {
  6478.                             const defaultOption = document.createElement('option');
  6479.                             defaultOption.value = '';
  6480.                             defaultOption.textContent = getTranslatedText('select_valid_time');
  6481.                             defaultOption.disabled = true;
  6482.                             defaultOption.selected = true;
  6483.                             timeSelect.appendChild(defaultOption);
  6484.                             horasFiltradas.forEach(horaObj => {
  6485.                                 const option = document.createElement('option');
  6486.                                 option.value = horaObj.id;
  6487.                                 option.textContent = horaObj.hora;
  6488.                                 if (horaObj.estado === 'disponible') {
  6489.                                     horariosDisponibles[horaObj.id] = horaObj.hora;
  6490.                                     option.textContent += ` (${getTranslatedText('Disponible')})`;
  6491.                                 } else if (horaObj.estado === 'ocupado') {
  6492.                                     option.disabled = true;
  6493.                                     option.style.opacity = '0.5';
  6494.                                     option.textContent += ` (${getTranslatedText('Ocupado')})`;
  6495.                                 } else if (horaObj.estado === 'cerrado') {
  6496.                                     option.disabled = true;
  6497.                                     option.style.opacity = '0.4';
  6498.                                     option.textContent += ` (${getTranslatedText('Cerrado')})`;
  6499.                                 }
  6500.                                 timeSelect.appendChild(option);
  6501.                             });
  6502.                         }
  6503.                         timeSelect.disabled = false;
  6504.                         checkStep3Validity();
  6505.                     })
  6506.                     .catch(error => {
  6507.                         console.error('Error en carga de horarios:', error);
  6508.                         timeSelect.innerHTML = '';
  6509.                         const option = document.createElement('option');
  6510.                         option.textContent = getTranslatedText('error_loading_schedules');
  6511.                         option.disabled = true;
  6512.                         timeSelect.appendChild(option);
  6513.                         timeSelect.disabled = false;
  6514.                         checkStep3Validity();
  6515.                     });
  6516.             }
  6517.         });
  6518.     }
  6520.     if (timeSelect) timeSelect.addEventListener('change', checkStep3Validity);
  6522.     if (confirmBtn) {
  6523.         confirmBtn.addEventListener('click', () => {
  6524.             if (formStep3) {
  6525.                 formStep3.classList.add('was-validated');
  6526.                 if (formStep3.checkValidity()) {
  6527.                     const fechaSeleccionada = document.getElementById('preferredDate').value;
  6528.                     const horaIdSeleccionada = document.getElementById('preferredTime').value;
  6529.                     const horaSeleccionada = getHoraLegible(horaIdSeleccionada);
  6530.                     const payload = {
  6531.                         user: {
  6532.                             name: document.getElementById('firstName').value,
  6533.                             lastName: document.getElementById('lastName').value,
  6534.                             email: document.getElementById('email').value,
  6535.                             phone: document.getElementById('phone').value,
  6536.                             birthDate: document.getElementById('birthDate').value || null,
  6537.                             generateAutoEmail: document.getElementById('noEmailCheckbox').checked 
  6538.                         },
  6539.                         cita: {
  6540.                             fecha: fechaSeleccionada,
  6541.                             horarioId: horaIdSeleccionada,
  6542.                             tipoEstudio: document.getElementById('studyType').value,
  6543.                             notas: document.getElementById('observaciones').value,
  6544.                             origen: currentEstudioFromUrl ? 'url_param' : 'directo'
  6545.                         }
  6546.                     };
  6547.                     fetch('/api/confirmar-cita', {
  6548.                         method: 'POST',
  6549.                         headers: { 'Content-Type': 'application/json' },
  6550.                         body: JSON.stringify(payload)
  6551.                     })
  6552.                         .then(response => {
  6553.                             if (!response.ok) throw new Error(getTranslatedText('error_saving_appointment'));
  6554.                             return response.json();
  6555.                         })
  6556.                         .then(() => {
  6557.                             closeAllModals();
  6558.                             setTimeout(() => {
  6559.                                 mostrarModalConfirmacion(fechaSeleccionada, horaSeleccionada);
  6560.                                 if (typeof addFlash === 'function') addFlash('success', getTranslatedText('appointment_confirmed_success'));
  6561.                             }, 100);
  6562.                         })
  6563.                         .catch(error => {
  6564.                             console.error('Error al guardar cita:', error);
  6565.                             closeAllModals();
  6566.                             setTimeout(() => {
  6567.                                 mostrarModalConfirmacion(fechaSeleccionada, horaSeleccionada);
  6568.                                 if (typeof addFlash === 'function') addFlash('danger', getTranslatedText('appointment_error'));
  6569.                             }, 100);
  6570.                         });
  6571.                 }
  6572.             }
  6573.         });
  6574.     }
  6576.     function mostrarModalConfirmacion(fecha, hora) {
  6577.         let fechaFormateada = getTranslatedText('date_not_selected');
  6578.         if (fecha) {
  6579.             try {
  6580.                 const currentLang = document.documentElement.lang || 'es';
  6581.                 const [year, month, day] = fecha.split('-').map(Number);
  6582.                 const dateObj = new Date(year, month - 1, day); // mes 0-index
  6583.                 const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  6584.                 fechaFormateada = dateObj.toLocaleDateString(currentLang, options);
  6585.                 fechaFormateada = fechaFormateada.charAt(0).toUpperCase() + fechaFormateada.slice(1);
  6586.             } catch (e) {
  6587.                 fechaFormateada = fecha;
  6588.             }
  6589.         }
  6590.         const fechaElement = document.getElementById('fechaCitaConfirmada');
  6591.         const horaElement = document.getElementById('horaCitaConfirmada');
  6592.         const emailElement = document.getElementById('emailCitaConfirmada');
  6593.         const emailInput = document.getElementById('email');
  6594.         if (fechaElement) fechaElement.textContent = fechaFormateada;
  6595.         if (horaElement) horaElement.textContent = hora || getTranslatedText('time_not_selected');
  6596.         if (emailElement && emailInput) emailElement.textContent = emailInput.value;
  6597.         const confirmacionModalElement = document.getElementById('confirmacionFinalModal');
  6598.         if (confirmacionModalElement) {
  6599.             const confirmacionModal = new bootstrap.Modal(confirmacionModalElement);
  6600.             confirmacionModal.show();
  6601.             confirmacionModalElement.addEventListener('hidden.bs.modal', function () {
  6602.                 resetAllForms();
  6603.             });
  6604.         }
  6605.     }
  6607.     function resetAllForms() {
  6608.         if (formStep1) {
  6609.             formStep1.reset();
  6610.             formStep1.classList.remove('was-validated');
  6611.         }
  6612.         if (formStep2) {
  6613.             formStep2.reset();
  6614.             formStep2.classList.remove('was-validated');
  6615.         }
  6616.         if (formStep3) {
  6617.             formStep3.reset();
  6618.             formStep3.classList.remove('was-validated');
  6619.         }
  6620.         if (nextBtnStep1) nextBtnStep1.disabled = true;
  6621.         if (nextBtnStep2) nextBtnStep2.disabled = true;
  6622.         if (confirmBtn) confirmBtn.disabled = true;
  6623.         if (currentEstudioFromUrl) {
  6624.             const url = new URL(window.location);
  6625.             url.searchParams.delete('estudio');
  6626.             window.history.replaceState({}, '', url);
  6627.             currentEstudioFromUrl = '';
  6628.             urlParamProcessed = false;
  6629.         }
  6630.     }
  6632.     if (prevBtnStep3) {
  6633.         prevBtnStep3.addEventListener('click', () => {
  6634.             switchModal('agendarCitaPaso3', 'agendarCitaPaso2');
  6635.         });
  6636.     }
  6638.     // Manejo de modales
  6639.     document.querySelectorAll('.modal').forEach(modal => {
  6640.         modal.addEventListener('show.bs.modal', function () {
  6641.             const existingBackdrops = document.querySelectorAll('.modal-backdrop');
  6642.             if (existingBackdrops.length > 1) {
  6643.                 existingBackdrops.forEach((backdrop, index) => {
  6644.                     if (index > 0) backdrop.remove();
  6645.                 });
  6646.             }
  6647.         });
  6648.         modal.addEventListener('hidden.bs.modal', function () {
  6649.             const openModals = document.querySelectorAll('.modal.show');
  6650.             if (openModals.length === 0) {
  6651.                 document.querySelectorAll('.modal-backdrop').forEach(backdrop => backdrop.remove());
  6652.                 document.body.classList.remove('modal-open');
  6653.                 document.body.style.overflow = '';
  6654.                 document.body.style.paddingRight = '';
  6655.             }
  6656.         });
  6657.     });
  6658. });
  6659. </script>
  6661. {% endblock %}