/* =========================================
NOUS GRÁFICA — style.css v2
Sistema tipográfico: Inter / sans grotesca
========================================= */
/* Las fuentes se cargan desde el + en el de cada página —
NO uses @import aquí: duplicaría la descarga y bloquea el render más que un . */
/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #f7f7f0;
--blue: #0b2551;
--dark: #111111;
--white: #ffffff;
--gray: #6b6b6b;
--light: #e4e4dc;
--font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--nav-h: 68px;
--max: 1360px;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--dark);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
font-weight: 400;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: auto;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; }
*, a, button { cursor: pointer; }
/* ---- TIPOGRAFÍA BASE ---- */
h1, h2, h3, h4 {
font-family: var(--font);
line-height: 1.05;
letter-spacing: -0.03em;
}
.label {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gray);
}
/* ---- BUTTONS ---- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.95rem 2rem;
transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
cursor: none;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--blue); color: var(--white);
border: 1.5px solid var(--blue);
}
.btn--primary:hover { background: var(--dark); border-color: var(--dark); }
.btn--ghost {
background: transparent; color: var(--dark);
border: 1.5px solid rgba(17,17,17,0.3);
}
.btn--ghost:hover { border-color: var(--dark); background: var(--dark); color: var(--white); }
.btn--dark {
background: var(--dark); color: var(--white);
border: 1.5px solid var(--dark);
}
.btn--dark:hover { background: var(--blue); border-color: var(--blue); }
.btn--outline {
background: transparent; color: var(--dark);
border: 1.5px solid rgba(17,17,17,0.25);
font-size: 0.74rem;
}
.btn--outline:hover { border-color: var(--dark); background: var(--dark); color: var(--white); }
.btn--full { width: 100%; justify-content: center; }
/* ---- NAV ---- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nav-h);
z-index: 1000;
transition: background 0.4s ease, border-bottom 0.4s ease;
}
.nav.scrolled {
background: rgba(247,247,240,0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--light);
}
.nav.nav--menu-open {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.nav__inner {
max-width: var(--max);
margin: 0 auto;
padding: 0 2.5rem;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo como imagen — tamaño medio, bien integrado en el nav de 68px de alto */
.nav__logo img {
height: 36px;
width: auto;
display: block;
transition: opacity 0.2s;
}
.nav__logo:hover img { opacity: 0.75; }
/* Fallback texto si no hay imagen */
.nav__logo-text {
font-size: 1.35rem;
font-weight: 800;
letter-spacing: 0.2em;
color: var(--blue);
text-transform: uppercase;
}
.nav__links {
display: flex;
list-style: none;
gap: 2.5rem;
align-items: center;
}
.nav__links a {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dark);
transition: color 0.2s;
position: relative;
}
.nav__links a::after {
content: '';
position: absolute;
bottom: -2px; left: 0;
width: 0; height: 1.5px;
background: var(--blue);
transition: width 0.3s var(--ease);
}
.nav__links a:hover { color: var(--blue); }
.nav__links a:hover::after,
.nav__links a.active::after { width: 100%; }
.nav__links a.active { color: var(--blue); }
.nav__cta {
background: var(--blue) !important;
color: var(--white) !important;
padding: 0.6rem 1.4rem;
font-size: 0.74rem !important;
transition: background 0.25s !important;
}
.nav__cta::after { display: none !important; }
.nav__cta:hover { background: var(--dark) !important; color: var(--white) !important; }
/* Burger */
.nav__burger {
display: none;
flex-direction: column;
gap: 6px;
padding: 4px;
background: none;
border: none;
}
.nav__burger span {
display: block;
width: 26px; height: 1.5px;
background: var(--dark);
transition: transform 0.3s, opacity 0.3s;
transform-origin: center;
}
.nav__burger.open span:first-child { transform: translateY(7.5px) rotate(45deg); }
.nav__burger.open span:last-child { transform: translateY(-7.5px) rotate(-45deg); }
/* Mobile menu — panel deslizante desde la derecha, con entrada escalonada
de los enlaces (no un simple fade). display:none→flex no se puede animar,
así que usamos visibility + transform, que sí son animables. */
.nav__mobile {
position: fixed;
inset: var(--nav-h) 0 0 0;
background: var(--bg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999;
visibility: hidden;
transform: translateX(100%);
transition: transform 0.5s var(--ease), visibility 0.5s;
}
.nav__mobile.open {
visibility: visible;
transform: translateX(0);
}
.nav__mobile ul { list-style: none; text-align: center; }
.nav__mobile ul li {
margin: 1rem 0;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.nav__mobile.open ul li { opacity: 1; transform: translateY(0); }
.nav__mobile.open ul li:nth-child(1) { transition-delay: 0.12s; }
.nav__mobile.open ul li:nth-child(2) { transition-delay: 0.18s; }
.nav__mobile.open ul li:nth-child(3) { transition-delay: 0.24s; }
.nav__mobile.open ul li:nth-child(4) { transition-delay: 0.3s; }
.nav__mobile ul a {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--dark);
text-transform: uppercase;
transition: color 0.2s;
}
.nav__mobile ul a:hover { color: var(--blue); }
/* Navegación sobre fondos oscuros */
.nav--light .nav__links a{
color: var(--white);
}
.nav--light .nav__links a::after{
background: var(--white);
}
.nav--light .nav__links a:hover,
.nav--light .nav__links a.active{
color: var(--white);
}
.nav--light .nav__logo-text{
color: var(--white);
}
.nav--light.scrolled{
background: rgba(247,247,240,.96);
}
.nav--light.scrolled .nav__links a{
color: var(--dark);
}
.nav--light.scrolled .nav__links a::after{
background: var(--blue);
}
.nav--light.scrolled .nav__links a:hover,
.nav--light.scrolled .nav__links a.active{
color: var(--blue);
}
.nav--light.scrolled .nav__logo-text{
color: var(--blue);
}
/* ---- REVEAL ---- */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ---- HERO ---- */
.hero {
min-height: 100svh;
display: flex;
align-items: flex-end;
padding: calc(var(--nav-h) + 6rem) 2.5rem 6rem;
max-width: var(--max);
margin: 0 auto;
position: relative;
}
.hero__eyebrow {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2.5rem;
transition-delay: 0.05s;
}
.hero__eyebrow::before {
content: '';
display: block;
width: 32px; height: 1.5px;
background: var(--gray);
}
.hero__title {
font-size: clamp(3.5rem, 8.5vw, 9rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.04em;
margin-bottom: 3rem;
text-transform: uppercase;
transition-delay: 0.15s;
}
.hero__title span { color: var(--blue); }
.hero__bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3rem;
width: 100%;
flex-wrap: wrap;
transition-delay: 0.3s;
}
.hero__sub {
max-width: 380px;
}
.hero__sub p {
font-size: 0.95rem;
color: var(--gray);
line-height: 1.75;
margin-bottom: 2rem;
}
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero__stats {
display: flex;
gap: 3rem;
align-items: flex-end;
flex-shrink: 0;
}
.hero__stat-num {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--dark);
}
.hero__stat-label {
font-size: 0.68rem;
color: var(--gray);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.3rem;
}
.hero__scroll-indicator {
position: absolute;
right: 2.5rem;
bottom: 6rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
opacity: 0.35;
}
.hero__scroll-indicator span {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
writing-mode: vertical-rl;
}
.hero__scroll-line {
width: 1px; height: 56px;
background: var(--dark);
animation: scrollDrop 1.8s ease-in-out infinite;
transform-origin: top center;
}
@keyframes scrollDrop {
0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
51% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
/* ---- SOBRE ---- */
.sobre {
border-top: 1px solid var(--light);
padding: 9rem 2.5rem;
position: relative;
overflow: hidden;
}
.sobre__inner {
max-width: var(--max);
margin: 0 auto;
position: relative;
z-index: 1;
}
.sobre__label { margin-bottom: 2.5rem; }
/* Manifiesto: cada línea es su propio .reveal con transition-delay creciente,
así que al entrar en viewport el texto "se dispara" línea a línea — la
sensación de tipografía cinética que pide la marca, sin scroll-jacking
ni animaciones costosas atadas al scroll (mejor rendimiento y accesibilidad). */
.sobre__manifesto {
display: block;
font-size: clamp(2.2rem, 5.2vw, 5rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.08;
max-width: 20ch;
}
.sobre__manifesto span {
display: block;
}
.sobre__manifesto em {
font-style: normal;
color: var(--blue);
}
.sobre__manifesto-accent { color: var(--blue); }
.sobre__rule {
width: 100%;
height: 1px;
background: var(--light);
margin: 4.5rem 0 3.5rem;
transform: scaleX(0);
transform-origin: left;
transition: transform 1s var(--ease);
}
.sobre__rule.visible { transform: scaleX(1); }
.sobre__meta {
display: grid;
grid-template-columns: 1fr 1.6fr auto;
gap: 4rem;
align-items: start;
}
.sobre__credits {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sobre__credit {
font-size: 0.78rem;
color: var(--gray);
letter-spacing: 0.02em;
}
.sobre__credit span {
display: block;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--dark);
margin-bottom: 0.15rem;
}
.sobre__text {
font-size: 0.92rem;
color: var(--gray);
line-height: 1.85;
max-width: 46ch;
}
.sobre__link {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue);
transition: gap 0.3s var(--ease);
white-space: nowrap;
justify-self: end;
}
.sobre__link:hover { gap: 1.5rem; }
/* Palabra gigante de fondo, muy tenue — el mismo recurso que ya usas en
.proyecto-hero__bg-text, reutilizado aquí para dar profundidad sin imágenes */
.sobre__bg-text {
position: absolute;
top: 50%;
right: -2%;
transform: translateY(-50%);
font-size: clamp(8rem, 22vw, 20rem);
font-weight: 900;
letter-spacing: -0.05em;
color: rgba(11,37,81,0.03);
line-height: 1;
white-space: nowrap;
user-select: none;
pointer-events: none;
z-index: 0;
}
/* ---- PROYECTOS HOME ---- */
.proyectos-home {
border-top: 1px solid var(--light);
padding: 7rem 2.5rem;
}
.proyectos-home__inner { max-width: var(--max); margin: 0 auto; }
.proyectos-home__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4rem;
}
.proyectos-home__all {
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blue);
transition: opacity 0.2s;
}
.proyectos-home__all:hover { opacity: 0.6; }
/* Grid asimétrico */
.proyectos-home__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
grid-template-rows: auto;
gap: 1.5rem;
}
.proyecto-card {
position: relative;
overflow: hidden;
}
.proyecto-card__img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
}
.proyecto-card:first-child .proyecto-card__img {
aspect-ratio: 3 / 4;
}
.proyecto-card__placeholder {
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
font-weight: 800;
letter-spacing: -0.05em;
color: rgba(247,247,240,0.15);
text-transform: uppercase;
transition: transform 0.6s var(--ease);
}
.proyecto-card:first-child .proyecto-card__placeholder { font-size: 5rem; }
/* Overlay en hover */
.proyecto-card__overlay {
position: absolute;
inset: 0;
background: rgba(11,37,81,0.0);
transition: background 0.4s ease;
display: flex;
align-items: flex-end;
padding: 1.5rem;
}
.proyecto-card:hover .proyecto-card__overlay {
background: rgba(11,37,81,0.45);
}
.proyecto-card:hover .proyecto-card__placeholder { transform: scale(1.04); }
.proyecto-card__info {
padding: 1.2rem 0.25rem 0;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.proyecto-card__meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.proyecto-card__cat {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray);
}
.proyecto-card__title {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.proyecto-card__arrow {
font-size: 1.1rem;
color: var(--gray);
transition: transform 0.25s, color 0.25s;
}
.proyecto-card:hover .proyecto-card__arrow {
transform: translate(3px, -3px);
color: var(--blue);
}
.proyecto-card__link {
position: absolute;
inset: 0;
z-index: 2;
}
/* ---- SERVICIOS HOME ---- */
.servicios-home {
border-top: 1px solid var(--light);
background: var(--blue);
padding: 7rem 2.5rem;
}
.servicios-home__inner {
max-width: var(--max);
margin: 0 auto;
}
.servicios-home__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: end;
margin-bottom: 5rem;
}
.servicios-home__label {
color: rgba(247,247,240,0.45);
margin-bottom: 1.5rem;
}
.servicios-home__title {
font-size: clamp(2rem, 3.5vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.04em;
text-transform: uppercase;
color: var(--white);
line-height: 1.05;
}
/* SERVICIOS — lista fluida, sin tarjetas ni bordes en caja.
Cada fila es un enlace completo (mejor CRO: todo el bloque es clicable,
no solo un "saber más" de 12px). El tinte de hover entra desde la izquierda,
patrón clásico de estudios editoriales tipo Lokomotive / Chi Dia Studio. */
.servicios-list {
border-top: 1px solid rgba(247,247,240,0.15);
}
.servicios-list__row {
position: relative;
display: grid;
grid-template-columns: 3rem 1fr auto 2rem;
align-items: center;
gap: 2rem;
padding: 2.5rem 1.5rem;
border-bottom: 1px solid rgba(247,247,240,0.15);
overflow: hidden;
}
.servicios-list__row::before {
content: '';
position: absolute;
inset: 0;
background: rgba(247,247,240,0.05);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease);
z-index: 0;
}
.servicios-list__row:hover::before { transform: scaleX(1); }
.servicios-list__num {
position: relative; z-index: 1;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.15em;
color: rgba(247,247,240,0.35);
font-variant-numeric: tabular-nums;
transition: color 0.3s;
}
.servicios-list__row:hover .servicios-list__num { color: var(--white); }
.servicios-list__name {
position: relative; z-index: 1;
font-size: clamp(1.5rem, 3vw, 2.6rem);
font-weight: 800;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--white);
line-height: 1;
}
.servicios-list__name span { color: rgba(247,247,240,0.4); }
.servicios-list__row:hover .servicios-list__name span { color: rgba(247,247,240,0.75); }
.servicios-list__desc {
position: relative; z-index: 1;
font-size: 0.82rem;
color: rgba(247,247,240,0.45);
line-height: 1.6;
max-width: 26ch;
text-align: right;
}
.servicios-list__arrow {
position: relative; z-index: 1;
font-size: 1.3rem;
color: rgba(247,247,240,0.35);
transition: transform 0.3s var(--ease), color 0.3s;
justify-self: end;
}
.servicios-list__row:hover .servicios-list__arrow {
color: var(--white);
transform: translateX(6px);
}
/* TABLET */
@media (max-width: 1200px) {
.servicios-list__row {
grid-template-columns: 2.5rem 1fr auto;
gap: 1.25rem;
}
.servicios-list__desc { display: none; }
}
/* Los componentes de página de proyecto (.proyecto-cartel, .proyecto-img-3col,
.proyecto-img-block...) vivían aquí duplicados con valores distintos a los de
proyecto.css — un conflicto silencioso según qué archivo se cargara en último
lugar. Todo eso ahora vive solo en proyecto.css. */
/* MÓVIL */
@media (max-width: 768px) {
.servicios-home__head {
grid-template-columns: 1fr;
gap: 2rem;
}
.servicios-list__row {
grid-template-columns: 2rem 1fr;
padding: 1.75rem 0.5rem;
}
.servicios-list__arrow { display: none; }
}
/* ---- CLIENTES MARQUEE ---- */
.clientes {
border-top: 1px solid var(--light);
padding: 5rem 0;
overflow: hidden;
}
.clientes__label {
text-align: center;
margin-bottom: 3rem;
padding: 0 2.5rem;
}
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track {
display: inline-flex;
align-items: center;
gap: 3rem;
animation: marqueeRoll 30s linear infinite;
}
.marquee__track span {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dark);
white-space: nowrap;
opacity: 0.7;
transition: opacity 0.2s;
}
.marquee__track span:hover { opacity: 1; }
.marquee__track .sep {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--light);
flex-shrink: 0;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeRoll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---- CTA FINAL ---- */
.cta-final {
border-top: 1px solid var(--light);
padding: 10rem 2.5rem;
position: relative;
overflow: hidden;
}
.cta-final__inner {
max-width: var(--max);
margin: 0 auto;
position: relative;
z-index: 1;
}
.cta-final__label { margin-bottom: 2rem; }
.cta-final__title {
font-size: clamp(2.8rem, 6vw, 6.5rem);
font-weight: 800;
letter-spacing: -0.04em;
text-transform: uppercase;
line-height: 1;
margin-bottom: 3.5rem;
max-width: 900px;
}
.cta-final__title span { color: var(--blue); }
.cta-final__deco {
position: absolute;
right: -3rem;
top: 50%;
transform: translateY(-50%);
font-size: clamp(10rem, 22vw, 22rem);
font-weight: 900;
letter-spacing: -0.06em;
text-transform: uppercase;
color: var(--light);
line-height: 1;
user-select: none;
pointer-events: none;
}
/* ---- FOOTER ---- */
.footer {
background: var(--dark);
color: var(--white);
padding: 5rem 2.5rem 2.5rem;
}
.footer__inner { max-width: var(--max); margin: 0 auto; }
.footer__top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__logo img { height: 26px; width: auto; margin-bottom: 1.2rem; }
.footer__logo-text {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bg);
margin-bottom: 1rem;
}
.footer__brand p {
font-size: 0.82rem;
color: rgba(255,255,255,0.38);
line-height: 1.8;
max-width: 290px;
}
.footer__col-title {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.28);
margin-bottom: 1.75rem;
}
.footer__col ul { list-style: none; }
.footer__col ul li { margin-bottom: 0.85rem; }
.footer__col ul a {
font-size: 0.88rem;
color: rgba(255,255,255,0.58);
transition: color 0.2s;
font-weight: 400;
}
.footer__col ul a:hover { color: var(--white); }
.footer__bottom {
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer__bottom span {
font-size: 0.72rem;
color: rgba(255,255,255,0.2);
letter-spacing: 0.04em;
}
.back-top {
width: 42px; height: 42px;
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.45);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all 0.25s;
font-family: var(--font);
}
.back-top:hover {
border-color: var(--white);
color: var(--white);
background: rgba(255,255,255,0.06);
}
/* ---- CURSOR PERSONALIZADO ----
Los elementos ya existían en el HTML pero nunca tuvieron estilo base:
sin esto, el cursor a medida no se veía en absoluto. */
#cursor-dot, #cursor-ring {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 999;
border-radius: 50%;
transform: translate(-50%, -50%);
}
#cursor-dot {
width: 6px; height: 6px;
background: var(--blue);
}
#cursor-ring {
width: 34px; height: 34px;
border: 1.5px solid var(--blue);
transition: width 0.25s var(--ease), height 0.25s var(--ease), opacity 0.25s;
opacity: 0.5;
}
#cursor-ring.cursor-hover {
width: 52px; height: 52px;
opacity: 0.9;
}
/* ---- PAGE HEADER ---- */
.page-header {
padding: calc(var(--nav-h) + 7rem) 2.5rem 6rem;
max-width: var(--max);
margin: 0 auto;
position: relative;
border-bottom: 1px solid var(--light);
}
.page-header__label { margin-bottom: 2rem; transition-delay: 0.05s; }
.page-header__title {
font-size: clamp(3rem, 7vw, 7.5rem);
font-weight: 800;
letter-spacing: -0.04em;
text-transform: uppercase;
line-height: 0.97;
transition-delay: 0.15s;
max-width: 900px;
}
.page-header__title span { color: var(--blue); }
.page-header__sub {
max-width: 500px;
margin-top: 2.5rem;
font-size: 0.95rem;
color: var(--gray);
line-height: 1.8;
transition-delay: 0.25s;
}
.page-header__num {
position: absolute;
right: 2.5rem;
top: calc(var(--nav-h) + 2.5rem);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--light);
}
.page-header__actions {
margin-top: 3rem;
transition-delay: 0.35s;
}
/* ---- SERVICIOS PAGE — ver bloque .servicios-page más abajo (rediseño completo) ---- */
/* ---- PROYECTOS PAGE — ver bloque .proyectos-page más abajo ---- */
/* =====================================
GALERÍA RUSOWSKY
===================================== */
/* La galería de Rusowsky (2 columnas + imagen destacada a ancho completo)
vivía aquí, solo para esta página — con .img-3 encima, una clase global
sin prefijo alguno. Ahora es .proyecto-editorial en proyecto.css. */
/* ===========================
GALERÍA TAPASITO
=========================== */
/* La galería de Tapasito (2 columnas, mezcla vertical/horizontal) vivía aquí,
solo para esta página, y su nombre de clase (.proyecto-galeria) chocaba con
el sistema genérico que ya usa HSTLR. Ahora es .proyecto-mosaic en
proyecto.css — orientación declarada por el propio contenido (vertical /
horizontal), no atada a una posición ni a un número fijo de fotos. */
/* Los bloques .antiguoko-reels y .valoracionanti vivían aquí, en el CSS
global, siendo exclusivos de una sola página. Trasladados a proyecto.css. */
/* ==========================
FOTO GRID — ver .foto-grid / .foto-item bajo el bloque .proyectos-page
========================== */
/* La galería de San Marcial (banner + 3 fotos) vivía aquí como CSS a medida,
solo para esta página, dentro del archivo global — mismo problema que ya
resolvimos con .proyecto-cartel. Ahora usa .proyecto-img-full +
.proyecto-img-3col en proyecto.css, la misma mecánica que RAKS y HSTLR. */
/* ==========================
TABLET / MOBILE — reglas de .foto-item--w5/w6/w7/w8 eliminadas:
esas clases ya no existen en ningún HTML del sitio.
========================== */
/* ---- CONTACTO PAGE — ver bloque .contacto-page aislado al final del archivo ---- */
/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
.servicios-home__head { grid-template-columns: 1fr; gap: 1.5rem; }
.sobre__manifesto { max-width: 26ch; }
.proyectos-home__grid { grid-template-columns: 1fr 1fr; }
.proyectos-home__grid .proyecto-card:first-child { grid-column: span 2; }
.footer__top { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: span 2; }
}
@media (max-width: 768px) {
:root { --nav-h: 60px; }
body { cursor: auto; }
#cursor-ring, #cursor-dot { display: none; }
* { cursor: auto !important; }
.nav__links { display: none; }
.nav__burger { display: flex; }
.nav__mobile { display: flex; }
.hero { padding: calc(var(--nav-h) + 3rem) 1.5rem 4rem; min-height: 100svh; }
.hero__scroll-indicator { display: none; }
.hero__stats { display: none; }
.hero__bottom { flex-direction: column; align-items: flex-start; }
.sobre { padding: 5rem 1.5rem; }
.sobre__manifesto { max-width: none; }
.sobre__meta { grid-template-columns: 1fr; gap: 2rem; }
.sobre__link { justify-self: start; }
.proyectos-home { padding: 5rem 1.5rem; }
.proyectos-home__grid { grid-template-columns: 1fr; }
.proyectos-home__grid .proyecto-card:first-child { grid-column: auto; }
.servicios-home { padding: 5rem 1.5rem; }
.clientes { padding: 3.5rem 0; }
.cta-final { padding: 6rem 1.5rem; }
.cta-final__deco { display: none; }
.footer { padding: 4rem 1.5rem 2rem; }
.footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
.footer__brand { grid-column: auto; }
.page-header { padding: calc(var(--nav-h) + 4rem) 1.5rem 4rem; }
}
@media (max-width: 480px) {
.hero__title { font-size: 3rem; }
.hero__actions { flex-direction: column; }
.hero__actions .btn { width: 100%; justify-content: center; }
.nav__mobile ul a { font-size: 2rem; }
.cta-final__title { font-size: 2.5rem; }
}
/* =========================================
PROYECTOS.HTML — bloque aislado y autocontenido.
Todo prefijado con .proyectos-page / .proj-* para que nada de esto
pueda chocar con .svc*, .p-item, .servicio-full o cualquier clase
de index.html / servicios.html, tal y como se pidió.
========================================= */
.proyectos-page .portfolio-section {
max-width: var(--max);
margin: 0 auto;
padding: 5rem 2.5rem 2rem;
}
.proyectos-page .portfolio-section__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 3rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--light);
}
.proyectos-page .portfolio-section__head h2 {
font-size: clamp(1rem, 2vw, 1.6rem);
font-weight: 700;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.proyectos-page .portfolio-section__count {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.15em;
color: var(--gray);
}
/* Grid portfolio tipo archivo curado: hero de 8 columnas + 4 tarjetas de 4 */
.proyectos-page .portfolio-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
.proyectos-page .p-item { position: relative; overflow: hidden; }
.proyectos-page .p-item--w8 { grid-column: span 8; }
.proyectos-page .p-item--w4 { grid-column: span 4; }
.proyectos-page .p-item__img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.proyectos-page .p-item--w8 .p-item__img { aspect-ratio: 16 / 9; }
.proyectos-page .p-item__img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease);
}
.proyectos-page .p-item:hover .p-item__img img { transform: scale(1.04); }
/* Overlay de hover: gradiente azul-marca + "Ver proyecto" que sube desde abajo */
.proyectos-page .p-item__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(11,37,81,0.6) 0%, rgba(11,37,81,0) 55%);
opacity: 0;
transition: opacity 0.35s ease;
display: flex;
align-items: flex-end;
padding: 1.5rem;
pointer-events: none;
}
.proyectos-page .p-item:hover .p-item__overlay { opacity: 1; }
.proyectos-page .p-item__overlay span {
color: var(--bg);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transform: translateY(10px);
transition: transform 0.4s var(--ease);
}
.proyectos-page .p-item:hover .p-item__overlay span { transform: translateY(0); }
.proyectos-page .p-item__info {
padding: 1rem 0.2rem 0;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.proyectos-page .p-item__cat {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray);
display: block;
margin-bottom: 0.2rem;
}
.proyectos-page .p-item__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.proyectos-page .p-item__desc { font-size: 0.8rem; color: var(--gray); margin-top: 0.35rem; }
.proyectos-page .p-item__arrow {
font-size: 1.1rem;
color: var(--gray);
flex-shrink: 0;
transition: transform 0.25s, color 0.25s;
}
.proyectos-page .p-item:hover .p-item__arrow { color: var(--blue); transform: translate(3px, -3px); }
/* ---- FOTO GRID — BENTO: hero (8×2) + 2 apiladas (4) ---- */
.proyectos-page .foto-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.proyectos-page .foto-item { position: relative; display: flex; flex-direction: column; }
.proyectos-page .foto-item--hero { grid-column: span 8; grid-row: span 2; }
.proyectos-page .foto-item--hero .foto-item__img { height: 100%; aspect-ratio: auto; }
.proyectos-page .foto-item--stack { grid-column: span 4; }
.proyectos-page .foto-item--stack .foto-item__img { aspect-ratio: 1 / 1; }
.proyectos-page .foto-item__img { position: relative; overflow: hidden; background: #111; }
.proyectos-page .foto-item__img img {
width: 100%; height: 100%;
display: block;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.proyectos-page .foto-item:hover .foto-item__img img { transform: scale(1.03); }
.proyectos-page .foto-item__cap {
padding-top: 0.75rem;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray);
}
/* ---- CTA INSTAGRAM — banda ancha, no una tarjeta de foto más.
Pedida explícitamente como "botón llamativo": la trato como un bloque propio,
a todo lo ancho, con su propio peso visual. */
.proyectos-page .proj-ig-cta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 2.5rem;
gap: 1.5rem;
padding: 3rem 2.5rem;
background: var(--blue);
border-radius: 18px;
text-decoration: none;
}
.proyectos-page .proj-ig-cta__text {
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-weight: 800;
letter-spacing: -0.03em;
text-transform: uppercase;
line-height: 1.05;
color: var(--bg);
}
.proyectos-page .proj-ig-cta__line { display: block; }
.proyectos-page .proj-ig-cta__badge {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
background: var(--bg);
color: var(--blue);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
transition: gap 0.35s var(--ease);
}
.proyectos-page .proj-ig-cta:hover .proj-ig-cta__badge { gap: 1.5rem; }
.proyectos-page .proj-ig-cta__circle {
width: 2.4rem; height: 2.4rem;
border-radius: 50%;
background: var(--blue);
color: var(--bg);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.4s var(--ease);
}
.proyectos-page .proj-ig-cta:hover .proj-ig-cta__circle { transform: rotate(45deg); }
/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
.proyectos-page .p-item--w8, .proyectos-page .p-item--w4 { grid-column: span 6; }
.proyectos-page .foto-item--hero { grid-column: span 12; grid-row: span 1; }
.proyectos-page .foto-item--hero .foto-item__img { aspect-ratio: 16 / 9; height: auto; }
.proyectos-page .foto-item--stack { grid-column: span 6; }
}
@media (max-width: 640px) {
.proyectos-page .portfolio-section { padding: 4rem 1.5rem 1.5rem; }
.proyectos-page .portfolio-grid,
.proyectos-page .foto-grid { grid-template-columns: 1fr; }
.proyectos-page .p-item--w8, .proyectos-page .p-item--w4,
.proyectos-page .foto-item--hero, .proyectos-page .foto-item--stack {
grid-column: 1 / -1;
}
.proyectos-page .foto-item--hero .foto-item__img { aspect-ratio: 4 / 3; height: auto; }
.proyectos-page .foto-item--stack .foto-item__img { aspect-ratio: 4 / 3; }
.proyectos-page .proj-ig-cta { flex-direction: column; align-items: flex-start; padding: 2.5rem 1.75rem; }
}
/* =========================================
CONTACTO.HTML — bloque aislado y autocontenido.
Todo bajo .contacto-page para que nada choque con el resto del sitio,
tal y como se pidió explícitamente (ej: .contacto-page .form-container).
========================================= */
.contacto-page .contacto-page__section {
position: relative;
max-width: var(--max);
margin: 0 auto;
padding: 5rem 2.5rem 8rem;
overflow: visible;
}
.contacto-page .cp-bg-num {
position: absolute;
top: 1rem; right: 0;
font-size: clamp(8rem, 16vw, 14rem);
font-weight: 900;
letter-spacing: -0.06em;
color: rgba(11,37,81,0.03);
line-height: 1;
pointer-events: none;
user-select: none;
z-index: 0;
}
.contacto-page .cp-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 4rem;
align-items: start;
}
.contacto-page .cp-intro__text p {
font-size: 0.95rem;
color: var(--gray);
line-height: 1.85;
margin-bottom: 1.2rem;
max-width: 380px;
}
/* Tarjeta de datos: azul de marca, con margen negativo que la mete por encima
del borde del panel del formulario — el solape asimétrico que rompe la
rejilla de "texto a la izquierda, formulario a la derecha" de siempre. */
.contacto-page .cp-meta {
margin-top: 3rem;
margin-right: -3.5rem;
position: relative;
z-index: 2;
background: var(--blue);
color: var(--bg);
padding: 2.5rem;
border-radius: 18px;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.contacto-page .cp-meta__item { display: flex; flex-direction: column; gap: 0.35rem; }
.contacto-page .cp-meta__label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(247,247,240,0.45);
}
.contacto-page .cp-meta__val { font-size: 0.92rem; font-weight: 500; color: var(--bg); }
.contacto-page .cp-meta__val a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
.contacto-page .cp-meta__val--small {
font-size: 0.82rem;
color: rgba(247,247,240,0.75);
line-height: 1.7;
font-weight: 400;
}
.contacto-page .form-container {
position: relative;
z-index: 1;
background: var(--bg);
border: 1px solid var(--light);
border-radius: 20px;
padding: 3rem;
}
.contacto-page #contactForm { display: flex; flex-direction: column; gap: 1.75rem; }
.contacto-page .cp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
/* ---- Floating labels ----
placeholder=" " (un espacio, no vacío) es el truco estándar para que
:placeholder-shown funcione en todos los navegadores, incluido Safari. */
.contacto-page .cp-field { position: relative; }
.contacto-page .cp-field input,
.contacto-page .cp-field textarea {
width: 100%;
font-family: var(--font);
font-size: 1rem; /* ≥16px: evita el zoom automático de iOS al enfocar */
color: var(--dark);
background: transparent;
border: 1.5px solid var(--light);
border-radius: 10px;
padding: 1.35rem 1rem 0.55rem;
min-height: 54px; /* objetivo táctil cómodo en móvil */
outline: none;
transition: border-color 0.25s, box-shadow 0.25s;
}
.contacto-page .cp-field textarea {
min-height: 140px;
padding-top: 1.5rem;
line-height: 1.7;
resize: vertical;
}
.contacto-page .cp-field input:focus,
.contacto-page .cp-field textarea:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(11,37,81,0.08);
}
.contacto-page .cp-field label {
position: absolute;
left: 1rem; top: 1.05rem;
font-size: 0.92rem;
color: var(--gray);
pointer-events: none;
background: var(--bg);
padding: 0 0.3rem;
transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}
.contacto-page .cp-field input:focus + label,
.contacto-page .cp-field input:not(:placeholder-shown) + label,
.contacto-page .cp-field textarea:focus + label,
.contacto-page .cp-field textarea:not(:placeholder-shown) + label {
top: -0.55rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dark);
}
.contacto-page .cp-field input:focus + label,
.contacto-page .cp-field textarea:focus + label { color: var(--blue); }
.contacto-page .cp-req { color: var(--blue); }
.contacto-page .cp-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--gray); }
/*