diff --git a/assets/img/culture.png b/assets/img/culture.png new file mode 100644 index 0000000..1998b96 Binary files /dev/null and b/assets/img/culture.png differ diff --git a/assets/img/culture.webp b/assets/img/culture.webp new file mode 100644 index 0000000..326ae51 Binary files /dev/null and b/assets/img/culture.webp differ diff --git a/contacto.html b/contacto.html index 95eb50c..30ab3bc 100644 --- a/contacto.html +++ b/contacto.html @@ -50,57 +50,58 @@ -
- - -
- -
+
- - + +
-
- - -
-
-
+ +
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +

+ * campos requeridos.
La información que compartas será utilizada únicamente para gestionar tu consulta y contactarte en relación con ella. +

+
-
- - -
- -
- - -

- * campos requeridos.
La información que compartas será utilizada únicamente para gestionar tu consulta y contactarte en relación con ella. -

-
- - @@ -116,7 +117,7 @@

WhatsApp: Para consultas breves o coordinar una conversación.

- + ESCRIBINOS POR WHATSAPP →
diff --git a/css/ecosistema.css b/css/ecosistema.css index 3ad134c..a96f7cc 100644 --- a/css/ecosistema.css +++ b/css/ecosistema.css @@ -4,14 +4,21 @@ ========================================================================== */ .animacion-infinito { - width: 80%; - min-width: 600px; + width: 100%; max-width: 1000px; aspect-ratio: 2 / 1; position: relative; background-color: transparent; } +/* Escalar la animación +15% en desktop (en móvil ocupa todo el ancho y se desbordaría) */ +@media (min-width: 1024px) { + .animacion-infinito { + transform: scale(1.15); + transform-origin: center; + } +} + .capa-svg-lineas { position: absolute; top: 0; @@ -74,7 +81,7 @@ .linea-pulso { fill: none; - stroke: #ffffff; + stroke: var(--text-main); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 2000; @@ -565,17 +572,13 @@ .eco-panel__strip { position: relative; z-index: 3; - /*background: var(--bg-surface);*/ - bottom: 0; - - padding: 0rem clamp(2rem, 3.5vw, 3rem) clamp(1rem, 1vw, 1rem); - /*border-top: 1px solid color-mix(in srgb, var(--unit) 22%, var(--border-color));*/ + padding: 0 clamp(2rem, 3.5vw, 3rem) clamp(1rem, 1vw, 1rem); } .eco-panel__strip-title { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 1.1rem; - color: var(--text-inverse); + color: var(--text-main); margin-bottom: 1rem; } @@ -676,6 +679,36 @@ background: color-mix(in srgb, var(--unit) 10%, var(--bg-surface)); } +/* Nodos interactivos: foco visible por teclado */ +.nodo-circulo:focus-visible { + outline: 3px solid var(--ide-primary); + outline-offset: 3px; +} + +/* Nodo central: sin interacción, sin efecto hover */ +.nodo-circulo--static { + cursor: default; +} + +.nodo-circulo--static:hover { + transform: translate(-50%, -50%); + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), inset 0 -4px 10px rgba(0, 0, 0, 0.1); +} + +/* Hero del Ecosistema en móvil: reforzar el velo para que el texto (full width) + que cae sobre blur.webp conserve contraste */ +@media (max-width: 900px) { + .herobg-9 { + background-image: + linear-gradient( + 180deg, + color-mix(in srgb, var(--bg-body) 96%, transparent) 0%, + color-mix(in srgb, var(--bg-body) 84%, transparent) 100% + ), + url('../assets/img/blur.webp'); + } +} + /* Accesibilidad: reduce motion */ @media (prefers-reduced-motion: reduce) { .eco-card, diff --git a/css/faq.css b/css/faq.css index 9ba5814..1085f4f 100644 --- a/css/faq.css +++ b/css/faq.css @@ -13,8 +13,8 @@ /* Tarjeta de cada pregunta */ .faq-item { - background: rgba(255, 255, 255, 0.025); - border: 1px solid var(--ide-primary-line); + background: var(--bg-surface); + border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: border-color 0.25s ease, background-color 0.25s ease; @@ -22,11 +22,11 @@ .faq-item:hover { background: var(--ide-accent-bg); - border-color: rgba(255, 255, 255, 0.16); + border-color: var(--border-hover); } .faq-item[open] { - background: rgba(255, 255, 255, 0.04); + background: var(--bg-surface-elevated); border-color: var(--ide-primary-light); } @@ -69,14 +69,14 @@ width: 32px; height: 32px; border-radius: 50%; - background: rgba(255, 255, 255, 0.05); + background: color-mix(in srgb, var(--ide-primary) 12%, transparent); color: var(--text-main); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease; } .faq-item:hover .faq-icon { - background: rgba(255, 255, 255, 0.1); - color: var(--text-inverse); + background: color-mix(in srgb, var(--ide-primary) 22%, transparent); + color: var(--ide-primary); } /* Rotación de la flecha al abrir */ diff --git a/css/index.css b/css/index.css index 586f9c2..9c4e773 100644 --- a/css/index.css +++ b/css/index.css @@ -29,6 +29,28 @@ font-size: clamp(2.5rem, 8vw, 6.5rem); } +/* Sugerencias rápidas bajo el buscador del hero (fondo oscuro) */ +.hero-search-chips { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 1.25rem; +} + +.hero-search-chips .chip { + padding: 0.35rem 0.9rem; + font-size: 0.8rem; + color: #ffffff; + background-color: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.4); +} + +.hero-search-chips .chip:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.22); + border-color: #ffffff; +} + diff --git a/css/styles.css b/css/styles.css index 2dc99de..02a9c86 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2455,6 +2455,11 @@ canvas { color: var(--ide-primary); } +/* El logo del 5º miembro debe llenar todo el círculo (la imagen trae margen propio) */ +.m5 .card-portrait img { + transform: scale(1.53); +} + .card-incompany { background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/incompany.webp'); background-size: cover; @@ -2706,6 +2711,19 @@ canvas { margin: 0; } +/* Dark mode: mejorar contraste del título e íconos de las tarjetas Academy */ +[data-theme="dark"] .curso-header h4 { + color: var(--ide-academy-ligth); +} + +[data-theme="dark"] .icono-academy-contexto, +[data-theme="dark"] .icono-academy-aprende, +[data-theme="dark"] .icono-academy-integral, +[data-theme="dark"] .icono-academy-enriquece, +[data-theme="dark"] .icono-academy-aplicacion { + background-color: var(--ide-academy-ligth); +} + /* Panel contenedor tipo Grid */ .course-specs-panel { @@ -2785,7 +2803,7 @@ canvas { } /* --- Trabaja con Nosotros --- */ .card-trabajo { - background-image: url('../assets/img/culture.png'); + background-image: url('../assets/img/culture.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; @@ -2925,6 +2943,20 @@ canvas { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06); } +/* Contacto: apilar formulario y canales en pantallas medianas */ +@media (max-width: 992px) { + .contact-parallax-section .grid-2 { + grid-template-columns: 1fr; + } +} + +/* Cuadrícula de formulario a 1 columna en móvil */ +@media (max-width: 640px) { + .form-grid { + grid-template-columns: 1fr; + } +} + /* ========================================================= FOOTER MODULAR - ESTILOS ========================================================= */ @@ -3925,6 +3957,44 @@ canvas { margin: 0; } +/* Tablet: apilar en 1 columna; divisor pasa a horizontal */ +@media (max-width: 992px) { + .forma-trabajar { + grid-template-columns: 1fr; + gap: 1.75rem; + } + + .forma-trabajar__divider { + width: 100%; + height: 3px; + min-height: 0; + background: linear-gradient( + 90deg, + transparent 0%, + var(--ide-accent) 30%, + var(--ide-primary) 70%, + transparent 100% + ); + } +} + +/* Mobile: ocultar divisor y ajustar comilla decorativa */ +@media (max-width: 640px) { + .forma-trabajar { + gap: 1.25rem; + } + + .forma-trabajar__divider { + display: none; + } + + .forma-trabajar__quote-mark { + top: -2.5rem; + left: -0.5rem; + font-size: 6rem; + } +} + /* ========================================================================== SECCIÓN 4 — Formulario + imagen fundida a la derecha ========================================================================== */ @@ -3940,8 +4010,8 @@ canvas { top: 0; right: 0; bottom: 0; - width: 55%; - background-image: url('../assets/img/culture.png'); + width: 48%; + background-image: url('../assets/img/culture.webp'); background-size: cover; background-position: center right; background-repeat: no-repeat; @@ -3977,8 +4047,8 @@ canvas { .careers-form-wrap { position: relative; z-index: 1; - max-width: 620px; /* deja la mitad derecha libre para la imagen */ - margin-left: 10%; + max-width: 820px; /* tarjeta ancha: deja libre la franja derecha con la imagen */ + margin-left: 6%; } .careers-form-card { @@ -4006,10 +4076,44 @@ canvas { .careers-form-card__lead { font-size: 0.88rem; color: var(--text-muted); - margin-bottom: 1.75rem; + margin-bottom: 1.25rem; line-height: 1.6; } +/* Cuadrícula de campos: 3 columnas para un formulario más horizontal */ +.careers-form-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem 1.25rem; +} + +.careers-form-grid .form-group { + margin-bottom: 0; +} + +.careers-form-grid .span-2 { + grid-column: span 2; +} + +.careers-form-grid .span-3 { + grid-column: 1 / -1; +} + +/* Cuadrícula genérica de formulario (2 columnas) */ +.form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem 1.25rem; +} + +.form-grid .form-group { + margin-bottom: 0; +} + +.form-grid .span-2 { + grid-column: 1 / -1; +} + .careers-form-card__note { font-size: 0.82rem; color: var(--text-muted); @@ -4045,6 +4149,12 @@ canvas { } /* Mobile */ +@media (max-width: 992px) { + .careers-form-grid { + grid-template-columns: repeat(2, 1fr); + } +} + @media (max-width: 768px) { .sumarte-grid { grid-template-columns: 1fr; @@ -4070,6 +4180,10 @@ canvas { .careers-form-card { background-color: var(--bg-surface); } + + .careers-form-grid { + grid-template-columns: 1fr; + } } /* ========================================================================== @@ -4423,6 +4537,322 @@ canvas { } } +/* ========================================================================== + PÁGINA DE BÚSQUEDA (buscar.html) + ========================================================================== */ + +/* Utilidad de alineación (usada en varias páginas) */ +.text-center { + text-align: center; +} + +/* --- Hero del buscador --- */ +.search-hero { + padding-top: clamp(2.5rem, 5vw, 4.5rem); + padding-bottom: clamp(2rem, 4vw, 3.5rem); + background: radial-gradient(circle at 50% 0%, var(--ide-accent-soft) 0%, transparent 60%), var(--bg-body); +} + +.search-hero .eyebrow { + margin-bottom: 0.5rem; +} + +.search-hero h1 { + margin-bottom: 0.75rem; +} + +.search-hero .lead-text { + max-width: 60ch; + margin: 0 auto 2rem auto; + color: var(--text-body); +} + +/* --- Formulario de búsqueda --- */ +.search-page-form { + display: flex; + gap: 0.75rem; + max-width: 640px; + margin: 0 auto; +} + +.search-input-wrap { + position: relative; + flex: 1; +} + +.search-input-wrap svg { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-muted); + pointer-events: none; +} + +.search-input-wrap input { + width: 100%; + padding: 0.85rem 1rem 0.85rem 2.75rem; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 1rem; + background-color: var(--bg-surface); + border: 1px solid var(--border-color); + border-radius: 50px; + color: var(--text-main); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.search-input-wrap input:focus { + outline: none; + border-color: var(--ide-accent); + box-shadow: 0 0 0 3px var(--ide-accent-soft); +} + +.search-page-form button { + flex-shrink: 0; + padding: 0.85rem 1.75rem; + font-family: 'Barlow Semi Condensed', sans-serif; + font-weight: 700; + font-size: 0.9rem; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #FFFFFF; + background-color: var(--ide-accent); + border: none; + border-radius: 50px; + cursor: pointer; + transition: background-color var(--transition-fast); +} + +.search-page-form button:hover { + background-color: var(--ide-accent-hover); +} + +/* --- Hint / status --- */ +.search-hint { + margin-top: 1rem; + font-size: 0.9rem; + color: var(--text-muted); + min-height: 1.2em; +} + +/* --- Sugerencias (chips) --- */ +.search-suggestions { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.6rem; + margin-bottom: 2.5rem; +} + +/* Evita que display:flex anule el [hidden] del atributo */ +.search-suggestions[hidden] { + display: none; +} + +.search-suggestions strong { + width: 100%; + margin-bottom: 0.25rem; + text-align: center; + font-family: 'Barlow Semi Condensed', sans-serif; + font-size: 0.85rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-muted); +} + +.chip { + display: inline-block; + padding: 0.45rem 1rem; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 0.85rem; + color: var(--text-body); + background-color: var(--bg-surface); + border: 1px solid var(--border-color); + border-radius: 50px; + text-decoration: none; + transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); +} + +.chip:hover { + border-color: var(--ide-accent); + background-color: var(--ide-accent-soft); + color: var(--ide-accent); +} + +/* --- Resultados --- */ +.search-results-section { + padding-bottom: clamp(3rem, 6vw, 5rem); +} + +.search-results-list { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 820px; + margin: 0 auto; +} + +.search-result-item { + padding: 1.5rem 1.75rem; + background-color: var(--bg-surface); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); +} + +.search-result-item:hover { + border-color: var(--ide-accent); + box-shadow: var(--shadow-sm); + transform: translateY(-2px); +} + +.result-category { + display: inline-block; + margin-bottom: 0.4rem; + font-family: 'Barlow Semi Condensed', sans-serif; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--ide-accent); +} + +.search-result-item h3 { + font-size: 1.25rem; + margin: 0 0 0.5rem 0; +} + +.search-result-item h3 a { + color: var(--text-main); + text-decoration: none; + transition: color var(--transition-fast); +} + +.search-result-item h3 a:hover { + color: var(--ide-accent); +} + +.search-result-item p { + margin: 0; + font-size: 0.95rem; + line-height: 1.65; + color: var(--text-body); +} + +.search-result-item mark { + padding: 0 0.15em; + background-color: var(--ide-accent-soft); + color: inherit; + border-radius: 3px; +} + +/* --- Estado vacío --- */ +.search-empty { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + padding: 3rem 1.5rem; + text-align: center; + color: var(--text-muted); +} + +.search-empty svg { + color: var(--text-muted); + opacity: 0.6; +} + +.search-empty .search-hint { + margin-top: 0; +} + +/* --- Responsive --- */ +@media (max-width: 640px) { + .search-page-form { + flex-direction: column; + } + + .search-page-form button { + width: 100%; + } + + .search-result-item { + padding: 1.25rem; + } +} + +/* ========================================================================== + PÁGINAS DE CONTENIDO LEGAL (privacidad / términos) + ========================================================================== */ + +.legal-page-title { + font-size: clamp(1.9rem, 4vw, 2.8rem); + margin-bottom: 1rem; +} + +.legal-updated { + margin-top: 1rem; + font-size: 0.85rem; + color: var(--text-muted); +} + +.legal-content { + max-width: 78ch; + margin: 0 auto; + color: var(--text-body); +} + +.legal-content h2 { + font-size: clamp(1.35rem, 2.3vw, 1.7rem); + color: var(--text-main); + margin: 2.5rem 0 0.85rem 0; +} + +.legal-content h2:first-child { + margin-top: 0; +} + +.legal-content h3 { + font-size: 1.12rem; + color: var(--text-main); + margin: 1.75rem 0 0.6rem 0; +} + +.legal-content p { + margin: 0 0 1rem 0; + line-height: 1.75; +} + +.legal-content ul, +.legal-content ol { + margin: 0 0 1.25rem 0; + padding-left: 1.4rem; +} + +.legal-content li { + margin-bottom: 0.4rem; + line-height: 1.65; +} + +.legal-content li::marker { + color: var(--ide-accent); +} + +.legal-content a { + color: var(--ide-accent); + text-decoration: underline; +} + +.legal-content a:hover { + color: var(--ide-accent-hover); +} + +.legal-content strong { + color: var(--text-main); +} + + diff --git a/ecosistema.html b/ecosistema.html index db95f29..33daf6e 100644 --- a/ecosistema.html +++ b/ecosistema.html @@ -48,7 +48,7 @@
+ style="width: 100%; position: relative; display: flex; justify-content: center; align-items: center;">
@@ -63,7 +63,7 @@ -
+
@@ -511,11 +511,7 @@
-
- -
-
+ diff --git a/ide-academy.html b/ide-academy.html index 8c3e977..9df63f5 100644 --- a/ide-academy.html +++ b/ide-academy.html @@ -70,10 +70,6 @@ -
-
- @@ -205,7 +201,7 @@
  • Programas
  • Rutas de Aprendizaje
  • - HABLEMOS - @@ -129,14 +126,14 @@ Experiencia local con mirada global.

    - Nacimos en el NOA, con uns fuerte pertenencia regional, y trabajamos con organizaciones de diferentes sectores de todo el país, integrando buenas prácticas y una mirada global a tu realidad local. + Nacimos en el NOA, con una fuerte pertenencia regional, y trabajamos con organizaciones de diferentes sectores de todo el país, integrando buenas prácticas y una mirada global a tu realidad local.

    - Descripción de la imagen
    @@ -205,7 +202,6 @@ Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades

    Claudia Raquel ANDRÉS

    Directora General | Líder de IDE Projects
    - @@ -220,7 +216,6 @@ Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades

    José PUGLIESE

    Líder de IDE Digital
    @@ -236,7 +231,6 @@ Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades

    Miguel Ángel ROJAS

    Líder de IDE Excellence
    @@ -252,7 +246,6 @@ Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades

    Víctor BARRIONUEVO

    Projects & Digital
    @@ -281,7 +274,7 @@ Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades
    -

    +

    Conversemos para comprender tu contexto,
    identificar dónde intervenir y conectar las capacidades que puedan aportar mayor valor

    @@ -298,11 +291,6 @@ Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades
    - -
    -
    - diff --git a/terminos-y-condiciones.html b/terminos-y-condiciones.html new file mode 100644 index 0000000..cc63379 --- /dev/null +++ b/terminos-y-condiciones.html @@ -0,0 +1,114 @@ + + + + + + Términos y Condiciones | IDE Consultores + + + + + + + + + + + +
    + + +
    +
    + LEGAL +

    Términos y Condiciones

    +

    + Estas condiciones regulan el uso del sitio web de IDE Consultores y la relación entre vos y nosotros al navegarlo. +

    + +
    +
    + + +
    +
    + +
    +
    + +
    + + + + + diff --git a/trabaja-con-nosotros.html b/trabaja-con-nosotros.html index 2dbbf0a..327d7b8 100644 --- a/trabaja-con-nosotros.html +++ b/trabaja-con-nosotros.html @@ -20,7 +20,7 @@
    -
    +
    TRABAJÁ CON NOSOTROS

    @@ -29,7 +29,7 @@

    En IDE creemos en el poder de las alianzas. Construimos una red de profesionales y especialistas con experiencias diversas y una forma compartida de entender la gestión: comprender el contexto, conectar capacidades y generar -valor desde la práctica.” + valor desde la práctica.

    @@ -145,41 +145,42 @@ valor desde la práctica.”
    -
    - - -
    +
    +
    + + +
    -
    +
    -
    -
    - - -
    +
    + + +
    -
    - - -
    +
    + + +
    -
    - - +
    + + +