Chile

Invercity

inver.city

 <div class="cta-section">
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invercity - Contacto (Nuevo Estilo)</title>
    <style>
        /* ============================================================
           NUEVAS VARIABLES MONOCROMÁTICAS
           ============================================================ */
        :root {
            --color-black: #000000;
            --color-white: #ffffff;
            --color-text-dark: #374151; /* Gris oscuro para textos */
            --color-accent: #000000; /* Negro para acentos (antes azul) */
            --color-border: #e5e7eb; /* Gris claro para líneas sutiles */
            --color-bg-light: #f9fafb; /* Gris ultra claro para fondo */
            --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --transition: all 0.3s ease;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: var(--font-main); background-color: var(--color-white); color: var(--color-black); line-height: 1.6; }

        .invercity-contact-section { padding: 60px 20px; background-color: var(--color-white); display: flex; justify-content: center; align-items: center; }
        .contact-container { max-width: 1200px; width: 100%; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }

        .contact-info-header { text-align: center; }
        .contact-info-header h2 { font-size: 2.5rem; color: var(--color-black); margin-bottom: 15px; font-weight: 800; position: relative; display: inline-block; letter-spacing: -1px; }

        /* Línea decorativa AHORA GRIS PLATA */
        .contact-info-header h2::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 60px; height: 4px; background-color: var(--color-border); border-radius: 2px; }
        .contact-info-header p { font-size: 1.1rem; color: var(--color-text-dark); max-width: 600px; margin: 25px auto 0 auto; }

        .contact-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }

        .contact-item { background-color: var(--color-bg-light); padding: 30px; border-radius: 12px; transition: var(--transition); border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; text-align: center; }

        /* Hover Negro, sin azul */
        .contact-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.05); }

        /* Iconos NEGROS */
        .contact-icon { width: 50px; height: 50px; margin-bottom: 20px; color: var(--color-black); }

        .contact-item h3 { font-size: 1.25rem; color: var(--color-black); margin-bottom: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
        .contact-item p, .contact-item a { font-size: 1rem; color: var(--color-text-dark); text-decoration: none; transition: var(--transition); }
        .contact-link { font-weight: 600; display: block; }

        /* Hover de enlace NEGRO */
        .contact-link:hover { color: var(--color-black); text-decoration: underline; }

        @media (min-width: 768px) {
            .contact-container { gap: 50px; }
            .contact-info-header { text-align: left; }
            .contact-info-header h2 { font-size: 3rem; }
            .contact-info-header h2::after { left: 0; transform: none; }
            .contact-info-header p { margin: 25px 0 0 0; }
            .contact-item { align-items: flex-start; text-align: left; }
        }
        @media (min-width: 1024px) {
            .invercity-contact-section { padding: 100px 20px; }
            .contact-container { grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
        }
    </style>
</head>
<body>
    <section class="invercity-contact-section">
        <div class="contact-container">
            <div class="contact-info-header">
                <h2>Contáctanos</h2>
                <p>En Invercity estamos listos para ayudarte a encontrar tu propiedad ideal. Nuestro equipo te brindará la atención sofisticada que mereces.</p>
            </div>
            <div class="contact-details-grid">
                <div class="contact-item">
                    <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                    <h3>Teléfonos</h3>
                    <a href="tel:+56957219166" class="contact-link">+569 57219166</a>
                </div>
                <div class="contact-item">
                    <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                    <h3>Dirección</h3>
                    <p>Temuco, Chile.</p>
                </div>
                <div class="contact-item">
                    <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    <h3>Horarios</h3>
                    <p>Lun a Vie: 09:00 - 18:00</p>
                </div>
                <div class="contact-item">
                    <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                    <h3>Correo</h3>
                    <a href="mailto:contacto@inver.city" class="contact-link">contacto@inver.city</a>
                </div>
            </div>
        </div>
    </section>
</body>
</html>