/* ============================================ ODIGOS&CO. — SHARED STYLES Used by all v2 pages. Google Fonts loaded in HTML . ============================================ */ /* RESET + TOKENS */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #1F34FA; --primary-03: #031196; --third-01: #5D48F7; --third-02: #A89DFB; --negro: #222222; --gray-700: #595959; --gray-300: #D9D9D9; --white: #FFFFFF; --cream: #FBFBFA; --font-body: 'Inter', -apple-system, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --max-w: 1200px; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; color: var(--negro); background: var(--white); -webkit-font-smoothing: antialiased; line-height: 1.6; } /* `height: auto` no es cosmetico: sin el, el atributo height del HTML actua como altura de presentacion y la imagen se estira. En /wins/senzik tres renders salian a 1,200 y 1,600 px de alto con su `aspect-ratio` puesto y ignorado. Las que fijan su propia altura (el logo del nav) no cambian. */ img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* El `display:none` que el navegador le da a [hidden] lo pisa CUALQUIER regla de autor que declare display, porque la del navegador tiene la especificidad mas baja que existe. En las dos landings el campo de ciudad llevaba `hidden` puesto por su JavaScript y aun asi se veia siempre, porque su clase declara `display:grid`: la pregunta se le hacia a todo el mundo, ya hubiera elegido su plaza o no. Medido en 10 paginas: eran los dos unicos elementos del sitio que ignoraban el atributo. */ [hidden] { display: none !important; } /* LAYOUT */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; } /* PILLS */ .pill { display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; padding: 10px 22px; border-radius: 40px; border: 1px solid; transition: all 0.15s ease-out; white-space: nowrap; line-height: 18px; } .pill-blue { border-color: var(--primary); color: var(--primary); } .pill-blue:hover { background: var(--primary); color: var(--white); } .pill-white { border-color: rgba(255,255,255,0.6); color: var(--white); } .pill-white:hover { background: var(--white); color: var(--primary); } /* ANIMATIONS */ .fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1); } .fade-up.visible { opacity: 1; transform: translateY(0); } .fd1 { transition-delay: 0.06s; } .fd2 { transition-delay: 0.12s; } .fd3 { transition-delay: 0.18s; } @keyframes heroFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } } /* ============================================ NAV ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); } .nav-inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; height: 56px; } .nav-logo img { height: 35px; width: auto; } .nav-right { display: flex; align-items: center; gap: 24px; } .nav-link { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--third-01); transition: color 0.2s ease; } .nav-link:hover { color: var(--primary); } .nav-link--active { color: var(--primary); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; width: 32px; height: 32px; position: relative; } .nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--negro); position: absolute; left: 6px; transition: all 0.3s ease; } .nav-toggle span:nth-child(1) { top: 10px; } .nav-toggle span:nth-child(2) { top: 16px; } .nav-toggle span:nth-child(3) { top: 22px; } .nav-mobile { display: none; position: fixed; top: 56px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 24px 40px 32px; flex-direction: column; gap: 20px; } .nav-mobile.open { display: flex; } .nav-mobile a { font-size: 15px; font-weight: 500; color: var(--third-01); } /* `.pill` es un contenedor flex, asi que `text-align: center` no lo centra: hay que centrar el contenido del flex. El boton del menu movil salia con su texto pegado a la izquierda. */ .nav-mobile .pill { margin-top: 8px; text-align: center; justify-content: center; align-items: center; } /* ============================================ FOOTER ============================================ */ /* El footer es UNO para todo el sitio, asi que tampoco hereda el cuerpo de texto de la pagina que lo contiene: `/marketing-inmobiliario` lleva su propia tipografia fluida y su body mide 16.56px, asi que cada renglon del footer le salia medio pixel mas bajo y la columna acababa 6px mas corta que en las otras 132. En estas 132 no cambia nada: ya heredaban 16. */ .footer { background: var(--negro); color: var(--white); font-size: 16px; line-height: 1.6; } .footer-main { display: flex; gap: 0; padding: 56px 0 40px; } .footer-col { display: flex; flex-direction: column; } .footer-col--logo { flex: 0 0 26%; display: flex; align-items: flex-start; padding-right: 40px; } .footer-logo-big { height: clamp(40px, 6vw, 70px); width: auto; } .footer-col--cases { flex: 0 1 300px; padding: 0 32px; border-left: 1px solid rgba(255,255,255,0.08); } .footer-col--nav { flex: 1 1 auto; padding: 0 32px; border-left: 1px solid rgba(255,255,255,0.08); } .footer-col--social { flex: 0 0 120px; padding: 0 0 0 32px; border-left: 1px solid rgba(255,255,255,0.08); } .footer-col-title { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--white); opacity: 0.25; margin-bottom: 20px; } .footer-link { display: block; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--white); opacity: 0.5; transition: opacity 0.2s ease; margin-bottom: 14px; } .footer-link:hover { opacity: 1; } .footer-link--cta { opacity: 0.35; margin-top: 10px; line-height: 1.5; /* la flecha viaja pegada a la ultima palabra: sin esto quedaba sola en su propio renglon cuando el texto se partia */ text-wrap: pretty; } .footer-link--cta:hover { opacity: 0.8; } .footer-copy-row { border-top: 1px solid rgba(255,255,255,0.08); padding: 16px 0 24px; } .footer-copy { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--white); opacity: 0.25; line-height: 1.6; } /* ============================================ INICIO — Hero ============================================ */ .hero { margin-top: 56px; background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; padding: 80px 40px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; overflow: hidden; } .hero-lines { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); pointer-events: none; z-index: 0; } .hero-lines svg { width: 100%; height: auto; } .hero h1 { font-weight: 600; font-size: clamp(36px, 5vw, 64px); line-height: 1.12; letter-spacing: -0.5px; color: var(--negro); max-width: 14ch; margin: 0 auto; animation: heroFade 0.8s cubic-bezier(0.25,0.46,0.45,0.94) both; position: relative; z-index: 1; } .hero h1 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--primary); } .hero h1 .dot { color: var(--primary); } .hero-sub { font-size: 14px; color: var(--gray-700); letter-spacing: 0.5px; margin-top: 16px; position: relative; z-index: 1; animation: heroFade 0.8s cubic-bezier(0.25,0.46,0.45,0.94) 0.15s both; } /* ============================================ INICIO — Cases grid ============================================ */ .cases { padding: 80px 0 64px; background: var(--white); } .cases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cases-card { position: relative; overflow: hidden; display: flex; flex-direction: column; } .cases-card-info { border-left: 2px solid transparent; transition: border-color 0.2s ease; } .cases-card:hover .cases-card-info { border-left-color: var(--primary); } .cases-card-img-wrap { height: 280px; overflow: hidden; position: relative; border-radius: 4px; } .cases-card-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%) brightness(1.05); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease; } .cases-card:hover .cases-card-image { transform: scale(1.03); filter: grayscale(0%) brightness(1); } .cases-card-info { padding: 10px 0 0 10px; flex-shrink: 0; } .cases-card-name { font-weight: 600; font-size: 14px; color: var(--negro); } .cases-card-meta { font-size: 13px; color: var(--gray-700); margin-top: 2px; line-height: 1.4; } .cases-card-team { font-size: 13px; font-weight: 500; color: var(--gray-700); margin-top: 3px; } .cases-cta { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.06); text-align: right; } .cases-cta a { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gray-700); transition: color 0.2s ease; } .cases-cta a:hover { color: var(--primary); } /* ============================================ INICIO — Logos ============================================ */ .logos { padding: 56px 0; background: var(--cream); border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); } .logos-label { font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gray-300); text-align: center; margin-bottom: 20px; } .logos-tier + .logos-tier { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(0,0,0,0.04); } .logos-row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } .logos-row--institutional { gap: 56px; } .logo-item { display: inline-flex; align-items: center; } .logo-item img { height: 22px; width: auto; opacity: 0.45; transition: opacity 0.3s ease; } .logo-item:hover img { opacity: 0.7; } .logo-item--institutional img { height: 28px; opacity: 0.5; } .logo-item--institutional:hover img { opacity: 0.75; } /* ============================================ INICIO — Map presence ============================================ */ .map-presence { padding: 80px 0; background: var(--cream); border-top: 1px solid rgba(0,0,0,0.06); } .map-presence .wrap { display: flex; align-items: center; justify-content: center; gap: 60px; } .map-info { flex: 0 0 260px; } .map-label { font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gray-300); margin-bottom: 24px; } .map-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; } .map-cities span { font-size: 13px; color: var(--gray-700); line-height: 1.9; } .map-canvas-wrap { flex: 1; display: flex; justify-content: center; } #dotmap { width: 100%; max-width: 560px; } .map-cta { text-align: center; padding: 64px 40px 0; } .map-cta-heading { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(24px, 3vw, 36px); color: var(--primary); margin-bottom: 24px; } /* ============================================ INICIO — Closing (video bento + overlay) ============================================ */ .closing { position: relative; overflow: hidden; min-height: 80vh; display: flex; align-items: center; justify-content: center; background: var(--negro); } .closing-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1.4fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px; padding: 40px; } .closing-cell { overflow: hidden; border-radius: 4px; } .closing-cell video { width: 100%; height: 100%; object-fit: cover; display: block; } .closing-cell--a { grid-column: 1 / 2; grid-row: 1 / 3; } .closing-cell--b { grid-column: 2 / 3; grid-row: 1 / 2; } .closing-cell--c { grid-column: 3 / 4; grid-row: 1 / 3; } .closing-cell--d { grid-column: 4 / 5; grid-row: 1 / 2; } .closing-cell--e { grid-column: 2 / 3; grid-row: 2 / 3; } .closing-cell--f { grid-column: 4 / 5; grid-row: 2 / 4; } .closing-cell--g { grid-column: 1 / 3; grid-row: 3 / 4; } .closing-cell--h { grid-column: 3 / 4; grid-row: 3 / 4; } .closing::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 100%); z-index: 1; } .closing-overlay { position: relative; z-index: 2; text-align: center; padding: 40px; } .closing-overlay p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.35; color: var(--white); max-width: 560px; text-shadow: 0 2px 30px rgba(0,0,0,0.6); } /* ============================================ INICIO — CTA blue band ============================================ */ .cta-blue { background: var(--primary); padding: 96px 0; text-align: center; } .cta-blue h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.2; color: var(--white); margin-bottom: 16px; } .cta-blue p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.6); margin-bottom: 36px; max-width: 420px; margin-left: auto; margin-right: auto; } /* ============================================ WINS — Hero ============================================ */ .hero-wins { margin-top: 56px; background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: 80px 40px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; overflow: hidden; } .hero-wins-lines { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); pointer-events: none; z-index: 0; } .hero-wins-lines svg { width: 100%; height: auto; } .hero-wins h1 { font-weight: 600; font-size: clamp(36px, 5vw, 64px); line-height: 1.12; letter-spacing: -0.5px; color: var(--negro); max-width: 18ch; margin: 0 auto; animation: heroFade 0.8s cubic-bezier(0.25,0.46,0.45,0.94) both; position: relative; z-index: 1; } .hero-wins h1 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--primary); } .hero-wins h1 .dot { color: var(--primary); } /* ============================================ WINS — Filters ============================================ */ .filters { padding: 40px 0 0; position: sticky; top: 56px; z-index: 50; background: var(--white); border-bottom: 1px solid rgba(0,0,0,0.06); } .filters-inner { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; } .filter-btn { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 18px; border-radius: 40px; border: 1px solid var(--gray-300); background: transparent; color: var(--gray-700); cursor: pointer; transition: all 0.15s ease-out; white-space: nowrap; } .filter-btn:hover { border-color: var(--primary); color: var(--primary); } .filter-btn.active { background: var(--primary); border-color: var(--primary); color: var(--white); } /* ============================================ WINS — Masonry grid + cards ============================================ */ .wins-grid-section { padding: 48px 0 80px; } .wins-masonry { display: flex; gap: 24px; } .wins-col { flex: 1; display: flex; flex-direction: column; gap: 32px; } .win-card { width: 100%; cursor: pointer; flex-shrink: 0; transition: opacity 0.35s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.4s cubic-bezier(0.16,1,0.3,1); } .win-card-img { width: 100%; overflow: hidden; border-radius: 4px; position: relative; } .win-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) brightness(1.05); transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease; } .win-card:hover .win-card-img img { transform: scale(1.03); filter: grayscale(0%) brightness(1); } .win-card-placeholder { width: 100%; background: #EFEFEF; border-radius: 4px; position: relative; overflow: hidden; } .win-card-placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 100%); } .win-card-info { padding: 14px 0 0; } .win-card-name { font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--negro); margin-bottom: 6px; } .win-card-title { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--gray-700); letter-spacing: -0.1px; } .win-card--tall .win-card-img, .win-card--tall .win-card-placeholder { height: 420px; } .win-card--medium .win-card-img, .win-card--medium .win-card-placeholder { height: 320px; } .win-card--short .win-card-img, .win-card--short .win-card-placeholder { height: 220px; } .win-card.leaving { opacity: 0; transform: scale(0.97) translateY(6px); } .win-card.entering { opacity: 0; transform: translateY(16px); } .win-card.entering.show { opacity: 1; transform: translateY(0); } /* ============================================ CASO DE ESTUDIO — Base components Used by all case study pages (wins/casos/*) ============================================ */ /* Hero */ .caso-hero { margin-top: 56px; position: relative; width: 100%; height: 64vh; min-height: 480px; overflow: hidden; } .caso-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; } .caso-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.78) 100%); } .caso-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 0 56px; } .caso-hero-name { font-weight: 700; font-size: clamp(40px, 5.5vw, 64px); color: var(--white); letter-spacing: -0.8px; line-height: 1.05; margin-bottom: 18px; } .caso-hero-statement { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(18px, 2.1vw, 26px); line-height: 1.4; color: rgba(255,255,255,0.88); max-width: 620px; margin: 0 0 28px; letter-spacing: 0.1px; } .caso-hero-statement em { font-style: italic; color: var(--white); font-weight: 500; } .caso-hero-meta { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 4px; letter-spacing: 0.2px; } .caso-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .caso-hero-tag { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--white); border: 1px solid rgba(255,255,255,0.35); padding: 4px 12px; border-radius: 40px; } /* Intro — lede + body */ .caso-intro { padding: 96px 0; } .caso-intro-lede { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.35; color: var(--negro); max-width: 780px; margin-bottom: 28px; letter-spacing: -0.3px; text-wrap: balance; } .caso-intro-body { font-size: 17px; line-height: 1.7; color: var(--gray-700); max-width: 680px; } .caso-intro p { font-size: 18px; line-height: 1.7; color: var(--gray-700); max-width: 720px; } /* Section statement — italic pull quote */ .caso-section-statement { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--negro); max-width: 720px; margin: 0 0 40px; letter-spacing: -0.2px; text-wrap: balance; } /* Sections */ .caso-section { padding: 96px 0; } .caso-section--cream { background: var(--cream); } /* 17px y sin mayusculas, la misma receta que se aplico al analista en julio. La version vieja juntaba cuatro cosas que pelean entre si: Playfair en italica, TODO EN MAYUSCULAS, 11 o 12px y letras separadas. Deuda 7. */ .caso-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 32px; } .caso-paragraphs { max-width: 680px; margin-bottom: 40px; } .caso-paragraphs p { font-size: 16px; line-height: 1.7; color: var(--gray-700); margin-bottom: 24px; } .caso-paragraphs p:last-child { margin-bottom: 0; } /* Datos clave */ .caso-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(0,0,0,0.06); } .caso-dato-num { font-size: 42px; font-weight: 700; color: var(--negro); line-height: 1; letter-spacing: -1px; margin-bottom: 6px; } .caso-dato-label { font-size: 13px; color: var(--gray-700); line-height: 1.4; } /* Alcance — grid format matching ventas-funnel */ .caso-alcance { margin-top: 72px; } .caso-alcance-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--negro); margin-bottom: 32px; letter-spacing: -0.2px; } .caso-alcance-list { list-style: none; padding: 0; border: none; counter-reset: alcance-item; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; } .caso-alcance-list li { display: block; padding: 0; border: none; font-size: 15px; font-weight: 400; color: var(--gray-700); line-height: 1.6; counter-increment: alcance-item; } .caso-alcance-list li::before { content: counter(alcance-item, decimal-leading-zero); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 36px; line-height: 1; color: var(--primary); letter-spacing: -0.5px; display: block; margin-bottom: 12px; } /* Visual */ .caso-visual { margin: 40px 0; border-radius: 4px; overflow: hidden; } .caso-visual img { width: 100%; display: block; transition: transform 0.4s ease; } .caso-visual:hover img { transform: scale(1.02); } .caso-caption { font-size: 12px; color: var(--gray-300); margin-top: 10px; } /* CTA */ .caso-cta { padding: 96px 0; text-align: center; border-top: 1px solid rgba(0,0,0,0.06); } .caso-cta-heading { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(24px, 3vw, 36px); color: var(--primary); margin-bottom: 24px; } /* ============================================ DATA VISUALIZATION — Estudios de Mercado Charts rendered by Chart.js, styled here ============================================ */ .caso-dataviz { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 48px 0; } .caso-chart-card { background: var(--white); border-radius: 12px; padding: 28px 24px 20px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 1px 3px rgba(0,0,0,0.02); } .caso-section--cream .caso-chart-card { background: var(--white); } .caso-chart-label { font-family: var(--font-display); font-style: italic; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--third-01); margin-bottom: 4px; } .caso-chart-title { font-size: 15px; font-weight: 600; color: var(--negro); margin-bottom: 20px; line-height: 1.3; } .caso-chart-card canvas { max-height: 220px; } .caso-chart-insight { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--gray-700); line-height: 1.55; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); letter-spacing: 0.1px; } /* ============================================ MARKETING STRATEGY — Diagrams Pure HTML/CSS, no images ============================================ */ .mkt-strategy { margin: 40px 0; } .mkt-funnel { display: flex; gap: 4px; margin-bottom: 32px; } .mkt-funnel-step { flex: 1; padding: 20px 16px; border-radius: 6px; text-align: center; background: var(--cream); transition: background 0.2s ease; } .caso-section--cream .mkt-funnel-step { background: var(--white); } .mkt-funnel-step-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-700); margin-bottom: 8px; } .mkt-funnel-step-value { font-size: 14px; font-weight: 500; color: var(--negro); line-height: 1.4; } .mkt-audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 32px 0; } .mkt-audience-card { background: var(--cream); border-left: 3px solid var(--primary); padding: 16px 20px; border-radius: 0 6px 6px 0; } .caso-section--cream .mkt-audience-card { background: var(--white); } .mkt-audience-card-name { font-size: 13px; font-weight: 600; color: var(--negro); margin-bottom: 4px; } .mkt-audience-card-detail { font-size: 13px; color: var(--gray-700); line-height: 1.5; } /* ============================================ CONTENIDO MOSAIC — Photos + Videos grid Configurable 3-8 items ============================================ */ .contenido-mosaic { display: grid; gap: 8px; margin: 40px auto; max-width: 900px; } .contenido-mosaic--3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .contenido-mosaic--4 { grid-template-columns: 1fr 1fr; } .contenido-mosaic--5 { grid-template-columns: repeat(3, 1fr); } .contenido-mosaic--6 { grid-template-columns: repeat(3, 1fr); } .contenido-mosaic--7 { grid-template-columns: repeat(3, 1fr); } .contenido-mosaic--8 { grid-template-columns: repeat(4, 1fr); } .contenido-mosaic--custom { grid-template-columns: repeat(2, 1fr); } .contenido-mosaic-item { border-radius: 4px; overflow: hidden; position: relative; } .contenido-mosaic-item img, .contenido-mosaic-item video { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 180px; } .contenido-mosaic-item--wide { grid-column: span 2; } .contenido-mosaic-item--tall { grid-row: span 2; } /* --7 layout: 3-col grid */ .contenido-mosaic--7 .contenido-mosaic-item img, .contenido-mosaic--7 .contenido-mosaic-item video { min-height: 0; height: 100%; } /* ============================================ VENTAS/TECNOLOGIA — Editorial process diagrams Numbered horizontal funnel + asset cards ============================================ */ .ventas-funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 56px 0 72px; position: relative; counter-reset: funnel-step; } .ventas-funnel::before { content: ''; position: absolute; top: 32px; left: 6%; right: 6%; height: 1px; background: linear-gradient(to right, rgba(31,52,250,0.3) 0%, rgba(31,52,250,0.15) 50%, rgba(31,52,250,0.3) 100%); pointer-events: none; } .ventas-funnel-step { background: transparent; padding: 0 24px 0 0; text-align: left; position: relative; counter-increment: funnel-step; } .ventas-funnel-step::before { content: counter(funnel-step, decimal-leading-zero); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 56px; line-height: 1; color: var(--primary); display: block; margin-bottom: 24px; letter-spacing: -1px; position: relative; z-index: 1; background: var(--white); padding-right: 12px; width: fit-content; } .caso-section--cream .ventas-funnel-step::before { background: var(--cream); } .ventas-funnel-name { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--negro); margin-bottom: 10px; } .ventas-funnel-desc { font-size: 13px; font-weight: 400; color: var(--gray-700); line-height: 1.55; } .ventas-assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 56px 0 0; border-top: 1px solid rgba(0,0,0,0.08); } .ventas-asset-card { background: transparent; border-right: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); padding: 32px 28px 32px 0; margin-right: 28px; } .ventas-asset-card:last-child { border-right: none; margin-right: 0; padding-right: 0; } .caso-section--cream .ventas-asset-card { background: transparent; } .ventas-asset-card-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--negro); margin-bottom: 10px; letter-spacing: -0.2px; } .ventas-asset-card-desc { font-size: 13.5px; color: var(--gray-700); line-height: 1.6; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { /* Inicio cases */ .cases-grid { grid-template-columns: 1fr 1fr; } /* Wins masonry */ .wins-masonry { gap: 16px; } .wins-col:nth-child(3) { display: none; } } @media (max-width: 768px) { /* Nav — mobile: logo bigger, hide text links, show hamburger, hide pill */ .nav-inner { padding: 0 28px; height: 56px; } .nav-logo img { height: 28px; } .nav-link { display: none; } .nav-right .pill { display: none; } .nav-toggle { display: block; } /* Layout — more breathing room on mobile */ .wrap { padding: 0 28px; } section.wrap { padding-left: 28px; padding-right: 28px; } /* Inicio hero */ .hero { min-height: 60vh; padding: 80px 24px; } .hero h1 { font-size: clamp(28px, 8vw, 36px); max-width: 100%; } .hero-sub { font-size: 13px; } /* Inicio cases */ .cases-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .cases-card-img-wrap { height: 180px; } .cases-card-name { font-size: 13px; } .cases-card-meta, .cases-card-team { font-size: 12px; } .cases { padding: 48px 0 40px; } /* Inicio logos */ .logos { padding: 40px 0; } .logos-row { gap: 16px; } .logos-row--institutional { gap: 24px; } .logo-item img { height: 16px; } .logo-item--institutional img { height: 20px; } /* Inicio map */ .map-presence { padding: 48px 0; } .map-presence .wrap { flex-direction: column-reverse; gap: 32px; } .map-info { flex: none; width: 100%; } .map-cities { grid-template-columns: 1fr 1fr; gap: 2px 16px; } .map-cta { padding: 40px 0 0; } .map-cta-heading { font-size: 24px; } /* Inicio closing */ .closing { min-height: 50vh; } .closing-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 8px; padding: 20px; } .closing-cell--a { grid-column: 1; grid-row: 1; } .closing-cell--b { grid-column: 2; grid-row: 1; } .closing-cell--c { grid-column: 1 / 3; grid-row: 2; } .closing-cell--d { grid-column: 1; grid-row: 3; } .closing-cell--e { grid-column: 2; grid-row: 3; } .closing-cell--f { grid-column: 1; grid-row: 4; } .closing-cell--g { grid-column: 2; grid-row: 4; } .closing-cell--h { display: none; } .closing-overlay p { font-size: 22px; } /* Inicio CTA blue */ .cta-blue { padding: 64px 0; } .cta-blue h2 { font-size: 26px; } /* Wins hero */ .hero-wins { min-height: 40vh; padding: 60px 24px; } .hero-wins h1 { font-size: clamp(28px, 8vw, 36px); } /* Wins filters */ .filters { top: 56px; } .filters-inner { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 16px; -webkit-overflow-scrolling: touch; } .filter-btn { font-size: 10px; padding: 6px 14px; flex-shrink: 0; } /* Wins masonry */ .wins-grid-section { padding: 32px 0 64px; } .wins-masonry { flex-direction: column; gap: 16px; } .wins-col { display: contents; } .win-card--tall .win-card-img, .win-card--tall .win-card-placeholder { height: 260px; } .win-card--medium .win-card-img, .win-card--medium .win-card-placeholder { height: 220px; } .win-card--short .win-card-img, .win-card--short .win-card-placeholder { height: 180px; } .win-card-name { font-size: 8px; } .win-card-title { font-size: 14px; } /* Case study */ .caso-hero { height: 40vh; min-height: 280px; } .caso-hero-name { font-size: 28px; margin-bottom: 12px; } .caso-hero-statement { font-size: 16px; margin-bottom: 16px; } .caso-hero-meta { font-size: 12px; } .caso-hero-tag { font-size: 9px; padding: 3px 10px; } .caso-hero-content { padding-bottom: 32px; } .caso-intro { padding: 56px 0; } .caso-intro p { font-size: 16px; } .caso-section { padding: 56px 0; } .caso-section-statement { font-size: 20px; margin-bottom: 28px; } .caso-eyebrow { margin-bottom: 20px; } .caso-paragraphs p { font-size: 15px; } .caso-datos { grid-template-columns: 1fr; gap: 20px; } .caso-dato-num { font-size: 32px; } .caso-cta { padding: 56px 0; } .caso-cta-heading { font-size: 22px; } /* Data viz */ .caso-dataviz { grid-template-columns: 1fr; gap: 16px; margin-left: 0; margin-right: 0; } .caso-chart-card { padding: 24px 20px 20px; border-radius: 10px; } .caso-chart-card canvas { max-height: 200px; width: 100% !important; } /* Marketing */ .mkt-funnel { flex-direction: column; gap: 8px; } .mkt-funnel-step { padding: 16px; } .mkt-audience-grid { grid-template-columns: 1fr; gap: 10px; } /* Contenido mosaic */ .contenido-mosaic--3, .contenido-mosaic--4, .contenido-mosaic--5, .contenido-mosaic--6, .contenido-mosaic--7, .contenido-mosaic--8 { grid-template-columns: 1fr 1fr; } .contenido-mosaic-item--wide { grid-column: span 2; } .contenido-mosaic--7 > .contenido-mosaic-item:nth-child(1) { grid-column: 1 / -1; } .contenido-mosaic-item img, .contenido-mosaic-item video { min-height: 140px; } /* Ventas */ .ventas-funnel { grid-template-columns: 1fr 1fr; gap: 16px 24px; } .ventas-funnel::before { display: none; } .ventas-funnel-step { padding-right: 0; } .ventas-funnel-step::before { font-size: 28px; margin-bottom: 12px; padding-right: 8px; } .ventas-funnel-name { font-size: 10px; margin-bottom: 6px; } .ventas-funnel-desc { font-size: 12px; } .ventas-assets { grid-template-columns: 1fr; } .ventas-asset-card { border-right: none; margin-right: 0; padding-right: 0; } /* Alcance editorial */ .caso-alcance { margin-top: 48px; } .caso-alcance-list { grid-template-columns: 1fr 1fr; gap: 24px 20px; } .caso-alcance-list li { font-size: 13px; } .caso-alcance-list li::before { font-size: 28px; margin-bottom: 8px; } /* Footer */ .footer-main { flex-direction: column; gap: 0; padding: 32px 0 24px; } .footer-col--logo { flex: none; padding: 0 0 24px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-logo-big { height: 40px; } .footer-col--cases { padding: 24px 0; border-left: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-col--nav { flex: none; padding: 24px 0; border-left: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-col--social { flex: none; padding: 24px 0 0; border-left: none; } } /* ACCESSIBILITY */ a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; } /* CROSS-LINKING — Más proyectos */ .casos-relacionados { padding: 48px 0; border-top: 1px solid rgba(0,0,0,0.06); } .casos-relacionados-title { font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gray-300); margin-bottom: 20px; } .casos-relacionados-grid { display: flex; gap: 32px; } .casos-relacionados-link { font-size: 14px; font-weight: 500; color: var(--gray-700); transition: color 0.2s ease; } .casos-relacionados-link:hover { color: var(--primary); } @media (max-width: 640px) { .casos-relacionados-grid { flex-direction: column; gap: 16px; } } /* ============================================ BLOG — article layout ============================================ */ .blog-wrap { max-width: 760px; margin: 0 auto; padding: 0 48px; } .blog-hero { padding: 120px 0 48px; } /* 17px y sin mayusculas, la misma receta que se aplico al analista en julio. La version vieja juntaba cuatro cosas que pelean entre si: Playfair en italica, TODO EN MAYUSCULAS, 11 o 12px y letras separadas. Deuda 7. */ .blog-hero-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 24px; } .blog-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: 1.15; color: var(--negro); letter-spacing: -0.6px; margin-bottom: 24px; } .blog-hero-dek { font-size: 19px; line-height: 1.6; color: var(--gray-700); max-width: 680px; margin-bottom: 32px; } .blog-hero-meta { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--gray-700); padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.08); } .blog-hero-meta span { display: inline-flex; align-items: center; } .blog-hero-meta span + span::before { content: "·"; margin-right: 16px; color: var(--gray-300); } .blog-body { padding: 16px 0 96px; } .blog-body p { font-size: 17px; line-height: 1.8; color: var(--gray-700); margin-bottom: 24px; } .blog-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.25; color: var(--negro); letter-spacing: -0.3px; margin: 56px 0 20px; } .blog-body h3 { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.35; color: var(--negro); margin: 40px 0 16px; } .blog-body ul, .blog-body ol { padding-left: 22px; margin-bottom: 24px; font-size: 17px; line-height: 1.8; color: var(--gray-700); } .blog-body li { margin-bottom: 10px; } .blog-body blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--negro); border-left: 2px solid var(--primary); padding: 8px 0 8px 24px; margin: 40px 0; } .blog-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .blog-body img { width: 100%; height: auto; border-radius: 6px; margin: 32px 0; } .blog-body figure { margin: 32px 0; } .blog-body figcaption { font-size: 12px; color: var(--gray-300); margin-top: 8px; font-family: var(--font-display); font-style: italic; } /* ============================================ ANALISTA — landing con grid de zonas ============================================ */ .analista-hero { padding: 140px 0 80px; background: var(--cream); border-bottom: 1px solid rgba(0,0,0,0.06); } .analista-hero-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.4px; color: var(--third-01); margin-bottom: 28px; } .analista-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.1; color: var(--negro); letter-spacing: -0.8px; max-width: 880px; margin-bottom: 28px; } .analista-hero-dek { font-size: 18px; line-height: 1.6; color: var(--gray-700); max-width: 680px; } .analista-grid-section { padding: 80px 0 120px; } .analista-grid-section-title { font-family: var(--font-display); font-style: italic; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: var(--third-01); margin-bottom: 40px; } .analista-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.08); } .analista-card { display: flex; flex-direction: column; justify-content: space-between; padding: 32px 28px; background: var(--white); min-height: 200px; transition: background 0.25s ease; } .analista-card:hover { background: var(--cream); } .analista-card-top { display: flex; flex-direction: column; gap: 12px; } .analista-card-zone { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--negro); letter-spacing: -0.3px; } .analista-card-meta { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1px; color: var(--third-01); } .analista-card-dek { font-size: 14px; line-height: 1.5; color: var(--gray-700); } .analista-card-arrow { /* 13.5px y no 12px: es lo unico clickeable de la tarjeta, y a 12 pedia la accion en tamano de nota al pie. La etiqueta del trimestre se queda en 11, que es lo correcto para un dato de contexto (decision de Jaime, 2026-08-11). */ display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); } /* ============================================ REPORTE — layout trimestral por zona ============================================ */ .reporte-hero { padding: 140px 0 72px; background: var(--white); border-bottom: 1px solid rgba(0,0,0,0.06); } .reporte-hero-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.4px; color: var(--third-01); margin-bottom: 24px; } .reporte-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.1; color: var(--negro); letter-spacing: -0.8px; max-width: 880px; margin-bottom: 24px; } .reporte-hero-dek { font-size: 18px; line-height: 1.6; color: var(--gray-700); max-width: 720px; margin-bottom: 32px; } .reporte-hero-meta { display: flex; gap: 20px; align-items: center; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-700); padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.08); } .reporte-hero-meta span + span::before { content: "·"; margin-right: 20px; color: var(--gray-300); } .reporte-body { padding: 0; } .reporte-section { padding: 80px 0; } .reporte-section--cream { background: var(--cream); } .reporte-section-grid { display: grid; grid-template-columns: 240px 1fr; gap: 64px; } .reporte-section-num { font-family: var(--font-display); font-style: italic; font-size: 13px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--third-01); } .reporte-section-heading { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; color: var(--negro); letter-spacing: -0.4px; margin-bottom: 32px; } .reporte-section-body p { font-size: 16px; line-height: 1.75; color: var(--gray-700); max-width: 680px; margin-bottom: 20px; } .reporte-section-body p:last-of-type { margin-bottom: 0; } .reporte-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .reporte-insight { padding: 24px; background: var(--white); border-left: 2px solid var(--primary); } .reporte-section--cream .reporte-insight { background: var(--cream); border-color: var(--primary); } .reporte-insight-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.1px; color: var(--gray-700); margin-bottom: 10px; } .reporte-insight-value { font-size: 28px; font-weight: 600; color: var(--negro); line-height: 1.1; letter-spacing: -0.5px; } .reporte-chart-placeholder, .reporte-table-placeholder { margin-top: 40px; padding: 64px 32px; border: 1.5px dashed rgba(31, 52, 250, 0.25); background: rgba(31, 52, 250, 0.02); border-radius: 6px; text-align: center; } .reporte-chart-placeholder-label, .reporte-table-placeholder-label { font-family: var(--font-display); font-style: italic; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: var(--primary); margin-bottom: 8px; } .reporte-chart-placeholder-desc, .reporte-table-placeholder-desc { font-size: 13px; color: var(--gray-700); line-height: 1.5; } /* Responsive — blog + analista + reporte */ @media (max-width: 1024px) { .analista-grid { grid-template-columns: repeat(2, 1fr); } .reporte-insights { grid-template-columns: repeat(2, 1fr); } .reporte-section-grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 640px) { .blog-wrap { padding: 0 24px; } .blog-hero { padding: 96px 0 32px; } .blog-body { padding: 8px 0 72px; } .analista-hero { padding: 96px 0 56px; } .analista-grid { grid-template-columns: 1fr; } .analista-card { padding: 24px 20px; min-height: 160px; } .reporte-hero { padding: 96px 0 48px; } .reporte-section { padding: 56px 0; } .reporte-insights { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } .reporte-hero-meta { flex-wrap: wrap; gap: 12px; } .reporte-hero-meta span + span::before { margin-right: 12px; } } /* ============================================ PROJECT CTA — reusable (nosotros + reportes) ============================================ */ .project-cta { padding: 96px 0; background: var(--cream); text-align: center; border-top: 1px solid rgba(0,0,0,0.06); } .project-cta h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.2; color: var(--primary); margin-bottom: 64px; } .cta-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 960px; margin: 0 auto 56px; text-align: left; } .cta-step { padding: 0 40px 0 0; margin-right: 40px; border-right: 1px solid rgba(0,0,0,0.08); } .cta-step:last-child { border-right: none; margin-right: 0; padding-right: 0; } .cta-step-num { font-family: var(--font-display); font-style: italic; font-size: 64px; font-weight: 400; color: var(--primary); opacity: 0.3; line-height: 1; margin-bottom: 20px; letter-spacing: -1px; } .cta-step h3 { font-weight: 600; font-size: 16px; color: var(--negro); margin-bottom: 10px; } .cta-step p { font-size: 14px; line-height: 1.65; color: var(--gray-700); } @media (max-width: 768px) { .project-cta { padding: 56px 0; } .project-cta h2 { font-size: 28px; margin-bottom: 40px; } .cta-steps { grid-template-columns: 1fr; max-width: 100%; gap: 0; } .cta-step { padding: 24px 0; margin-right: 0; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.06); } .cta-step:last-child { border-bottom: none; } .cta-step-num { font-size: 48px; margin-bottom: 12px; } } /* ============================================ REPORTE — longform layout (reportes con contenido real) ============================================ */ .reporte-longform { padding: 72px 0 96px; background: var(--white); } .reporte-longform-wrap { max-width: 840px; margin: 0 auto; padding: 0 48px; } .reporte-longform-wrap p { font-size: 17px; line-height: 1.8; color: var(--gray-700); margin-bottom: 22px; } .reporte-longform-wrap h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.25; color: var(--negro); letter-spacing: -0.3px; margin: 64px 0 24px; } .reporte-longform-wrap h2:first-child { margin-top: 0; } .reporte-longform-wrap h3 { font-family: var(--font-body); font-weight: 600; font-size: 19px; line-height: 1.35; color: var(--negro); margin: 40px 0 16px; } .reporte-longform-wrap h4 { font-family: var(--font-display); font-style: italic; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: var(--third-01); margin: 32px 0 12px; } .reporte-longform-wrap ul, .reporte-longform-wrap ol { padding-left: 22px; margin-bottom: 22px; font-size: 17px; line-height: 1.75; color: var(--gray-700); } .reporte-longform-wrap li { margin-bottom: 10px; } .reporte-longform-wrap strong { color: var(--negro); font-weight: 600; } .reporte-longform-wrap em { font-style: italic; } .reporte-longform-wrap hr { border: 0; border-top: 1px solid rgba(0,0,0,0.08); margin: 56px 0; } .reporte-longform-wrap .reporte-source { font-size: 13px; color: var(--gray-300); font-style: italic; margin-top: -10px; margin-bottom: 32px; line-height: 1.5; } /* En pantallas de escritorio angostas el logo cede primero: es lo unico del footer que no lleva informacion, y sin esto los tres botones se parten en dos renglones cada uno. */ @media (max-width: 1180px) { .footer-col--logo { flex: 0 0 180px; padding-right: 24px; } .footer-col--cases { flex: 0 1 260px; padding: 0 24px; } .footer-col--nav { padding: 0 24px; } } @media (max-width: 1000px) { /* el espaciado de letras es lo primero que sobra cuando falta ancho */ .footer-col--nav .footer-link--cta { letter-spacing: 1.2px; } .footer-col--logo { flex: 0 0 120px; padding-right: 16px; } .footer-col--cases { flex: 0 1 186px; padding: 0 16px; } .footer-col--nav { padding: 0 18px; } .footer-col--social { flex: 0 0 100px; padding-left: 18px; } } /* ============================================ ANALISTA — la tarjeta del resumen nacional Es la unica pieza semestral y la que resume a las otras 18, asi que no comparte reja con ellas: ocupa el ancho completo y es el unico bloque azul de la pagina. Antes vivia dentro de la reja de tres columnas con una sola tarjeta, y las dos columnas vacias se leian como un recuadro gris. ============================================ */ .nacional-card { display: grid; grid-template-columns: 300px 1fr; align-items: stretch; background: var(--primary); color: var(--white); border-radius: 4px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .nacional-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31,52,250,.18); } .nacional-card-periodo { display: flex; flex-direction: column; justify-content: center; padding: 44px 36px; border-right: 1px solid rgba(255,255,255,0.16); } .nacional-card-num { font-family: var(--font-display); font-style: italic; font-size: 30px; line-height: 1.05; color: var(--white); opacity: .92; } .nacional-card-anio { font-size: clamp(52px, 6vw, 76px); font-weight: 600; line-height: .95; letter-spacing: -2px; color: var(--white); } .nacional-card-cuerpo { padding: 44px 40px; display: flex; flex-direction: column; } .nacional-card-meta { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,0.72); margin: 0 0 10px; } .nacional-card-zona { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 400; line-height: 1.15; letter-spacing: -0.5px; color: var(--white); margin: 0; } .nacional-card-dek { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.86); max-width: 60ch; margin: 12px 0 0; } .nacional-card-arrow { margin-top: auto; padding-top: 22px; font-size: 13.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--white); } @media (max-width: 860px) { .nacional-card { grid-template-columns: 1fr; } .nacional-card-periodo { flex-direction: row; align-items: baseline; gap: 12px; padding: 26px 24px 0; border-right: none; } .nacional-card-num { font-size: 22px; } .nacional-card-anio { font-size: 40px; letter-spacing: -1px; } .nacional-card-cuerpo { padding: 18px 24px 28px; } } /* ============================================ REPORTE — tabla con datos reales ============================================ */ .reporte-table-wrap { margin: 32px 0 40px; overflow-x: auto; border: 1px solid rgba(0,0,0,0.08); border-radius: 4px; } .reporte-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; background: var(--white); } .reporte-table thead { background: var(--negro); } .reporte-table thead th { font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--white); padding: 14px 16px; text-align: left; border-right: 1px solid rgba(255,255,255,0.08); } .reporte-table thead th:last-child { border-right: none; } .reporte-table thead th.num { text-align: right; } .reporte-table tbody td { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.06); border-right: 1px solid rgba(0,0,0,0.06); color: var(--gray-700); vertical-align: top; } .reporte-table tbody td:last-child { border-right: none; } .reporte-table tbody td:first-child { color: var(--negro); font-weight: 500; } .reporte-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } .reporte-table tbody tr:nth-child(even) { background: var(--cream); } .reporte-table tbody tr:hover { background: rgba(31, 52, 250, 0.03); } /* Tabla que se sale a lo ancho en movil. `observer.js` le pone .se-desliza solo a las que de verdad no caben, asi que el aviso no le sale a una tabla de dos columnas. La sombra va hacia adentro para que funcione igual sobre el encabezado negro que sobre las filas claras; un degradado blanco se veria como una mancha encima de la franja negra. */ @media (max-width: 768px) { /* El aviso va FUERA de la tabla, debajo y a la izquierda: dentro parecia un renglon mas de datos. Y sin sombra en el borde, que se leia como una mancha. Queda solo el texto, que es lo unico que hacia falta. Se cuelga del contenedor que envuelve al wrap, marcado por observer.js. */ .reporte-table-wrap.se-desliza { position: relative; margin-bottom: 30px; } .reporte-table-wrap.se-desliza + .tabla-aviso, .reporte-table-wrap.se-desliza::after { content: "Desliza la tabla \2192"; position: absolute; left: 0; top: 100%; display: block; width: max-content; padding: 8px 2px 0; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-700); pointer-events: none; } } .reporte-table-caption { font-size: 12px; color: var(--gray-300); font-style: italic; margin-top: 10px; line-height: 1.5; } /* ============================================ REPORTE — hipotesis (Perspectiva Q2) ============================================ */ .reporte-hypothesis { padding: 32px; background: var(--cream); border-left: 3px solid var(--primary); margin: 32px 0; border-radius: 0 4px 4px 0; } .reporte-hypothesis-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--negro); letter-spacing: -0.2px; margin-bottom: 24px; } .reporte-hypothesis-block + .reporte-hypothesis-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.06); } .reporte-hypothesis-label { font-family: var(--font-display); font-style: italic; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: var(--primary); display: block; margin-bottom: 6px; } .reporte-hypothesis-block p { font-size: 15px; line-height: 1.65; color: var(--gray-700); margin-bottom: 0; } /* Responsive — longform */ @media (max-width: 768px) { .reporte-longform { padding: 56px 0 72px; } .reporte-longform-wrap { padding: 0 24px; } .reporte-longform-wrap h2 { margin: 48px 0 20px; } .reporte-table { font-size: 13px; } .reporte-table thead th, .reporte-table tbody td { padding: 10px 12px; } .reporte-hypothesis { padding: 24px 20px; } } /* ============================================ BLOG — cierre "Sigue leyendo" y "Guías por tema" Los genera scripts/enlazar-blog.py. Prefijos .sl- y .gt-: no comparten ninguna regla con el resto, asi que no pueden romper nada al cambiar. El eyebrow va en Inter y no en el Playfair itálico en mayúsculas que la deuda 7 tiene marcado como ilegible. ============================================ */ .sl { padding: 8px 0 88px; background: var(--white); } .sl .blog-wrap { border-top: 1px solid var(--gray-300); padding-top: 26px; } .sl-eyebrow { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-700); margin: 0 0 6px; } .sl-lista { list-style: none; margin: 0; padding: 0; } .sl-lista li { border-bottom: 1px solid var(--gray-300); } .sl-lista li:last-child { border-bottom: none; } .sl-lista a { display: block; padding: 16px 2px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--negro); letter-spacing: -0.2px; transition: color .16s ease; } .sl-lista a:hover { color: var(--primary); } .sl-pillar a span { display: block; font-size: 13px; font-weight: 400; color: var(--gray-700); letter-spacing: 0; margin-top: 3px; } .gt { margin: 26px 0 8px; } .gt-grupo { padding: 22px 0; border-top: 1px solid var(--gray-300); } .gt-titulo { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: var(--negro); margin: 0; } .gt-bajada { font-size: 14.5px; line-height: 1.55; color: var(--gray-700); margin: 4px 0 12px; } .gt-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; } /* sin subrayado: la seccion vive dentro de .blog-body, que subraya los enlaces de prosa. En una lista de 31 titulos eso es una reja, no una ayuda. */ .gt-lista a { font-size: 15px; line-height: 1.45; color: var(--negro); display: block; padding: 5px 0; text-decoration: none; border-bottom: 1px solid transparent; transition: color .16s ease, border-color .16s ease; } .gt-lista a:hover { color: var(--primary); } @media (max-width: 768px) { .sl { padding-bottom: 64px; } .gt-lista { grid-template-columns: 1fr; } } /* ============================================ REPORTE — cierre (clientes de la zona) ============================================ */ .reporte-clientes { padding: 96px 0 80px; background: var(--white); border-top: 1px solid rgba(0,0,0,0.06); } .reporte-clientes-heading { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; color: var(--negro); max-width: 780px; margin-bottom: 48px; letter-spacing: -0.2px; } @media (max-width: 768px) { .reporte-clientes { padding: 64px 0 56px; } .reporte-clientes-heading { margin-bottom: 32px; } } /* ============================================ PRINT — reglas para exportar a PDF ============================================ */ @media print { @page { size: A4; margin: 18mm 15mm; } html, body { background: var(--white) !important; font-size: 10.5pt; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Ocultar nav y elementos no relevantes en impresión */ .nav, .nav-mobile, .nav-toggle, .pill, .cases-cta, .project-cta, .footer { display: none !important; } /* Hero compacto */ .reporte-hero, .blog-hero { padding: 0 0 24px !important; border-bottom: 1px solid rgba(0,0,0,0.15) !important; margin-bottom: 24px !important; page-break-after: avoid; break-after: avoid; } .reporte-hero h1, .blog-hero h1 { font-size: 24pt !important; line-height: 1.15 !important; margin-bottom: 12px !important; } .reporte-hero-dek, .blog-hero-dek { font-size: 11pt !important; margin-bottom: 12px !important; } .reporte-hero-eyebrow, .blog-hero-eyebrow { font-size: 9pt !important; } .reporte-hero-meta, .blog-hero-meta { padding-top: 12px !important; font-size: 9pt !important; } /* Longform layout: quitar padding verticales grandes */ .reporte-longform, .blog-body { padding: 0 !important; } .reporte-longform-wrap, .blog-wrap { max-width: 100% !important; padding: 0 !important; } .wrap { padding: 0 !important; max-width: 100% !important; } /* Headings: mantener con contenido que sigue */ h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; page-break-inside: avoid; break-inside: avoid; } .reporte-longform-wrap h2, .blog-body h2 { font-size: 16pt !important; margin: 24px 0 10px !important; } .reporte-longform-wrap h3, .blog-body h3 { font-size: 13pt !important; margin: 18px 0 8px !important; } .reporte-longform-wrap h4 { margin: 14px 0 6px !important; } /* Párrafos: evitar orphans/widows */ p, li { orphans: 3; widows: 3; page-break-inside: avoid; break-inside: avoid; } .reporte-longform-wrap p, .blog-body p { font-size: 10.5pt !important; line-height: 1.55 !important; margin-bottom: 12px !important; } .reporte-longform-wrap ul, .reporte-longform-wrap ol, .blog-body ul, .blog-body ol { font-size: 10.5pt !important; line-height: 1.55 !important; margin-bottom: 12px !important; } /* Tablas: repetir header y evitar cortar filas */ .reporte-table-wrap { page-break-inside: auto; break-inside: auto; margin: 14px 0 18px !important; } .reporte-table { page-break-inside: auto; break-inside: auto; font-size: 9pt !important; } .reporte-table thead { display: table-header-group; } .reporte-table tfoot { display: table-footer-group; } .reporte-table tr { page-break-inside: avoid; break-inside: avoid; } .reporte-table thead th { font-size: 8.5pt !important; padding: 8px 10px !important; } .reporte-table tbody td { padding: 6px 10px !important; } /* Hipótesis: evitar cortar el card completo, pero si no cabe, cortar solo entre bloques */ .reporte-hypothesis { page-break-inside: avoid; break-inside: avoid; margin: 16px 0 !important; padding: 18px 20px !important; background: #fafafa !important; border-left: 2px solid var(--primary) !important; } .reporte-hypothesis-title { font-size: 13pt !important; margin-bottom: 14px !important; } .reporte-hypothesis-block { page-break-inside: avoid; break-inside: avoid; } .reporte-hypothesis-block p { font-size: 9.5pt !important; line-height: 1.5 !important; } .reporte-hypothesis-label { font-size: 8.5pt !important; } /* Separadores hr más sutiles */ hr { margin: 20px 0 !important; border-top: 1px solid rgba(0,0,0,0.12) !important; } /* Blockquote */ .blog-body blockquote { font-size: 12pt !important; margin: 20px 0 !important; padding: 6px 0 6px 16px !important; page-break-inside: avoid; break-inside: avoid; } /* Cierre de reporte: clientes */ .reporte-clientes { padding: 20px 0 !important; page-break-before: auto; border-top: 1px solid rgba(0,0,0,0.12) !important; } .reporte-clientes-heading { font-size: 13pt !important; margin-bottom: 16px !important; page-break-after: avoid; break-after: avoid; } .cases-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; page-break-inside: avoid; break-inside: avoid; } .cases-card { page-break-inside: avoid; break-inside: avoid; } .cases-card-img-wrap { height: 120px !important; } .cases-card-name { font-size: 9pt !important; } .cases-card-meta, .cases-card-team { font-size: 8pt !important; } /* Links: quitar color azul decorativo en PDF */ a { color: inherit !important; text-decoration: none !important; } /* Source de tablas */ .reporte-source { font-size: 8.5pt !important; margin-top: 6px !important; } } /* ============================================================================ ANALISTA · sistema de reportes trimestrales Agregado 2026-07-28. Antes vivia inline en cada reporte; movido aqui para que un cambio de diseño aplique a las 72 paginas al año y no haya que editar una por una. OJO: las reglas marcadas CORRIGE cambian paginas YA PUBLICADAS. ============================================================================ */ /* --- CORRIGE · jerarquia del cuerpo del reporte --------------------------- El h4 medía 11px y el parrafo debajo 17px: el subtitulo pesaba MENOS que el cuerpo. Escalon correcto: h2 (26-34) > h3 (19) > h4 (18) > cuerpo (17). Afecta los 18 reportes publicados. */ .reporte-longform-wrap h4 { font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--third-01); margin: 44px 0 14px; } /* --- CORRIGE · eyebrows a tamaño legible --------------------------------- Eran 11px de Playfair italica EN MAYUSCULAS con espaciado 1.2: cinco penalizaciones de legibilidad apiladas. Ahora 17px, caja normal, 0.6px. */ .analista-grid-section-title { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; text-transform: none; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 40px; } /* --- CORRIGE · el meta del hero quedaba encajonado ----------------------- Tenia borde propio arriba y el hero uno abajo, a 24px de distancia: dos reglas alrededor de tres palabras. Afecta los 18 reportes publicados. */ .reporte-hero-meta { border-top: none; padding-top: 8px; } /* ---- 0. JERARQUIA · CAMBIO A shared/styles.css ---- El h4 medía 11px y el párrafo debajo 17px: el subtítulo pesaba MENOS que el cuerpo. Escalón correcto: h2 (26-34) > h3 (19) > h4 (18, peso 600) > cuerpo (17). */ .reporte-longform-wrap h4 { font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--third-01); margin: 44px 0 14px; } /* ---- 0a. Líneas · CAMBIO A shared/styles.css ---- El meta del hero tenía borde propio ARRIBA y el hero uno ABAJO: quedaba encajonado entre dos reglas a 24px de distancia. Se quita el suyo; el del hero ya separa. */ .reporte-hero-meta { border-top: none !important; padding-top: 8px !important; } /* ---- 0b. Índice del reporte ---- */ .reporte-toc { padding: 8px 0 34px; margin: 0; } .reporte-toc-title { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 16px; } .reporte-toc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 40px; } .reporte-toc-item { display: block; padding: 14px 0; border-top: 1px solid rgba(0,0,0,0.08); } .reporte-toc-item:hover .reporte-toc-what { color: var(--primary); } .reporte-toc-what { display: block; font-size: 16px; font-weight: 500; color: var(--negro); line-height: 1.35; } .reporte-toc-why { display: block; font-size: 14px; color: var(--gray-700); line-height: 1.45; margin-top: 4px; } .reporte-toc-item--key { grid-column: 1 / -1; border-top: 1px solid rgba(0,0,0,0.08); background: var(--cream); margin-top: 8px; padding: 16px 18px; border-left: 3px solid var(--primary); } .reporte-toc-item--key .reporte-toc-what { color: var(--primary); font-weight: 600; } /* salto del adelanto a la lectura completa */ .salto { display: block; margin: 34px 0 8px; padding: 20px 24px; background: var(--cream); border-left: 3px solid var(--primary); } .salto-p { font-size: 16px; line-height: 1.55; color: var(--gray-700); margin: 0 0 8px; } .salto-a { font-size: 17px; font-weight: 600; color: var(--primary); } .salto:hover .salto-a { border-bottom: 1px solid currentColor; } /* ---- 0c. Gráficas ---- */ .fig { margin: 40px 0 44px; } .fig-title { font-size: 18px; font-weight: 600; color: var(--negro); margin-bottom: 4px; } .fig-dek { font-size: 15px; color: var(--gray-700); margin-bottom: 20px; } .fig-svg { width: 100%; height: auto; display: block; overflow: visible; } .fig-src { font-size: 13px; color: var(--gray-700); margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); } .fig text { font-family: var(--font-body); font-variant-numeric: tabular-nums; } .fig .ax { font-size: 13px; fill: var(--gray-700); } .fig .val { font-size: 14px; font-weight: 600; fill: var(--negro); } .fig .grid { stroke: rgba(0,0,0,0.10); stroke-width: 1; } .fig .bar { fill: var(--primary); } /* el escalon de en medio de la rampa, para las figuras de 3 series: sin el, la primera y la tercera salian del mismo azul y no se podian comparar */ .fig .bar-mid { fill: var(--third-01); } .fig .bar-alt { fill: var(--third-02); } .fig .line { fill: none; stroke: var(--primary); stroke-width: 2.5; } .fig .dot { fill: var(--primary); } .fig .dot-hi { fill: var(--negro); } /* ---- 0e. Servicios por módulo (lo que la gente contrata) ---- */ .modelo-step-lead { font-size: 17px; font-weight: 600; color: var(--negro); line-height: 1.45; margin-bottom: 24px; } .modelo-servicios { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; } .modelo-servicio { font-size: 13px; line-height: 1.2; color: var(--gray-700); background: var(--white); border: 1px solid rgba(0,0,0,0.09); border-radius: 100px; padding: 7px 14px; } .modelo-step-when { font-size: 14px; line-height: 1.55; color: var(--gray-700); text-transform: none; letter-spacing: 0; font-weight: 400; margin-bottom: 0; } /* ---- 0d. Nota metodológica colapsada ---- */ .metodologia { background: var(--white); padding: 0 0 88px; } .metodologia-wrap { max-width: 840px; margin: 0 auto; padding: 0 48px; } .metodologia summary { cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--gray-700); padding: 20px 0; display: flex; align-items: center; gap: 12px; } .metodologia summary::-webkit-details-marker { display: none; } .metodologia summary::before { content: "+"; font-size: 18px; font-weight: 400; color: var(--primary); width: 16px; } .metodologia details[open] summary::before { content: "–"; } .metodologia summary:hover { color: var(--negro); } .metodologia-body { padding: 4px 0 28px 28px; } .metodologia-body p { font-size: 14px; line-height: 1.65; color: var(--gray-700); margin-bottom: 14px; } .metodologia-body strong { color: var(--negro); } /* ---- 1. Reportes históricos ---- */ .reporte-archivo { padding: 88px 0 56px; background: var(--white); } .reporte-archivo-wrap { max-width: 840px; margin: 0 auto; padding: 0 48px; } .reporte-archivo-title { font-size: 26px; font-weight: 600; color: var(--negro); margin-bottom: 28px; } .reporte-archivo-dek { font-size: 16px; color: var(--gray-700); margin-bottom: 32px; } .reporte-archivo-dek strong { color: var(--negro); font-weight: 600; } .reporte-archivo-row { display: grid; grid-template-columns: 90px 1fr; align-items: start; gap: 24px; padding: 18px 0; border-top: 1px solid rgba(0,0,0,0.12); } .reporte-archivo-row:last-of-type { border-bottom: 1px solid rgba(0,0,0,0.12); } .reporte-archivo-year { font-family: var(--font-display); font-size: 26px; color: var(--negro); font-variant-numeric: tabular-nums; line-height: 1.1; } .reporte-archivo-qs { display: flex; flex-wrap: wrap; gap: 10px; } .reporte-archivo-q { font-size: 15px; color: var(--primary); font-variant-numeric: tabular-nums; border: 1px solid rgba(31,52,250,0.35); padding: 8px 16px; display: inline-flex; align-items: center; min-height: 44px; } .reporte-archivo-q:hover { background: var(--primary); color: var(--white); } .reporte-archivo-q--here { color: var(--white); background: var(--negro); border-color: var(--negro); font-weight: 600; } .reporte-archivo-q--here:hover { background: var(--negro); color: var(--white); } .reporte-archivo-q--vacio { color: var(--gray-700); border-style: dashed; border-color: rgba(0,0,0,0.18); } /* ---- 2. Lectura comercial: instrucciones por tipo de producto ---- */ .lectura { padding: 88px 0; background: var(--cream); } .lectura-wrap { max-width: 840px; margin: 0 auto; padding: 0 48px; } .lectura-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 16px; } .lectura h2 { font-size: 38px; line-height: 1.15; font-weight: 600; color: var(--negro); margin-bottom: 20px; letter-spacing: -0.02em; } .lectura-intro { font-size: 18px; line-height: 1.6; color: var(--gray-700); margin-bottom: 48px; max-width: 660px; } .lectura-item { padding: 26px 0 26px 26px; border-top: 1px solid rgba(0,0,0,0.12); border-left: 2px solid var(--primary); } .lectura-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.12); } .lectura-item-tag { display: block; font-size: 15px; font-weight: 600; color: var(--negro); margin-bottom: 10px; } .lectura-item p { font-size: 17px; line-height: 1.65; color: var(--gray-700); } /* ---- 3. Modelo de trabajo: secuencia por etapa, no tres tarjetas iguales ---- */ .modelo { padding: 104px 0; background: var(--cream); border-top: 1px solid rgba(0,0,0,0.06); } .modelo-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; } .modelo-eyebrow { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 16px; } .modelo h2 { font-size: 34px; line-height: 1.2; font-weight: 600; color: var(--negro); margin-bottom: 16px; letter-spacing: -0.02em; max-width: 680px; } .modelo-intro { font-size: 17px; line-height: 1.6; color: var(--gray-700); max-width: 620px; margin-bottom: 56px; } .modelo-seq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; } /* flex + margin-top auto: las tres lineas de "En el Monterrey de hoy" quedan alineadas al pie aunque las descripciones midan distinto */ .modelo-step { padding: 36px 40px 36px 0; border-top: 1px solid var(--negro); display: flex; flex-direction: column; } .modelo-step + .modelo-step { padding-left: 40px; border-left: 1px solid rgba(0,0,0,0.09); } .modelo-step-when { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.55; color: var(--gray-700); margin-bottom: 32px; } .modelo-step-name { font-family: var(--font-display); font-size: 30px; font-weight: 500; color: var(--primary); margin-bottom: 14px; letter-spacing: -0.01em; } .modelo-step-desc { font-size: 15px; line-height: 1.6; color: var(--negro); margin-bottom: 32px; } .modelo-step-here { font-size: 14px; line-height: 1.6; color: var(--gray-700); margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.1); } .modelo-step-here strong { display: block; font-family: var(--font-display); font-style: italic; font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 8px; } @media (max-width: 900px) { .modelo-seq { grid-template-columns: 1fr; } .modelo-step { padding: 28px 0; } .modelo-step + .modelo-step { padding-left: 0; border-left: none; } } @media (max-width: 768px) { .reporte-archivo-wrap, .lectura-wrap, .modelo-wrap { padding: 0 20px; } .reporte-archivo { padding: 48px 0 64px; } .reporte-archivo-row { grid-template-columns: 1fr; gap: 12px; } .reporte-archivo-title { font-size: 22px; } .reporte-toc-list { grid-template-columns: 1fr; } .lectura, .modelo { padding: 64px 0; } .lectura h2 { font-size: 28px; } .lectura-intro { font-size: 16px; margin-bottom: 36px; } .lectura-item { padding: 22px 0 22px 18px; } .lectura-item p { font-size: 16px; } .modelo h2 { font-size: 26px; } .modelo-step-name { font-size: 26px; } } /* --- Indice de /analista: tarjeta nacional y banda de cobertura --- */ /* ---- 0. Eyebrow · CAMBIO A shared/styles.css ---- Aprobado 2026-07-27. Playfair italica 17px, caja normal, espaciado 0.6px. Antes: 11px en mayusculas con espaciado 1.2, ilegible. Aplica a los 23 eyebrows del sitio, no solo a esta pagina. */ .analista-grid-section-title { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; text-transform: none; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 40px; } /* ---- 1. Tarjeta nacional (variante 2: crema con regla negra) ---- */ .analista-card--nacional { grid-column: 1 / -1; background: var(--cream); border-top: 3px solid var(--negro); min-height: 0; padding: 44px 40px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; } .analista-card--nacional:hover { background: #F4F4F2; } .analista-card-nac-meta { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 500; letter-spacing: 0.6px; color: var(--third-01); margin-bottom: 12px; } .analista-card-nac-title { font-size: 36px; line-height: 1.1; font-weight: 600; color: var(--negro); letter-spacing: -0.02em; margin-bottom: 14px; } .analista-card-nac-dek { font-size: 17px; line-height: 1.55; color: var(--gray-700); max-width: 660px; } .analista-card-nac-arrow { font-size: 15px; font-weight: 500; color: var(--negro); white-space: nowrap; } .analista-card--nacional:hover .analista-card-nac-arrow { color: var(--primary); } /* ---- 2. Banda de cobertura (C1: el dato en serif, sin adjetivos) ---- */ .trayectoria { padding: 0 0 120px; } .trayectoria-inner { max-width: var(--max-w); margin: 0 auto; padding: 32px 40px 0; border-top: 1px solid rgba(0,0,0,0.12); display: flex; gap: 72px; flex-wrap: wrap; } .trayectoria-num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--negro); font-variant-numeric: tabular-nums; margin-bottom: 8px; } .trayectoria-lbl { font-size: 14px; color: var(--gray-700); } @media (max-width: 900px) { .analista-card--nacional { grid-template-columns: 1fr; align-items: start; gap: 20px; padding: 32px 24px; } .analista-card-nac-title { font-size: 26px; } .analista-card-nac-meta { font-size: 15px; } } @media (max-width: 768px) { .trayectoria { padding-bottom: 72px; } .trayectoria-inner { padding: 24px 20px 0; gap: 36px 48px; } .trayectoria-num { font-size: 32px; } .analista-grid-section-title { font-size: 15px; margin-bottom: 28px; } .analista-card-nac-arrow { min-height: 44px; display: inline-flex; align-items: center; } } /* --- CORRIGE · el resto de eyebrows del analista --------------------------- Misma receta ilegible (Playfair italica + MAYUSCULAS + 10-12px + espaciado). Se corrigen los del analista y los reportes, que es lo revisado. PENDIENTE, mismo problema, otras paginas: .caso-eyebrow, .caso-chart-label (wins) y .blog-hero-eyebrow (blog). Ver DEUDA-TECNICA.md */ .reporte-hero-eyebrow, .analista-hero-eyebrow { font-size: 17px; text-transform: none; letter-spacing: 0.6px; } .reporte-hypothesis-label { font-size: 15px; text-transform: none; letter-spacing: 0.4px; } /* --- Aviso de reporte archivado (solo en reportes que ya no son el vigente) --- */ .reporte-aviso { background: var(--cream); border-bottom: 1px solid rgba(0,0,0,0.08); /* el nav es fixed y mide 56px: sin este espacio la banda queda debajo de el */ padding: 70px 0 14px; } /* cuando el aviso va primero, el hero ya no necesita compensar el nav */ .reporte-aviso + .reporte-hero { padding-top: 64px; } .reporte-aviso-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap; } .reporte-aviso-tag { font-family: var(--font-display); font-style: italic; font-size: 15px; font-weight: 500; letter-spacing: 0.6px; color: var(--third-01); } .reporte-aviso-text { font-size: 14px; color: var(--gray-700); } .reporte-aviso-link { font-size: 14px; font-weight: 500; color: var(--primary); border-bottom: 1px solid currentColor; padding-bottom: 1px; } @media (max-width: 768px) { .reporte-aviso-inner { padding: 0 20px; } .reporte-aviso-link { min-height: 44px; display: inline-flex; align-items: center; } } /* Pull-quote de reportes (hallazgo del trimestre) — espeja el estilo del blog; revisar en design pass */ .reporte-longform blockquote { margin: 34px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--primary); } .reporte-longform blockquote p { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--negro); margin: 0; }