/* ============================================================ Vive Más CR — estilos del sitio Depende de design-system/tokens/tokens.css (importado antes). Regla: acá NO se escribe ningún valor de color, espacio, radio, sombra o duración a mano. Todo sale de un token. ============================================================ */ /* ---------- Utilidades base ---------- */ .contenedor { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .contenedor--ancho { max-width: var(--container-ancho); } .contenedor--estrecho { max-width: var(--container-estrecho); } .seccion { padding-block: var(--section-md); } .seccion--lg { padding-block: var(--section-lg); } .seccion--sunken { background: var(--surface-sunken); } .seccion--brand { background: var(--surface-brand); } .seccion--noche { background: var(--grad-noche); } .seccion--profundo { background: var(--grad-profundo); } .overline { font-size: var(--fs-overline); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--sp-3); } .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); } .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .saltar { position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-toast); background: var(--primary); color: var(--primary-fg); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); transition: top var(--d-rapido) var(--ease-estandar); } .saltar:focus { top: var(--sp-4); } /* Enlace que cubre toda la tarjeta sin anidar links */ .enlace-cubre { color: inherit; text-decoration: none; } .enlace-cubre::after { content: ""; position: absolute; inset: 0; } /* Enlace que se ve igual que el texto que envuelve: nombre de un ponente con web (speakers.json → web). Sin subrayado ni color propio; lo que avisa que se puede tocar es el cursor, y con teclado, el anillo de foco global. */ .enlace-discreto { color: inherit; text-decoration: none; } /* ---------- Encabezado de sección ---------- */ .cab-seccion { max-width: 56ch; margin-bottom: var(--sp-12); } .cab-seccion h2 { font-size: var(--fs-h2); font-variation-settings: "opsz" 110; text-wrap: balance; margin-bottom: var(--sp-4); } .cab-seccion .overline { color: var(--accent-text); } .cab-seccion p { margin: 0; } .cab-seccion--centrada { margin-inline: auto; text-align: center; } /* Línea de resumen bajo el

: rango horario + conteo del día. */ .cab-seccion .cab-seccion__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-5); font-size: var(--fs-body-sm); color: var(--text-subtle); font-variant-numeric: tabular-nums; } .agenda__rango { color: var(--accent-text); font-weight: 600; } .agenda__rango time { display: inline; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-6); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; transition: background-color var(--d-rapido) var(--ease-estandar), border-color var(--d-rapido) var(--ease-estandar), color var(--d-rapido) var(--ease-estandar), box-shadow var(--d-rapido) var(--ease-estandar); } .btn--sm { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-body-sm); } .btn--lg { min-height: 56px; padding: 0 var(--sp-8); font-weight: 600; } /* Lima es el color de toda acción de conversión: el CTA del hero, el botón del header y «Quiero ser patrocinador». Lo que se sostiene no es «un solo lima por pantalla» sino que nunca haya DOS acciones distintas en lima a la vez — el del header es el mismo botón repetido, no una acción que compita. */ .btn--primario { background: var(--cta); color: var(--cta-fg); } .btn--primario:hover { background: var(--cta-hover); box-shadow: var(--e2); } .btn--secundario { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--secundario:hover { border-color: var(--text); } .btn--fantasma { background: transparent; color: var(--accent-text); padding-inline: var(--sp-2); min-height: auto; } .btn--premium { background: var(--grad-oro); color: hsl(var(--vm-noche-900)); box-shadow: var(--e-oro); } .btn--premium:hover { box-shadow: var(--e-oro), var(--e3); } .btn:active { transform: translateY(1px); } .btn[aria-disabled="true"], .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; } .fila-btn { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .fila-btn--centrada { justify-content: center; margin-top: var(--sp-6); } @media (max-width: 480px) { .fila-btn { flex-direction: column; align-items: stretch; } .fila-btn .btn { width: 100%; } } /* ============================================================ LOGOTIPO Las letras van en currentColor: quien lo contiene decide el color y el logo lo sigue (blanco sobre el hero, azul noche sobre el header sólido). El lima es la excepción: es color de marca, no de tema, así que usa el primitivo --vm-lima-600 y NO cambia dentro de [data-tema="oscuro"]. ============================================================ */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .logo { height: var(--sp-10); width: auto; display: block; } .logo__acento { fill: hsl(var(--vm-lima-600)); } .logo__helice { fill: none; stroke: hsl(var(--vm-lima-600)); } /* ============================================================ HEADER ============================================================ */ .header { position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: 72px; display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background-color var(--d-base) var(--ease-estandar), border-color var(--d-base) var(--ease-estandar), box-shadow var(--d-base) var(--ease-estandar); } .header__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); width: 100%; } .header__marca { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: hsl(var(--vm-marfil-50)); transition: color var(--d-base) var(--ease-estandar); } /* "CR" es lo único que separa este capítulo del VIVE+ global: va discreto, en currentColor, para no meter un tercer color al lado del lima. */ .marca__cr { font-family: var(--font-body); font-size: var(--fs-overline); font-weight: 700; letter-spacing: .14em; color: currentColor; opacity: .7; align-self: flex-start; margin-top: var(--sp-1); } .header__nav { display: flex; align-items: center; gap: var(--sp-6); } .header__nav > a, .header__mas > summary { position: relative; font-size: var(--fs-body-sm); font-weight: 500; text-decoration: none; color: hsl(var(--vm-marfil-50) / .82); padding-block: var(--sp-2); transition: color var(--d-rapido) var(--ease-estandar); } .header__nav > a::after, .header__mas > summary::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: hsl(var(--vm-cyan-400)); transition: width var(--d-rapido) var(--ease-salida); } .header__nav > a:hover, .header__mas > summary:hover { color: hsl(var(--vm-marfil-50)); } .header__nav > a:hover::after, .header__nav > a[aria-current="page"]::after, .header__mas > summary:hover::after, .header__mas[open] > summary::after { width: 100%; } .header__mas { position: relative; } .header__mas > summary { display: flex; align-items: center; gap: var(--sp-1); cursor: pointer; list-style: none; } .header__mas > summary::-webkit-details-marker { display: none; } .header__mas > summary span { transition: transform var(--d-rapido) var(--ease-estandar); } .header__mas[open] > summary span { transform: rotate(180deg); } .header__mas-panel { position: absolute; top: calc(100% + var(--sp-2)); right: 0; display: grid; width: max-content; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--e3); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(calc(var(--sp-1) * -1)); transition: opacity var(--d-rapido) var(--ease-estandar), transform var(--d-rapido) var(--ease-estandar), visibility var(--d-rapido) var(--ease-estandar); } .header__mas[open] .header__mas-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .header__mas-panel a { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: color var(--d-rapido) var(--ease-estandar), background-color var(--d-rapido) var(--ease-estandar); } .header__mas-panel a:hover, .header__mas-panel a:focus-visible { color: var(--text); background: var(--surface-sunken); } /* El CTA del header es lima en los dos estados. Sobre la foto del hero necesita un halo propio: el lima es claro y sin él se diluye contra un cielo quemado. */ .header__cta { box-shadow: 0 0 0 1px hsl(var(--vm-noche-900) / .18); } .header.es-solido .header__cta { box-shadow: none; } /* Estado con scroll: vidrio */ .header.es-solido { background: hsl(var(--vm-marfil-50) / .82); backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio); border-bottom-color: var(--border); box-shadow: var(--e2); } .header.es-solido .header__marca { color: hsl(var(--vm-noche-700)); } .header.es-solido .header__nav > a, .header.es-solido .header__mas > summary { color: hsl(var(--vm-tinta-700)); } .header.es-solido .header__nav > a:hover, .header.es-solido .header__mas > summary:hover { color: hsl(var(--vm-tinta-900)); } .header.es-solido .menu-btn span { background: hsl(var(--vm-tinta-900)); } /* Botón y panel móvil */ .menu-btn { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0; place-items: center; } .menu-btn span { display: block; width: 22px; height: 2px; background: hsl(var(--vm-marfil-50)); border-radius: 2px; transition: transform var(--d-base) var(--ease-estandar), opacity var(--d-rapido) linear; } .menu-btn span + span { margin-top: 5px; } .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .menu-movil { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--grad-noche); display: flex; flex-direction: column; justify-content: safe center; overflow-y: auto; padding: var(--sp-16) var(--gutter) var(--sp-10); transform: translateX(100%); transition: transform var(--d-lento) var(--ease-salida); visibility: hidden; } .menu-movil[data-abierto="true"] { transform: none; visibility: visible; } /* :not(.btn) es obligatorio: sin eso esta regla le gana en especificidad al color propio del botón y le impone el color de enlace. Con el CTA lima eso daba 1.01:1. */ .menu-movil a:not(.btn) { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; text-decoration: none; color: var(--text); padding-block: var(--sp-3); } .menu-movil .btn { margin-top: var(--sp-8); width: 100%; } @media (max-width: 1024px) { .header__nav, .header__cta { display: none; } .menu-btn { display: grid; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: min(88vh, 900px); /* En escritorio mide una pantalla exacta: ver «El hero entra entero». */ display: flex; align-items: flex-end; /* El respiro de abajo es menor que el de una sección normal a propósito: la franja de patrocinios tiene que entrar en pantalla junto con el CTA. */ padding-block: calc(72px + var(--sp-12)) var(--sp-12); overflow: hidden; } /* La foto del hero. Es el elemento LCP: entra con un zoom mínimo y las capas de arriba (.hero__tinte, .hero__velo) la vuelven marca y le garantizan contraste al titular. El encuadre 50% 35% es distinto al de Zona Azul a propósito. */ .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; /* 50% 22%: la foto es vertical y el hero es una banda apaisada, así que el encuadre decide qué sobrevive. A esta altura entran la señora de pie y el saludo de la derecha; más abajo las caras se iban detrás de las métricas. */ object-fit: cover; object-position: 50% 22%; animation: heroEntra 1200ms var(--ease-suave) both; } /* Duotono de noche sobre la foto: los mismos tres radial-gradient del placeholder anterior, ahora en multiply sobre un velo de noche translúcido. Es lo que hace que cualquier foto se lea como Vive Más y no como stock. */ .hero__tinte { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; background: radial-gradient(120% 90% at 78% 12%, hsl(var(--vm-cyan-500) / .38) 0%, transparent 55%), radial-gradient(90% 70% at 12% 88%, hsl(var(--vm-nicoya-600) / .42) 0%, transparent 60%), radial-gradient(70% 60% at 50% 40%, hsl(var(--vm-noche-600) / .5) 0%, transparent 70%), hsl(var(--vm-noche-900) / .55); } .hero__grano { position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Velo de legibilidad: el degradado vertical de siempre + un scrim lateral desde la izquierda, para que el titular tenga contraste garantizado sobre cualquier foto que venga después. */ .hero__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, hsl(var(--vm-noche-900) / .9) 0%, hsl(var(--vm-noche-900) / .35) 55%, transparent 80%), var(--grad-velo); } @media (max-width: 640px) { .hero__velo { background: linear-gradient(180deg, hsl(var(--vm-noche-900) / .38) 0%, hsl(var(--vm-noche-900) / .74) 46%, hsl(var(--vm-noche-900) / .95) 100%); } } @keyframes heroEntra { from { scale: 1.06; } to { scale: 1; } } /* ------------------------------------------------------------ ADN DE MARCA EN EL HERO — la línea de vida Los tres genes del logotipo VIVE+, en movimiento: la doble hélice (la longevidad como ciencia), los puntos (las personas) y el signo más (el "Más" de Vive Más). Fuente de los trazados y de las reglas: design-system/brand/logo/README.md No lleva JavaScript: el dibujo está completo en el HTML y los desfases van en CSS, así que se ve igual con el JS caído. ------------------------------------------------------------ */ /* La retícula de puntos NO es DOM: es un radial-gradient repetido. Cero nodos, cero peso de red, y la separación sale de un token. */ .trama-puntos { position: absolute; inset: calc(var(--sp-8) * -1); background-image: radial-gradient(circle, hsl(var(--vm-marfil-50) / .42) 1.6px, transparent 1.7px); background-size: var(--sp-8) var(--sp-8); opacity: .72; pointer-events: none; } /* Vertical: el trazo cuelga del TITULAR, no de un borde del hero. Va dentro de .hero__titular —que solo envuelve al h1— con top:100%, o sea la base de la última línea del titular. Así arranca siempre justo debajo de "vivirlos bien", envuelva el titular en dos renglones o en tres, y sin depender de cuánto midan el párrafo o las métricas. El margen inferior del h1 se colapsa fuera del envoltorio, así que la altura de .hero__titular es la del titular pelado y top:100% cae exacto en su base. Horizontal: sale de la caja del contenedor a sangre completa con left:50% + width:100vw. El max-width:none es obligatorio — tokens.css le pone max-width:100% a todo svg, y eso lo encerraría en el contenedor. */ .hero__titular { position: relative; margin-bottom: var(--sp-6); } /* Con sello, el logotipo y el sello van en fila. El aire de abajo vive en el envoltorio y no en el h1: en flex el margen del h1 ya no se colapsa afuera y correría la línea del ADN, que cuelga de la base del envoltorio. */ .hero__titular:has(.hero__sello) { display: flex; align-items: center; gap: var(--sp-8); } /* El h1 se ajusta al ancho del logotipo: con su max-width de 14ch se estiraba más que la imagen y el sello quedaba lejos. */ .hero__titular:has(.hero__sello) h1 { flex: 0 1 auto; min-width: 0; max-width: 32rem; } .adn-vida { position: absolute; top: 100%; left: 50%; z-index: -1; width: 100vw; max-width: none; translate: -50% -50%; /* Más bajo que en el prototipo a propósito: ahí el trazo iba debajo del velo del hero, que lo apagaba. Acá va encima, y a la misma alfa le comía el protagonismo al titular. */ opacity: .5; pointer-events: none; } .adn-vida__trazo { stroke: hsl(var(--vm-lima-600)); stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: vidaDibuja 2200ms var(--ease-suave) forwards; } @keyframes vidaDibuja { to { stroke-dashoffset: 0; } } /* Los travesaños entran con el trazo y después se quedan girando. El pinzado es en scaleY porque acá la hélice es horizontal; el desfase de cada uno es su fase real sobre la onda, y por eso el pinzado recorre la hélice en vez de latir todo junto. */ .adn-vida__travesano { stroke: hsl(var(--vm-lima-600)); opacity: 0; transform-box: fill-box; transform-origin: center; animation: travesanoEntra var(--d-base) var(--ease-salida) forwards, vidaGira 5s var(--ease-suave) infinite; } @keyframes travesanoEntra { to { opacity: 1; } } @keyframes vidaGira { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.16); } } /* Dos tiempos por travesaño: cuándo entra (cuando el trazo le pasa por encima) y en qué fase de la vuelta está. La fase va en NEGATIVO, o sea que el giro viene corriendo desde el segundo cero: no se ve, porque hasta que no entra cada travesaño está en opacity 0, y así al aparecer ya están todos en fase. Arrancarlo después del trazo los hacía sumarse de a uno y eso sí se notaba. Se repite cada 6 porque una vuelta completa de la hélice son dos medias ondas. */ .adn-vida__travesano:nth-child(1) { animation-delay: 1120ms, -630ms; } .adn-vida__travesano:nth-child(2) { animation-delay: 1180ms, -1250ms; } .adn-vida__travesano:nth-child(3) { animation-delay: 1240ms, -1870ms; } .adn-vida__travesano:nth-child(4) { animation-delay: 1370ms, -3130ms; } .adn-vida__travesano:nth-child(5) { animation-delay: 1430ms, -3750ms; } .adn-vida__travesano:nth-child(6) { animation-delay: 1500ms, -4370ms; } .adn-vida__travesano:nth-child(7) { animation-delay: 1620ms, -630ms; } .adn-vida__travesano:nth-child(8) { animation-delay: 1690ms, -1250ms; } .adn-vida__travesano:nth-child(9) { animation-delay: 1750ms, -1870ms; } .adn-vida__travesano:nth-child(10) { animation-delay: 1880ms, -3130ms; } .adn-vida__travesano:nth-child(11) { animation-delay: 1940ms, -3750ms; } .adn-vida__travesano:nth-child(12) { animation-delay: 2000ms, -4370ms; } /* El más va con menos alfa que los trazos: es masa sólida contra línea, y a igual opacidad pesa el triple. masCierra termina en scale(1) justo cuando masLate arranca, también en scale(1): el relevo no se ve. El latido son dos golpes y descanso, no un respiro simétrico — es lo que lo hace leer como pulso y no como parpadeo. El pico es 7%; más grande deja de ser un signo vivo y pasa a ser una alerta. */ .adn-vida__mas { fill: hsl(var(--vm-lima-600) / .85); opacity: 0; transform-box: fill-box; transform-origin: center; animation: masCierra var(--d-cine) var(--ease-salida) 2100ms forwards, masLate 4s var(--ease-suave) 2900ms infinite; } @keyframes masCierra { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } } @keyframes masLate { 0% { transform: scale(1); } 7% { transform: scale(1.07); } 15% { transform: scale(1.01); } 23% { transform: scale(1.05); } 36%, 100% { transform: scale(1); } } .hero__contenido { position: relative; z-index: 1; } .hero__eyebrow { font-size: var(--fs-overline); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--vm-cyan-400)); margin: 0 0 var(--sp-6); } .hero h1 { font-size: var(--fs-display-xl); line-height: .94; letter-spacing: -.03em; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; max-width: 14ch; text-wrap: balance; margin-bottom: 0; } /* Variante con logotipo del evento: la imagen ocupa el lugar del titular tipográfico y hereda su margen inferior. El ancho va en ch para que escale con la tipografía igual que lo hacía el texto. */ .hero__logo { display: block; width: 100%; max-width: min(32rem, 100%); height: auto; } /* Con el logotipo, la línea de vida no puede cruzar por la base del lockup: ahí está el descriptor y el trazo lo tacharía. Se corre hacia abajo para que quede como un subrayado con aire, igual que hacía con el titular tipográfico. */ .hero__titular:has(.hero__logo) .adn-vida { margin-top: var(--sp-3); } /* ---------- La línea de vida en pantalla angosta ---------- En pantalla ancha la hélice y el signo más caen A LA DERECHA de la columna de texto: por eso el viewBox arranca en -520 y el dibujo se corre hacia allá. Pero por debajo de ~1024 px el párrafo ocupa todo el ancho y pasa a compartir esa franja, así que la hélice le cruza el primer renglón. La solución no es apagar la línea: es abrirle un carril. El hueco bajo el lockup pasa a medir lo que mide la mitad de abajo del SVG —que es la mitad de su alto, o sea 210/1150 del ancho de pantalla ≈ 9.2vw— más el corrimiento que ya tenía y un respiro. Como las dos medidas escalan con el ancho, el carril calza igual en un teléfono de 360 px que en una tableta de 1024. Así la línea queda haciendo lo que hace en grande: subrayar el titular, con su hélice y su signo más al final del trazo, sin tocar una sola letra. */ @media (max-width: 1024px) { .adn-vida { opacity: .42; } .hero:has(.hero__logo) .hero__titular { margin-bottom: calc(9.2vw + var(--sp-3) + var(--sp-2)); } } /* En el teléfono la línea baja un poco más —el descriptor del lockup queda muy cerca de su base a este tamaño—, así que el carril crece lo mismo. */ @media (max-width: 640px) { .hero__titular:has(.hero__logo) .adn-vida { margin-top: var(--sp-6); } .hero:has(.hero__logo) .hero__titular { margin-bottom: calc(9.2vw + var(--sp-6) + var(--sp-2)); } } /* 54ch en vez de las 48 de un párrafo largo: el lead son tres renglones, y con cuatro la franja de patrocinios se caía fuera de pantalla en una laptop. */ .hero__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 54ch; margin-bottom: var(--sp-4); } /* Aviso de que la fecha exacta todavía no está: va pegado al lead, antes de los botones. */ .hero__nota-fecha { font-size: var(--fs-body-sm); color: var(--text-muted); max-width: 48ch; margin: 0 0 var(--sp-8); } .hero__metricas { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border); } .hero__metricas > div { display: flex; flex-direction: column; gap: var(--sp-1); } /* Sello de Evento esencial COSTA RICA: a la derecha del logotipo VIVE+, centrado en su alto y más bajo que el lockup para no competirle. */ .hero__sello { flex: none; margin: 0; } .hero__sello img { display: block; width: auto; height: calc(var(--sp-24) + var(--sp-8)); } @media (max-width: 1024px) { .hero__sello img { height: var(--sp-24); } } @media (max-width: 640px) { .hero__titular:has(.hero__sello) { gap: var(--sp-4); } .hero__sello img { height: var(--sp-16); } } .hero__metricas b { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .hero__metricas span { font-size: var(--fs-caption); color: var(--text-subtle); } /* ---------- El hero entra entero en la pantalla ---------- En escritorio el hero mide una pantalla y la franja de logos es su borde de abajo. Antes medía ~1.056 px fijos: en una laptop de 1440×900 el carrusel quedaba debajo del pliegue. Ahora los altos grandes —logotipo, sello y los respiros entre bloques— escalan con el alto de la ventana y tienen tope en su medida de siempre, así que en un monitor alto nada cambia. Va primero en vh y después en svh: el navegador que no conoce svh se queda con la primera. */ @media (min-width: 1025px) { .hero { min-height: 100vh; min-height: 100svh; padding-block: calc(72px + clamp(var(--sp-4), 3vh, var(--sp-12))) clamp(var(--sp-4), 2.5vh, var(--sp-12)); } .hero__eyebrow { margin-bottom: clamp(var(--sp-3), 2vh, var(--sp-6)); } .hero__titular { margin-bottom: clamp(var(--sp-3), 2vh, var(--sp-6)); } /* max-height y max-width a la vez: una imagen reemplazada conserva su proporción y manda el que llegue primero. */ .hero__logo { width: auto; max-height: 18vh; } .hero__lead { margin-bottom: var(--sp-3); } .hero__nota-fecha { max-width: 62ch; margin-bottom: clamp(var(--sp-4), 3vh, var(--sp-8)); } .hero__metricas { margin-top: clamp(var(--sp-3), 2vh, var(--sp-6)); padding-top: clamp(var(--sp-3), 2vh, var(--sp-6)); } .hero__sello img { height: clamp(var(--sp-16), 11vh, calc(var(--sp-24) + var(--sp-8))); } .hero__patrocinios { margin-top: clamp(var(--sp-3), 2vh, var(--sp-6)); padding-top: clamp(var(--sp-3), 2vh, var(--sp-5)); } .hero__patrocinios-overline { margin-bottom: var(--sp-2); } } /* Pantallas bajas (una laptop de 1366×768): la nota de fecha repite lo que ya dicen el lead y las métricas —dos días, gratis, cupo limitado—, así que es lo que se va para que entre la franja. */ @media (min-width: 1025px) and (max-height: 780px) { .hero__nota-fecha { display: none; } .hero__lead { margin-bottom: var(--sp-6); } } /* Franja de patrocinios al pie del hero. Va después de las métricas y con su propio aire: los logos son de otro orden que los datos del evento y no deben leerse como una cuarta métrica. */ /* Sangrado completo: la franja rompe el contenedor del hero y toca los dos bordes de la pantalla. El truco es el clásico —margen negativo de media pantalla menos medio contenedor— y es seguro acá porque .hero recorta (overflow: hidden): el ancho que la barra de scroll le roba a 100vw no ensancha la página. El rótulo vuelve a su carril con su propio .contenedor, que build.mjs escribe adentro del bloque. */ .hero__patrocinios { margin-top: var(--sp-6); margin-inline: calc(50% - 50vw); padding-top: var(--sp-5); border-top: 1px solid var(--border); } .hero__patrocinios-overline { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--sp-5); } /* Marquesina de patrocinios: la cinta desfila sola de derecha a izquierda. El movimiento es una sola animación de transform sobre la pista —no hay un segundo listener de scroll ni una librería— y es puramente decorativo: la cinta accesible es la primera, las otras cinco van aria-hidden. Las máscaras de los extremos son lo que hace que los logos entren y salgan en vez de aparecer cortados contra el borde. */ .marquesina { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sp-12), #000 calc(100% - var(--sp-12)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--sp-12), #000 calc(100% - var(--sp-12)), transparent 100%); } /* La duración es una variable de la marquesina y no un número fijo: cada cinta tiene un largo distinto —logos sueltos en el hero, tarjetas en aliados— y a la misma duración desfilarían a velocidades distintas. Cada variante fija su --desfile —el tiempo que tarda UNA cinta en cruzar— para que las dos se muevan a la misma velocidad aparente. */ .marquesina__pista { display: flex; width: max-content; animation: desfila var(--desfile, 16s) linear infinite; } /* La cinta NO se detiene al pasar el mouse —pedido de la organización: el desfile es continuo—. Sí se detiene si algo adentro toma el foco del teclado: si alguien está tabulando por la cinta, moverle el objetivo debajo es pelearle. El freno para quien no quiere movimiento sigue siendo prefers-reduced-motion, que apaga la animación entera. */ .marquesina:focus-within .marquesina__pista { animation-play-state: paused; } .marquesina[data-en-pantalla="false"] .marquesina__pista { animation-play-state: paused; } .marquesina__cinta[hidden] { display: none; } /* El ciclo avanza EXACTAMENTE una cinta, no media pista. Las cintas son todas iguales, así que al volver a 0 la de al lado ya ocupó el lugar de la anterior y el salto no se ve. Antes el salto era -50%: con eso el ciclo solo cubría la mitad de las copias, y en cuanto la pantalla era más ancha que esa mitad —6 cintas de ~674 px en el hero: apenas 2022 px— la cinta se cortaba a la derecha y volvía a armarse al reiniciar el ciclo. Moviendo una sola cinta, el ancho que hay que cubrir es (copias − 1) cintas: el doble de margen con los mismos nodos. --copias lo escribe build.mjs en el style de la marquesina: el número de copias lo decide él, y tenerlo dos veces era tenerlo mal una de las dos. */ @keyframes desfila { to { transform: translate3d(calc(-100% / var(--copias, 6)), 0, 0); } } /* El aire entre cintas es padding de la propia cinta y NO un gap de la pista: así cada cinta mide exactamente lo mismo (logos + su separación) y el paso del ciclo —una cinta— cae justo donde empieza la siguiente. Con gap en la pista el paso caía a medio hueco y cada vuelta daba un saltito de 20 px. */ .marquesina__cinta { display: flex; flex: 0 0 auto; align-items: center; gap: var(--sp-16); list-style: none; margin: 0; padding: 0 var(--sp-16) 0 0; } /* Cada logo va en su color original, directo sobre el fondo oscuro: sin placa ni halo. El archivo lo elige build.mjs (logo, con logoBlanco de respaldo). */ .patrocinio { display: flex; align-items: center; justify-content: center; height: var(--sp-16); } /* Reservar la caja antes de descargar el logo: con ambos tamaños en auto, las imágenes lazy empezaban con ancho cero y estiraban la cinta al cargar, cambiando también el recorrido de la animación. La proporción viene de las medidas del archivo en los datos; los límites siguen usando los tokens. El punto medio entre el color pleno (siete marcas peleando entre sí y con la foto del hero) y el blanco monocromo de antes (muy apagado, pedido de la organización de mostrar el color real): la saturación baja a la mitad, fija —WCAG exime a los logotipos del mínimo de contraste—. No se anima `filter` en el hover porque el movimiento del sitio va solo en `transform` y `opacity`; el pase del mouse sube la opacidad, no el color. */ .patrocinio__logo { --alto-logo: var(--sp-12); --ancho-logo-max: calc(var(--sp-40) + var(--sp-8)); width: min(var(--ancho-logo-max), calc(var(--alto-logo) * var(--proporcion-logo, 1))); height: auto; aspect-ratio: var(--proporcion-logo, 1); object-fit: contain; filter: saturate(.5); opacity: .7; transition: opacity var(--d-base) var(--ease-estandar); } .patrocinio:hover .patrocinio__logo { opacity: 1; } /* En la banda blanca no hay foto con la que pelear: color pleno. */ .aliados-banda .patrocinio__logo { filter: none; opacity: 1; } /* Marca con web (aliados.lista[].web): el logo entero es el enlace y se ve igual que sin él. Mantiene el centrado de .patrocinio; el foco es el global. */ .patrocinio__enlace { display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; } /* Sellos y escudos: casi cuadrados, y a la altura de un logotipo apaisado no se leen. Se les deja toda la altura de la marca. */ .patrocinio__logo--bloque { --alto-logo: var(--sp-16); } /* Sin archivo de logo: el nombre en texto es un estado final válido. */ .patrocinio__nombre { font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: 600; color: var(--text); white-space: nowrap; } @media (max-width: 640px) { .hero__patrocinios { margin-top: var(--sp-8); } .marquesina__cinta { gap: var(--sp-12); padding-right: var(--sp-12); } .patrocinio { height: var(--sp-12); } .patrocinio__logo { --alto-logo: var(--sp-8); --ancho-logo-max: calc(var(--sp-32) + var(--sp-4)); } .patrocinio__logo--bloque { --alto-logo: var(--sp-12); } } /* Subrayado grueso de lima, no resaltador: el trazo va DEBAJO de la palabra. Anclado a 100% y no a 88%: con el line-height comprimido del h1 (.94) la caja de la línea queda más baja que la em, y a 88% el trazo se montaba sobre las letras — que sobre el hero oscuro dejaba "bien" en blanco sobre lima. */ .resalta { /* Sin trazo lima: el acento debajo del titular ahora es la línea del ADN, que arranca justo bajo "vivirlos bien". Dos subrayados lima peleando en el mismo renglón era uno de más. background-image: linear-gradient(var(--highlight), var(--highlight)); */ background-repeat: no-repeat; background-position: 0 100%; background-size: 0% .32em; transition: background-size var(--d-cine) var(--ease-salida); } .resalta.visible { background-size: 100% .32em; } /* ============================================================ QUÉ ES Cada párrafo lleva su clase en vez de encadenar `p + p`: con el selector de hermano, el .overline caía dentro de la regla de display y salía en tamaño de titular, y el titular real quedaba en cuerpo de texto. ============================================================ */ .manifiesto { display: grid; gap: var(--sp-16); grid-template-columns: 7fr 5fr; align-items: start; } @media (max-width: 1024px) { .manifiesto { grid-template-columns: 1fr; gap: var(--sp-12); } } .que-es__titular { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 1; max-width: 24ch; margin: 0; } .que-es__parrafo { font-size: var(--fs-body); line-height: 1.65; color: var(--text-muted); max-width: var(--container-prosa); margin: var(--sp-8) 0 0; } .pilares { display: flex; flex-direction: column; gap: var(--sp-8); } .pilar { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); } .pilar__icono { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--accent-text); } .pilar h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-1); } .pilar p { font-size: var(--fs-body-sm); color: var(--text-muted); margin: 0; } /* ============================================================ PROGRAMA — la agenda de los dos días Nada colapsado: cada bloque muestra hora, tipo, título, detalle, ponentes con foto y lugar de una sola pasada. Tres capas de lectura: 1. La portada del día — numeral gigante sobre capas que se mueven a distinta velocidad con el scroll (site.js escribe --parallax). 2. El riel pegajoso — a la izquierda: el día, la hora que estás cruzando y el avance (--agenda-progreso, también de site.js). 3. Los bloques — tarjeta por espacio, con barra de color por tipo y un tinte según el momento del día (data-momento), del amanecer del registro a la noche del acto de clausura. Todo lo de movimiento es decorativo: sin JS y con prefers-reduced-motion la agenda se lee completa e igual de ordenada. ============================================================ */ .agenda__aviso { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body-sm); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-8); max-width: var(--container-estrecho); } .agenda__aviso svg { flex: none; color: var(--accent-text); } /* ---------- Selector de días ---------- La barra de pestañas la revela site.js; sin JS queda oculta (hidden en el HTML) y los dos días se leen apilados, cada uno con su portada. El :not([hidden]) no es adorno: sin él la clase le gana en especificidad a la regla [hidden] del navegador y la barra se vería igual sin JS. */ .agenda-dias:not([hidden]) { display: flex; width: max-content; gap: var(--sp-1); margin: 0 0 var(--sp-4); padding: var(--sp-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); } .agenda-dia__tab { appearance: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-muted); background: transparent; padding: var(--sp-2) var(--sp-6); border-radius: var(--r-pill); transition: background-color var(--d-rapido) var(--ease-estandar), color var(--d-rapido) var(--ease-estandar); } .agenda-dia__tab:hover:not([aria-selected="true"]) { color: var(--text); } .agenda-dia__tab[aria-selected="true"] { background: var(--primary); color: var(--primary-fg); } /* ---------- Filtros por tipo ---------- Solo filtran con JS, así que el HTML los trae con hidden. Nunca esconden información que no se pueda recuperar con un clic en "Todo". */ /* Debajo de las pestañas, en su propio renglón: primero se elige el día y después se filtra dentro de él. */ .agenda-filtros:not([hidden]) { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-10); } .agenda-filtro { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); transition: border-color var(--d-rapido) var(--ease-estandar), color var(--d-rapido) var(--ease-estandar), background-color var(--d-rapido) var(--ease-estandar); } .agenda-filtro:hover { color: var(--text); border-color: var(--border-strong); } .agenda-filtro[aria-pressed="true"] { background: var(--surface-brand); color: var(--accent-text); border-color: var(--accent); } .agenda-filtro__n { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-subtle); font-size: var(--fs-overline); } .agenda-filtro[aria-pressed="true"] .agenda-filtro__n { color: var(--accent-text); } .agenda-dia:not([hidden]) + .agenda-dia { margin-top: var(--sp-24); } .agenda-dia:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--sp-3); border-radius: var(--r-md); } /* ---------- Portada del día ---------- Tres capas con velocidades distintas + velo de contraste. Va con data-tema="oscuro" para que el texto use los semánticos del tema oscuro en vez de primitivos sueltos. Sin dia.imagen quedan el degradado y la trama: la foto es un plus, no un requisito. */ .dia-portada { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(12rem, 24vw, 19rem); padding: var(--sp-8); margin-bottom: var(--sp-10); border-radius: var(--r-xl); background: var(--grad-noche); box-shadow: var(--e3); } .dia-portada__capa { position: absolute; inset: -14%; z-index: -2; background-size: cover; background-position: center; will-change: transform; } /* El fondo se mueve poco y la trama el doble: eso es la profundidad. */ .dia-portada__capa--fondo { transform: translate3d(0, calc(var(--parallax, 0) * 3rem), 0) scale(1.08); } .dia-portada__capa--trama { background-image: repeating-linear-gradient(112deg, hsl(var(--vm-marfil-50) / .08) 0 1px, transparent 1px 15px); transform: translate3d(0, calc(var(--parallax, 0) * 6rem), 0); } .dia-portada__velo { position: absolute; inset: 0; z-index: -1; background: var(--grad-velo); } /* La portada de cada momento del día tiñe su degradado de fondo. */ .dia-portada[data-momento="amanecer"] .dia-portada__capa--fondo { background-image: var(--grad-amanecer); } .dia-portada[data-momento="manana"] .dia-portada__capa--fondo { background-image: var(--grad-amanecer); } .dia-portada[data-momento="mediodia"] .dia-portada__capa--fondo { background-image: var(--grad-oro); } .dia-portada[data-momento="tarde"] .dia-portada__capa--fondo { background-image: var(--grad-oro); } .dia-portada[data-momento="noche"] .dia-portada__capa--fondo { background-image: var(--grad-profundo); } .dia-portada__texto { display: flex; align-items: baseline; gap: var(--sp-5); margin: 0; font-weight: 600; transform: translate3d(0, calc(var(--parallax, 0) * -1rem), 0); } .dia-portada__numero { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: .82; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--text); } .dia-portada__nombre { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .dia-portada__semana { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; color: var(--text); } .dia-portada__mes { font-size: var(--fs-overline); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--vm-cyan-400)); } .dia-portada__resumen { margin: var(--sp-5) 0 0; font-size: var(--fs-body-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ---------- Cuerpo del día: riel pegajoso + bloques ---------- */ .agenda-cuerpo { position: relative; display: grid; justify-content: center; grid-template-columns: minmax(0, 10rem) minmax(0, var(--container)); gap: var(--sp-10); } /* Deriva de tono: un lavado vertical que va del cian del amanecer al arena de la tarde y al azul noche del cierre. Degradado ilustrativo, por eso usa primitivos; la opacidad es tan baja que no toca el contraste del texto. */ .agenda-cuerpo::before { content: ""; position: absolute; z-index: 0; pointer-events: none; inset: calc(var(--sp-8) * -1) calc(var(--sp-6) * -1); border-radius: var(--r-2xl); background: linear-gradient(180deg, hsl(var(--vm-cyan-200) / .28) 0%, hsl(var(--vm-marfil-50) / 0) 24%, hsl(var(--vm-arena-300) / .26) 70%, hsl(var(--vm-noche-700) / .10) 100%); /* El lavado deriva un poco contra el scroll: el fondo se despega del texto y la sección deja de sentirse una lámina. El .5 por defecto vale 0, así que sin JS y con movimiento reducido queda exactamente donde está. */ transform: translate3d(0, calc((var(--agenda-progreso, .5) - .5) * var(--sp-10)), 0); will-change: transform; } /* La portada y el contenido van por encima del lavado: el ::before de .agenda-cuerpo nace 32px más arriba y además deriva, así que sin esto se monta sobre la portada del día —viene después en el DOM y gana el pintado. */ .dia-portada { z-index: 1; } .agenda-riel, .agenda { position: relative; z-index: 1; } .agenda-riel { position: sticky; top: var(--sp-20); align-self: start; display: flex; flex-direction: column; gap: var(--sp-1); padding-block: var(--sp-2); } .agenda-riel__numero { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: 600; line-height: .85; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; } .agenda-riel__semana { font-size: var(--fs-overline); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-subtle); } /* La hora que estás cruzando. La escribe site.js; el parpadeo la hace notar sin que uno tenga que buscarla. */ .agenda-riel__hora { display: flex; align-items: baseline; gap: var(--sp-1); margin: var(--sp-8) 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--accent-text); font-variant-numeric: tabular-nums; } .agenda-riel__meridiano { font-size: var(--fs-body-sm); font-weight: 500; color: var(--text-subtle); } .agenda-riel__hora.es-nueva { animation: hora-entra var(--d-lento) var(--ease-salida); } @keyframes hora-entra { from { opacity: 0; transform: translateY(var(--sp-2)); } to { opacity: 1; transform: none; } } .agenda-riel__barra { display: block; height: var(--sp-1); border-radius: var(--r-pill); background: var(--border); overflow: hidden; } .agenda-riel__barra::after { content: ""; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--vm-lima-600)), hsl(var(--vm-cyan-500))); transform: scaleX(var(--agenda-progreso, 0)); transform-origin: left; transition: transform var(--d-base) var(--ease-salida); } .agenda-riel__pie { margin: var(--sp-3) 0 0; font-size: var(--fs-caption); color: var(--text-subtle); } /* ---------- La lista de bloques ---------- El riel vertical (::before del
    ) y su relleno (::after) corren por el canal de la izquierda; cada bloque pone su punto, coloreado por tipo. */ .agenda { --riel-x: var(--sp-3); --bloque-hora: 7rem; --bloque-gente: 19rem; list-style: none; padding: 0; margin: 0; } .agenda::before, .agenda::after { content: ""; position: absolute; top: var(--sp-5); bottom: var(--sp-5); left: var(--riel-x); width: 2px; margin-left: -1px; } .agenda::before { background: var(--border); } .agenda::after { background: linear-gradient(hsl(var(--vm-lima-600)), hsl(var(--vm-cyan-500))); transform: scaleY(var(--agenda-progreso, 0)); transform-origin: top; transition: transform var(--d-base) var(--ease-salida); } .agenda__bloque { position: relative; padding-left: var(--sp-10); } .agenda__bloque + .agenda__bloque { margin-top: var(--sp-4); } /* Halo del hito activo. Nace invisible y solo late mientras el bloque es el que se está cruzando: es la única pieza que se mueve sola en la sección, y marca dónde va uno sin tener que buscar la barra del riel. */ .agenda__bloque::before { content: ""; position: absolute; top: var(--sp-6); left: var(--riel-x); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--agenda-color); opacity: 0; pointer-events: none; } .agenda__bloque.es-activo::before { animation: hito-late var(--d-pulso) var(--ease-salida) infinite; } @keyframes hito-late { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } } .agenda__bloque::after { /* punto — toma el color del tipo */ content: ""; position: absolute; top: var(--sp-6); left: var(--riel-x); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--agenda-color); transition: transform var(--d-base) var(--ease-salida), box-shadow var(--d-base) var(--ease-salida); } .agenda__bloque.es-activo::after { transform: scale(1.35); box-shadow: 0 0 0 3px var(--agenda-color), var(--e-cyan); } /* ---------- La tarjeta de cada bloque ---------- */ .bloque { position: relative; display: grid; grid-template-columns: var(--bloque-hora) 1fr; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--momento-tinte, transparent), transparent 60%), var(--surface); box-shadow: var(--e1); transition: box-shadow var(--d-base) var(--ease-salida), border-color var(--d-base) var(--ease-salida), transform var(--d-base) var(--ease-salida); } .bloque::before { /* barra de color por tipo */ content: ""; position: absolute; left: var(--sp-4); top: var(--sp-5); bottom: var(--sp-5); width: 3px; border-radius: var(--r-pill); background: var(--agenda-color); opacity: .55; transform-origin: left; transition: opacity var(--d-base) var(--ease-salida), transform var(--d-base) var(--ease-salida); } /* Con ancho de sobra la tarjeta se abre en tres columnas —hora · contenido · ponentes— en vez de estirar el renglón: una medida de 90 caracteres no se lee mejor por ser más ancha, solo cansa. Donde no haya :has(), la tarjeta se queda en dos columnas y los ponentes caen debajo, que es el orden del HTML: no se pierde nada. */ @media (min-width: 1100px) { .bloque:has(.bloque__gente) { grid-template-columns: var(--bloque-hora) minmax(0, 1fr) minmax(0, var(--bloque-gente)); } } .bloque:hover { border-color: var(--border-strong); box-shadow: var(--e2); transform: translateY(-2px); } .agenda__bloque.es-activo .bloque { box-shadow: var(--e3), var(--e-cyan); border-color: var(--accent); transform: translateY(-4px); } /* La barra de tipo engorda al activarse: es la misma pieza, no una nueva. */ .agenda__bloque.es-activo .bloque::before { opacity: 1; transform: scaleX(2); } /* Las pausas son el respiro visual del día: mismo contenido, menos peso. */ .agenda__bloque[data-tipo="pausa"] .bloque { background: none; box-shadow: none; border-style: dashed; } /* La hora en dos pesos: el reloj grande manda y el a.m./p.m. acompaña. En una sola línea no cabía y "a.m." caía solo al renglón de abajo. */ .bloque__hora { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .bloque__hora time { display: flex; align-items: baseline; gap: var(--sp-1); font-family: var(--font-display); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .bloque__reloj { font-size: var(--fs-h3); line-height: 1.05; } .bloque__meridiano { font-size: var(--fs-caption); color: var(--text-subtle); font-weight: 500; } .bloque__fin { font-size: var(--fs-caption); color: var(--text-subtle); font-variant-numeric: tabular-nums; } .bloque__cuerpo { min-width: 0; } .bloque__tipo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--agenda-color); margin: 0 0 var(--sp-2); } .bloque__cuenta { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--surface-brand); color: var(--text-muted); font-size: var(--fs-caption); letter-spacing: normal; text-transform: none; } .bloque__titulo { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; text-wrap: balance; margin: 0; } .bloque__detalle { font-size: var(--fs-body-sm); color: var(--text-muted); margin: var(--sp-2) 0 0; max-width: var(--container-prosa); } /* ---------- Ponentes dentro del bloque ---------- Foto redonda + nombre + rol. Sin foto, las iniciales sobre el degradado de amanecer: se ve intencional, no como un hueco esperando una imagen. */ /* El panel vive en la tercera columna cuando hay ancho, y debajo del cuerpo cuando no. El 2 / -1 lo alinea con el texto y no con la hora: en el salto a una sola columna, un panel arrancando bajo el reloj se lee como otro bloque. */ .bloque__gente { grid-column: 2 / -1; min-width: 0; align-self: start; margin-top: var(--sp-5); } .bloque__gente-rotulo { font-size: var(--fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--sp-3); } @media (min-width: 1100px) { .bloque:has(.bloque__gente) .bloque__gente { grid-column: 3; margin-top: 0; padding-left: var(--sp-6); border-left: 1px solid var(--border); } } .bloque__ponentes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } /* En el rango de en medio —ya no cabe la tercera columna, pero sobra ancho debajo del texto— las personas van de a dos. */ @media (min-width: 700px) and (max-width: 1099.98px) { .bloque__ponentes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bloque-ponente { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); transition: border-color var(--d-base) var(--ease-salida), transform var(--d-base) var(--ease-salida); } .bloque-ponente:hover { border-color: var(--accent); transform: translateY(-2px); } .bloque-ponente__foto { width: var(--sp-10); aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad-amanecer); box-shadow: 0 0 0 2px var(--surface), var(--e1); transition: box-shadow var(--d-base) var(--ease-salida); } .bloque-ponente__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .bloque-ponente__foto span { font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: 600; color: hsl(var(--vm-marfil-50) / .95); } .agenda__bloque.es-activo .bloque-ponente__foto { box-shadow: 0 0 0 2px var(--accent), var(--e2); } .bloque-ponente__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bloque-ponente__texto b { font-size: var(--fs-body-sm); color: var(--text); } .bloque-ponente__texto span { font-size: var(--fs-caption); color: var(--text-muted); } /* Ponente de honor en la agenda: la tarjeta del bloque no cambia; su ficha lleva el rótulo, borde de acento y un avatar un escalón más grande. */ .bloque-ponente--honor { border-color: var(--accent); } .bloque-ponente--honor .bloque-ponente__foto { width: var(--sp-12); box-shadow: 0 0 0 2px var(--accent), var(--e1); } .bloque-ponente__texto .bloque-ponente__honor { font-size: var(--fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); } .bloque__ponentes-texto { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text); margin: var(--sp-4) 0 0; } @media (max-width: 600px) { .bloque__ponentes { grid-template-columns: 1fr; } } .bloque__lugar { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--text-subtle); margin: var(--sp-3) 0 0; } .bloque__lugar svg { flex: none; } /* Sede única del programa: va una vez en la cabecera y no repetida en cada tarjeta. */ .agenda__sede { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); font-weight: 600; color: var(--text); margin: var(--sp-4) 0 0; } .agenda__sede svg { flex: none; color: var(--accent-text); } /* ---------- Bloque con ponente destacado ---------- No es keynote —eso es de la sección de speakers—: es un conferencista que la organización quiere que se vea primero al recorrer la agenda. La tarjeta tiene el mismo fondo que las demás; lo que cambia es que la persona destacada deja la columna de ponentes y ocupa el centro, con foto grande, más el filo de amanecer arriba y el borde de acento. */ .bloque--destacado { overflow: hidden; border-color: var(--accent); box-shadow: var(--e2), var(--e-cyan); } .bloque--destacado::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--sp-1); background: var(--grad-amanecer); } .bloque--destacado .bloque__titulo { font-size: var(--fs-h3); } .bloque__protagonista { grid-column: 1 / -1; justify-self: center; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-5) var(--sp-8); padding: var(--sp-5) var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); } .protagonista__foto, .protagonista__mini { flex: none; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad-amanecer); } .protagonista__foto { width: var(--sp-24); box-shadow: 0 0 0 3px var(--premium), var(--e3); } .protagonista__mini { width: var(--sp-8); box-shadow: 0 0 0 1px var(--border-strong); } .protagonista__foto img, .protagonista__mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .protagonista__foto span, .protagonista__mini span { font-family: var(--font-display); font-weight: 600; color: hsl(var(--vm-marfil-50) / .95); } .protagonista__foto span { font-size: var(--fs-h3); } .protagonista__mini span { font-size: var(--fs-caption); } .protagonista__texto { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; max-width: calc(var(--sp-40) + var(--sp-32)); } .protagonista__resto-rotulo { font-size: var(--fs-overline); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .protagonista__texto b { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; color: var(--text); } .protagonista__texto > span:last-child { font-size: var(--fs-body-sm); color: var(--text-muted); } .protagonista__resto { padding-left: var(--sp-8); border-left: 1px solid var(--border); } .protagonista__resto-rotulo { color: var(--text-subtle); margin: 0 0 var(--sp-3); } .protagonista__resto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .protagonista__resto li { display: flex; align-items: center; gap: var(--sp-3); } .protagonista__resto li > span:last-child { display: flex; flex-direction: column; min-width: 0; } .protagonista__resto b { font-size: var(--fs-body-sm); color: var(--text); } .protagonista__resto li > span:last-child > span { font-size: var(--fs-caption); color: var(--text-muted); } @media (max-width: 700px) { .bloque__protagonista { justify-content: flex-start; padding: var(--sp-5); } .protagonista__foto { width: var(--sp-20); } .protagonista__texto b { font-size: var(--fs-h3); } .protagonista__resto { flex: 1 1 100%; padding: var(--sp-4) 0 0; border-left: 0; border-top: 1px solid var(--border); } } .agenda-vacio { margin: var(--sp-8) 0 0; font-size: var(--fs-body-sm); color: var(--text-muted); text-align: center; } /* Color y tinte por tipo y por momento del día. Son categorías de contenido, no estados de tema. Tres colores salen de semánticos; "experiencia" usa el primitivo nicoya-600 porque no hay semántico equivalente — seguro porque esta sección nunca es oscura. Los cuatro están verificados en el checker. */ .agenda__bloque { --agenda-color: var(--text-subtle); } .agenda__bloque[data-tipo="charla"] { --agenda-color: var(--accent-text); } .agenda__bloque[data-tipo="experiencia"] { --agenda-color: hsl(var(--vm-nicoya-600)); } .agenda__bloque[data-tipo="comunidad"] { --agenda-color: var(--premium-text); } .agenda__bloque[data-tipo="pausa"] { --agenda-color: var(--text-subtle); } .agenda__bloque[data-momento="amanecer"] { --momento-tinte: hsl(var(--vm-cyan-200) / .26); } .agenda__bloque[data-momento="manana"] { --momento-tinte: hsl(var(--vm-lima-200) / .20); } .agenda__bloque[data-momento="mediodia"] { --momento-tinte: hsl(var(--vm-arena-300) / .22); } .agenda__bloque[data-momento="tarde"] { --momento-tinte: hsl(var(--vm-arena-500) / .18); } .agenda__bloque[data-momento="noche"] { --momento-tinte: hsl(var(--vm-noche-700) / .12); } .agenda__pie { margin-top: var(--sp-16); } /* El riel de la izquierda no cabe: pasa a barra pegajosa horizontal arriba de los bloques, con el mismo contenido (día, hora viva y avance). */ @media (max-width: 900px) { .agenda-cuerpo { grid-template-columns: 1fr; gap: var(--sp-6); } .agenda-cuerpo::before { inset: calc(var(--sp-6) * -1) calc(var(--sp-4) * -1); } .agenda-riel { top: var(--sp-16); z-index: 2; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--e2); backdrop-filter: var(--vidrio); } .agenda-riel__numero { font-size: var(--fs-h2); grid-row: 1 / span 2; } .agenda-riel__semana { grid-column: 2; grid-row: 1; } .agenda-riel__hora { margin: 0; grid-column: 2; grid-row: 2; font-size: var(--fs-h3); } .agenda-riel__barra { grid-column: 3; grid-row: 1 / span 2; margin-left: var(--sp-2); } .agenda-riel__pie { display: none; } } @media (max-width: 600px) { .dia-portada { padding: var(--sp-6); } .dia-portada__texto { gap: var(--sp-4); } .agenda__bloque { padding-left: var(--sp-6); } .agenda { --riel-x: var(--sp-1); } .bloque { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6); } .bloque::before { left: var(--sp-2); top: var(--sp-4); bottom: var(--sp-4); } .bloque__hora { flex-direction: row; align-items: baseline; gap: var(--sp-2); } .bloque__hora time { font-size: var(--fs-body); } .bloque__ponentes { gap: var(--sp-3); } /* Acá la tarjeta es de una sola columna: sin esto, el 2 / -1 del panel le inventa una segunda columna a la grilla y la tarjeta se sale de pantalla. */ .bloque__gente { grid-column: 1; margin-top: var(--sp-4); } } /* Con movimiento reducido queda todo quieto: sin parallax, sin desplazamiento del riel y sin la entrada de la hora. La información no cambia. */ @media (prefers-reduced-motion: reduce) { .dia-portada__capa, .dia-portada__texto { transform: none; } .agenda-riel__hora.es-nueva { animation: none; } .agenda__bloque.es-activo .bloque { transform: none; } .agenda-cuerpo::before { transform: none; } /* El halo es lo único que se repite solo: se apaga entero, no se ralentiza. */ .agenda__bloque.es-activo::before { animation: none; } } /* ============================================================ UBICACIÓN ============================================================ */ .ubicacion { display: grid; grid-template-columns: 6fr 6fr; gap: var(--sp-16); align-items: stretch; } @media (max-width: 900px) { .ubicacion { grid-template-columns: 1fr; gap: var(--sp-10); } } /* La foto de Nicoya, con el mismo lenguaje visual que .zona-azul__media: el degradado de ::before queda detrás mientras carga. Imagen estática y nunca un iframe de mapas: carga scripts de terceros y castiga el LCP. El rótulo «Nicoya» va abajo a la izquierda para no tapar la fachada. */ .ubicacion__media { position: relative; min-height: 26rem; border-radius: var(--r-2xl); overflow: hidden; isolation: isolate; } .ubicacion__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .ubicacion__pin { position: absolute; left: var(--sp-5); bottom: var(--sp-5); margin: 0; transform-origin: left bottom; display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: hsl(var(--vm-marfil-50)); background: hsl(var(--vm-noche-900) / .72); backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); } .ubicacion__pin span { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--vm-lima-500)); } .ubicacion__texto h2 { font-size: var(--fs-h1); font-variation-settings: "opsz" 120; text-wrap: balance; margin-bottom: var(--sp-5); } .ubicacion__texto .lead { margin-bottom: var(--sp-8); } .ubicacion__sede { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-10); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .ubicacion__sede b { color: var(--text); } .ubicacion__sede span { font-size: var(--fs-body-sm); color: var(--text-muted); } /* El cuadro del ícono: el mismo lenguaje de .pilar__icono, un paso más grande. Lo usan la sede, las formas de llegar y el hospedaje. */ .ubicacion__sede .ubicacion__icono, .ubicacion__icono, .llegar__icono { width: var(--sp-12); height: var(--sp-12); flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--border); color: var(--accent-text); transition: background-color var(--d-base) var(--ease-salida), color var(--d-base) var(--ease-salida), border-color var(--d-base) var(--ease-salida); } /* La sede en la landing: pin a la izquierda y, debajo del texto, los botones que abren la ruta en el mapa del teléfono. Son enlaces, no un mapa incrustado: no cargan nada de terceros. */ .ubicacion__sede--con-icono { grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-5); border-radius: var(--r-lg); box-shadow: var(--e1); } .ubicacion__sede--con-icono > p { display: grid; gap: var(--sp-1); margin: 0; } .ubicacion__sede--con-icono .ubicacion__icono { background: var(--accent); color: var(--accent-fg); border-color: transparent; } .ubicacion__mapas { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); } .ubicacion__mapas svg { width: var(--sp-5); height: var(--sp-5); } @media (max-width: 600px) { .ubicacion__mapas { grid-column: 1 / -1; } .ubicacion__mapas .btn { flex: 1 1 auto; } } .ubicacion__subtitulo { font-size: var(--fs-overline); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--sp-5); } /* Las tres formas de llegar son alternativas, no pasos: por eso