Symfony Profiler

<footer class="footer-medico-profesional">
<div class="container-xl">

<div class="footer-main-content">
<div class="footer-grid-layout">

<div class="footer-brand-section">
<div class="brand-container">
<div class="brand-header">
<div class="brand-logo-container">
<img src="{{ asset('images/logo-clinica-dark.png') }}" alt="ImagingPro - Centro de Diagnóstico" class="logo-img">
</div>
</div>
<p class="brand-description-text">
<span class="text-content" data-lang="es">Líderes en diagnóstico por imágenes médicas con más de 25 años de experiencia y tecnología de vanguardia.</span>
<span class="text-content" data-lang="en" style="display:none;">Leaders in medical imaging diagnosis with over 25 years of experience and cutting-edge technology.</span>
</p>
</div>

<div class="contact-info-section">
<div class="contact-item">
<i class="bi bi-telephone contact-icon"></i>
<span class="contact-text">+1 817-264-7814</span>
</div>
<div class="contact-item">
<i class="bi bi-envelope contact-icon"></i>
<span class="contact-text">imagingprodallas@gmail.com</span>
</div>
<div class="contact-item">
<i class="bi bi-clock contact-icon"></i>
<span class="contact-text">
<span class="text-content" data-lang="es">
<span style="font-weight: 600;">10:00 a.m. – 6:00 p.m.</span><br>
<small style="opacity: 0.8;">Lunes, miércoles, viernes y sábados</small>
</span>
<span class="text-content" data-lang="en" style="display:none;">
<span style="font-weight: 600;">10:00 a.m. – 6:00 p.m.</span><br>
<small style="opacity: 0.8;">Monday, Wednesday, Friday & Saturday</small>
</span>
</span>
</div>
</div>

<div class="social-media-section">
<h6 class="social-section-title">
<span class="text-content" data-lang="es">Conecta con Nosotros</span>
<span class="text-content" data-lang="en" style="display:none;">Connect With Us</span>
</h6>
<div class="social-icons-container">
<a href="#" class="social-media-link" aria-label="Facebook">
<i class="bi bi-facebook"></i>
</a>
<a href="#" class="social-media-link" aria-label="Twitter">
<i class="bi bi-twitter-x"></i>
</a>
<a href="#" class="social-media-link" aria-label="LinkedIn">
<i class="bi bi-linkedin"></i>
</a>
<a href="#" class="social-media-link" aria-label="Instagram">
<i class="bi bi-instagram"></i>
</a>
</div>
</div>
</div>

<div class="footer-services-column">
<h4 class="services-column-title">
<span class="text-content" data-lang="es">Radiología</span>
<span class="text-content" data-lang="en" style="display:none;">Radiology</span>
</h4>
<ul class="services-list">
<li><a href="#rayos-x" class="service-link">
<span class="text-content" data-lang="es">Rayos X Digital</span>
<span class="text-content" data-lang="en" style="display:none;">Digital X-Ray</span>
</a></li>
<li><a href="#radiografia" class="service-link">
<span class="text-content" data-lang="es">Radiografía</span>
<span class="text-content" data-lang="en" style="display:none;">Radiography</span>
</a></li>
<li><a href="#mamografia" class="service-link">
<span class="text-content" data-lang="es">Mamografía</span>
<span class="text-content" data-lang="en" style="display:none;">Mammography</span>
</a></li>
<li><a href="#arteriografia-venografia" class="service-link">
<span class="text-content" data-lang="es">Arteriografía/Venografía</span>
<span class="text-content" data-lang="en" style="display:none;">Arteriography/Venography</span>
</a></li>
</ul>
</div>

<div class="footer-services-column">
<h4 class="services-column-title">
<span class="text-content" data-lang="es">Ultrasonidos</span>
<span class="text-content" data-lang="en" style="display:none;">Ultrasounds</span>
</h4>
<ul class="services-list">
<li><a href="#u-4D" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido 4D</span>
<span class="text-content" data-lang="en" style="display:none;">4D Ultrasound</span>
</a></li>
<li><a href="#u-abdominal" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Abdominal</span>
<span class="text-content" data-lang="en" style="display:none;">Abdominal Ultrasound</span>
</a></li>
<li><a href="#u-mama" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Mama</span>
<span class="text-content" data-lang="en" style="display:none;">Breast Ultrasound</span>
</a></li>
<li><a href="#u-pelvico" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Pelvico</span>
<span class="text-content" data-lang="en" style="display:none;">Pelvic Ultrasound</span>
</a></li>
<li><a href="#u-prostata" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Prostata</span>
<span class="text-content" data-lang="en" style="display:none;">Prostate Ultrasound</span>
</a></li>
<li><a href="#u-renal" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Renal</span>
<span class="text-content" data-lang="en" style="display:none;">Renal Ultrasound</span>
</a></li>
<li><a href="#u-escrotal" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Escrotal</span>
<span class="text-content" data-lang="en" style="display:none;">Scrotal Ultrasound</span>
</a></li>
<li><a href="#u-tiroidea" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Tiroideo</span>
<span class="text-content" data-lang="en" style="display:none;">Thyroid Ultrasound</span>
</a></li>
</ul>
</div>

<div class="footer-services-column">
<h4 class="services-column-title">
<span class="text-content" data-lang="es">Estudios Avanzados</span>
<span class="text-content" data-lang="en" style="display:none;">Advanced Studies</span>
</h4>
<ul class="services-list">
<li><a href="#tomografia" class="service-link">
<span class="text-content" data-lang="es">Tomografía</span>
<span class="text-content" data-lang="en" style="display:none;">Tomography</span>
</a></li>
<li><a href="#resonancia" class="service-link">
<span class="text-content" data-lang="es">Resonancia Magnética</span>
<span class="text-content" data-lang="en" style="display:none;">Magnetic Resonance</span>
</a></li>
<li><a href="#nuclear" class="service-link">
<span class="text-content" data-lang="es">Medicina Nuclear</span>
<span class="text-content" data-lang="en" style="display:none;">Nuclear Medicine</span>
</a></li>
<li><a href="#ecocardiograma" class="service-link">
<span class="text-content" data-lang="es">Ecocardiograma</span>
<span class="text-content" data-lang="en" style="display:none;">Echocardiogram</span>
</a></li>
<li><a href="#u-musculoesqueletico" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Musculoesquelético</span>
<span class="text-content" data-lang="en" style="display:none;">Musculoskeletal Ultrasound</span>
</a></li>
<li><a href="#u-obstetrico" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Obstétrico</span>
<span class="text-content" data-lang="en" style="display:none;">Obstetric Ultrasound</span>
</a></li>
</ul>
</div>

<div class="footer-services-column">
<h4 class="services-column-title">
<span class="text-content" data-lang="es">Estudios Vasculares</span>
<span class="text-content" data-lang="en" style="display:none;">Vascular Studies</span>
</h4>
<ul class="services-list">
<li><a href="#u-vascular" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Vascular</span>
<span class="text-content" data-lang="en" style="display:none;">Vascular Ultrasound</span>
</a></li>
<li><a href="#u-vascular-periferico" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Vascular Periférico</span>
<span class="text-content" data-lang="en" style="display:none;">Peripheral Vascular Ultrasound</span>
</a></li>
<li><a href="#u-intravascular" class="service-link">
<span class="text-content" data-lang="es">Ultrasonido Intravascular</span>
<span class="text-content" data-lang="en" style="display:none;">Intravascular Ultrasound</span>
</a></li>
</ul>

<h4 class="services-column-title quick-links-title">
<span class="text-content" data-lang="es">Navegación</span>
<span class="text-content" data-lang="en" style="display:none;">Navigation</span>
</h4>
<ul class="services-list">
<li><a href="{{ path('home_index') }}" class="service-link">
<span class="text-content" data-lang="es">Inicio</span>
<span class="text-content" data-lang="en" style="display:none;">Home</span>
</a></li>
<li><a href="{{ path('home_index') }}#servicios" class="service-link">
<span class="text-content" data-lang="es">Servicios</span>
<span class="text-content" data-lang="en" style="display:none;">Services</span>
</a></li>
<li><a href="{{ path('home_index') }}#experiencia" class="service-link">
<span class="text-content" data-lang="es">Excelencia Médica</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Excellence</span>
</a></li>
<li><a href="{{ path('home_index') }}#contacto" class="service-link">
<span class="text-content" data-lang="es">Contacto</span>
<span class="text-content" data-lang="en" style="display:none;">Contact</span>
</a></li>
<li><a href="{{ path('home_index') }}#formas-medicas" class="service-link">
<span class="text-content" data-lang="es">Formas Médicas</span>
<span class="text-content" data-lang="en" style="display:none;">Medical Forms</span>
</a></li>
</ul>
</div>
</div>
</div>

<div class="footer-divider-line"></div>

<div class="footer-bottom-section">
<div class="footer-bottom-content">
<div class="copyright-info">
<p class="copyright-text">
<span class="text-content" data-lang="es">© 2025 ImagingPro Centro de Diagnóstico. Todos los derechos reservados.</span>
<span class="text-content" data-lang="en" style="display:none;">© 2025 ImagingPro Diagnostic Center. All rights reserved.</span>
</p>
<p class="footer-motto">
<span class="text-content" data-lang="es">Especializados con tecnología de vanguardia para brindar la mejor experiencia médica.</span>
<span class="text-content" data-lang="en" style="display:none;">Specialized with cutting-edge technology to provide the best medical experience.</span>
</p>
</div>
<div class="legal-links-section">
<a href="#privacidad" class="legal-link-item">
<span class="text-content" data-lang="es">Política de Privacidad</span>
<span class="text-content" data-lang="en" style="display:none;">Privacy Policy</span>
</a>
<span class="link-separator">|</span>
<a href="#terminos" class="legal-link-item">
<span class="text-content" data-lang="es">Términos de Uso</span>
<span class="text-content" data-lang="en" style="display:none;">Terms of Use</span>
</a>
</div>
</div>
</div>
</div>
</footer>
<style>
/* FOOTER STYLES - Usando SOLO las variables de tu paleta */
/* Footer principal */
.footer-medico-profesional {
background: linear-gradient(135deg, var(--footer-dark) 0%, var(--footer-darker) 100%);
color: var(--bg-white);
position: relative;
overflow: hidden;
border-top: 1px solid var(--border-light);
margin-top: auto;
}
.footer-medico-profesional::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--footer-light-blue), transparent);
}
/* Contenido principal */
.footer-main-content {
padding: 4rem 0 2.5rem;
}
.footer-grid-layout {
display: grid;
grid-template-columns: 2.2fr 1fr 1fr 1fr 1.2fr;
gap: 2.5rem;
align-items: start;
}
/* Branding section */
.footer-brand-section {
padding-right: 1.5rem;
}
.brand-container {
margin-bottom: 2rem;
}
.brand-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.brand-logo-container {
width: 345px;
height: 145px;
display: flex;
align-items: center;
justify-content: center;
margin-left: -20px;
}
.brand-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.brand-text-content {
display: flex;
flex-direction: column;
}
.brand-main-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
color: var(--bg-white);
letter-spacing: -0.5px;
}
.brand-subtitle-accent {
font-size: 0.85rem;
color: var(--footer-light-blue);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.brand-description-text {
color: var(--text-light);
line-height: 1.6;
font-size: 0.95rem;
margin: 0;
}
/* Información de contacto */
.contact-info-section {
margin-bottom: 2rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--text-light);
font-size: 0.9rem;
}
.contact-icon {
color: var(--accent-teal);
width: 16px;
font-size: 0.9rem;
}
.contact-text {
font-weight: 500;
}
/* Redes sociales */
.social-media-section {
margin-top: 2rem;
}
.social-section-title {
color: var(--bg-white);
margin-bottom: 1rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.social-icons-container {
display: flex;
gap: 0.75rem;
}
.social-media-link {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
color: var(--text-light);
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid var(--border-light);
position: relative;
overflow: hidden;
}
.social-media-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s ease;
}
.social-media-link:hover {
background: var(--footer-light-blue);
color: var(--bg-white);
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
border-color: var(--footer-light-blue);
}
.social-media-link:hover::before {
left: 100%;
}
/* Columnas de servicios */
.footer-services-column {
display: flex;
flex-direction: column;
}
.services-column-title {
color: var(--bg-white);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.75rem;
}
.services-column-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 35px;
height: 3px;
background: linear-gradient(90deg, var(--footer-light-blue), var(--accent-teal));
border-radius: 3px;
}
.quick-links-title {
margin-top: 2rem;
}
.services-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.service-link {
display: block;
color: var(--text-light);
text-decoration: none;
font-size: 0.9rem;
padding: 0.5rem 0;
transition: all 0.3s ease;
position: relative;
padding-left: 0;
border-left: 2px solid transparent;
}
.service-link:hover {
color: var(--bg-white);
transform: translateX(8px);
border-left-color: var(--accent-teal);
padding-left: 1rem;
}
/* Divisor */
.footer-divider-line {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-light), transparent);
margin: 1.5rem 0;
}
/* Footer inferior */
.footer-bottom-section {
padding: 1.5rem 0;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.copyright-info {
flex: 1;
min-width: 300px;
}
.copyright-text {
color: var(--text-light);
margin: 0 0 0.5rem 0;
font-size: 0.9rem;
font-weight: 500;
}
.footer-motto {
color: var(--text-light);
margin: 0;
font-size: 0.85rem;
font-style: italic;
}
.legal-links-section {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.legal-link-item {
color: var(--text-light);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.3s ease;
font-weight: 500;
}
.legal-link-item:hover {
color: var(--footer-light-blue);
}
.link-separator {
color: var(--border-light);
font-size: 0.85rem;
}
/* Responsive */
@media (max-width: 1200px) {
.footer-grid-layout {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 2rem;
}
.footer-services-column:last-child {
grid-column: 1 / -1;
margin-top: 2rem;
}
}
@media (max-width: 992px) {
.footer-grid-layout {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
.footer-brand-section {
grid-column: 1 / -1;
padding-right: 0;
}
.footer-main-content {
padding: 3rem 0 2rem;
}
}
@media (max-width: 768px) {
.footer-grid-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.copyright-info {
min-width: auto;
}
.legal-links-section {
justify-content: center;
}
.brand-header {
justify-content: center;
text-align: center;
flex-direction: column;
gap: 0.75rem;
}
.social-icons-container {
justify-content: center;
}
}
@media (max-width: 576px) {
.footer-medico-profesional {
padding: 2rem 0;
}
.footer-main-content {
padding: 2rem 0 1.5rem;
}
.service-link:hover {
transform: none;
padding-left: 0.5rem;
}
.brand-logo-container {
padding: 10px;
}
}
</style>

templates/footer.html.twig line 1