/* Óptica del Durand — main.css */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; color: #2D3748; background: #fff; margin: 0; }

/* ── Tailwind config override (se inyecta via inline en index.php) ── */

/* Nav */
#odd-navbar { transition: background 0.3s, box-shadow 0.3s; }
#odd-navbar.scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 2px 20px rgba(0,0,0,0.08); }

/* Eye animation */
.eye-line { stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawEye 1.8s ease forwards 0.4s; }
.eye-iris { opacity: 0; animation: fadeIn 0.6s ease forwards 1.6s; }
@keyframes drawEye { to { stroke-dashoffset: 0; } }
@keyframes fadeIn  { to { opacity: 1; } }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Service card */
.service-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(26,43,74,0.12); }

/* WhatsApp FAB */
.fab-wa { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; }
.fab-wa a {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; background: #25D366; border-radius: 50%;
    box-shadow: 0 4px 16px rgba(37,211,102,0.45); transition: transform 0.2s;
}
.fab-wa a:hover { transform: scale(1.1); }

/* Form */
.form-input {
    border: 1px solid #D1D5DB; border-radius: 8px; padding: 0.75rem 1rem;
    width: 100%; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus { border-color: #4A90B8; box-shadow: 0 0 0 3px rgba(74,144,184,0.15); }

/* Reel placeholder */
.reel-placeholder {
    background: linear-gradient(160deg, #1A2B4A 0%, #243659 100%);
    border-radius: 16px; aspect-ratio: 9/16;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: white; gap: 0.75rem; cursor: pointer; transition: transform 0.2s;
}
.reel-placeholder:hover { transform: scale(1.02); }

/* Mobile menu */
#odd-mobile-menu { display: none; }
#odd-mobile-menu.open { display: flex; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .eye-line, .eye-iris { animation: none; opacity: 1; stroke-dashoffset: 0; }
    .reveal { opacity: 1; transform: none; }
}