/* ============================================================= Marca Personal · Nubia — Editorial Light Cream + coral 1. Tokens 2. Reset 3. Utils 4. Type 5. Components 6. Sections 7. Effects 8. Responsive 9. Reduced-motion ============================================================= */ /* ============================================================= 1. TOKENS ============================================================= */ :root { --bg: #F4F1EA; /* marfil cálido (combina con el logo) */ --bg-2: #ECE6DA; /* arena */ --bg-3: #E4DCCD; /* arena profunda */ --paper: #FFFFFF; --ink: #1C1A18; /* carbón (casi negro del logo) */ --ink-soft: #34302B; --ink-mute: #7A746B; /* metadatos */ --accent: #F26B5E; /* coral (el punto del logo) */ --accent-deep: #D94F40; /* coral profundo (hover) */ --accent-soft: #FBE4DE; /* lavado coral (halos) */ --accent-glow: rgba(242,107,94,.34); /* Degradado "Portada": carbón → coral en diagonal (como la portada de marca) */ --grad-portada: linear-gradient(135deg, #1C1A18 0%, #1C1A18 36%, #5C322B 56%, #A84A3E 74%, #D9685A 89%, #EE8B76 100%); --grad-coral: linear-gradient(90deg, var(--accent), var(--accent-deep)); --grad-box: linear-gradient(110deg, #1C1A18 0%, #1C1A18 46%, #6F3A32 72%, #C75C4F 100%); --line: rgba(28,26,24,.13); --line-2: rgba(28,26,24,.07); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Fuente de sistema (tipo Meta Ads Manager, pedido del cliente 02-jul-2026): reemplaza a Inter en TODO el texto regular del sitio. Lo que usa --serif (títulos "formato revista") no se toca. */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --serif: "Fraunces", Georgia, "Times New Roman", serif; --container: 1240px; --gutter: clamp(1.2rem, 5vw, 4rem); --radius: 18px; --radius-lg: 28px; } /* ============================================================= TIPOGRAFÍA SITEWIDE COMPACTA (pedido del cliente, 02-jul-2026) ------------------------------------------------------------- Tamaño de texto tipo "Meta Ads Manager" (denso, funcional) en TODO el sitio — portada, acceso/crear perfil y área de miembros (app.css hereda --sans de aquí). Se EXCLUYE por completo: 1) Los títulos "formato revista" (font-family: var(--serif)): cada uno queda protegido con !important en su propia regla, más abajo en este archivo (tamaño Y fuente intactos). 2) La sección "Impulso" completa (encabezado + tarjetas de la revista): ni tamaño ni nada. ------------------------------------------------------------- IMPORTANTE — este bloque va DELIBERADAMENTE AL PRINCIPIO del archivo (antes que cualquier regla específica): con !important, un empate de especificidad lo gana el que aparece DESPUÉS en el archivo. Poniendo este bloque primero, CUALQUIER regla más específica definida después (aunque sea de una sola clase, ej. ".founder-quote") le gana automáticamente, sin tener que inflar la especificidad de cada una a mano. (Bug real: estando al final, ".founder-quote" y ".step-num" — de una sola clase, especificidad empatada — perdían el empate por ir antes en el archivo.) ============================================================= */ /* Especificidad EXACTA (0,1,0), igual a ".app-body *"/".fp-title" en app.css: en app.html empata y pierde por orden de CARGA (app.css se carga después, gana el empate sin importar dónde esté este bloque dentro de styles.css) — así el área de miembros conserva su propio ajuste. */ /* html excluido a propósito: si su font-size cambiara, TODO lo medido en rem (el resto del archivo) se reescalaría con él, incluidos los títulos "protegidos" — hay que dejar el root intacto. em/.serif-em excluidos: son el acento en cursiva DENTRO de un título/párrafo (nunca tienen tamaño propio en el CSS original) — deben seguir heredando el tamaño real de su padre, no fijar el suyo. */ :not(html, em, .serif-em, .mag-grid, .mag-grid *, .impulso-head, .impulso-head *) { font-size: 14px !important; } /* La fuente cambia por --sans (arriba), que TODO el sitio hereda de "body" — Impulso no debe heredar ese cambio tampoco (ni tamaño ni fuente), así que se le devuelve la fuente original explícitamente. Los títulos con var(--serif) de Impulso (.mag-body h3/h4) ganan igual por ser más específicos. */ .mag-grid, .mag-grid *, .impulso-head, .impulso-head * { font-family: "Inter", system-ui, -apple-system, sans-serif !important; } /* El del título de Impulso ("escalar tu marca.") es descendiente de .impulso-head, así que la regla de arriba también lo forzaba a Inter — debe ir en el mismo serif que el resto del título, con el MISMO peso (400) que usa el de cualquier otro título de sección (ej. "en compañía." en Comunidad): a este tamaño, la óptica de Fraunces en cursiva ya se ve gruesa por diseño, sin necesitar negrita real — forzar 700 quedaba más pesado que el resto del sitio. */ .impulso-head h2 em { font-family: var(--serif) !important; } /* Único título no-serif que se trata como título real en la portada (el resto sigue su formato actual). */ .step h3 { font-size: 16px !important; font-weight: 700 !important; } /* ============================================================= 2. RESET & BASE ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } /* Garantiza que el atributo [hidden] siempre oculte, sin importar qué regla de "display" defina cada componente (ej. ".auth-row { display: grid }" empataba en especificidad con el [hidden] del navegador y ganaba por ser una regla de autor — el elemento quedaba oculto solo "funcionalmente" pero visible en pantalla). Mismo fix que ya existe en app.css. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; overscroll-behavior-y: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } p { text-wrap: pretty; } ul { list-style: none; padding: 0; } h1, h2, h3, h4 { text-wrap: balance; line-height: 1.04; letter-spacing: -0.02em; font-weight: 400; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ============================================================= 3. UTILITIES ============================================================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--ink); color: var(--bg); z-index: 9999; border-radius: 8px; font-weight: 500; transition: top .25s var(--ease-out); } .skip-link:focus { top: 1rem; } .kicker { font-size: .72rem; letter-spacing: .04em; font-weight: 500; color: var(--ink-mute); display: inline-flex; align-items: center; gap: .7rem; } .kicker::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--grad-coral); display: inline-block; } .kicker--center::before { display: none; } em, .serif-em { font-family: var(--serif); font-style: italic; font-weight: 400; } /* ============================================================= 4. TYPOGRAPHY ============================================================= */ .display { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; letter-spacing: -0.025em; line-height: 1.0; } .section-head { max-width: 720px; margin-bottom: clamp(2.4rem, 5vw, 4rem); } .section-head h2 { font-family: var(--serif) !important; font-weight: 300; font-size: clamp(2rem, 5vw, 3.5rem) !important; margin-top: 1.1rem; line-height: 1.05; } .section-head p { margin-top: 1.2rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 56ch; } /* ============================================================= 5. COMPONENTS ============================================================= */ .btn { --pad-y: .92rem; --pad-x: 1.7rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: var(--pad-y) var(--pad-x); border-radius: 100px; font-size: .92rem; font-weight: 500; letter-spacing: .01em; position: relative; transition: transform .4s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .4s var(--ease-out); will-change: transform; } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); } .btn--coral { background: var(--accent); color: #fff; box-shadow: 0 14px 34px -14px var(--accent-glow); } .btn--coral:hover { background: var(--accent-deep); box-shadow: 0 20px 46px -14px var(--accent-glow); } .btn .arrow { transition: transform .4s var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } .card { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out); } /* ============================================================= 6. SECTIONS ============================================================= */ /* ---- Splash ---- */ .splash { position: fixed; inset: 0; z-index: 2000; background: var(--bg); display: grid; place-items: center; animation: splashSafety .01s 4.4s forwards; } .splash.is-out { animation: splashOut .9s var(--ease-out) forwards; } .splash-logo { width: clamp(168px, 26vw, 240px); height: auto; display: block; opacity: 0; transform: translateY(14px); animation: splashMark 1s var(--ease-out) .15s forwards; } .splash-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad-coral); animation: splashBar 2.6s var(--ease-out) forwards; } @keyframes splashMark { to { opacity: 1; transform: none; } } @keyframes splashBar { to { width: 100%; } } @keyframes splashOut { to { opacity: 0; clip-path: inset(0 0 100% 0); pointer-events: none; } } @keyframes splashSafety { to { opacity: 0; pointer-events: none; visibility: hidden; } } /* ---- Nav ---- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); transition: background .4s var(--ease-out), backdrop-filter .4s, padding .4s var(--ease-out), border-color .4s; border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(244,241,234,.82); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--line-2); padding-block: .8rem; } .nav-logo img { height: 38px; width: auto; transition: opacity .3s; } /* Enlaces del nav centrados en el viewport (absoluto), no entre logo y zona derecha → mismo gap, pero centrados. */ .nav-links { display: none; gap: 2.1rem; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); } .nav-links a { font-size: .9rem; color: var(--ink-soft); font-weight: 450; position: relative; padding: .2rem 0; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); } .nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; } .nav-right { display: flex; align-items: center; gap: 1rem; } /* Los dos accesos se ven SIEMPRE (también en móvil, donde reemplazan al menú hamburguesa). En móvil quedan compactos para caber junto al logo (ver bloque ≤959px al final). */ .nav-cta { display: inline-flex; } /* Avatar de sesión + desplegable en el Home */ .nav-user { position: relative; } .nav-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft) center/cover no-repeat; color: var(--accent-deep); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.05rem; cursor: pointer; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 2px 10px rgba(28,26,24,.18); transition: transform .15s; } .nav-avatar:hover { transform: scale(1.05); } .nav-user-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; z-index: 90; background: var(--paper, #F4F1EA); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -22px rgba(28,26,24,.5); padding: .4rem; } .nav-user-name { display: block; font-size: .75rem; color: var(--ink-mute); padding: .55rem .7rem .35rem; font-weight: 500; } .nav-user-item { display: block; width: 100%; text-align: left; padding: .6rem .7rem; border-radius: 9px; font-size: .9rem; color: var(--ink); cursor: pointer; transition: background .15s; } .nav-user-item:hover { background: rgba(28,26,24,.06); color: var(--accent-deep); } .nav-user-item + .nav-user-item { border-top: 1px solid var(--line); } .nav-burger { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; position: relative; background: var(--paper); } .nav-burger span { width: 16px; height: 1.5px; background: var(--ink); position: relative; transition: .3s var(--ease-out); } .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink); transition: .3s var(--ease-out); } .nav-burger span::before { top: -5px; } .nav-burger span::after { top: 5px; } body.menu-open .nav-burger span { background: transparent; } body.menu-open .nav-burger span::before { top: 0; transform: rotate(45deg); } body.menu-open .nav-burger span::after { top: 0; transform: rotate(-45deg); } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 800; background: var(--bg); padding: 6rem var(--gutter) 2rem; display: flex; flex-direction: column; gap: .3rem; transform: translateY(-100%); transition: transform .6s var(--ease-out); visibility: hidden; } body.menu-open .mobile-menu { transform: none; visibility: visible; } .mobile-menu a { font-family: var(--serif) !important; font-size: clamp(1.8rem,7vw,2.6rem) !important; font-weight: 300; padding: .55rem 0; border-bottom: 1px solid var(--line-2); color: var(--ink); display: flex; justify-content: space-between; align-items: center; } .mobile-menu a .idx { font-family: var(--sans); font-size: .8rem; color: var(--accent); } .mobile-menu .btn { margin-top: 1.6rem; align-self: flex-start; } /* ===== Nav en MÓVIL (<960px): sin hamburguesa — los dos accesos van en la barra ===== Reemplazan al antiguo menú (las secciones se recorren con scroll). Se compactan y el logo se achica para que Acceder + Crear perfil quepan junto al logo incluso en pantallas de ~360px. */ @media (max-width: 959px) { .nav-logo img { height: 30px; } .nav-right { gap: .5rem; } /* nowrap: sin esto, al apretar la pantalla el flex parte "Crear perfil" en dos líneas. */ .nav-cta.btn { --pad-y: .52rem; --pad-x: .95rem; font-size: .82rem; letter-spacing: 0; white-space: nowrap; } } @media (max-width: 380px) { .nav-logo img { height: 24px; } .nav-right { gap: .4rem; } .nav-cta.btn { --pad-x: .78rem; font-size: .76rem; } } /* ---- Hero con foto de fondo + velo degradado oscuro ---- */ .hero { position: relative; padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: clamp(3rem, 7vw, 5rem); overflow: clip; } .hero--photo { display: flex; align-items: center; min-height: 100vh; padding-top: clamp(8rem, 16vw, 12rem); padding-bottom: clamp(4rem, 9vw, 7rem); background: var(--ink); color: var(--bg); } .hero-bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(96deg, rgba(20,18,16,.94) 0%, rgba(20,18,16,.80) 32%, rgba(20,18,16,.42) 60%, rgba(28,26,24,.12) 100%), url("assets/img/nubia-bg-hero.webp"); background-size: cover; background-position: center right; } .hero--photo .container { position: relative; z-index: 1; } .hero--photo .hero-copy { max-width: 620px; } .hero--photo .kicker { color: rgba(244,241,234,.72); } .hero--photo .hero-sub { color: rgba(244,241,234,.86); } .hero--photo .hero-trust { color: rgba(244,241,234,.78); } .hero--photo .hero-trust strong { color: var(--bg); } .hero--photo .hero-trust .avatars span { background: var(--bg); border-color: var(--ink); color: var(--ink); position: relative; } /* Apilado de ATRÁS hacia ADELANTE: ★ (detrás) → + → N (delante). Los tres del mismo tamaño y con borde oscuro: el de cada círculo delantero separa del que tiene detrás; los bordes externos se funden con la foto. */ .hero--photo .hero-trust .avatars span:nth-child(1) { z-index: 3; } /* N — delante */ .hero--photo .hero-trust .avatars span:nth-child(2) { z-index: 2; } /* + — en medio */ .hero--photo .hero-trust .avatars span:nth-child(3) { z-index: 1; } /* ★ — detrás */ .hero--photo .btn--ghost { color: var(--bg); border-color: rgba(244,241,234,.45); } .hero--photo .btn--ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); } @media (max-width: 720px) { .hero-bg { background-image: linear-gradient(180deg, rgba(20,18,16,.80) 0%, rgba(20,18,16,.62) 40%, rgba(20,18,16,.78) 100%), url("assets/img/nubia-bg-hero.webp"); background-position: 72% center; } } .hero-copy { max-width: 640px; } .hero .kicker { color: var(--ink-mute); } .hero .kicker::before { background: var(--grad-coral); } .hero h1 { font-family: var(--serif) !important; font-weight: 300; font-size: clamp(2.6rem, 8.5vw, 5.6rem) !important; line-height: 0.99; margin: 1.5rem 0 0; letter-spacing: -0.03em; color: var(--ink); } .hero h1 em { color: var(--accent); } /* Hero con foto: titular en blanco. Va DESPUÉS de `.hero h1` para ganar por orden (no solo por especificidad). */ .hero.hero--photo h1 { color: #fff; } .hero-sub { margin-top: 1.6rem; font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--ink-soft); max-width: 46ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; } .hero-trust { display: flex; align-items: center; gap: 1rem; margin-top: 2.4rem; color: var(--ink-mute); font-size: .85rem; } .hero-trust .avatars { display: flex; } .hero-trust .avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px; background: var(--bg-3) center/cover; display: grid; place-items: center; font-size: .7rem; color: var(--ink-mute); font-weight: 600; } .hero-trust .avatars span:first-child { margin-left: 0; } /* Nav sobre el hero OSCURO: logo y textos claros; al hacer scroll (is-stuck) vuelven oscuros */ .nav .logo-light { display: block; } .nav .logo-dark { display: none; } .nav.is-stuck .logo-light { display: none; } .nav.is-stuck .logo-dark { display: block; } .nav:not(.is-stuck) .nav-links a { color: rgba(244,241,234,.92); } .nav:not(.is-stuck) .nav-burger { background: rgba(244,241,234,.12); border-color: rgba(244,241,234,.45); } .nav:not(.is-stuck) .nav-burger span, .nav:not(.is-stuck) .nav-burger span::before, .nav:not(.is-stuck) .nav-burger span::after { background: var(--bg); } .nav:not(.is-stuck) .nav-cta.btn--ghost { color: var(--bg); border-color: rgba(244,241,234,.45); } .nav:not(.is-stuck) .nav-cta.btn--ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); } /* Con el menú móvil abierto (fondo crema), la X del burger vuelve a oscuro aunque el nav no esté "stuck" */ body.menu-open .nav:not(.is-stuck) .nav-burger span::before, body.menu-open .nav:not(.is-stuck) .nav-burger span::after { background: var(--ink); } body.menu-open .nav:not(.is-stuck) .nav-burger { background: var(--paper); border-color: var(--line); } /* …y el LOGO igual: sin esto queda la versión clara (pensada para el hero oscuro) sobre el crema del menú, o sea invisible. Mismo criterio que la X de arriba. */ body.menu-open .nav:not(.is-stuck) .logo-light { display: none; } body.menu-open .nav:not(.is-stuck) .logo-dark { display: block; } /* ---- Section wrapper ---- */ .section { padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; } /* Espaciado uniforme entre las 4 secciones (Nubia · Impulso · Comunidad · Cómo empezar): cada gap = la referencia Nubia→Impulso (clamp(3rem,7vw,5rem)), repartida mitad/mitad. */ .section--mag { padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem); } #comunidad { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem); } #camino { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); } /* ---- Timeline ---- */ .timeline { margin-top: clamp(2.5rem,5vw,4rem); display: grid; gap: 0; } /* ===== Conjunto editorial: cita (centrada) + foto/carrera + reels ===== */ .founder-set { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3.4rem); display: grid; gap: clamp(2rem, 4vw, 3.2rem); box-shadow: 0 34px 80px -54px rgba(28,26,24,.45); } /* --- La cita, centrada de extremo a extremo --- */ .fset-quote { text-align: center; } .fset-quote .kicker { justify-content: center; margin-bottom: 1.1rem; } .fset-quote .kicker::before { display: none; } .founder-quote { font-family: var(--serif) !important; font-weight: 300; font-size: clamp(1.6rem, 3.5vw, 2.7rem) !important; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); margin: 0; } .founder-quote em { font-style: italic; color: var(--accent-deep); } .founder-quote .q-mark { color: var(--accent); font-size: 1.4em; line-height: 0; margin-right: .05em; } .founder-quote-sub { margin: 1.4rem auto 0; color: var(--ink-soft); font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.55; max-width: 64ch; } /* --- Foto (izq) + carrera (der), en la misma línea --- */ .fset-bio { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line-2); } .founder-photo { width: clamp(200px, 60vw, 300px); aspect-ratio: 1; border-radius: 50%; background: var(--grad-portada); padding: 6px; margin: 0; box-shadow: 0 24px 58px -26px rgba(28,26,24,.6); justify-self: center; } .founder-photo-inner { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--paper); box-sizing: border-box; } .founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; display: block; } .founder-info { min-width: 0; } .founder-id .name { font-family: var(--serif) !important; font-style: italic; font-size: clamp(1.8rem, 3.4vw, 2.3rem) !important; color: var(--ink); display: block; line-height: 1.05; } .founder-id .role { font-size: .85rem; color: var(--ink-mute); letter-spacing: .03em; margin-top: .25rem; display: block; } .author-creds { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; } .author-creds li { font-size: .92rem; color: var(--ink-soft); line-height: 1.4; } .author-creds li span { font-family: var(--serif); font-style: italic; color: var(--accent); margin-right: .45rem; } .founder-stat { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line); } .founder-stat .num { font-family: var(--serif) !important; font-weight: 300; font-size: clamp(1.6rem, 3.5vw, 2.7rem) !important; color: var(--ink); line-height: 1; letter-spacing: -.03em; } /* El reset global (arriba del archivo) fija el font-size de CADA span a 14px directamente sobre el propio span — un valor heredado del padre (.num) nunca le gana a eso, sin importar especificidad. Por eso hay que devolverles el tamaño explícitamente aquí, en vez de confiar en la herencia. */ .founder-stat .num span { font-size: inherit !important; } .founder-stat .num .suf { color: var(--accent); } .founder-stat .lbl { margin-top: .4rem; color: var(--ink-mute); font-size: .9rem; } /* --- Reels dentro del conjunto (últimos 5, en simultáneo, hover = agranda + reinicia) --- */ .reels-row { padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line-2); } .reels-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .reels-head .kicker { margin: 0; } /* "El día a día tras la marca" en UNA sola línea en móvil (pedido cliente). A 14px (el reset global de :not(...) fuerza los a 14px !important, de ahí el !important acá) con .26em de tracking el texto necesita ~335px y el contenedor solo da ~303px → se partía en 2 líneas. Se baja la fuente, el tracking y la barra para que quepa con margen incluso en pantallas de ~360px. Escritorio queda intacto. */ @media (max-width: 560px) { .reels-head .kicker { font-size: 11px !important; letter-spacing: .14em; white-space: nowrap; gap: .5rem; } .reels-head .kicker::before { width: 22px; } /* ===== Compactación móvil de la portada (auditoría 17-jul-2026) ===== El texto de las tarjetas arrancaba a 44-48px del borde porque se sumaban DOS rellenos: el del contenedor (--gutter, 19px) y el de la tarjeta (24-29px). El área de miembros ya está en 35px. Bajando ambos, el texto queda a ~30px y cada línea gana ~28px de ancho. Solo móvil. */ :root { --gutter: .875rem; } /* 19px → 14px (.container y .nav) */ /* Ojo: los paddings de .post, .step, .join-card y .auth-panel NO se pueden bajar acá — sus reglas base están MÁS ABAJO en este archivo (líneas ~516, ~712, ~530, ~632) y con igual especificidad gana la última. Van en un bloque al final del archivo. */ } .reels-link { font-size: .9rem; font-weight: 500; color: var(--accent-deep); transition: color .25s; white-space: nowrap; } .reels-link:hover { color: var(--accent); } .reels-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(135px, 1fr); gap: 5px; overflow-x: auto; padding: 4px 0; scrollbar-width: thin; } /* ===== Móvil (<720px): contener el bloque "Sobre Nubia" para que nada se salga ni se recorte ===== El `1fr` de las columnas del carrusel + la falta de min-width:0 en los contenedores empujaban el ancho del bloque más allá del viewport; con overflow-x:clip en el body eso se veía RECORTADO. */ @media (max-width: 719px) { .founder-set { padding: clamp(1rem, 4vw, 1.6rem); } /* menos padding = más ancho útil para el texto */ .founder-set, .founder-set > *, .fset-bio, .founder-info, .reels-row { min-width: 0; max-width: 100%; } /* Carrera/hitos de Nubia — Opción C (elegida por el cliente, 17-jul-2026): dos columnas. La etiqueta cursiva coral queda en una columna fija a la izquierda y el valor a su derecha, ENVOLVIENDO si hace falta (sin nowrap ni ellipsis → nada se corta). Todo alineado en columna, ordenado. */ .author-creds { gap: .6rem; } .author-creds li { display: grid; grid-template-columns: 4.7rem 1fr; gap: .5rem; align-items: baseline; font-size: .8rem; line-height: 1.32; } .author-creds li span { margin-right: 0; } /* Reels en móvil: los 5 en UNA fila con scroll horizontal. Ancho de columna definido (no 1fr) para que el scroll quede DENTRO de su caja y no empuje la página. SIN animación de zoom al tocar. */ .reels-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(130px, 42vw); gap: 8px; overflow-x: auto; } .reel { transition: none; will-change: auto; } /* !important: la base `.reel:hover { transform: scale(1.12) }` va DESPUÉS en el archivo y con igual especificidad le ganaba a este `none` — por eso el zoom seguía saliendo al tocar en móvil (iOS activa `:hover` pegajoso). Con !important este `none` manda sí o sí en ≤719px. */ .reel:hover, .reel:active, .reel:focus, .reel-slot:hover .reel { transform: none !important; box-shadow: none !important; z-index: auto !important; } } /* Cualquier dispositivo SIN hover real (todos los táctiles, sin importar el ancho): nunca aplicar el zoom. Cierra el caso también en tablets táctiles >719px. El scale solo tiene sentido con mouse. */ @media (hover: none) { .reel:hover, .reel:active, .reel:focus, .reel-slot:hover .reel { transform: none !important; box-shadow: none !important; z-index: auto !important; } } /* Celda de tamaño FIJO que es la que recibe el :hover. El reel interior es quien hace el zoom (scale): así el objetivo del hover nunca cambia de tamaño y el borde no puede "tiritar" al pasar el cursor. El reel conserva el pop-out (crece por encima de los vecinos) porque la celda deja overflow visible. */ .reel-slot { position: relative; aspect-ratio: 9/16; } .reel { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; display: block; background: #1C1A18; border: 1px solid var(--line-2); transition: transform .3s var(--ease-out), box-shadow .3s; will-change: transform; /* Sin arrastre nativo ni menú de long-press: en móvil, mantener pulsado un enlace/imagen lo "levantaba" (copia fantasma) y abría el callout de iOS. El tap se maneja por JS (popup); el scroll no se toca. */ -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .reel-slot:hover .reel { transform: scale(1.12); z-index: 6; box-shadow: 0 26px 54px -22px rgba(28,26,24,.6); } /* Los hijos no capturan el gesto: el tap/arrastre siempre cae en el , y el