/* ========================================================================== GPE Network — Layout: contenedores, header, hero, secciones y footer ========================================================================== */ /* --- Contenedores -------------------------------------------------------- */ .gpe-wrap { width: 100%; max-width: var(--gpe-maxw); margin-inline: auto; padding-inline: var(--gpe-gutter); } .gpe-wrap--narrow { max-width: 900px; } .gpe-wrap--wide { max-width: 1440px; } /* --- Secciones ----------------------------------------------------------- */ .gpe-section { padding-block: var(--gpe-section-y); position: relative; } /* Deja aire bajo el header fijo al saltar a un ancla. scroll-padding en no basta: scrollIntoView() solo respeta scroll-margin del destino. */ .gpe-section[id], .gpe-hero[id], [id][data-anchor] { scroll-margin-top: 6rem; } .gpe-section--tight { padding-block: calc(var(--gpe-section-y) * 0.6); } .gpe-section--paper { background: var(--gpe-paper); } .gpe-section--line { border-top: 1px solid var(--gpe-line); } /* Encabezado de sección: cintillo + título + descripción */ .gpe-section__head { display: flex; flex-direction: column; gap: var(--gpe-s3); margin-bottom: var(--gpe-s7); max-width: 62ch; } .gpe-section__head--split { max-width: none; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--gpe-s5); flex-wrap: wrap; } .gpe-section__title { margin: 0; } .gpe-section__lead { margin: 0; font-size: var(--gpe-fs-md); color: var(--gpe-text-2); max-width: 60ch; } /* Cintillo / eyebrow */ .gpe-eyebrow { display: flex; align-items: flex-start; gap: var(--gpe-s3); margin: 0; max-width: 52ch; font-family: var(--gpe-font-sans); font-size: var(--gpe-fs-xs); font-weight: 600; letter-spacing: var(--gpe-track-wide); line-height: 1.5; text-transform: uppercase; text-wrap: balance; color: var(--gpe-muted); } .gpe-eyebrow::before { content: ""; width: 1.75rem; height: 1px; margin-top: 0.72em; background: var(--gpe-wine); flex: none; } .gpe-eyebrow--emerald::before { background: var(--gpe-emerald); } .gpe-eyebrow--plain::before { display: none; } /* --- Rejillas ------------------------------------------------------------ */ .gpe-grid { display: grid; gap: var(--gpe-s6); } .gpe-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gpe-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gpe-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Rejilla autoajustable: la que usan las tarjetas de proyecto y de equipo. --auto → retratos del equipo (4 columnas en escritorio) --auto-lg → tarjetas de proyecto (2 columnas: los títulos son largos) */ .gpe-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .gpe-grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); } @media (max-width: 900px) { .gpe-grid--3, .gpe-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .gpe-grid--2, .gpe-grid--3, .gpe-grid--4 { grid-template-columns: minmax(0, 1fr); } } /* Split editorial: texto + medio */ .gpe-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .gpe-split--text-first > :first-child { order: 0; } @media (max-width: 860px) { .gpe-split { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== HEADER ========================================================================== */ .gpe-header { position: sticky; top: 0; z-index: var(--gpe-z-header); background: color-mix(in srgb, var(--gpe-snow) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--gpe-dur) var(--gpe-ease), background var(--gpe-dur) var(--gpe-ease), box-shadow var(--gpe-dur) var(--gpe-ease); } /* .is-stuck la añade app.js al hacer scroll */ .gpe-header.is-stuck { border-bottom-color: var(--gpe-line); box-shadow: var(--gpe-shadow-sm); } .gpe-header__inner { display: flex; align-items: center; gap: var(--gpe-s5); min-height: 72px; } @media (min-width: 900px) { .gpe-header__inner { min-height: 84px; } } /* Barra de progreso de lectura */ .gpe-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gpe-wine), var(--gpe-emerald)); will-change: transform; } /* Logotipo */ .gpe-logo { display: inline-flex; align-items: center; gap: var(--gpe-s3); color: var(--gpe-carbon); margin-right: auto; } .gpe-logo:hover { color: var(--gpe-carbon); text-decoration: none; } .gpe-logo__mark { width: 38px; height: 38px; flex: none; color: var(--gpe-carbon); } .gpe-logo__text { display: flex; flex-direction: column; line-height: 1.05; } .gpe-logo__name { font-family: var(--gpe-font-serif); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; } .gpe-logo__name span { font-family: var(--gpe-font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: var(--gpe-track-wide); color: var(--gpe-text-2); margin-left: 0.35em; vertical-align: 0.28em; } .gpe-logo__tag { font-size: 0.66rem; letter-spacing: 0.04em; color: var(--gpe-muted); } @media (max-width: 560px) { .gpe-logo__tag { display: none; } } /* Navegación */ .gpe-nav { display: flex; align-items: center; gap: var(--gpe-s2); } .gpe-nav ul { display: flex; align-items: center; gap: var(--gpe-s1); list-style: none; margin: 0; padding: 0; } .gpe-nav li { margin: 0; } .gpe-nav a { position: relative; display: block; padding: var(--gpe-s2) var(--gpe-s3); font-size: 0.9rem; font-weight: 500; color: var(--gpe-text-2); border-radius: var(--gpe-radius-sm); } .gpe-nav a::after { content: ""; position: absolute; left: var(--gpe-s3); right: var(--gpe-s3); bottom: 2px; height: 1.5px; background: var(--gpe-wine); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--gpe-dur) var(--gpe-ease-out); } .gpe-nav a:hover { color: var(--gpe-carbon); text-decoration: none; } .gpe-nav a:hover::after, .gpe-nav .current-menu-item > a::after, .gpe-nav .current_page_item > a::after, .gpe-nav a.is-active::after { transform: scaleX(1); } .gpe-nav .current-menu-item > a, .gpe-nav .current_page_item > a, .gpe-nav a.is-active { color: var(--gpe-carbon); } @media (max-width: 980px) { .gpe-nav { display: none; } .gpe-nav.is-open { display: block; position: fixed; inset: 72px 0 0 0; z-index: var(--gpe-z-menu); background: var(--gpe-snow); padding: var(--gpe-s6) var(--gpe-gutter); overflow-y: auto; animation: gpe-fade-in var(--gpe-dur) var(--gpe-ease-out); } .gpe-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; } .gpe-nav.is-open a { padding: var(--gpe-s4) 0; font-family: var(--gpe-font-serif); font-size: var(--gpe-fs-lg); color: var(--gpe-carbon); border-bottom: 1px solid var(--gpe-line); } .gpe-nav.is-open a::after { display: none; } } /* Botón hamburguesa */ .gpe-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--gpe-line); border-radius: var(--gpe-radius-sm); background: var(--gpe-paper); } @media (max-width: 980px) { .gpe-burger { display: inline-flex; } } .gpe-burger span { position: relative; display: block; width: 17px; height: 1.5px; background: var(--gpe-carbon); transition: background var(--gpe-dur-fast) var(--gpe-ease); } .gpe-burger span::before, .gpe-burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--gpe-carbon); transition: transform var(--gpe-dur) var(--gpe-ease-out), top var(--gpe-dur) var(--gpe-ease); } .gpe-burger span::before { top: -5.5px; } .gpe-burger span::after { top: 5.5px; } .gpe-burger[aria-expanded="true"] span { background: transparent; } .gpe-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .gpe-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } body.gpe-menu-open { overflow: hidden; } /* ========================================================================== HERO ========================================================================== */ .gpe-hero { position: relative; display: flex; align-items: center; min-height: clamp(520px, 78vh, 760px); padding-block: var(--gpe-s8); overflow: hidden; background: var(--gpe-snow); } .gpe-hero__canvas { position: absolute; inset: 0; /* Explícito a propósito: la regla `canvas { height: auto }` de base.css impediría que el lienzo se estire a todo el hero. */ width: 100%; height: 100%; max-width: none; z-index: var(--gpe-z-hero-canvas); pointer-events: none; opacity: 0; transition: opacity 1.2s var(--gpe-ease-out); } .gpe-hero__canvas.is-ready { opacity: 1; } /* Velo que garantiza contraste del texto sobre la red animada. Lineal a propósito: un radial de gran radio produce anillos de banding en pantallas de 8 bits. */ .gpe-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, var(--gpe-snow) 0%, var(--gpe-snow) 30%, rgba(251, 251, 249, 0.66) 48%, rgba(251, 251, 249, 0) 72%); } /* En escritorio el texto ocupa la mitad izquierda: dejamos la red respirar en la derecha, que es donde de verdad se ve. */ @media (min-width: 900px) { .gpe-hero::after { background: linear-gradient(90deg, var(--gpe-snow) 0%, var(--gpe-snow) 26%, rgba(251, 251, 249, 0.82) 40%, rgba(251, 251, 249, 0.35) 52%, rgba(251, 251, 249, 0) 64%); } } .gpe-hero__inner { position: relative; z-index: var(--gpe-z-content); width: 100%; } .gpe-hero__content { max-width: 60ch; } .gpe-hero__title { margin-bottom: var(--gpe-s5); } .gpe-hero__title em { font-style: normal; color: var(--gpe-wine); } .gpe-hero__lead { font-size: var(--gpe-fs-lg); line-height: 1.5; color: var(--gpe-text-2); max-width: 52ch; margin-bottom: var(--gpe-s6); } .gpe-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gpe-s4); align-items: center; } /* Instituciones bajo el hero */ .gpe-hero__insts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gpe-s3) var(--gpe-s5); margin-top: var(--gpe-s8); padding-top: var(--gpe-s5); border-top: 1px solid var(--gpe-line); font-size: var(--gpe-fs-sm); color: var(--gpe-muted); } .gpe-hero__insts strong { font-weight: 600; color: var(--gpe-text-2); } /* Indicador de scroll */ .gpe-scroll-cue { position: absolute; left: 50%; bottom: var(--gpe-s5); transform: translateX(-50%); z-index: var(--gpe-z-content); display: inline-flex; flex-direction: column; align-items: center; gap: var(--gpe-s2); font-size: var(--gpe-fs-xs); letter-spacing: var(--gpe-track-wide); text-transform: uppercase; color: var(--gpe-muted); } .gpe-scroll-cue::after { content: ""; width: 1px; height: 28px; background: linear-gradient(var(--gpe-muted), transparent); animation: gpe-cue 2.4s var(--gpe-ease) infinite; } @media (max-width: 860px) { .gpe-scroll-cue { display: none; } } /* ========================================================================== FOOTER ========================================================================== */ .gpe-footer { background: var(--gpe-carbon); color: #C9CCCF; padding-block: var(--gpe-s8) var(--gpe-s6); font-size: var(--gpe-fs-sm); } .gpe-footer a { color: #E8E9EA; text-decoration: none; } .gpe-footer a:hover { color: #fff; text-decoration: underline; } .gpe-footer h2, .gpe-footer h3 { color: #fff; } .gpe-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gpe-s7); padding-bottom: var(--gpe-s7); border-bottom: 1px solid rgba(255, 255, 255, .12); } @media (max-width: 860px) { .gpe-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--gpe-s6); } } .gpe-footer__brand .gpe-logo__mark { color: #fff; } .gpe-footer__brand .gpe-logo__name { color: #fff; } .gpe-footer__brand .gpe-logo__name span, .gpe-footer__brand .gpe-logo__tag { color: #A9AEB3; } .gpe-footer__about { margin-top: var(--gpe-s4); max-width: 44ch; color: #A9AEB3; line-height: 1.6; } .gpe-footer__title { font-family: var(--gpe-font-sans); font-size: var(--gpe-fs-xs); font-weight: 600; letter-spacing: var(--gpe-track-wide); text-transform: uppercase; color: #fff; margin-bottom: var(--gpe-s4); } .gpe-footer ul { list-style: none; margin: 0; padding: 0; } .gpe-footer li { margin-bottom: var(--gpe-s3); color: #A9AEB3; } /* Logos institucionales */ .gpe-footer__insts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gpe-s6); padding-block: var(--gpe-s6); border-bottom: 1px solid rgba(255, 255, 255, .12); } .gpe-footer__insts img { height: 46px; width: auto; opacity: .82; filter: brightness(0) invert(1); /* normaliza los logos a blanco */ transition: opacity var(--gpe-dur) var(--gpe-ease); } .gpe-footer__insts a:hover img { opacity: 1; } /* Marcador de posición mientras no lleguen los logos oficiales */ .gpe-inst-placeholder { display: inline-flex; align-items: center; height: 46px; padding-inline: var(--gpe-s4); border: 1px dashed rgba(255, 255, 255, .28); border-radius: var(--gpe-radius-sm); font-size: var(--gpe-fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: #8E949A; } .gpe-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gpe-s4); padding-top: var(--gpe-s6); font-size: var(--gpe-fs-xs); color: #8E949A; } .gpe-footer__bottom p { color: inherit; margin: 0; } /* ========================================================================== Animaciones ========================================================================== */ @keyframes gpe-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes gpe-cue { 0%, 100% { opacity: .25; transform: scaleY(.4); transform-origin: 50% 0; } 50% { opacity: 1; transform: scaleY(1); transform-origin: 50% 0; } }