/* ========================================================================== GROWIN AGENCY — Design tokens (fuente: Brandbook V.8) ========================================================================== */ /* Fuentes cargadas vía en el de cada página (preconnect + display=swap) — ver build.py */ :root{ /* Paleta primaria */ --black: #0B0D0B; /* Growin Black — 55% */ --green: #4E8F63; /* Growin Green — 25% */ --mint: #8FD9A8; /* Signal Mint — 8% acentos */ --deep-green: #1F3B29; /* sombras / bg alterno */ --paper: #F7F6F0; /* Paper White — 12% */ /* Paleta secundaria — funcional */ --amber: #D9A441; /* gráficas / warning */ --red: #C7503F; /* errores / alertas */ --gray-400: #9A9990; /* texto secundario sobre negro */ --gray-600: #6B6B65; /* bordes / metadatos */ /* Tipografía */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Escala */ --radius: 4px; --max-w: 1180px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px; --space-7: 140px; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--black); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } :focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } h1, h2, h3, h4{ font-family: var(--font-display); font-weight: 700; line-height: 1.08; margin: 0 0 var(--space-2); letter-spacing: -0.01em; } h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); } h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); } h3{ font-size: 1.35rem; } p{ margin: 0 0 var(--space-2); color: inherit; } .eyebrow{ font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--space-2); } .eyebrow::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); display: inline-block; } .container{ max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-3); } section{ padding: var(--space-6) 0; } @media (max-width: 720px){ section{ padding: var(--space-5) 0; } } /* ---------- Secciones por tema (negro base / paper alterno) ---------- */ .on-dark{ background: var(--black); color: var(--paper); } .on-dark .eyebrow{ color: var(--mint); } .on-dark p{ color: var(--gray-400); } .on-deep{ background: var(--deep-green); color: var(--paper); } .on-deep .eyebrow{ color: var(--mint); } .on-deep p{ color: #C9D6CC; } .on-deep .divider{ background: #2c4636; } /* ---------- Botones ---------- */ .btn{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; padding: 14px 26px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .btn:hover{ transform: translateY(-1px); } .btn-primary{ background: var(--green); color: var(--paper); } .btn-primary:hover{ background: var(--mint); color: var(--black); } .btn-outline{ background: transparent; border-color: currentColor; color: inherit; } .on-dark .btn-outline{ border-color: var(--gray-400); color: var(--paper); } .on-dark .btn-outline:hover{ border-color: var(--paper); } .btn-outline:hover{ border-color: var(--black); } /* ---------- Header ---------- */ .site-header{ position: sticky; top: 0; z-index: 100; background: var(--black); border-bottom: 1px solid #1c1f1c; } .site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .logo img{ height: 30px; width: auto; } .logo-text{ display: inline-flex; align-items: center; gap: 10px; } .logo-dots{ display: inline-flex; align-items: flex-end; gap: 3px; } .logo-dots span{ display: block; border-radius: 50%; background: var(--green); } .logo-dots span:nth-child(1){ width: 4px; height: 4px; } .logo-dots span:nth-child(2){ width: 6px; height: 6px; } .logo-dots span:nth-child(3){ width: 8px; height: 8px; } .logo-dots span:nth-child(4){ width: 11px; height: 11px; background: var(--mint); } .logo-word{ font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--paper); letter-spacing: -0.01em; line-height: 1; } .logo-agency{ font-family: var(--font-body); font-weight: 500; font-size: 0.62rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .06em; display: block; margin-top: 2px; } .footer-top .logo-word{ font-size: 1.1rem; } .main-nav{ display: flex; align-items: center; gap: var(--space-4); } .main-nav ul{ list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0; } .main-nav a{ color: var(--gray-400); font-size: 0.94rem; font-weight: 500; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--paper); border-color: var(--green); } .header-actions{ display: flex; align-items: center; gap: var(--space-2); } .lang-switch{ display: flex; gap: 6px; font-family: var(--font-mono); font-size: 0.78rem; } .lang-switch a{ color: var(--gray-400); padding: 4px 6px; } .lang-switch a[aria-current="true"]{ color: var(--mint); } .nav-toggle{ display: none; background: none; border: none; color: var(--paper); font-size: 1.6rem; cursor: pointer; } @media (max-width: 860px){ .main-nav ul{ position: fixed; inset: 62px 0 auto 0; background: var(--black); flex-direction: column; padding: var(--space-3); gap: var(--space-2); border-bottom: 1px solid #1c1f1c; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .main-nav.open ul{ transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-toggle{ display: block; } } /* ---------- Hero ---------- */ .hero{ background: var(--black); color: var(--paper); padding: 72px 0 var(--space-6); } .hero .container{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5); align-items: center; } .hero h1{ color: var(--paper); } .hero h1 mark{ background: var(--mint); color: var(--black); padding: 0 6px; } .hero-lede{ font-size: 1.15rem; color: var(--gray-400); max-width: 46ch; } .hero-cta-row{ display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; } .hero-meta{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--gray-400); margin-top: var(--space-3); } @media (max-width: 900px){ .hero .container{ grid-template-columns: 1fr; } } /* ---------- Stat/metric dots (símbolo ascendente como motivo) ---------- */ .dot-row{ display: flex; align-items: flex-end; gap: 6px; margin-bottom: var(--space-2); } .dot-row span{ display: block; border-radius: 50%; background: var(--green); } .dot-row span:nth-child(1){ width: 6px; height: 6px; } .dot-row span:nth-child(2){ width: 9px; height: 9px; } .dot-row span:nth-child(3){ width: 13px; height: 13px; } .dot-row span:nth-child(4){ width: 18px; height: 18px; background: var(--mint); } /* ---------- Grid utilities ---------- */ .grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } @media (max-width: 900px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } } /* ---------- Cards ---------- */ .card{ background: #fff; border: 1px solid #E3E1D6; border-radius: var(--radius); padding: var(--space-3); } .on-dark .card{ background: #12140F; border-color: #22261F; } .card h3{ margin-bottom: 6px; } .card .card-num{ font-family: var(--font-mono); color: var(--green); font-size: 0.85rem; margin-bottom: var(--space-1); } .step-icon{ margin-bottom: var(--space-2); } .step-icon svg{ width: 30px; height: 30px; } /* ---------- Elementos "conectados" (hilo de crecimiento) — reemplaza cards sueltas ---------- */ .thread-list{ display: flex; flex-direction: column; } .thread-item{ display: flex; gap: 18px; } .thread-marker{ display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 6px; } .thread-dot{ border-radius: 50%; background: var(--mint); flex-shrink: 0; } .thread-item:nth-child(1) .thread-dot{ width: 7px; height: 7px; } .thread-item:nth-child(2) .thread-dot{ width: 9px; height: 9px; } .thread-item:nth-child(3) .thread-dot{ width: 11px; height: 11px; } .thread-line{ width: 1px; flex: 1; margin-top: 6px; background: linear-gradient(to bottom, var(--green), var(--mint)); opacity: .5; } .thread-item:last-child .thread-line{ display: none; } .thread-item-body{ padding-bottom: var(--space-4); } .thread-item:last-child .thread-item-body{ padding-bottom: 0; } .process-row{ position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .process-step{ position: relative; z-index: 1; } .process-dot{ border-radius: 50%; background: var(--paper); border: 2px solid var(--green); margin-bottom: var(--space-2); } .process-step:nth-child(1) .process-dot{ width: 14px; height: 14px; } .process-step:nth-child(2) .process-dot{ width: 18px; height: 18px; } .process-step:nth-child(3) .process-dot{ width: 22px; height: 22px; } .process-step:nth-child(4) .process-dot{ width: 26px; height: 26px; background: var(--green); border-color: var(--mint); } .process-step h3{ display: flex; align-items: center; gap: 8px; } .process-step .step-icon{ margin: 0; } .process-step .step-icon svg{ width: 20px; height: 20px; } @media (max-width: 860px){ .process-row{ grid-template-columns: 1fr; gap: var(--space-4); } .process-row::before{ display: none; } } .step-icon{ margin-bottom: var(--space-2); } .step-icon svg{ width: 30px; height: 30px; } /* ---------- Carrusel de casos en el hero ---------- */ .hero-case-carousel{ position: relative; min-height: 168px; } .hero-case-slide{ position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; } .hero-case-slide.is-active{ opacity: 1; pointer-events: auto; position: relative; } .carousel-dots{ display: flex; gap: 6px; margin-top: var(--space-2); } .carousel-dots button{ width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; background: #2a2e26; cursor: pointer; } .carousel-dots button.is-active{ background: var(--mint); width: 16px; border-radius: 3px; transition: width .2s ease; } /* ---------- Case study module (spec: número grande Space Grotesk + contexto Inter + dato mono) ---------- */ .case-block{ border: 1px solid #22261F; background: var(--black); color: var(--paper); border-radius: var(--radius); padding: var(--space-4); display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; } .case-block .case-num{ font-family: var(--font-display); font-size: 3.4rem; color: var(--mint); line-height: 1; } .case-block .case-num-cap{ display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; } .case-block.is-link{ transition: border-color .15s ease, transform .15s ease; cursor: pointer; } .case-block.is-link:hover{ border-color: var(--mint); transform: translateY(-2px); } .case-block .case-tag{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--green); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; display: block; } .case-block .case-metrics{ font-family: var(--font-mono); font-size: 0.82rem; color: var(--gray-400); margin-top: var(--space-2); } .case-block img{ border-radius: var(--radius); margin-top: var(--space-3); border: 1px solid #22261F; } @media (max-width: 700px){ .case-block{ grid-template-columns: 1fr; } } /* ---------- Quote / voice sample ---------- */ .voice-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .voice-pair .no{ border-left: 3px solid var(--red); padding-left: var(--space-2); color: var(--gray-600); } .voice-pair .si{ border-left: 3px solid var(--green); padding-left: var(--space-2); } @media (max-width: 700px){ .voice-pair{ grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .site-footer{ background: var(--black); color: var(--gray-400); padding: var(--space-5) 0 var(--space-3); } .footer-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); } .footer-top .logo img{ height: 26px; margin-bottom: var(--space-2); } .site-footer h4{ font-family: var(--font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--paper); margin-bottom: var(--space-2); } .site-footer ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer a:hover{ color: var(--paper); } .footer-bottom{ border-top: 1px solid #1c1f1c; padding-top: var(--space-3); display: flex; justify-content: space-between; font-size: 0.82rem; font-family: var(--font-mono); flex-wrap: wrap; gap: 8px; } @media (max-width: 800px){ .footer-top{ grid-template-columns: 1fr 1fr; } } /* ---------- Forms ---------- */ .form-grid{ display: grid; gap: var(--space-2); max-width: 560px; } label{ font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; display: block; } input, textarea, select{ width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--gray-600); background: #fff; color: var(--black); font-family: var(--font-body); font-size: 0.98rem; } .on-dark input, .on-dark textarea, .on-dark select{ background: #12140F; color: var(--paper); border-color: #2a2e26; } input:focus, textarea:focus, select:focus{ border-color: var(--green); } .form-note{ font-size: 0.82rem; color: var(--gray-600); } .form-status{ font-family: var(--font-mono); font-size: 0.85rem; margin-top: var(--space-2); } .form-status.ok{ color: var(--green); } .form-status.err{ color: var(--red); } /* ---------- Misc ---------- */ .tag{ font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; background: var(--deep-green); color: var(--mint); padding: 4px 10px; border-radius: 100px; display: inline-block; } .divider{ height: 1px; background: #E3E1D6; margin: var(--space-4) 0; } .on-dark .divider{ background: #1c1f1c; } .center{ text-align: center; } .narrow{ max-width: 720px; margin: 0 auto; } .cta-band{ background: var(--deep-green); color: var(--paper); text-align: center; } .cta-band h2{ color: var(--paper); } /* ---------- Abrazar el corte (Opción C): regla delgada exacta en la costura ---------- */ .section-cut{ border-top: 1px solid rgba(11,13,10,.14); padding-top: 44px; } .section-cut.on-dark, .section-cut.on-deep, .section-cut.cta-band{ border-top-color: rgba(247,246,240,.16); } /* ---------- Fondo en degradado continuo para Home (evita costuras entre bloques) ---------- */ .home-gradient-bg{ background: linear-gradient(180deg, var(--black) 0%, var(--black) 13%, var(--paper) 28%, var(--paper) 50%, var(--black) 66%, var(--black) 79%, var(--deep-green) 95%, var(--deep-green) 100% ); } .home-gradient-bg .hero, .home-gradient-bg .on-dark, .home-gradient-bg .on-deep, .home-gradient-bg .cta-band{ background: transparent; } /* ---------- Línea de crecimiento continua (cose las secciones sin degradado) ---------- */ .growth-line-zone{ position: relative; } .growth-line-segment{ position: absolute; top: 0; bottom: 0; left: 28px; width: 1px; background: rgba(143, 217, 168, .35); } .growth-line-zone.zone-light .growth-line-segment{ background: rgba(78, 143, 99, .35); } .growth-line-dot{ position: absolute; left: 24px; top: 0; border-radius: 50%; background: var(--mint); z-index: 2; box-shadow: 0 0 0 5px var(--black); } .growth-line-zone.zone-light .growth-line-dot{ background: var(--green); box-shadow: 0 0 0 5px var(--paper); } .growth-line-zone.zone-deep .growth-line-dot{ background: var(--mint); box-shadow: 0 0 0 5px var(--deep-green); } .zone-hero .growth-line-dot{ width: 8px; height: 8px; } .zone-why .growth-line-dot{ width: 12px; height: 12px; } .zone-how .growth-line-dot{ width: 16px; height: 16px; } .zone-cta .growth-line-dot{ width: 22px; height: 22px; } .zone-cta .growth-line-segment{ display: none; } @media (max-width: 700px){ .growth-line-segment, .growth-line-dot{ left: 12px; } } .skip-link{ position: absolute; left: -999px; top: auto; background: var(--green); color: #fff; padding: 10px; z-index: 200; } .skip-link:focus{ left: 10px; top: 10px; } /* ---------- Page loader (símbolo Signal Ascend — spec brandbook: 120ms/punto, ease-out, loop 1.8s) ---------- */ .page-loader{ position: fixed; inset: 0; z-index: 999; background: var(--black); display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding-bottom: 6vh; transition: opacity .35s ease; } .page-loader span{ display:block; border-radius:50%; background: var(--green); animation: dotAscend 1.8s ease-out infinite; } .page-loader span:nth-child(1){ width:10px; height:10px; animation-delay:0s; } .page-loader span:nth-child(2){ width:16px; height:16px; animation-delay:.12s; } .page-loader span:nth-child(3){ width:22px; height:22px; animation-delay:.24s; } .page-loader span:nth-child(4){ width:30px; height:30px; background: var(--mint); animation-delay:.36s; } @keyframes dotAscend{ 0%,60%,100%{ opacity:.25; transform: scale(.7);} 30%{ opacity:1; transform: scale(1);} } .page-loader.is-hidden{ opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce){ .page-loader{ display: none; } }