/* ═══════════════════════════════════════════════════════════════════════════ HERCOB · SISTEMA DE DISEÑO · hercob.css ─────────────────────────────────────────────────────────────────────────── Filosofía: "La forma sigue al mensaje." Esto NO es un kit de plantillas. Son tokens + primitivas flexibles que se COMPONEN distinto en cada sección/página según lo que se quiere comunicar. · Reutiliza el LENGUAJE (color, tipo, profundidad, componentes). · Varía la COMPOSICIÓN (layout dictado por el mensaje). Jerarquía con propósito: nada es grande o de color por decorar — cada énfasis codifica importancia y dirige la atención hacia el valor y el CTA. Fuentes (cargar en el de cada página): ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── COLOR ─────────────────────────────────────────────── Navy/azul/blanco. Nombres semánticos: el rol manda, no el tono. */ --hc-ink:#0a1628; /* texto principal sobre claro */ --hc-ink-2:#2b3a52; /* texto secundario */ --hc-ink-3:#5a6b85; /* texto terciario / apoyo */ --hc-navy:#0a2342; /* superficie oscura base */ --hc-navy-2:#0d2c52; /* superficie oscura elevada */ --hc-deep:#050f20; /* fondo oscuro profundo */ --hc-abyss:#030a16; /* fondo más profundo (footer) */ --hc-blue:#3b7bf0; /* acento de marca (acción) */ --hc-blue-2:#5b9dff; /* acento claro (sobre oscuro) */ --hc-blue-soft:#dce8fd; /* acento muy suave (fondos) */ --hc-teal:#3fb6a0; /* positivo (solo datos: ganancia ▲) */ --hc-warn:#f0a6a6; /* negativo (solo datos: sale ▼) */ --hc-paper:#ffffff; /* superficie clara base */ --hc-paper-2:#f5f8fd; /* superficie clara alterna */ --hc-paper-3:#eaf1fa; /* superficie clara hundida */ --hc-line:#e4ecf6; /* línea sobre claro */ --hc-line-2:#d3e0ef; /* línea más marcada */ --hc-line-d:rgba(140,180,235,.16); /* línea sobre oscuro */ /* ── TIPOGRAFÍA ────────────────────────────────────────── Fraunces = autoridad (titulares). Inter = claridad (cuerpo). IBM Plex Mono = precisión financiera (etiquetas, cifras). */ --hc-display:'Fraunces',Georgia,serif; --hc-body:'Inter',system-ui,-apple-system,sans-serif; --hc-mono:'IBM Plex Mono',ui-monospace,monospace; /* Escala modular (cada nivel = un rol, no un tamaño al azar) */ --hc-fs-display:clamp(2.7rem,7vw,4.6rem); /* tesis / hero */ --hc-fs-h2:clamp(2.1rem,5vw,3.3rem); /* título de sección */ --hc-fs-h3:clamp(1.3rem,2.6vw,1.7rem); /* título de bloque/tarjeta */ --hc-fs-stat:clamp(2.4rem,6vw,4rem); /* número grande (prueba) */ --hc-fs-lead:clamp(1.08rem,1.6vw,1.26rem); /* subtítulo de apoyo */ --hc-fs-body:1.0625rem; /* cuerpo */ --hc-fs-sm:.9375rem; /* secundario */ --hc-fs-eyebrow:.72rem; /* etiqueta */ /* ── ESPACIO (ritmo 4-base) ──────────────────────────── */ --hc-s1:.25rem; --hc-s2:.5rem; --hc-s3:.75rem; --hc-s4:1rem; --hc-s6:1.5rem; --hc-s8:2rem; --hc-s10:2.5rem; --hc-s12:3rem; --hc-s16:4rem; --hc-s20:5rem; --hc-s24:6rem; --hc-section-y:clamp(4rem,11vw,7rem); /* aire vertical de sección */ --hc-container:1200px; --hc-px:clamp(1.15rem,5vw,2.25rem); /* margen lateral */ --hc-gutter:clamp(1rem,2vw,1.5rem); /* canal del grid */ /* ── FORMA ───────────────────────────────────────────── */ --hc-r:14px; --hc-r-lg:22px; --hc-r-xl:30px; --hc-pill:999px; /* ── PROFUNDIDAD (lo que mata el "plano/flotante") ───── Sombras en capas + superficies con gradiente + glow. */ --hc-sh-sm:0 1px 2px rgba(10,22,40,.05); --hc-sh:0 2px 6px rgba(10,22,40,.05),0 18px 40px -20px rgba(10,22,40,.22); --hc-sh-lg:0 30px 70px -34px rgba(8,24,52,.55); --hc-sh-glow:0 0 0 1px rgba(91,157,255,.18),0 30px 80px -30px rgba(59,123,240,.5); --hc-surface-light:linear-gradient(180deg,#fff,#fafcff); --hc-surface-dark:linear-gradient(160deg,var(--hc-navy-2),var(--hc-deep)); --hc-z-nav:60; } /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--hc-body);color:var(--hc-ink);background:var(--hc-paper); font-size:var(--hc-fs-body);line-height:1.62;letter-spacing:-.011em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--hc-blue);color:#fff} :focus-visible{outline:2.5px solid var(--hc-blue);outline-offset:3px;border-radius:5px} /* ═══ LAYOUT (primitivas, no plantillas) ═══ */ .hc-container{width:100%;max-width:var(--hc-container);margin-inline:auto;padding-inline:var(--hc-px)} .hc-section{position:relative;padding-block:var(--hc-section-y)} /* Grid de 12 columnas — base de TODA composición. Las secciones se arman asignando spans distintos según el mensaje (eso da variedad con orden). */ .hc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--hc-gutter)} /* spans útiles (móvil = 1 columna; en ≥820px se reparten) */ .hc-col-4,.hc-col-5,.hc-col-6,.hc-col-7,.hc-col-8,.hc-col-12{grid-column:1/-1} /* ═══ SUPERFICIES (profundidad) ═══ */ .hc-tint{background:var(--hc-paper-2)} .hc-tint--texture{background: radial-gradient(circle at 1px 1px,rgba(59,123,240,.05) 1px,transparent 0) 0 0/22px 22px, var(--hc-paper-2)} .hc-dark{background:radial-gradient(120% 90% at 15% 0%,#0e2c54 0%,var(--hc-navy) 38%,var(--hc-deep) 100%);color:#fff} .hc-dark .hc-lead{color:#adc3e2} /* grano premium (sobre superficies oscuras) */ .hc-grain{position:relative} .hc-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} /* glow direccional (foco de luz con propósito) */ .hc-glow{position:absolute;width:60vw;height:60vw;max-width:560px;max-height:560px;border-radius:50%; background:radial-gradient(circle,rgba(91,157,255,.32),transparent 65%);filter:blur(8px);pointer-events:none} /* ═══ TIPOGRAFÍA ═══ */ .hc-display{font-family:var(--hc-display);font-weight:600;font-size:var(--hc-fs-display);line-height:.98;letter-spacing:-.03em} .hc-h2{font-family:var(--hc-display);font-weight:600;font-size:var(--hc-fs-h2);line-height:1.02;letter-spacing:-.022em} .hc-h3{font-family:var(--hc-display);font-weight:600;font-size:var(--hc-fs-h3);line-height:1.12;letter-spacing:-.02em} .hc-stat{font-family:var(--hc-display);font-weight:600;font-size:var(--hc-fs-stat);line-height:1;letter-spacing:-.03em} .hc-lead{font-size:var(--hc-fs-lead);line-height:1.55;color:var(--hc-ink-2);font-weight:400;letter-spacing:-.012em} /* Tipografía de precisión: titulares en dos líneas parejas, párrafos sin viudas */ h1,h2,h3,.hc-display,.hc-h2,.hc-h3{text-wrap:balance} p,.hc-lead,li{text-wrap:pretty} .hc-mono{font-family:var(--hc-mono);font-feature-settings:"tnum"} .hc-eyebrow{font-family:var(--hc-mono);font-size:var(--hc-fs-eyebrow);font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--hc-blue);display:inline-flex;align-items:center;gap:.6em} .hc-eyebrow::before{content:"";width:1.7em;height:1px;background:currentColor;opacity:.5} .hc-eyebrow--lite{color:var(--hc-blue-2)} /* acento bajo título (énfasis con propósito) */ .hc-accent-line{display:block;width:56px;height:3px;margin-top:1.15rem;border-radius:3px;background:linear-gradient(90deg,var(--hc-blue),var(--hc-blue-2))} /* ═══ BOTONES ═══ */ .hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--hc-body); font-weight:600;font-size:.97rem;letter-spacing:-.01em;padding:.95em 1.55em;border-radius:var(--hc-pill); border:1px solid transparent;cursor:pointer;line-height:1;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s} .hc-btn svg{width:1.05em;height:1.05em;transition:transform .2s} .hc-btn--primary{background:var(--hc-blue);color:#fff;box-shadow:0 10px 24px -10px rgba(59,123,240,.7);position:relative;overflow:hidden} .hc-btn--primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.32) 50%,transparent);transform:translateX(-130%) skewX(-18deg);transition:transform .05s} .hc-btn--primary:hover::after{transform:translateX(230%) skewX(-18deg);transition:transform .6s cubic-bezier(.2,.7,.3,1)} .hc-btn--primary:hover{background:#2f6be0;transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(59,123,240,.75)} .hc-btn--primary:hover svg{transform:translateX(3px)} /* Detalles de sistema — la marca hasta en lo que casi nadie mira */ ::selection{background:rgba(59,123,240,.28)} @media (pointer:fine){ html{scrollbar-width:thin;scrollbar-color:#a9bcd9 transparent} } @media (pointer:coarse){ footer.foot .foot-col a{padding:.6rem 0} footer.foot .foot-bot a{padding:.45rem .15rem;display:inline-block} .hc-btn:active{transform:scale(.97)} .hc-card:active,a.route:active,.hc-dxband:active{transform:scale(.988)} .dx-opt:active{transform:scale(.98)} .hc-dxpop .hc-btn:active,.hc-cookies .hc-btn:active{transform:scale(.96)} .foot-col a:active{color:#fff;transform:translateX(4px)} } /* ════════ AVISO DE COOKIES — consentimiento primero, con la voz de la casa ════════ */ .hc-cookies{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;max-width:30rem;margin-inline:auto; background:#fff;border:1px solid var(--hc-line);border-radius:var(--hc-r-xl); box-shadow:0 24px 60px -20px rgba(11,37,69,.35);padding:1.15rem 1.25rem;display:none} .hc-cookies.on{display:block;animation:hc-cook .5s cubic-bezier(.2,.7,.3,1) both} @keyframes hc-cook{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .hc-cookies p{font-size:.9rem;color:var(--hc-ink-2);line-height:1.55;margin:0} .hc-cookies p b{color:var(--hc-ink)} .hc-cookies p a{color:var(--hc-blue);text-decoration:underline;text-underline-offset:2px} .hc-cookies .row{display:flex;gap:.6rem;margin-top:.95rem;flex-wrap:wrap} .hc-cookies .row .hc-btn{padding:.55rem 1.05rem;font-size:.85rem} /* ════════ NAV VIVO — respira en el tope, se afirma al scrollear ════════ En reposo el nav es aireado y ligero; con el scroll se compacta, su fondo gana cuerpo y aparece una sombra suave: la barra "responde" al recorrido. Conducido por scroll nativo; degrada al nav estático actual sin soporte. */ @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .nav{animation:hc-nav linear both;animation-timeline:scroll();animation-range:0 140px} .nav .nav-in{animation:hc-navin linear both;animation-timeline:scroll();animation-range:0 140px} } } @keyframes hc-nav{ from{padding-block:.3rem;background:rgba(255,255,255,.6);box-shadow:0 0 0 rgba(11,37,69,0)} to{padding-block:0rem;background:rgba(255,255,255,.9);box-shadow:0 12px 32px -18px rgba(11,37,69,.22)} } @keyframes hc-navin{to{height:54px}} /* ════════ FOOTER — el último acto ════════ No un directorio: una despedida de marca. Marca de agua gigante emergiendo del fondo (detrás de todo), respiración editorial, hovers con vida. Todo con especificidad footer.foot para gobernar sobre los estilos inline por página. */ footer.foot{position:relative;overflow:hidden;padding-block:clamp(4rem,10vw,5.6rem) 2.2rem} footer.foot::after{content:"Hercob";position:absolute;left:50%;bottom:-.24em;transform:translateX(-50%); font-family:var(--hc-display);font-weight:700;font-size:clamp(6rem,17vw,13rem);letter-spacing:-.05em;line-height:1; color:rgba(255,255,255,.035);pointer-events:none;user-select:none;white-space:nowrap} footer.foot .hc-container{position:relative;z-index:1} footer.foot .brand{font-size:1.42rem} footer.foot .foot-blurb{font-size:.98rem;color:#c2d4ee;line-height:1.65} footer.foot .foot-col a{transition:color .15s ease,transform .18s ease} footer.foot .foot-col a:hover{color:#fff;transform:translateX(4px)} footer.foot .foot-bot{border-top:0;position:relative;color:#7f95b8} footer.foot .foot-bot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,203,233,.28) 50%,transparent)} .hc-btn--ghost{background:transparent;border-color:var(--hc-line-2);color:var(--hc-ink)} .hc-dark .hc-btn--ghost,.hc-on-dark .hc-btn--ghost{border-color:var(--hc-line-d);color:#fff} .hc-btn--ghost:hover{border-color:var(--hc-blue);color:var(--hc-blue);transform:translateY(-2px)} .hc-dark .hc-btn--ghost:hover,.hc-on-dark .hc-btn--ghost:hover{color:#fff;border-color:rgba(255,255,255,.5)} /* ═══ COMPONENTES (bloques para componer) ═══ */ /* Tarjeta — superficie elevada con profundidad real */ .hc-card{position:relative;padding:2.1rem 1.95rem;border-radius:var(--hc-r-lg);background:var(--hc-surface-light); border:1px solid var(--hc-line);box-shadow:var(--hc-sh-sm);overflow:hidden; transition:transform .22s,box-shadow .22s,border-color .22s} .hc-card:hover{transform:translateY(-5px);box-shadow:var(--hc-sh);border-color:var(--hc-line-2)} .hc-card__idx{font-family:var(--hc-mono);font-size:.7rem;color:var(--hc-blue);letter-spacing:.1em} .hc-card h3{font-family:var(--hc-display);font-size:1.42rem;color:var(--hc-ink);margin-top:1rem} .hc-card p{margin-top:.65rem;color:var(--hc-ink-3);font-size:1.02rem;line-height:1.55} /* Panel oscuro — para afirmaciones/manifiestos con peso */ .hc-panel{position:relative;overflow:hidden;padding:1.9rem;border-radius:var(--hc-r-xl); background:var(--hc-surface-dark);color:#fff;box-shadow:var(--hc-sh-lg)} .hc-panel h3{font-family:var(--hc-display);color:#fff;font-size:clamp(1.5rem,3vw,1.9rem)} .hc-panel p{margin-top:.7rem;color:#a6bcdc;font-size:var(--hc-fs-sm);line-height:1.55;max-width:46ch} /* Chip / etiqueta */ .hc-chip{font-family:var(--hc-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase; color:var(--hc-ink-2);border:1px solid var(--hc-line-2);border-radius:var(--hc-pill);padding:.55em 1.05em;background:var(--hc-paper)} /* ═══ MOVIMIENTO (revelado robusto: visible aunque falle el JS) ═══ */ .hc-reveal{} .js .hc-reveal{opacity:0;transform:translateY(20px); transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--rev-i,0)*var(--rev-step,80ms))} .js .hc-reveal.in{opacity:1;transform:none} /* ═══ RESPONSIVE: el grid se reparte en ≥820px ═══ */ @media (min-width:820px){ .hc-col-4{grid-column:span 4} .hc-col-5{grid-column:span 5} .hc-col-6{grid-column:span 6} .hc-col-7{grid-column:span 7} .hc-col-8{grid-column:span 8} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} html{scroll-behavior:auto}.js .hc-reveal{opacity:1;transform:none;transition-delay:0ms} } /* ════════ PROFUNDIDAD DEL SISTEMA v2 — fondos con vida + elevación real ════════ Antes el fondo era casi blanco plano y se sentía vacío. Ahora cada sección clara tiene halos muy tenues de color de marca (azul arriba, teal abajo) sobre un gradiente perceptiblemente más frío que el blanco. Las superficies tint van un tono más marcado para que la alternancia entre secciones SE NOTE. Sombras en dos capas, más presentes, para que tarjetas y paneles se asienten en vez de flotar. Sin scope a `main` (index no lo tiene): aplica a TODAS las páginas. */ .hc-section:not(.hc-dark):not(.hc-tint):not(.hc-tint--texture){ background: radial-gradient(72% 58% at 12% -6%,rgba(59,123,240,.11),transparent 60%), radial-gradient(64% 54% at 106% 110%,rgba(63,182,160,.09),transparent 55%), linear-gradient(180deg,#fbfcfe 0%,#e9f0fa 100%); } .hc-section.hc-tint,.hc-section.hc-tint--texture{ background-color:#e3ebf7; background-image:radial-gradient(70% 62% at 88% 0,rgba(59,123,240,.15),transparent 55%); } .hc-section.hc-tint--texture{ background-image: radial-gradient(rgba(11,37,69,.06) 1px,transparent 1.4px), radial-gradient(70% 62% at 88% 0,rgba(59,123,240,.15),transparent 55%); background-size:23px 23px,auto; } .hc-section:not(.hc-dark)+.hc-section:not(.hc-dark)::before{content:"";position:absolute;top:0;left:var(--hc-px);right:var(--hc-px);height:1px;background:linear-gradient(90deg,transparent,var(--hc-line-2) 50%,transparent)} .hc-card{box-shadow:0 1px 2px rgba(11,37,69,.05),0 18px 38px -18px rgba(11,37,69,.22)} .hc-card:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(11,37,69,.06),0 32px 62px -22px rgba(11,37,69,.30)} /* ════════ COREOGRAFÍA DE CAPÍTULO — las secciones navy LLEGAN, no aparecen ════════ El cambio de etapa no es el color: es el movimiento. Conducido por el scroll (no por tiempo), la sección oscura entra elevándose y asentándose como un objeto que ocupa el escenario. Solo capítulos (.hc-section.hc-dark), nunca heros. Degrada a estático sin soporte y respeta reduced-motion. */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .hc-section.hc-dark{animation:hc-chapter linear both;animation-timeline:view();animation-range:entry 0% entry 45%;transform-origin:50% 100%;will-change:transform} } } @keyframes hc-chapter{ 0%{transform:translateY(var(--hc-chy,96px)) scale(.955)} 55%{transform:translateY(var(--hc-chy-mid,20px)) scale(.988)} 100%{transform:none} } @media (max-width:600px){.hc-section.hc-dark{--hc-chy:56px;--hc-chy-mid:12px}} /* Botón secundario suave — relleno tenue. Para acciones secundarias junto a un primario sólido (p. ej. planes no destacados). Completa la familia ghost/primary. */ .hc-btn--soft{background:var(--hc-blue-soft);color:var(--hc-blue);border:1px solid transparent} .hc-btn--soft:hover{background:var(--hc-blue);color:#fff} /* Foco visible — navegación por teclado clara. Accesibilidad real y detalle de firma que distingue una web cuidada. Solo aparece con teclado, no con clic. */ a:focus-visible,button:focus-visible,summary:focus-visible,.hc-btn:focus-visible{outline:2px solid var(--hc-blue);outline-offset:3px} /* ════════ PUERTAS DEL DIAGNÓSTICO ════════ */ .hc-dxband-sec{padding-block:clamp(1.2rem,4vw,2.4rem)} .hc-dxband{background:radial-gradient(120% 170% at 85% -20%,#1d4a8a 0%,#0f2c55 55%,#0a1f3d 100%);border:1px solid rgba(255,255,255,.09);border-radius:var(--hc-r-xl);padding:clamp(1.5rem,4.5vw,2.1rem) clamp(1.3rem,4vw,2.3rem);display:grid;gap:1.2rem;color:#fff;box-shadow:0 30px 70px -25px rgba(7,20,42,.55)} .hc-dxband .k{font-family:var(--hc-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#9fc0f2} .hc-dxband .t{font-family:var(--hc-display);font-weight:600;font-size:clamp(1.3rem,4vw,1.7rem);letter-spacing:-.02em;line-height:1.2;margin-top:.5rem;text-wrap:balance} .hc-dxband .s{color:#bcd0ec;font-size:.95rem;line-height:1.5;margin-top:.4rem} @media (min-width:760px){.hc-dxband{grid-template-columns:1fr auto;align-items:center}} .hc-dxpop{position:fixed;right:1rem;bottom:1rem;z-index:70;max-width:19.5rem;background:#fff;border:1px solid var(--hc-line);border-radius:var(--hc-r-xl);box-shadow:0 24px 60px -20px rgba(11,37,69,.4);padding:1.15rem 1.2rem;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.3,1)} .hc-dxpop.on{opacity:1;transform:none;pointer-events:auto} .hc-dxpop .k{font-family:var(--hc-mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--hc-blue)} .hc-dxpop p{font-family:var(--hc-display);font-weight:600;font-size:1.08rem;letter-spacing:-.015em;line-height:1.25;color:var(--hc-ink);margin:.5rem 0 .9rem;text-wrap:balance} .hc-dxpop .hc-btn{padding:.55rem 1rem;font-size:.85rem} .hc-dxpop .x{position:absolute;top:.5rem;right:.6rem;font:inherit;font-size:1.05rem;line-height:1;color:var(--hc-ink-3);background:none;border:0;cursor:pointer;padding:.35rem} .hc-dxpop .x:hover{color:var(--hc-ink)} @media (max-width:600px){.hc-dxpop{left:1rem;right:1rem;max-width:none}}