/* ============================================
   Equipamientos Tauro - Custom Styles
   Design System: Trust & Authority + Hero-Centric
   Fonts: Poppins / Open Sans
   ============================================ */

/* Smooth scroll */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Selection */
::selection {
    background-color: #F0B429;
    color: #1A1A1A;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FAFAFA;
}
::-webkit-scrollbar-thumb {
    background: #F0B429;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D9A017;
}

/* ============================================
   Dark Mode Theme Toggle
   ============================================ */
.dark-mode #theme-knob {
    transform: translateX(24px);
}
/* De dia se ve el sol, de noche la luna. Antes se mostraba el del modo
   contrario y encima quedaba tapado por el perillo. */
.theme-icon-sun {
    opacity: 1;
}
.theme-icon-moon {
    opacity: 0;
}
.dark-mode .theme-icon-sun {
    opacity: 0;
}
.dark-mode .theme-icon-moon {
    opacity: 1;
}

/* ============================================
   Dark Mode Overrides (Neutral Dark Gray)
   ============================================ */
/* body.dark-mode y no .dark-mode: Tailwind inyecta su <style> despues de este
   archivo, asi que .bg-white / .text-primary del <body> le ganarian por orden. */
body.dark-mode {
    background-color: #141414;
    color: #E5E5E5;
}

/* About section */
.dark-mode #about {
    background-color: #1A1A1A;
}
.dark-mode #about h2,
.dark-mode #about h4 {
    color: #F5F5F5;
}
.dark-mode #about p {
    color: #A3A3A3;
}

/* Services section */
.dark-mode #services {
    background-color: #141414;
}
.dark-mode .service-card {
    background-color: #222222;
    border-color: #333333;
}
.dark-mode .service-card:hover {
    border-color: #F0B429;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.dark-mode .service-card h3 {
    color: #F5F5F5;
}
.dark-mode .service-card p,
.dark-mode .service-card li {
    color: #A3A3A3;
}
.dark-mode .service-card::before {
    background: linear-gradient(90deg, transparent, rgba(240, 180, 41, 0.08), transparent);
}

/* Trust items */
.dark-mode .trust-item {
    background-color: #222222;
    border-color: #333333;
}
.dark-mode .trust-item span:first-of-type {
    color: #F5F5F5;
}
.dark-mode .trust-item span:last-of-type {
    color: #737373;
}

/* Products section */
.dark-mode #products {
    background-color: #1A1A1A;
}
.dark-mode #products h2 {
    color: #F5F5F5;
}
.dark-mode .product-card {
    background-color: #222222;
    border-color: #333333;
}
.dark-mode .product-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.dark-mode .product-card h3 {
    color: #F5F5F5;
}
.dark-mode .product-card p {
    color: #737373;
}
.dark-mode .product-filter {
    background: #222222;
    color: #A3A3A3;
}
.dark-mode .product-filter:hover {
    background: #F0B429;
    color: #141414;
}
.dark-mode .product-filter.active {
    background: #F0B429;
    color: #141414;
}

/* Contact section */
.dark-mode #contact {
    background-color: #141414;
}
.dark-mode #contact h2 {
    color: #F5F5F5;
}
.dark-mode .contact-fill-card {
    background-color: #222222;
    border-color: #333333;
}
.dark-mode .contact-fill-card h4 {
    color: #F5F5F5;
}
.dark-mode .contact-fill-card p {
    color: #A3A3A3;
}
.dark-mode .contact-info-card {
    background-color: #222222;
    border-color: #333333;
}
.dark-mode .contact-info-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.dark-mode .contact-info-card h4 {
    color: #F5F5F5;
}
.dark-mode .contact-info-card p,
.dark-mode .contact-info-card a {
    color: #A3A3A3;
}
.dark-mode #contact .bg-white {
    background-color: #222222;
    border-color: #333333;
}
.dark-mode #contact h3 {
    color: #F5F5F5;
}
.dark-mode #contact input,
.dark-mode #contact textarea {
    background-color: #1A1A1A;
    border-color: #333333;
    color: #E5E5E5;
}
.dark-mode #contact input::placeholder,
.dark-mode #contact textarea::placeholder {
    color: #737373;
}
.dark-mode #contact input:focus,
.dark-mode #contact textarea:focus {
    border-color: #F0B429;
    box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.15);
}
.dark-mode #contact label {
    color: #D4D4D4;
}

/* Section titles & text */
.dark-mode .section-title {
    color: #F5F5F5;
}
.dark-mode .text-primary {
    color: #F5F5F5;
}
.dark-mode p.text-secondary\/70,
.dark-mode .text-secondary\/70 {
    color: #A3A3A3;
}
.dark-mode p.text-secondary\/60,
.dark-mode .text-secondary\/60 {
    color: #737373;
}

/* Navbar phone button dark mode */
.dark-mode .nav-phone-btn {
    color: #333333;
}

/* Navbar scrolled in dark mode */
.dark-mode #navbar.scrolled {
    background: rgba(20, 20, 20, 0.95);
}

/* Scrollbar dark */
.dark-mode::-webkit-scrollbar-track {
    background: #141414;
}

/* ============================================
   Preloader
   ============================================ */
#preloader {
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-line {
    width: 0;
    animation: preloaderLine 1.5s ease-out forwards;
}

@keyframes preloaderLine {
    to { width: 100%; }
}

/* ============================================
   Navbar
   ============================================ */
#navbar {
    background: transparent;
}
#navbar.scrolled {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Hero Scroll Dot Animation
   ============================================ */
.scroll-dot {
    animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(16px); opacity: 0.3; }
}

/* ============================================
   Floating Badge Animations
   ============================================ */
.floating-badge {
    animation: floatBadge 4s ease-in-out infinite;
}
.floating-badge-2 {
    animation: floatBadge 5s ease-in-out infinite 1s;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* ============================================
   Product Filter Buttons
   ============================================ */
.product-filter {
    background: #EDEDED;
    color: #4D4D4D;
}
.product-filter:hover {
    background: #F0B429;
    color: #1A1A1A;
}
.product-filter.active {
    background: #1A1A1A;
    color: white;
}

/* ============================================
   Product Cards Animation
   ============================================ */
.product-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card.hidden-card {
    opacity: 0;
    transform: scale(0.8);
    position: absolute;
    pointer-events: none;
}
.product-card.visible-card {
    opacity: 1;
    transform: scale(1);
    position: relative;
    pointer-events: auto;
}

/* ============================================
   Service Card Shine Effect
   ============================================ */
.service-card {
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(240, 180, 41, 0.05),
        transparent
    );
    transition: left 0.7s ease;
}
.service-card:hover::before {
    left: 100%;
}

/* ============================================
   Counter Animation Support
   ============================================ */
.counter {
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Contact Fill Cards (hover paint effect)
   ============================================ */
.contact-fill-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-fill-card:hover {
    transform: translateY(-6px);
}
.contact-fill-bg {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Contact Info Cards (form side)
   ============================================ */
.contact-info-card {
    transition: all 0.3s ease;
}
.contact-info-card:hover {
    transform: translateX(8px);
}

/* ============================================
   Form Focus Effects
   ============================================ */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.15);
}

/* ============================================
   Magnetic Button Effect (for hero CTA)
   GSAP es el unico dueno del transform aca: no poner transition ni
   utilidades hover:scale, o pelean contra el tween de quickTo.
   ============================================ */
.magnetic-btn {
    will-change: transform;
}

/* ============================================
   Texto por palabras (revelado con mascara)
   El padding/margin compensados evitan que se corten
   las colas de las letras (g, p, y) al ocultar el overflow.
   ============================================ */
.word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}
.word,
.line-inner {
    display: inline-block;
    will-change: transform;
}
.line-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

/* ============================================
   Section Reveal Animations (GSAP targets)
   ============================================ */
.section-title,
.service-card,
.product-card,
.contact-info-card,
.about-image,
.about-content,
.hero-badge,
.hero-title span,
.hero-desc,
.hero-cta,
.hero-stats,
.hero-visual,
.cta-title {
    will-change: transform, opacity;
}

/* ============================================
   WhatsApp Glow Effect
   ============================================ */
/* a.whatsapp-btn y no .whatsapp-btn: si no, el shadow-lg de Tailwind
   le gana por orden y el resplandor no se ve nunca. */
a.whatsapp-btn {
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.4), 0 0 40px rgba(220, 38, 38, 0.2);
}
.whatsapp-glow {
    background: rgba(220, 38, 38, 0.3);
    animation: whatsappGlow 2s ease-in-out infinite;
}

@keyframes whatsappGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
        box-shadow: 0 0 20px 10px rgba(220, 38, 38, 0);
    }
}

/* ============================================
   Testimonial Slider
   ============================================ */
.testimonial-track {
    will-change: transform;
}

.fill-gold {
    fill: #F0B429;
}

/* ============================================
   Ajustes de mobile
   ============================================ */

/* iOS Safari hace zoom automatico al enfocar un campo con fuente < 16px.
   Se fuerza 16px solo en pantallas chicas; en desktop sigue el text-sm. */
@media (max-width: 767px) {
    /* Se apunta con el id de la seccion: un selector de elemento solo
       perderia contra el .text-sm de Tailwind por especificidad. */
    #contact input,
    #contact textarea,
    #contact select {
        font-size: 16px;
    }
}

/* El visor maneja el pellizco y el arrastre por su cuenta: si el navegador
   se queda con el gesto, la pagina hace scroll o zoom en vez de la foto. */
#lightbox-img {
    touch-action: none;
}

/* En pantallas tactiles se agranda el area de toque sin cambiar el diseno:
   un pseudo-elemento invisible lleva el objetivo a los 44px recomendados. */
@media (hover: none) and (pointer: coarse) {
    #theme-toggle {
        position: relative;
    }
    #theme-toggle::after {
        content: '';
        position: absolute;
        inset: -8px -4px;
    }

    .testimonial-dot::after {
        content: '';
        position: absolute;
        /* El punto mide 10px: -17px por lado lo lleva a los 44px de toque */
        inset: -17px;
    }
}

/* ============================================
   Compatibilidad entre plataformas
   ============================================ */

/* iOS agranda el texto al girar el telefono si no se lo frena.
   Mac/iOS renderizan las fuentes mas gruesas sin el suavizado. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Android e iOS pintan un recuadro gris al tocar cualquier cosa */
a, button, input, textarea, select, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* Con el menu a pantalla completa, al llegar al final del panel el scroll
   se contagia a la pagina de atras (y en Chrome Android dispara el
   "pull to refresh"). Esto lo aisla. */
#mobile-menu {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Safari necesita el prefijo para el desenfoque de fondo */
#mobile-menu,
#lightbox {
    -webkit-backdrop-filter: blur(24px);
}

/* ============================================
   Menu movil a pantalla completa
   100vh en el celular no descuenta la barra del navegador; dvh si.
   Va con #id para ganarle a la clase de Tailwind, que se inyecta despues.
   ============================================ */
@supports (height: 100dvh) {
    #mobile-menu {
        height: calc(100dvh - 5rem);
    }
}

/* ============================================
   PRUEBA: letras rodantes del menu movil
   Para sacarlo, borrar este bloque y el de scripts.js.
   ============================================ */
.roll {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 1;
}
.roll-bottom {
    position: absolute;
    inset: 0;
}
.roll span {
    display: inline-block;
    will-change: transform;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .scroll-dot,
    .floating-badge,
    .floating-badge-2 {
        animation: none;
    }
}

/* ============================================
   Responsive Tweaks
   ============================================ */
@media (max-width: 768px) {
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .hero-stats span:first-child {
        font-size: 1.5rem;
    }
}

@media (max-width: 640px) {
    #products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}