/*
Theme Name: Territorio Centro de Negocios - Child Theme
Theme URI: [La URL de tu sitio web local]
Description: Tema Hijo para Territorio, basado en Divi. Contiene código CSS/JS personalizado y funciones de Divi.
Author: [Jorge Disolweb]
Author URI: [disolweb.com]
Template: Divi
Version: 1.0.0
*/

/* ==========================================================================
   1. ESTILOS GLOBALES & ICONOS
   ========================================================================== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' -25, 'opsz' 24;
    vertical-align: bottom;    
    margin-right: 5px;
}

/* ==========================================================================
   2. PÁGINA DE INICIO (HERO & ESTILOS NATIVOS)
   ========================================================================== */
/* Estado inicial para los botones que GSAP animará luego */
.territorio-hero-cta {
    opacity: 0;
    /* Aceleración por hardware para transiciones más fluidas */
    will-change: opacity, transform; 
}

/* Texto con contorno */
.sin-contorno {
    -webkit-text-stroke: 1px #8d8d8d;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==========================================================================
   3. BORDES DE IMÁGENES (MÓDULOS BLUR)
   ========================================================================== */
.borde-imagen-1 img { outline: 1px solid #2563eb; outline-offset: 3px; border-radius: 100%; }
.borde-imagen-2 img { outline: 1px solid #ea580c; outline-offset: 3px; border-radius: 100%; }
.borde-imagen-3 img { outline: 1px solid #9333ea; outline-offset: 3px; border-radius: 100%; }
.borde-imagen-4 img { outline: 1px solid #16a34a; outline-offset: 3px; border-radius: 100%; }

/* ==========================================================================
   4. PÁGINA DE CONTACTO (CONTACT FORM 7)
   ========================================================================== */
.cf7-grid-layout { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.cf7-field { display: flex; flex-direction: column; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 13px;
    padding: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.wpcf7 textarea { 
    height: 100px !important; 
    min-height: 100px !important; 
    max-height: 100px !important; 
    resize: none !important; 
}

.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
    outline: none; border-color: #eff6ff; background-color: #fff;
}

.wpcf7 select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 35px;
}

.wpcf7 textarea { min-height: 100px; resize: vertical; }
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #999; }

.cf7-file-upload { display: flex; justify-content: center; }
.wpcf7 input[type="file"] {
    color: #666; border-radius: 10px; padding: 7px 7px 7px 0px; cursor: pointer; transition: all 0.3s ease; width: 100%;
}
.wpcf7 input[type="file"]::-webkit-file-upload-button {
    background-color: #111827; color: #ffffff; border: none; border-radius: 13px; padding: 8px 16px; cursor: pointer; margin-right: 10px;
}

.cf7-submit-container { display: block; justify-content: center; margin-top: 20px; }
.wpcf7-submit {
    width: 100%; background-color: #111827 !important; color: #ffffff !important; border: 1px solid #111827 !important;
    border-radius: 13px; padding: 12px 30px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
}
.wpcf7-submit:hover { background-color: #ffffff !important; color: #111827 !important; border-color: #111827 !important; }
.wpcf7-submit.has-spinner, .wpcf7-submit:disabled { background-color: #ffffff !important; color: #111827 !important; border-color: #111827 !important; opacity: 1; }
.wpcf7-spinner { margin-left: 10px; }

.wpcf7-not-valid-tip { color: #dc3545; font-size: 14px; margin-top: 5px; }
.wpcf7-response-output { border-radius: 4px; padding: 15px; margin-top: 20px; }
.wpcf7-validation-errors { border: 2px solid #dc3545; background-color: #f8d7da; color: #721c24; }
.wpcf7-mail-sent-ok { border: 2px solid #28a745; background-color: #d4edda; color: #155724; }

/* ==========================================================================
   5. LENIS JS & ANIMACIONES DE SCROLL
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Animación del Intersection Observer */
.titulo-animado {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    /* Aceleración por hardware */
    will-change: opacity, transform; 
}

.titulo-animado.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   6. EFECTO LUPA - ANIMACIÓN DE RATÓN (HOVER)
   ========================================================================== */

/* Preparamos la imagen dentro de tu módulo para que el movimiento sea sedoso */
.imagen-lupa img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform; /* Le avisa a la tarjeta gráfica que esto se va a mover */
}

/* El efecto exacto cuando el usuario pasa el ratón por encima del módulo */
.imagen-lupa:hover img {
    transform: scale(1.05) !important; 
    /* El 1.05 significa que crece un 5%. Es sutil pero impactante. */
}