/* ========== GUÍA DE ESTILOS GOVERA ========== */
/* Fuentes preferidas: Futurist Fixed-Width (títulos), Futura Condensed BT (subtítulos), Century Gothic (cuerpo).
Ninguna está en Google Fonts; se cargan alternativas como fallback para web. */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Questrial&display=swap");
@font-face {
font-family: "Futurist Fixed-Width";
src: url("fonts/FUTRFW.TTF") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Futura Condensed PT";
src: url("fonts/futura-condensed-pt-medium-589e44ed1e3a5.otf") format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Futura Condensed PT";
src: url("fonts/futura-condensed-pt-medium-oblique-589e4507d391c.otf") format("opentype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
:root {
/* Colores principales */
--color-primary: #6bbbae;
--color-primary-hover: #5aa89c;
--color-primary-light: #e8f6f4;
--color-auxiliary: #e7b142;
--color-auxiliary-hover: #d19e2e;
--color-secondary: #44546a;
--color-secondary-hover: #364558;
--color-secondary-light: #e8eaed;
--color-negative: #ffffff;
--color-tertiary: #d9d9d9;
/* Colores neutros */
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #eeeeee;
--color-neutral-300: #e0e0e0;
--color-neutral-400: #bdbdbd;
--color-neutral-500: #9e9e9e;
--color-neutral-600: #757575;
--color-neutral-700: #616161;
--color-neutral-800: #424242;
--color-neutral-900: #212121;
/* Espaciado (usar en margin, padding, gap) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
/* Tipografía – títulos: Futurist Fixed-Width (local), mayúsculas */
--font-family-title: "Futurist Fixed-Width", "Futura", "Futura PT", sans-serif;
/* Subtítulos y encabezados: Futura Condensed BT Medium (local: Futura Condensed PT) */
--font-family-subtitle: "Futura Condensed PT", "Futura Condensed BT", "Futura Condensed", "Oswald", sans-serif;
/* Cuerpo (Century Gothic no está en Google Fonts; fallback: Questrial) */
--font-family-body: "Century Gothic", "CenturyGothic", "Questrial", "Apple Gothic", sans-serif;
--font-family-body-italic: "Century Gothic Italic", "Century Gothic", sans-serif;
--font-family-body-bold: "Century Gothic Bold", "Century Gothic", sans-serif;
--font-family-body-bold-italic: "Century Gothic Bold Italic", "Century Gothic", sans-serif;
/* Alias para compatibilidad */
--font-family: var(--font-family-body);
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.75rem;
--font-size-4xl: 2rem;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Contenedor */
--container-max: 1440px;
--radius: 8px;
--letter-spacing-tight: -0.02em;
--letter-spacing-wide: 0.02em;
/* Home */
--home-bg: var(--color-negative);
--home-hero-bg: var(--color-negative);
--home-section-bg-alt: var(--color-neutral-50);
--home-spacing-section: clamp(5rem, 16vw, 10rem);
--home-spacing-inner: clamp(var(--space-6), 8vw, 5rem);
--home-spacing-block: clamp(var(--space-7), 10vw, 6rem);
}
/* ========== BASE ========== */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
font-weight: var(--font-weight-normal);
color: var(--color-neutral-800);
background: var(--home-bg);
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Enlaces visitados: mismo tono que la web (evitar morado por defecto del navegador) */
a:visited {
color: var(--color-primary);
}
/* ========== HEADER / NAVBAR — transparente hasta scroll, ancho completo (estilo GreenLock) ========== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 100;
padding: var(--space-5) 0;
background: transparent;
/* fondo transparente para que se vea el hero por debajo */
transition: background-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}
/* En el resto de páginas: nav oscura por defecto cuando no hay scroll */
.site-header:not(.is-scrolled) .logo {
color: var(--color-secondary);
}
/* Páginas con hero: logo en blanco cuando no hay scroll (misma estrategia que Inversiones en compañías) */
.page-home .site-header:not(.is-scrolled) .logo,
.page-quienes-somos .site-header:not(.is-scrolled) .logo,
.page-inversiones-en-companias .site-header:not(.is-scrolled) .logo,
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) .logo,
.page-aviso-legal .site-header:not(.is-scrolled) .logo,
.page-politica-privacidad .site-header:not(.is-scrolled) .logo,
.page-politica-cookies .site-header:not(.is-scrolled) .logo {
color: var(--color-negative);
}
.site-header:not(.is-scrolled) nav a,
.site-header:not(.is-scrolled) nav a:visited {
color: var(--color-neutral-600);
}
.site-header:not(.is-scrolled) nav a:hover {
color: var(--color-primary);
}
.site-header:not(.is-scrolled) nav a[aria-current="page"] {
color: var(--color-primary);
}
/* Home, Quiénes somos, Inversiones y páginas legales: enlaces en blanco sobre el hero hasta que se haga scroll */
.page-home .site-header:not(.is-scrolled) nav a,
.page-home .site-header:not(.is-scrolled) nav a:visited,
.page-quienes-somos .site-header:not(.is-scrolled) nav a,
.page-quienes-somos .site-header:not(.is-scrolled) nav a:visited,
.page-inversiones-en-companias .site-header:not(.is-scrolled) nav a,
.page-inversiones-en-companias .site-header:not(.is-scrolled) nav a:visited,
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) nav a,
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) nav a:visited,
.page-aviso-legal .site-header:not(.is-scrolled) nav a,
.page-aviso-legal .site-header:not(.is-scrolled) nav a:visited,
.page-politica-privacidad .site-header:not(.is-scrolled) nav a,
.page-politica-privacidad .site-header:not(.is-scrolled) nav a:visited,
.page-politica-cookies .site-header:not(.is-scrolled) nav a,
.page-politica-cookies .site-header:not(.is-scrolled) nav a:visited {
color: var(--color-negative);
}
.page-home .site-header:not(.is-scrolled) nav a:hover,
.page-quienes-somos .site-header:not(.is-scrolled) nav a:hover,
.page-inversiones-en-companias .site-header:not(.is-scrolled) nav a:hover,
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) nav a:hover,
.page-aviso-legal .site-header:not(.is-scrolled) nav a:hover,
.page-politica-privacidad .site-header:not(.is-scrolled) nav a:hover,
.page-politica-cookies .site-header:not(.is-scrolled) nav a:hover {
color: var(--color-primary-light);
}
.page-home .site-header:not(.is-scrolled) nav a[aria-current="page"],
.page-quienes-somos .site-header:not(.is-scrolled) nav a[aria-current="page"],
.page-inversiones-en-companias .site-header:not(.is-scrolled) nav a[aria-current="page"],
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) nav a[aria-current="page"],
.page-aviso-legal .site-header:not(.is-scrolled) nav a[aria-current="page"],
.page-politica-privacidad .site-header:not(.is-scrolled) nav a[aria-current="page"],
.page-politica-cookies .site-header:not(.is-scrolled) nav a[aria-current="page"] {
color: var(--color-primary);
}
.page-home .site-header:not(.is-scrolled) nav a[aria-current="page"]::after,
.page-quienes-somos .site-header:not(.is-scrolled) nav a[aria-current="page"]::after,
.page-inversiones-en-companias .site-header:not(.is-scrolled) nav a[aria-current="page"]::after,
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) nav a[aria-current="page"]::after,
.page-aviso-legal .site-header:not(.is-scrolled) nav a[aria-current="page"]::after,
.page-politica-privacidad .site-header:not(.is-scrolled) nav a[aria-current="page"]::after,
.page-politica-cookies .site-header:not(.is-scrolled) nav a[aria-current="page"]::after {
background: var(--color-primary);
}
.page-home .site-header:not(.is-scrolled) nav a::after,
.page-quienes-somos .site-header:not(.is-scrolled) nav a::after,
.page-inversiones-en-companias .site-header:not(.is-scrolled) nav a::after,
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) nav a::after,
.page-aviso-legal .site-header:not(.is-scrolled) nav a::after,
.page-politica-privacidad .site-header:not(.is-scrolled) nav a::after,
.page-politica-cookies .site-header:not(.is-scrolled) nav a::after {
background: var(--color-primary-light);
}
.site-header.is-scrolled {
background: var(--home-bg);
color: var(--color-neutral-800);
box-shadow: 0 1px 0 var(--color-neutral-200);
}
.site-header nav {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0 var(--home-spacing-inner);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-5);
box-sizing: border-box;
}
.site-header .logo {
display: block;
text-decoration: none;
position: relative;
height: 2rem;
width: 7.43rem;
}
.site-header .logo__img {
position: absolute;
left: 0;
top: 0;
display: block;
height: 2rem;
width: 7.43rem;
object-fit: contain;
object-position: left top;
transition: opacity 0.25s ease;
}
.site-header .logo__img--positivo {
opacity: 0;
}
.site-header:not(.is-scrolled) .logo__img--negativo {
opacity: 1;
}
.site-header:not(.is-scrolled) .logo__img--positivo {
opacity: 0;
}
.site-header.is-scrolled .logo__img--negativo {
opacity: 0;
}
.site-header.is-scrolled .logo__img--positivo {
opacity: 1;
}
.site-header ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-6);
}
.site-header nav a {
position: relative;
color: inherit;
text-decoration: none;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
padding: var(--space-2) 0;
transition: color 0.2s ease;
}
.site-header nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: var(--color-primary);
transition: width 0.25s ease;
}
.site-header nav a:hover:not(.logo)::after,
.site-header nav a[aria-current="page"]::after {
width: 100%;
}
.site-header.is-scrolled nav a,
.site-header.is-scrolled nav a:visited {
color: var(--color-neutral-600);
}
.site-header.is-scrolled nav a:hover:not(.logo) {
color: var(--color-primary);
}
.site-header.is-scrolled nav a[aria-current="page"] {
color: var(--color-primary);
}
.site-header nav a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Overlay del menú móvil: oculto en desktop */
.nav__overlay {
display: none;
}
@media (min-width: 641px) {
.site-header .nav__menu .nav__menu-logo {
display: none;
}
}
/* Botón hamburguesa: oculto en desktop */
.nav__toggle {
display: none;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: none;
background: transparent;
color: inherit;
cursor: pointer;
border-radius: var(--radius);
transition: color 0.2s ease, background 0.2s ease;
}
.nav__toggle:hover {
background: var(--color-neutral-100);
}
.page-home .site-header:not(.is-scrolled) .nav__toggle,
.page-quienes-somos .site-header:not(.is-scrolled) .nav__toggle,
.page-inversiones-en-companias .site-header:not(.is-scrolled) .nav__toggle,
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) .nav__toggle,
.page-aviso-legal .site-header:not(.is-scrolled) .nav__toggle,
.page-politica-privacidad .site-header:not(.is-scrolled) .nav__toggle,
.page-politica-cookies .site-header:not(.is-scrolled) .nav__toggle {
color: var(--color-negative);
}
.page-home .site-header:not(.is-scrolled) .nav__toggle:hover,
.page-quienes-somos .site-header:not(.is-scrolled) .nav__toggle:hover,
.page-inversiones-en-companias .site-header:not(.is-scrolled) .nav__toggle:hover,
.page-inversiones-inmobiliarias .site-header:not(.is-scrolled) .nav__toggle:hover,
.page-aviso-legal .site-header:not(.is-scrolled) .nav__toggle:hover,
.page-politica-privacidad .site-header:not(.is-scrolled) .nav__toggle:hover,
.page-politica-cookies .site-header:not(.is-scrolled) .nav__toggle:hover {
background: rgba(255, 255, 255, 0.15);
}
.site-header.is-scrolled .nav__toggle {
color: var(--color-secondary);
}
.site-header.is-scrolled .nav__toggle:hover {
background: var(--color-secondary-light);
}
.nav__toggle:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.nav__toggle-icon {
display: block;
width: 1.25rem;
height: 2px;
background: currentColor;
position: relative;
transition: background 0.2s ease;
}
.nav__toggle-icon::before,
.nav__toggle-icon::after {
content: "";
position: absolute;
left: 0;
width: 1.25rem;
height: 2px;
background: currentColor;
transition: transform 0.25s ease, top 0.25s ease;
}
.nav__toggle-icon::before {
top: -6px;
}
.nav__toggle-icon::after {
top: 6px;
}
.site-header+main {
padding-top: 4rem;
}
/* Home y páginas con hero: el hero llega hasta arriba para verse bajo el header transparente */
.page-home .site-header+main,
.site-header+main.home,
.page-aviso-legal main,
.page-politica-privacidad main,
.page-politica-cookies main {
padding-top: 0;
}
main {
flex: 1;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-7) var(--home-spacing-inner);
width: 100%;
padding-bottom: 0;
}
.home main {
padding-top: 0;
padding-bottom: 0;
max-width: none;
width: 100%;
}
/* Secciones home a ancho completo (escapar del contenedor) */
.home .seccion--full {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
box-sizing: border-box;
margin-bottom: 0;
}
/* Alternancia de tema: primary */
.home .seccion--primary {
background: var(--color-primary-light);
}
/* Alternancia de tema: secondary (fondo oscuro, texto claro) */
.home .seccion--secondary {
background: var(--color-secondary);
}
.hero {
text-align: center;
padding: var(--space-8) var(--space-6) clamp(var(--space-7), 10vw, var(--space-8));
background: var(--color-tertiary);
margin-bottom: clamp(var(--space-7), 12vw, var(--space-8));
position: relative;
min-height: 100vh;
overflow: hidden;
}
@keyframes heroFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes heroContentIn {
from {
opacity: 0;
transform: translateY(1.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes heroSvgIn {
from {
opacity: 0;
transform: translateX(1rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Scroll reveal: animación de entrada al hacer scroll (no aplicado al hero) */
@keyframes scrollRevealIn {
from {
opacity: 0;
transform: translateY(1.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Contenedores con hijos que entran de forma escalonada */
.scroll-reveal .scroll-reveal__content>* {
opacity: 0;
transform: translateY(1.25rem);
}
.scroll-reveal.is-visible .scroll-reveal__content>* {
animation: scrollRevealIn 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(1) {
animation-delay: 0.15s;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(2) {
animation-delay: 0.3s;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(3) {
animation-delay: 0.45s;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(4) {
animation-delay: 0.6s;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(5) {
animation-delay: 0.75s;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(6) {
animation-delay: 0.9s;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(7) {
animation-delay: 1.05s;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(8) {
animation-delay: 1.2s;
}
.scroll-reveal.is-visible .scroll-reveal__content>*:nth-child(n+9) {
animation-delay: 1.35s;
}
.scroll-reveal__content--inline {
display: contents;
}
/* Hero: imagen de fondo (Unsplash) */
.hero__bg-img {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.home .hero__bg-img {
animation: heroFadeIn 1.8s ease-out forwards;
}
.hero__bg-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(45, 55, 72, 0.88) 0%, rgba(30, 40, 55, 0.85) 100%);
}
.hero__bg-img-src {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero__bg-wrap {
position: absolute;
top: 7rem;
right: 5%;
bottom: 0;
width: min(50%, 480px);
display: flex;
align-items: stretch;
justify-content: center;
pointer-events: none;
user-select: none;
z-index: 1;
opacity: 0;
animation: heroSvgIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}
.hero__bg-wrap::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 45%;
background: linear-gradient(to bottom, transparent, var(--color-negative));
pointer-events: none;
}
.home .hero__bg-wrap::after {
display: none;
}
.hero:not(.hero--home) .hero__bg-wrap::after {
background: linear-gradient(to bottom, transparent, var(--color-tertiary));
}
.hero__bg-svg {
height: 100%;
width: auto;
object-fit: cover;
object-position: center center;
}
.home .hero__content {
opacity: 0;
animation: heroContentIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.hero h1 {
font-family: var(--font-family-title);
font-weight: var(--font-weight-normal);
margin: 0 0 var(--space-5);
font-size: clamp(2rem, 5vw, 3.25rem);
line-height: normal;
text-transform: uppercase;
color: var(--color-neutral-900);
}
.hero p {
margin: 0;
font-size: var(--font-size-xl);
color: var(--color-neutral-600);
max-width: 42ch;
margin-left: auto;
margin-right: auto;
line-height: var(--line-height-relaxed);
font-weight: var(--font-weight-normal);
}
/* ========== HOME: HERO — hasta el borde superior, vídeo bajo header transparente ========== */
.home .hero--home {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
text-align: left;
background: var(--color-secondary);
padding-top: calc(4rem + var(--home-spacing-section));
padding-bottom: var(--home-spacing-section);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
margin-bottom: 0;
overflow: hidden;
box-sizing: border-box;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.home .hero--primary .hero__title {
color: var(--color-negative);
}
.home .hero--primary .hero__lead {
color: var(--color-neutral-200);
}
.home .hero--primary .hero__cta {
color: var(--color-primary-light);
}
.home .hero--primary .hero__cta:hover {
color: var(--color-negative);
}
.hero__inner {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-items: start;
}
.home .hero__inner {
flex: 1;
min-height: 0;
grid-template-rows: 1fr;
align-items: end;
}
.hero__content {
max-width: 32rem;
}
.home .hero__content {
max-width: min(62rem, 90%);
}
.home .hero__title {
font-family: var(--font-family-title);
font-weight: var(--font-weight-normal);
color: var(--color-secondary);
font-size: clamp(1.9rem, 5vw, 3.25rem);
line-height: normal;
text-transform: uppercase;
margin: 0 0 var(--space-6);
}
.hero__lead {
margin: 0 0 var(--space-6);
font-size: var(--font-size-base);
color: var(--color-neutral-600);
line-height: var(--line-height-relaxed);
max-width: 48ch;
font-weight: var(--font-weight-normal);
}
.home .hero__lead {
max-width: none;
}
.hero__cta {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.hero__cta:hover {
color: var(--color-primary-hover);
}
.contenido,
.seccion {
margin-bottom: var(--home-spacing-section);
}
.home .seccion {
margin-bottom: var(--home-spacing-section);
}
.contenido h2,
.seccion h2 {
font-family: var(--font-family-subtitle);
margin: 0 0 var(--space-6);
font-size: clamp(var(--font-size-2xl), 3vw, 2.5rem);
font-weight: var(--font-weight-bold);
line-height: normal;
color: var(--color-neutral-900);
}
.bloques {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
}
.bloques article {
padding: var(--space-6) var(--space-5);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius);
background: var(--color-neutral-50);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bloques article:hover {
border-color: var(--color-neutral-300);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.bloques article h3 {
font-family: var(--font-family-subtitle);
margin: 0 0 var(--space-3);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: normal;
color: var(--color-neutral-900);
}
.bloques article h3 a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.bloques article h3 a:hover {
color: var(--color-primary);
}
.bloques article p {
margin: 0;
color: var(--color-neutral-600);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
}
.seccion p {
margin: 0 0 var(--space-4);
font-size: var(--font-size-lg);
line-height: 1.7;
max-width: 65ch;
color: var(--color-neutral-700);
}
.seccion p:last-child {
margin-bottom: 0;
}
/* Home: sección centrada (tipo oversight) */
.seccion--centrada {
text-align: center;
max-width: 55ch;
margin-left: auto;
margin-right: auto;
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
}
.seccion--centrada .seccion__titulo {
margin-bottom: var(--space-6);
font-size: clamp(var(--font-size-2xl), 3.5vw, 2.75rem);
color: var(--color-secondary);
}
/* Home: Misión – tres columnas (grafismo + contenido + foto), tema secondary */
.home .seccion.seccion--mision {
--mision-space: clamp(var(--space-8), 10vw, 6rem);
padding-top: var(--mision-space);
padding-bottom: var(--mision-space);
margin-top: var(--mision-space);
margin-bottom: var(--mision-space);
}
.home .seccion--mision {
background: var(--color-negative);
}
.mision__inner {
display: grid;
grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
gap: clamp(var(--space-8), 10vw, 6rem);
align-items: center;
max-width: var(--container-max);
margin: 0 auto;
}
.mision__grafico {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
.mision__svg {
width: 100%;
max-width: 18rem;
height: auto;
color: var(--color-primary);
}
.mision__contenido {
min-width: 0;
}
.mision__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(var(--font-size-2xl), 3.5vw, 2.75rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-secondary);
margin: 0 0 var(--space-6);
}
.mision__texto {
margin: 0;
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
max-width: 52ch;
}
.mision__link {
position: relative;
display: inline-block;
margin-top: var(--space-4);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.mision__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: var(--color-primary);
transition: width 0.25s ease;
}
.mision__link:hover::after {
width: 100%;
}
.mision__link:hover {
color: var(--color-primary-hover);
}
.mision__link:visited {
color: var(--color-primary);
}
.seccion__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
margin: 0 0 var(--space-6);
font-size: clamp(var(--font-size-2xl), 3vw, 2.5rem);
line-height: normal;
text-transform: uppercase;
color: var(--color-secondary);
}
.seccion__texto {
margin: 0;
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-600);
}
.seccion__titulo--izq {
text-align: left;
margin-bottom: var(--space-7);
}
/* Home: contacto – título + datos a la izquierda, imagen a la derecha, alineado abajo */
.contacto__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-6), 6vw, 4rem);
align-items: end;
max-width: var(--container-max);
margin: 0 auto;
}
.contacto__col {
min-width: 0;
}
.contacto__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(var(--font-size-xl), 2.5vw, 1.75rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-secondary);
margin: 0 0 var(--space-3);
}
p.contacto__lead {
font-size: var(--font-size-2xl);
line-height: var(--line-height-normal);
color: var(--color-neutral-600);
margin: 0 0 var(--space-5);
}
.contacto__bloques {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.contacto__bloque {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-neutral-200);
}
.contacto__bloque:last-child {
padding-bottom: 0;
border-bottom: none;
}
.contacto__grafico {
display: flex;
align-items: center;
}
.contacto__icono {
width: 100%;
max-width: 6rem;
height: auto;
color: var(--color-primary);
display: block;
}
.contacto__bloque .contacto__texto {
margin: 0;
}
.contacto__foto {
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.contacto__foto-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
aspect-ratio: 4/3;
}
/* Home: estrategia – tema primary, tarjetas con gráficos industriales e inmobiliarias */
.seccion--estrategia {
padding-top: clamp(var(--space-8), 12vw, 7rem);
padding-bottom: clamp(var(--space-8), 12vw, 7rem);
}
.estrategia__bloque-header {
text-align: center;
margin-bottom: var(--space-8);
}
.estrategia__bloque-header::after {
content: "";
display: block;
width: 3rem;
height: 3px;
margin: var(--space-5) auto 0;
background: var(--color-secondary);
border-radius: 2px;
}
.estrategia__bloque-titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(var(--font-size-2xl), 3.5vw, 2.5rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-secondary);
margin: 0;
white-space: nowrap;
}
/* Nuestra forma de invertir – tarjetas, fondo secondary contenido en max-width */
.home .seccion--forma-invertir {
padding-top: clamp(var(--space-3), 8vw, 3rem);
padding-bottom: clamp(var(--space-3), 8vw, 3rem);
}
.seccion--forma-invertir .forma-invertir__inner {
max-width: var(--container-max);
width: 100%;
margin: 0 auto;
padding: clamp(var(--space-6), 6vw, var(--space-8)) var(--home-spacing-inner);
background: rgba(68, 84, 106, 0.12);
background: color-mix(in srgb, var(--color-secondary) 85%, transparent);
border-radius: var(--radius);
box-sizing: border-box;
}
h2.forma-invertir__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(var(--font-size-2xl), 3.5vw, 2.5rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-neutral-100);
text-align: center;
margin: 0 0 var(--space-7);
}
.forma-invertir__titulo::after {
content: "";
display: block;
width: 3rem;
height: 3px;
margin: var(--space-5) auto 0;
background: var(--color-primary);
border-radius: 2px;
}
.forma-invertir__lista {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 640px) {
.forma-invertir__lista {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
/* Cuarta y quinta card en segunda fila */
.forma-invertir__lista .forma-invertir__card:nth-child(4),
.forma-invertir__lista .forma-invertir__card:nth-child(5) {
grid-column: span 1;
}
}
@media (min-width: 960px) {
.forma-invertir__lista {
/* Grid de 6 columnas para permitir 3 arriba y 2 abajo con mismo ancho */
grid-template-columns: repeat(6, 1fr);
gap: var(--space-6);
}
/* Primera fila: 3 cards (01, 02, 03) - cada una ocupa 2 columnas */
.forma-invertir__lista .forma-invertir__card:nth-child(1),
.forma-invertir__lista .forma-invertir__card:nth-child(2),
.forma-invertir__lista .forma-invertir__card:nth-child(3) {
grid-column: span 2;
}
/* Segunda fila: 2 cards (04, 05) - cada una ocupa 3 columnas para llenar todo el ancho */
.forma-invertir__lista .forma-invertir__card:nth-child(4) {
grid-column: 1 / span 3;
}
.forma-invertir__lista .forma-invertir__card:nth-child(5) {
grid-column: 4 / span 3;
}
}
.forma-invertir__card {
display: flex;
flex-direction: column;
gap: var(--space-5);
background: var(--color-negative);
padding: var(--space-6);
border-radius: var(--radius);
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
border: 1px solid var(--color-neutral-200);
}
.forma-invertir__numero {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-lg);
line-height: 1;
color: var(--color-primary);
background: var(--color-primary-light);
border-radius: 50%;
}
.forma-invertir__texto {
margin: 0;
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-800);
font-family: var(--font-family-body);
font-weight: var(--font-weight-medium);
}
.seccion--estrategia .estrategia__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-6), 6vw, var(--space-8));
align-items: stretch;
max-width: var(--container-max);
margin: 0 auto;
padding: 0;
}
.estrategia__col {
min-width: 0;
background: var(--color-negative);
padding: var(--space-7);
border-radius: var(--radius);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid var(--color-neutral-200);
}
.estrategia__grafico {
display: flex;
align-items: center;
margin-bottom: var(--space-6);
}
.estrategia__icono {
width: 5.5rem;
height: auto;
color: var(--color-primary);
display: block;
}
.estrategia__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
margin: 0 0 var(--space-5);
font-size: clamp(var(--font-size-xl), 2.2vw, 1.75rem);
line-height: normal;
text-transform: uppercase;
color: var(--color-secondary);
}
.estrategia__desc {
margin: 0 0 var(--space-5);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.estrategia__desc strong {
font-family: var(--font-family-body-bold);
font-weight: var(--font-weight-bold);
color: var(--color-neutral-800);
}
.estrategia__link {
position: relative;
display: inline-block;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.estrategia__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: var(--color-primary);
transition: width 0.25s ease;
}
.estrategia__link:hover::after {
width: 100%;
}
.estrategia__link:hover {
color: var(--color-primary-hover);
}
.estrategia__link:visited {
color: var(--color-primary);
}
/* Home: Fundación Aciturri – imagen de fondo con overlay, grafismo y texto claro */
.seccion--fundacion {
position: relative;
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
min-height: 420px;
display: flex;
align-items: center;
}
.fundacion__bg-img {
position: absolute;
inset: 0;
z-index: 0;
}
.fundacion__bg-img-src {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.85);
}
.fundacion__bg-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(25, 35, 50, 0.78) 0%, rgba(20, 28, 42, 0.82) 100%);
}
.fundacion__inner {
position: relative;
z-index: 1;
max-width: 42rem;
margin: 0 auto;
text-align: center;
}
.seccion--fundacion .fundacion__titulo {
color: var(--color-negative);
}
.seccion--fundacion .fundacion__titulo::after {
background: var(--color-primary);
}
.seccion--fundacion .fundacion__texto {
color: var(--color-neutral-200);
}
.seccion--fundacion .fundacion__link {
color: var(--color-primary);
}
.seccion--fundacion .fundacion__link:visited {
color: var(--color-primary);
}
.fundacion__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(var(--font-size-2xl), 3.5vw, 2.5rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-secondary);
margin: 0 0 var(--space-5);
}
.fundacion__titulo::after {
content: "";
display: block;
width: 3rem;
height: 3px;
margin: var(--space-4) auto 0;
background: var(--color-primary);
border-radius: 2px;
}
.fundacion__texto {
margin: 0 0 var(--space-6);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.fundacion__link {
position: relative;
display: inline-block;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.fundacion__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: var(--color-primary);
transition: width 0.25s ease;
}
.fundacion__link:hover::after {
width: 100%;
}
.fundacion__link:hover {
color: var(--color-primary-hover);
}
.fundacion__link:visited {
color: var(--color-primary);
}
.contacto__texto {
margin: 0;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.contacto__link {
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 0.2em;
transition: color 0.2s ease;
font-weight: var(--font-weight-medium);
}
.contacto__link:hover {
color: var(--color-secondary-hover);
}
.contacto__link:visited {
color: var(--color-secondary);
}
.seccion.seccion--contacto {
padding-top: clamp(var(--space-6), 8vw, 4.5rem);
padding-bottom: clamp(var(--space-6), 8vw, 4.5rem);
margin-bottom: 0;
}
.contacto__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.seccion--alt {
background: var(--home-section-bg-alt);
padding: var(--home-spacing-section) var(--home-spacing-inner);
margin-left: calc(-1 * var(--home-spacing-inner));
margin-right: calc(-1 * var(--home-spacing-inner));
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
border-radius: 0;
}
.seccion--alt h2 {
margin-bottom: var(--space-5);
}
.pagina h1 {
font-family: var(--font-family-title);
font-weight: var(--font-weight-normal);
margin: 0 0 var(--space-6);
font-size: clamp(var(--font-size-2xl), 3vw, 2.25rem);
line-height: normal;
text-transform: uppercase;
color: var(--color-neutral-900);
}
.pagina p {
margin: 0 0 var(--space-4);
max-width: 65ch;
font-size: var(--font-size-lg);
line-height: 1.7;
color: var(--color-neutral-700);
}
.pagina p:last-child {
margin-bottom: 0;
}
/* ========== PÁGINAS LEGALES (aviso legal, privacidad, cookies) ========== */
.pagina-legal__bloque {
width: 100%;
max-width: none;
padding: 0 var(--home-spacing-inner) var(--space-8);
}
/* Hero del título: franja azul a ancho completo, padding arriba para no pisar el header */
.pagina-legal .pagina-legal__titulo {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
box-sizing: border-box;
padding: calc(4rem + var(--space-6)) var(--home-spacing-inner) var(--space-6);
margin-top: 0;
margin-bottom: var(--space-6);
background: var(--color-secondary);
color: var(--color-negative);
font-family: var(--font-family-subtitle);
font-size: clamp(var(--font-size-2xl), 3vw, 2.5rem);
font-weight: var(--font-weight-bold);
line-height: normal;
}
.pagina-legal__contenido {
width: 100%;
max-width: none;
}
/* Texto de contenido: tamaño base (no lg) para mejor lectura */
.pagina-legal .pagina-legal__contenido p {
margin: 0 0 var(--space-4);
font-size: var(--font-size-base);
line-height: 1.6;
}
.pagina-legal .pagina-legal__contenido p:last-child {
margin-bottom: 0;
}
.pagina-legal .pagina-legal__contenido h2 {
font-family: var(--font-family-subtitle);
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: var(--font-weight-bold);
margin: var(--space-6) 0 var(--space-3);
line-height: normal;
}
.pagina-legal .pagina-legal__contenido h2:first-child {
margin-top: 0;
}
.pagina-legal .pagina-legal__contenido ul {
margin: 0 0 var(--space-4);
padding-left: 1.5em;
list-style: disc;
}
.pagina-legal .pagina-legal__contenido li {
margin-bottom: var(--space-2);
font-size: var(--font-size-base);
line-height: 1.6;
}
/* Enlaces en contenido legal */
.pagina-legal .pagina-legal__contenido a {
color: var(--color-primary);
}
.pagina-legal .pagina-legal__contenido a:hover {
color: var(--color-primary-hover);
}
/* ========== FOOTER ========== */
.site-footer,
footer {
background: var(--color-secondary);
color: var(--color-negative);
padding: var(--space-8) var(--home-spacing-inner);
margin-top: auto;
max-width: 100%;
text-align: left;
}
.footer__inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: clamp(var(--space-5), 6vw, 3rem);
align-items: stretch;
max-width: var(--container-max);
margin: 0 auto;
}
.footer__brand {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-3);
}
.footer__logo {
display: block;
}
.footer__logo-img {
display: block;
height: 2rem;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}
.footer__copy {
margin: 0;
font-size: 0.6875rem;
letter-spacing: var(--letter-spacing-wide);
color: var(--color-neutral-400);
}
.footer__credit {
margin: var(--space-2) 0 0;
font-size: 0.6875rem;
letter-spacing: var(--letter-spacing-wide);
color: var(--color-neutral-400);
}
.site-footer>.footer__credit {
margin-top: var(--space-6);
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
}
.footer__credit a,
.footer__credit a:visited {
color: var(--color-negative);
text-decoration: underline;
text-underline-offset: 0.2em;
transition: color 0.2s ease;
}
.footer__credit a:hover {
color: var(--color-primary-light);
}
.footer__titulo {
font-family: var(--font-family-xl);
font-size: var(--font-size-lg);
/* font-weight: var(--font-weight-semibold); */
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: var(--color-neutral-200);
margin: 0 0 var(--space-3);
}
.footer__nav ul,
.footer__empresas ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer__nav li,
.footer__empresas li {
margin-bottom: var(--space-1);
}
.footer__nav a,
.footer__nav a:visited,
.footer__empresas a,
.footer__empresas a:visited {
color: var(--color-negative);
text-decoration: none;
font-size: var(--font-size-xs);
transition: color 0.2s ease;
}
.footer__nav a:hover,
.footer__empresas a:hover {
color: var(--color-primary-light);
}
.footer__contacto .footer__texto {
margin: 0 0 var(--space-1);
font-size: var(--font-size-xs);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-300);
}
.footer__contacto .footer__texto:last-child {
margin-bottom: 0;
}
.footer__contacto a,
.footer__contacto a:visited {
color: var(--color-negative);
text-decoration: underline;
text-underline-offset: 0.2em;
transition: color 0.2s ease;
}
.footer__contacto a:hover {
color: var(--color-primary-light);
}
/* ========== PÁGINA QUIÉNES SOMOS ========== */
.page-quienes-somos main {
padding-top: 0;
}
/* Hero página: ancho completo, foto de fondo, sin SVG ni degradado, misma altura en todas las páginas */
.quienes-somos .hero--pagina,
.inversiones-en-companias .hero--pagina {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 0;
text-align: left;
background: var(--color-secondary);
padding-top: calc(4rem + var(--space-8));
padding-bottom: var(--space-8);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
min-height: 22rem;
overflow: hidden;
box-sizing: border-box;
}
.quienes-somos .hero--pagina .hero__bg-img::after {
background: linear-gradient(135deg, rgba(45, 55, 72, 0.75) 0%, rgba(30, 40, 55, 0.7) 100%);
}
.quienes-somos .hero--pagina .hero__bg-img {
animation: heroFadeIn 1.8s ease-out forwards;
}
.quienes-somos .hero--pagina .hero__content {
opacity: 0;
animation: heroContentIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.quienes-somos .hero--pagina .hero__inner {
max-width: var(--container-max);
margin: 0 auto;
align-items: end;
justify-items: start;
}
.quienes-somos .hero--pagina .hero__title {
color: var(--color-negative);
font-size: clamp(1.9rem, 5vw, 3.25rem);
margin: 0 0 var(--space-6);
white-space: nowrap;
}
.quienes-somos .hero--pagina .hero__lead {
color: var(--color-neutral-200);
margin: 0;
max-width: 52ch;
}
.quienes-somos .hero--pagina .hero__content {
max-width: min(42rem, 92%);
}
/* Hero página Inversiones en compañías: mismos estilos que quienes-somos */
.page-inversiones-en-companias main,
.page-inversiones-inmobiliarias main {
padding-top: 0;
}
.inversiones-en-companias .hero--pagina {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 0;
text-align: left;
background: var(--color-secondary);
padding-top: calc(4rem + var(--space-8));
padding-bottom: var(--space-8);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
min-height: auto;
overflow: hidden;
box-sizing: border-box;
}
.inversiones-en-companias .hero--pagina .hero__bg-img::after {
background: linear-gradient(135deg, rgba(45, 55, 72, 0.75) 0%, rgba(30, 40, 55, 0.7) 100%);
}
.inversiones-en-companias .hero--pagina .hero__bg-img {
animation: heroFadeIn 1.8s ease-out forwards;
}
.inversiones-en-companias .hero--pagina .hero__content {
opacity: 0;
animation: heroContentIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.inversiones-en-companias .hero--pagina .hero__inner {
max-width: var(--container-max);
margin: 0 auto;
align-items: end;
justify-items: start;
}
.inversiones-en-companias .hero--pagina .hero__title {
color: var(--color-negative);
font-size: clamp(1.9rem, 5vw, 3.25rem);
margin: 0 0 var(--space-6);
white-space: nowrap;
}
.inversiones-en-companias .hero--pagina .hero__lead {
color: var(--color-neutral-200);
margin: 0;
max-width: 52ch;
}
.inversiones-en-companias .hero--pagina .hero__content {
max-width: min(42rem, 92%);
}
/* Inversiones inmobiliarias: hero (mismo patrón que inversiones en compañías) */
.inversiones-inmobiliarias .hero--pagina {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 0;
text-align: left;
background: var(--color-secondary);
padding-top: calc(4rem + var(--space-8));
padding-bottom: var(--space-8);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
min-height: auto;
overflow: hidden;
box-sizing: border-box;
}
.inversiones-inmobiliarias .hero--pagina .hero__bg-img::after {
background: linear-gradient(135deg, rgba(45, 55, 72, 0.75) 0%, rgba(30, 40, 55, 0.7) 100%);
}
.inversiones-inmobiliarias .hero--pagina .hero__bg-img {
animation: heroFadeIn 1.8s ease-out forwards;
}
.inversiones-inmobiliarias .hero--pagina .hero__content {
opacity: 0;
animation: heroContentIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
max-width: min(42rem, 92%);
}
.inversiones-inmobiliarias .hero--pagina .hero__inner {
max-width: var(--container-max);
margin: 0 auto;
align-items: end;
justify-items: start;
}
.inversiones-inmobiliarias .hero--pagina .hero__title {
color: var(--color-negative);
font-size: clamp(1.9rem, 5vw, 3.25rem);
margin: 0 0 var(--space-6);
white-space: nowrap;
}
.inversiones-inmobiliarias .hero--pagina .hero__lead {
color: var(--color-neutral-200);
margin: 0;
max-width: 52ch;
}
/* Inversiones inmobiliarias: introducción + dos cards (Core y Value Add) */
.inmobiliarias-contenido {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
box-sizing: border-box;
}
.inmobiliarias-contenido__inner {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
}
.inmobiliarias-contenido__texto {
margin: 0 auto var(--space-8);
max-width: 60ch;
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
text-align: center;
}
/* Grid de cards: móvil = una columna, desktop = dos columnas con subgrid para alinear filas */
.inmobiliarias__cards {
display: grid;
grid-template-columns: 1fr;
gap: clamp(var(--space-7), 8vw, var(--space-8));
}
@media (min-width: 769px) {
.inmobiliarias__cards {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto auto auto;
align-items: start;
}
.inmobiliarias__card:nth-child(1) {
grid-column: 1;
grid-row: 1 / -1;
}
.inmobiliarias__card:nth-child(2) {
grid-column: 2;
grid-row: 1 / -1;
}
}
/* Card: mismo estilo que resto de la web (inversiones en compañías, home). Sin hover (no ejecutan acciones). */
.inmobiliarias__card {
display: flex;
flex-direction: column;
background: var(--color-negative);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius);
padding: var(--space-6);
min-height: 10rem;
overflow: hidden;
}
@media (min-width: 769px) {
.inmobiliarias__card {
display: grid;
grid-template-rows: subgrid;
grid-template-columns: 1fr;
grid-row: 1 / -1;
min-height: 0;
}
}
/* Título: mismo estilo que bloque-linea__titulo (Inversiones en compañías) */
.inversiones-inmobiliarias .inmobiliarias__card-titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-neutral-900);
margin: 0 0 0;
padding-bottom: var(--space-2);
border-bottom: 3px solid var(--color-primary);
}
.inmobiliarias__card-desc {
margin: var(--space-2) 0 var(--space-2);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
max-width: 60ch;
}
/* Criterios: reutiliza bloque-linea__criterios y bloque-linea__card-criterio (Inversiones en compañías) */
.inmobiliarias__card .bloque-linea__criterios {
margin-bottom: var(--space-3);
align-items: stretch;
}
.inmobiliarias__card .bloque-linea__card-criterio {
height: 100%;
min-height: 0;
}
/* En desktop, las 3 cards en fila con flex para igualar altura en ambas columnas */
@media (min-width: 900px) {
.inmobiliarias__card .bloque-linea__criterios {
display: flex;
gap: var(--space-5);
}
.inmobiliarias__card .bloque-linea__card-criterio {
flex: 1;
min-width: 0;
height: auto;
align-self: stretch;
}
}
/* Entre 768 y 1400: las 3 subcards en columna y cards/texto que no se corten */
@media (max-width: 1400px) and (min-width: 769px) {
.inmobiliarias__card {
min-width: 0;
}
.inmobiliarias__card-desc {
max-width: 100%;
min-width: 0;
}
.inmobiliarias__card .bloque-linea__criterios {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
min-width: 0;
}
.inmobiliarias__card .bloque-linea__card-criterio {
flex: none;
width: auto;
min-width: 0;
height: auto;
}
}
.inmobiliarias__card-img-wrap {
height: 12rem;
background: var(--color-neutral-200);
margin-left: calc(-1 * var(--space-6));
margin-right: calc(-1 * var(--space-6));
margin-bottom: calc(-1 * var(--space-6));
border-radius: 0 0 var(--radius) var(--radius);
overflow: hidden;
flex-shrink: 0;
}
.inmobiliarias__card-img-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Inversiones en compañías: líneas de inversión (presentación + cards, misma anchura que hero) */
.inversiones-en-companias .lineas-inversion {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
box-sizing: border-box;
}
.lineas-inversion__inner {
width: 100%;
max-width: none;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.seccion p.lineas-inversion__texto {
margin: 0 auto var(--space-8);
width: 100%;
max-width: 60ch;
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
text-align: center;
}
.lineas-inversion__cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
width: 100%;
}
@media (min-width: 641px) {
.lineas-inversion__cards {
grid-template-columns: repeat(3, 1fr);
gap: clamp(var(--space-6), 4vw, var(--space-8));
}
}
.lineas-inversion__card {
display: flex;
flex-direction: column;
gap: var(--space-4);
background: var(--color-negative);
padding: var(--space-6);
border: 1px solid var(--color-neutral-200);
text-decoration: none;
color: var(--color-neutral-500);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lineas-inversion__card:hover {
background: var(--color-primary);
color: var(--color-negative);
border-color: var(--color-primary);
}
.lineas-inversion__card-numero {
display: block;
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(2.5rem, 5vw, 3.5rem);
line-height: 1;
letter-spacing: -0.02em;
color: inherit;
}
.lineas-inversion__card-line {
display: block;
width: 2.5rem;
height: 3px;
background: currentColor;
opacity: 0.9;
}
.lineas-inversion__card:hover .lineas-inversion__card-line {
background: var(--color-negative);
}
/* Especificidad mayor que .seccion h2 */
.inversiones-en-companias .lineas-inversion__card-titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(var(--font-size-base), 1.5vw, 1.125rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: inherit;
margin: 0;
}
/* Bloques de cada línea (01, 02, 03): altura al contenido */
.inversiones-en-companias .bloque-linea {
scroll-margin-top: 5rem;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
background: var(--color-primary-light);
box-sizing: border-box;
}
.bloque-linea__inner {
width: 100%;
max-width: none;
margin: 0 auto;
}
/* Especificidad mayor que .seccion h2 */
.inversiones-en-companias .bloque-linea__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(1.5rem, 3.5vw, 2.5rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-neutral-900);
margin: 0 0 var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 3px solid var(--color-primary);
}
.bloque-linea__contenido {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
/* Especificidad mayor que .seccion p */
.inversiones-en-companias .bloque-linea__contenido p {
margin: 0 0 var(--space-4);
max-width: 65ch;
}
.inversiones-en-companias .bloque-linea__contenido p:last-child {
margin-bottom: 0;
}
/* Subsecciones dentro de cada bloque (ej. Inversiones aeronáuticas previas) */
.bloque-linea__subseccion {
margin-bottom: var(--space-8);
}
.bloque-linea__subseccion:last-child {
margin-bottom: 0;
}
/* Especificidad mayor que .seccion h2/h3 si existiera */
.inversiones-en-companias .bloque-linea__subseccion-titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(1.125rem, 2.2vw, 1.5rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-secondary);
margin: 0 0 var(--space-4);
}
/* Especificidad mayor que .seccion p */
.inversiones-en-companias .bloque-linea__subseccion-texto {
margin: 0 0 var(--space-6);
max-width: 60ch;
}
.inversiones-en-companias .bloque-linea__contenido-listado {
margin: 0 0 var(--space-6);
padding-left: var(--space-5);
list-style: disc;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.inversiones-en-companias .bloque-linea__contenido-listado li {
margin-bottom: var(--space-2);
}
.inversiones-en-companias .bloque-linea__contenido-listado li:last-child {
margin-bottom: 0;
}
/* Grid de cards empresa (logo + porcentaje destacado + texto) */
.bloque-linea__empresas {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 641px) {
.bloque-linea__empresas {
grid-template-columns: repeat(2, 1fr);
gap: clamp(var(--space-6), 4vw, var(--space-8));
}
}
@media (max-width: 480px) {
.bloque-linea__card-empresa {
grid-template-columns: 1fr;
}
}
.bloque-linea__card-empresa {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-6);
align-items: stretch;
background: var(--color-negative);
padding: var(--space-6);
border-radius: var(--radius);
border: 1px solid var(--color-neutral-200);
min-height: 10rem;
}
.bloque-linea__card-empresa-col-pct {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.bloque-linea__card-empresa-col-body {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
.bloque-linea__card-empresa-logo {
flex-shrink: 0;
}
.bloque-linea__card-empresa-logo-img {
display: block;
height: 2.5rem;
width: auto;
max-width: 100%;
object-fit: contain;
object-position: left top;
}
/* Especificidad mayor que .seccion p (porcentaje destacado) */
.inversiones-en-companias .bloque-linea__card-empresa-pct {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(2.75rem, 8vw, 4.5rem);
line-height: 1;
letter-spacing: -0.03em;
color: var(--color-primary);
margin: 0;
}
.inversiones-en-companias .bloque-linea__card-empresa-texto {
margin: 0;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
max-width: none;
width: 100%;
}
/* Grid de criterios (6 cards de texto) */
.bloque-linea__criterios-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.bloque-linea__criterios-grupo-titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-lg);
color: var(--color-neutral-800);
margin: 0 0 var(--space-2);
padding-bottom: var(--space-2);
border-bottom: 2px solid var(--color-primary);
}
.bloque-linea__criterios-wrapper .bloque-linea__criterios-wrapper .bloque-linea__criterios-grupo-titulo:first-child {
margin-top: 0;
}
/* Empresas en dificultades: dos columnas con listas (sin cards). Escopado para ganar a .seccion h4/p */
.inversiones-en-companias .bloque-linea__dificultades {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
}
@media (min-width: 641px) {
.inversiones-en-companias .bloque-linea__dificultades {
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-6), 4vw, var(--space-8));
}
}
.inversiones-en-companias .bloque-linea__dificultades-titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-xl);
color: var(--color-primary);
margin: 0 0 var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 2px solid var(--color-neutral-200);
}
.inversiones-en-companias .bloque-linea__dificultades-lista {
margin: 0;
padding: 0;
list-style: none;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.inversiones-en-companias .bloque-linea__dificultades-lista li {
position: relative;
padding-left: var(--space-5);
margin-bottom: var(--space-3);
}
.inversiones-en-companias .bloque-linea__dificultades-lista li:last-child {
margin-bottom: 0;
}
.inversiones-en-companias .bloque-linea__dificultades-lista li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 6px;
height: 6px;
background: var(--color-primary);
border-radius: 50%;
}
.bloque-linea__criterios {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 641px) {
.bloque-linea__criterios {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
}
@media (min-width: 900px) {
.bloque-linea__criterios {
grid-template-columns: repeat(3, 1fr);
}
}
.bloque-linea__card-criterio {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-negative);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.bloque-linea__card-criterio-icono {
width: 3.5rem;
height: 3.5rem;
color: var(--color-primary);
flex-shrink: 0;
}
/* Inmobiliarias: iconos outline finos y profesionales (trazo 1px) */
.inmobiliarias__card .bloque-linea__card-criterio-icono--thin {
color: var(--color-primary);
}
.bloque-linea__card-criterio-texto {
display: block;
margin: 0;
}
/* Banner destacado en bloque línea (sección 02) */
.inversiones-en-companias .bloque-linea__banner {
display: block;
margin: 0 0 var(--space-8);
padding: var(--space-6);
background: var(--color-neutral-800);
color: var(--color-negative);
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
text-align: center;
max-width: none;
}
/* Sección 02: grid de columnas (criterios, socios, sectores, logos) */
.minoritaria__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
.minoritaria__grid .bloque-linea__subseccion {
margin-bottom: 0;
}
/* Cards de las 3 columnas (modelo, parámetros, sectores). Mismo estilo que bloque-linea__card-empresa (sección 01) */
.minoritaria__card {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-6);
background: var(--color-negative);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius);
min-height: 10rem;
}
.minoritaria__card-icono {
width: 3.5rem;
height: 3.5rem;
color: var(--color-primary);
flex-shrink: 0;
}
.minoritaria__card-icono svg {
width: 100%;
height: 100%;
display: block;
}
.minoritaria__card .bloque-linea__contenido-listado {
margin-bottom: 0;
}
.minoritaria__card .bloque-linea__subseccion-texto {
margin-bottom: var(--space-3);
}
@media (min-width: 641px) {
.minoritaria__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-7);
}
}
@media (min-width: 900px) {
.minoritaria__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.minoritaria__col {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.minoritaria__col--sectores {
gap: var(--space-4);
}
.minoritaria__col--logos {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
@media (min-width: 900px) {
.minoritaria__col--logos {
grid-column: 1 / -1;
}
}
/* Card full-width: Empresas participadas con carrusel de logos */
.minoritaria__empresas-card {
width: 100vw;
margin-top: var(--space-8);
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: var(--space-7) var(--home-spacing-inner);
background: var(--color-negative);
border-top: 1px solid var(--color-neutral-200);
border-bottom: 1px solid var(--color-neutral-200);
box-sizing: border-box;
}
/* Especificidad mayor que .seccion h3 si existiera */
.inversiones-en-companias .minoritaria__empresas-card-titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(1.125rem, 2.2vw, 1.5rem);
text-transform: uppercase;
color: var(--color-neutral-900);
text-align: center;
margin: 0 0 var(--space-6);
}
.minoritaria__carrusel {
overflow: hidden;
width: 100%;
contain: layout style paint;
}
.minoritaria__carrusel-pista {
display: flex;
gap: var(--space-8);
width: max-content;
will-change: transform;
backface-visibility: hidden;
animation: minoritariaCarrusel 40s linear infinite;
}
/* Versión estática: sin animación, logos centrados (ej. start-ups) */
.minoritaria__carrusel--static {
overflow: visible;
}
/* A partir de 481px solo se muestran los 2 primeros logos (los duplicados son para el carrusel móvil) */
@media (min-width: 481px) {
.minoritaria__carrusel--static .minoritaria__carrusel-pista .minoritaria__carrusel-item:nth-child(n+3) {
display: none;
}
}
.minoritaria__carrusel--static .minoritaria__carrusel-pista {
animation: none;
will-change: auto;
margin: 0 auto;
justify-content: center;
width: 100%;
}
.minoritaria__carrusel--static .minoritaria__carrusel-item {
width: 12rem;
height: 5rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.minoritaria__carrusel--static .minoritaria__carrusel-img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
.minoritaria__carrusel-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 12rem;
height: 6rem;
padding: 0 var(--space-4);
}
.minoritaria__carrusel-img {
display: block;
max-height: 4.5rem;
width: auto;
max-width: 100%;
object-fit: contain;
}
@keyframes minoritariaCarrusel {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}
@media (min-width: 641px) {
.minoritaria__carrusel-item {
width: 14rem;
height: 7rem;
}
.minoritaria__carrusel-img {
max-height: 5rem;
}
.minoritaria__carrusel--static .minoritaria__carrusel-item {
width: 16rem;
height: 7rem;
}
}
/* Start-ups: carrusel automático (como el de minoritaria) de 480px hacia abajo */
@media (max-width: 480px) {
.minoritaria__carrusel--static {
overflow: hidden;
}
.minoritaria__carrusel--static .minoritaria__carrusel-pista {
animation: minoritariaCarrusel 13s linear infinite;
will-change: transform;
width: max-content;
margin: 0;
justify-content: flex-start;
}
.minoritaria__carrusel--static .minoritaria__carrusel-item {
width: min(14rem, 78vw);
min-width: min(14rem, 78vw);
height: 5.5rem;
flex-shrink: 0;
}
.minoritaria__carrusel--static .minoritaria__carrusel-img {
width: 100%;
height: 100%;
max-height: 100%;
}
}
.minoritaria__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.minoritaria__icono {
width: 2.75rem;
height: 2.75rem;
color: var(--color-primary);
flex-shrink: 0;
}
.minoritaria__icono--sm {
width: 2rem;
height: 2rem;
}
.minoritaria__texto {
margin: 0;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.minoritaria__texto--titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
color: var(--color-neutral-800);
}
.minoritaria__sectores-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-left: var(--space-4);
border-left: 3px solid var(--color-neutral-300);
}
.minoritaria__sector {
display: flex;
align-items: center;
gap: var(--space-3);
}
.minoritaria__logos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
@media (min-width: 641px) {
.minoritaria__logos {
grid-template-columns: repeat(3, 1fr);
}
}
.minoritaria__logo {
display: flex;
align-items: center;
justify-content: center;
min-height: 6rem;
padding: var(--space-5);
background: var(--color-negative);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius);
}
.minoritaria__logo-img {
display: block;
max-height: 4rem;
width: auto;
max-width: 100%;
object-fit: contain;
}
@media (min-width: 641px) {
.minoritaria__logo {
min-height: 7rem;
padding: var(--space-6);
}
.minoritaria__logo-img {
max-height: 5rem;
}
}
.minoritaria__logo:nth-child(6) {
min-height: 7rem;
}
.minoritaria__logo:nth-child(6) .minoritaria__logo-img {
max-height: 6rem;
}
@media (min-width: 641px) {
.minoritaria__logo:nth-child(6) {
min-height: 8rem;
}
.minoritaria__logo:nth-child(6) .minoritaria__logo-img {
max-height: 7rem;
}
}
.minoritaria__logo-nombre {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
color: var(--color-neutral-700);
}
/* Sección 03: Inversión en start-ups (timeline + grid como sección 02) */
.startups__timeline {
position: relative;
margin-bottom: var(--space-7);
padding: var(--space-5) var(--home-spacing-inner);
background: var(--color-primary-light);
border-radius: var(--radius);
}
.startups__timeline-img {
display: block;
width: 100%;
height: auto;
}
.startups__timeline-line {
position: absolute;
left: var(--space-5);
right: var(--space-5);
top: 5rem;
height: 2px;
background: var(--color-primary);
z-index: 0;
}
/* Highlight: justo después de Seed (30%) hasta punto medio Growth–Expansion (80%) */
.startups__timeline-highlight {
position: absolute;
left: 31%;
right: 20%;
top: 4rem;
bottom: 0.5rem;
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--color-primary);
border-radius: 999px;
z-index: 0;
}
.startups__timeline-list {
display: flex;
justify-content: space-between;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 1;
}
.startups__timeline-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
max-width: 8rem;
}
.startups__timeline-label {
display: block;
font-family: var(--font-family-subtitle);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
color: var(--color-neutral-600);
text-align: center;
margin-bottom: var(--space-2);
}
.startups__timeline-item--activo .startups__timeline-label {
color: var(--color-secondary);
font-weight: var(--font-weight-semibold);
}
.startups__timeline-marker {
display: flex;
flex-direction: column;
align-items: center;
height: 2.5rem;
}
.startups__timeline-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--color-primary);
flex-shrink: 0;
}
.startups__timeline-vline {
width: 1px;
flex: 1;
min-height: 0.5rem;
background: var(--color-primary);
}
.startups__timeline-node {
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--color-negative);
border: 2px solid var(--color-primary);
box-sizing: border-box;
flex-shrink: 0;
margin-top: -1px;
}
@media (min-width: 641px) {
.startups__timeline-item {
max-width: none;
}
.startups__timeline-line {
top: 5.25rem;
}
.startups__timeline-highlight {
top: 4.5rem;
}
.startups__timeline-marker {
height: 2.75rem;
}
.startups__timeline-node {
width: 1.25rem;
height: 1.25rem;
border-width: 2px;
}
}
.startups__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
.startups__grid .bloque-linea__subseccion {
margin-bottom: 0;
}
.startups__card-unificada {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.startups__card-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.startups__card-item .bloque-linea__subseccion {
margin-bottom: 0;
}
.startups__card-item .bloque-linea__subseccion-texto {
margin-bottom: 0;
}
/* Especificidad mayor que .seccion p (startups__note es un ) */
.inversiones-en-companias .startups__note {
margin: var(--space-2) 0 0;
font-size: var(--font-size-sm);
color: var(--color-neutral-600);
}
.startups__logos-wrap {
grid-column: 1 / -1;
}
@media (min-width: 641px) {
.startups__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
}
}
.startups__logos {
grid-template-columns: repeat(2, 1fr);
width: max-content;
margin-left: auto;
margin-right: auto;
}
.startups__logos .minoritaria__logo-img {
height: 4rem;
width: auto;
max-width: 100%;
object-fit: contain;
}
@media (min-width: 641px) {
.startups__logos .minoritaria__logo-img {
height: 5rem;
}
}
.startups__logo-texto {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
color: var(--color-neutral-700);
}
.quienes-somos .seccion {
margin-bottom: 0;
}
.inversiones-en-companias .lineas-inversion,
.inversiones-en-companias .bloque-linea {
margin-bottom: 0;
}
.inversiones-inmobiliarias .inmobiliarias-contenido {
margin-bottom: 0;
}
/* Nuestro grupo: una sola sección (intro + áreas de negocio) */
.qs-grupo {
background: var(--color-primary-light);
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
/* Sincronizar animación con el hero: mismo inicio (0.4s) y duración (1.5s) en todos los tamaños */
.quienes-somos .qs-grupo .scroll-reveal__content>* {
animation: scrollRevealIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.quienes-somos .qs-grupo .scroll-reveal__content>*:nth-child(1) {
animation-delay: 0.4s;
}
.quienes-somos .qs-grupo .scroll-reveal__content>*:nth-child(2) {
animation-delay: 0.55s;
}
.quienes-somos .qs-grupo .scroll-reveal__content>*:nth-child(3) {
animation-delay: 0.7s;
}
.quienes-somos .qs-grupo .scroll-reveal__content>*:nth-child(4) {
animation-delay: 0.85s;
}
.quienes-somos .qs-grupo .scroll-reveal__content>*:nth-child(5) {
animation-delay: 1s;
}
.quienes-somos .qs-grupo .scroll-reveal__content>*:nth-child(n+6) {
animation-delay: 1.15s;
}
.qs-grupo__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.qs-grupo__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(var(--font-size-2xl), 3.5vw, 2.75rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-secondary);
margin: 0 0 var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 3px solid var(--color-primary);
display: inline-block;
}
.qs-grupo__texto {
max-width: 52ch;
margin-bottom: var(--space-8);
}
.qs-grupo__parrafo {
margin: 0 0 var(--space-5);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.qs-grupo__parrafo:last-child {
margin-bottom: 0;
}
.qs-areas {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(var(--space-7), 8vw, var(--space-8));
align-items: stretch;
}
/* Mismo estilo base que cards de inversiones en compañías (secciones 01, 02, 03) */
.qs-area {
background: var(--color-negative);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius);
padding: var(--space-6);
min-height: 10rem;
display: flex;
flex-direction: column;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* Hover acentuado: son enlaces a Aciturri Aerostructures y Aeroengines */
.qs-area:hover {
border-color: var(--color-primary);
box-shadow: 0 8px 24px rgba(107, 187, 174, 0.2);
transform: translateY(-4px);
}
.qs-area__link {
position: relative;
display: inline-block;
align-self: flex-start;
margin-top: var(--space-4);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.qs-area__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: var(--color-primary);
transition: width 0.25s ease;
}
.qs-area__link:hover::after {
width: 100%;
}
.qs-area__link:hover {
color: var(--color-primary-hover);
}
.qs-area__link:visited {
color: var(--color-primary);
}
.qs-area__logo {
margin-bottom: var(--space-5);
flex-shrink: 0;
}
.qs-area__logo-img {
display: block;
width: 100%;
max-width: 18rem;
height: auto;
object-fit: contain;
}
.qs-area__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(var(--font-size-xl), 2.5vw, var(--font-size-2xl));
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-secondary);
margin: 0 0 var(--space-4);
}
.qs-area__desc {
margin: 0;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
flex: 1;
}
/* ========== GINÉS CLEMENTE ========== */
.gc {
background: var(--color-primary-light);
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.gc__inner {
max-width: var(--container-max);
margin: 0 auto;
}
/* Bloque principal: foto izquierda (altura completa) + texto y fundaciones derecha */
.gc__main {
display: grid;
grid-template-columns: minmax(280px, 0.45fr) minmax(0, 1fr);
gap: clamp(var(--space-6), 5vw, 4rem);
align-items: stretch;
margin-bottom: var(--space-8);
}
.gc__foto {
min-width: 0;
min-height: 20rem;
}
.gc__foto-img {
display: block;
width: 100%;
height: 100%;
min-height: 100%;
object-fit: cover;
object-position: center top;
border-radius: var(--radius);
}
.gc__content {
display: flex;
flex-direction: column;
gap: var(--space-6);
min-width: 0;
}
.gc__intro {
min-width: 0;
}
.gc__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(1.75rem, 4.5vw, 3rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-secondary);
margin: 0 0 var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 3px solid var(--color-primary);
display: inline-block;
}
.gc p.gc__lead {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: clamp(var(--font-size-xl), 2vw, 1.5rem);
color: var(--color-secondary);
margin: 0 0 var(--space-6);
line-height: var(--line-height-normal);
max-width: none;
}
.gc__texto {
max-width: 65ch;
}
.gc__texto .gc__parrafo {
margin: 0 0 var(--space-4);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.gc__texto .gc__parrafo:last-child {
margin-bottom: 0;
}
/* Fundaciones: tarjetas en grid dentro de la columna derecha */
.gc__fundaciones {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
flex: 0 0 auto;
}
.gc-fundacion {
background: var(--color-negative);
border-radius: var(--radius);
padding: var(--space-6);
display: flex;
flex-direction: column;
border: 1px solid var(--color-neutral-200);
box-shadow: 0 2px 12px rgba(68, 84, 106, 0.06);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gc-fundacion:hover {
border-color: var(--color-neutral-300);
box-shadow: 0 4px 20px rgba(68, 84, 106, 0.1);
}
.gc-fundacion__logo {
margin-bottom: var(--space-4);
flex-shrink: 0;
}
.gc-fundacion__logo-img {
display: block;
width: 100%;
max-width: 10rem;
height: auto;
object-fit: contain;
}
.gc-fundacion__nombre {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(var(--font-size-xl), 2vw, var(--font-size-2xl));
line-height: var(--line-height-tight);
color: var(--color-secondary);
margin: 0 0 var(--space-3);
}
.gc-fundacion__desc {
margin: 0;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
/* Instituciones: bloque con fondo blanco y lista en columnas */
.gc__instituciones {
background: var(--color-negative);
border-radius: var(--radius);
padding: var(--space-7);
box-shadow: 0 2px 12px rgba(68, 84, 106, 0.06);
}
.gc__subtitulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(var(--font-size-xl), 2vw, var(--font-size-2xl));
color: var(--color-secondary);
margin: 0 0 var(--space-5);
}
.gc__lista {
margin: 0;
padding: 0;
list-style: none;
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2) var(--space-8);
}
.gc__lista li {
position: relative;
padding-left: 1.25em;
}
.gc__lista li::before {
content: "•";
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: var(--font-weight-bold);
}
/* ========== TRES DATOS A DESTACAR (QUIÉNES SOMOS) ========== */
.seccion.destacados {
padding-top: var(--home-spacing-block);
background: var(--color-negative);
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.destacados__inner {
width: 100%;
margin: 0;
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
align-items: start;
}
.destacado {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-5);
}
.destacado__circulo {
width: 9rem;
height: 9rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-negative);
background: var(--color-primary);
}
.destacado__svg {
width: 5.5rem;
height: 5.5rem;
display: block;
}
.seccion.destacados .destacado__texto {
font-family: var(--font-family-subtitle);
font-size: var(--font-size-2xl);
line-height: var(--line-height-snug);
color: var(--color-secondary);
margin: 0;
max-width: 28ch;
}
@media (max-width: 768px) {
.destacados__inner {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.seccion.destacados .destacado__texto {
max-width: none;
}
}
/* ========== EQUIPO (QUIÉNES SOMOS) ========== */
.seccion.equipo {
background: var(--color-negative);
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.seccion.equipo .equipo__inner {
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.seccion.equipo .equipo__header {
text-align: center;
margin-bottom: var(--space-8);
max-width: 52ch;
margin-left: auto;
margin-right: auto;
}
/* Especificidad mayor que .seccion h2 para que no gane color/fuente global */
.seccion.equipo .equipo__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(var(--font-size-2xl), 3vw, 2.5rem);
line-height: normal;
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-neutral-300);
display: inline-block;
}
.seccion.equipo .equipo__intro {
margin: 0;
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.seccion.equipo .equipo__bloque {
margin-bottom: var(--space-8);
}
.seccion.equipo .equipo__bloque:last-child {
margin-bottom: 0;
}
.seccion.equipo .equipo__banda {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-xl);
line-height: normal;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-negative);
text-align: center;
margin: 0 0 var(--space-6);
padding: var(--space-4) var(--home-spacing-inner);
}
.seccion.equipo .equipo__banda--clara {
background: var(--color-neutral-400);
}
.seccion.equipo .equipo__banda--oscura {
background: var(--color-secondary);
}
.seccion.equipo .equipo__banda--teal {
background: var(--color-primary);
}
.seccion.equipo .equipo__grid {
display: grid;
gap: var(--space-6);
align-items: start;
}
.seccion.equipo .equipo__grid--5 {
grid-template-columns: repeat(5, 1fr);
}
.seccion.equipo .equipo__grid--3 {
grid-template-columns: repeat(3, 1fr);
}
/* Fundadores: 2 columnas centradas (mismo diseño que el resto del equipo) */
.seccion.equipo .equipo__bloque--fundadores .equipo__grid--fundadores {
grid-template-columns: repeat(2, 1fr);
max-width: 42rem;
margin-left: auto;
margin-right: auto;
}
.seccion.equipo .equipo__grid--externos {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
.seccion.equipo .equipo__grid--comite {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
.seccion.equipo .equipo__card {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.seccion.equipo .equipo__card--teal {
background: var(--color-primary);
border-radius: var(--radius);
padding: var(--space-6);
color: var(--color-negative);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
align-items: start;
}
.seccion.equipo .equipo__card-teal-content {
min-width: 0;
}
.seccion.equipo .equipo__nombre {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-2xl);
line-height: var(--line-height-tight);
color: var(--color-neutral-900);
margin: 0 0 var(--space-2);
}
.seccion.equipo .equipo__nombre--blanco {
color: var(--color-negative);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-3xl);
text-transform: uppercase;
}
/* Especificidad mayor que .seccion p para cargo (es un
) */
.seccion.equipo .equipo__cargo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-xl);
color: var(--color-primary);
margin: 0 0 var(--space-3);
line-height: var(--line-height-tight);
}
.seccion.equipo .equipo__cargo--blanco {
font-weight: var(--font-weight-normal);
color: var(--color-negative);
opacity: 0.95;
}
.seccion.equipo .equipo__bloque--otros .equipo__cargo {
color: var(--color-secondary);
}
.seccion.equipo .equipo__bloque--externos .equipo__cargo {
color: var(--color-neutral-600);
}
.seccion.equipo .equipo__lista {
margin: 0;
padding: 0;
list-style: none;
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
}
.seccion.equipo .equipo__lista li {
position: relative;
padding-left: 1em;
}
.seccion.equipo .equipo__lista li::before {
content: "•";
position: absolute;
left: 0;
color: var(--color-neutral-600);
}
@media (max-width: 1024px) {
.seccion.equipo .equipo__grid--5 {
grid-template-columns: repeat(3, 1fr);
}
.seccion.equipo .equipo__grid--comite {
grid-template-columns: repeat(2, 1fr);
}
/* equipo__grid--externos mantiene 3 columnas como grid--3; a 1 columna solo en 768 */
/* Hero página (Quiénes somos, Inversiones en compañías, Inversiones inmobiliarias): título que se adapta para no cortarse */
.quienes-somos .hero--pagina .hero__title,
.inversiones-en-companias .hero--pagina .hero__title,
.inversiones-inmobiliarias .hero--pagina .hero__title {
font-size: clamp(1.5rem, 4vw, 2.25rem);
white-space: normal;
}
/* Timeline (quienes somos): gap más estrecho, más espacio para la lista, título y desc algo más pequeños */
.timeline .timeline__inner {
grid-template-columns: minmax(0, 10rem) minmax(38rem, 1fr);
gap: var(--space-5);
}
.timeline .timeline__header h2.timeline__titulo {
font-size: clamp(2rem, 5vw, 3rem);
}
.timeline p.timeline__desc {
font-size: clamp(var(--font-size-lg), 2vw, 1.375rem);
}
/* Menú hamburguesa desde 1024px */
.site-header nav {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0 var(--home-spacing-inner);
}
.nav__toggle {
display: flex;
position: relative;
z-index: 101;
}
.nav__overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}
.nav.nav--open .nav__overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav__menu {
position: fixed;
top: 0;
right: 0;
width: 85%;
max-width: 28rem;
height: 100vh;
z-index: 100;
transform: translateX(100%);
transition: transform 0.3s ease;
margin: 0;
padding: calc(4rem + var(--space-6)) var(--home-spacing-inner) var(--space-5);
overflow-y: auto;
pointer-events: none;
display: block;
box-sizing: border-box;
}
.site-header:not(.is-scrolled) .nav.nav--open .nav__menu {
background: var(--color-secondary);
}
.site-header.is-scrolled .nav.nav--open .nav__menu {
background: var(--color-negative);
}
.nav.nav--open .nav__menu {
transform: translateX(0);
pointer-events: auto;
}
.nav__menu-logo {
display: block;
position: relative;
height: 2rem;
width: 7.43rem;
margin-bottom: var(--space-5);
text-decoration: none;
flex-shrink: 0;
}
.nav__menu .nav__menu-logo .logo__img {
position: absolute;
left: 0;
top: 0;
display: block;
height: 2rem;
width: 7.43rem;
object-fit: contain;
object-position: left top;
transition: opacity 0.25s ease;
}
.nav__menu .nav__menu-logo .logo__img--positivo {
opacity: 0;
}
.site-header:not(.is-scrolled) .nav__menu .nav__menu-logo .logo__img--negativo {
opacity: 1;
}
.site-header:not(.is-scrolled) .nav__menu .nav__menu-logo .logo__img--positivo {
opacity: 0;
}
.site-header.is-scrolled .nav__menu .nav__menu-logo .logo__img--negativo {
opacity: 0;
}
.site-header.is-scrolled .nav__menu .nav__menu-logo .logo__img--positivo {
opacity: 1;
}
.nav.nav--open .nav__menu ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.nav.nav--open .nav__menu li {
border-bottom: 1px solid var(--color-neutral-200);
}
.site-header:not(.is-scrolled) .nav.nav--open .nav__menu li {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.site-header:not(.is-scrolled) .nav.nav--open .nav__menu a,
.site-header:not(.is-scrolled) .nav.nav--open .nav__menu a:visited {
color: var(--color-negative);
}
.site-header:not(.is-scrolled) .nav.nav--open .nav__menu a:hover {
color: var(--color-primary-light);
}
.site-header:not(.is-scrolled) .nav.nav--open .nav__menu a[aria-current="page"] {
color: var(--color-primary);
}
.nav.nav--open .nav__menu a {
display: block;
padding: var(--space-4);
white-space: nowrap;
}
.nav.nav--open .nav__toggle-icon {
background: transparent;
}
.nav.nav--open .nav__toggle-icon::before {
top: 0;
transform: rotate(45deg);
}
.nav.nav--open .nav__toggle-icon::after {
top: 0;
transform: rotate(-45deg);
}
}
@media (max-width: 768px) {
.seccion.equipo .equipo__grid--5,
.seccion.equipo .equipo__grid--3,
.seccion.equipo .equipo__grid--externos,
.seccion.equipo .equipo__grid--comite {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.seccion.equipo .equipo__bloque--fundadores .equipo__grid--fundadores {
grid-template-columns: 1fr;
max-width: none;
}
.seccion.equipo .equipo__banda {
padding: var(--space-3) var(--home-spacing-inner);
font-size: var(--font-size-base);
}
}
/* ========== LÍNEA TEMPORAL ========== */
.timeline {
background: var(--color-negative);
padding-top: var(--home-spacing-block);
padding-bottom: var(--home-spacing-block);
}
.timeline__inner {
max-width: 80rem;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
gap: clamp(var(--space-8), 8vw, 6rem);
align-items: start;
}
.timeline__header {
position: sticky;
top: calc(4rem + var(--space-6));
padding-top: 18vh;
}
.seccion h2.timeline__titulo {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-semibold);
font-size: clamp(3rem, 8vw, 5rem);
line-height: var(--line-height-tight);
text-transform: uppercase;
color: var(--color-neutral-900);
margin: 0;
display: inline-block;
position: relative;
}
.timeline__titulo::after {
content: "";
position: absolute;
left: 0;
top: 100%;
margin-top: var(--space-2);
width: 85%;
height: 2px;
background: var(--color-primary);
}
.timeline__body {
position: relative;
min-width: 0;
margin-top: 500px;
}
.timeline__spine {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: var(--color-primary);
transform: translateX(-50%);
}
.timeline__list {
list-style: none;
margin: 0;
padding: 0;
}
.timeline__item {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: center;
min-height: 45vh;
padding: clamp(var(--space-6), 6vh, var(--space-8)) 0;
opacity: 0;
transform: translateY(1.5rem);
transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline__item.is-visible {
opacity: 1;
transform: translateY(0);
}
.timeline__item:first-child {
padding-top: 0;
}
/* Nodo: un solo círculo hueco (borde teal, interior blanco), más grande */
.timeline__item::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 1.25rem;
height: 1.25rem;
border: 3px solid var(--color-primary);
border-radius: 50%;
background: var(--color-negative);
box-sizing: border-box;
z-index: 2;
}
.timeline__item::after {
content: none;
}
/* Línea horizontal: alternando izquierda / derecha desde el nodo */
.timeline__connector {
position: absolute;
top: 50%;
height: 3px;
background: var(--color-primary);
width: 2.5rem;
transform: translateY(-50%);
z-index: 1;
}
/* Ítems pares: línea hacia la derecha */
.timeline__item--right .timeline__connector {
left: 50%;
margin-left: 0.5rem;
}
.timeline__item--right .timeline__dot {
right: 0;
left: auto;
transform: translate(50%, -50%);
}
/* Ítems impares: línea hacia la izquierda */
.timeline__item--left .timeline__connector {
right: 50%;
margin-right: 0.5rem;
left: auto;
}
.timeline__item--left .timeline__dot {
left: 0;
right: auto;
transform: translate(-50%, -50%);
}
.timeline__dot {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
background: var(--color-primary);
border-radius: 50%;
}
.timeline__item--left .timeline__content {
grid-column: 1;
text-align: right;
padding-right: calc(2.5rem + 0.5rem + var(--space-4));
}
.timeline__item--right .timeline__content {
grid-column: 3;
text-align: left;
padding-left: calc(2.5rem + 0.5rem + var(--space-4));
}
.timeline__year {
display: block;
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-bold);
font-size: clamp(2rem, 4vw, 3.25rem);
color: var(--color-secondary);
margin: 0 0 var(--space-2);
}
p.timeline__desc {
margin: 0;
font-size: clamp(var(--font-size-xl), 2.5vw, 1.75rem);
line-height: var(--line-height-relaxed);
color: var(--color-neutral-700);
font-weight: var(--font-weight-normal);
}
@media (max-width: 768px) {
.home .hero__bg-wrap {
right: calc(-1 * var(--home-spacing-inner));
width: min(55%, 320px);
}
.home .hero__bg-svg {
object-position: right center;
}
/* Un inversor con raíces industriales: una columna en tablet */
.seccion--mision {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.mision__inner {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.mision__grafico {
padding: var(--space-4);
}
.mision__svg {
max-width: 12rem;
}
/* Estrategias de inversión: una columna en tablet */
.seccion--estrategia {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.estrategia__bloque-header {
margin-bottom: var(--space-6);
}
.forma-invertir__titulo {
white-space: normal;
}
/* Nuestra forma de invertir: una columna en tablet (como mobile) */
.forma-invertir__lista {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.forma-invertir__lista .forma-invertir__card:nth-child(1),
.forma-invertir__lista .forma-invertir__card:nth-child(2),
.forma-invertir__lista .forma-invertir__card:nth-child(3),
.forma-invertir__lista .forma-invertir__card:nth-child(4),
.forma-invertir__lista .forma-invertir__card:nth-child(5) {
grid-column: auto;
}
.estrategia__bloque-titulo {
white-space: normal;
}
.seccion--estrategia .estrategia__grid {
grid-template-columns: 1fr;
gap: var(--space-6);
padding: 0;
}
.estrategia__col {
padding: var(--space-6);
}
.estrategia__icono {
width: 4rem;
}
.qs-areas {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.qs-grupo {
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.gc {
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.gc__main {
grid-template-columns: 1fr;
align-items: start;
gap: var(--space-6);
}
.gc__foto {
min-height: 0;
order: -1;
max-width: 20rem;
}
.gc__foto-img {
height: auto;
min-height: 0;
aspect-ratio: 4 / 5;
}
.gc__fundaciones {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.gc__lista {
grid-template-columns: 1fr;
}
.quienes-somos .hero--pagina {
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.quienes-somos .hero--pagina .hero__content {
max-width: 100%;
}
.inversiones-en-companias .hero--pagina,
.inversiones-inmobiliarias .hero--pagina {
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.inversiones-en-companias .hero--pagina .hero__content,
.inversiones-inmobiliarias .hero--pagina .hero__content {
max-width: 100%;
}
.inversiones-en-companias .lineas-inversion {
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.inversiones-en-companias .bloque-linea {
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.quienes-somos .hero--pagina .hero__title,
.inversiones-en-companias .hero--pagina .hero__title,
.inversiones-inmobiliarias .hero--pagina .hero__title {
font-size: clamp(1.25rem, 5vw, 1.9rem);
}
/* Inversiones inmobiliarias: texto de las cards un poco más pequeño en mobile */
.inversiones-inmobiliarias .inmobiliarias__card-titulo {
font-size: 1.2rem;
}
.inversiones-inmobiliarias .inmobiliarias__card-desc {
font-size: var(--font-size-base);
margin-top: var(--space-4);
}
.inversiones-inmobiliarias .inmobiliarias__card .bloque-linea__card-criterio-texto {
font-size: var(--font-size-base);
}
.timeline .timeline__inner {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.timeline__body {
margin-top: var(--space-8);
}
.timeline__header {
position: static;
padding-top: 0;
}
.timeline__titulo {
margin-bottom: var(--space-6);
}
.timeline__spine {
left: 0;
transform: none;
}
.timeline__item {
grid-template-columns: auto 1fr;
gap: 0;
padding-left: 0;
}
.timeline__item::before,
.timeline__item::after {
left: 0;
transform: translate(-50%, -50%);
}
.timeline__item--left .timeline__content,
.timeline__item--right .timeline__content {
grid-column: 2;
text-align: left;
padding-left: calc(2rem + 0.5rem + var(--space-3));
padding-right: 0;
}
.timeline__item--left .timeline__connector,
.timeline__item--right .timeline__connector {
left: 0;
right: auto;
margin-left: 0;
margin-right: 0;
}
.timeline__item--left .timeline__dot,
.timeline__item--right .timeline__dot {
right: 0;
left: auto;
transform: translate(50%, -50%);
}
/* Timeline: en 768 la maquetación es distinta, mismo tamaño que desktop */
.timeline p.timeline__desc {
font-size: clamp(var(--font-size-xl), 2.5vw, 1.75rem);
}
}
@media (max-width: 640px) {
main {
padding: var(--space-6) var(--home-spacing-inner);
padding-bottom: 0;
}
.hero {
padding: var(--space-7) var(--home-spacing-inner);
}
.hero h1 {
font-size: var(--font-size-2xl);
}
.seccion--alt {
margin-left: calc(-1 * var(--home-spacing-inner));
margin-right: calc(-1 * var(--home-spacing-inner));
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.home .seccion--full {
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.seccion--mision {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.mision__inner {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.mision__grafico {
padding: var(--space-4);
}
.mision__svg {
max-width: 12rem;
}
/* Home responsive */
.home main {
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.home .hero--home {
padding-top: calc(4rem + var(--space-6));
padding-bottom: var(--space-8);
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.home .hero__title {
font-size: clamp(1.75rem, 6vw, 2.25rem);
}
.home .hero__lead {
font-size: var(--font-size-sm);
}
.home .hero__bg-wrap {
right: calc(-1 * var(--home-spacing-inner));
}
.home .hero__bg-svg {
object-position: right center;
}
.seccion--estrategia {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.estrategia__bloque-header {
margin-bottom: var(--space-6);
}
.forma-invertir__titulo {
white-space: normal;
}
.estrategia__bloque-titulo {
white-space: normal;
}
.seccion--estrategia .estrategia__grid {
grid-template-columns: 1fr;
gap: var(--space-6);
padding: 0;
}
.estrategia__col {
padding: var(--space-6);
}
.estrategia__icono {
width: 4rem;
}
.seccion--fundacion {
min-height: 360px;
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
.fundacion__svg {
width: 5rem;
}
.contacto__layout {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.contacto__foto {
order: -1;
}
.contacto__titulo {
margin-bottom: var(--space-2);
}
.contacto__lead {
margin-bottom: var(--space-4);
}
.seccion.seccion--contacto {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
margin-bottom: 0;
}
.seccion--alt {
margin-left: calc(-1 * var(--home-spacing-inner));
margin-right: calc(-1 * var(--home-spacing-inner));
padding-left: var(--home-spacing-inner);
padding-right: var(--home-spacing-inner);
}
.footer__inner {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.footer__brand {
justify-content: flex-start;
gap: var(--space-3);
}
.footer__logo-img {
height: 1.75rem;
}
.site-footer,
footer {
padding: var(--space-6) var(--home-spacing-inner);
}
}