/* ========================================================================== PROFIT7 — Header + Hero · Etapa 1 (segunda iteración) El hero es una escena de pantalla completa, no un bloque de la página. El ADN ACOMPAÑA: es un espécimen contenido en un campo negro, nunca un tapiz que cubre el viewport. Desktop y móvil son composiciones distintas (columna izquierda + panel derecho / banda superior + bloque inferior), no la misma maqueta escalada. Acento único: beige #B5A58E. Sin amarillo, sin dorado saturado. Todo el movimiento lo escribe el JS en variables; aquí sólo el reposo. ========================================================================== */ /* Valores iniciales de animación: en :root, que es donde los reescribe el JS. --vscale es el zoom que el JS modula (entrada + scroll + energía); el hero lo multiplica por --vbase, que cambia con el breakpoint. */ :root{--mx:0;--my:0;--intro:0;--sp:0;--energy:0;--vscale:1} .hdr,.nav-panel,.hero{ --black:#08080A; --graphite:#141418; --ink:#FCFBF8; --ink-72:rgba(252,251,248,.72); --ink-52:rgba(252,251,248,.52); --ink-16:rgba(252,251,248,.16); /* Acento — beige apagado, usado como joya y nunca como superficie */ --beige:#B5A58E; --beige-lift:#CBBEA9; --beige-deep:#8C7F6C; --beige-12:rgba(181,165,142,.12); --beige-28:rgba(181,165,142,.28); --beige-45:rgba(181,165,142,.45); --display:'Butler',Georgia,serif; /* Work Sans es la única sans que el tema carga (fonts.css). Antes aquí se pedía Montserrat, que no se encola en ninguna parte: la cabecera caía a la sans del sistema mientras el resto del sitio usaba Work Sans. */ --sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --gut:clamp(20px,4.4vw,76px); --hdr-h:clamp(64px,7.2vh,90px); } /* ========================================================================== 01 · HEADER ========================================================================== */ .hdr{ position:fixed;inset-inline:0;top:0;z-index:60; height:var(--hdr-h); display:flex;align-items:center;justify-content:space-between; gap:clamp(16px,3vw,48px); padding-inline:var(--gut); background:rgba(8,8,10,calc(var(--sp) * .9)); backdrop-filter:blur(calc(var(--sp) * 16px)); -webkit-backdrop-filter:blur(calc(var(--sp) * 16px)); opacity:calc(.001 + var(--intro)); transition:opacity 1s cubic-bezier(.2,0,.2,1); } /* --sp y --intro sólo los mueve hero.js, que se encola únicamente en la portada (is_front_page() en functions.php). En cualquier otra página (Política de Privacidad, Términos) ambos se quedan en su valor inicial de :root —0— y el header queda casi invisible con fondo transparente. .page es la clase que WordPress agrega al de cualquier página que no sea la portada. */ body.page .hdr{background:rgba(8,8,10,.92);opacity:1} .hdr::after{ content:'';position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--beige-28),transparent); opacity:var(--sp); } .hdr-logo{ height:clamp(26px,2.6vw,34px);width:auto; opacity:.92; filter:grayscale(.18) brightness(1.06) drop-shadow(0 2px 14px rgba(0,0,0,.6)); transition:opacity .5s cubic-bezier(.2,0,.2,1); } .hdr a:hover .hdr-logo{opacity:1} .nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,38px)} /* 11px y 52% de opacidad en reposo: el segmento primario tiene 45–70 años y el gris al 45% sobre negro quedaba por debajo de lo legible. */ .nav a{ position:relative; font-family:var(--sans); font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-52); padding-block:.7em;white-space:nowrap; transition:color .5s cubic-bezier(.2,0,.2,1); } .nav a::after{ content:'';position:absolute;left:0;right:0;bottom:.2em;height:1px; background:var(--beige); transform:scaleX(0);transform-origin:0 50%; transition:transform .55s cubic-bezier(.2,0,.2,1); } .nav a:hover{color:var(--ink)} .nav a:hover::after{transform:scaleX(1)} .nav a:focus-visible{outline:1px solid var(--beige);outline-offset:6px} .hdr-cta{ position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 1.7em; font-family:var(--sans); font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase; color:var(--ink); border:1px solid var(--beige-28); transition:color .55s cubic-bezier(.2,0,.2,1),border-color .55s cubic-bezier(.2,0,.2,1); } .hdr-cta::before{ content:'';position:absolute;inset:0;background:var(--beige); transform:translateY(101%); transition:transform .6s cubic-bezier(.2,0,.2,1); } .hdr-cta span{position:relative;z-index:1} .hdr-cta:hover{color:var(--black);border-color:var(--beige)} .hdr-cta:hover::before{transform:translateY(0)} .hdr-cta:focus-visible{outline:1px solid var(--beige);outline-offset:4px} .burger{ display:none;background:none;border:0;cursor:pointer; width:44px;height:44px;align-items:center;justify-content:flex-end; flex-direction:column;gap:7px;padding:14px 0; } .burger span{display:block;height:1px;width:24px;background:var(--ink);opacity:.85} /* Panel de navegación en móvil */ .nav-panel{ position:fixed;inset:0;z-index:55; display:flex;flex-direction:column;justify-content:center; gap:clamp(12px,2vh,20px); /* Con once destinos —seis de primer nivel más los cinco pilares— el panel rozaba el alto de una pantalla de 812 px y el botón de agendar quedaba justo fuera. Se recorta el aire de arriba y de abajo, que era lo que sobraba, en vez de apretar los objetivos táctiles. */ padding:calc(var(--hdr-h) + 2.4vh) var(--gut) 3.4vh; background:rgba(8,8,10,.975); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); opacity:0;visibility:hidden; transition:opacity .55s cubic-bezier(.2,0,.2,1),visibility .55s; } .nav-panel.is-open{opacity:1;visibility:visible} .nav-panel nav{display:flex;flex-direction:column;gap:clamp(4px,1vh,10px)} /* Las reglas del panel viven ahora en el bloque 06, contra las clases .nav-panel__link y .nav-panel__subitem. Lo que había aquí seleccionaba `.nav-panel nav a`, es decir, TODOS los enlaces del panel. Al añadir los cinco pilares como segundo nivel, esa regla se los llevaba por delante: los cinco salían en Butler a 26 px, igual que los destinos de primer nivel, y la jerarquía desaparecía. Y no bastaba con declarar las clases nuevas, porque `.nav-panel nav a` —una clase más un elemento— es más específica que `.nav-panel__subitem` y le ganaba siempre. Por eso se retira en vez de convivir. */ .panel-cta{ display:flex;align-items:center;justify-content:center; min-height:52px;margin-top:clamp(16px,2.6vh,28px); font-family:var(--sans); font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase; color:var(--black);background:var(--beige); opacity:0;transform:translateY(18px); transition:transform .6s cubic-bezier(.2,0,.2,1) .36s,opacity .6s cubic-bezier(.2,0,.2,1) .36s; } .nav-panel.is-open .panel-cta{opacity:1;transform:translateY(0)} .panel-foot{ margin-top:auto;font-family:var(--sans); font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-52); } @media (min-width:1025px){ .nav-panel{display:none} } /* ========================================================================== 02 · HERO — escena independiente, seis capas Base = MÓVIL: banda de ADN arriba, bloque de marca abajo. El desktop se recompone entero en el bloque (min-width:1025px). ========================================================================== */ .hero{ position:relative; /* Pantalla completa de verdad. Sin suelo en px: en un móvil apaisado forzaba el hero más alto que la pantalla. */ width:100%;max-width:none;margin:0;padding:0; height:100vh; /* respaldo para navegadores sin unidades dinámicas */ height:100svh; min-height:100svh; overflow:hidden; background:var(--black); isolation:isolate; border:0; /* Movil: el ADN un punto mas pequeno, para que acompane y no domine. */ --vbase:0.98; /* zoom en reposo del metraje, por breakpoint */ } /* Nada del fondo general debe asomar alrededor del hero: ni el #bg que muta con el scroll, ni las células flotantes. Aquí manda el negro del video. */ .hero::before{ content:'';position:absolute;inset:0;z-index:0;background:var(--black); } /* — Capa 1 · El ADN real, CONTENIDO ———————————————————— El panel no cubre el hero: ocupa la banda superior y se disuelve hacia abajo con una máscara. Y el metraje va en `contain`, no en `cover`: así la hélice se ve completa a una escala tranquila en vez de recortada y ampliada hasta llenar la pantalla. */ .l-video{ position:absolute;z-index:1; top:0;bottom:42%;left:-14%;right:-14%; /* overflow + no-repeat: el metraje se escala por encima del panel, y sin esto el degradado de máscara se repetiría fuera de la caja en lugar de recortar. */ overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.5) 74%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.5) 74%,transparent 100%); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:100% 100%;mask-size:100% 100%; will-change:transform; } .l-video video,.l-video img{ position:absolute;inset:0;width:100%;height:100%; object-fit:contain;object-position:50% 48%; transform:scale(calc(var(--vbase) * var(--vscale))); transform-origin:50% 48%; /* El metraje llega azulado; se desatura y se calienta hacia el beige. El contraste lo modula el JS con --energy según el movimiento. */ filter: saturate(.26) sepia(.24) brightness(calc(.88 + var(--energy) * .12)) contrast(calc(1.08 + var(--energy) * .12)); /* --vfade lo escribe atlas.js: el metraje se disuelve justo cuando nacen las partículas de la segunda escena. Sin él habría dos ADN distintos en pantalla a la vez. Vale 1 mientras no exista la segunda escena. */ opacity:calc(var(--intro) * var(--vfade,1)); } /* Fotograma fijo: sólo se muestra sin movimiento (ver el bloque 04). */ .l-video img{display:none} /* — Capa 2 · Oscurecimiento cinematográfico ————————————— */ .l-shade{ position:absolute;inset:-8%;z-index:2;pointer-events:none; background:linear-gradient(180deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.18) 24%, rgba(8,8,10,.22) 56%, rgba(8,8,10,.95) 100%); will-change:transform; } /* — Capa 3 · Viñeta e iluminación radial ——————————————— */ .l-vignette{ position:absolute;inset:-14%;z-index:3;pointer-events:none; background: radial-gradient(106% 74% at 50% 30%,transparent 18%,rgba(8,8,10,.5) 62%,rgba(8,8,10,.97) 96%), radial-gradient(52% 34% at 50% 30%,rgba(181,165,142,.10),transparent 72%); /* Blur diferencial: barato porque son degradados, no píxeles de video */ filter:blur(calc(var(--energy) * 5px)); will-change:transform,filter; } /* — Capa 4 · Scrim direccional bajo el bloque de marca ————— */ .l-scrim{ position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(180deg, transparent 0%,transparent 32%, rgba(8,8,10,.5) 56%, rgba(8,8,10,.88) 76%, rgba(8,8,10,.94) 100%); will-change:transform; } /* — Capa 5 · Marca y texto. Sin tarjetas, sin cajas. ——————— */ .l-brand{ position:absolute;inset:0;z-index:5; display:flex;flex-direction:column; align-items:flex-start;justify-content:flex-end; padding:var(--hdr-h) var(--gut) clamp(132px,20vh,188px); text-align:left; will-change:transform; } .brand{display:flex;flex-direction:column;align-items:flex-start;width:100%} .hero-h1{ margin:0;font-weight:400;line-height:1; display:flex;flex-direction:column;align-items:flex-start; } /* El lockup se dimensiona por ANCHO y conserva su proporción: los dos lockups (vertical en móvil, horizontal en desktop) tienen ratios distintos, así que fijar sólo el ancho evita cualquier deformación. */ .hero-lockup{display:block;width:100%} .hero-mark{ display:block; /* El tercer término es el tope por ALTURA: sin él, en pantallas bajas (tablet apaisada) el bloque no cabía y se metía bajo la cabecera. */ width:min(78vw,360px,42vh);height:auto; margin-inline:auto; position:relative; /* Presencia: se baja la saturación lo justo para acercar el oro al beige sin apagar la marca; nunca se redibuja ni se aplana. */ filter: saturate(.68) brightness(1.08) drop-shadow(0 0 80px rgba(8,8,10,.92)) drop-shadow(0 20px 70px rgba(8,8,10,.8)); /* Visible desde el principio. Antes arrancaba en opacity:0 y la revelaba hero-logo.js al terminar de armarla con su propio sistema de partículas; ese efecto se retiró para dejar solo el de vapor-title.js, común a todo el sitio. La marca no puede depender de ningún script para verse. */ opacity:1; } .hero-rule{ display:block; width:clamp(44px,12vw,86px);height:1px; margin:clamp(18px,2.6vh,28px) auto 0; background:linear-gradient(90deg,transparent,var(--beige-45),transparent); } .hero-title{ display:block; margin-top:clamp(16px,2.4vh,26px); margin-inline:auto; max-width:34ch; font-family:var(--sans); font-size:clamp(15px,4.1vw,17.5px); font-weight:300;line-height:1.68;letter-spacing:.02em;text-transform:uppercase; color:var(--beige); text-wrap:pretty; } .hero-title-accent{color:var(--white)} .mask{overflow:hidden;display:block} .mask > *{display:block;will-change:transform} /* — Entrada 3D de la marca ————————————————————————— Sustituye al efecto de partículas que llevaba el logotipo (data-vapor-img). Es CSS puro: ningún script interviene, así que el logotipo no puede quedarse invisible esperando a nadie. La animación aporta el estado INICIAL; el estado normal del elemento es el final, de modo que si el navegador no la ejecutara, la marca se vería tal cual. Sin overflow:hidden —a diferencia de .mask—: el giro saca momentáneamente los bordes del logotipo fuera de su caja y recortarlos partiría la pieza. */ .hero-3d{ display:block; perspective:1200px; perspective-origin:50% 42%; } .hero-3d > *{display:block;transform-style:preserve-3d} @keyframes p7-hero-3d{ from{ opacity:0; transform:translate3d(0,7%,-560px) rotateX(26deg) scale(.94); filter:blur(6px); } 60%{opacity:1;filter:blur(0)} to{ opacity:1; transform:translate3d(0,0,0) rotateX(0deg) scale(1); filter:blur(0); } } .hero-3d .hero-lockup{ transform-origin:50% 62%; animation:p7-hero-3d 1750ms cubic-bezier(.16,.86,.24,1) 220ms both; } @media (prefers-reduced-motion:reduce){ .hero-3d{perspective:none} .hero-3d .hero-lockup{animation:none} } /* — Capa 6 · Microinterfaz ————————————————————————— */ .l-ui{position:absolute;inset:0;z-index:6;pointer-events:none;will-change:transform} .l-ui > *{pointer-events:auto} /* En móvil la procedencia es una sola línea centrada abajo: para el paciente que evalúa el viaje, «El Poblado · Medellín» pertenece al primer pantallazo. */ .hero-corner{ position:absolute;bottom:clamp(20px,3vh,26px); left:50%;transform:translateX(-50%); white-space:nowrap; font-family:var(--sans); font-size:9px;font-weight:400;letter-spacing:.3em;text-transform:uppercase; color:var(--ink-52); } .hero-corner.r{display:none} /* ========================================================================== 03 · DESKTOP — otra composición, no la misma escalada Columna de marca a la izquierda sobre negro puro; el ADN vive en un panel a la derecha que se disuelve hacia el texto. El espacio negativo entre ambos es el elemento de diseño, no un hueco. ========================================================================== */ @media (min-width:1025px){ /* Menos zoom que antes (1.14): a ese nivel se recortaba demasiada hélice. El objetivo es que se vea completa, no un acercamiento. */ .hero{--vbase:0.94} .l-video{ top:-4%;bottom:-4%;left:38%;right:-5%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 15%,#000 44%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 15%,#000 44%,#000 100%); } /* object-fit:cover en vez de contain: la caja del panel (67% del ancho, 108% del alto del hero) no tiene la misma proporción que el video (16:9). Con `contain`, en pantallas anchas eso dejaba franjas negras arriba/abajo dentro de la caja — un rectángulo más oscuro y la hélice viéndose pequeña y "recortada" dentro de su propio marco. `cover` llena la caja siempre, sin importar la proporción de la pantalla; lo que se recorta son los extremos de la hélice, que ya se disuelven en la máscara y la viñeta. */ .l-video video,.l-video img{object-fit:cover;object-position:52% 50%;transform-origin:52% 50%} .l-shade{ background:linear-gradient(180deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.14) 26%, rgba(8,8,10,.18) 62%, rgba(8,8,10,.9) 100%); } .l-vignette{ background: radial-gradient(108% 92% at 66% 50%,transparent 26%,rgba(8,8,10,.42) 70%,rgba(8,8,10,.94) 100%), radial-gradient(44% 42% at 68% 52%,rgba(181,165,142,.11),transparent 74%); } .l-scrim{ background:linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.8) 30%, rgba(8,8,10,.34) 48%, transparent 64%); } .l-brand{ align-items:flex-start;justify-content:center; padding:var(--hdr-h) 40% clamp(40px,7vh,80px) var(--gut); text-align:left; } .brand{align-items:flex-start} .hero-h1{align-items:flex-start} /* El lockup horizontal lleva un 3,7 % de aire transparente a su izquierda. Sin compensarlo, la tinta del logo arrancaba ~24 px a la derecha del resto de la columna y toda la alineación editorial se veía torcida. */ .hero-mark{ /* Escala real de escritorio, a la par del titular del Atlas en vez de quedarse corto: antes topaba en 780px con 45vw, y a 1440px ya llenaba el 96% de su columna sin sitio para crecer mas. */ width:min(100%,clamp(480px,54vw,920px)); margin-inline:0; transform:translateX(-3.67%); } .hero-rule{ width:clamp(56px,5vw,96px); margin:clamp(22px,2.4vw,34px) 0 0; background:linear-gradient(90deg,var(--beige-45),transparent); } .hero-title{ margin-inline:0; max-width:38ch; /* Por encima del cuerpo del Atlas (24px): el hero abre el sitio, tiene que sentirse mas grande que lo que viene despues, no solo igualarlo. */ font-size:clamp(20px,1.55vw,28px); line-height:1.62; } /* Dos esquinas en desktop, apiladas a la derecha: procedencia arriba, régimen de atención debajo. */ .hero-corner{ left:auto;transform:none;right:var(--gut); bottom:clamp(28px,4.4vh,48px); } .hero-corner.l{bottom:calc(clamp(28px,4.4vh,48px) + 22px)} .hero-corner.r{display:block} } /* Franja intermedia: tablet en vertical y móviles apaisados grandes. Mantiene la composición apilada pero con más aire. */ @media (min-width:641px) and (max-width:1024px){ .hero{--vbase:1.04} .l-video{bottom:44%;left:-6%;right:-6%} .hero-mark{width:min(56vw,420px,44vh)} .hero-title{max-width:38ch;font-size:16px} } /* Móvil apaisado: casi no hay alto; el ADN se retira a la derecha y manda la marca, en una composición de dos columnas. */ @media (max-width:900px) and (max-height:520px){ .hero{--vbase:1} .l-video{top:0;bottom:0;left:0;right:0; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%)} .l-scrim{background:linear-gradient(90deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.72) 34%,transparent 62%)} .l-brand{justify-content:center;align-items:flex-start;text-align:left; padding:var(--hdr-h) 50% 12px var(--gut)} .brand,.hero-h1{align-items:flex-start} .hero-mark{width:min(42vw,260px,46vh);margin-inline:0} .hero-rule{display:none} .hero-title{margin-inline:0;font-size:12.5px;max-width:36ch;line-height:1.6} .hero-corner{display:none} } /* ========================================================================== 04 · Sin movimiento: composición fija, sin video ni parallax. ========================================================================== */ @media (prefers-reduced-motion:reduce){ .l-video video{display:none} .l-video img{display:block} .l-video video,.l-video img{transform:none;opacity:1;filter:saturate(.26) sepia(.24) contrast(1.08)} .mask > *{transform:none !important} .hdr{opacity:1;background:rgba(8,8,10,.92)} .l-video,.l-shade,.l-vignette,.l-scrim,.l-brand,.l-ui{transform:none !important} .l-vignette{filter:none} } /* ========================================================================== 05 · Neutralización de la cabecera anterior main.css sigue definiendo .hdr (barra sólida, padding animado por la clase is-stuck que añade main.js). Este archivo carga después y fija lo que el nuevo header necesita, sin borrar nada del archivo antiguo. ========================================================================== */ .hdr{ padding-block:0 !important; /* mata la animación de layout de is-stuck */ border-bottom:0; box-shadow:none; gap:clamp(16px,3vw,48px); } .hdr.is-stuck{padding-block:0 !important} .hdr-brand:hover .hdr-logo{transform:none} @media (max-width:1024px){ .nav{display:none} .burger{display:flex} .hdr-cta{display:none} } /* Los destinos del menú son ahora secciones de la portada. Sin esto el navegador las deja pegadas al borde superior, debajo del header fijo. */ html{scroll-behavior:smooth} [id]{scroll-margin-top:calc(clamp(64px,7.2vh,90px) + 20px)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } /* ========================================================================== 06 · El desplegable de "Pilares" y el panel móvil con los cinco Lo abren :hover y :focus-within, NO un script. Es la misma regla que gobierna el resto del sitio: nada que sea navegación puede depender de que un JavaScript llegue a correr. Con teclado se abre solo al tabular dentro, porque :focus-within alcanza también al contenedor. ========================================================================== */ .nav-sub{position:relative;display:flex;align-items:center} .nav-sub__cabeza{display:inline-flex;align-items:center;gap:.55em} .nav-sub__flecha{ width:9px;height:6px;flex:none;opacity:.7; transition:transform .45s cubic-bezier(.2,0,.2,1),opacity .45s ease; } .nav-sub:hover .nav-sub__flecha, .nav-sub:focus-within .nav-sub__flecha{transform:rotate(180deg);opacity:1} /* El PUENTE. Los 14px de arriba son padding y no margen a propósito: con un hueco de verdad el ratón cruza un milímetro de vacío entre el rótulo y el primer destino, pierde el :hover y el menú se cierra en la cara del lector. Siendo padding, ese milímetro sigue siendo área activa. */ .nav-sub__caja{ position:absolute;top:100%;left:50%;z-index:5; padding-top:14px; min-width:296px; display:flex;flex-direction:column; transform:translate(-50%,-6px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .38s cubic-bezier(.2,0,.2,1), transform .38s cubic-bezier(.2,0,.2,1), visibility .38s; } .nav-sub:hover .nav-sub__caja, .nav-sub:focus-within .nav-sub__caja{ opacity:1;visibility:visible;pointer-events:auto; transform:translate(-50%,0); } /* El fondo va en un pseudoelemento y arranca DEBAJO del puente: si cubriera también esos 14px, la caja se leería pegada al rótulo. */ .nav-sub__caja::before{ content:'';position:absolute;inset:14px 0 0; background:rgba(10,10,12,.97); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--beige-28); box-shadow:0 32px 70px -28px rgba(0,0,0,.92); } /* `.nav .nav-sub__item` y no `.nav-sub__item` a secas: `.nav a` es más específica (una clase más un elemento) y le ganaba, así que estos destinos heredaban el 52 % del rótulo en reposo en vez del 72 % que les toca. Medido: 5,4:1 contra 9,8:1 sobre el fondo de la caja. */ .nav .nav-sub__item{ position:relative; display:flex;align-items:baseline;gap:14px; padding:13px 22px; font-family:var(--sans); font-size:12.5px;font-weight:300;letter-spacing:.02em; color:var(--ink-72); white-space:nowrap; transition:color .4s cubic-bezier(.2,0,.2,1),background-color .4s ease; } .nav .nav-sub__item + .nav-sub__item{box-shadow:inset 0 1px 0 var(--ink-16)} .nav .nav-sub__item:hover{color:var(--ink);background:rgba(181,165,142,.10)} .nav .nav-sub__item:focus-visible{outline:1px solid var(--beige);outline-offset:-3px} .nav-sub__n{ font-family:var(--display); font-size:11px;letter-spacing:.06em; color:var(--beige);opacity:.82; } .nav-sub__t{flex:1} /* -------------------------------------------------------------------------- El panel móvil, ahora con nueve destinos Con nueve entradas el panel puede pasarse de alto en una pantalla corta o en apaisado, así que scrollea por dentro. Sin esto, los últimos destinos —justo los cinco pilares que se acaban de añadir— quedaban fuera de la pantalla y sin forma de alcanzarlos. -------------------------------------------------------------------------- */ .nav-panel{overflow-y:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start} .nav-panel__nav{width:100%} .nav-panel__link{ display:flex;align-items:center;min-height:46px; font-family:var(--display);font-size:clamp(1.4rem,6.2vw,2rem);font-weight:300; line-height:1.2;letter-spacing:-.02em;color:var(--ink-72); } /* Los cinco pilares son un segundo nivel y se leen como tal: cuerpo de sans, sangrados y con un filete que los ata al rótulo del que cuelgan. */ .nav-panel__sub{ display:flex;flex-direction:column; margin:2px 0 10px;padding-left:16px; border-left:1px solid var(--beige-28); } .nav-panel__subitem{ display:flex;align-items:center;gap:12px;min-height:42px; font-family:var(--sans);font-size:14px;font-weight:300;letter-spacing:.01em; line-height:1.3;color:var(--ink-52); } .nav-panel__subitem:active{color:var(--beige)} .nav-panel__link:active{color:var(--beige)} .nav-panel__n{ font-family:var(--display);font-size:11px;letter-spacing:.06em; color:var(--beige);opacity:.8; } /* La entrada escalonada se declara por posición y no por nth-child: el