que
ya tiene overflow-hidden (las tarjetas de imagen). */
.shine-card { position: relative; }
.shine-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
background-size: 250% 250%;
background-position: 120% 120%;
opacity: 0;
transition: opacity .3s ease;
}
.shine-card:hover::after {
opacity: 1;
animation: shine-sweep 1.1s ease forwards;
}
@keyframes shine-sweep {
from { background-position: 120% 120%; }
to { background-position: -20% -20%; }
}
/* ---------- 3) Línea que se dibuja bajo los "eyebrow"/section-label ----------
Un pequeño trazo naranja crece de 0 a su ancho final cuando el
bloque entra en pantalla (se combina con .reveal existente).
Uso: envolver o aplicar junto a .reveal en el
o
agregando la clase "underline-draw". */
.underline-draw {
position: relative;
padding-bottom: .6rem;
}
.underline-draw::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: currentColor;
transition: width .6s cubic-bezier(.16, 1, .3, 1) .15s;
}
.reveal.is-visible.underline-draw::after { width: 2.5rem; }
/* ---------- 4) Entrada con rebote del botón flotante de WhatsApp ----------
En vez de aparecer estático, entra con un pequeño rebote al
cargar la página. El pulso (wa-pulse) ya existente sigue igual. */
.btn-whatsapp {
animation: wa-bounce-in .6s cubic-bezier(.34, 1.56, .64, 1) .8s both;
}
@keyframes wa-bounce-in {
0% { transform: scale(0) translateY(20px); opacity: 0; }
70% { transform: scale(1.08) translateY(-4px); opacity: 1; }
100% { transform: scale(1) translateY(0); }
}
/* ---------- 5) Ripple (onda) al hacer clic en botones ----------
Requiere el pequeño helper en main.js que agrega un con la posición del clic. Funciona en
.btn-primary, .btn-outline y .btn-whatsapp-sm. */
.btn-primary, .btn-outline, .btn-whatsapp-sm {
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
border-radius: 9999px;
background: rgba(255, 255, 255, .55);
transform: scale(0);
animation: ripple-effect .6s ease-out forwards;
pointer-events: none;
}
@keyframes ripple-effect {
to { transform: scale(2.8); opacity: 0; }
}
/* ---------- 6) Shimmer de carga para imágenes con lazy-load ----------
Mientras la imagen no ha terminado de cargar (antes de que
main.js le agregue "is-loaded"), se ve un degradado animado
tipo skeleton en vez de un hueco vacío o solo el blur.
Uso: ya aplica automáticamente a toda ![]()
. */
img.reveal-img {
background: linear-gradient(100deg, #eceae5 30%, #f6f4f0 50%, #eceae5 70%);
background-size: 200% 100%;
animation: shimmer 1.6s ease-in-out infinite;
}
img.reveal-img.is-loaded {
animation: none;
background: none;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ---------- Respeto a "reducir movimiento" para todo lo nuevo ---------- */
@media (prefers-reduced-motion: reduce) {
body { animation: none; opacity: 1; }
.btn-whatsapp::before { animation: none; display: none; }
section.bg-ink .reveal.is-visible p.font-display { animation: none; }
.btn-primary:hover,
.btn-outline:hover,
.btn-primary:active,
.btn-outline:active { transform: none; }
.scroll-progress { transition: none; }
.group[data-card]:hover,
.group.card-hover:hover { transform: none; }
.icon-bounce:hover,
.group:hover .icon-bounce { transform: none; }
img.reveal-img { filter: none; transform: none; transition: none; animation: none; background: none; }
.ken-burns { animation: none; }
.shine-card::after { display: none; }
.underline-draw::after { transition: none; width: 2.5rem; }
.btn-whatsapp { animation: none; }
.ripple { display: none; }
}
/* ---------- Menú móvil: mejoras de UX (bloqueo scroll, animación burger) ---------- */
body.menu-open {
overflow: hidden;
}
#menu-toggle .burger-line {
transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, width .25s ease;
transform-origin: center;
}
/* Anima las 3 líneas del botón hamburguesa a una "X" cuando el menú está abierto */
#menu-toggle.is-open .burger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
width: 1.5rem;
}
#menu-toggle.is-open .burger-line:nth-child(2) {
opacity: 0;
}
#menu-toggle.is-open .burger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
width: 1.5rem;
align-self: center;
}
/* El botón hamburguesa siempre se ve blanco sobre el panel oscuro del menú abierto */
#menu-toggle.is-open .burger-line {
background-color: #FFFFFF !important;
}
/* ---------- Menú móvil: panel y enlaces ---------- */
#mobile-menu {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
#mobile-menu a {
font-family: 'Big Shoulders Display', sans-serif;
opacity: 0;
transform: translateY(12px);
transition: opacity .4s ease, transform .4s ease;
}
/* Entrada escalonada de los enlaces cuando el menú está visible */
#mobile-menu.translate-x-0 a {
opacity: 1;
transform: translateY(0);
}
#mobile-menu.translate-x-0 a:nth-child(1) { transition-delay: .08s; }
#mobile-menu.translate-x-0 a:nth-child(2) { transition-delay: .13s; }
#mobile-menu.translate-x-0 a:nth-child(3) { transition-delay: .18s; }
#mobile-menu.translate-x-0 a:nth-child(4) { transition-delay: .23s; }
#mobile-menu.translate-x-0 a:nth-child(5) { transition-delay: .28s; }
#mobile-menu.translate-x-0 a:nth-child(6) { transition-delay: .33s; }
#mobile-menu.translate-x-0 a:nth-child(7) { transition-delay: .38s; }
/* Enlace de la página actual, resaltado dentro del menú móvil */
#mobile-menu a.is-current {
color: #F5B400;
position: relative;
}
#mobile-menu a.is-current::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 2.5rem;
height: 3px;
background: #F5B400;
}
@media (prefers-reduced-motion: reduce) {
#mobile-menu a,
#menu-toggle .burger-line {
transition: none !important;
}
}
/* Enlace activo en la navegación de escritorio (página actual) */
.site-header .nav-link.is-current::after {
width: 100%;
}
.site-header.header-transparent .nav-link.is-current { color: #F5B400; }
.site-header.header-solid .nav-link.is-current { color: #E0531F; }
/* ---------- Footer: letras un poco más grandes y en negritas ---------- */
footer p,
footer li,
footer a,
footer span {
font-weight: 700;
}
footer p,
footer li,
footer ul {
font-size: 1rem !important;
line-height: 1.6 !important;
}
footer .text-xs {
font-size: .9rem !important;
}