/* ==========================================================================
   contacto.css — estilos propios de la página public/contacto.php
   Extraído del <style> inline original; depende de los tokens definidos
   en variables.css (cargado antes que este archivo).
   ========================================================================== */
/* ==========================================================================
           Página de Contacto — estilos propios de esta página únicamente.
           Reutiliza los tokens de variables.css; no define paleta nueva.
           ========================================================================== */

        body {
            background-color: var(--color-fondo);
            /* FIX: variables.css no define un color de "error/peligro" —
               solo tiene morado, verde y oro. Se agrega aquí, con alcance
               local a esta página, para los estados de validación del
               formulario. Si luego lo necesitas en otras páginas, es mejor
               subirlo a variables.css en vez de repetirlo por archivo. */
            --color-peligro: #B3261E;
        }

        .contact-page {
            max-width: var(--ancho-maximo);
            margin: var(--espacio-5) auto var(--espacio-7);
            padding: 9rem 1.5rem;
        }

        .contact-intro {
            text-align: center;
            max-width: 620px;
            margin: 0 auto var(--espacio-5);
        }
        .contact-intro .page-title { margin-bottom: var(--espacio-1); }
        .contact-intro .page-subtitle {
            color: var(--color-texto-suave);
            font-size: var(--texto-lg);
            line-height: var(--interlineado-normal);
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.25fr;
            gap: var(--espacio-5);
            align-items: start;
        }
        @media (max-width: 860px) {
            .contact-grid { grid-template-columns: 1fr; }
        }

        /* ---- Columna de información: tarjetas "ensartadas" en un hilo,
           continuando el motivo del hilo dorado del header ---- */
        .contact-info {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--espacio-3);
            padding-left: var(--espacio-4);
        }
        .contact-info::before {
            /* el hilo vertical que conecta cada punto de contacto */
            content: '';
            position: absolute;
            left: 7px;
            top: 10px;
            bottom: 10px;
            width: 2px;
            background: repeating-linear-gradient(
                to bottom,
                var(--oro-500) 0px, var(--verde-600) 5px,
                transparent 5px, transparent 10px
            );
            opacity: 0.55;
        }

        .info-card {
            position: relative;
            background-color: var(--color-superficie);
            border: 1px solid var(--color-borde);
            border-radius: var(--radio-md);
            padding: var(--espacio-3);
            box-shadow: var(--sombra-sm);
            transition: transform var(--transicion-base), box-shadow var(--transicion-base), border-color var(--transicion-base);
        }
        .info-card::before {
            /* el "nudo" que ata la tarjeta al hilo */
            content: '';
            position: absolute;
            left: calc(-1 * var(--espacio-4) + 3px);
            top: var(--espacio-3);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--verde-900);
            box-shadow: 0 0 0 3px var(--color-fondo);
        }
        .info-card:hover {
            transform: translateX(4px);
            box-shadow: var(--sombra-md);
            border-color: var(--morado-400);
        }

        .info-card__cabeza {
            display: flex;
            align-items: center;
            gap: var(--espacio-2);
            margin-bottom: 0.4rem;
        }
        .info-card__icono {
            flex-shrink: 0;
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            border-radius: var(--radio-sm);
            background: var(--morado-100);
            color: var(--morado-600);
        }
        .info-card__icono svg { width: 20px; height: 20px; }
        .info-card h3 {
            font-size: var(--texto-base);
            font-family: var(--fuente-cuerpo);
            font-weight: 700;
            color: var(--color-texto);
            margin: 0;
        }
        .info-card p {
            margin: 0;
            color: var(--color-texto-suave);
            font-size: var(--texto-sm);
            line-height: var(--interlineado-normal);
        }
        .info-card__accion {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            margin-top: 0.6rem;
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
            font-size: var(--texto-sm);
            font-weight: 600;
            color: var(--color-primario);
            cursor: pointer;
            text-decoration: none;
        }
        .info-card__accion:hover { color: var(--color-primario-hover); text-decoration: underline; }

        /* Estado abierto/cerrado, calculado en vivo por JS */
        .badge-estado {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: var(--texto-xs);
            font-weight: 600;
            padding: 0.2rem 0.6rem;
            border-radius: 999px;
            margin-top: 0.5rem;
        }
        .badge-estado::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
        }
        .badge-estado.abierto { background: var(--verde-100); color: var(--verde-800); }
        .badge-estado.cerrado { background: var(--piedra-50); color: var(--color-texto-suave); border: 1px solid var(--color-borde); }

        /* ---- Redes sociales ---- */
        .social-block { margin-top: var(--espacio-2); }
        .social-block h3 {
            font-size: var(--texto-base);
            font-family: var(--fuente-cuerpo);
            font-weight: 700;
            margin: 0 0 var(--espacio-2);
        }
        .social-icons {
            display: flex;
            gap: var(--espacio-2);
            flex-wrap: wrap;
        }
        .social-icon {
            position: relative;
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--color-superficie);
            border: 1px solid var(--color-borde);
            color: var(--color-texto-suave);
            transition: color var(--transicion-base), background-color var(--transicion-base), transform var(--transicion-rapida);
        }
        .social-icon svg { width: 20px; height: 20px; }
        .social-icon::after {
            /* el anillo dorado que se "teje" al pasar el cursor */
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            border: 2px solid var(--oro-500);
            opacity: 0;
            transform: scale(0.8);
            transition: opacity var(--transicion-base), transform var(--transicion-base);
        }
        .social-icon:hover,
        .social-icon:focus-visible {
            background: var(--morado-600);
            color: var(--blanco);
            transform: translateY(-3px);
        }
        .social-icon:hover::after,
        .social-icon:focus-visible::after {
            opacity: 1;
            transform: scale(1);
        }
        .social-icon:focus-visible { outline: none; }

        /* ---- Formulario ---- */
        .contact-form {
            background: var(--color-superficie);
            border: 1px solid var(--color-borde);
            border-radius: var(--radio-lg);
            box-shadow: var(--sombra-md);
            padding: var(--espacio-4);
        }
        .contact-form h3 {
            font-family: var(--fuente-titulo);
            font-size: var(--texto-xl);
            margin: 0 0 var(--espacio-3);
        }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-2); }
        @media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

        .form-group { margin-bottom: var(--espacio-2); }
        .form-group label {
            display: block;
            font-size: var(--texto-sm);
            font-weight: 600;
            color: var(--color-texto);
            margin-bottom: 0.4rem;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.7rem 0.85rem;
            font-family: inherit;
            font-size: var(--texto-base);
            color: var(--color-texto);
            background: var(--color-fondo);
            border: 1.5px solid var(--color-borde);
            border-radius: var(--radio-sm);
            box-sizing: border-box;
            transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
        }
        .form-group textarea { resize: vertical; min-height: 120px; }
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--color-foco);
            box-shadow: 0 0 0 3px rgba(176, 138, 52, 0.18);
        }
        .form-group.con-error input,
        .form-group.con-error textarea {
            border-color: var(--color-peligro);
        }
        .form-error {
            display: block;
            min-height: 1.1em;
            font-size: var(--texto-xs);
            color: var(--color-peligro);
            margin-top: 0.3rem;
        }
        .contador-mensaje {
            display: block;
            text-align: right;
            font-size: var(--texto-xs);
            color: var(--color-texto-suave);
            margin-top: 0.3rem;
        }
        .contador-mensaje.limite-cerca { color: var(--color-peligro); }

        .btn-enviar {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            width: 100%;
            padding: 0.85rem 1.5rem;
            margin-top: var(--espacio-1);
            font-family: inherit;
            font-size: var(--texto-base);
            font-weight: 700;
            color: var(--blanco);
            background: var(--color-primario);
            border: none;
            border-radius: var(--radio-sm);
            cursor: pointer;
            transition: background-color var(--transicion-rapida), transform var(--transicion-rapida);
        }
        .btn-enviar:hover { background: var(--color-primario-hover); }
        .btn-enviar:active { transform: scale(0.98); }
        .btn-enviar:disabled { cursor: progress; opacity: 0.85; }

        .btn-enviar__spinner {
            display: none;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.4);
            border-top-color: var(--blanco);
            border-radius: 50%;
        }
        .btn-enviar.cargando .btn-enviar__spinner { display: inline-block; animation: girar 700ms linear infinite; }
        .btn-enviar.cargando .btn-enviar__texto::before { content: 'Preparando '; }
        .btn-enviar.exito { background: var(--verde-600); }

        @keyframes girar { to { transform: rotate(360deg); } }

        .form-status {
            min-height: 1.4em;
            margin: var(--espacio-2) 0 0;
            font-size: var(--texto-sm);
            font-weight: 600;
        }
        .form-status.error { color: var(--color-peligro); }
        .form-status.success { color: var(--verde-800); }

        /* ---- Aviso flotante para "copiar al portapapeles" ---- */
        .toast {
            position: fixed;
            left: 50%;
            bottom: var(--espacio-3);
            transform: translate(-50%, 12px);
            background: var(--tinta);
            color: var(--blanco);
            padding: 0.7rem 1.1rem;
            border-radius: var(--radio-sm);
            box-shadow: var(--sombra-lg);
            font-size: var(--texto-sm);
            font-weight: 600;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--transicion-base), transform var(--transicion-base);
            z-index: 200;
        }
        .toast.visible { opacity: 1; transform: translate(-50%, 0); }

        @media (prefers-reduced-motion: reduce) {
            .info-card, .social-icon, .btn-enviar, .toast, .btn-enviar__spinner {
                transition: none;
                animation: none;
            }
        }