@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap"); /* ============================================================================ Portalia Sports — Home Nuevo Hoja de estilos independiente (NO afecta a site.css ni al home actual). Diseño: fusión del home web + pantalla Inicio de la app móvil. Todo el CSS está acotado a .hn-page para evitar colisiones. ========================================================================== */ /* ---------- Tipografías (rutas relativas a /assets/portalia/) ------------- */ /* Display: la misma Black que usa el sitio actual (.hero-lead) */ @font-face { font-family: "TT Travels Black"; src: url("../../fonts/TTTravelsNextTrl-Blc.woff2") format("woff2"), url("../../fonts/TTTravelsNextTrl-Blc.woff") format("woff"), url("../../fonts/tt-travels-next-black.TTF") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* Outline: la misma que usa el sitio actual (.events-p) */ @font-face { font-family: "TT Travels Outline"; src: url("../../fonts/TTTravelsNextTrl-BlcOutline.woff2") format("woff2"), url("../../fonts/TTTravelsNextTrl-BlcOutline.woff") format("woff"), url("../../fonts/TT-TRAVELS-NEXT-TRIAL-BLACK-OUTLINE.TTF") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* ---------- Tokens -------------------------------------------------------- */ .hn-page, body.hn-body { --hn-navy: #0e3c61; --hn-navy-deep: #08283f; --hn-navy-ink: #062033; --hn-cyan: #00b1e9; --hn-cyan-soft: #4fd0ff; --hn-white: #ffffff; --hn-mist: #f4f8fb; --hn-line: rgba(14, 60, 97, 0.12); --hn-line-dark: rgba(255, 255, 255, 0.14); --hn-text: #143850; --hn-muted: #4a6d85; --hn-accent-ink: #0a7192; --hn-muted-dark: rgba(255, 255, 255, 0.72); --hn-display: "TT Travels Black", "Sora", ui-sans-serif, system-ui, Arial, sans-serif; --hn-outline: "TT Travels Outline", "TT Travels Black", "Sora", ui-sans-serif, system-ui, Arial, sans-serif; --hn-body: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --hn-r-sm: 10px; --hn-r-md: 16px; --hn-r-lg: 24px; --hn-r-xl: 32px; --hn-pad: clamp(1rem, 4vw, 3rem); --hn-max: 1320px; --hn-header-h: 68px; /* Tab bar desactivada: el token queda en 0 para que el footer no reserve hueco */ --hn-tabbar-h: 0px; --hn-shadow: 0 18px 40px -22px rgba(6, 32, 51, 0.55); --hn-shadow-lg: 0 34px 70px -30px rgba(6, 32, 51, 0.6); --hn-ease: cubic-bezier(0.22, 0.75, 0.3, 1); } /* ---------- Reset local --------------------------------------------------- */ .hn-page *, .hn-page *::before, .hn-page *::after { box-sizing: border-box; } /* El lienzo del navegador toma el fondo de ; si no se declara, hereda el del (claro) y iOS pinta de blanco la franja de la barra de estado y el rebote del scroll. Con el navy del header, esa zona va del color del menu arriba y del footer abajo. Valor literal: los tokens viven en .hn-page/body, fuera del alcance de . Debe coincidir con --hn-navy-ink y con el de hnHead / hnHeadInterior. */ html { background: #062033; } body.hn-body { margin: 0; background: var(--hn-white); color: var(--hn-text); font-family: var(--hn-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .hn-page img { max-width: 100%; display: block; } .hn-page a { color: inherit; text-decoration: none; } .hn-page button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .hn-page p, .hn-page h1, .hn-page h2, .hn-page h3, .hn-page h4, .hn-page ul, .hn-page li { margin: 0; padding: 0; } .hn-page ul { list-style: none; } .hn-page :where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--hn-cyan); outline-offset: 3px; border-radius: 6px; } .hn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hn-shell { width: 100%; max-width: var(--hn-max); margin-inline: auto; padding-inline: var(--hn-pad); } /* ============================ HEADER (app-like) =========================== */ .hn-header { position: sticky; top: 0; z-index: 60; height: var(--hn-header-h); display: flex; align-items: center; background: linear-gradient(180deg, rgba(8, 40, 63, 0.92), rgba(8, 40, 63, 0.62)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background 0.3s var(--hn-ease), border-color 0.3s var(--hn-ease); } .hn-header.is-stuck { background: rgba(6, 32, 51, 0.96); border-bottom-color: var(--hn-line-dark); } .hn-header__inner { width: 100%; max-width: var(--hn-max); margin-inline: auto; padding-inline: var(--hn-pad); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .hn-header__brand img { height: 30px; width: auto; } .hn-nav { display: none; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); } .hn-nav a { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; position: relative; padding-block: 0.35rem; transition: color 0.2s var(--hn-ease); } .hn-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hn-cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--hn-ease); } .hn-nav a:hover { color: #fff; } .hn-nav a:hover::after, .hn-nav a[aria-current="page"]::after { transform: scaleX(1); } .hn-nav a[aria-current="page"] { color: #fff; } .hn-page .hn-header__cta { display: none; background: var(--hn-cyan); color: #04283f; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.6rem 1.15rem; border-radius: 999px; transition: transform 0.2s var(--hn-ease), box-shadow 0.2s var(--hn-ease); } .hn-page .hn-header__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 177, 233, 0.9); } .hn-burger { width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; border: 1px solid var(--hn-line-dark); } .hn-burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.28s var(--hn-ease), opacity 0.2s var(--hn-ease); } .hn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Panel móvil */ .hn-drawer { position: fixed; inset: var(--hn-header-h) 0 auto 0; z-index: 55; background: rgba(6, 32, 51, 0.98); backdrop-filter: blur(16px); border-bottom: 1px solid var(--hn-line-dark); padding: 1rem var(--hn-pad) 1.5rem; display: grid; gap: 0.25rem; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--hn-ease), transform 0.25s var(--hn-ease), visibility 0.25s; } .hn-drawer.is-open { opacity: 1; transform: none; visibility: visible; } .hn-drawer a { color: #fff; font-family: var(--hn-body); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.01em; padding: 0.75rem 0; border-bottom: 1px solid var(--hn-line-dark); } .hn-drawer a:last-child { border-bottom: 0; } /* ================================ HERO =================================== */ .hn-hero { position: relative; margin-top: calc(var(--hn-header-h) * -1); /* En móvil el hero NO ocupa toda la pantalla: deja asomar la marquesina y el inicio de "Próximos eventos". Crece en pantallas grandes. */ min-height: min(72svh, 560px); display: flex; align-items: flex-end; overflow: hidden; background: var(--hn-navy-ink); } .hn-hero__media { position: absolute; inset: 0; } .hn-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .hn-hero__media::after { content: ""; position: absolute; inset: 0; background: /* Velo plano de marca: unifica fotos de origen y luz distintos, que es lo que pasa al rotar varias imagenes en el mismo hero. */ linear-gradient(180deg, rgba(14, 60, 97, 0.42), rgba(14, 60, 97, 0.42)), /* Vertical: oscurece bajo la cabecera y sobre la marquesina. */ linear-gradient(180deg, rgba(6, 32, 51, 0.82) 0%, rgba(6, 32, 51, 0.28) 42%, rgba(6, 32, 51, 0.92) 100%), /* Horizontal: asienta el titulo y la barra social del lado izquierdo. */ linear-gradient(90deg, rgba(6, 32, 51, 0.78) 0%, rgba(6, 32, 51, 0) 62%); } /* Slideshow: las diapositivas se apilan y solo la activa queda opaca. Con una sola imagen configurada nunca se activa el carrusel y esto no estorba. */ .hn-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--hn-ease); } .hn-hero__slide.is-active { opacity: 1; } /* Zoom lento. La duracion la fija el script: intervalo + 1.5 s, para que el movimiento no se corte justo al cambiar de diapositiva. */ @keyframes hn-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } } .hn-hero__media img.hn-kenburns { animation-name: hn-kenburns; animation-timing-function: ease-out; animation-fill-mode: forwards; } /* Indicadores de diapositiva: barras finas que se llenan de cian mientras corre el intervalo, asi el hero anuncia cuando va a cambiar. Los crea el script; sin carrusel el contenedor queda vacio y no ocupa espacio. */ .hn-hero__dots { position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 3vw, 2.25rem); z-index: 3; display: flex; align-items: center; gap: 0.55rem; } .hn-hero__dots:empty { display: none; } .hn-hero__dots button { /* Barra de 3 px dentro de un area tactil de 24 px de alto. */ position: relative; width: 26px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; transition: width 0.45s var(--hn-ease); } .hn-hero__dots button::before { content: ""; display: block; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.38); } .hn-hero__dots button:hover::before { background: rgba(255, 255, 255, 0.62); } .hn-hero__dots button.is-active { width: 58px; } .hn-hero__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 999px; } /* Relleno de progreso. La duracion la fija el script: el intervalo del hero. */ .hn-hero__dotfill { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 0; height: 3px; border-radius: 999px; background: var(--hn-cyan); box-shadow: 0 0 12px rgba(0, 177, 233, 0.55); } @keyframes hn-hero-progress { from { width: 0; } to { width: 100%; } } .hn-hero__dots button.is-active .hn-hero__dotfill { animation-name: hn-hero-progress; animation-timing-function: linear; animation-fill-mode: forwards; } .hn-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--hn-max); margin-inline: auto; padding: calc(var(--hn-header-h) + 1.75rem) var(--hn-pad) clamp(2.5rem, 7vw, 4rem); display: grid; gap: clamp(0.9rem, 3.2vw, 1.75rem); } .hn-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--hn-cyan-soft); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; } .hn-hero__eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--hn-cyan); border-radius: 2px; } .hn-hero__title { font-family: var(--hn-display); color: #fff; text-transform: uppercase; font-size: clamp(2.4rem, 8.6vw, 6.5rem); line-height: 0.92; letter-spacing: -0.015em; text-wrap: balance; max-width: 14ch; } .hn-hero__rule { width: 84px; height: 5px; background: var(--hn-cyan); border-radius: 3px; } .hn-hero__text { color: var(--hn-muted-dark); font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 52ch; } .hn-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.5rem; } .hn-page .hn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.7rem; border-radius: 12px; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 0.2s var(--hn-ease), box-shadow 0.2s var(--hn-ease), background 0.2s var(--hn-ease), color 0.2s var(--hn-ease); } .hn-page .hn-btn--primary { background: var(--hn-cyan); color: #04283f; box-shadow: 0 16px 34px -18px rgba(0, 177, 233, 0.95); } .hn-page .hn-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -18px rgba(0, 177, 233, 1); } .hn-page .hn-btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.75); color: #fff; background: rgba(6, 32, 51, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hn-page .hn-btn--ghost:hover { background: rgba(6, 32, 51, 0.72); border-color: #fff; transform: translateY(-3px); } .hn-page .hn-btn--dark { background: var(--hn-navy); color: #fff; } .hn-page .hn-btn--dark:hover { transform: translateY(-3px); box-shadow: var(--hn-shadow); } /* Rail social vertical (desktop) */ .hn-hero__social { display: none; position: absolute; left: clamp(1rem, 2.4vw, 2rem); top: 50%; transform: translateY(-50%); z-index: 3; gap: 1rem; flex-direction: column; align-items: center; } .hn-hero__social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; transition: transform 0.2s var(--hn-ease), opacity 0.2s var(--hn-ease); } .hn-hero__social a:hover { transform: translateY(-3px) scale(1.04); opacity: 0.85; } .hn-hero__social img { width: 100%; height: 100%; object-fit: contain; } .hn-hero__scroll { position: absolute; bottom: 1.25rem; left: 50%; translate: -50% 0; z-index: 3; color: rgba(255, 255, 255, 0.75); display: grid; place-items: center; animation: hn-bounce 2.2s infinite; } @keyframes hn-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ============================== MARQUEE ================================== */ .hn-marquee { background: var(--hn-cyan); color: #fff; overflow: hidden; padding: 0.7rem 0; display: flex; } .hn-marquee__track { display: flex; align-items: center; gap: 1.5rem; white-space: nowrap; padding-right: 1.5rem; animation: hn-slide 26s linear infinite; } .hn-marquee span { font-family: var(--hn-display); font-size: clamp(1rem, 2vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.06em; } .hn-marquee span.is-outline { font-family: var(--hn-outline); } .hn-marquee i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); flex: none; } @keyframes hn-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* =============================== SECCIONES =============================== */ .hn-section { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0; } .hn-section--dark { background: radial-gradient(120% 90% at 80% 0%, rgba(0, 177, 233, 0.22), transparent 60%), linear-gradient(180deg, var(--hn-navy) 0%, var(--hn-navy-ink) 100%); color: #fff; } .hn-section--mist { background: var(--hn-mist); } .hn-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .hn-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--hn-cyan); margin-bottom: 0.6rem; } .hn-eyebrow::before { content: ""; width: 26px; height: 3px; background: currentColor; border-radius: 2px; } .hn-title { font-family: var(--hn-display); text-transform: uppercase; font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; color: var(--hn-navy); } .hn-section--dark .hn-title { color: #fff; } .hn-lede { color: var(--hn-muted); max-width: 46ch; margin-top: 0.75rem; } .hn-section--dark .hn-lede { color: var(--hn-muted-dark); } .hn-section:not(.hn-section--dark) .hn-eyebrow { color: var(--hn-accent-ink); } /* Marca de agua tipográfica al fondo de la sección */ .hn-watermark { position: absolute; inset-inline: 0; top: clamp(2rem, 6vw, 4rem); z-index: 0; overflow: hidden; pointer-events: none; user-select: none; opacity: 0.09; } .hn-section--dark .hn-watermark { opacity: 0.16; } .hn-watermark__row { display: flex; gap: 1.5rem; white-space: nowrap; font-size: clamp(3rem, 9vw, 7rem); line-height: 1; color: var(--hn-cyan); animation: hn-slide 40s linear infinite; } .hn-watermark__row:nth-child(2) { animation-duration: 52s; animation-direction: reverse; } .hn-watermark__row span { font-family: var(--hn-display); } .hn-watermark__row span.is-outline { font-family: var(--hn-outline); } .hn-section > .hn-shell { position: relative; z-index: 1; } /* ============================== CARRUSEL ================================= */ /* Móvil/tablet: riel horizontal con snap. Cada tarjeta entra completa en pantalla (el "asomo" de la siguiente es el borde del contenedor, nunca un corte de tarjeta). En escritorio el riel se convierte en composición. */ .hn-rail { display: flex; gap: clamp(0.85rem, 2.4vw, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hn-pad); /* Full-bleed: el riel ocupa todo el ancho de la ventana sin importar el padding del contenedor, así las tarjetas se cortan contra el borde de la pantalla y nunca contra una franja de fondo. */ width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); padding: 0.5rem var(--hn-pad) 1.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .hn-rail::-webkit-scrollbar { display: none; } .hn-rail > li { scroll-snap-align: start; scroll-snap-stop: always; flex: none; } .hn-railnav { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem; } .hn-railnav__btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--hn-line); color: var(--hn-navy); display: grid; place-items: center; transition: background 0.2s var(--hn-ease), color 0.2s var(--hn-ease), transform 0.2s var(--hn-ease), border-color 0.2s var(--hn-ease); } .hn-railnav__btn:hover { background: var(--hn-navy); border-color: var(--hn-navy); color: #fff; transform: translateY(-2px); } .hn-railnav__btn[disabled] { opacity: 0.35; cursor: default; transform: none; background: none; color: var(--hn-navy); border-color: var(--hn-line); } .hn-section--dark .hn-railnav__btn { border-color: var(--hn-line-dark); color: #fff; } .hn-section--dark .hn-railnav__btn:hover { background: var(--hn-cyan); border-color: var(--hn-cyan); color: #04283f; } .hn-section--dark .hn-railnav__btn[disabled] { background: none; color: #fff; border-color: var(--hn-line-dark); } .hn-page .hn-railnav__more { margin-left: 0.35rem; padding: 0.8rem 1.35rem; border-radius: 999px; border: 1.5px solid var(--hn-cyan); color: var(--hn-cyan); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; transition: background 0.2s var(--hn-ease), color 0.2s var(--hn-ease), transform 0.2s var(--hn-ease); } .hn-page .hn-railnav__more:hover { background: var(--hn-cyan); color: #04283f; transform: translateY(-2px); } /* Sobre fondos claros el cian puro no alcanza contraste AA: se usa navy */ .hn-page .hn-section:not(.hn-section--dark) .hn-railnav__more { color: var(--hn-navy); border-color: var(--hn-navy); } .hn-page .hn-section:not(.hn-section--dark) .hn-railnav__more:hover { background: var(--hn-navy); border-color: var(--hn-navy); color: #fff; } /* ============================== TARJETAS ================================= */ .hn-card { position: relative; width: min(78vw, 320px); aspect-ratio: 3 / 4.2; border-radius: var(--hn-r-lg); overflow: hidden; background: var(--hn-navy-deep); box-shadow: var(--hn-shadow); display: block; isolation: isolate; transition: transform 0.32s var(--hn-ease), box-shadow 0.32s var(--hn-ease); } .hn-card:hover { transform: translateY(-6px); box-shadow: var(--hn-shadow-lg); } .hn-card__img { position: absolute; color: transparent; font-size: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--hn-ease); } .hn-card:hover .hn-card__img { transform: scale(1.06); } .hn-card__img.is-fallback { object-fit: contain; padding: 20%; background: #fff; } .hn-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 32, 51, 0) 30%, rgba(6, 32, 51, 0.72) 66%, rgba(4, 22, 36, 0.94) 100%); } .hn-card__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.55rem; padding: 1.15rem; color: #fff; } .hn-card__badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.15rem; } .hn-card__title { font-family: var(--hn-display); font-size: clamp(1.25rem, 3.4vw, 1.6rem); line-height: 1.08; text-wrap: balance; } .hn-card__meta { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); font-weight: 600; } .hn-card__excerpt { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; } /* Badges (compatibles con el HTML que emite listaEventos) */ .hn-page .card-badge, .hn-badge { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; white-space: nowrap; } .hn-page .card-badge p { margin: 0; } .hn-page .card-badge--outline { background: rgba(6, 32, 51, 0.55); } .hn-page .card-badge--abierto, .hn-page .card-badge--registro { background: var(--hn-cyan); border-color: var(--hn-cyan); color: #04283f; } .hn-page .card-badge--registro, .hn-page .portalia-status--register { background: var(--hn-cyan); border-color: var(--hn-cyan); color: #04283f; } .hn-page .portalia-status--upcoming { background: rgba(255, 255, 255, 0.9); border-color: transparent; color: var(--hn-navy); } .hn-page .portalia-status--finished { background: rgba(6, 32, 51, 0.72); border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.9); } .hn-page .card-badge--agotado, .hn-page .card-badge--cerrado { background: rgba(255, 255, 255, 0.9); border-color: transparent; color: var(--hn-navy); } .hn-page .card-badge--finalizado { background: rgba(6, 32, 51, 0.78); } /* ============================== SERVICIOS ================================ */ .hn-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .hn-feature { background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); padding: clamp(1.35rem, 3vw, 2rem); display: grid; gap: 0.7rem; align-content: start; transition: transform 0.25s var(--hn-ease), box-shadow 0.25s var(--hn-ease), border-color 0.25s var(--hn-ease); } .hn-feature:hover { transform: translateY(-4px); box-shadow: var(--hn-shadow); border-color: transparent; } .hn-feature__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(0, 177, 233, 0.12); color: var(--hn-cyan); margin-bottom: 0.25rem; } .hn-feature__title { font-family: var(--hn-display); font-size: 1.25rem; text-transform: uppercase; color: var(--hn-navy); line-height: 1.1; } .hn-feature p { color: var(--hn-muted); font-size: 0.95rem; } /* ============================== PATROCINIOS ============================== */ .hn-sponsors { overflow: hidden; display: flex; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .hn-sponsors__track { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding-right: clamp(2rem, 5vw, 4rem); animation: hn-slide 34s linear infinite; } .hn-sponsors:hover .hn-sponsors__track { animation-play-state: paused; } .hn-sponsors img { height: clamp(42px, 6vw, 66px); width: auto; flex: none; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: filter 0.3s var(--hn-ease), opacity 0.3s var(--hn-ease); } .hn-sponsors img:hover { filter: none; opacity: 1; } /* ================================ CTA ==================================== */ .hn-cta { position: relative; overflow: hidden; border-radius: var(--hn-r-xl); isolation: isolate; min-height: clamp(320px, 46vw, 460px); display: grid; place-items: center; text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem); } .hn-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hn-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(6, 32, 51, 0.9) 10%, rgba(0, 177, 233, 0.55) 100%); } .hn-cta__title { font-family: var(--hn-display); color: #fff; text-transform: uppercase; font-size: clamp(1.9rem, 5.2vw, 3.4rem); line-height: 1.02; max-width: 18ch; margin-inline: auto; } .hn-cta p { color: rgba(255, 255, 255, 0.88); max-width: 50ch; margin: 1rem auto 1.75rem; font-size: clamp(1rem, 1.6vw, 1.15rem); } /* ================================ FOOTER ================================= */ .hn-footer { background: var(--hn-navy-ink); color: #fff; padding: clamp(2.5rem, 6vw, 4rem) 0 calc(2rem + var(--hn-tabbar-h)); } .hn-footer__top { display: grid; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--hn-line-dark); } .hn-footer__brand img { height: 46px; width: auto; } .hn-footer__brand p { color: var(--hn-muted-dark); max-width: 38ch; margin-top: 1rem; font-size: 0.95rem; } .hn-footer__cols { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .hn-footer__cols h3 { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hn-cyan); margin-bottom: 0.85rem; } .hn-footer__cols a { display: block; color: rgba(255, 255, 255, 0.78); padding: 0.3rem 0; font-size: 0.95rem; transition: color 0.2s var(--hn-ease), transform 0.2s var(--hn-ease); } .hn-footer__cols a:hover { color: #fff; transform: translateX(3px); } .hn-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .hn-social a { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; transition: transform 0.2s var(--hn-ease), opacity 0.2s var(--hn-ease); } .hn-social a:hover { transform: translateY(-3px) scale(1.04); opacity: 0.85; } .hn-social img { width: 100%; height: 100%; object-fit: contain; } .hn-footer__bottom { padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; } .hn-footer__bottom a:hover { color: #fff; text-decoration: underline; } /* ========================= TAB BAR (móvil, app) ========================== Desactivada por decisión de producto. El marcado sigue en el chunk hnTabbar: para recuperarla, quitar el display:none y devolver --hn-tabbar-h a 66px. */ .hn-page .hn-tabbar { display: none; } .hn-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: calc(var(--hn-tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; background: rgba(6, 32, 51, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--hn-line-dark); } .hn-tabbar a { display: grid; justify-items: center; gap: 4px; padding: 0.5rem 0.25rem; color: rgba(255, 255, 255, 0.6); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; transition: color 0.2s var(--hn-ease); } .hn-tabbar a[aria-current="page"], .hn-tabbar a:hover { color: var(--hn-cyan); } .hn-tabbar svg { width: 22px; height: 22px; } /* ==================== COMPOSICIONES DE ESCRITORIO ======================== */ /* A partir de 1024px los rieles dejan de desplazarse: el contenido se acomoda en cuadrícula, de modo que ninguna tarjeta queda cortada. Eventos: el destacado al centro y los demás a los lados. Notas: cuadrícula de tres columnas. */ @media (min-width: 1024px) { .hn-rail[data-hn-featured], .hn-rail[data-hn-grid] { overflow: visible; scroll-snap-type: none; width: auto; max-width: none; margin-inline: 0; padding: 0.25rem 0 0; gap: clamp(1rem, 1.8vw, 1.75rem); } .hn-rail[data-hn-featured] > li, .hn-rail[data-hn-grid] > li { flex: initial; } .hn-rail[data-hn-featured] .hn-card, .hn-rail[data-hn-grid] .hn-card { width: 100%; height: 100%; aspect-ratio: auto; } /* Eventos: todas las tarjetas con el mismo peso visual. El destacado (el primero que devuelve MODX) se coloca en la celda central de la primera fila mediante `order`, sin cambiar de tamaño. */ .hn-rail[data-hn-featured] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(400px, 30vw, 470px); } .hn-rail[data-hn-featured] > li { order: 3; } .hn-rail[data-hn-featured] > li:nth-child(2) { order: 1; } .hn-rail[data-hn-featured] > li:nth-child(1) { order: 2; } .hn-rail[data-hn-featured] > li:nth-child(n + 7) { display: none; } /* Notas: cuadrícula de tres, todas completas */ .hn-rail[data-hn-grid] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(360px, 27vw, 420px); } .hn-rail[data-hn-grid] > li:nth-child(n + 7) { display: none; } /* Sin desplazamiento no hacen falta las flechas */ .hn-railnav__btn { display: none; } } /* ============================== RESPONSIVE =============================== */ @media (min-width: 640px) { .hn-card { width: 320px; } } @media (min-width: 768px) { .hn-page { --hn-tabbar-h: 0px; } .hn-hero { min-height: min(86svh, 700px); } .hn-tabbar { display: none; } .hn-footer { padding-bottom: clamp(2rem, 5vw, 3rem); } .hn-hero__social { display: flex; } .hn-footer__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); align-items: start; gap: 3rem; } } @media (min-width: 1024px) { .hn-page { --hn-header-h: 78px; } .hn-nav { display: flex; } .hn-page .hn-header__cta { display: inline-flex; } .hn-burger { display: none; } .hn-drawer { display: none; } .hn-header__brand img { height: 34px; } .hn-card { width: 330px; } .hn-hero { min-height: min(94svh, 820px); } .hn-hero__inner { padding-block: calc(var(--hn-header-h) + 5rem) clamp(5rem, 8vw, 7rem); } } @media (min-width: 1280px) { .hn-card { width: 340px; } } @media (hover: none) { .hn-card:hover { transform: none; box-shadow: var(--hn-shadow); } .hn-card:hover .hn-card__img { transform: none; } } @media (prefers-reduced-motion: reduce) { .hn-page *, .hn-page *::before, .hn-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Impresión: sin cromo de navegación */ @media print { .hn-header, .hn-tabbar, .hn-railnav, .hn-hero__scroll { display: none !important; } .hn-page { color: #000; } }