/* Power Med - Estilos principales */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap'); /* Variables CSS personalizadas */ :root { --primary: #00a88c; --primary-dark: #007a6b; --background-light: #f5f8f8; --background-dark: #0f2320; --text-light: #0F2320; --text-dark: #ffffff; --text-muted-light: #6b7280; --text-muted-dark: #9ca3af; --border-light: #e5e7eb; --border-dark: #374151; } /* Reset y estilos base */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--text-light); background-color: var(--background-light); } /* Tipografía */ .font-title { font-family: 'Montserrat', sans-serif; } .font-body { font-family: 'Inter', sans-serif; } /* Títulos con estilo consistente */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.2; text-transform: capitalize; } h1 { font-size: 2.5rem; font-weight: 900; } h2 { font-size: 2rem; font-weight: 700; } h3 { font-size: 1.5rem; font-weight: 700; } /* Enlaces */ a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-dark); } /* Botones */ .btn-primary { background-color: var(--primary); color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: 2px solid var(--primary); font-weight: 700; text-transform: uppercase; /* Asegura 14px (0.875rem) en todos los botones principales */ font-size: 0.875rem; transition: all 0.2s ease; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: white; } /* Contenedores */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* Grid responsivo */ .grid-responsive { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } /* Utilidades */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } /* Responsive */ @media (max-width: 768px) { .container { padding: 0 0.75rem; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } .btn-primary { padding: 0.625rem 1.25rem; font-size: 0.875rem; } } /* Dark mode */ @media (prefers-color-scheme: dark) { body { background-color: var(--background-dark); color: var(--text-dark); } .container { color: var(--text-dark); } } /* Animaciones suaves */ * { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } /* Tablas con separadores verticales entre columnas */ .table-vertical-grid th:not(:last-child), .table-vertical-grid td:not(:last-child) { border-right: 1px solid var(--border-light); } /* --------------------------------------------- Forzar navbar móvil en teléfonos horizontales Cuando tenga la clase .pm-force-mobile-nav: - Ocultar navegación de escritorio - Mostrar botón de menú móvil - Asegurar estilos móviles coherentes ---------------------------------------------- */ html.pm-force-mobile-nav .navbar nav { display: none !important; /* oculta .md:flex de Tailwind */ } html.pm-force-mobile-nav .navbar .mobile-menu-button { display: inline-flex !important; /* anula md:hidden */ } /* La mobile menu debe poder abrirse aunque exista md:hidden */ html.pm-force-mobile-nav .navbar .mobile-menu { border-top: 1px solid var(--border-light); } html.pm-force-mobile-nav .navbar .mobile-menu.hidden { display: none !important; } html.pm-force-mobile-nav .navbar .mobile-menu:not(.hidden) { display: block !important; } /* Mantener CTA visible según sus utilidades (no ocultarlo en modo forzado) */ /* En teléfonos horizontales (modo forzado), ocultar SOLO el CTA del topbar. El CTA dentro del menú móvil (dentro de .mobile-menu) permanece visible al abrirse. */ html.pm-force-mobile-nav .navbar .flex.h-16 .btn-primary { display: none !important; } /* --------------------------------------------- Nosotros: Animación de logos (solo pantallas grandes) - Aumenta tamaño y agrega sombra al hover - Suaviza entrada/salida con transición - Mantiene layout estable usando transform (no reflow) ---------------------------------------------- */ @media (min-width: 1024px) { /* Contenedor base: estilos aplican a sus elementos */ .clientes-logos li { position: relative; /* para z-index controlado en hover */ will-change: transform, box-shadow; /* hint de rendimiento */ transition: transform 220ms ease, box-shadow 220ms ease, border-color 200ms ease, background-color 200ms ease; } /* Suavizar también las imágenes para que no pixelen al escalar */ .clientes-logos img { transition: transform 220ms ease, filter 220ms ease; image-rendering: auto; transform-origin: center center; } /* Efecto hover: escalar contenedor ligeramente y elevar con sombra */ .clientes-logos li:hover { transform: scale(1.08); z-index: 5; /* elevar sobre vecinos para que la sombra no se recorte */ box-shadow: 0 10px 20px rgba(0,0,0,0.12), 0 6px 6px rgba(0,0,0,0.08); background-color: #ffffff; /* refuerza contraste de los logos */ border-color: var(--primary); } /* Escala sutil adicional al logo para ganar legibilidad */ .clientes-logos li:hover img { transform: scale(1.03); filter: none; } } /* Respeta preferencias del usuario que reduce movimiento */ @media (prefers-reduced-motion: reduce) { .clientes-logos li, .clientes-logos img { transition: none !important; } } /* ------------------------------------------------- Fallback para utilidad Tailwind `aspect-square` Garantiza relación 1:1 sin cambiar el HTML -------------------------------------------------- */ .aspect-square { aspect-ratio: 1 / 1; } /* ------------------------------------------------- Catálogo: hacer circulares los "cuadros" de apoyo sin cambiar el HTML (override utilidades de altura) -------------------------------------------------- */ #catalogo .md\:col-span-4 .overflow-hidden { aspect-ratio: 1 / 1; /* cuadrado -> círculo con border-radius */ border-radius: 9999px !important; /* anula rounded-lg */ height: auto !important; /* anula h-20 / md:h-28 / hover:h-* */ } /* Ajuste horizontal: 2º y 4º círculos (a la derecha) un poco más a la derecha */ #catalogo .md\:col-span-4 > div:nth-child(3).overflow-hidden, #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] > div:nth-child(3).overflow-hidden { /* Tailwind usa variables CSS para transform: sobreescribimos solo el translate-x */ --tw-translate-x: 1rem !important; /* base ~16px */ } #catalogo .md\:col-span-4 > div:nth-child(5).overflow-hidden, #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] > div:nth-child(5).overflow-hidden { --tw-translate-x: 1.25rem !important; /* un poco más en el 4º círculo */ } @media (min-width: 640px) { /* sm */ #catalogo .md\:col-span-4 > div:nth-child(3).overflow-hidden, #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] > div:nth-child(3).overflow-hidden { --tw-translate-x: 1.25rem !important; } #catalogo .md\:col-span-4 > div:nth-child(5).overflow-hidden, #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] > div:nth-child(5).overflow-hidden { --tw-translate-x: 1.5rem !important; } } @media (min-width: 768px) { /* md */ #catalogo .md\:col-span-4 > div:nth-child(3).overflow-hidden, #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] > div:nth-child(3).overflow-hidden { --tw-translate-x: 1.5rem !important; } #catalogo .md\:col-span-4 > div:nth-child(5).overflow-hidden, #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] > div:nth-child(5).overflow-hidden { --tw-translate-x: 1.75rem !important; } } /* Refuerzo con desplazamiento por left (sin tocar transform) */ /* Centrar 2º y 4º círculos y empujarlos levemente a la derecha */ #catalogo .md\:col-span-4 > div:nth-child(3).overflow-hidden, #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] > div:nth-child(3).overflow-hidden, #catalogo .md\:col-span-4 > div:nth-child(5).overflow-hidden, #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] > div:nth-child(5).overflow-hidden { margin-left: auto !important; margin-right: auto !important; /* centra el círculo */ position: relative; left: 0 !important; /* evita drift por left previo */ } #catalogo .md\:col-span-4 .overflow-hidden:hover { height: auto !important; /* mantiene el círculo en hover */ } #catalogo .md\:col-span-4 .overflow-hidden img { width: 100%; height: 100%; object-fit: cover; /* llena el círculo sin deformación */ display: block; } /* Tamaños más pequeños (responsivo) */ #catalogo .md\:col-span-4 .overflow-hidden { width: 5rem !important; /* ~80px en móviles */ margin-left: auto !important; /* centrar para reducir distancia horizontal base */ margin-right: auto !important; } @media (min-width: 640px) { /* sm */ #catalogo .md\:col-span-4 .overflow-hidden { width: 6rem !important; /* ~96px */ } } @media (min-width: 768px) { /* md */ #catalogo .md\:col-span-4 .overflow-hidden { width: 6.5rem !important; /* ~104px */ margin-left: auto !important; margin-right: auto !important; } } /* Offsets horizontales pequeños por item para acercarlos entre sí */ /* Nota: hay un div placeholder primero; los círculos son nth-child(2) a (6) */ #catalogo .md\:col-span-4 > div:nth-child(2).overflow-hidden { --tw-translate-x: -0.25rem !important; } #catalogo .md\:col-span-4 > div:nth-child(3).overflow-hidden { --tw-translate-x: 0.25rem !important; } #catalogo .md\:col-span-4 > div:nth-child(4).overflow-hidden { --tw-translate-x: -0.375rem !important; } #catalogo .md\:col-span-4 > div:nth-child(5).overflow-hidden { --tw-translate-x: 0.375rem !important; } #catalogo .md\:col-span-4 > div:nth-child(6).overflow-hidden { --tw-translate-x: -0.5rem !important; } @media (min-width: 640px) { #catalogo .md\:col-span-4 > div:nth-child(2).overflow-hidden { --tw-translate-x: -0.375rem !important; } #catalogo .md\:col-span-4 > div:nth-child(3).overflow-hidden { --tw-translate-x: 0.375rem !important; } #catalogo .md\:col-span-4 > div:nth-child(4).overflow-hidden { --tw-translate-x: -0.5rem !important; } #catalogo .md\:col-span-4 > div:nth-child(5).overflow-hidden { --tw-translate-x: 0.5rem !important; } #catalogo .md\:col-span-4 > div:nth-child(6).overflow-hidden { --tw-translate-x: -0.625rem !important; } } @media (min-width: 768px) { #catalogo .md\:col-span-4 > div:nth-child(2).overflow-hidden { --tw-translate-x: -0.5rem !important; } #catalogo .md\:col-span-4 > div:nth-child(3).overflow-hidden { --tw-translate-x: 0.5rem !important; } #catalogo .md\:col-span-4 > div:nth-child(4).overflow-hidden { --tw-translate-x: -0.625rem !important; } #catalogo .md\:col-span-4 > div:nth-child(5).overflow-hidden { --tw-translate-x: 0.625rem !important; } #catalogo .md\:col-span-4 > div:nth-child(6).overflow-hidden { --tw-translate-x: -0.75rem !important; } } /* Superponer sutilmente los círculos: márgenes negativos suaves */ #catalogo .md\:col-span-4 .overflow-hidden { margin-top: -0.5rem !important; /* móvil: solapamiento sutil */ } #catalogo .md\:col-span-4 .overflow-hidden:first-of-type { margin-top: 0 !important; /* el primero sin margen superior */ } @media (min-width: 640px) { /* sm */ #catalogo .md\:col-span-4 .overflow-hidden { margin-top: -0.75rem !important; /* sm: sutil */ } } @media (min-width: 768px) { /* md */ #catalogo .md\:col-span-4 .overflow-hidden { margin-top: -1rem !important; /* md+: sutil */ } } /* Refuerzo por selectores de atributos (evita problemas de escapar ":" y orden de inyección del CDN) */ #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] [class~="overflow-hidden"] { aspect-ratio: 1 / 1; border-radius: 9999px !important; height: auto !important; width: 5rem !important; /* fallback base */ } @media (min-width: 640px) { #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] [class~="overflow-hidden"] { width: 6rem !important; } } @media (min-width: 768px) { #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] [class~="overflow-hidden"] { width: 6.5rem !important; } } /* Solapamiento también via selectores por atributos */ #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] [class~="overflow-hidden"] { margin-top: -0.5rem !important; } #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] [class~="overflow-hidden"]:first-of-type { margin-top: 0 !important; } @media (min-width: 640px) { #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] [class~="overflow-hidden"] { margin-top: -0.75rem !important; } } @media (min-width: 768px) { #catalogo [class*="md:col-span-4"][class*="hidden"][class*="md:block"] [class~="overflow-hidden"] { margin-top: -1rem !important; } } /* Alinear columna: eliminar zig-zag horizontal con un override final */ #catalogo .md\:col-span-4 > div:nth-child(2).overflow-hidden, #catalogo .md\:col-span-4 > div:nth-child(3).overflow-hidden, #catalogo .md\:col-span-4 > div:nth-child(4).overflow-hidden, #catalogo .md\:col-span-4 > div:nth-child(5).overflow-hidden, #catalogo .md\:col-span-4 > div:nth-child(6).overflow-hidden { --tw-translate-x: 0rem !important; /* columna centrada */ }