/* ============================================================ GROU — site.css · componentes del sitio Importa tokens desde tokens.css. Variables runtime: --accent (acento, default Cobre Vivo) · --rhythm (densidad, default 1) ============================================================ */ :root { --accent: var(--grou-cobre-vivo); --rhythm: 1; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--grou-hueso); } [id] { scroll-margin-top: 88px; } ::selection { background: var(--grou-cobre-vivo); color: var(--grou-hueso); } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .site { background: var(--grou-hueso); color: var(--grou-casi-negro); font-family: var(--font-body); min-height: 100vh; } /* ---------- Reveals (a prueba de iframes) ---------- Contenido VISIBLE por defecto. Solo si rAF dispara se agrega .anim-on al y la animación se "arma". NO volver a opacity:0 por defecto. */ .reveal { opacity: 1; transform: none; } .anim-on .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .anim-on .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .anim-on .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Firmas estructurales ---------- */ /* Subrayado Cobre corto bajo títulos de sección */ .uline { position: relative; padding-bottom: var(--space-4); } .uline::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; background: var(--accent); } /* Hairline Cobre en el borde superior de secciones oscuras */ .topline { position: relative; } .topline::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); z-index: 2; } .dot { color: var(--accent); } /* ---------- Tipos utilitarios ---------- */ .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .eyebrow--dark { color: var(--grou-arena); } .lede { font-size: 18px; line-height: 1.5; color: var(--grou-casi-negro); max-width: 58ch; margin: 0; } .rule-accent { display: block; width: 48px; height: 2px; background: var(--accent); border: 0; margin: 0 0 var(--space-3); } .note { font-size: 12.5px; color: var(--grou-gris-calido); font-style: italic; margin: var(--space-5) 0 0; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 13px 22px; border: 0; cursor: pointer; text-decoration: none; border-radius: 0; letter-spacing: 0.01em; white-space: nowrap; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base), border-color var(--dur-base), transform var(--dur-fast); } .btn--primary { background: var(--accent); color: var(--grou-hueso); } .btn--primary:hover { background: #9A4915; } .btn--primary:active { transform: translateY(1px); } .btn--primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn--ghost-light { background: transparent; color: var(--grou-hueso); border: 1px solid rgba(247,243,238,0.45); } .btn--ghost-light:hover { border-color: var(--grou-hueso); background: rgba(247,243,238,0.06); } .btn--ghost-dark { background: transparent; color: var(--grou-casi-negro); border: 1px solid rgba(26,26,24,0.3); } .btn--ghost-dark:hover { border-color: var(--grou-casi-negro); } /* ---------- Nav ---------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 16px var(--gutter); background: rgba(247,243,238,0.94); border-bottom: 1px solid var(--rule-light); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base); } .site-nav__mark img { height: 24px; display: block; border: 0; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); } .site-nav ul a { font-size: 14px; font-weight: 500; color: var(--grou-casi-negro); border: 0; transition: color var(--dur-base); } .site-nav ul a:hover { color: var(--accent); } .site-nav ul a.is-active { color: var(--accent); font-weight: 600; } /* Sobre hero oscuro (top de página oscura): velo más oscuro que el hero + hairline */ .site-nav--dark { background: rgba(14, 26, 20, 0.55); border-bottom-color: rgba(247, 243, 238, 0.14); } .site-nav--dark ul a { color: var(--grou-hueso); } .site-nav--dark ul a:hover { color: var(--grou-cobre-claro); } .site-nav--dark ul a.is-active { color: var(--grou-cobre-claro); } /* Al scroll: Hueso sólido + sombra sutil (la página ya no se apila oscuro sobre oscuro) */ .site-nav--scrolled { background: rgba(247,243,238,0.97); border-bottom-color: var(--rule-light); box-shadow: 0 2px 12px rgba(26,26,24,0.07); } .site-nav--scrolled ul a { color: var(--grou-casi-negro); } .site-nav--scrolled ul a:hover, .site-nav--scrolled ul a.is-active { color: var(--accent); } /* Menú móvil */ .site-nav__burger { display: none; appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 8px; font-size: 26px; line-height: 1; align-items: center; justify-content: center; } .site-nav--open { background: var(--grou-verde-pizarra); border-bottom-color: rgba(247,243,238,0.14); } .site-nav--open .site-nav__burger, .site-nav--dark .site-nav__burger { color: var(--grou-hueso); } .site-nav__burger { color: var(--grou-casi-negro); } .site-nav__panel { position: fixed; top: 57px; left: 0; right: 0; bottom: 0; z-index: 39; background: var(--grou-verde-pizarra); display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-7) var(--gutter); overflow-y: auto; } .site-nav__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .site-nav__panel li { border-bottom: 1px solid rgba(247,243,238,0.14); } .site-nav__panel li a { display: block; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--grou-hueso); border: 0; } .site-nav__panel li a.is-active { color: var(--grou-cobre-claro); } .site-nav__panel > .btn { align-self: flex-start; } /* ---------- Secciones ---------- */ .gsection { padding: calc(var(--space-9) * var(--rhythm)) var(--gutter); max-width: 1280px; margin: 0 auto; } .gsection--lino, .gsection--dark, .gsection--musgo, .gsection--bleed { max-width: none; margin: 0; padding-left: max(var(--gutter), calc((100vw - 1280px) / 2)); padding-right: max(var(--gutter), calc((100vw - 1280px) / 2)); } .gsection--lino { background: var(--grou-lino); } .gsection--dark { background: var(--grou-verde-pizarra); color: var(--grou-hueso); } .gsection--musgo { background: var(--grou-verde-musgo); } .gsection.gsection--dark h1, .gsection.gsection--dark h2, .gsection.gsection--dark h3 { color: var(--grou-hueso); } .gsection.gsection--dark .lede { color: var(--grou-arena); } .gsection__head { max-width: 760px; margin-bottom: calc(var(--space-8) * var(--rhythm)); display: flex; flex-direction: column; gap: var(--space-3); } .gsection h1, .gsection h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--grou-casi-negro); text-wrap: balance; } /* Cabecera de subpágina (deja aire bajo el nav fijo) */ .page-head { padding-top: calc(var(--space-10) * var(--rhythm) + 40px); } /* ---------- Hero (Inicio) ---------- */ .hero { position: relative; background: var(--grou-verde-pizarra); color: var(--grou-hueso); overflow: hidden; } .hero__bg { position: absolute; inset: 0; background: radial-gradient(80% 60% at 85% 15%, rgba(181,87,26,0.14), transparent 60%), radial-gradient(70% 70% at 12% 100%, rgba(45,85,68,0.6), transparent 55%), linear-gradient(180deg, var(--grou-verde-pizarra) 0%, #1a3228 100%); } .hero__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: calc(var(--space-10) * var(--rhythm)) var(--gutter) calc(var(--space-9) * var(--rhythm)); padding-top: calc(var(--space-10) * var(--rhythm) + 24px); display: flex; flex-direction: column; gap: var(--space-5); } .hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 5.4vw, 84px); line-height: 1.04; letter-spacing: -0.015em; color: var(--grou-hueso); margin: 0; max-width: 16ch; text-wrap: balance; } .hero__lede { font-size: 19px; line-height: 1.45; color: var(--grou-arena); max-width: 54ch; margin: 0; } .hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); } /* Palabra-sector rellena con imagen (3 imágenes distintas en display) */ .hero-display { margin-top: var(--space-6); border-top: 1px solid rgba(247,243,238,0.14); padding-top: var(--space-6); } .hero-display__label { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--grou-arena); display: block; margin-bottom: var(--space-3); } .hero-display__stack { position: relative; } .hero-word { font-family: var(--font-display); font-weight: 700; font-size: clamp(68px, 9.5vw, 150px); line-height: 1; letter-spacing: -0.02em; margin: 0; white-space: nowrap; background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity 600ms var(--ease-standard); } .hero-word--plain { background: none; color: var(--grou-arena); -webkit-background-clip: border-box; background-clip: border-box; } .hero-display__stack .hero-word { position: absolute; top: 0; left: 0; opacity: 0; } .hero-display__stack .hero-word.is-sizer { position: relative; visibility: hidden; opacity: 0; } .hero-display__stack .hero-word.is-active { opacity: 1; } .hero-display__row { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); flex-wrap: wrap; } .hero-display__tabs { display: flex; gap: var(--space-2); } .hero-display__tab { appearance: none; cursor: pointer; background: transparent; border: 1px solid rgba(247,243,238,0.3); color: var(--grou-arena); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 14px; border-radius: 0; transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base); } .hero-display__tab:hover { border-color: var(--grou-hueso); color: var(--grou-hueso); } .hero-display__tab.is-active { border-color: var(--grou-cobre-claro); color: var(--grou-cobre-claro); } .hero-display__caption { font-size: 13px; color: var(--grou-arena); } /* Stats */ .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: var(--space-7) 0 0; padding-top: var(--space-5); border-top: 1px solid rgba(247,243,238,0.14); } .hero__stats dt { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--grou-arena); margin-bottom: 8px; } .hero__stats dd { margin: 0; } .stat-big { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 0.9; color: var(--grou-cobre-claro); letter-spacing: -0.02em; font-feature-settings: 'lnum' 1, 'tnum' 1; } .stat-text { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--grou-hueso); line-height: 1.2; } .hero__statsnote { font-size: 11.5px; color: rgba(232,213,176,0.65); font-style: italic; margin: var(--space-2) 0 0; } /* ---------- Hero claro (variantes Claro / Split) ---------- */ .hero--light { background: var(--grou-hueso); color: var(--grou-casi-negro); } .hero--light .hero__bg { background: radial-gradient(70% 50% at 88% 8%, rgba(181,87,26,0.07), transparent 60%), linear-gradient(180deg, var(--grou-hueso) 0%, #F3EDE5 100%); } .hero--light .hero__title { color: var(--grou-casi-negro); font-size: clamp(46px, 6vw, 94px); } .hero--light .hero__lede { color: var(--grou-gris-calido); font-size: 18px; } .hero--light .hero__nav-btn { border-color: rgba(26,26,24,0.25); color: var(--grou-casi-negro); } .hero--light .hero__nav-btn:hover { border-color: rgba(26,26,24,0.55); background: rgba(26,26,24,0.04); } .hero--light .hero__carousel-nav { border-top-color: var(--rule-light); } .hero--light .hero__bar > i { background: rgba(26,26,24,0.16); } .hero--light .hero__bar:hover > i { background: rgba(26,26,24,0.35); } .hero--light .hero__bar.is-active > i { background: var(--accent); } .anim-on .hero--light .hero__bar.is-active > i { background: rgba(26,26,24,0.16); } .anim-on .hero--light .hero__bar.is-active > i::after { background: var(--accent); } .hero--light .hero__count { color: rgba(26,26,24,0.45); } .hero--light .hero__count strong { color: var(--accent); } .hero--light .hero-display { border-top-color: var(--rule-light); } .hero--light .hero-display__label { color: var(--grou-gris-calido); } .hero--light .hero-word--plain { color: var(--grou-verde-pizarra); } .hero--light .hero-display__tab { border-color: rgba(26,26,24,0.25); color: var(--grou-gris-calido); } .hero--light .hero-display__tab:hover { border-color: var(--grou-casi-negro); color: var(--grou-casi-negro); background: transparent; } .hero--light .hero-display__tab.is-active { border-color: var(--accent); color: var(--accent); } .hero--light .hero-display__caption { color: var(--grou-gris-calido); } /* Split: foto industrial de fondo + velo Verde Pizarra (denso sobre el texto, abierto a la derecha) */ .hero--split { background: var(--grou-verde-pizarra); } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; } .hero__media { margin: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-2); } .hero__media::before { content: ''; position: absolute; top: -10px; left: 0; width: 48px; height: 3px; background: var(--accent); z-index: 1; } .hero__media image-slot { width: 100%; height: auto; aspect-ratio: 4 / 5; display: block; } .hero__media figcaption { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--grou-gris-calido); } .hero--split .hero__title { font-size: clamp(44px, 5.4vw, 84px); } /* Dúo: base Hueso + panel Pizarra a la derecha; la foto cabalga entre ambos tonos */ .hero--duo .hero__bg { background: linear-gradient(to right, transparent calc(50% + 170px), var(--grou-verde-pizarra) calc(50% + 170px)), linear-gradient(180deg, var(--grou-hueso) 0%, #F3EDE5 100%); } .hero__grid--duo { grid-template-columns: 1.15fr 0.85fr; } .hero__grid--duo .hero__media { max-width: 400px; justify-self: center; width: 100%; } .hero__grid--duo .hero__media image-slot { aspect-ratio: 3 / 4; } .hero__grid--duo .hero__media figcaption { text-align: right; color: var(--grou-arena); } .hero--duo .hero__title { font-size: clamp(40px, 4.6vw, 72px); } /* ---------- Hero carrusel ---------- */ /* Solo transform: si el timeline de animaciones se congela (preview), el contenido queda visible (apenas desplazado), nunca invisible. */ @keyframes hero-slide-in { from { transform: translateY(10px); } to { transform: none; } } .hero__slide-content { display: flex; flex-direction: column; gap: var(--space-5); min-height: 320px; } /* La animación solo se arma si rAF dispara (.anim-on) — contenido visible por defecto */ .anim-on .hero__slide-content { animation-name: hero-slide-in; animation-duration: 520ms; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); animation-fill-mode: backwards; } @media (prefers-reduced-motion: reduce) { .anim-on .hero__slide-content { animation: none; } } .hero__carousel-nav { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(247,243,238,0.14); max-width: 560px; } .hero__count { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; color: rgba(232,213,176,0.55); font-feature-settings: 'lnum' 1, 'tnum' 1; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .hero__count strong { color: var(--grou-cobre-claro); font-weight: 700; font-size: 20px; } .hero__count em { font-style: normal; font-size: 12.5px; } /* Barras de progreso: la activa se llena con el autoavance */ .hero__bars { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; } .hero__bar { appearance: none; border: 0; padding: 6px 0; cursor: pointer; background: transparent; flex: 1; min-width: 0; border-radius: 0; } .hero__bar > i { display: block; height: 2px; width: 100%; background: rgba(247,243,238,0.22); transition: background var(--dur-base), height var(--dur-fast); } .hero__bar:hover > i { background: rgba(247,243,238,0.45); height: 3px; } .hero__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hero__bar.is-active > i { height: 3px; background: var(--grou-cobre-claro); } @keyframes hero-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .anim-on .hero__bar.is-active > i { background: rgba(247,243,238,0.22); position: relative; overflow: hidden; } .anim-on .hero__bar.is-active > i::after { content: ''; position: absolute; inset: 0; background: var(--grou-cobre-claro); transform-origin: left center; animation: hero-bar-fill 6.5s linear both; } .anim-on .hero__bar.is-active.is-paused > i::after { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .anim-on .hero__bar.is-active > i::after { animation: none; } } .hero__arrows { display: flex; gap: 8px; } .hero__nav-btn { appearance: none; background: transparent; border: 1px solid rgba(247,243,238,0.22); color: var(--grou-hueso); cursor: pointer; padding: 8px 10px; line-height: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: border-color var(--dur-base), background var(--dur-base); } .hero__nav-btn:hover { border-color: rgba(247,243,238,0.55); background: rgba(247,243,238,0.06); } .hero__nav-btn:active { transform: translateY(1px); } .hero__nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Micro-interacciones ---------- */ /* Subrayado Cobre crece al revelar la sección */ .anim-on .reveal .uline::after, .anim-on .uline.reveal::after { width: 0; transition: width 640ms var(--ease-standard) 160ms; } .anim-on .reveal.in .uline::after, .anim-on .uline.reveal.in::after { width: 72px; } /* Flecha de los botones se desliza al hover */ .btn span[aria-hidden] { transition: transform var(--dur-base) var(--ease-standard); } .btn:hover span[aria-hidden] { transform: translateX(3px); } /* Tarjetas: regla Cobre se dibuja al hover */ .service, .method-step { position: relative; } .service::after, .method-step::after { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); transition: width var(--dur-slow) var(--ease-standard); } .service:hover::after, .method-step:hover::after { width: 48px; } /* Casos: el número empuja al hover */ .case__n { transition: transform var(--dur-base) var(--ease-standard); } .case:hover .case__n { transform: translateX(4px); } /* ---------- Fotos de referencia (dirección fotográfica) ---------- */ /* Tratamiento de marca: saturación contenida + velo verde pizarra/cobre */ .foto-ref { margin: 0; position: relative; overflow: hidden; background: var(--grou-verde-pizarra); } .foto-ref img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.72) contrast(1.06) brightness(0.97); } .foto-ref::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(30,58,47,0.30) 0%, rgba(30,58,47,0.08) 45%, rgba(181,87,26,0.16) 100%); mix-blend-mode: multiply; } .foto-ref__chip { position: absolute; left: 0; bottom: 0; z-index: 1; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--grou-hueso); background: rgba(26,26,24,0.72); padding: 6px 10px; } .hero__media .foto-ref { width: 100%; aspect-ratio: 4 / 5; } .hero__grid--duo .hero__media .foto-ref { aspect-ratio: 3 / 4; } .foto-ref.foto-ref--hero-bg::after { /* el velo lo pone .hero__bg encima; acá solo el grading base */ background: linear-gradient(160deg, rgba(30,58,47,0.20) 0%, rgba(181,87,26,0.10) 100%); } /* ---------- Foto de fondo en el hero (todos los estilos) ---------- */ .foto-ref.foto-ref--hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; aspect-ratio: auto; } .foto-ref.foto-ref--hero-bg img { width: 100%; height: 100%; } .hero--foto .hero__bg { z-index: 1; } .hero--foto .hero__inner { position: relative; z-index: 2; } /* Pizarra: velo verde profundo, casi uniforme — la foto apenas respira */ .hero--foto .hero__bg { background: linear-gradient(94deg, rgba(30,58,47,0.96) 0%, rgba(30,58,47,0.90) 50%, rgba(30,58,47,0.72) 100%); } /* Split: velo que se abre hacia la derecha — la foto protagonista */ .hero--split.hero--foto .hero__bg { background: linear-gradient(94deg, rgba(30,58,47,0.93) 0%, rgba(30,58,47,0.78) 46%, rgba(30,58,47,0.38) 100%); } /* Claro: velo Hueso — foto fantasma tras texto oscuro */ .hero--light.hero--foto .hero__bg { background: linear-gradient(94deg, rgba(247,243,238,0.97) 0%, rgba(247,243,238,0.90) 46%, rgba(247,243,238,0.58) 100%); } /* Dúo: velo que transita de Hueso a Pizarra — ambos tonos sobre la foto */ .hero--duo.hero--foto .hero__bg { background: linear-gradient(94deg, rgba(247,243,238,0.97) 0%, rgba(247,243,238,0.93) 42%, rgba(45,85,68,0.62) 72%, rgba(30,58,47,0.68) 100%); } /* ---------- Distribución centrada ---------- */ .hero--center .hero__slide-content { align-items: center; text-align: center; margin: 0 auto; max-width: 920px; } .hero--center .hero__title, .hero--center .hero__lede, .hero--center .eyebrow { text-align: center; } .hero--center .hero__lede { margin-left: auto; margin-right: auto; } /* Distribución izquierda: el contenido ocupa el ancho completo, no media columna. El titular fluye sin quiebres forzados y la barra del carrusel se extiende. */ .hero:not(.hero--center) .hero__title { max-width: 17ch; } .hero:not(.hero--center) .hero__lede { max-width: 64ch; font-size: 20px; } .hero:not(.hero--center) .hero__carousel-nav { max-width: 900px; } .hero--center .hero__actions { justify-content: center; } .hero--center .hero__carousel-nav { margin-left: auto; margin-right: auto; width: 100%; } /* Velos simétricos cuando el texto va al centro */ .hero--center.hero--foto .hero__bg { background: linear-gradient(180deg, rgba(30,58,47,0.95) 0%, rgba(30,58,47,0.88) 60%, rgba(30,58,47,0.78) 100%); } .hero--split.hero--center.hero--foto .hero__bg { background: linear-gradient(180deg, rgba(30,58,47,0.88) 0%, rgba(30,58,47,0.74) 55%, rgba(30,58,47,0.52) 100%); } .hero--light.hero--center.hero--foto .hero__bg { background: linear-gradient(180deg, rgba(247,243,238,0.96) 0%, rgba(247,243,238,0.90) 60%, rgba(247,243,238,0.74) 100%); } .hero--duo.hero--center.hero--foto .hero__bg { background: linear-gradient(180deg, rgba(247,243,238,0.96) 0%, rgba(247,243,238,0.90) 55%, rgba(30,58,47,0.60) 100%); } /* ---------- Sectores con foto (drag & drop) ---------- */ .sector-card__slot { width: 100%; height: auto; aspect-ratio: 16 / 10; display: block; margin-bottom: var(--space-2); } /* ---------- CTA móvil fija ---------- */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; display: none; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px var(--gutter); background: rgba(21,42,33,0.97); border-top: 1px solid rgba(247,243,238,0.14); transform: translateY(102%); transition: transform var(--dur-slow) var(--ease-standard); } .mobile-cta.is-on { transform: none; } .mobile-cta__label { font-size: 13px; color: var(--grou-arena); line-height: 1.3; } .mobile-cta .btn { padding: 11px 18px; } /* ---------- Método (teaser + página) ---------- */ .method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); } .method-step { background: var(--grou-hueso); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); transition: background var(--dur-base); } .method-step:hover { background: #fbf7f2; } .method-step__letter { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--accent); } .method-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin: var(--space-2) 0 0; color: var(--grou-casi-negro); } .method-step p { font-size: 14.5px; line-height: 1.45; margin: 0; color: var(--grou-casi-negro); } .method-step .tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--grou-gris-calido); } /* Explorador G·R·O·U (metodo.html) */ .gx { display: grid; grid-template-columns: minmax(220px, 420px) 1fr; gap: var(--space-8); align-items: start; } .gx__letters { display: flex; flex-direction: column; } .gx__letter { appearance: none; background: transparent; border: 0; border-top: 1px solid var(--rule-light); display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-2); cursor: pointer; text-align: left; font-family: var(--font-body); transition: background var(--dur-base); } .gx__letter:last-child { border-bottom: 1px solid var(--rule-light); } .gx__letter:hover { background: var(--grou-lino); } .gx__letter .big { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--grou-gris-calido); transition: color var(--dur-base); } .gx__letter .name { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--grou-casi-negro); } .gx__letter .arrow { color: var(--grou-gris-calido); font-size: 18px; transition: color var(--dur-base), transform var(--dur-base); } .gx__letter.is-active .big { color: var(--accent); } .gx__letter.is-active .arrow { color: var(--accent); transform: translateX(4px); } .gx__detail { border-top: 2px solid var(--accent); padding-top: var(--space-5); min-height: 320px; } .gx__detail .claim { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; margin: 0 0 var(--space-4); color: var(--grou-casi-negro); } .gx__detail p { font-size: 16px; line-height: 1.55; max-width: 52ch; margin: 0 0 var(--space-5); color: var(--grou-casi-negro); } .gx__detail h4 { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--grou-gris-calido); margin: 0 0 var(--space-3); } .gx__detail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .gx__detail li { font-size: 15px; padding-left: 20px; position: relative; } .gx__detail li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--accent); } /* Foco tipográfico G·R·O·U (G y U atenuadas: el foco está en R y O) */ .ro-focus { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 15vw, 220px); line-height: 0.9; letter-spacing: -0.03em; color: var(--grou-casi-negro); margin: 0; max-width: none; } .ro-focus .sep { color: var(--accent); font-size: 0.5em; transform: translateY(-0.35em); } .ro-focus .dim { color: rgba(26, 26, 24, 0.18); } .ro-focus__legend { display: flex; gap: var(--space-8); margin-top: var(--space-6); flex-wrap: wrap; } .ro-focus__legend div { max-width: 320px; } .ro-focus__legend strong { font-family: var(--font-display); font-size: 18px; display: block; margin-bottom: 6px; } .ro-focus__legend p { font-size: 14.5px; margin: 0; color: var(--grou-gris-calido); } /* ---------- Servicios ---------- */ .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); } .service { background: var(--grou-hueso); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); transition: background var(--dur-base); } .service:hover { background: #fbf7f2; } .service__n { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--accent); letter-spacing: 0.18em; } .service h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; margin: 6px 0 0; color: var(--grou-casi-negro); } .service p { font-size: 14.5px; line-height: 1.45; color: var(--grou-casi-negro); margin: 0; } .service .eyebrow { font-size: 11px; } /* ---------- Sectores (strip Inicio) ---------- */ .sectors-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } .sector-card { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--accent); } .sector-card i { font-size: 38px; color: var(--grou-verde-pizarra); line-height: 1; } .sector-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 0; color: var(--grou-casi-negro); } .sector-card p { font-size: 15px; line-height: 1.45; margin: 0; color: var(--grou-casi-negro); } .sector-card .caption { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grou-gris-calido); font-weight: 600; } /* ---------- Sectores (filas editoriales) ---------- */ .sector-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; padding: calc(var(--space-8) * var(--rhythm)) 0; border-top: 1px solid var(--rule-light); } .sector-row:first-of-type { border-top: 0; padding-top: 0; } .sector-row__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-size: cover; background-position: center; } .sector-row__img::after { content: ''; position: absolute; inset: 0; background: rgba(30,58,47,0.32); /* overlay Pizarra 30–45% */ } .sector-row__img .ph-note { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,213,176,0.8); font-weight: 600; } .sector-row:nth-child(even) .sector-row__img { order: 2; } .sector-row__body { display: flex; flex-direction: column; gap: var(--space-4); } .sector-row__body h2, .sector-row__body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); margin: 0; color: var(--grou-casi-negro); } .sector-row__body .lede { font-size: 16px; } .sector-row__body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .sector-row__body li { font-size: 15px; padding-left: 20px; position: relative; } .sector-row__body li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--accent); } /* Criterio de entrada */ .criterio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .criterio article { border-top: 2px solid var(--accent); padding-top: var(--space-4); } .criterio h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 var(--space-2); color: var(--grou-casi-negro); } .criterio p { font-size: 14.5px; line-height: 1.5; margin: 0; color: var(--grou-casi-negro); } /* ---------- Dos modos ---------- */ .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); } .mode { background: var(--grou-hueso); padding: var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .mode--alt { background: var(--grou-lino); } .mode .when { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--accent); } .mode h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); margin: 0; color: var(--grou-casi-negro); } .mode p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--grou-casi-negro); } .mode ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .mode li { font-size: 14.5px; padding-left: 20px; position: relative; } .mode li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--accent); } /* ---------- Casos ---------- */ .cases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .case { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-6); align-items: start; padding: var(--space-6) 0; border-top: 1px solid var(--rule-light); transition: background var(--dur-base); } .case:last-child { border-bottom: 1px solid var(--rule-light); } .case:hover { background: var(--grou-lino); } .case__n { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--accent); letter-spacing: 0.12em; } .case__body { display: flex; flex-direction: column; gap: 8px; max-width: 680px; } .case__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 25px; line-height: 1.15; margin: 0; color: var(--grou-casi-negro); } .case__body p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--grou-casi-negro); } /* ---------- Cita / banda oscura ---------- */ .quote-band blockquote { font-family: var(--font-mono); font-weight: 400; font-size: clamp(19px, 2vw, 26px); line-height: 1.45; color: var(--grou-hueso); margin: 0; max-width: 38ch; } .quote-band figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: 900px; } .quote-band figcaption { font-size: 13px; color: var(--grou-arena); } .quote-band figcaption strong { color: var(--grou-hueso); } /* Cita sobre Lino (Serif) */ .quote-light figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: 900px; } .quote-light blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.25; letter-spacing: -0.005em; color: var(--grou-casi-negro); margin: 0; max-width: 26ch; text-wrap: pretty; } .quote-light figcaption { font-size: 13px; color: var(--grou-gris-calido); } .quote-light figcaption strong { color: var(--grou-casi-negro); } /* ---------- CTA ---------- */ .cta__inner { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; max-width: 760px; } .cta__inner h2 { color: var(--grou-hueso); } .cta__inner p { color: var(--grou-arena); font-size: 17px; line-height: 1.5; margin: 0; max-width: 52ch; } /* ---------- Equipo ---------- */ .team { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); } .person { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-5); align-items: start; } .person__photo { aspect-ratio: 3 / 4; background: var(--grou-verde-pizarra); position: relative; display: flex; align-items: flex-end; padding: 12px; } .person__photo::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: var(--accent); } .person__photo span { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: rgba(232,213,176,0.5); line-height: 1; } .person__body { display: flex; flex-direction: column; gap: var(--space-2); } .person__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin: 0; color: var(--grou-casi-negro); } .person__role { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent); } .person__body p { font-size: 14.5px; line-height: 1.5; margin: 0; color: var(--grou-casi-negro); } .person__focus { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .person__focus li { font-size: 12px; font-weight: 600; color: var(--grou-verde-pizarra); border: 1px solid rgba(26,26,24,0.18); padding: 5px 12px; border-radius: 999px; } .person__meta { font-size: 13.5px; color: var(--grou-gris-calido); margin-top: var(--space-2); } .person__meta a { color: var(--grou-casi-negro); border-bottom: 1px solid currentColor; } .person__meta a:hover { color: var(--accent); } .network { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .network article { border-top: 1px solid var(--rule-light); padding-top: var(--space-4); } .network h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 var(--space-2); color: var(--grou-casi-negro); } .network p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--grou-gris-calido); } /* ---------- Contacto ---------- */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; } .contact__copy { display: flex; flex-direction: column; gap: var(--space-4); } .contact__meta { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-5) 0 0; display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid rgba(247,243,238,0.14); } .contact__meta li { font-size: 14.5px; color: var(--grou-hueso); display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3); } .contact__meta li span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--grou-arena); padding-top: 3px; } .contact__meta a { color: var(--grou-hueso); border-bottom: 1px solid rgba(247,243,238,0.4); justify-self: start; } .contact__meta a:hover { color: var(--grou-cobre-claro); } .gform { display: flex; flex-direction: column; gap: var(--space-4); } .gform label { display: flex; flex-direction: column; gap: 6px; } .gform label > span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--grou-arena); } .gform input, .gform select, .gform textarea { font-family: var(--font-body); font-size: 15px; background: transparent; color: var(--grou-hueso); border: 0; border-bottom: 1px solid rgba(247,243,238,0.35); padding: 10px 2px; outline: none; border-radius: 0; transition: border-color var(--dur-base); } .gform input:focus, .gform select:focus, .gform textarea:focus { border-color: var(--accent); } .gform select option { color: var(--grou-casi-negro); } .gform textarea { resize: vertical; min-height: 72px; } .gform button { margin-top: var(--space-3); align-self: flex-start; } .gform__error { font-size: 12.5px; color: var(--grou-cobre-claro); margin: 0; } .gform__sent { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); } .gform__sent h3 { font-family: var(--font-display); color: var(--grou-hueso); font-size: 28px; margin: 0; } .gform__sent p { color: var(--grou-arena); font-size: 15px; margin: 0; max-width: 44ch; } /* ---------- Footer ---------- */ .site-footer { background: #152A21; /* Pizarra profundo — separa el footer de las bandas Pizarra */ color: var(--grou-hueso); padding: calc(var(--space-8) * var(--rhythm)) var(--gutter) var(--space-5); } .site-footer__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); } .site-footer__mark img { height: 24px; margin-bottom: var(--space-3); display: block; } .site-footer__mark p { font-size: 13px; color: var(--grou-arena); line-height: 1.5; margin: 0; } .site-footer h4 { font-family: var(--font-body); font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grou-arena); margin: 0 0 var(--space-3); } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer li { font-size: 13.5px; } .site-footer li a { color: var(--grou-hueso); opacity: 0.85; border: 0; } .site-footer li a:hover { color: var(--grou-cobre-claro); opacity: 1; } .site-footer li span { color: var(--grou-hueso); opacity: 0.85; } .site-footer__base { max-width: 1280px; margin: var(--space-7) auto 0; padding-top: var(--space-4); border-top: 1px solid rgba(247,243,238,0.14); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; color: rgba(232,213,176,0.7); } .site-footer__seal { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; color: var(--grou-arena); } .site-footer__seal .dot { color: var(--grou-cobre-claro); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .mobile-cta { display: flex; } .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); } .hero__media { max-width: 440px; } .hero--foto .hero__bg { background: linear-gradient(180deg, rgba(30,58,47,0.94) 0%, rgba(30,58,47,0.82) 100%); } .hero--split.hero--foto .hero__bg { background: linear-gradient(180deg, rgba(30,58,47,0.90) 0%, rgba(30,58,47,0.72) 100%); } .hero--light.hero--foto .hero__bg, .hero--duo.hero--foto .hero__bg { background: linear-gradient(180deg, rgba(247,243,238,0.96) 0%, rgba(247,243,238,0.88) 100%); } .hero--split .hero__slide-content { min-height: 0; } /* Dúo en móvil: la foto lleva su propio marco Pizarra */ .hero--duo .hero__bg { background: linear-gradient(180deg, var(--grou-hueso) 0%, #F3EDE5 100%); } .hero__grid--duo .hero__media { justify-self: start; max-width: 380px; background: var(--grou-verde-pizarra); padding: var(--space-5); } .hero__grid--duo .hero__media::before { top: 14px; left: 24px; } .site-nav ul { display: none; } .site-nav__cta { display: none; } .site-nav__burger { display: flex; } .services, .sectors-strip, .method-grid, .criterio { grid-template-columns: 1fr; } .modes, .team, .contact, .gx { grid-template-columns: 1fr; } .network { grid-template-columns: 1fr 1fr; } .sector-row { grid-template-columns: 1fr; gap: var(--space-5); } .sector-row:nth-child(even) .sector-row__img { order: 0; } .hero__stats { grid-template-columns: 1fr; } .case { grid-template-columns: 84px 1fr; } .site-footer__grid { grid-template-columns: 1fr 1fr; } .person { grid-template-columns: 130px 1fr; } .hero__slide-content { min-height: 380px; } .hero__title { font-size: clamp(38px, 9vw, 64px); } } /* ============================================================ Extensiones v2.2 — sitio de producción (sin React) ============================================================ */ /* Todo elemento con [hidden] queda oculto aunque su componente defina display propio (menú móvil, slides del hero, tabs) */ [hidden] { display: none !important; } /* Accesibilidad: salto al contenido */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--grou-cobre-vivo); color: var(--grou-hueso); padding: 10px 16px; font-size: 14px; font-weight: 600; } .skip-link:focus { left: 0; } /* Carrusel del hero: las diapositivas ocultas no se muestran */ .hero__slide-content[hidden] { display: none; } /* Grilla de 3 columnas (Cómo trabajamos: Comprender · Acompañar · Habilitar) */ .method-grid--3 { grid-template-columns: repeat(3, 1fr); } /* Strip de 4 sectores (Minería · Energía · Marítimo-portuario · Manufactura) */ .sectors-strip--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } /* Lo que no somos (banda oscura, guiones cobre) */ .no-somos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; } .no-somos li { font-size: 16.5px; line-height: 1.5; color: var(--grou-hueso); padding-left: 24px; position: relative; } .no-somos li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--grou-cobre-claro); } /* Variante sobre fondo claro (Lino/Hueso) */ .no-somos--light li { color: var(--grou-casi-negro); } .no-somos--light li::before { background: var(--accent); } /* Honeypot del formulario (oculto a personas, visible a bots) */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Estado de envío del formulario */ .gform__note { font-size: 12.5px; color: rgba(232,213,176,0.75); font-style: italic; margin: 0; } .gform [aria-busy="true"] { opacity: 0.6; pointer-events: none; } @media (max-width: 1100px) { .sectors-strip--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 960px) { .method-grid--3 { grid-template-columns: 1fr; } } @media (max-width: 620px) { .sectors-strip--4 { grid-template-columns: 1fr; } }