/* Página Contacto (/contacto)
       Adaptación visual a la paleta T314 (crema/negro/mostaza/cobre). La
       página no tenía CSS propio: todo el aspecto venía de utilidades
       Tailwind (bg-slate-900, amber-600, green-600, gray-*) incrustadas en
       contacto.php. No se toca el mapa embebido, la dirección/teléfono/
       horario reales (ver fix de config.php aparte) ni ningún dato. */
    .contacto-page {
        --mostaza: var(--accent-color, #c9a227);
        --mostaza-oscuro: #b3901f;
        --crema: var(--bg-cream, #f9f7f2);
        --negro: var(--text-color, #2D2D2D);
        --texto-suave: #6b6558;
        --cobre: #a8622e;
        --cobre-oscuro: #8a4f25;
        font-family: var(--font-secondary);
    }
    .contacto-page .font-serif {
        font-family: var(--font-primary);
    }

    /* Botones: misma receta que .btn-accent / .btn-outline-dark del resto
       del sistema. Antes: "Abrir WhatsApp" era verde (bg-green-600) y
       "Llamar"/"Enviar email" usaban border-slate-300 suelto; unificados
       aquí para no crear un sistema de botones paralelo. */
    .contacto-page .btn-accent,
    .contacto-page .btn-outline-dark {
        padding: 16px 28px;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s;
    }
    .contacto-page .btn-accent {
        background: var(--mostaza);
        color: #1f1a08;
        box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3);
    }
    .contacto-page .btn-accent:hover,
    .contacto-page .btn-accent:focus-visible {
        background: var(--mostaza-oscuro);
        color: #fff;
        transform: scale(1.02);
    }
    .contacto-page .btn-outline-dark {
        border: 1px solid rgba(0, 0, 0, 0.15);
        color: var(--negro);
        font-weight: 500;
        background: transparent;
    }
    .contacto-page .btn-outline-dark:hover,
    .contacto-page .btn-outline-dark:focus-visible {
        border-color: var(--mostaza-oscuro);
        color: var(--mostaza-oscuro);
        background: var(--crema);
    }

    /* Hero: negro/tinta plano (antes bg-slate-900). */
    .contacto-page .bg-slate-900 {
        background: var(--negro);
    }
    .contacto-page .bg-slate-900 .text-gray-400 {
        color: rgba(249, 247, 242, 0.65);
    }

    /* Refinamiento de cabecera: escopeado a .t314-hero para no tocar los
       iconos circulares de redes/WhatsApp, que también usan bg-slate-900. */
    .contacto-page .t314-hero {
        padding-block: 3.5rem;
    }
    @media (min-width: 768px) {
        .contacto-page .t314-hero {
            padding-block: 6rem;
        }
    }
    .contacto-page .t314-hero .hero-kicker {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--mostaza);
        margin-bottom: 0.85rem;
    }
    .contacto-page .t314-hero .hero-kicker::after {
        content: '';
        display: block;
        width: 44px;
        height: 2px;
        background: var(--cobre);
        margin: 0.75rem auto 0;
    }
    .contacto-page .t314-hero h1 {
        font-size: clamp(3rem, 5vw, 5.25rem);
        line-height: 1;
        color: var(--crema);
    }
    .contacto-page .t314-hero .text-gray-400 {
        color: #d8d3ca;
        font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
        line-height: 1.6;
    }

    /* Breadcrumb (fondo blanco) */
    .contacto-page nav.bg-white {
        border-color: rgba(0, 0, 0, 0.06);
    }
    .contacto-page nav .text-gray-500 {
        color: var(--texto-suave);
    }
    .contacto-page nav .text-gray-300 {
        color: rgba(45, 45, 45, 0.25);
    }
    .contacto-page nav .text-slate-900 {
        color: var(--negro);
    }
    .contacto-page nav .hover\:text-amber-600:hover {
        color: var(--cobre);
    }

    /* Columna izquierda: títulos, texto e iconos de contacto */
    .contacto-page .text-slate-900 {
        color: var(--negro);
    }
    .contacto-page .text-gray-600 {
        color: var(--texto-suave);
    }
    .contacto-page .bg-amber-600\/10 {
        background: rgba(168, 98, 46, 0.1);
    }
    .contacto-page .text-amber-600 {
        color: var(--cobre);
    }
    .contacto-page .hover\:text-amber-600:hover {
        color: var(--cobre);
    }

    /* Síguenos: iconos circulares (Instagram/Facebook/WhatsApp) */
    .contacto-page .border-t.border-gray-200 {
        border-color: rgba(0, 0, 0, 0.08);
    }
    .contacto-page a.bg-slate-900 {
        background: var(--negro);
    }
    .contacto-page a.bg-slate-900.hover\:bg-amber-600:hover,
    .contacto-page a.bg-slate-900.hover\:bg-green-600:hover {
        background: var(--mostaza);
        color: #1f1a08;
    }

    /* Tarjeta "Atención inmediata" */
    .contacto-page .bg-white.p-8 {
        background: #fff;
    }
    .contacto-page .bg-amber-50 {
        background: rgba(201, 162, 39, 0.08);
        border-color: rgba(201, 162, 39, 0.25) !important;
    }
    .contacto-page .bg-amber-50 .text-amber-900 {
        color: var(--negro);
    }
    .contacto-page .text-gray-500 {
        color: var(--texto-suave);
    }

    /* Tarjeta flotante sobre el mapa */
    .contacto-page .absolute.bg-white {
        background: #fff;
        box-shadow: 0 12px 30px rgba(45, 45, 45, 0.15);
    }
    .contacto-page .hover\:text-amber-700:hover {
        color: var(--cobre-oscuro);
    }