Inicio de proyecto

This commit is contained in:
2026-08-26 10:26:10 -03:00
commit a438065d22
5 changed files with 1336 additions and 0 deletions
+324
View File
@@ -0,0 +1,324 @@
<!DOCTYPE html>
<html class="light" lang="es"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Nosotros - IDE Consultores</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&amp;family=Inter:wght@400;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary-fixed-variant": "#005143",
"on-background": "#191c1d",
"inverse-surface": "#2e3132",
"on-secondary": "#ffffff",
"tertiary-fixed": "#e3e2e2",
"on-tertiary": "#ffffff",
"on-secondary-fixed": "#002019",
"tertiary-fixed-dim": "#c7c6c6",
"on-primary-container": "#8bb6cb",
"error-container": "#ffdad6",
"surface-variant": "#e1e3e4",
"surface-container-highest": "#e1e3e4",
"secondary": "#006b59",
"on-primary": "#ffffff",
"on-tertiary-container": "#b0b0b0",
"surface-container-low": "#f2f4f5",
"inverse-on-surface": "#eff1f2",
"on-primary-fixed": "#001f2a",
"on-error-container": "#93000a",
"on-primary-fixed-variant": "#1f4c5e",
"surface-bright": "#f8fafb",
"primary": "#003141",
"surface-container-high": "#e6e8e9",
"secondary-fixed": "#7df8d9",
"on-error": "#ffffff",
"secondary-fixed-dim": "#5edbbe",
"on-tertiary-fixed": "#1a1c1c",
"on-surface": "#191c1d",
"on-tertiary-fixed-variant": "#464747",
"primary-container": "#1a485a",
"surface": "#f8fafb",
"surface-container": "#eceeef",
"tertiary-container": "#424343",
"surface-tint": "#396477",
"error": "#ba1a1a",
"outline-variant": "#c1c7cc",
"secondary-container": "#7df8d9",
"on-surface-variant": "#41484c",
"outline": "#71787c",
"primary-fixed-dim": "#a1cde2",
"background": "#f8fafb",
"surface-container-lowest": "#ffffff",
"tertiary": "#2c2d2d",
"inverse-primary": "#a1cde2",
"primary-fixed": "#bde9ff",
"on-secondary-container": "#00725f",
"surface-dim": "#d8dadb"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"gutter": "24px",
"xs": "4px",
"base": "4px",
"xl": "48px",
"md": "16px",
"margin": "32px",
"sm": "8px",
"lg": "24px"
},
"fontFamily": {
"headline-md": ["Bebas Neue"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"body-lg": ["Inter"],
"headline-xl": ["Bebas Neue"],
"headline-lg": ["Bebas Neue"],
"label-md": ["Inter"]
},
"fontSize": {
"headline-md": ["24px", { "lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400" }],
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
"body-sm": ["14px", { "lineHeight": "1.4", "fontWeight": "400" }],
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
"headline-xl": ["48px", { "lineHeight": "1.1", "letterSpacing": "0.05em", "fontWeight": "400" }],
"headline-lg": ["32px", { "lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400" }],
"label-md": ["12px", { "lineHeight": "1", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
.pattern-overlay {
background-image: radial-gradient(circle at 2px 2px, rgba(113, 120, 124, 0.1) 1px, transparent 0);
background-size: 24px 24px;
}
</style>
</head>
<body class="bg-background text-on-background font-body-md antialiased pt-16">
<!-- TopAppBar -->
<header class="bg-surface dark:bg-surface-container-highest fixed top-0 w-full z-50 border-b border-outline-variant/30 dark:border-outline/30">
<div class="flex justify-between items-center h-16 px-margin max-w-7xl mx-auto w-full">
<div class="flex items-center gap-md">
<button class="text-primary dark:text-primary-fixed-dim hover:text-secondary dark:hover:text-secondary-fixed transition-colors active:scale-95 duration-200 md:hidden">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">menu</span>
</button>
<div class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim tracking-wider">IDE Consultores</div>
</div>
<nav class="hidden md:flex gap-lg items-center">
<a class="text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Inicio</a>
<a class="text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Servicios</a>
<a class="text-secondary dark:text-secondary-fixed font-bold hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Nosotros</a>
<a class="text-on-surface dark:text-on-surface-variant hover:text-secondary dark:hover:text-secondary-fixed transition-colors font-body-md text-body-md" href="#">Academia</a>
</nav>
<button class="bg-secondary text-on-secondary px-lg py-sm rounded active:scale-95 duration-200 font-label-md text-label-md uppercase tracking-wider hidden md:block">
CONTACTO
</button>
</div>
</header>
<!-- Mobile Navigation Drawer (Hidden by default, structure provided) -->
<div class="fixed left-0 top-0 h-full w-80 bg-surface dark:bg-surface-container shadow-md flex flex-col p-md gap-sm transition-all duration-300 ease-in-out -translate-x-full z-[60] md:hidden" id="mobile-drawer">
<div class="font-headline-lg text-headline-lg text-primary mb-xl mt-md px-md">IDE Consultores</div>
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-colors font-label-md text-label-md" href="#">
<span class="material-symbols-outlined">home</span> Inicio
</a>
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-colors font-label-md text-label-md" href="#">
<span class="material-symbols-outlined">business_center</span> Servicios
</a>
<a class="flex items-center gap-md px-md py-sm bg-secondary-container dark:bg-secondary text-on-secondary-container dark:text-on-secondary rounded-full transition-colors font-label-md text-label-md" href="#">
<span class="material-symbols-outlined">groups</span> Nosotros
</a>
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-colors font-label-md text-label-md" href="#">
<span class="material-symbols-outlined">school</span> Academia
</a>
<a class="flex items-center gap-md px-md py-sm text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-highest rounded-full transition-colors font-label-md text-label-md mt-auto mb-xl" href="#">
<span class="material-symbols-outlined">mail</span> Contacto
</a>
</div>
<!-- Drawer Overlay -->
<div class="fixed inset-0 bg-on-background/50 z-50 hidden opacity-0 transition-opacity duration-300 md:hidden" id="drawer-overlay"></div>
<main class="w-full">
<!-- Hero Section -->
<section class="relative bg-surface-container-lowest py-24 md:py-32 border-b border-outline-variant/30 overflow-hidden">
<div class="pattern-overlay absolute inset-0 opacity-40"></div>
<div class="max-w-7xl mx-auto px-margin relative z-10 grid grid-cols-1 md:grid-cols-12 gap-gutter items-center">
<div class="col-span-1 md:col-span-7 pr-0 md:pr-xl">
<h1 class="font-headline-xl text-headline-xl text-primary mb-md">Nuestra Historia</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-xl max-w-2xl">
Fundada con la convicción de que el progreso sostenido requiere cimientos sólidos. En IDE Consultores, no solo asesoramos; construimos verdades medibles y estructuras resilientes para el futuro corporativo.
</p>
<div class="flex gap-md">
<span class="bg-surface-container px-md py-xs rounded font-label-md text-label-md text-primary tracking-wider uppercase">Progreso</span>
<span class="bg-surface-container px-md py-xs rounded font-label-md text-label-md text-primary tracking-wider uppercase">Seriedad</span>
<span class="bg-surface-container px-md py-xs rounded font-label-md text-label-md text-primary tracking-wider uppercase">Verdad</span>
</div>
</div>
<div class="col-span-1 md:col-span-5 mt-xl md:mt-0">
<div class="relative w-full aspect-[4/5] rounded border-t-4 border-secondary bg-surface-container shadow-sm overflow-hidden">
<img class="object-cover w-full h-full" data-alt="A striking architectural detail of a modern corporate headquarters in light mode. The image features clean, strict geometric lines, large glass panels reflecting a clear sky, and structural steel beams. The lighting is high-key and professional, emphasizing stability, transparency, and progress. Deep blues and crisp whites dominate the palette, with subtle hints of teal in the reflections. The mood is serious and institutional." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMovp53tvSbNH-jC0N-9dj1-4jxAbWNsUOXmMM2JEzM347AINcx_RwijRZStEbOu3QgsK-ZksuIDE_oxHoKvgOa9JpuFJMlLDzWmIOwXOptU71CuSP83c46aAaJ1qXv7Z15JC7v8FFIbkrX2B1tob56gyEBd6JWmmRcGwksq2pagxaNg9v69VlsDU5e4cwCi425KQLlW_7bNjjBBo-5DpQJwf7Yk1gPhp6vjBeBwacWBAhBLspgYe-"/>
</div>
</div>
</div>
</section>
<!-- Mission & Vision Bento -->
<section class="py-24 bg-surface-container-low">
<div class="max-w-7xl mx-auto px-margin">
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<!-- Mission Card -->
<div class="bg-surface-container-lowest p-xl rounded border border-outline-variant/30 relative overflow-hidden group hover:border-secondary/50 transition-colors duration-300">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-[100px] -z-10 group-hover:bg-secondary/10 transition-colors duration-500"></div>
<span class="material-symbols-outlined text-4xl text-secondary mb-md block">visibility</span>
<h2 class="font-headline-lg text-headline-lg text-primary mb-md">Visión</h2>
<p class="font-body-md text-body-md text-on-surface-variant">
Ser la referencia ineludible en consultoría estratégica, donde la precisión analítica y la integridad profesional definan el estándar de excelencia en cada mercado donde operamos.
</p>
</div>
<!-- Vision Card -->
<div class="bg-primary p-xl rounded border border-primary-container relative overflow-hidden shadow-sm">
<div class="pattern-overlay absolute inset-0 opacity-10 filter invert"></div>
<span class="material-symbols-outlined text-4xl text-secondary-fixed mb-md block relative z-10">rocket_launch</span>
<h2 class="font-headline-lg text-headline-lg text-on-primary mb-md relative z-10">Misión</h2>
<p class="font-body-md text-body-md text-on-primary/90 relative z-10">
Proveer soluciones estructurales definitivas mediante un análisis riguroso y una ejecución impecable, catalizando el crecimiento sostenido de nuestros clientes a través de metodologías probadas.
</p>
</div>
</div>
</div>
</section>
<!-- Values List -->
<section class="py-24 bg-surface-container-lowest border-y border-outline-variant/30">
<div class="max-w-3xl mx-auto px-margin text-center mb-xl">
<h2 class="font-headline-xl text-headline-xl text-primary mb-sm">Nuestros Pilares</h2>
<p class="font-body-md text-body-md text-on-surface-variant">La base inquebrantable de nuestra práctica profesional.</p>
</div>
<div class="max-w-4xl mx-auto px-margin">
<div class="flex flex-col">
<!-- Value 1 -->
<div class="py-md border-b border-outline-variant/30 flex flex-col md:flex-row gap-lg items-start md:items-center">
<div class="flex-shrink-0 w-16 h-16 bg-surface-container rounded flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-3xl">trending_up</span>
</div>
<div>
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Progreso</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Impulsamos el avance continuo, midiendo el éxito a través de resultados tangibles y mejoras operativas sostenibles.</p>
</div>
</div>
<!-- Value 2 -->
<div class="py-md border-b border-outline-variant/30 flex flex-col md:flex-row gap-lg items-start md:items-center">
<div class="flex-shrink-0 w-16 h-16 bg-surface-container rounded flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-3xl">gavel</span>
</div>
<div>
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Seriedad</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Abordamos cada desafío con el máximo rigor institucional, respetando los compromisos y operando bajo los más altos estándares éticos.</p>
</div>
</div>
<!-- Value 3 -->
<div class="py-md border-b border-outline-variant/30 flex flex-col md:flex-row gap-lg items-start md:items-center">
<div class="flex-shrink-0 w-16 h-16 bg-surface-container rounded flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-3xl">fact_check</span>
</div>
<div>
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Verdad</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Basamos nuestras recomendaciones en datos empíricos y análisis objetivo. La transparencia total es innegociable en nuestra relación con el cliente.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Leadership Section -->
<section class="py-24 bg-surface-container-low">
<div class="max-w-7xl mx-auto px-margin">
<div class="mb-xl">
<h2 class="font-headline-xl text-headline-xl text-primary">Liderazgo</h2>
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl mt-sm">Un equipo directivo forjado en la experiencia, comprometido con la excelencia consultiva.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<!-- Leader 1 -->
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded overflow-hidden">
<div class="aspect-square bg-surface-container w-full relative">
<img class="w-full h-full object-cover filter grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional, high-end corporate headshot of a mature male executive in a well-lit modern office environment. Light mode aesthetic with clean white backgrounds and deep blue corporate accents. He wears a sharp navy suit and projects authority, stability, and intelligence. The lighting is soft but definitive, casting minimal shadows." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYKu4_SAJdySoM6vXLjHnpe3idn2HDgNXbmpZTa4-swLmFpXpdOMah_KL3fkmV4Ok-wZma3VLGTDkj90iTw140iuJxnS6R56WV9FpCH0AlWZZ7ZPoeR17O7kx-KQLVR6Gu1VpLiDpvXaAIlF7wyPTM6XgN-bNCyxLdf1UfmctqYm_AhR2iHnd8ekP7npxaKRbbPpA3i6G7yvs9zG3B_hcy5rsaOzkBMrisMAI3pZnGtg8ns3hrSPtz"/>
</div>
<div class="p-lg">
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Carlos Mendoza</h3>
<p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-sm">Socio Fundador</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">20+ años de experiencia en reestructuración corporativa y estrategia a largo plazo.</p>
</div>
</div>
<!-- Leader 2 -->
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded overflow-hidden">
<div class="aspect-square bg-surface-container w-full relative">
<img class="w-full h-full object-cover filter grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional, high-end corporate headshot of a confident female senior consultant in a minimalist office setting. Light mode aesthetic with generous white space and sharp focus. She wears a tailored charcoal blazer. The lighting emphasizes professionalism and approachability while maintaining a serious, institutional mood. Subtle teal accents in the blurred background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2oKk175Q1AoFrOUDLqPLS4wzulVYLuOUDEMDxvdlEPYvW_mVpbTmPAnOiwLWaw6veY7L8pdiQpuXd1tz8BloYTt9pEgep5WtWidx0j5Cy3U1gmMBdv-siAUtd304kbtnSNDGQ8AkeQ4YfD2HI4xmMk4nPs2e83q0yPSeXJz6bA-kqN9a9qjtBeqZz7gcYzQ17vSqLwzdw-MLM4rxbnRLoFgq8O0EdWBSxW-OKrz78_enWcZYKHV9I"/>
</div>
<div class="p-lg">
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Elena Ríos</h3>
<p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-sm">Directora de Operaciones</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">Especialista en optimización de procesos y despliegue de metodologías ágiles en entornos rígidos.</p>
</div>
</div>
<!-- Leader 3 -->
<div class="bg-surface-container-lowest border border-outline-variant/30 rounded overflow-hidden">
<div class="aspect-square bg-surface-container w-full relative">
<img class="w-full h-full object-cover filter grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional corporate headshot of an analytical male financial director in a modern, light-filled boardroom. Light mode aesthetic, sharp focus, clean lines. He wears formal business attire. The mood conveys precision, truth, and analytical rigor. High-key lighting with a very subtle, diffused shadow for depth." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2_XKeV9xMWT2iBcf64hvioKfv-Nx-lfr4IXaCanjWsU2VUvRn8abp0t7x4rrHXXood3T6QWy0EYBatywGZ__WuyvURoTAWEg6aOQzsBFj-d3iJMRF8nlQiTIDcg2fia4C3Xdg5V1iu0gcqA8Fh9lJwZgfFwv4qqLSJqwnFhAr1_pwOJBfhRERNQGh402L5dzF62MzsUwJuvPc2n0S2gLRA9bjdXvDWVJhCnTm8K8W7-DublmwFjkv"/>
</div>
<div class="p-lg">
<h3 class="font-headline-md text-headline-md text-primary mb-xs">Roberto Silva</h3>
<p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-sm">Analista Principal</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">Arquitecto de modelos financieros predictivos y análisis de riesgo cuantitativo.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-primary dark:bg-primary-container w-full bottom-0">
<div class="flex flex-col md:flex-row justify-between items-center py-xl px-margin max-w-7xl mx-auto w-full gap-lg md:gap-0">
<div class="font-headline-md text-headline-md text-on-primary">IDE Consultores</div>
<nav class="flex flex-wrap justify-center gap-lg">
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Servicios</a>
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Academia</a>
<a class="text-secondary-fixed dark:text-secondary-fixed-dim hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Nosotros</a>
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Privacidad</a>
<a class="text-on-primary/80 dark:text-on-primary-container/80 hover:text-secondary-fixed transition-colors font-body-sm text-body-sm opacity-100 hover:opacity-80" href="#">Contacto</a>
</nav>
<div class="font-body-sm text-body-sm text-on-primary/60">
© 2024 IDE Consultores. Todos los derechos reservados.
</div>
</div>
</footer>
<script>
// Simple Drawer Logic
const menuBtn = document.querySelector('header button');
const drawer = document.getElementById('mobile-drawer');
const overlay = document.getElementById('drawer-overlay');
function toggleDrawer() {
const isClosed = drawer.classList.contains('-translate-x-full');
if (isClosed) {
drawer.classList.remove('-translate-x-full');
overlay.classList.remove('hidden');
setTimeout(() => overlay.classList.remove('opacity-0'), 10);
} else {
drawer.classList.add('-translate-x-full');
overlay.classList.add('opacity-0');
setTimeout(() => overlay.classList.add('hidden'), 300);
}
}
menuBtn.addEventListener('click', toggleDrawer);
overlay.addEventListener('click', toggleDrawer);
</script>
</body></html>