/* ============================================================
   contact.css — gears.com.mx / contact.php
   Estilos propios de la página de contacto, extraídos del bloque
   <style> que vivía inline en contact.php (hallazgo F-03). Sacarlo
   a un archivo externo es lo que permite quitar 'unsafe-inline' de
   style-src en la CSP (F-02) sin romper el diseño de esta página.
   ============================================================ */
:root {
            --bs-primary: #3E63DD;
            --bs-primary-rgb: 62, 99, 221;
            --bs-link-color: #3E63DD;
            --bs-link-hover-color: #3457c9;
        }

        /* ===== PAGE HERO (interior) ===== */
        .page-hero {
            position: relative;
            overflow: hidden;
            padding: 140px 0 80px;
            background: transparent;
            color: white;
        }
        .page-hero .hero-grid {
            position: absolute;
            inset: 0;
            opacity: 0.2;
            background-image:
                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }
        .page-hero h1 {
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 800;
            letter-spacing: -1.5px;
            line-height: 1.1;
            color: white;
        }
        .page-hero p {
            font-size: 1.1rem;
            color: #d4d4d8;
            max-width: 520px;
        }

        /* ===== CONTACT SECTION ===== */
        .contact-section {
            background: linear-gradient(135deg, #0B0F17 0%, #141B29 50%, #1B2436 100%);
            padding: 90px 0;
        }

        /* ===== FORM CARD (glass) ===== */
        .form-card {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 28px;
            padding: 48px 44px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        @supports not (backdrop-filter: blur(1px)) {
            .form-card { background: rgba(15,10,30,0.95); }
        }
        .form-card h2 {
            color: white;
            font-weight: 800;
            font-size: 1.7rem;
            margin-bottom: 8px;
        }
        .form-card .form-label {
            color: #d4d4d8;
            font-size: 0.88rem;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .form-card .form-control,
        .form-card .form-select {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 12px;
            color: white;
            padding: 12px 16px;
            font-size: 0.95rem;
            transition: border-color .2s, box-shadow .2s;
        }
        .form-card .form-control::placeholder { color: #6b7280; }
        .form-card .form-control:focus,
        .form-card .form-select:focus {
            background: rgba(255,255,255,0.08);
            border-color: rgba(62,99,221,.55);
            box-shadow: 0 0 0 3px rgba(62,99,221,.15);
            color: white;
            outline: none;
        }
        .form-card .form-select option { background: #141B29; color: white; }
        .form-card textarea.form-control { resize: none; }
        .form-card .btn-main { width: 100%; justify-content: center; padding: 15px; font-size: 1rem; }

        /* ===== CONTACT CARDS ===== */
        .contact-card {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 24px;
            padding: 36px 28px;
            text-align: center;
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
            height: 100%;
        }
        .contact-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(62,99,221,.18);
            border-color: rgba(62,99,221,.3);
        }
        .contact-card .contact-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(62,99,221,.25), rgba(45,75,176,.1));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #90A8F0;
            margin: 0 auto 20px;
        }
        .contact-card h5 { color: white; font-weight: 700; margin-bottom: 8px; }
        .contact-card p  { color: #a1a1aa; font-size: 0.9rem; margin-bottom: 16px; }
        .contact-card a.contact-value {
            color: #d4d4d8;
            text-decoration: none;
            font-size: 1rem;
            font-weight: 600;
            display: block;
            margin-bottom: 16px;
            transition: color .2s;
        }
        .contact-card a.contact-value:hover { color: #90A8F0; }
        .contact-card .btn-contact {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform .2s, box-shadow .2s;
        }
        .btn-contact-primary {
            background: var(--primary, #3E63DD);
            color: white;
            box-shadow: 0 8px 24px rgba(62,99,221,.25);
        }
        .btn-contact-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 32px rgba(62,99,221,.4);
            color: white;
        }
        .btn-contact-whatsapp {
            background: #22c55e;
            color: white;
            box-shadow: 0 8px 24px rgba(34,197,94,.2);
        }
        .btn-contact-whatsapp:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 32px rgba(34,197,94,.35);
            color: white;
        }
        .btn-contact-outline {
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(255,255,255,.04);
            color: #d4d4d8;
        }
        .btn-contact-outline:hover {
            background: rgba(255,255,255,.08);
            color: white;
            transform: translateY(-2px);
        }

        /* ===== HORARIO STRIP ===== */
        .schedule-strip {
            background: rgba(62,99,221,.08);
            border: 1px solid rgba(62,99,221,.18);
            border-radius: 16px;
            padding: 20px 28px;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .schedule-strip i { color: #3E63DD; font-size: 1.4rem; flex-shrink: 0; }
        .schedule-strip p { margin: 0; color: #d4d4d8; font-size: 0.95rem; }
        .schedule-strip strong { color: white; }

        @media (max-width: 767px) {
            .form-card { padding: 32px 24px; }
            .page-hero { padding: 80px 0 60px; }
        }

        /* ============================================================
           Clases contenedoras que este template asume que ya existen
           en el sitio (venían de la hoja de estilos propia de
           cloudgears.com.mx, que no forma parte de css/style.css en
           gears.com.mx). Sin esto, el navbar/hero/footer quedaban sin
           fondo y el texto claro se veía sobre blanco.
           ============================================================ */
        .hero-gears {
            position: relative;
            background: linear-gradient(135deg, #0B0F17 0%, #141B29 50%, #1B2436 100%);
        }

        /* El selector original ".page-hero .hero-grid" nunca aplicaba:
           en el HTML, .hero-grid es hermano de .page-hero, no hijo.
           Se define aquí como clase independiente para que sí se vea. */
        .hero-grid {
            position: absolute;
            inset: 0;
            opacity: 0.15;
            background-image:
                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }

        .topbar-premium {
            background: var(--dark, #0B0F17);
            border-bottom: 1px solid rgba(247,246,243,0.08);
        }

        .btn-main {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--primary, #3E63DD);
            color: #FFFFFF;
            border: none;
            border-radius: 999px;
            padding: 12px 26px;
            font-weight: 600;
            font-size: 0.92rem;
            text-decoration: none;
            transition: background .25s ease, transform .2s ease;
        }
        .btn-main:hover { background: #3457c9; color: #FFFFFF; transform: translateY(-2px); }

        .footer-premium { background: var(--dark, #0B0F17); }

        /* Los enlaces del footer heredaban --bs-link-color (navy) en vez
           del gris claro que usa el resto del sitio en fondos oscuros.
           Se fuerza aquí sin afectar el color de los íconos (que llevan
           su propio color inline, aparte del texto del <a>). */
        .footer-premium a {
            color: var(--slate, #8B94A7) !important;
        }
        .footer-premium a:hover {
            color: #FFFFFF !important;
        }

        .footer-cta-box {
            background: var(--primary, #3E63DD);
        }