/* ========================================================================== Buzz — componentes de subpágina (SMS-460) Solo lo que existe fuera de la home. La home no carga este archivo: su payload queda idéntico al de antes del ticket. Todo hereda los tokens de styles.css. Ningún color nuevo, ninguna familia tipográfica nueva. El acento de la página lo fija --ci / --w en el , igual que las secciones de producto de la home. ========================================================================== */ /* ========================================================================== Cabecera de página · migas + título Es el hero de una subpágina: menos alto que el de la home, con la miga arriba para que se sepa dónde estás sin volver al nav. ========================================================================== */ .phead { padding: var(--s9) 0 var(--s8); position: relative; } .phead--tall { padding: var(--s10) 0 var(--s9); } .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: var(--s5); } .crumbs a { color: var(--ink-3); border-bottom: 1px solid transparent; } .crumbs a:hover { color: var(--ink); border-bottom-color: var(--line-strong); } .crumbs span[aria-current] { color: var(--ci, var(--brand-800)); } .crumbs i { font-style: normal; color: var(--line-strong); } .phead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s9); align-items: center; } .phead__grid > * { min-width: 0; } .phead h1 { margin-bottom: var(--s5); } .phead h1 em { font-style: normal; color: var(--ci, var(--brand-800)); } .phead .lead { margin-bottom: var(--s6); } .phead__actions { display: flex; flex-wrap: wrap; gap: var(--s3); } /* ========================================================================== .caps — la grilla de tarjetas de todo el sitio Capacidades de producto, cómo cobramos, principios, cómo es trabajar acá. Un solo componente con modificadores de columnas: cuatro grillas distintas para lo mismo serían cuatro cosas que mantener. ========================================================================== */ .caps { display: grid; gap: var(--s4); grid-template-columns: repeat(3, minmax(0, 1fr)); } .caps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .caps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cap { padding: var(--s6) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .cap:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); } .cap__ico { width: 34px; height: 34px; margin-bottom: var(--s4); display: grid; place-items: center; border-radius: var(--r-md); background: var(--w, var(--brand-50)); color: var(--ci, var(--brand-800)); } .cap__ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; } .cap__n { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ci, var(--brand-800)); margin-bottom: var(--s3); } .cap h3 { margin-bottom: var(--s2); } .cap p { font-size: 15px; color: var(--ink-2); line-height: 1.55; } .cap p + p { margin-top: var(--s3); } .cap code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-alt); padding: 1px 5px; border-radius: var(--r-sm); } /* ========================================================================== .specs — requisitos y despliegue Lista de definición a dos columnas: la etiqueta en mono a la izquierda, el valor en prosa a la derecha. Se lee como una hoja de especificación, que es el motivo estructural del sistema. ========================================================================== */ .specs { border-top: 1px solid var(--line); } .specs__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); align-items: baseline; } .specs dt { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); } .specs dd { font-size: 16px; color: var(--ink-2); line-height: 1.6; } .specs dd b { color: var(--ink); font-weight: 600; } .specs dd code { font-family: var(--mono); font-size: 13px; background: var(--surface-alt); padding: 1px 6px; border-radius: var(--r-sm); } /* ========================================================================== .crosslink — se conecta con los otros productos Es el argumento de venta cruzada del porfolio, así que cada tarjeta lleva el color real del producto al que lleva, no el de la página actual. ========================================================================== */ .crosslink { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } /* En el 404 van los cuatro productos, no los otros tres: 4 en una grilla de 3 deja una tarjeta huérfana en la segunda fila. */ .crosslink--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .xcard { display: block; padding: var(--s5); position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .xcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); } .xcard:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); } .xcard__k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--ci2); margin-bottom: var(--s3); } .xcard h3 { margin-bottom: var(--s2); font-size: 19px; } .xcard p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: var(--s4); } .xcard__go { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ci2); } .xcard__go svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); } .xcard:hover .xcard__go svg { transform: translateX(3px); } /* ========================================================================== Clientes ========================================================================== */ /* Muro estático: acá los logos son el contenido, no un adorno que pasa. El carrusel de la home existe para dar prueba social de reojo; esta página se lee de frente, así que se quedan quietos y en grilla. */ .logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .logo-wall > div { display: grid; place-items: center; min-height: 104px; padding: var(--s5); border-left: 1px solid var(--line); border-top: 1px solid var(--line); } /* 30px, no 26: en una celda de 150px un logo de 26 se lee como un icono perdido. dLocalGo lleva su propio alto porque su marca es un lockup cuadrado, igual que en el carrusel de la home. */ .logo-wall img { height: 30px; width: auto; opacity: .78; } .logo-wall img[src*="dlocalgo"] { height: 38px; } .logo-wall img.is-dark { filter: brightness(0); opacity: .66; } .cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .case { padding: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s4); } .case__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } .case__logo { height: 24px; width: auto; opacity: .85; } .case__logo.is-dark { filter: brightness(0); opacity: .7; } .case__name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; } .case__ind { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); white-space: nowrap; } .case h3 { font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 6px; } .case p { font-size: 15px; color: var(--ink-2); line-height: 1.6; } .case__stack { display: flex; flex-wrap: wrap; gap: 6px; } .case__foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); } /* Chip de producto: hereda el color del producto que nombra, no el de la página. Así se lee de un vistazo qué stack usa cada cliente. */ .pchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .pchip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); } /* ========================================================================== Precios · qué mueve el número ========================================================================== */ .drivers { border-top: 1px solid var(--line); } .driver { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--line); } .driver__n { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ci, var(--brand-800)); font-variant-numeric: tabular-nums; padding-top: 2px; } .driver h3 { font-size: 18px; margin-bottom: 4px; } .driver p { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; } /* ========================================================================== Nosotros · de dónde salió cada producto ========================================================================== */ .origin { display: grid; gap: 0; } .origin__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s6); padding: var(--s6) 0; border-top: 1px solid var(--line); position: relative; } .origin__row:last-child { border-bottom: 1px solid var(--line); } .origin__when { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); } .origin__when b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--c); margin-bottom: 4px; text-transform: none; } .origin h3 { margin-bottom: var(--s2); } .origin p { font-size: 16px; color: var(--ink-2); line-height: 1.65; max-width: 68ch; } /* ========================================================================== Careers ========================================================================== */ /* Estado vacío: es el estado por defecto de esta página y va a estar así la mayor parte del tiempo, así que se diseña como contenido — no como el hueco donde debería haber algo. */ .empty { padding: var(--s9) var(--s7); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); position: relative; overflow: hidden; } .empty__ico { width: 52px; height: 52px; margin: 0 auto var(--s5); display: grid; place-items: center; border-radius: var(--r-lg); background: var(--brand-50); color: var(--brand-800); } .empty__ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.75; } .empty h2 { font-size: 27px; font-weight: 800; letter-spacing: -.025em; margin-bottom: var(--s3); } .empty p { font-size: 17px; color: var(--ink-2); max-width: 54ch; margin: 0 auto var(--s6); } .empty__actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; } .jobs { border-top: 1px solid var(--line); } .job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: center; padding: var(--s5) var(--s4); border-bottom: 1px solid var(--line); transition: background var(--dur) var(--ease); } .job:hover { background: var(--surface-alt); } .job__t { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; } .job__meta { display: flex; flex-wrap: wrap; gap: var(--s4); font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .job__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; } .job__go svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } .job:hover .job__go svg { transform: translateX(3px); } .team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } /* Un solo perfil no puede quedar en un tercio de ancho: se lee como un hueco. */ .team--one { grid-template-columns: minmax(0, 560px); } .person { padding: var(--s6) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .person__av { width: 46px; height: 46px; border-radius: 50%; margin-bottom: var(--s4); display: grid; place-items: center; color: #FEFEFD; font-weight: 700; font-size: 16px; letter-spacing: -.02em; background: var(--c); } .person__n { font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .person__r { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin: 4px 0 var(--s4); } .person p { font-size: 15px; color: var(--ink-2); line-height: 1.6; } /* Prosa del detalle de una posición. Es el único bloque de texto corrido largo del sitio, así que las reglas de medida y ritmo viven acá. */ .prose { max-width: 68ch; } .prose h2 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; margin: var(--s7) 0 var(--s4); } .prose h2:first-child { margin-top: 0; } .prose p { font-size: 17px; color: var(--ink-2); line-height: 1.7; margin-bottom: var(--s4); } .prose ul { margin-bottom: var(--s4); display: grid; gap: var(--s3); } .prose li { position: relative; padding-left: 26px; font-size: 16.5px; color: var(--ink-2); line-height: 1.6; } .prose li::before { content: ''; position: absolute; left: 6px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); } .prose b { color: var(--ink); font-weight: 600; } /* ========================================================================== Marcadores de contenido sin verificar Esto NO es decoración: es la salvaguarda de que nada ficticio se publique por accidente. Alto contraste, mono en mayúsculas, imposible de confundir con contenido real. Si algo acá se ve prolijo, está mal hecho. ========================================================================== */ :root { --ph-ink: #92400E; /* ámbar 800 — 5.9:1 sobre --ph-bg */ --ph-bg: #FEF3C7; --ph-line: #F59E0B; } /* Marca en línea, para una cifra o un resultado sin confirmar. */ .ph { background: var(--ph-bg); color: var(--ph-ink); border-bottom: 1px dashed var(--ph-line); padding: 0 3px; font-weight: 600; } .ph::before { content: '⚠ '; font-size: .85em; } /* Banda de página o de bloque. */ .ph-banner { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4) var(--s5); margin-bottom: var(--s6); border: 1px solid var(--ph-line); border-left-width: 4px; border-radius: var(--r-md); background: var(--ph-bg); color: var(--ph-ink); /* Las rayas dejan claro que es una superficie de andamio, no de producto. */ background-image: repeating-linear-gradient( -45deg, transparent 0 10px, rgba(146, 64, 14, .06) 10px 20px ); } .ph-banner__k { font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 4px 8px; border-radius: var(--r-sm); flex: none; background: var(--ph-ink); color: var(--ph-bg); } .ph-banner p { font-size: 14.5px; line-height: 1.55; } .ph-banner p b { font-weight: 700; } /* Etiqueta chica pegada a un item de una lista o a una tarjeta. */ .ph-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill); border: 1px dashed var(--ph-line); background: var(--ph-bg); color: var(--ph-ink); font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; } /* Contenedor completo de andamio: la tarjeta entera es placeholder. */ [data-placeholder] { position: relative; border-color: var(--ph-line) !important; } [data-placeholder]::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient( -45deg, transparent 0 12px, rgba(245, 158, 11, .07) 12px 24px ); } /* ========================================================================== Responsive Los mismos dos cortes que styles.css: 1000px (colapsa el nav y las grillas de dos columnas) y 640px (todo a una sola). ========================================================================== */ @media (max-width: 1000px) { .phead__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); } .caps, .caps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crosslink { grid-template-columns: minmax(0, 1fr); } .crosslink--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cases { grid-template-columns: minmax(0, 1fr); } .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .specs__row { grid-template-columns: 150px minmax(0, 1fr); gap: var(--s4); } .origin__row { grid-template-columns: 110px minmax(0, 1fr); gap: var(--s5); } } @media (max-width: 640px) { .phead { padding: var(--s8) 0 var(--s7); } .caps, .caps--2, .caps--4 { grid-template-columns: minmax(0, 1fr); } .crosslink, .crosslink--4 { grid-template-columns: minmax(0, 1fr); } .team { grid-template-columns: minmax(0, 1fr); } .specs__row, .origin__row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } .driver { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } .job { grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; } .empty { padding: var(--s8) var(--s5); } .empty h2 { font-size: 23px; } .ph-banner { flex-direction: column; gap: var(--s3); } .case__top { flex-direction: column; align-items: flex-start; gap: var(--s2); } } @media (prefers-reduced-motion: reduce) { .cap, .xcard, .job, .xcard__go svg, .job__go svg { transition: none; } .cap:hover, .xcard:hover { transform: none; } }