| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Prototipo Web 3G - Cabecera Unificada Contacto</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@700;800&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background-color: #FFFFFF; |
| color: #333333; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| :root { |
| --contract-blue: #004A8F; |
| --contract-dark-text: #222222; |
| --contract-light-text: #555555; |
| --contract-light-gray-bg: #F4F6F8; |
| --contract-border-gray: #DDE2E7; |
| } |
| |
| .logo-font { |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| .bg-contract-blue { background-color: var(--contract-blue); } |
| .text-contract-blue { color: var(--contract-blue); } |
| .border-contract-blue { border-color: var(--contract-blue); } |
| .hover\:bg-contract-blue-dark:hover { background-color: #003B72; } |
| |
| .text-main { color: var(--contract-dark-text); } |
| .bg-main-content { background-color: #FFFFFF; } |
| .bg-alternate-section { background-color: var(--contract-light-gray-bg); } |
| |
| |
| h1, h2, h3, h4 { |
| color: var(--contract-dark-text); |
| font-weight: 700; |
| } |
| h1.page-title { font-size: 2.8rem; line-height: 1.25; font-weight:700; text-transform: uppercase;} |
| h2.section-title { font-size: 2.1rem; line-height: 1.3; font-weight:700;} |
| h3.content-block-title { font-size: 1.8rem; line-height: 1.35; font-weight:600; margin-bottom: 1.25rem;} |
| h3.card-title { font-size: 1.3rem; line-height: 1.4; font-weight:600;} |
| h4.service-card-title { font-size: 1.2rem; line-height: 1.4; font-weight: 700; color: var(--contract-blue); margin-bottom: 0.5rem; } |
| |
| |
| p { |
| line-height: 1.7; |
| color: var(--contract-light-text); |
| font-size: 1rem; |
| } |
| @media (min-width: 768px) { |
| p { |
| font-size: 1.05rem; |
| } |
| } |
| |
| |
| .carousel-item { |
| display: none; |
| background-size: cover; |
| background-position: center; |
| min-height: 75vh; |
| align-items: center; |
| justify-content: center; |
| position: relative; |
| } |
| .carousel-item::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); |
| z-index: 1; |
| } |
| .carousel-item > div.hook-content-wrapper { |
| position: relative; |
| z-index: 2; |
| padding: 3rem 2rem; |
| max-width: 850px; |
| } |
| |
| .hook-question { |
| font-size: 2rem; |
| line-height: 1.3; |
| font-weight: 700; |
| margin-bottom: 1.5rem; |
| color: #FFFFFF; |
| } |
| @media (min-width: 768px) { |
| .hook-question { |
| font-size: 2.5rem; |
| } |
| } |
| .hook-support-text { |
| font-size: 1rem; |
| line-height: 1.65; |
| color: #E0E0E0; |
| } |
| @media (min-width: 768px) { |
| .hook-support-text { |
| font-size: 1.1rem; |
| } |
| } |
| |
| .carousel-item.active { |
| display: flex; |
| animation: fadeIn 0.8s; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0.2; } |
| to { opacity: 1; } |
| } |
| |
| .modal { |
| transition: opacity 0.3s ease, visibility 0.3s ease; |
| } |
| .modal-content { |
| transition: transform 0.3s ease; |
| } |
| |
| .loader { |
| border: 4px solid #f3f3f3; |
| border-top: 4px solid var(--contract-blue); |
| border-radius: 50%; |
| width: 30px; |
| height: 30px; |
| animation: spin 1s linear infinite; |
| margin: 20px auto; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| .page-content { |
| display: none; |
| animation: fadeInPage 0.4s ease-in-out; |
| } |
| .page-content.active { |
| display: block; |
| } |
| @keyframes fadeInPage { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| nav { |
| background-color: rgba(255, 255, 255, 0.9); |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid var(--contract-border-gray); |
| } |
| .nav-link, .nav-dropdown-toggle { |
| padding-top: 0.75rem; |
| padding-bottom: 0.75rem; |
| transition: color 0.3s ease; |
| font-weight: 600; |
| color: var(--contract-dark-text); |
| text-transform: uppercase; |
| font-size: 0.8rem; |
| letter-spacing: 0.05em; |
| } |
| .nav-link:hover, .nav-dropdown-toggle:hover { |
| color: var(--contract-blue); |
| } |
| .nav-link.active, .nav-dropdown-toggle.active-parent { |
| color: var(--contract-blue) !important; |
| font-weight: 700; |
| border-bottom: none; |
| } |
| nav .logo-font { |
| color: var(--contract-dark-text); |
| font-weight: 700; |
| text-transform: lowercase; |
| } |
| nav .logo-font.active { |
| color: var(--contract-blue) !important; |
| } |
| |
| .nav-dropdown { |
| position: relative; |
| } |
| .nav-dropdown-content { |
| display: none; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| background-color: white; |
| min-width: 230px; |
| box-shadow: 0 8px 24px rgba(0,0,0,0.12); |
| z-index: 50; |
| border-radius: 0.25rem; |
| border: 1px solid var(--contract-border-gray); |
| } |
| .nav-dropdown:hover .nav-dropdown-content { |
| display: block; |
| } |
| .nav-dropdown-content a { |
| color: var(--contract-dark-text); |
| padding: 0.8rem 1.2rem; |
| text-decoration: none; |
| display: block; |
| font-weight: 500; |
| font-size: 0.85rem; |
| text-transform: none; |
| transition: background-color 0.2s ease, color 0.2s ease; |
| } |
| .nav-dropdown-content a:hover { |
| background-color: var(--contract-light-gray-bg); |
| color: var(--contract-blue); |
| } |
| .nav-dropdown-content a.active { |
| background-color: var(--contract-blue); |
| color: white !important; |
| } |
| |
| .btn { |
| padding: 0.8rem 1.75rem; |
| border-radius: 0.25rem; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| display: inline-block; |
| text-align: center; |
| cursor: pointer; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| font-size: 0.85rem; |
| } |
| .btn-primary { |
| background-color: var(--contract-blue); |
| color: white; |
| border: 2px solid var(--contract-blue); |
| } |
| .btn-primary:hover { |
| background-color: #003B72; |
| border-color: #003B72; |
| transform: translateY(-1px); |
| } |
| .btn-secondary { |
| background-color: transparent; |
| color: var(--contract-dark-text); |
| border: 2px solid var(--contract-dark-text); |
| } |
| .btn-secondary:hover { |
| background-color: var(--contract-dark-text); |
| color: white; |
| transform: translateY(-1px); |
| } |
| |
| .cta-card-home { |
| background-color: white; |
| border: 1px solid var(--contract-border-gray); |
| border-radius: 0.375rem; |
| padding: 2rem; |
| transition: all 0.3s ease-in-out; |
| display: flex; |
| flex-direction: column; |
| } |
| .cta-card-home:hover { |
| border-color: var(--contract-blue); |
| box-shadow: 0 8px 20px rgba(0,0,0,0.1); |
| transform: translateY(-4px); |
| } |
| .section-padding { |
| padding-top: 5rem; |
| padding-bottom: 5rem; |
| } |
| @media (min-width: 768px) { |
| .section-padding { |
| padding-top: 7rem; |
| padding-bottom: 7rem; |
| } |
| } |
| footer { |
| background-color: var(--contract-dark-text); |
| color: #A0A0A0; |
| padding-top: 3rem; |
| padding-bottom: 3rem; |
| } |
| footer p { |
| color: #A0A0A0; |
| } |
| |
| .img-placeholder-aspect { |
| position: relative; |
| width: 100%; |
| padding-bottom: 66.66%; |
| background-color: #e0e0e0; |
| border-radius: 0.375rem; |
| overflow: hidden; |
| } |
| .img-placeholder-aspect.vertical-img { |
| padding-bottom: 125%; |
| } |
| .img-placeholder-aspect.square-img { |
| padding-bottom: 100%; |
| } |
| .img-placeholder-aspect img, |
| .team-member-photo img { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| .full-width-image-section img { |
| width: 100%; |
| height: auto; |
| max-height: 500px; |
| object-fit: cover; |
| border-radius: 0.25rem; |
| } |
| |
| .project-carousel-wrapper { |
| overflow: hidden; |
| } |
| .project-carousel-track { |
| display: flex; |
| transition: transform 0.5s ease-in-out; |
| } |
| .project-carousel-item { |
| flex-shrink: 0; |
| padding: 0 0.75rem; |
| } |
| .project-carousel-item .project-image-container { |
| position: relative; |
| width: 100%; |
| padding-bottom: 75%; |
| background-color: var(--contract-border-gray); |
| border-radius: 0.25rem; |
| overflow: hidden; |
| margin-bottom: 1rem; |
| } |
| .project-carousel-item .project-image-container img { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| .project-carousel-item .project-content { |
| background-color: transparent; |
| padding: 0.5rem 0; |
| } |
| .project-carousel-item .project-content h4 { |
| font-weight: 600; |
| font-size: 1.1rem; |
| } |
| .project-carousel-item .project-content p { |
| font-size: 0.85rem; |
| } |
| .carousel-nav-button { |
| background-color: rgba(0, 74, 143, 0.7); |
| color: white; |
| border-radius: 50%; |
| width: 3rem; |
| height: 3rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: background-color 0.3s ease; |
| border: none; |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); |
| } |
| .carousel-nav-button:hover { |
| background-color: var(--contract-blue); |
| } |
| .carousel-nav-button:disabled { |
| background-color: rgba(0, 74, 143, 0.3); |
| cursor: not-allowed; |
| } |
| .form-input { |
| border: 1px solid var(--contract-border-gray); |
| border-radius: 0.25rem; |
| padding: 0.75rem 1rem; |
| width: 100%; |
| transition: border-color 0.3s ease, box-shadow 0.3s ease; |
| } |
| .form-input:focus { |
| border-color: var(--contract-blue); |
| box-shadow: 0 0 0 2px rgba(0, 74, 143, 0.2); |
| outline: none; |
| } |
| |
| .team-member-card { |
| background-color: white; |
| border-radius: 0.375rem; |
| box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); |
| overflow: hidden; |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| position: relative; |
| } |
| .team-member-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); |
| } |
| .team-member-photo { |
| width: 100%; |
| padding-bottom: 100%; |
| position: relative; |
| background-color: var(--contract-border-gray); |
| } |
| .country-tag { |
| position: absolute; |
| top: 0.75rem; |
| right: 0.75rem; |
| background-color: var(--contract-blue); |
| color: white; |
| padding: 0.25rem 0.6rem; |
| font-size: 0.7rem; |
| font-weight: 500; |
| border-radius: 9999px; |
| line-height: 1; |
| } |
| .office-location-card { |
| background-color: white; |
| padding: 2rem; |
| border: 1px solid var(--contract-border-gray); |
| border-radius: 0.375rem; |
| } |
| .office-location-card h4 { |
| font-size: 1.25rem; |
| font-weight: 600; |
| color: var(--contract-dark-text); |
| margin-bottom: 0.75rem; |
| } |
| .office-location-card p { |
| font-size: 0.9rem; |
| line-height: 1.6; |
| margin-bottom: 0.25rem; |
| } |
| .office-location-card a:not(.btn) { |
| color: var(--contract-blue); |
| text-decoration: none; |
| transition: color 0.2s ease; |
| } |
| .office-location-card a:not(.btn):hover { |
| color: #003B72; |
| } |
| |
| .filter-bar { |
| background-color: var(--contract-light-gray-bg); |
| padding: 1.5rem; |
| border-radius: 0.375rem; |
| margin-bottom: 2.5rem; |
| } |
| .filter-select { |
| background-color: white; |
| border: 1px solid var(--contract-border-gray); |
| border-radius: 0.25rem; |
| padding: 0.6rem 0.8rem; |
| font-size: 0.9rem; |
| color: var(--contract-dark-text); |
| } |
| .filter-select:focus { |
| outline: none; |
| border-color: var(--contract-blue); |
| box-shadow: 0 0 0 2px rgba(0, 74, 143, 0.2); |
| } |
| .project-gallery-card { |
| position: relative; |
| overflow: hidden; |
| border-radius: 0.375rem; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); |
| transition: box-shadow 0.3s ease; |
| } |
| .project-gallery-card:hover { |
| box-shadow: 0 10px 20px rgba(0,0,0,0.12); |
| } |
| .project-gallery-card .project-image-aspect { |
| padding-bottom: 75%; |
| } |
| .project-gallery-card .project-info-overlay { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background: linear-gradient(to top, rgba(0, 74, 143, 0.9) 0%, rgba(0, 74, 143, 0.7) 60%, rgba(0, 74, 143, 0) 100%); |
| color: white; |
| padding: 1.5rem 1rem 1rem; |
| opacity: 0; |
| transform: translateY(20px); |
| transition: opacity 0.3s ease, transform 0.3s ease; |
| } |
| .project-gallery-card:hover .project-info-overlay { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| .project-gallery-card .project-info-overlay h4 { |
| font-weight: 700; |
| font-size: 1.1rem; |
| margin-bottom: 0.25rem; |
| color: white; |
| } |
| .project-gallery-card .project-info-overlay p { |
| font-size: 0.8rem; |
| margin-bottom: 0.5rem; |
| color: #E0E0E0; |
| } |
| .project-gallery-card .project-info-overlay .btn-view-project { |
| font-size: 0.75rem; |
| padding: 0.4rem 0.8rem; |
| background-color: var(--atolye-yellow); |
| color: var(--contract-dark-text); |
| border-color: var(--atolye-yellow); |
| font-weight: 600; |
| } |
| .project-gallery-card .project-info-overlay .btn-view-project:hover { |
| background-color: #F0A000; |
| border-color: #F0A000; |
| } |
| |
| .testimonial-card { |
| background-color: white; |
| border: 1px solid var(--contract-border-gray); |
| border-radius: 0.375rem; |
| padding: 2rem; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.05); |
| display: flex; |
| flex-direction: column; |
| } |
| .testimonial-quote-icon { |
| font-size: 4rem; |
| line-height: 1; |
| color: var(--contract-blue); |
| margin-bottom: 1rem; |
| align-self: flex-start; |
| } |
| .testimonial-text { |
| font-size: 1.125rem; |
| line-height: 1.7; |
| color: var(--contract-dark-text); |
| margin-bottom: 1.5rem; |
| font-style: italic; |
| flex-grow: 1; |
| } |
| .testimonial-client-logo { |
| max-height: 40px; |
| width: auto; |
| margin-bottom: 1rem; |
| } |
| .testimonial-client-name { |
| font-weight: 600; |
| color: var(--contract-dark-text); |
| margin-bottom: 0.25rem; |
| } |
| .testimonial-client-role { |
| font-size: 0.875rem; |
| color: var(--contract-light-text); |
| margin-bottom: 1.5rem; |
| } |
| .content-block-image-container { |
| border-radius: 0.375rem; |
| overflow: hidden; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| height: 100%; |
| } |
| .content-block-image-container img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| .page-header-image-container { |
| position: relative; |
| width: 100%; |
| height: 40vh; |
| max-height: 450px; |
| overflow: hidden; |
| } |
| .page-header-image-container img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| .page-header-title-overlay { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| padding: 2rem 1.5rem; |
| background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 100%); |
| } |
| .page-header-title-overlay h1 { |
| color: white; |
| text-shadow: 1px 1px 3px rgba(0,0,0,0.5); |
| text-transform: none; |
| } |
| |
| |
| </style> |
| </head> |
| <body class="bg-main-content text-main"> |
|
|
| <nav class="sticky top-0 z-50"> |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
| <a href="#inicio" data-target="page-inicio" class="nav-link text-2xl font-bold logo-font">3g office</a> |
| <div class="hidden md:flex space-x-4 items-center" id="desktop-nav-links"> |
| <div class="nav-dropdown"> |
| <span class="nav-dropdown-toggle px-2" data-dropdown-parent="true">Esencia ▾</span> |
| <div class="nav-dropdown-content"> |
| <a href="#nuestra-vision" data-target="page-nuestra-vision" class="nav-link">Nuestra Visión</a> |
| <a href="#nuestro-metodo" data-target="page-nuestro-metodo" class="nav-link">Nuestro Método</a> |
| </div> |
| </div> |
|
|
| <div class="nav-dropdown"> |
| <span class="nav-dropdown-toggle px-2" data-dropdown-parent="true">Servicios ▾</span> |
| <div class="nav-dropdown-content"> |
| <a href="#lineas-accion" data-target="page-lineas-accion" class="nav-link">Líneas de Acción</a> |
| <a href="#nuestros-servicios" data-target="page-nuestros-servicios" class="nav-link">Retos Estratégicos</a> |
| </div> |
| </div> |
|
|
| <div class="nav-dropdown"> |
| <span class="nav-dropdown-toggle px-2" data-dropdown-parent="true">Experiencia ▾</span> |
| <div class="nav-dropdown-content"> |
| <a href="#nuestros-proyectos" data-target="page-nuestros-proyectos" class="nav-link">Nuestros Proyectos</a> |
| <a href="#nuestros-clientes" data-target="page-nuestros-clientes" class="nav-link">Nuestros Clientes</a> |
| </div> |
| </div> |
|
|
| <div class="nav-dropdown"> |
| <span class="nav-dropdown-toggle px-2" data-dropdown-parent="true">Equipo ▾</span> |
| <div class="nav-dropdown-content"> |
| <a href="#nuestra-red" data-target="page-nuestra-red" class="nav-link">Nuestra Red</a> |
| <a href="#nuestra-cultura" data-target="page-nuestra-cultura" class="nav-link">Nuestra Cultura</a> |
| </div> |
| </div> |
| |
| <a href="#contacto" data-target="page-contacto" class="nav-link px-2">Contacto</a> |
| </div> |
| <div class="md:hidden"> |
| <button id="mobile-menu-button" class="text-main focus:outline-none p-2"> |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> |
| </svg> |
| </button> |
| </div> |
| </div> |
| <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg border-t border-contract-border-gray"> |
| <div> |
| <button class="mobile-dropdown-toggle w-full text-left px-6 py-3 hover:bg-contract-light-gray-bg flex justify-between items-center"> |
| <span>Esencia</span> |
| <span class="dropdown-arrow transform transition-transform duration-200">▾</span> |
| </button> |
| <div class="mobile-dropdown-content hidden pl-8 bg-gray-50"> |
| <a href="#nuestra-vision" data-target="page-nuestra-vision" class="nav-link block px-6 py-2 hover:bg-contract-light-gray-bg">Nuestra Visión</a> |
| <a href="#nuestro-metodo" data-target="page-nuestro-metodo" class="nav-link block px-6 py-2 hover:bg-contract-light-gray-bg">Nuestro Método</a> |
| </div> |
| </div> |
| |
| <div> |
| <button class="mobile-dropdown-toggle w-full text-left px-6 py-3 hover:bg-contract-light-gray-bg flex justify-between items-center"> |
| <span>Servicios</span> |
| <span class="dropdown-arrow transform transition-transform duration-200">▾</span> |
| </button> |
| <div class="mobile-dropdown-content hidden pl-8 bg-gray-50"> |
| <a href="#lineas-accion" data-target="page-lineas-accion" class="nav-link block px-6 py-2 hover:bg-contract-light-gray-bg">Líneas de Acción</a> |
| <a href="#nuestros-servicios" data-target="page-nuestros-servicios" class="nav-link block px-6 py-2 hover:bg-contract-light-gray-bg">Retos Estratégicos</a> |
| </div> |
| </div> |
|
|
| <div> |
| <button class="mobile-dropdown-toggle w-full text-left px-6 py-3 hover:bg-contract-light-gray-bg flex justify-between items-center"> |
| <span>Experiencia</span> |
| <span class="dropdown-arrow transform transition-transform duration-200">▾</span> |
| </button> |
| <div class="mobile-dropdown-content hidden pl-8 bg-gray-50"> |
| <a href="#nuestros-proyectos" data-target="page-nuestros-proyectos" class="nav-link block px-6 py-2 hover:bg-contract-light-gray-bg">Nuestros Proyectos</a> |
| <a href="#nuestros-clientes" data-target="page-nuestros-clientes" class="nav-link block px-6 py-2 hover:bg-contract-light-gray-bg">Nuestros Clientes</a> |
| </div> |
| </div> |
|
|
| <div> |
| <button class="mobile-dropdown-toggle w-full text-left px-6 py-3 hover:bg-contract-light-gray-bg flex justify-between items-center"> |
| <span>Equipo</span> |
| <span class="dropdown-arrow transform transition-transform duration-200">▾</span> |
| </button> |
| <div class="mobile-dropdown-content hidden pl-8 bg-gray-50"> |
| <a href="#nuestra-red" data-target="page-nuestra-red" class="nav-link block px-6 py-2 hover:bg-contract-light-gray-bg">Nuestra Red</a> |
| <a href="#nuestra-cultura" data-target="page-nuestra-cultura" class="nav-link block px-6 py-2 hover:bg-contract-light-gray-bg">Nuestra Cultura</a> |
| </div> |
| </div> |
|
|
| <a href="#contacto" data-target="page-contacto" class="nav-link block px-6 py-3 hover:bg-contract-light-gray-bg">Contacto</a> |
| </div> |
| </nav> |
|
|
| <main id="main-content"> |
| <div id="page-inicio" class="page-content"> |
| <header class="relative text-white"> |
| <div id="hook-carousel" class="relative"> |
| </div> |
| </header> |
|
|
| <section class="section-padding bg-main-content"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="section-title text-main mb-6">Diseño sin complejos para un mundo complejo.</h2> |
| <p class="text-lg text-gray-700 mb-4 leading-relaxed max-w-3xl mx-auto">Construimos soluciones sin etiquetas para una experiencia humana sin etiquetas.</p> |
| <p class="text-gray-600 leading-relaxed max-w-3xl mx-auto"> |
| Comprendemos que la vida no sucede en silos y que los desafíos actuales desbordan las fronteras convencionales. Reconocemos que la experiencia humana es, en esencia, integral e indivisible, y los fenómenos que la impactan son inherentemente multinivel. Por tanto, estamos convencidos de que las únicas respuestas capaces de generar una transformación genuina nacen de una visión transversal y de la integración de múltiples disciplinas y escalas. |
| </p> |
| <div class="relative mt-12 md:mt-16"> |
| <div class="project-carousel-wrapper overflow-hidden"> |
| <div id="project-carousel-track" class="flex"> |
| </div> |
| </div> |
| <button id="project-prev" aria-label="Proyecto anterior" class="carousel-nav-button absolute top-1/2 left-0 transform -translate-y-1/2 -ml-2 md:-ml-4 z-10"> |
| ❮ |
| </button> |
| <button id="project-next" aria-label="Siguiente proyecto" class="carousel-nav-button absolute top-1/2 right-0 transform -translate-y-1/2 -mr-2 md:-mr-4 z-10"> |
| ❯ |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| <section class="section-padding bg-alternate-section"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="section-title text-main mb-6">Creamos las Arquitecturas Estratégicas que sostienen transformaciones reales.</h2> |
| <p class="text-gray-600 leading-relaxed max-w-3xl mx-auto"> |
| Porque ninguna transformación real ocurre sin vínculos auténticos, nuestro compromiso es conectar profundamente procesos y personas. Para ello, os acompañamos en un viaje integral, de principio a fin: comprendemos vuestra esencia y desafíos; activamos la inteligencia colectiva y la co-creación de experiencias significativas; y cultivamos relaciones y soluciones que evolucionan. Son estas intervenciones, que tejen lazos (Comunidad), dan forma a interacciones valiosas (Contenido) y optimizan los entornos que las acogen (Continente), las que construyen la verdadera infraestructura para sostener el cambio. A esto lo llamamos Arquitecturas Estratégicas. |
| </p> |
| <div class="container mx-auto px-6 pt-12 md:pt-16"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="cta-card-home"> |
| <h3 class="card-title mb-3 text-main">Nuestras Líneas de Acción</h3> |
| <p class="text-gray-600 mb-4 text-sm flex-grow">Descubre cómo nuestras líneas de acción Comunidad, Contenido y Continente impulsan la transformación.</p> |
| <a href="#lineas-accion" data-target="page-lineas-accion" class="nav-link btn btn-secondary mt-auto">Conocer Líneas de Acción</a> |
| </div> |
| <div class="cta-card-home"> |
| <h3 class="card-title mb-3 text-main">Los Retos que Abordamos</h3> |
| <p class="text-gray-600 mb-4 text-sm flex-grow">Explora cómo abordamos los desafíos estratégicos clave de hoy para organizaciones, entornos y ciudades.</p> |
| <a href="#nuestros-servicios" data-target="page-nuestros-servicios" class="nav-link btn btn-secondary mt-auto">Ver Retos Estratégicos</a> |
| </div> |
| <div class="cta-card-home"> |
| <h3 class="card-title mb-3 text-main">Nuestro Método</h3> |
| <p class="text-gray-600 mb-4 text-sm flex-grow">Conoce el proceso Grasp-Gather-Grow (3G) y nuestra plataforma integrada para co-crear impacto.</p> |
| <a href="#nuestro-metodo" data-target="page-nuestro-metodo" class="nav-link btn btn-secondary mt-auto">Entender Nuestro Método</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section-padding bg-main-content"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="section-title text-main mb-6">Inconformistas con Causa: Construyendo Futuros con Sentido, no Soluciones Genéricas.</h2> |
| <p class="text-gray-600 leading-relaxed max-w-3xl mx-auto"> |
| Desde nuestro inconformismo con causa y 25 años de experiencia pionera, rechazamos las soluciones genéricas ante desafíos únicos y profundamente humanos. Co-creamos con vosotros Arquitecturas Estratégicas que no son un fin, sino el medio preciso para sembrar activamente las semillas de los futuros positivos que el mundo demanda y merece: Entornos Adaptativos que respondan a la vida, Organizaciones Progresivas que impulsen la evolución consciente, y Ciudades Regenerativas que cultiven la prosperidad colectiva. Ser vuestros socios en la construcción de este legado de impacto tangible y con sentido es nuestro compromiso más profundo. |
| Este compromiso y esta forma de ver el mundo se traducen en nuestra manera de abordar los Retos Estratégicos fundamentales que hoy definen el camino hacia la transformación. |
| </p> |
| <div class="mt-8 text-center"> |
| <a href="#nuestra-vision" data-target="page-nuestra-vision" class="nav-link btn btn-secondary">Conoce Nuestra Visión</a> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section-padding bg-alternate-section full-width-image-section"> |
| <div class="container mx-auto px-6"> |
| <img src="https://placehold.co/1200x500/A0AEC0/FFFFFF?text=Imagen+Inspiradora+de+Proyectos" |
| alt="[Imagen inspiradora de proyectos o espacios transformados]" |
| class="w-full h-auto max-h-[550px] object-cover rounded-md shadow-xl" |
| onerror="this.onerror=null;this.src='https://placehold.co/1200x500/cccccc/969696?text=Error+al+cargar+imagen';"> |
| </div> |
| </section> |
|
|
| <section class="section-padding bg-main-content"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="section-title text-main mb-6">¿Listo para Iniciar el Cambio?</h2> |
| <p class="text-lg text-gray-700 mb-8 leading-relaxed max-w-xl mx-auto">Hablemos de tu desafío y de cómo podemos diseñar juntos vuestro próximo gran paso.</p> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-primary text-lg">Inicia la Conversación</a> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="page-nuestra-vision" class="page-content bg-main-content"> |
| <section class="pb-12 md:pb-16"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/BFDBFE/1E3A8A?text=Visión+Estratégica+3G" |
| alt="[Imagen de cabecera para Nuestra Visión]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Nuestra Visión</h1> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="section-padding pt-0"> |
| <div class="container mx-auto px-6"> |
| <div class="space-y-16 max-w-5xl mx-auto"> |
| |
| <div class="md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-2/5 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/A5B4FC/312E81?text=Futuro+Humano" alt="[Imagen vertical sobre futuro humano]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/E2E8F0/4A5568?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">Navegando las Transiciones: Diseño Consciente para un Futuro Humano</h3> |
| <p>Vivimos una era de <strong>transiciones globales profundas y aceleradas</strong>. La forma en que habitamos el mundo, nos organizamos y nos relacionamos está cambiando a una velocidad sin precedentes, impulsada por fuerzas demográficas, una crisis climática urgente y una revolución digital imparable. Este dinamismo constante genera una complejidad inédita, donde los modelos tradicionales y las respuestas fragmentadas ya no son suficientes.</p> |
| <p class="mt-4">Este escenario de cambio continuo no es un mero telón de fondo; es el desafío central que nos interpela a todos. Emerge así una necesidad imperante: la de adoptar <strong>miradas alternativas, enfoques que abracen la complejidad de forma sistémica e integral</strong>, capaces de ir más allá de lo evidente para forjar soluciones verdaderamente relevantes y sostenibles.</p> |
| </div> |
| </div> |
| |
| <div class="bg-alternate-section py-12 md:py-20 -mx-6 px-6 md:rounded-lg"> |
| <div class="container mx-auto"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <h3 class="content-block-title text-main">Diseñar sin complejos: los límites solo existen hasta que alguien decide trascenderlos.</h3> |
| <p>En 3g office, nuestra respuesta a esta necesidad es una filosofía de acción: <strong>"Diseñar sin complejos"</strong>. Esto significa liberarnos de las ataduras de las etiquetas sectoriais obsoletas y de las limitaciones de las escalas aisladas. Entendemos que los grandes desafíos actuales exigen una <strong>visión transversal que reconozca la fluidez de la experiencia, y una perspectiva multinivel que comprenda la interdependencia de los sistemas</strong>.</p> |
| <p class="mt-4">"Diseñar sin complejos" es nuestra forma de ser <strong>pioneros e inconformistas</strong>: nos permite cuestionar, explorar y conectar ideas y contextos de maneras innovadoras, siempre con el objetivo de catalizar transformaciones que tengan un impacto significativo.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-2/5 md:order-2 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/C4B5FD/4338CA?text=Anclajes+del+Diseño" alt="[Imagen vertical sobre anclajes del diseño]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/A0AEC0/4A5568?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 md:order-1 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">Anclajes del Diseño Consciente: la experiencia humana como origen, los futuros positivos como destino.</h3> |
| <p>Para "Diseñar sin complejos" de manera efectiva y con propósito, nuestro enfoque se ancla en dos certezas fundamentales:</p> |
| <ul class="list-disc list-inside mt-4 space-y-3 text-gray-600"> |
| <li><strong>El Punto de Partida: La Unicidad de la Experiencia Humana.</strong> Todo nuestro trabajo parte de esta convicción: la <strong>experiencia humana es una, integral y profundamente transversal</strong>. Las personas no vivimos en compartimentos estancos; somos seres completos y multidimensionales en todo momento. Comprender y diseñar para esta persona integral es nuestro primer compromiso, la base de toda solución relevante.</li> |
| <li class="mt-2"><strong>El Punto de Llegada: Nuestra Apuesta por Horizontes Positivos.</strong> Nuestra labor está intencionadamente dirigida hacia la co-creación de futuros vitales y positivos. Hacemos una <strong>apuesta explícita y no neutral</strong> por tres horizontes estratégicos interconectados: <strong>Entornos Adaptativos</strong> que respondan a la vida; <strong>Organizaciones Progresivas</strong> que impulsen la evolución consciente; y <strong>Ciudades Regenerativas</strong> que cultiven la prosperidad colectiva.</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="bg-alternate-section py-12 md:py-20 -mx-6 px-6 md:rounded-lg"> |
| <div class="container mx-auto md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-2/5 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/81D4FA/01579B?text=Puente+Metodológico" alt="[Imagen vertical sobre puente metodológico]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/A0AEC0/4A5568?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">El Puente Metodológico: cimentado en principios humanos, elevado por valores trascendentes</h3> |
| <p>Para transitar desde la comprensión de la experiencia humana hacia la materialización de estos horizontes, nuestro "Diseño sin complejos" se apoya en dos pilares metodológicos:</p> |
| <ul class="list-disc list-inside mt-4 space-y-3 text-gray-600"> |
| <li><strong>Visión Transversal basada en Principios Humanos Esenciales:</strong> Para superar la fragmentación sectorial, aplicamos cuatro principios que subyacen a toda interacción humana significativa: <strong>Colaboración, Aprendizaje, Bienestar y Vinculación</strong>. Este Diseño Basado en Principios es nuestra herramienta para asegurar la relevancia humana de nuestras propuestas en cualquier ámbito.</li> |
| <li class="mt-2"><strong>Visión Multinivel basada en Valores Fundamentales:</strong> Para abordar la interdependencia entre ciudad, organización y entorno, adoptamos un Diseño Basado en <strong>Valores Fundamentales y trascendentes</strong>. Estos valores —como la inclusión, la sostenibilidad profunda o la innovación consciente— guían el diseño de soluciones concretas en cada escala, alineadas con nuestros horizontes estratégicos.</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-2/5 md:order-2 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/FCD34D/78350F?text=Socios+Transformación" alt="[Imagen vertical sobre socios en transformación]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/A0AEC0/4A5568?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 md:order-1 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">Socios en la Transformación: porque el futuro no solo se imagina, se co-crea con un compromiso que trasciende</h3> |
| <p>Para nosotros, la <strong>Arquitectura Estratégica</strong> implica diseñar sin complejos, con una <strong>libertad estratégica clara para integrar escalas, sectores y disciplinas</strong> que habitualmente operan de forma separada. Significa trabajar conscientemente desde la <strong>unicidad de la experiencia humana hacia horizontes claramente definidos y positivos</strong>. Al adoptar esta posición, trascendemos los roles tradicionales; no somos solo arquitectos, diseñadores o consultores.</p> |
| <p class="mt-4">Somos <strong>inconformistas con causa</strong>, exploradores y artesanos con 25 años de trayectoria pionera. Nuestro compromiso más profundo es ser vuestros <strong>socios estratégicos en la transformación</strong>, acompañándoos para <strong>diseñar con sentido real, propósito explícito e impacto tangible</strong>.</p> |
| </div> |
| </div> |
|
|
| <div class="mt-16 pt-12 border-t border-contract-border-gray text-center space-y-4 md:space-y-0 md:flex md:justify-center md:space-x-4"> |
| <a href="#nuestros-servicios" data-target="page-nuestros-servicios" class="nav-link btn btn-secondary">Explora los Retos Estratégicos</a> |
| <a href="#lineas-accion" data-target="page-lineas-accion" class="nav-link btn btn-primary">Profundiza en Nuestro Enfoque</a> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="page-lineas-accion" class="page-content bg-main-content"> |
| <section class="pb-12 md:pb-16"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/60A5FA/FFFFFF?text=Líneas+de+Acción+3G" |
| alt="[Imagen de cabecera para Líneas de Acción]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Nuestras Líneas de Acción</h1> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="section-padding pt-0"> |
| <div class="container mx-auto px-6"> |
| <div class="space-y-16 max-w-5xl mx-auto"> |
| |
| <div class="pt-8"> |
| <p class="text-center max-w-3xl mx-auto mb-12">Nuestro "Diseño sin complejos" se materializa actuando sobre tres líneas estratégicas interconectadas, las claves para articular la <strong>unicidad de la experiencia humana</strong> en cualquier contexto:</p> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="cta-card-home text-center"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/BFDBFE/1E3A8A?text=Comunidad" alt="[Imagen conceptual de Comunidad]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/cccccc/969696?text=Error+Imagen';"> |
| </div> |
| <h4 class="service-card-title">COMUNIDAD</h4> |
| <p class="font-semibold text-main mb-2 text-md">Forjando Vínculos y Cultura.</p> |
| <p class="text-xs text-gray-600 mb-4 flex-grow">Nos enfocamos en la creación consciente de redes humanas auténticas y culturas resilientes, donde la confianza, la colaboración efectiva y un fuerte sentido de pertenencia se convierten en motores de transformación.</p> |
| <a href="#" class="btn btn-secondary-dark mt-auto w-full text-xs">Explorar Comunidad ></a> |
| </div> |
| <div class="cta-card-home text-center"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/FBCFE8/831843?text=Contenido" alt="[Imagen conceptual de Contenido]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/cccccc/969696?text=Error+Imagen';"> |
| </div> |
| <h4 class="service-card-title">CONTENIDO</h4> |
| <p class="font-semibold text-main mb-2 text-md">Impulsando Experiencias y Conocimiento Compartido.</p> |
| <p class="text-xs text-gray-600 mb-4 flex-grow">Facilitamos las dinámicas que generan experiencias enriquecedoras y conocimiento colectivo con significado, transformando la interacción cotidiana en momentos estratégicos que impulsan el aprendizaje, la innovación y un propósito común.</p> |
| <a href="#" class="btn btn-secondary-dark mt-auto w-full text-xs">Explorar Contenido ></a> |
| </div> |
| <div class="cta-card-home text-center"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/D1FAE5/065F46?text=Continente" alt="[Imagen conceptual de Continente]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/cccccc/969696?text=Error+Imagen';"> |
| </div> |
| <h4 class="service-card-title">CONTINENTE</h4> |
| <p class="font-semibold text-main mb-2 text-md">Creando Entornos Estratégicos que Potencian.</p> |
| <p class="text-xs text-gray-600 mb-4 flex-grow">Concebimos los entornos físicos y digitales como plataformas activas y adaptativas, diseñadas intencionadamente para catalizar las dinámicas de Comunidad y Contenido, y potenciar la interacción humana significativa.</p> |
| <a href="#" class="btn btn-secondary-dark mt-auto w-full text-xs">Explorar Continente ></a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="md:flex md:items-stretch md:space-x-12 bg-alternate-section py-12 md:py-20 -mx-6 px-6 md:rounded-lg"> |
| <div class="md:w-2/5 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/818CF8/FFFFFF?text=Presencialidad+Deliberada" alt="[Imagen vertical sobre presencialidad deliberada]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/cccccc/969696?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">Un Mundo Reimaginado: La Transformación de la Presencialidad y la Proximidad</h3> |
| <p>La disrupción global reciente nos obligó a reimaginar el valor del encuentro. La antigua noción de presencia dio paso a la <strong>"presencialidad deliberada"</strong>: un tiempo y espacio diseñados con intención para la conexión profunda, la co-creación y el florecimiento cultural, revelando la proximidad como un activo estratégico, eminentemente relacional y afectivo. Esta profunda reinterpretación del valor de la interacción, nacida en la vanguardia del sector <strong>workplace</strong>, trascendió rápidamente para convertirse en un <strong>fenómeno transversal</strong>, evidenciando la interconexión de nuestras experiencias y la necesidad urgente de un nuevo paradigma para diseñar la interacción humana en todos los ámbitos.</p> |
| </div> |
| </div> |
|
|
| <div class="md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-3/5 md:order-1 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">Nuestra Evolución: De la Inteligencia del Workplace a la Autoridad Transversal en 3C</h3> |
| <p>En 3g office, fuimos protagonistas de esta evolución desde nuestra experiencia pionera en el sector <strong>workplace</strong>, un verdadero <strong>"laboratorio de transformación relacional y afectiva"</strong>. Allí comprendimos que el valor real trascendía la simple funcionalidad para residir en la capacidad de generar interacciones significativas y construir comunidades resilientes. De este crisol de aprendizaje práctico y reflexión estratégica, destilamos el <strong>paradigma Comunidad-Contenido-Continente (3C)</strong> y la convicción en el poder del <strong>"diseño intencionado"</strong> como claves para activar la experiencia humana. Es esta profunda inteligencia, forjada en la vanguardia del cambio y los principios universales descubiertos, la que hoy fundamenta nuestra <strong>autoridad transversal</strong> para aplicar las 3C con una visión "sin complejos" a cualquier desafío de transformación.</p> |
| </div> |
| <div class="md:w-2/5 md:order-2 mb-8 md:mb-0 mt-8 md:mt-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/F472B6/FFFFFF?text=Inteligencia+Workplace" alt="[Imagen vertical sobre inteligencia del workplace]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/cccccc/969696?text=Error+Imagen';"> |
| </div> |
| </div> |
| |
| <div class="bg-alternate-section py-12 md:py-20 -mx-6 px-6 md:rounded-lg"> |
| <div class="container mx-auto md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-2/5 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/FBBF24/FFFFFF?text=Sinergia+3C" alt="[Imagen vertical de la sinergia 3C]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/cccccc/969696?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">La Sinergia 3C: Impulso Integral</h3> |
| <p>"Comunidad, Contenido y Continente no son conceptos aislados que operen en silos; su verdadero poder transformador se desata cuando los orquestamos como un <strong>todo coherente y profundamente interconectado</strong>. En 3g office, entendemos que una Comunidad auténtica y vibrante necesita Contenidos significativos que la nutran y un Continente —físico y digital— que la inspire, la conecte y potencie sus interacciones. De igual forma, un Contenido de valor solo alcanza su pleno impacto si es compartido y vivido por una Comunidad activa, y si el Continente facilita su acceso, disfrute y co-creación.</p> |
| <p class="mt-4">Es esta comprensión profunda de su <strong>interdependencia sinérgica</strong>, articulada con nuestra filosofía de 'diseño sin complejos', la que nos permite superar las soluciones fragmentadas. Así, co-creamos con vosotros las 'Arquitecturas Estratégicas' que realmente sostienen las 'transformaciones reais': respuestas integrales que nacen de uma visão holística da experiencia humana.</p> |
| <p class="mt-4">Estas son, pues, nuestras líneas de acción estratégicas, el <strong>qué</strong> y el <strong>dónde</strong> de nuestra intervención. El siguiente paso es comprender el <strong>cómo</strong> las llevamos a la práctica en cada desafío único.</p> |
| <div class="mt-8 text-center md:text-left"> |
| <a href="#nuestro-metodo" data-target="page-nuestro-metodo" class="nav-link btn btn-primary">Descubre Nuestro Método</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| |
| <div id="page-nuestro-metodo" class="page-content bg-main-content"> |
| <section class="pb-12 md:pb-16"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/D1D5DB/374151?text=Nuestro+Método+3G" |
| alt="[Imagen de cabecera para Nuestro Método]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Nuestro Método</h1> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="section-padding pt-0"> |
| <div class="container mx-auto px-6"> |
| <div class="space-y-16 max-w-4xl mx-auto"> |
| <div class="md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-2/5 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/FCA5A5/7F1D1D?text=Origen+Método" alt="[Imagen vertical sobre origen del método]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/E2E8F0/4A5568?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">El Origen y el Propósito de Nuestro Método</h3> |
| <p>Para "Diseñar sin complejos" y co-crear las "Arquitecturas Estratégicas" que demanda un mundo en transformación, se necesita más que intuición: se requiere un método con alma y rigor. Nuestro nombre, 3g, evolucionó de un origen tecnológico a una filosofía de acción, nacida de la profunda reflexión sobre la esencia de nuestro trabajo: la necesidad de un enfoque humano, transversal y multinivel para desafíos que desbordan lo convencional. De esta convicción surgió nuestro proceso Grasp-Gather-Grow (3G) y, posteriormente, nuestra plataforma integrada. Este es el "cómo" detrás de nuestra capacidad para transformar.</p> |
| </div> |
| </div> |
|
|
| <div class="bg-alternate-section py-12 md:py-20 -mx-6 px-6 md:rounded-lg"> |
| <div class="container mx-auto"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <h3 class="content-block-title text-main">El Viaje de Transformación: Un Proceso Vivo para Comprender, Co-crear y Cultivar el Cambio.</h3> |
| <p class="mb-4">Nuestro proceso metodológico, <strong>Grasp-Gather-Grow (3G)</strong>, es el corazón de nuestro acompañamiento. Más que una secuencia lineal, es una filosofía de colaboración y una lógica integrada que asegura profundidad, participación y sostenibilidad en cada transformación:</p> |
| <ul class="space-y-3 text-gray-600 text-left list-disc list-inside"> |
| <li><strong class="text-contract-blue">GRASP (Comprender Profundamente):</strong> Partimos de la convicción fundamental de que ninguna transformación puede ser significativa y duradera sin una comprensión profunda, empática y rigurosa del contexto. Nos sumergimos en vuestra realidad para desvelar desafíos ocultos, aspiraciones genuinas y el verdadero potencial de transformación, construyendo juntos una visión estratégica compartida.</li> |
| <li class="mt-2"><strong class="text-contract-blue">GATHER (Reunir y Activar Colaborativamente):</strong> Creemos con certeza estratégica que las transformaciones reales emergen del trabajo colaborativo auténtico y la inteligencia colectiva. En esta fase, facilitamos espacios de diálogo y co-creación, reuniendo diversas voces para diseñar soluciones innovadoras que cuenten con el compromiso y la legitimidad emocional de todos los implicados. Es el momento de alinear y construir juntos.</li> |
| <li class="mt-2"><strong class="text-contract-blue">GROW (Cultivar y Evolucionar Estratégicamente):</strong> Nuestro compromiso se extiende más allá de la implementación inicial, expresando nuestra intención profunda de cultivar las condiciones para que la transformación sea sostenible. Buscamos que las soluciones se adapten a nuevas realidades y continúen evolucionando orgánicamente, fomentando la resiliencia y el aprendizaje constante.</li> |
| </ul> |
| <p class="mt-6">El proceso 3G se nutre de la <strong>participación transversal continua</strong>, articulando evidencia sólida con un profundo engagement emocional, asegurando así que las transformaciones no solo sean efectivas, sino también auténticas y duraderas.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-2/5 md:order-2 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/6EE7B7/047857?text=Plataforma+Integral" alt="[Imagen vertical sobre plataforma integral]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/A0AEC0/4A5568?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 md:order-1 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">Sinergia en Acción: Nuestra Plataforma para la Transformación Integral.</h3> |
| <p>La verdadera alquimia de nuestro enfoque se produce al integrar nuestro proceso dinámico 3G con nuestras <strong>Líneas de Acción Estratégica 3C (Comunidad, Contenido y Continente)</strong>, cuya naturaleza y poder exploramos en la sección anterior. Esta integración se materializa en nuestra <strong>Plataforma Metodológica 3G x 3C</strong>, un marco estratégico y operativo que dota de estructura, intención y profundidad a cada intervención.</p> |
| <p class="mt-4">No es una fórmula rígida, sino una <strong>matriz adaptable</strong> que cruza el "cómo" de nuestro acompañamiento (Grasp, Gather, Grow) con el "qué" y el "dónde" de nuestra actuación (Comunidad, Contenido y Continente). Cada intersección de esta matriz define una intencionalidad estratégica específica, permitiéndonos diseñar y gestionar de manera integrada las dimensiones relacionales (Comunidad), experienciales (Contenido) y espaciales (Continente) a lo largo de todo el ciclo de transformación.</p> |
| <p class="mt-4">Esta plataforma nos faculta para:</p> |
| <ul class="list-disc list-inside mt-2 space-y-1 text-gray-600"> |
| <li>Asegurar una <strong>integralidad estratégica de principio a fin</strong>, evitando la fragmentación.</li> |
| <li>Operar con <strong>flexibilidad transversal y multinivel</strong>, adaptándonos a diversos sectores y escalas.</li> |
| <li>Promover un <strong>diseño intencionado y deliberado</strong>, donde cada elemento responde a un propósito claro.</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="bg-alternate-section py-12 md:py-20 -mx-6 px-6 md:rounded-lg"> |
| <div class="container mx-auto md:flex md:items-stretch md:space-x-12"> |
| <div class="md:w-2/5 mb-8 md:mb-0 content-block-image-container"> |
| <img src="https://placehold.co/600x800/FDE68A/713F12?text=Respuestas+a+Medida" alt="[Imagen vertical sobre respuestas a medida]" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x800/A0AEC0/4A5568?text=Error+Imagen';"> |
| </div> |
| <div class="md:w-3/5 flex flex-col justify-center"> |
| <h3 class="content-block-title text-main">De la Metodología a la Acción: Respuestas a Medida para Retos Complejos</h3> |
| <p>Entendemos que no existen "recetas únicas" para los desafíos genuinamente transformadores. Por ello, nuestra plataforma es un <strong>marco vivo y profundamente adaptable</strong>. Es la herramienta con la que abordamos los <strong>Retos Estratégicos</strong> que definen el presente y el futuro de organizaciones y ciudades, reconociendo que cada situación es singular y exige una <strong>respuesta a medida</strong>, co-creada y contextualmente precisa.</p> |
| <p class="mt-4">Esta capacidad de adaptación, combinada con el rigor de nuestro método y la visión integral de nuestras líneas de acción, es lo que nos permite acompañaros en la co-creación de soluciones que no solo son innovadoras, sino también vuestras, relevantes y capaces de generar un impacto sostenible.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-16 pt-12 border-t border-contract-border-gray text-center space-y-4 md:space-y-0 md:flex md:justify-center md:space-x-4"> |
| <a href="#nuestros-servicios" data-target="page-nuestros-servicios" class="nav-link btn btn-primary">Explora los Retos Estratégicos</a> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-secondary">Conversa con Nosotros</a> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| |
| <div id="page-nuestros-servicios" class="page-content"> |
| <section class="bg-main-content"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/1E40AF/FFFFFF?text=Nuestros+Retos+Estratégicos" |
| alt="[Imagen de cabecera para Retos Estratégicos]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Retos estratégicos</h1> |
| </div> |
| </div> |
| </div> |
| <div class="section-padding"> |
| <div class="container mx-auto px-6"> |
| <div class="max-w-4xl mx-auto mb-16"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8"> |
| <p class="text-lg text-gray-700 leading-relaxed">Nuestro "Inconformismo estratégico" y el enfoque <strong>Outside-In</strong> —partiendo siempre de una comprensión profunda y empática de vuestras necesidades reais— nos han permitido identificar, a lo largo de 25 años de experiencia pionera, una serie de <strong>Retos Estratégicos recurrentes</strong>.</p> |
| <p class="text-lg text-gray-700 leading-relaxed">Estos no son categorías de servicios convencionales, sino los desafíos cruciais y complejos que, una y otra vez, observamos en líderes, organizaciones y ciudades que buscan una transformación genuina y con propósito en este mundo en constante cambio.</p> |
| <p class="text-lg text-gray-700 leading-relaxed md:col-span-2">Entendemos que estos retos no se resuelven con respuestas genéricas ni neutras. Por ello, aplicamos nuestro "Diseño sin complejos", nuestra visión centrada en la "unicidad de la experiencia humana", y nuestra robusta plataforma metodológica 3G x 3C para co-crear con vosotros "Arquitecturas Estratégicas" que ofrezcan respuestas a medida y generen un impacto real y positivo. A continuación, exploramos estos 6 Retos Estratégicos y cómo os acompañamos a convertirlos en palancas de evolución y crecimiento sostenible.</p> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="cta-card-home"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/BFDBFE/1E3A8A?text=Conexión+Híbrida" alt="[Imagen conceptual de conexión híbrida]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/BFDBFE/1E3A8A?text=Error+Imagen';"> |
| </div> |
| <h3 class="card-title mb-3 text-main">1. Hybrid & Distributed Connection Challenge 🎯</h3> |
| <p class="text-sm description mb-3 text-gray-600"><strong>¿Cómo crear y gestionar estratégicamente ecosistemas híbridos y distribuidos que maximicen la conexión efectiva entre personas, equipos, tecnologías y espacios?</strong></p> |
| <p class="text-gray-700 font-medium mt-auto solution mb-4">Diseñamos soluciones híbridas que van más allá de la flexibilidad: forjamos conexiones humanas y culturales que impulsan el rendimiento con propósito.</p> |
| <div class="mt-auto"> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-secondary-dark w-full">Explorar Conexión Híbrida ></a> |
| </div> |
| </div> |
| <div class="cta-card-home"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/FBCFE8/831843?text=Potencial+Humano" alt="[Imagen conceptual de potencial humano]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/FBCFE8/831843?text=Error+Imagen';"> |
| </div> |
| <h3 class="card-title mb-3 text-main">2. Human Potential & Empowerment Challenge 🎯</h3> |
| <p class="text-sm description mb-3 text-gray-600"><strong>¿Cómo liberar realmente el potencial humano en nuestra organización, impulsando una cultura inclusiva, fortaleciendo el talento, el bienestar integral y desarrollando capacidades individuales y colectivas?</strong></p> |
| <p class="text-gray-700 font-medium mt-auto solution mb-4">Liberamos el potencial humano en vuestra organización, co-creando culturas y entornos donde el talento prospera, el bienestar es integral y la inclusión es una realidad activa.</p> |
| <div class="mt-auto"> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-secondary-dark w-full">Descubrir Potencial Humano ></a> |
| </div> |
| </div> |
| <div class="cta-card-home"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/D1FAE5/065F46?text=Regeneración" alt="[Imagen conceptual de regeneración y sostenibilidad]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/D1FAE5/065F46?text=Error+Imagen';"> |
| </div> |
| <h3 class="card-title mb-3 text-main">3. Regeneration & Sustainable Transition Challenge 🎯</h3> |
| <p class="text-sm description mb-3 text-gray-600"><strong>¿Cómo podemos transformar estratégicamente nuestra organización hacia un modelo regenerativo y sostenible que genere valor ambiental, social y económico tangible?</strong></p> |
| <p class="text-gray-700 font-medium mt-auto solution mb-4">Impulsamos vuestra transición hacia modelos regenerativos que generan valor medible —ambiental, social y económico— y fortalecen vuestro propósito en el mundo.</p> |
| <div class="mt-auto"> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-secondary-dark w-full">Impulsar Regeneración ></a> |
| </div> |
| </div> |
| <div class="cta-card-home"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/FEE2E2/991B1B?text=Experiencia+Estratégica" alt="[Imagen conceptual de experiencia estratégica y marca]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/FEE2E2/991B1B?text=Error+Imagen';"> |
| </div> |
| <h3 class="card-title mb-3 text-main">4. Strategic Experience & Positioning Challenge 🎯</h3> |
| <p class="text-sm description mb-3 text-gray-600"><strong>¿Cómo potenciar estratégicamente nuestra marca y posicionamiento mediante experiencias físicas y digitales memorables, coherentes y diferenciadas?</strong></p> |
| <p class="text-gray-700 font-medium mt-auto solution mb-4">Diseñamos experiencias físicas y digitales que se convierten en embajadoras de vuestra marca, asegurando coherencia omnicanal, diferenciación competitiva y un posicionamiento estratégico memorable.</p> |
| <div class="mt-auto"> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-secondary-dark w-full">Fortalecer Experiencia Estratégica ></a> |
| </div> |
| </div> |
| <div class="cta-card-home"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/FEF3C7/92400E?text=Crecimiento+Adaptativo" alt="[Imagen conceptual de crecimiento adaptativo y escalabilidad]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/FEF3C7/92400E?text=Error+Imagen';"> |
| </div> |
| <h3 class="card-title mb-3 text-main">5. Adaptive Growth & Flexible Scaling Challenge 🎯</h3> |
| <p class="text-sm description mb-3 text-gray-600"><strong>¿Cómo gestionar estratégicamente el crecimiento de nuestra organización, asegurando escalabilidad ágil, adaptabilidad efectiva y flexibilidad operativa en entornos cambiantes?</strong></p> |
| <p class="text-gray-700 font-medium mt-auto solution mb-4">Aseguramos que vuestro crecimiento sea ágil y sostenible, diseñando con vosotros las estrategias y estructuras —organizacionais, espaciales y operativas— que garantizan flexibilidad y eficiencia en cualquier escenario.</p> |
| <div class="mt-auto"> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-secondary-dark w-full">Explorar Crecimiento Adaptativo ></a> |
| </div> |
| </div> |
| <div class="cta-card-home"> |
| <div class="img-placeholder-aspect mb-4"> |
| <img src="https://placehold.co/400x267/E0E7FF/3730A3?text=Valor+de+Activos" alt="[Imagen conceptual de optimización de activos]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x267/E0E7FF/3730A3?text=Error+Imagen';"> |
| </div> |
| <h3 class="card-title mb-3 text-main">6. Asset Value Optimization & Operations Challenge 🎯</h3> |
| <p class="text-sm description mb-3 text-gray-600"><strong>¿Cómo optimizar estratégicamente el valor de nuestros activos inmobiliarios e infraestructuras, maximizando la eficiencia operativa y el rendimiento en contextos dinámicos y cambiantes?</strong></p> |
| <p class="text-gray-700 font-medium mt-auto solution mb-4">Transformamos vuestros activos inmobiliarios e infraestructuras en plataformas de alto rendimiento, optimizando su valor estratégico y operativo mediante un diseño que integra eficiencia, sostenibilidad y una experiencia humana superior.</p> |
| <div class="mt-auto"> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-secondary-dark w-full">Optimizar Valor de Activos ></a> |
| </div> |
| </div> |
| </div> |
| <p class="text-center text-gray-600 leading-relaxed max-w-3xl mx-auto mt-16 text-lg"> |
| "Estos Retos Estratégicos representan las áreas donde nuestra visión sistémica, nuestro 'diseño sin complejos' y nuestro método integrado 3G x 3C convergen para generar el mayor impacto. Cada uno es una invitación a una transformación profunda y con propósito." |
| </p> |
| <div class="mt-12 text-center"> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-primary text-lg"> |
| ¿Tu organización enfrenta uno o más de estos desafíos? Conversemos. |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| |
| <div id="page-contacto" class="page-content bg-main-content"> |
| <section class="pb-12 md:pb-16"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/F472B6/FFFFFF?text=Hablemos+de+tu+Proyecto" |
| alt="[Imagen de cabecera para Contacto]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Contacto</h1> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="section-padding pt-0"> |
| <div class="container mx-auto px-6"> |
| <p class="text-center text-lg text-gray-700 mb-12 max-w-2xl mx-auto"> |
| ¿Listo para transformar tu organización o explorar nuevas posibilidades? <br class="hidden md:block"> Nos encantaría escuchar sobre tus desafíos y co-crear el futuro. |
| </p> |
|
|
| <div class="max-w-2xl mx-auto content-card mb-16" style="border: 1px solid var(--contract-border-gray); padding: 2.5rem; border-radius: 0.375rem; box-shadow: 0 5px 15px rgba(0,0,0,0.07);"> |
| <form id="contact-form"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6"> |
| <div class="mb-5"> |
| <label for="name" class="block text-main font-semibold mb-1 text-sm">Nombre<span class="text-red-500">*</span></label> |
| <input type="text" id="name" name="name" class="form-input" placeholder="Tu nombre" required> |
| </div> |
| <div class="mb-5"> |
| <label for="apellido" class="block text-main font-semibold mb-1 text-sm">Apellido<span class="text-red-500">*</span></label> |
| <input type="text" id="apellido" name="apellido" class="form-input" placeholder="Tu apellido" required> |
| </div> |
| </div> |
| <div class="mb-5"> |
| <label for="email" class="block text-main font-semibold mb-1 text-sm">Correo Electrónico<span class="text-red-500">*</span></label> |
| <input type="email" id="email" name="email" class="form-input" placeholder="tu@email.com" required> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6"> |
| <div class="mb-5"> |
| <label for="telefono" class="block text-main font-semibold mb-1 text-sm">Teléfono</label> |
| <input type="tel" id="telefono" name="telefono" class="form-input" placeholder="Tu teléfono"> |
| </div> |
| <div class="mb-5"> |
| <label for="empresa" class="block text-main font-semibold mb-1 text-sm">Empresa</label> |
| <input type="text" id="empresa" name="empresa" class="form-input" placeholder="Nombre de tu empresa"> |
| </div> |
| </div> |
| <div class="mb-5"> |
| <label for="pais" class="block text-main font-semibold mb-1 text-sm">País</label> |
| <input type="text" id="pais" name="pais" class="form-input" placeholder="País de residencia"> |
| </div> |
| <div class="mb-6"> |
| <label for="message" class="block text-main font-semibold mb-1 text-sm">Mensaje<span class="text-red-500">*</span></label> |
| <textarea id="message" name="message" rows="5" class="form-input" placeholder="Escribe tu mensaje aquí..." required></textarea> |
| </div> |
| <div class="mb-6"> |
| <label class="flex items-center text-sm text-gray-600"> |
| <input type="checkbox" id="privacy" name="privacy" class="form-checkbox h-4 w-4 text-contract-blue border-contract-border-gray rounded focus:ring-contract-blue mr-2" required> |
| Acepto la <a href="#" class="underline hover:text-contract-blue">política de privacidad</a> y los términos de servicio.<span class="text-red-500">*</span> |
| </label> |
| </div> |
| <div class="text-center"> |
| <button type="submit" class="btn btn-primary w-full md:w-auto"> |
| Enviar Mensaje |
| </button> |
| </div> |
| </form> |
| <div id="form-feedback" class="mt-6 text-center"></div> |
| </div> |
|
|
| <div class="text-center"> |
| <h2 class="section-title text-main mb-10">Nuestras Oficinas</h2> |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| <div class="office-location-card text-left"> |
| <h4 class="text-lg font-semibold mb-2">Madrid, España</h4> |
| <p class="text-sm">Paseo de la Castellana, 77</p> |
| <p class="text-sm">28046 Madrid</p> |
| <p class="text-sm mt-2"><a href="tel:+34917819700" class="hover:text-contract-blue font-medium">T +34 917 819 700</a></p> |
| <p class="text-sm"><a href="mailto:madrid@3goffice.com" class="hover:text-contract-blue font-medium">madrid@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-lg font-semibold mb-2">Barcelona, España</h4> |
| <p class="text-sm">Avenida Diagonal, 456</p> |
| <p class="text-sm">08006 Barcelona</p> |
| <p class="text-sm mt-2"><a href="tel:+34930185000" class="hover:text-contract-blue font-medium">T +34 930 185 000</a></p> |
| <p class="text-sm"><a href="mailto:barcelona@3goffice.com" class="hover:text-contract-blue font-medium">barcelona@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">Ciudad de México, MX</h4> |
| <p class="text-sm">Av. Insurgentes Sur 1898, Piso 14</p> |
| <p class="text-sm">Col. Florida, Álvaro Obregón, 01020</p> |
| <p class="text-sm mt-2"><a href="tel:+525590004000" class="hover:text-contract-blue font-medium">T +52 55 9000 4000</a></p> |
| <p class="text-sm"><a href="mailto:mexico@3goffice.com" class="hover:text-contract-blue font-medium">mexico@3goffice.com</a></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="page-nuestros-proyectos" class="page-content bg-main-content"> |
| <section class="pb-12 md:pb-16"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/3B82F6/FFFFFF?text=Nuestros+Proyectos+Inspiradores" |
| alt="[Imagen de cabecera para Nuestros Proyectos]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Casos Destacados</h1> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="section-padding pt-0"> |
| <div class="container mx-auto px-6"> |
| <div class="filter-bar mb-12"> |
| <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 items-end"> |
| <div> |
| <label for="filter-ciudad" class="block text-sm font-medium text-gray-700 mb-1">Ciudad</label> |
| <select id="filter-ciudad" class="filter-select w-full"> |
| <option value="">Todas</option> |
| </select> |
| </div> |
| <div> |
| <label for="filter-tipo-proyecto" class="block text-sm font-medium text-gray-700 mb-1">Tipo de Proyecto</label> |
| <select id="filter-tipo-proyecto" class="filter-select w-full"> |
| <option value="">Todos</option> |
| <option value="Comunidad">Comunidad</option> |
| <option value="Contenido">Contenido</option> |
| <option value="Continente">Continente</option> |
| </select> |
| </div> |
| <div> |
| <label for="filter-tipo-reto" class="block text-sm font-medium text-gray-700 mb-1">Tipo de Reto</label> |
| <select id="filter-tipo-reto" class="filter-select w-full"> |
| <option value="">Todos</option> |
| </select> |
| </div> |
| <button id="apply-filters" class="btn btn-primary w-full md:col-span-1 lg:w-auto">Filtrar</button> |
| <button id="clear-filters" class="btn btn-secondary w-full md:col-span-1 lg:w-auto">Limpiar</button> |
| </div> |
| </div> |
|
|
| <div id="project-gallery" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"> |
| </div> |
| <div id="no-results-message" class="text-center text-gray-500 py-10 hidden"> |
| No se encontraron proyectos que coincidan con los filtros seleccionados. |
| </div> |
|
|
| <div class="text-center mt-12"> |
| <button id="load-more-projects" class="btn btn-primary">Cargar Más Proyectos</button> |
| </div> |
| </div> |
| </section> |
| </div> |
| <div id="page-nuestros-clientes" class="page-content bg-main-content"> |
| <section class="pb-12 md:pb-16"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/EC4899/FFFFFF?text=Testimonios+de+Clientes" |
| alt="[Imagen de cabecera para Nuestros Clientes]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Nuestros Clientes</h1> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="section-padding pt-0"> |
| <div class="container mx-auto px-6"> |
| <p class="text-center text-lg text-gray-700 mb-16 max-w-3xl mx-auto"> |
| La confianza y satisfacción de nuestros clientes son nuestro mayor aval. Descubre cómo hemos colaborado para transformar sus espacios y estrategias. |
| </p> |
|
|
| <div class="grid md:grid-cols-2 gap-8 lg:gap-12 max-w-5xl mx-auto"> |
| <div class="testimonial-card"> |
| <span class="testimonial-quote-icon text-5xl">“</span> |
| <p class="testimonial-text"> |
| "Trabajar con 3g office ha sido una experiencia reveladora. Su enfoque integral y su capacidad para entender nuestras necesidades culturales y operativas fueron clave para el éxito de nuestro nuevo espacio de trabajo." |
| </p> |
| <img src="https://placehold.co/150x50/cccccc/969696?text=Logo+Empresa+A" alt="[Logo de Empresa A]" class="testimonial-client-logo"> |
| <p class="testimonial-client-name">Ana Pérez</p> |
| <p class="testimonial-client-role">Directora de RRHH, Empresa AlfaTech</p> |
| <a href="#nuestros-proyectos" data-target="page-nuestros-proyectos" class="nav-link text-contract-blue hover:text-contract-blue-dark font-semibold text-sm mt-4 self-start">VER PROYECTO ></a> |
| </div> |
|
|
| <div class="testimonial-card"> |
| <span class="testimonial-quote-icon text-5xl">“</span> |
| <p class="testimonial-text"> |
| "La visión estratégica y la creatividad del equipo de 3g office superaron nuestras expectativas. Nos ayudaron a materializar un entorno que no solo es funcional, sino que inspira innovación." |
| </p> |
| <img src="https://placehold.co/150x50/cccccc/969696?text=Logo+Empresa+B" alt="[Logo de Empresa B]" class="testimonial-client-logo"> |
| <p class="testimonial-client-name">Carlos López</p> |
| <p class="testimonial-client-role">CEO, InnovaCorp</p> |
| <a href="#nuestros-proyectos" data-target="page-nuestros-proyectos" class="nav-link text-contract-blue hover:text-contract-blue-dark font-semibold text-sm mt-4 self-start">VER PROYECTO ></a> |
| </div> |
|
|
| <div class="testimonial-card"> |
| <span class="testimonial-quote-icon text-5xl">“</span> |
| <p class="testimonial-text"> |
| "Desde el primer momento, 3g office demostró un profundo compromiso con nuestros objetivos. Su metodología 3C fue fundamental para alinear a nuestro equipo y crear un espacio que realmente refleja nuestra cultura." |
| </p> |
| <img src="https://placehold.co/150x50/cccccc/969696?text=Logo+Empresa+C" alt="[Logo de Empresa C]" class="testimonial-client-logo"> |
| <p class="testimonial-client-name">Sofía Martínez</p> |
| <p class="testimonial-client-role">Gerente de Operaciones, Soluciones Globales</p> |
| <a href="#nuestros-proyectos" data-target="page-nuestros-proyectos" class="nav-link text-contract-blue hover:text-contract-blue-dark font-semibold text-sm mt-4 self-start">VER PROYECTO ></a> |
| </div> |
|
|
| <div class="testimonial-card"> |
| <span class="testimonial-quote-icon text-5xl">“</span> |
| <p class="testimonial-text"> |
| "El acompañamiento de 3g office fue crucial en nuestra transición hacia un modelo de trabajo híbrido. Su experiencia y enfoque centrado en las personas nos permitieron adaptarnos con éxito y mejorar la colaboración." |
| </p> |
| <img src="https://placehold.co/150x50/cccccc/969696?text=Logo+Empresa+D" alt="[Logo de Empresa D]" class="testimonial-client-logo"> |
| <p class="testimonial-client-name">Javier Rodríguez</p> |
| <p class="testimonial-client-role">Director de Innovación, Conecta Soluciones</p> |
| <a href="#nuestros-proyectos" data-target="page-nuestros-proyectos" class="nav-link text-contract-blue hover:text-contract-blue-dark font-semibold text-sm mt-4 self-start">VER PROYECTO ></a> |
| </div> |
| </div> |
| <div class="text-center mt-16"> |
| <a href="#nuestros-proyectos" data-target="page-nuestros-proyectos" class="nav-link btn btn-primary text-lg">CONOCÉ MÁS PROYECTOS</a> |
| </div> |
| </div> |
| </section> |
| </div> |
| <div id="page-nuestra-red" class="page-content bg-main-content"> |
| <section class="pb-12 md:pb-16"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/5EEAD4/0F766E?text=Nuestra+Red+Global" |
| alt="[Imagen de cabecera para Nuestra Red]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Nuestra Red</h1> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="section-padding pt-0"> |
| <div class="container mx-auto px-6"> |
| <p class="text-center text-lg text-gray-700 mb-16 max-w-3xl mx-auto"> |
| Creemos en el poder de la colaboración y la inteligencia colectiva. Nuestra red está formada por profesionales y organizaciones líderes en diversas disciplinas, complementando nuestras capacidades para ofrecer soluciones integrales y de vanguardia. |
| </p> |
| |
| <h2 class="section-title text-center mb-10 text-main">QUIÉNES SOMOS</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-16"> |
| <div class="team-member-card"> |
| <div class="team-member-photo"> |
| <img src="https://placehold.co/400x400/004A8F/FFFFFF?text=Colaborador+1" alt="[Foto de Colaborador 1]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x400/cccccc/969696?text=Error+Imagen';"> |
| <span class="country-tag">España</span> |
| </div> |
| <div class="p-6 text-center"> |
| <h4 class="text-xl font-semibold text-main mb-1">Nombre Apellido 1</h4> |
| <p class="text-contract-blue text-sm font-medium mb-2">Especialista en Sostenibilidad</p> |
| <p class="text-xs text-gray-600 leading-relaxed"> |
| "Colaborar con 3g office nos permite llevar la innovación sostenible a proyectos transformadores." |
| </p> |
| </div> |
| </div> |
| <div class="team-member-card"> |
| <div class="team-member-photo"> |
| <img src="https://placehold.co/400x400/003B72/FFFFFF?text=Colaborador+2" alt="[Foto de Colaborador 2]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x400/cccccc/969696?text=Error+Imagen';"> |
| <span class="country-tag">México</span> |
| </div> |
| <div class="p-6 text-center"> |
| <h4 class="text-xl font-semibold text-main mb-1">Nombre Apellido 2</h4> |
| <p class="text-contract-blue text-sm font-medium mb-2">Experto en Tecnología y Datos</p> |
| <p class="text-xs text-gray-600 leading-relaxed"> |
| "Aportamos la analítica avanzada para optimizar los espacios y la experiencia del usuario." |
| </p> |
| </div> |
| </div> |
| <div class="team-member-card"> |
| <div class="team-member-photo"> |
| <img src="https://placehold.co/400x400/004A8F/FFFFFF?text=Colaborador+3" alt="[Foto de Colaborador 3]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x400/cccccc/969696?text=Error+Imagen';"> |
| <span class="country-tag">Argentina</span> |
| </div> |
| <div class="p-6 text-center"> |
| <h4 class="text-xl font-semibold text-main mb-1">Nombre Apellido 3</h4> |
| <p class="text-contract-blue text-sm font-medium mb-2">Diseñador de Experiencias</p> |
| <p class="text-xs text-gray-600 leading-relaxed"> |
| "Juntos, creamos entornos que inspiran y conectan a las personas de maneras significativas." |
| </p> |
| </div> |
| </div> |
| <div class="team-member-card"> |
| <div class="team-member-photo"> |
| <img src="https://placehold.co/400x400/003B72/FFFFFF?text=Colaborador+4" alt="[Foto de Colaborador 4]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x400/cccccc/969696?text=Error+Imagen';"> |
| <span class="country-tag">Chile</span> |
| </div> |
| <div class="p-6 text-center"> |
| <h4 class="text-xl font-semibold text-main mb-1">Nombre Apellido 4</h4> |
| <p class="text-contract-blue text-sm font-medium mb-2">Consultor en Bienestar Organizacional</p> |
| <p class="text-xs text-gray-600 leading-relaxed"> |
| "Nuestro enfoque conjunto prioriza el bienestar como motor de productividad y cultura." |
| </p> |
| </div> |
| </div> |
| <div class="team-member-card"> |
| <div class="team-member-photo"> |
| <img src="https://placehold.co/400x400/004A8F/FFFFFF?text=Colaborador+5" alt="[Foto de Colaborador 5]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x400/cccccc/969696?text=Error+Imagen';"> |
| <span class="country-tag">Perú</span> |
| </div> |
| <div class="p-6 text-center"> |
| <h4 class="text-xl font-semibold text-main mb-1">Nombre Apellido 5</h4> |
| <p class="text-contract-blue text-sm font-medium mb-2">Arquitecto Urbanista</p> |
| <p class="text-xs text-gray-600 leading-relaxed"> |
| "Co-creamos visiones urbanas que integran funcionalidad, estética y regeneración." |
| </p> |
| </div> |
| </div> |
| <div class="team-member-card"> |
| <div class="team-member-photo"> |
| <img src="https://placehold.co/400x400/003B72/FFFFFF?text=Colaborador+6" alt="[Foto de Colaborador 6]" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x400/cccccc/969696?text=Error+Imagen';"> |
| <span class="country-tag">Colombia</span> |
| </div> |
| <div class="p-6 text-center"> |
| <h4 class="text-xl font-semibold text-main mb-1">Nombre Apellido 6</h4> |
| <p class="text-contract-blue text-sm font-medium mb-2">Facilitador de Procesos Creativos</p> |
| <p class="text-xs text-gray-600 leading-relaxed"> |
| "Desbloqueamos el potencial creativo de los equipos para soluciones innovadoras." |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-16 pt-16 border-t border-contract-border-gray"> |
| <h2 class="section-title text-center mb-10 text-main uppercase">Dónde Estamos</h2> |
| <p class="text-center text-lg text-gray-700 mb-12 max-w-3xl mx-auto"> |
| Con presencia en las principales ciudades de Iberoamérica, nuestro alcance global y conocimiento local nos permiten ofrecer soluciones adaptadas a cada contexto. |
| </p> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-10 max-w-5xl mx-auto"> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">Madrid, España</h4> |
| <p class="text-sm">Paseo de la Castellana, 77</p> |
| <p class="text-sm">28046 Madrid</p> |
| <p class="text-sm mt-2"><a href="tel:+34917819700" class="hover:text-contract-blue font-medium">T +34 917 819 700</a></p> |
| <p class="text-sm"><a href="mailto:madrid@3goffice.com" class="hover:text-contract-blue font-medium">madrid@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">Barcelona, España</h4> |
| <p class="text-sm">Avenida Diagonal, 456</p> |
| <p class="text-sm">08006 Barcelona</p> |
| <p class="text-sm mt-2"><a href="tel:+34930185000" class="hover:text-contract-blue font-medium">T +34 930 185 000</a></p> |
| <p class="text-sm"><a href="mailto:barcelona@3goffice.com" class="hover:text-contract-blue font-medium">barcelona@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">Ciudad de México, MX</h4> |
| <p class="text-sm">Av. Insurgentes Sur 1898, Piso 14</p> |
| <p class="text-sm">Col. Florida, Álvaro Obregón, 01020</p> |
| <p class="text-sm mt-2"><a href="tel:+525590004000" class="hover:text-contract-blue font-medium">T +52 55 9000 4000</a></p> |
| <p class="text-sm"><a href="mailto:mexico@3goffice.com" class="hover:text-contract-blue font-medium">mexico@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">Buenos Aires, AR</h4> |
| <p class="text-sm">Av. Libertador 602, Piso 7</p> |
| <p class="text-sm">C1001ABT, CABA</p> |
| <p class="text-sm mt-2"><a href="tel:+541152632000" class="hover:text-contract-blue font-medium">T +54 11 5263 2000</a></p> |
| <p class="text-sm"><a href="mailto:buenosaires@3goffice.com" class="hover:text-contract-blue font-medium">buenosaires@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">Santiago, Chile</h4> |
| <p class="text-sm">Av. Apoquindo 5950, Piso 10</p> |
| <p class="text-sm">Las Condes, Región Metropolitana</p> |
| <p class="text-sm mt-2"><a href="tel:+56228205300" class="hover:text-contract-blue font-medium">T +56 2 2820 5300</a></p> |
| <p class="text-sm"><a href="mailto:santiago@3goffice.com" class="hover:text-contract-blue font-medium">santiago@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">Lima, Perú</h4> |
| <p class="text-sm">Av. Víctor Andrés Belaúnde 147</p> |
| <p class="text-sm">Vía Principal 125, San Isidro</p> |
| <p class="text-sm mt-2"><a href="tel:+5117085500" class="hover:text-contract-blue font-medium">T +51 1 708 5500</a></p> |
| <p class="text-sm"><a href="mailto:lima@3goffice.com" class="hover:text-contract-blue font-medium">lima@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">Bogotá, Colombia</h4> |
| <p class="text-sm">Carrera 11 #93-53, Oficina 401</p> |
| <p class="text-sm">Chicó, Bogotá D.C.</p> |
| <p class="text-sm mt-2"><a href="tel:+5717449000" class="hover:text-contract-blue font-medium">T +57 1 744 9000</a></p> |
| <p class="text-sm"><a href="mailto:bogota@3goffice.com" class="hover:text-contract-blue font-medium">bogota@3goffice.com</a></p> |
| </div> |
| <div class="office-location-card text-left"> |
| <h4 class="text-xl font-semibold mb-2">São Paulo, Brasil</h4> |
| <p class="text-sm">Av. Pres. Juscelino Kubitschek, 1327</p> |
| <p class="text-sm">Vila Nova Conceição, São Paulo - SP</p> |
| <p class="text-sm mt-2"><a href="tel:+551130188800" class="hover:text-contract-blue font-medium">T +55 11 3018 8800</a></p> |
| <p class="text-sm"><a href="mailto:saopaulo@3goffice.com" class="hover:text-contract-blue font-medium">saopaulo@3goffice.com</a></p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-16 pt-12 border-t border-contract-border-gray text-center"> |
| <h2 class="section-title text-main mb-6">Únete a Nuestra Red</h2> |
| <p class="text-lg text-gray-700 mb-8 max-w-2xl mx-auto"> |
| Buscamos constantemente profesionales y organizaciones apasionadas por la transformación y el diseño de futuros positivos. Si compartes nuestra visión, explora cómo podemos colaborar. |
| </p> |
| <a href="#contacto" data-target="page-contacto" class="nav-link btn btn-primary text-lg">Conocer Oportunidades</a> |
| </div> |
| </div> |
| </section> |
| </div> |
| <div id="page-nuestra-cultura" class="page-content bg-main-content"> |
| <section class="pb-12 md:pb-16"> |
| <div class="relative page-header-image-container"> |
| <img src="https://placehold.co/1600x450/A78BFA/4C1D95?text=Cultura+3G+Office" |
| alt="[Imagen de cabecera para Nuestra Cultura]" |
| class="w-full h-full object-cover"> |
| <div class="page-header-title-overlay"> |
| <div class="container mx-auto px-6"> |
| <h1 class="page-title text-left" style="text-transform: none; color: white;">Nuestra Cultura</h1> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="section-padding pt-0"> |
| <div class="container mx-auto px-6"> |
| <p class="text-center text-lg text-gray-700">Información sobre la cultura de nuestro equipo próximamente...</p> |
| </div> |
| </section> |
| </div> |
|
|
| </main> |
|
|
| <footer class="py-12"> |
| <div class="container mx-auto px-6 text-center"> |
| <p class="text-sm">© <span id="current-year"></span> 3g office. Todos los derechos reservados.</p> |
| <p class="text-xs mt-2">Prototipo diseñado por IA con fines de demostración.</p> |
| </div> |
| </footer> |
|
|
| <div id="info-modal" class="modal fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center p-4 opacity-0 invisible z-[100]"> |
| <div class="modal-content bg-white p-8 rounded-lg shadow-2xl w-full max-w-md transform scale-95"> |
| <h3 id="info-modal-title" class="text-2xl font-bold mb-4 text-main">Descubre Más</h3> |
| <p id="info-modal-text" class="text-gray-600 mb-6"> |
| Este es un espacio para mostrar información adicional relevante al hook o sección que acabas de ver. |
| </p> |
| <img src="https://placehold.co/400x200/CBD5E0/4A5568?text=Contenido+del+Modal" alt="[Imagen de contenido del modal]" class="rounded mb-6 w-full" onerror="this.onerror=null;this.src='https://placehold.co/400x200/CBD5E0/4A5568?text=Error+Imagen';"> |
| <button id="close-info-modal-button" class="btn btn-primary w-full"> |
| Cerrar |
| </button> |
| </div> |
| </div> |
|
|
| <div id="ai-ideas-modal" class="modal fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 opacity-0 invisible z-[101]"> |
| <div class="modal-content bg-white p-6 md:p-8 rounded-lg shadow-2xl w-full max-w-lg transform scale-95"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 id="ai-modal-title" class="text-xl md:text-2xl font-bold text-main">Ideas Estratégicas con IA</h3> |
| <button id="close-ai-modal-button" class="text-gray-500 hover:text-gray-700 text-2xl">×</button> |
| </div> |
| <div id="ai-modal-body" class="text-gray-700 leading-relaxed"> |
| <div class="loader-container text-center py-4"> |
| <div class="loader"></div> |
| <p class="text-sm text-gray-500">Generando ideas...</p> |
| </div> |
| <div id="ai-generated-content" class="prose max-w-none prose-sm"></div> |
| </div> |
| <div class="mt-6 text-right"> |
| <button id="close-ai-modal-button-footer" class="btn btn-primary"> |
| Entendido |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="copied-message" class="fixed bottom-5 left-1/2 -translate-x-1/2 bg-contract-dark-text text-white px-4 py-2 rounded-md shadow-lg opacity-0 transition-opacity duration-300">¡Texto copiado!</div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| const navLinks = document.querySelectorAll('.nav-link'); |
| const pageContents = document.querySelectorAll('.page-content'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| let hookCarouselInitialized = false; |
| let hookCarouselIntervalId = null; |
| let projectCarouselInitialized = false; |
| let projectGalleryInitialized = false; |
| |
| |
| |
| const hookCarousel = document.getElementById('hook-carousel'); |
| const hookData = [ |
| { question: "¿Está vuestro modelo de trabajo híbrido fomentando la verdadera conexión y agilidad, o se ha convertido en una fuente inesperada de fragmentación cultural y desgaste?", supportText: "La promesa de autonomía y eficiencia de los nuevos modelos es fuerte, pero su complejidad inherente exige un diseño transversal de espacios, cultura y tecnología centrado en la experiencia humana. Sin este abordaje integral, muchas organizaciones ven cómo la desconexión se profundiza, levantando nuevos silos en lugar de construir puentes.", backgroundImage: "https://placehold.co/1200x800/64748B/FFFFFF?text=Conexión+Híbrida+Moderna" }, |
| { question: "¿Vuestra estrategia de innovación os está catapultando como líderes del futuro, o sin advertirlo, os mantiene anclados a las respuestas de un pasado que ya no existe?", supportText: "La reinvención constante es la nueva norma en un mundo en transformación, pero las adaptaciones superficiales raramente construyen la resiliencia necesaria para liderar el mañana. Abordar la transformación de forma sistémica, desafiando lo convencional, es crucial. De lo contrario, ¿estamos realmente diseñando el futuro o simplemente gestionando la reacción al presente?", backgroundImage: "https://placehold.co/1200x800/7C3AED/FFFFFF?text=Innovación+Futurista" }, |
| { question: "¿Es vuestra estrategia de sostenibilidad un simple ejercicio de cumplimiento y un discurso de intenciones, o el verdadero motor de un modelo de negocio regenerativo que crea valor trascendente y con propósito?", supportText: "Las crisis globales nos urgen a ir más allá de la mitigación del impacto; exigen una transformación profunda hacia modelos que regeneren activamente y aporten valor medible. Convertir la sostenibilidad de una obligación en una palanca estratégica para un futuro con propósito es el desafío complejo que muchas organizaciones aún deben resolver.", backgroundImage: "https://placehold.co/1200x800/10B981/FFFFFF?text=Sostenibilidad+Regenerativa" }, |
| { question: "¿Son el talento y el bienestar pilares fundamentales de vuestro discurso diario, o la fuerza motriz real, tangible y medible que impulsa vuestra cultura y vuestros resultados?", supportText: "Activar el pleno potencial humano en un mundo diverso y exigente requiere más que buenas intenciones; demanda un diseño consciente y sistémico de la experiencia donde el bienestar integral, la inclusión y el desarrollo de capacidades sean realidades tangibles. Sin ello, se corre el riesgo de solo gestionar el talento, en lugar de cultivarlo para un impacto extraordinario.", backgroundImage: "https://placehold.co/1200x800/F59E0B/FFFFFF?text=Talento+y+Bienestar" }, |
| { question: "En la necesaria búsqueda del crecimiento, ¿estáis fortaleciendo vuestra esencia y capacidades futuras, o quizás arriesgando la fragmentación y la pérdida de identidad por una agilidad mal entendida?", supportText: "Escalar con agilidad es vital en mercados dinámicos, pero un crecimiento que no se sustenta en un diseño estratégico integral a menudo conduce a la fragmentación operativa y la ineficiencia. Asegurar una expansión adaptativa y sostenible, que armonice estructura, procesos y cultura, es el complejo desafío para no comprometer la evolución futura.", backgroundImage: "https://placehold.co/1200x800/EC4899/FFFFFF?text=Crecimiento+Estratégico" } |
| ]; |
| let currentHookIndex = 0; |
| |
| function renderHookCarousel() { |
| if (!hookCarousel) return; |
| hookCarousel.innerHTML = ''; |
| hookData.forEach((hook, index) => { |
| const item = document.createElement('div'); |
| item.classList.add('carousel-item', 'px-6'); |
| item.style.backgroundImage = `url('${hook.backgroundImage}')`; |
| item.setAttribute('role', 'group'); |
| item.setAttribute('aria-label', `Diapositiva ${index + 1} de ${hookData.length}`); |
| if (index === currentHookIndex) item.classList.add('active'); |
| item.innerHTML = ` |
| <div class="hook-content-wrapper bg-black bg-opacity-25 p-6 md:p-10 rounded-lg max-w-3xl mx-auto text-center"> |
| <h1 class="hook-question text-white">${hook.question}</h1> |
| <p class="hook-support-text text-gray-200">${hook.supportText}</p> |
| </div> |
| `; |
| hookCarousel.appendChild(item); |
| }); |
| } |
| |
| function nextHook() { |
| currentHookIndex = (currentHookIndex + 1) % hookData.length; |
| renderHookCarousel(); |
| } |
| |
| function initHookCarousel() { |
| if (!hookCarouselInitialized && hookCarousel && hookData.length > 0) { |
| renderHookCarousel(); |
| if (hookCarouselIntervalId) clearInterval(hookCarouselIntervalId); |
| hookCarouselIntervalId = setInterval(nextHook, 7000); |
| hookCarouselInitialized = true; |
| } |
| } |
| |
| function stopHookCarousel() { |
| if (hookCarouselIntervalId) clearInterval(hookCarouselIntervalId); |
| hookCarouselIntervalId = null; |
| hookCarouselInitialized = false; |
| } |
| |
| |
| const projectTrack = document.getElementById('project-carousel-track'); |
| const projectPrevButton = document.getElementById('project-prev'); |
| const projectNextButton = document.getElementById('project-next'); |
| const projectsDataHome = [ |
| { imgSrc: "https://placehold.co/400x300/004A8F/FFFFFF?text=Proyecto+A", title: "Proyecto Innovador Alfa", description: "Transformación digital para el sector financiero." }, |
| { imgSrc: "https://placehold.co/400x300/003B72/FFFFFF?text=Proyecto+B", title: "Espacio Colaborativo Beta", description: "Diseño de oficinas para la nueva era del trabajo." }, |
| { imgSrc: "https://placehold.co/400x300/004A8F/FFFFFF?text=Proyecto+C", title: "Ciudad Inteligente Gamma", description: "Soluciones urbanas sostenibles y conectadas." }, |
| { imgSrc: "https://placehold.co/400x300/003B72/FFFFFF?text=Proyecto+D", title: "Bienestar Corporativo Delta", description: "Estrategias para potenciar el capital humano." }, |
| { imgSrc: "https://placehold.co/400x300/004A8F/FFFFFF?text=Proyecto+E", title: "Retail Experience Epsilon", description: "Reinvención del punto de venta físico y digital." }, |
| { imgSrc: "https://placehold.co/400x300/003B72/FFFFFF?text=Proyecto+F", title: "Infraestructura Resiliente Zeta", description: "Optimización de activos para el futuro." }, |
| { imgSrc: "https://placehold.co/400x300/004A8F/FFFFFF?text=Proyecto+G", title: "Cultura Organizacional Eta", description: "Fomentando la adaptación y el crecimiento." }, |
| { imgSrc: "https://placehold.co/400x300/003B72/FFFFFF?text=Proyecto+H", title: "Ecosistema de Innovación Theta", description: "Conectando startups y corporaciones." }, |
| { imgSrc: "https://placehold.co/400x300/004A8F/FFFFFF?text=Proyecto+I", title: "Campus Educativo Iota", description: "Diseñando el futuro del aprendizaje." } |
| ]; |
| let projectCurrentIndex = 0; |
| let projectItemsVisible = 3; |
| let projectItemWidth = 0; |
| |
| function renderProjectCarouselItems() { |
| if (!projectTrack) return; |
| projectTrack.innerHTML = ''; |
| projectsDataHome.forEach(project => { |
| const item = document.createElement('div'); |
| item.classList.add('project-carousel-item'); |
| item.innerHTML = ` |
| <div class="bg-white rounded-md shadow-md overflow-hidden h-full flex flex-col transition-shadow duration-300 hover:shadow-xl"> |
| <div class="project-image-container"> |
| <img src="${project.imgSrc}" alt="${project.title}" |
| onerror="this.onerror=null;this.src='https://placehold.co/400x300/cccccc/969696?text=Error+Imagen';"> |
| </div> |
| <div class="p-4 project-content flex-grow"> |
| <h4 class="font-semibold text-md mb-1 text-main">${project.title}</h4> |
| <p class="text-xs text-gray-600">${project.description}</p> |
| </div> |
| </div> |
| `; |
| projectTrack.appendChild(item); |
| }); |
| } |
| |
| function updateProjectCarouselLayout() { |
| if (!projectTrack || !projectTrack.children.length) return; |
| |
| if (window.innerWidth < 768) projectItemsVisible = 1; |
| else if (window.innerWidth < 1024) projectItemsVisible = 2; |
| else projectItemsVisible = 3; |
| |
| const wrapperWidth = projectTrack.parentElement.offsetWidth; |
| projectItemWidth = wrapperWidth / projectItemsVisible; |
| |
| Array.from(projectTrack.children).forEach(item => { |
| item.style.width = `${projectItemWidth}px`; |
| }); |
| |
| const maxIndex = Math.max(0, projectsDataHome.length - projectItemsVisible); |
| if (projectCurrentIndex > maxIndex) { |
| projectCurrentIndex = maxIndex; |
| } |
| slideProjectTrack(); |
| } |
| |
| function slideProjectTrack() { |
| if (!projectTrack) return; |
| const maxIndex = Math.max(0, projectsDataHome.length - projectItemsVisible); |
| projectCurrentIndex = Math.max(0, Math.min(projectCurrentIndex, maxIndex)); |
| |
| const newTransform = -projectCurrentIndex * projectItemWidth; |
| projectTrack.style.transform = `translateX(${newTransform}px)`; |
| |
| if(projectPrevButton) projectPrevButton.disabled = projectCurrentIndex === 0; |
| if(projectNextButton) projectNextButton.disabled = projectCurrentIndex >= maxIndex; |
| } |
| |
| function initProjectCarousel() { |
| if (!projectCarouselInitialized && projectTrack) { |
| renderProjectCarouselItems(); |
| updateProjectCarouselLayout(); |
| |
| if(projectPrevButton) projectPrevButton.addEventListener('click', () => { |
| projectCurrentIndex--; |
| slideProjectTrack(); |
| }); |
| if(projectNextButton) projectNextButton.addEventListener('click', () => { |
| projectCurrentIndex++; |
| slideProjectTrack(); |
| }); |
| window.addEventListener('resize', updateProjectCarouselLayout); |
| projectCarouselInitialized = true; |
| } |
| } |
| |
| |
| const projectGallery = document.getElementById('project-gallery'); |
| const filterCiudad = document.getElementById('filter-ciudad'); |
| const filterTipoProyecto = document.getElementById('filter-tipo-proyecto'); |
| const filterTipoReto = document.getElementById('filter-tipo-reto'); |
| const applyFiltersButton = document.getElementById('apply-filters'); |
| const clearFiltersButton = document.getElementById('clear-filters'); |
| const loadMoreProjectsButton = document.getElementById('load-more-projects'); |
| const noResultsMessage = document.getElementById('no-results-message'); |
| |
| const allProjectsData = [ |
| { id: 1, cliente: "Empresa Alfa", imgSrc: "https://placehold.co/600x450/004A8F/FFFFFF?text=Proyecto+Alfa", ciudad: "Madrid", tipoProyecto: "Continente", reto: "Hybrid & Distributed Connection Challenge" }, |
| { id: 2, cliente: "Organización Beta", imgSrc: "https://placehold.co/600x450/003B72/FFFFFF?text=Proyecto+Beta", ciudad: "Barcelona", tipoProyecto: "Comunidad", reto: "Human Potential & Empowerment Challenge" }, |
| { id: 3, cliente: "Startup Gamma", imgSrc: "https://placehold.co/600x450/004A8F/FFFFFF?text=Proyecto+Gamma", ciudad: "Ciudad de México", tipoProyecto: "Contenido", reto: "Innovation & Futures Resilience Challenge" }, |
| { id: 4, cliente: "Corporación Delta", imgSrc: "https://placehold.co/600x450/003B72/FFFFFF?text=Proyecto+Delta", ciudad: "Madrid", tipoProyecto: "Continente", reto: "Asset Value Optimization & Operations Challenge" }, |
| { id: 5, cliente: "Institución Epsilon", imgSrc: "https://placehold.co/600x450/004A8F/FFFFFF?text=Proyecto+Epsilon", ciudad: "Buenos Aires", tipoProyecto: "Comunidad", reto: "Regeneration & Sustainable Transition Challenge" }, |
| { id: 6, cliente: "Compañía Zeta", imgSrc: "https://placehold.co/600x450/003B72/FFFFFF?text=Proyecto+Zeta", ciudad: "Santiago de Chile", tipoProyecto: "Contenido", reto: "Strategic Experience & Positioning Challenge" }, |
| { id: 7, cliente: "Entidad Eta", imgSrc: "https://placehold.co/600x450/004A8F/FFFFFF?text=Proyecto+Eta", ciudad: "Lima", tipoProyecto: "Continente", reto: "Adaptive Growth & Flexible Scaling Challenge" }, |
| { id: 8, cliente: "Firma Theta", imgSrc: "https://placehold.co/600x450/003B72/FFFFFF?text=Proyecto+Theta", ciudad: "Bogotá", tipoProyecto: "Comunidad", reto: "Human Potential & Empowerment Challenge" }, |
| { id: 9, cliente: "Grupo Iota", imgSrc: "https://placehold.co/600x450/004A8F/FFFFFF?text=Proyecto+Iota", ciudad: "São Paulo", tipoProyecto: "Contenido", reto: "Innovation & Futures Resilience Challenge" }, |
| { id: 10, cliente: "Colectivo Kappa", imgSrc: "https://placehold.co/600x450/003B72/FFFFFF?text=Proyecto+Kappa", ciudad: "Madrid", tipoProyecto: "Comunidad", reto: "Hybrid & Distributed Connection Challenge" }, |
| { id: 11, cliente: "Consultora Lambda", imgSrc: "https://placehold.co/600x450/004A8F/FFFFFF?text=Proyecto+Lambda", ciudad: "Barcelona", tipoProyecto: "Continente", reto: "Asset Value Optimization & Operations Challenge" }, |
| { id: 12, cliente: "Fundación Mu", imgSrc: "https://placehold.co/600x450/003B72/FFFFFF?text=Proyecto+Mu", ciudad: "Ciudad de México", tipoProyecto: "Contenido", reto: "Regeneration & Sustainable Transition Challenge" } |
| ]; |
| |
| const retosEstrategicos = [ |
| "Hybrid & Distributed Connection Challenge", |
| "Human Potential & Empowerment Challenge", |
| "Regeneration & Sustainable Transition Challenge", |
| "Strategic Experience & Positioning Challenge", |
| "Adaptive Growth & Flexible Scaling Challenge", |
| "Asset Value Optimization & Operations Challenge", |
| "Innovation & Futures Resilience Challenge" |
| ]; |
| |
| function populateFilters() { |
| if (!filterCiudad || !filterTipoReto) return; |
| |
| const ciudades = [...new Set(allProjectsData.map(p => p.ciudad))].sort(); |
| filterCiudad.innerHTML = '<option value="">Todas las Ciudades</option>'; |
| ciudades.forEach(ciudad => { |
| const option = document.createElement('option'); |
| option.value = ciudad; |
| option.textContent = ciudad; |
| filterCiudad.appendChild(option); |
| }); |
| |
| filterTipoReto.innerHTML = '<option value="">Todos los Retos</option>'; |
| retosEstrategicos.forEach(reto => { |
| const option = document.createElement('option'); |
| option.value = reto; |
| option.textContent = reto.replace(" Challenge", "").replace(" & ", " y "); |
| filterTipoReto.appendChild(option); |
| }); |
| } |
| |
| function renderProjectGallery(projectsToRender) { |
| if (!projectGallery) return; |
| projectGallery.innerHTML = ''; |
| if (projectsToRender.length === 0) { |
| if (noResultsMessage) noResultsMessage.classList.remove('hidden'); |
| } else { |
| if (noResultsMessage) noResultsMessage.classList.add('hidden'); |
| projectsToRender.forEach(project => { |
| const card = document.createElement('div'); |
| card.classList.add('project-gallery-card'); |
| card.innerHTML = ` |
| <div class="project-image-aspect"> |
| <img src="${project.imgSrc}" alt="${project.cliente}" |
| onerror="this.onerror=null;this.src='https://placehold.co/600x450/cccccc/969696?text=Error+Imagen';"> |
| </div> |
| <div class="project-info-overlay"> |
| <h4>${project.cliente}</h4> |
| <p>${project.ciudad} | ${project.tipoProyecto}</p> |
| <a href="#" class="btn btn-view-project mt-2">VER PROYECTO ></a> |
| </div> |
| `; |
| projectGallery.appendChild(card); |
| }); |
| } |
| } |
| |
| function applyProjectFilters() { |
| if (!filterCiudad || !filterTipoProyecto || !filterTipoReto) return; |
| const ciudad = filterCiudad.value; |
| const tipoProyecto = filterTipoProyecto.value; |
| const tipoReto = filterTipoReto.value; |
| |
| const filteredProjects = allProjectsData.filter(project => { |
| return (ciudad === "" || project.ciudad === ciudad) && |
| (tipoProyecto === "" || project.tipoProyecto === tipoProyecto) && |
| (tipoReto === "" || project.reto === tipoReto); |
| }); |
| renderProjectGallery(filteredProjects); |
| } |
| |
| function initProjectGalleryPage() { |
| if (document.getElementById('page-nuestros-proyectos').classList.contains('active')) { |
| if (!projectGalleryInitialized) { |
| populateFilters(); |
| renderProjectGallery(allProjectsData); |
| if (applyFiltersButton) applyFiltersButton.addEventListener('click', applyProjectFilters); |
| if (clearFiltersButton) clearFiltersButton.addEventListener('click', () => { |
| if (filterCiudad) filterCiudad.value = ""; |
| if (filterTipoProyecto) filterTipoProyecto.value = ""; |
| if (filterTipoReto) filterTipoReto.value = ""; |
| applyProjectFilters(); |
| }); |
| if (loadMoreProjectsButton) { |
| loadMoreProjectsButton.addEventListener('click', () => { |
| alert("Funcionalidad 'Cargar Más' en desarrollo."); |
| }); |
| } |
| projectGalleryInitialized = true; |
| } |
| } |
| } |
| |
| |
| |
| function showPage(targetId) { |
| pageContents.forEach(page => page.classList.remove('active')); |
| const targetPage = document.getElementById(targetId); |
| if (targetPage) { |
| targetPage.classList.add('active'); |
| window.scrollTo(0, 0); |
| if (targetId === 'page-inicio') { |
| initHookCarousel(); |
| initProjectCarousel(); |
| } else { |
| stopHookCarousel(); |
| projectCarouselInitialized = false; |
| } |
| if (targetId === 'page-nuestros-proyectos') { |
| initProjectGalleryPage(); |
| } else { |
| projectGalleryInitialized = false; |
| } |
| } |
| |
| navLinks.forEach(link => { |
| link.classList.remove('active'); |
| const linkTarget = link.dataset.target; |
| if (linkTarget === targetId) { |
| link.classList.add('active'); |
| const parentDropdown = link.closest('.nav-dropdown'); |
| if (parentDropdown) { |
| const toggle = parentDropdown.querySelector('.nav-dropdown-toggle'); |
| if (toggle) toggle.classList.add('active-parent'); |
| } |
| } |
| }); |
| document.querySelectorAll('.nav-dropdown-toggle').forEach(toggle => { |
| const parentDropdown = toggle.closest('.nav-dropdown'); |
| let childIsActive = false; |
| if (parentDropdown) { |
| parentDropdown.querySelectorAll('.nav-dropdown-content a').forEach(subLink => { |
| if (subLink.classList.contains('active')) { |
| childIsActive = true; |
| } |
| }); |
| } |
| if (!childIsActive) { |
| toggle.classList.remove('active-parent'); |
| } |
| }); |
| |
| const logoLink = document.querySelector('nav a[data-target="page-inicio"].text-2xl'); |
| if (logoLink) { |
| if (targetId === 'page-inicio') logoLink.classList.add('active'); |
| else logoLink.classList.remove('active'); |
| } |
| |
| if (mobileMenu && !mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| |
| navLinks.forEach(link => { |
| link.addEventListener('click', (e) => { |
| e.preventDefault(); |
| const targetId = link.dataset.target; |
| if (targetId) { |
| showPage(targetId); |
| window.location.hash = (targetId === 'page-inicio') ? '#inicio' : targetId.replace('page-', ''); |
| } |
| }); |
| }); |
| |
| document.querySelectorAll('.mobile-dropdown-toggle').forEach(button => { |
| button.addEventListener('click', () => { |
| const content = button.nextElementSibling; |
| const arrow = button.querySelector('.dropdown-arrow'); |
| if (content) content.classList.toggle('hidden'); |
| if (arrow) arrow.classList.toggle('rotate-180'); |
| }); |
| }); |
| |
| |
| function handleHashChange() { |
| const hash = window.location.hash.substring(1); |
| let targetPageId = 'page-inicio'; |
| if (hash && hash !== 'inicio') { |
| const potentialTarget = 'page-' + hash; |
| if (document.getElementById(potentialTarget)) { |
| targetPageId = potentialTarget; |
| } |
| } |
| showPage(targetPageId); |
| } |
| |
| window.addEventListener('hashchange', handleHashChange); |
| handleHashChange(); |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| if (mobileMenuButton && mobileMenu) { |
| mobileMenuButton.addEventListener('click', () => mobileMenu.classList.toggle('hidden')); |
| } |
| |
| const currentYearSpan = document.getElementById('current-year'); |
| if (currentYearSpan) currentYearSpan.textContent = new Date().getFullYear(); |
| |
| const infoModal = document.getElementById('info-modal'); |
| const closeInfoModalButton = document.getElementById('close-info-modal-button'); |
| const infoModalTitle = document.getElementById('info-modal-title'); |
| const infoModalText = document.getElementById('info-modal-text'); |
| |
| function assignInfoModalOpenListeners() { |
| const openInfoModalButtons = document.querySelectorAll('.open-info-modal-button'); |
| openInfoModalButtons.forEach(button => { |
| const newButton = button.cloneNode(true); |
| if (button.parentNode) { |
| button.parentNode.replaceChild(newButton, button); |
| newButton.addEventListener('click', () => { |
| if(infoModalTitle) infoModalTitle.textContent = newButton.dataset.modalTitle || "Descubre Más"; |
| if(infoModalText) infoModalText.textContent = newButton.dataset.modalText || "Información adicional aquí."; |
| if (infoModal) { |
| infoModal.classList.remove('opacity-0', 'invisible'); |
| infoModal.classList.add('opacity-100', 'visible'); |
| const modalContent = infoModal.querySelector('.modal-content'); |
| if(modalContent) { |
| modalContent.classList.remove('scale-95'); |
| modalContent.classList.add('scale-100'); |
| } |
| } |
| }); |
| } |
| }); |
| } |
| |
| const closeInfoModal = () => { |
| if (infoModal) { |
| const modalContent = infoModal.querySelector('.modal-content'); |
| if(modalContent) { |
| modalContent.classList.remove('scale-100'); |
| modalContent.classList.add('scale-95'); |
| } |
| infoModal.classList.remove('opacity-100', 'visible'); |
| infoModal.classList.add('opacity-0', 'invisible'); |
| } |
| } |
| if (closeInfoModalButton) closeInfoModalButton.addEventListener('click', closeInfoModal); |
| window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && infoModal && infoModal.classList.contains('visible')) closeInfoModal(); }); |
| if (infoModal) infoModal.addEventListener('click', (e) => { if (e.target === infoModal) closeInfoModal(); }); |
| |
| const aiIdeasModal = document.getElementById('ai-ideas-modal'); |
| const aiModalTitleElement = document.getElementById('ai-modal-title'); |
| const aiGeneratedContent = document.getElementById('ai-generated-content'); |
| const loaderContainer = aiIdeasModal ? aiIdeasModal.querySelector('.loader-container') : null; |
| const closeAiModalButton = document.getElementById('close-ai-modal-button'); |
| const closeAiModalButtonFooter = document.getElementById('close-ai-modal-button-footer'); |
| |
| const openAiModal = () => { |
| if (aiIdeasModal) { |
| aiIdeasModal.classList.remove('opacity-0', 'invisible'); |
| aiIdeasModal.classList.add('opacity-100', 'visible'); |
| const modalContent = aiIdeasModal.querySelector('.modal-content'); |
| if (modalContent) { |
| modalContent.classList.remove('scale-95'); |
| modalContent.classList.add('scale-100'); |
| } |
| } |
| }; |
| const closeAiModal = () => { |
| if (aiIdeasModal) { |
| const modalContent = aiIdeasModal.querySelector('.modal-content'); |
| if (modalContent) { |
| modalContent.classList.remove('scale-100'); |
| modalContent.classList.add('scale-95'); |
| } |
| aiIdeasModal.classList.remove('opacity-100', 'visible'); |
| aiIdeasModal.classList.add('opacity-0', 'invisible'); |
| if(aiGeneratedContent) aiGeneratedContent.innerHTML = ''; |
| if(loaderContainer) loaderContainer.style.display = 'block'; |
| } |
| }; |
| |
| if (closeAiModalButton) closeAiModalButton.addEventListener('click', closeAiModal); |
| if (closeAiModalButtonFooter) closeAiModalButtonFooter.addEventListener('click', closeAiModal); |
| window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && aiIdeasModal && aiIdeasModal.classList.contains('visible')) closeAiModal(); }); |
| if (aiIdeasModal) aiIdeasModal.addEventListener('click', (e) => { if (e.target === aiIdeasModal) closeAiModal(); }); |
| |
| const generateIdeasButtons = document.querySelectorAll('.generate-ideas-button'); |
| generateIdeasButtons.forEach(button => { |
| button.addEventListener('click', async () => { |
| const challengeTitle = button.dataset.challengeTitle; |
| const challengeDescription = button.dataset.challengeDescription; |
| if (aiModalTitleElement) aiModalTitleElement.textContent = `Ideas para: ${challengeTitle}`; |
| if (aiGeneratedContent) aiGeneratedContent.innerHTML = ''; |
| if (loaderContainer) loaderContainer.style.display = 'block'; |
| openAiModal(); |
| |
| const prompt = `Eres un consultor estratégico experto. Para el siguiente desafío empresarial: '${challengeTitle}: ${challengeDescription}', proporciona entre 3 y 4 primeros pasos accionables o preguntas clave concisas que una organización debería considerar para abordarlo. Formatea la respuesta como una lista de puntos (usando guiones o asteriscos) y que cada punto sea breve.`; |
| let chatHistory = [{ role: "user", parts: [{ text: prompt }] }]; |
| const payload = { contents: chatHistory }; |
| const apiKey = ""; |
| const apiUrl = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=' + apiKey; |
| |
| try { |
| const response = await fetch(apiUrl, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(payload) |
| }); |
| const result = await response.json(); |
| if (loaderContainer) loaderContainer.style.display = 'none'; |
| if (result.candidates && result.candidates[0]?.content?.parts[0]?.text) { |
| let text = result.candidates[0].content.parts[0].text; |
| text = text.replace(/\n/g, '<br>'); |
| text = text.replace(/^\* /gm, '<li class="ml-4 list-disc">'); |
| text = text.replace(/^- /gm, '<li class="ml-4 list-disc">'); |
| text = text.replace(/<br><li/g, '<li'); |
| if (text.includes('<li')) text = '<ul>' + text + '</ul>'; |
| if(aiGeneratedContent) aiGeneratedContent.innerHTML = text; |
| } else { |
| if(aiGeneratedContent) aiGeneratedContent.innerHTML = '<p class="text-red-500">No se pudieron generar ideas. Inténtalo más tarde.</p>'; |
| } |
| } catch (error) { |
| if (loaderContainer) loaderContainer.style.display = 'none'; |
| if(aiGeneratedContent) aiGeneratedContent.innerHTML = '<p class="text-red-500">Error al conectar con IA. Inténtalo más tarde.</p>'; |
| } |
| }); |
| }); |
| |
| const contactForm = document.getElementById('contact-form'); |
| const formFeedback = document.getElementById('form-feedback'); |
| if (contactForm && formFeedback) { |
| contactForm.addEventListener('submit', function(event) { |
| event.preventDefault(); |
| const name = document.getElementById('name').value; |
| const email = document.getElementById('email').value; |
| const message = document.getElementById('message').value; |
| if (!name.trim() || !email.trim() || !message.trim()) { |
| formFeedback.innerHTML = '<p class="text-red-500">Por favor, completa todos los campos.</p>'; |
| return; |
| } |
| formFeedback.innerHTML = '<p class="text-blue-500">Enviando mensaje...</p>'; |
| setTimeout(() => { |
| formFeedback.innerHTML = '<p class="text-green-500">¡Mensaje enviado con éxito! (Simulación)</p>'; |
| contactForm.reset(); |
| }, 1500); |
| }); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
