/* * GJMA Consultores — Hoja de estilos específica * Efectos: flip-cards, scroll suave y mejoras de accesibilidad. */ /* --- Scroll suave (si no está también inline en el HTML) --- */ /* Nota: lo tienes repetido en el . Puedes dejar solo uno. */ html { scroll-behavior: smooth; } /* Desactiva animaciones si el usuario prefiere menos movimiento */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .flip-card-inner { transition: none !important; transform: none !important; } } /* --- Flip card effect --- */ .flip-card { perspective: 1000px; position: relative; /* crea contexto para hijos absolutos */ } /* Performance hint para el elemento que rota */ .flip-card-inner { position: relative; transform-style: preserve-3d; transition: transform 0.6s; will-change: transform; } /* Estados que disparan el giro (mouse y teclado) */ .flip-card:hover .flip-card-inner, .flip-card:focus-within .flip-card-inner { transform: rotateY(180deg); } /* Caras superpuestas */ .flip-card-front, .flip-card-back { position: absolute; inset: 0; /* equivale a top:0; right:0; bottom:0; left:0; */ width: 100%; height: 100%; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* compatibilidad Safari */ } .flip-card-back { transform: rotateY(180deg); } /* --- Accesibilidad de enfoque --- */ /* Si navegan con teclado, que el contenedor sea visible al foco */ .flip-card:focus-within { outline: 2px solid #3b82f6; /* azul Tailwind 500 aprox */ outline-offset: 3px; border-radius: 0.75rem; /* acorde a tus rounded-xl */ } /* --- Compatibilidad táctil opcional --- Si quisieras DESACTIVAR el flip en móvil, añade la clase .no-flip al contenedor .flip-card desde el HTML cuando detectes móvil. */ @media (pointer: coarse) { .flip-card.no-flip .flip-card-inner { transform: none !important; } .flip-card.no-flip:hover .flip-card-inner, .flip-card.no-flip:focus-within .flip-card-inner { transform: none !important; } }