/* ============================================================================ Portalia Sports — Home Nuevo · capa de páginas interiores Complementa home-nuevo.css para archivo de eventos, evento, notas, nota, contacto, legales, checkout y errores. Se carga DESPUÉS de site.css y todo está acotado a .hn-page, así que el sitio actual no se ve afectado. ========================================================================== */ /* ---------------------- Estructura de página interior --------------------- */ /* site.css trae reglas globales sobre pensadas para el header fijo anterior (padding-top: 5.5rem, display:flex, gap). En las páginas con el cromo nuevo hay que neutralizarlas o aparece una franja vacía arriba y el contenido deja de centrarse. */ body.hn-body { display: block; margin: 0; padding: 0; gap: normal; min-height: 100%; } /* El body original centraba con flex; se replica en el contenedor nuevo para que las secciones con ancho limitado (lg:w-[80%], etc.) queden centradas. */ .hn-page.hn-interior { display: flex; flex-direction: column; align-items: center; width: 100%; } .hn-page.hn-interior > header, .hn-page.hn-interior > nav, .hn-page.hn-interior > main, .hn-page.hn-interior > footer { width: 100%; } /* Ritmo vertical: cada bloque de contenido trae su propio padding, así no quedan franjas vacías entre secciones. */ .hn-page.hn-interior > section { margin-bottom: 0; } .hn-page.hn-interior > section + main { padding-top: clamp(1.25rem, 3vw, 2rem); } /* En interiores el header arranca ya opaco: debajo hay fondos claros. */ .hn-page.hn-interior .hn-header { background: rgba(6, 32, 51, 0.96); border-bottom-color: var(--hn-line-dark); } /* Heros que pasan por debajo del header translúcido */ .hn-page.hn-interior .error-page { margin-top: calc(var(--hn-header-h) * -1); padding-top: calc(var(--hn-header-h) + clamp(3rem, 8vw, 6rem)); } .hn-page .hn-main { display: block; width: 100%; padding-bottom: clamp(2rem, 5vw, 4rem); } /* Las páginas interiores usan el fondo claro del home, con las cajas en blanco para que ningún bloque quede flotando sobre un vacío blanco. */ body.hn-body:has(.hn-interior) { background: var(--hn-mist); } .hn-page.hn-interior { background: var(--hn-mist); } /* Hero superior de las páginas interiores: a sangre y sin esquinas redondeadas (site.css se las daba), igual que el hero del home. */ .hn-page .visual-hero { position: relative; display: block; width: 100%; max-width: none; height: clamp(220px, 34vw, 380px); margin: calc(var(--hn-header-h) * -1) 0 0; border-radius: 0; overflow: hidden; background: var(--hn-navy-ink); } .hn-page .visual-hero img { border-radius: 0; } .hn-page .visual-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .hn-page .visual-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 32, 51, 0.76) 0%, rgba(14, 60, 97, 0.36) 45%, rgba(6, 32, 51, 0.84) 100%), linear-gradient(115deg, rgba(14, 60, 97, 0.6) 0%, rgba(0, 177, 233, 0.2) 100%); } /* Encabezado de página (título + bajada), sobre el hero o suelto */ .hn-page .hn-pagehead { position: relative; z-index: 2; width: 100%; max-width: var(--hn-max); margin: clamp(-6rem, -9vw, -4rem) auto 0; padding: 0 var(--hn-pad) clamp(1.5rem, 3vw, 2.5rem); color: #fff; } .hn-page .hn-pagehead__title { font-family: var(--hn-display); text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; } .hn-page .hn-pagehead__lede { color: rgba(255, 255, 255, 0.82); max-width: 56ch; margin-top: 0.75rem; } /* Contenedores de contenido de cada plantilla */ .hn-page .contact-page, .hn-page .legal-page { width: 100%; max-width: none; margin: 0; padding: 0; display: block; } .hn-page .archive-content, .hn-page .contact-content, .hn-page .note-page, .hn-page .event-page, .hn-page .checkout-page { width: 100%; max-width: var(--hn-max); margin: 0 auto; padding-inline: var(--hn-pad); padding-block: clamp(1.5rem, 4vw, 3rem); display: grid; gap: clamp(2rem, 5vw, 3.5rem); } /* ------------------------------ Migas de pan ------------------------------ */ .hn-page .site-breadcrumb { border: 0; padding-block: 0.5rem 0; margin-top: 0.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--hn-muted); } .hn-page .site-breadcrumb__separator { color: var(--hn-accent-ink); opacity: .55; } .hn-page .site-breadcrumb__current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hn-text); font-weight: 600; } .hn-page .site-breadcrumb a { color: var(--hn-accent-ink); font-weight: 600; } .hn-page .site-breadcrumb a:hover { text-decoration: underline; } .hn-page .site-breadcrumb span[aria-hidden="true"] { opacity: 0.45; } /* ------------------- Título de sección compartido (chunk) ----------------- */ .hn-page .section-heading { position: relative; display: grid; gap: 0.35rem; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); } .hn-page .section-heading__bg { display: none; } .hn-page .section-heading__title { font-family: var(--hn-display); text-transform: uppercase; font-size: clamp(1.75rem, 4.4vw, 2.75rem); line-height: 1.02; color: var(--hn-navy); } .hn-page .section-heading::before { content: ""; width: 34px; height: 4px; border-radius: 2px; background: var(--hn-cyan); } /* --------------------- Filtros del archivo de eventos --------------------- */ .hn-page .arch-tools { display: grid; gap: 0.85rem; grid-template-columns: 1fr; padding: clamp(1rem, 2.5vw, 1.5rem); background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); box-shadow: var(--hn-shadow); margin-bottom: clamp(1.25rem, 3vw, 2rem); } .hn-page .arch-tools label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hn-muted); margin-bottom: 0.4rem; } .hn-page .arch-tools input, .hn-page .arch-tools select, .hn-page .pf-input, .hn-page select.pf-input { width: 100%; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1.5px solid var(--hn-line); background: #fff; color: var(--hn-text); font: inherit; transition: border-color 0.2s var(--hn-ease), box-shadow 0.2s var(--hn-ease); } .hn-page .arch-tools input:focus, .hn-page .arch-tools select:focus, .hn-page .pf-input:focus { outline: none; border-color: var(--hn-cyan); box-shadow: 0 0 0 4px rgba(0, 177, 233, 0.18); } /* ------------------------ Rejillas de tarjetas ---------------------------- */ .hn-page .arch-grid, .hn-page .related-grid, .hn-page .arch-grid--related { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); } .hn-page .arch-empty { padding: 2rem; text-align: center; color: var(--hn-muted); border: 1px dashed var(--hn-line); border-radius: var(--hn-r-lg); } /* Paginación */ .hn-page .arch-pagination:empty { display: none; border: 0; padding: 0; margin: 0; } .hn-page .arch-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); } .hn-page .arch-pagination button, .hn-page .arch-pagination a { min-width: 44px; height: 44px; padding-inline: 0.9rem; border-radius: 999px; border: 1.5px solid var(--hn-line); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--hn-navy); background: #fff; transition: background 0.2s var(--hn-ease), color 0.2s var(--hn-ease), border-color 0.2s var(--hn-ease); } .hn-page .arch-pagination button:hover, .hn-page .arch-pagination a:hover { background: var(--hn-navy); border-color: var(--hn-navy); color: #fff; } .hn-page .arch-pagination [aria-current="page"], .hn-page .arch-pagination .is-active { background: var(--hn-cyan); border-color: var(--hn-cyan); color: #04283f; } .hn-page .arch-pagination [disabled] { opacity: 0.4; cursor: default; } /* ------------------------------ Nota / artículo --------------------------- */ .hn-page .note-article { display: grid; gap: clamp(1.25rem, 3vw, 2rem); } .hn-page .note-media { margin: 0; border-radius: var(--hn-r-lg); overflow: hidden; box-shadow: var(--hn-shadow); } .hn-page .note-media img { width: 100%; height: auto; } .hn-page .note-masthead { display: grid; gap: 0.6rem; } .hn-page .note-masthead__kicker, .hn-page .event-masthead__kicker, .hn-page .contact-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hn-accent-ink); } .hn-page .note-masthead__title, .hn-page .event-masthead__title { font-family: var(--hn-display); color: var(--hn-navy); font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.03; text-transform: none; } .hn-page .note-masthead__desc { color: var(--hn-muted); font-size: 1.05rem; max-width: 62ch; } .hn-page .note-columns { display: grid; gap: clamp(1.5rem, 4vw, 3rem); } .hn-page .note-body { color: var(--hn-text); font-size: 1.03rem; line-height: 1.75; max-width: 72ch; } .hn-page .note-body h2, .hn-page .note-body h3, .hn-page .legal-document h2, .hn-page .legal-document h3, .hn-page .event-content__title { font-family: var(--hn-display); color: var(--hn-navy); line-height: 1.15; margin: 1.8em 0 0.5em; text-transform: none; } .hn-page .note-body h2, .hn-page .legal-document h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); } .hn-page .note-body h3, .hn-page .legal-document h3 { font-size: 1.2rem; } .hn-page .note-body > *:first-child, .hn-page .legal-document > *:first-child, .hn-page .hn-detail__body > *:first-child, .hn-page .event-content > *:first-child, .hn-page .event-content__title { margin-top: 0; } .hn-page .note-body p, .hn-page .legal-document p, .hn-page .event-content__body p { margin-bottom: 1.1em; } .hn-page .note-body a, .hn-page .legal-document a, .hn-page .event-content__body a { color: var(--hn-accent-ink); font-weight: 600; text-decoration: underline; } .hn-page .note-body ul, .hn-page .note-body ol, .hn-page .legal-document ul, .hn-page .legal-document ol, .hn-page .event-content__body ul, .hn-page .event-content__body ol { margin: 0 0 1.2em 1.25em; list-style: revert; } .hn-page .note-body li, .hn-page .legal-document li, .hn-page .event-content__body li { margin-bottom: 0.4em; } .hn-page .note-body img, .hn-page .event-content__body img { border-radius: var(--hn-r-md); margin: 1.25em 0; } .hn-page .note-body blockquote { border-left: 4px solid var(--hn-cyan); padding: 0.35rem 0 0.35rem 1.15rem; margin: 1.5em 0; color: var(--hn-navy); font-size: 1.1rem; } .hn-page .note-sidebar { display: grid; gap: 1rem; align-content: start; } .hn-page .note-sidebar section { background: var(--hn-mist); border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); padding: clamp(1.1rem, 2.4vw, 1.6rem); display: grid; gap: 0.9rem; } .hn-page .sidebar-widget-title { font-family: var(--hn-display); text-transform: uppercase; font-size: 1.05rem; color: var(--hn-navy); letter-spacing: 0.02em; } /* -------------------------- Compartir (nota/evento) ----------------------- */ .hn-page .event-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .hn-page .event-share__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hn-muted); margin-right: 0.25rem; } .hn-page .event-share__btn { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--hn-navy); color: #fff; border: 0; transition: transform 0.2s var(--hn-ease), background 0.2s var(--hn-ease); } .hn-page .event-share__btn:hover { background: var(--hn-cyan); color: #04283f; transform: translateY(-3px); } /* ------------------------------ Evento ------------------------------------ */ .hn-page .event-masthead { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(-3.5rem, -6vw, -2rem); position: relative; z-index: 2; background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); box-shadow: var(--hn-shadow-lg); } .hn-page .event-masthead__id { display: flex; gap: 1rem; align-items: center; } .hn-page .event-masthead__icon { width: 64px; height: 64px; flex: none; border-radius: 16px; overflow: hidden; background: var(--hn-mist); display: grid; place-items: center; } .hn-page .event-masthead__icon img { width: 100%; height: 100%; object-fit: contain; } .hn-page .event-masthead__date { color: var(--hn-muted); font-weight: 600; } .hn-page .event-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; } .hn-page .event-content { background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); padding: clamp(1.25rem, 3vw, 2.25rem); line-height: 1.7; } .hn-page .event-route { display: grid; gap: 1rem; } /* Mapa Google del evento, cargado bajo demanda en un iframe. */ .hn-page .event-map { overflow: hidden; background: #fff; border: 1px solid var(--hn-line); border-radius: clamp(18px, 2vw, 26px); box-shadow: 0 12px 32px rgba(8, 29, 54, 0.08); isolation: isolate; } .hn-page .event-map__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); } .hn-page .event-map__head h2 { margin: 0.15rem 0 0; } .hn-page .event-map__link { display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; color: var(--hn-navy); font-weight: 800; text-decoration: none; } .hn-page .event-map__link:hover { color: var(--hn-cyan); } .hn-page .event-map__frame { position: relative; min-height: 320px; background: var(--hn-line); overflow: hidden; border-radius: 0 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px); } .hn-page .event-map__frame iframe { display: block; width: 100%; height: clamp(320px, 42vw, 460px); border: 0; } .hn-page .event-map__canvas { width: 100%; height: 100%; min-height: 0; } .hn-page .event-map__marker { position: relative; width: 58px; height: 66px; filter: drop-shadow(0 8px 8px rgba(4, 64, 101, 0.3)); cursor: pointer; } .hn-page .event-map__marker:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 50%; } .hn-page .event-map__marker-pin { display: grid; place-items: center; width: 52px; height: 52px; background: var(--hn-navy); border: 3px solid var(--hn-cyan); border-radius: 50% 50% 50% 10px; transform: rotate(-45deg); } .hn-page .event-map__marker-pin img { width: 29px; height: 23px; object-fit: contain; transform: rotate(45deg); } .hn-page .event-map__brand { display: flex; align-items: center; gap: 0.6rem; margin: 12px; padding: 0.65rem 0.8rem; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(4, 64, 101, 0.14); border-radius: 12px; box-shadow: 0 4px 14px rgba(8, 29, 54, 0.16); } .hn-page .event-map__brand img { display: block; width: 118px; height: auto; } .hn-page .event-map__brand span { padding-left: 0.6rem; border-left: 1px solid var(--hn-line); color: var(--hn-navy); font-size: 0.68rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.06em; } .hn-page .event-map__info { display: grid; gap: 0.55rem; width: min(280px, 68vw); padding: 0.2rem 0.15rem 0.35rem; color: var(--hn-navy); font-family: var(--hn-body); } .hn-page .event-map__info-kicker { margin: 0; color: var(--hn-cyan); font-size: 0.68rem; font-weight: 900; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; } .hn-page .event-map__info h3 { margin: 0; color: var(--hn-navy); font-family: var(--hn-display); font-size: 1.18rem; line-height: 1.08; } .hn-page .event-map__info p:not(.event-map__info-kicker) { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.45rem; margin: 0; color: #456075; font-size: 0.78rem; line-height: 1.35; } .hn-page .event-map__info p i { color: var(--hn-cyan); margin-top: 0.12rem; } .hn-page .event-map__info > a { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: max-content; margin-top: 0.15rem; padding: 0.55rem 0.75rem; background: var(--hn-navy); border-radius: 999px; color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 1; text-decoration: none; } .hn-page .event-map__info > a:hover { background: var(--hn-cyan); color: var(--hn-navy); } .hn-page .event-map__credit { margin: 0; padding: 0.55rem 1rem; color: var(--hn-muted); font-size: 0.72rem; text-align: right; } .hn-page .event-map__credit a { color: inherit; } @media (max-width: 560px) { .hn-page .event-map__head { align-items: start; flex-direction: column; } .hn-page .event-map__brand span { display: none; } .hn-page .event-map__brand img { width: 100px; } } .hn-page .event-route img { border-radius: var(--hn-r-lg); width: 100%; height: auto; } .hn-page .event-route h2, .hn-page .related-events h2 { font-family: var(--hn-display); color: var(--hn-navy); font-size: clamp(1.4rem, 3vw, 2rem); text-transform: uppercase; } /* ------------------------------- Contacto --------------------------------- */ .hn-page .contact-content { width: 100%; max-width: var(--hn-max); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--hn-pad); display: grid; gap: clamp(1.5rem, 4vw, 3rem); } /* Intro: texto + imagen */ .hn-page .hn-contact-intro { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; } .hn-page .hn-contact-intro__text { display: grid; gap: 0.6rem; } .hn-page .hn-contact-intro p { color: var(--hn-muted); max-width: 60ch; } .hn-page .hn-contact-intro__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hn-r-lg); box-shadow: var(--hn-shadow); } /* Servicios */ .hn-page .hn-contact-services { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .hn-page .hn-feature { background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); padding: clamp(1.25rem, 2.8vw, 1.85rem); display: grid; gap: 0.6rem; align-content: start; transition: transform 0.25s var(--hn-ease), box-shadow 0.25s var(--hn-ease); } .hn-page .hn-feature:hover { transform: translateY(-4px); box-shadow: var(--hn-shadow); } .hn-page .hn-feature__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(0, 177, 233, 0.12); color: var(--hn-accent-ink); font-size: 1.15rem; } .hn-page .hn-feature__title { font-family: var(--hn-display); color: var(--hn-navy); font-size: 1.2rem; text-transform: uppercase; line-height: 1.1; } .hn-page .hn-feature p { color: var(--hn-muted); font-size: 0.95rem; } /* Panel de contacto directo: UNA sola caja */ .hn-page .hn-contact-panel { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; background: var(--hn-mist); border: 1px solid var(--hn-line); border-radius: var(--hn-r-xl); padding: clamp(1.5rem, 4vw, 2.75rem); } .hn-page .hn-contact-panel__text { display: grid; gap: 0.6rem; } .hn-page .hn-contact-panel p { color: var(--hn-muted); max-width: 54ch; } .hn-page .hn-contact-panel__actions { display: grid; gap: 0.75rem; align-content: center; } .hn-page .hn-contact-action { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.25rem; border-radius: 14px; background: var(--hn-cyan); color: #04283f; font-weight: 700; font-size: 1rem; box-shadow: 0 16px 30px -18px rgba(0, 177, 233, 0.95); transition: transform 0.2s var(--hn-ease); } .hn-page .hn-contact-action:hover { transform: translateY(-3px); } .hn-page .hn-contact-action small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #04283f; opacity: 1; } .hn-page .hn-contact-action__icon { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 40, 63, 0.12); font-size: 1.25rem; } .hn-page .hn-contact-action--ghost { background: #fff; color: var(--hn-navy); border: 1.5px solid var(--hn-line); box-shadow: none; } .hn-page .hn-contact-action--ghost small { color: var(--hn-muted); opacity: 1; } .hn-page .hn-contact-action--ghost .hn-contact-action__icon { background: rgba(0, 177, 233, 0.12); color: var(--hn-accent-ink); } /* Banda de cierre */ .hn-page .hn-cta-band { display: grid; gap: 0.6rem; justify-items: center; text-align: center; padding: clamp(2rem, 5vw, 3.25rem) var(--hn-pad); border-radius: var(--hn-r-xl); background: radial-gradient(120% 90% at 85% 0%, rgba(0, 177, 233, 0.24), transparent 60%), linear-gradient(180deg, var(--hn-navy) 0%, var(--hn-navy-ink) 100%); color: #fff; } .hn-page .hn-cta-band__title { font-family: var(--hn-display); font-size: clamp(1.6rem, 4vw, 2.6rem); text-transform: uppercase; line-height: 1.05; } .hn-page .hn-cta-band p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0.6rem; } /* -------------------------------- Legales --------------------------------- */ .hn-page .legal-content { width: 100%; max-width: var(--hn-max); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--hn-pad); display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; } .hn-page .legal-document { background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); padding: clamp(1.5rem, 4vw, 3rem); max-width: none; line-height: 1.75; color: var(--hn-text); box-shadow: var(--hn-shadow); } .hn-page .legal-aside { display: grid; gap: 1rem; } /* Fecha de actualización y ancho de lectura cómodo */ .hn-page .legal-document__updated { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; margin-bottom: 1.5rem; border-radius: 999px; background: var(--hn-mist); border: 1px solid var(--hn-line); color: var(--hn-muted); font-size: 0.8rem; font-weight: 600; } .hn-page .legal-document__body { max-width: 74ch; } .hn-page .legal-document__body > *:first-child { margin-top: 0; } .hn-page .legal-document__body h2, .hn-page .legal-document__body h3 { scroll-margin-top: calc(var(--hn-header-h) + 1rem); } .hn-page .legal-document__body ul, .hn-page .legal-document__body ol { margin: 0 0 1.2em 1.25em; list-style: revert; } .hn-page .legal-document__body li { margin-bottom: 0.45em; } /* Índice del documento */ .hn-page .hn-toc { display: grid; } .hn-page .hn-toc__link { display: block; padding: 0.45rem 0 0.45rem 0.85rem; border-left: 2px solid var(--hn-line); color: var(--hn-muted); font-size: 0.9rem; line-height: 1.4; transition: color 0.2s var(--hn-ease), border-color 0.2s var(--hn-ease); } .hn-page .hn-toc__link:hover { color: var(--hn-navy); border-left-color: var(--hn-cyan); } .hn-page .hn-toc__link.is-sub { padding-left: 1.6rem; font-size: 0.85rem; } .hn-page .hn-widget--toc { max-height: min(56svh, 460px); overflow-y: auto; } .hn-page .hn-widget__cta--wa { border-color: var(--hn-cyan); color: var(--hn-accent-ink); } .hn-page .hn-widget__cta--wa:hover { background: var(--hn-cyan); border-color: var(--hn-cyan); color: #04283f; } /* Contenido legal heredado (clases preForms del editor) */ .hn-page .legal-document h1, .hn-page .legal-document .preFormsTitle-p { font-family: var(--hn-display); color: var(--hn-navy); font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.15; text-align: left; margin: 0 0 0.75rem; } .hn-page .legal-document .preForms-p, .hn-page .legal-document p { color: var(--hn-text); font-size: 1rem; line-height: 1.75; margin-bottom: 1.05em; text-align: left; } .hn-page .legal-document hr { border: 0; border-top: 1px solid var(--hn-line); margin: 1.5rem 0; width: 100%; } .hn-page .legal-document strong { color: var(--hn-navy); } .hn-page .legal-document a { color: var(--hn-accent-ink); font-weight: 600; text-decoration: underline; } .hn-page .legal-aside p { color: var(--hn-muted); font-size: 0.95rem; } .hn-page .hn-widget__link { display: block; padding: 0.45rem 0; color: var(--hn-navy); font-weight: 600; border-bottom: 1px solid var(--hn-line); } .hn-page .hn-widget__link:last-child { border-bottom: 0; } .hn-page .hn-widget__link:hover { color: var(--hn-accent-ink); } .hn-page .legal-content > .site-breadcrumb { grid-column: 1 / -1; } /* -------------------------- Preguntas frecuentes ------------------------- */ .hn-page .faq-document { padding: clamp(1.25rem, 3vw, 2rem); } .hn-page .faq-intro { padding: clamp(0.35rem, 2vw, 1rem) clamp(0.25rem, 2vw, 0.75rem) clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--hn-line); margin-bottom: clamp(1rem, 3vw, 1.5rem); } .hn-page .faq-intro h2 { margin: 0.25rem 0 0.65rem; color: var(--hn-navy); font-family: var(--hn-display); font-size: clamp(1.45rem, 3.2vw, 2.15rem); line-height: 1.08; text-transform: uppercase; } .hn-page .faq-intro p:last-child { margin-bottom: 0; color: var(--hn-muted); } .hn-page .faq-payment-cards { margin: 0 0 clamp(1.25rem, 3vw, 2rem); padding: clamp(1.15rem, 3vw, 1.65rem); border: 1px solid rgba(0, 177, 233, 0.3); border-radius: var(--hn-r-lg); background: linear-gradient(145deg, #fff 0%, var(--hn-mist) 100%); } .hn-page .faq-payment-cards h3 { margin: 0.2rem 0 0.55rem; color: var(--hn-navy); font-family: var(--hn-display); font-size: clamp(1.2rem, 2.6vw, 1.65rem); line-height: 1.15; text-transform: uppercase; } .hn-page .legal-document .faq-payment-cards > p:not(.hn-eyebrow) { margin: 0; color: var(--hn-muted); font-size: 0.95rem; line-height: 1.65; } .hn-page .faq-payment-cards__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; padding: 0; list-style: none; } .hn-page .faq-payment-card { min-width: 0; padding: 0.75rem 0.6rem 0.65rem; border: 1px solid var(--hn-line); border-radius: var(--hn-r-md); background: #fff; display: grid; place-items: center; gap: 0.35rem; box-shadow: 0 8px 20px rgba(6, 32, 51, 0.05); } .hn-page .faq-payment-card__logo { display: block; width: min(100%, 9.375rem); height: 4rem; } .hn-page .faq-payment-card span { color: var(--hn-muted); font-size: 0.78rem; font-weight: 650; text-align: center; } .hn-page .legal-document .faq-payment-cards__notice { padding-top: 0.85rem; border-top: 1px solid rgba(6, 32, 51, 0.1); font-size: 0.86rem; } .hn-page .faq-list { display: grid; gap: 0.75rem; } .hn-page .faq-item { border: 1px solid var(--hn-line); border-radius: var(--hn-r-md); background: #fff; overflow: hidden; scroll-margin-top: calc(var(--hn-header-h) + 1rem); } .hn-page .faq-item[open] { border-color: rgba(0, 177, 233, 0.48); box-shadow: 0 10px 28px rgba(6, 32, 51, 0.08); } .hn-page .faq-item summary { position: relative; display: block; padding: 1.1rem 3.25rem 1.1rem 1.15rem; color: var(--hn-navy); font-weight: 750; line-height: 1.4; cursor: pointer; list-style: none; } .hn-page .faq-item summary::-webkit-details-marker { display: none; } .hn-page .faq-item summary::after { content: "+"; position: absolute; top: 50%; right: 1.15rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center; background: var(--hn-mist); color: var(--hn-accent-ink); font-size: 1.2rem; line-height: 1; transform: translateY(-50%); } .hn-page .faq-item[open] summary::after { content: "−"; background: rgba(0, 177, 233, 0.14); } .hn-page .faq-item summary:focus-visible { outline: 2px solid var(--hn-cyan); outline-offset: -3px; } .hn-page .faq-item__answer { padding: 0 1.15rem 1.1rem; } .hn-page .legal-document .faq-item__answer p { margin: 0; color: var(--hn-muted); font-size: 0.95rem; line-height: 1.7; } @media (max-width: 620px) { .hn-page .faq-payment-cards__list { grid-template-columns: 1fr; } .hn-page .faq-payment-card { grid-template-columns: minmax(7.5rem, 9.375rem) 1fr; } } /* ----------------------- Formularios de inscripción ----------------------- */ .hn-page .pf-form { background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; } .hn-page .pf-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .hn-page .pf-label, .hn-page .pf-legend { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hn-navy); margin-bottom: 0.4rem; display: block; } .hn-page .pf-hint, .hn-page .pf-optional { color: var(--hn-muted); font-size: 0.85rem; } .hn-page .pf-req { color: #c0392b; } .hn-page .pf-error { color: #b3261e; font-size: 0.85rem; margin-top: 0.35rem; } .hn-page .pf-input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.12); } .hn-page .pf-option, .hn-page .pf-check:not(.pf-consent-choice) { display: flex; gap: 0.6rem; align-items: center; padding: 0.6rem 0.75rem; border: 1.5px solid var(--hn-line); border-radius: 12px; cursor: pointer; transition: border-color 0.2s var(--hn-ease), background 0.2s var(--hn-ease); } .hn-page .pf-option:hover, .hn-page .pf-check:hover { border-color: var(--hn-cyan); background: rgba(0, 177, 233, 0.06); } .hn-page .pf-submit { justify-self: start; padding: 1rem 2rem; border-radius: 12px; background: var(--hn-cyan); color: #04283f; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 0; box-shadow: 0 16px 34px -18px rgba(0, 177, 233, 0.95); transition: transform 0.2s var(--hn-ease), opacity 0.2s var(--hn-ease); } .hn-page .pf-submit:hover { transform: translateY(-3px); } .hn-page .pf-submit[disabled] { opacity: 0.55; transform: none; cursor: default; } .hn-page .pf-alert, .hn-page .pf-success { border-radius: var(--hn-r-md); padding: 1rem 1.15rem; border: 1px solid var(--hn-line); background: var(--hn-mist); color: var(--hn-text); } .hn-page .pf-success { border-color: rgba(0, 177, 233, 0.45); background: rgba(0, 177, 233, 0.08); } .hn-page .pf-payment-summary { background: rgba(244, 248, 250, 0.72); border: 1px solid rgba(20, 66, 91, 0.12); border-radius: 0.65rem; padding: 0.65rem 0.8rem; } .hn-page .pf-modal { border-radius: var(--hn-r-lg); border: 0; box-shadow: var(--hn-shadow-lg); max-width: min(92vw, 640px); } .hn-page .pf-modal__title { font-family: var(--hn-display); color: var(--hn-navy); } /* ------------------------- Botones genéricos del sitio -------------------- */ .hn-page .site-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.88rem; background: var(--hn-navy); color: #fff; border: 1.5px solid var(--hn-navy); transition: transform 0.2s var(--hn-ease), background 0.2s var(--hn-ease), color 0.2s var(--hn-ease); } .hn-page .site-button:hover { transform: translateY(-3px); } .hn-page .site-button--ghost { background: transparent; color: var(--hn-navy); } .hn-page .site-button--ghost:hover { background: var(--hn-navy); color: #fff; } /* -------------------------------- Checkout -------------------------------- */ /* Páginas de resultado de pago. El estado llega en data-checkout, derivado de la TV checkout_color (bg-green-600 / bg-yellow-500 / bg-red-600). */ .hn-page .checkout-page { max-width: 760px; align-content: start; } .hn-page .checkout-card { background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-xl); padding: clamp(1.75rem, 5vw, 3rem); text-align: center; display: grid; gap: 0.85rem; justify-items: center; box-shadow: var(--hn-shadow); --pf-state-ink: var(--hn-navy); --pf-state-soft: rgba(14, 60, 97, 0.1); } .hn-page .checkout-card[data-checkout*="green"] { --pf-state-ink: #157a48; --pf-state-soft: rgba(21, 122, 72, 0.12); } .hn-page .checkout-card[data-checkout*="yellow"], .hn-page .checkout-card[data-checkout*="amber"], .hn-page .checkout-card[data-checkout*="orange"] { --pf-state-ink: #8f5600; --pf-state-soft: rgba(143, 86, 0, 0.12); } .hn-page .checkout-card[data-checkout*="red"] { --pf-state-ink: #b3261e; --pf-state-soft: rgba(179, 38, 30, 0.1); } .hn-page .checkout-card__icon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; line-height: 1; background: var(--pf-state-soft); color: var(--pf-state-ink); } .hn-page .checkout-card__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pf-state-ink); } .hn-page .checkout-card h1 { font-family: var(--hn-display); color: var(--hn-navy); font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; line-height: 1.05; } .hn-page .checkout-card__body { color: var(--hn-muted); max-width: 52ch; line-height: 1.7; } .hn-page .checkout-card__body p { margin-bottom: 0.8em; } .hn-page .checkout-card__body p:last-child { margin-bottom: 0; } .hn-page .checkout-card__body strong { color: var(--hn-navy); } .hn-page .checkout-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.35rem; } .hn-page .checkout-card__help { color: var(--hn-muted); font-size: 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--hn-line); width: 100%; } .hn-page .checkout-card__help a { color: var(--hn-accent-ink); font-weight: 600; text-decoration: underline; } .hn-page .checkout-card dl { width: 100%; display: grid; gap: 0.5rem; text-align: left; background: var(--hn-mist); border-radius: var(--hn-r-md); padding: 1rem 1.15rem; } .hn-page .checkout-card dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hn-muted); } .hn-page .checkout-card dd { margin: 0 0 0.5rem; font-weight: 600; color: var(--hn-text); } /* --------------------------------- Errores -------------------------------- */ .hn-page .error-page { min-height: min(78svh, 640px); display: grid; place-items: center; text-align: center; padding: clamp(3rem, 8vw, 6rem) var(--hn-pad); background: radial-gradient(120% 90% at 70% 0%, rgba(0, 177, 233, 0.25), transparent 60%), linear-gradient(180deg, var(--hn-navy) 0%, var(--hn-navy-ink) 100%); color: #fff; } .hn-page .error-page__code { font-family: var(--hn-outline); font-size: clamp(5rem, 22vw, 12rem); line-height: 0.9; color: var(--hn-cyan); } .hn-page .error-page__title { font-family: var(--hn-display); text-transform: uppercase; font-size: clamp(1.6rem, 4.5vw, 2.8rem); margin-top: 0.5rem; } .hn-page .error-page p { color: var(--hn-muted-dark); max-width: 48ch; margin: 1rem auto 1.75rem; } .hn-page .error-page__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; } /* =================== AJUSTES DE COHERENCIA CON EL HOME ==================== */ /* Bloques sueltos de las plantillas (banner del evento, cabeceras) alineados al mismo contenedor y respiración que el resto del sitio. */ .hn-page.hn-interior > section { width: 100%; max-width: var(--hn-max); margin-inline: auto; padding-inline: var(--hn-pad); } .hn-page.hn-interior > section:has(.visual-hero), .hn-page.hn-interior > .visual-hero { max-width: none; padding-inline: 0; } /* El banner del evento adopta el radio y la sombra de las tarjetas del home */ .hn-page .event-masthead + *, .hn-page picture, .hn-page .event-masthead ~ * { min-width: 0; } .hn-page.hn-interior > section > .relative.rounded-2xl, .hn-page.hn-interior > section > div:first-child { border-radius: var(--hn-r-lg); overflow: hidden; box-shadow: var(--hn-shadow); } /* Cajas de información: mismo lenguaje que las tarjetas del home */ .hn-page .event-card, .hn-page .note-sidebar section, .hn-page .event-content, .hn-page .contact-card, .hn-page .legal-document, .hn-page .checkout-card, .hn-page .arch-tools { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; } .hn-page .event-grid > * { min-width: 0; } /* Tarjetas del archivo y de relacionados con el mismo acabado */ .hn-page .arch-card, .hn-page .related-grid > * { background: none; border: 0; border-radius: var(--hn-r-lg); } .hn-page .event-card-image { width: 100%; height: 100%; object-fit: cover; } .hn-page .event-card-image.is-fallback { object-fit: contain; padding: 18%; background: #fff; } /* Bloques de contenido sobre el fondo claro: siempre en blanco */ .hn-page .note-body, .hn-page .note-article > .event-share { background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); padding: clamp(1.25rem, 3vw, 2.25rem); max-width: none; } .hn-page .note-article > .event-share { padding-block: 1rem; } /* ============== ENCABEZADO SOBRE LA IMAGEN (archivos y contacto) ========= */ .hn-page .hn-pagehero { position: relative; width: 100%; max-width: none; margin: calc(var(--hn-header-h) * -1) 0 0; padding: 0; min-height: clamp(320px, 40vw, 480px); display: flex; align-items: flex-end; overflow: hidden; background: var(--hn-navy-ink); border-radius: 0; } .hn-page .hn-pagehero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; border-radius: 0; } .hn-page .hn-pagehero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 32, 51, 0.76) 0%, rgba(14, 60, 97, 0.34) 42%, rgba(6, 32, 51, 0.88) 100%), linear-gradient(115deg, rgba(14, 60, 97, 0.62) 0%, rgba(0, 177, 233, 0.2) 100%); } .hn-page .hn-pagehero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--hn-max); margin-inline: auto; padding: calc(var(--hn-header-h) + 3rem) var(--hn-pad) clamp(2rem, 5vw, 3.5rem); display: grid; gap: 0.75rem; color: #fff; } .hn-page .hn-pagehero__eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--hn-cyan-soft); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; } .hn-page .hn-pagehero__eyebrow::before { content: ""; width: 30px; height: 3px; border-radius: 2px; background: var(--hn-cyan); } .hn-page .hn-pagehero__title { font-family: var(--hn-display); text-transform: uppercase; font-size: clamp(2.2rem, 6.4vw, 4.4rem); line-height: 0.98; letter-spacing: -0.01em; color: #fff; } .hn-page .hn-pagehero__lede { color: rgba(255, 255, 255, 0.85); max-width: 56ch; font-size: clamp(1rem, 1.5vw, 1.15rem); } /* ================ PLANTILLA DE DETALLE (evento y nota) =================== */ /* Evento y nota comparten composición: media a sangre, encabezado sobre la imagen, cuerpo con panel lateral y bloque de relacionados. Cada uno aporta sus piezas propias (tarjeta de inscripción / próximos eventos). */ .hn-page .hn-detail { width: 100%; max-width: var(--hn-max); margin: 0 auto; padding: 0 var(--hn-pad) clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 2.6vw, 1.85rem); } .hn-page .hn-detail__media { width: 100%; max-width: 100%; margin: 0; padding: 0; border-radius: 0 0 var(--hn-r-lg) var(--hn-r-lg); overflow: hidden; background: var(--hn-navy-ink); box-shadow: none; } .hn-page .hn-detail__media img, .hn-page .hn-detail__media picture { border-radius: inherit; } /* La imagen destacada arranca pegada al menú en todos los tamaños: sin franja entre el header y el media, ni en escritorio ni en móvil. */ .hn-page .hn-detail { padding-top: 0; } .hn-page .hn-detail__media img { width: 100%; height: auto; display: block; } .hn-page .hn-detail--nota .hn-detail__media img { aspect-ratio: 16 / 9; object-fit: cover; } .hn-page .hn-detail__head { display: grid; gap: 1.25rem; background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); box-shadow: var(--hn-shadow); padding: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(-3.5rem, -5vw, -2rem); position: relative; z-index: 2; } .hn-page .hn-detail__identity { display: flex; gap: 1rem; align-items: center; min-width: 0; } .hn-page .hn-detail__avatar { width: 68px; height: 68px; flex: none; border-radius: 50%; overflow: hidden; background: var(--hn-mist); border: 1px solid var(--hn-line); display: grid; place-items: center; } .hn-page .hn-detail__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hn-page .hn-detail__kicker { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hn-accent-ink); margin-bottom: 0.35rem; } .hn-page .hn-detail__title { font-family: var(--hn-display); color: var(--hn-navy); font-size: clamp(1.7rem, 4.4vw, 2.9rem); line-height: 1.04; text-wrap: balance; } .hn-page .hn-detail__meta { color: var(--hn-muted); font-weight: 600; margin-top: 0.5rem; } .hn-page .hn-detail--nota .hn-detail__meta { font-weight: 400; font-size: 1.02rem; max-width: 62ch; } .hn-page .hn-detail__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; } .hn-page .hn-detail__body { --hn-detail-body-pad: clamp(1.25rem, 3vw, 2.25rem); background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); padding: var(--hn-detail-body-pad); min-width: 0; overflow: hidden; } .hn-page .hn-detail__extra { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.1rem, 2.5vw, 1.75rem) 0 0; border: 0; border-top: 1px solid var(--hn-line); background: none; border-radius: 0; } /* El mapa sí es una tarjeta: esta regla deliberadamente va después del estilo genérico de los bloques extra para que no pierda su marco ni su recorte. */ .hn-page .hn-detail__extra.event-map { margin-top: clamp(1.5rem, 3vw, 2.25rem); margin-right: calc(-1 * var(--hn-detail-body-pad)); margin-bottom: calc(-1 * var(--hn-detail-body-pad)); margin-left: calc(-1 * var(--hn-detail-body-pad)); padding: 0; overflow: hidden; background: #fff; border: 0; border-top: 1px solid var(--hn-line); border-radius: 0 0 var(--hn-r-lg) var(--hn-r-lg); box-shadow: none; } .hn-page .hn-detail__extra.event-map .event-map__frame { width: 100%; min-height: 0; aspect-ratio: 16 / 9; } .hn-page .hn-detail__extra.event-map .event-map__frame iframe { width: 100%; height: 100%; min-height: 0; } /* Fuera de la rejilla de contenido + inscripción, el mapa ocupa la anchura completa de la ficha y recupera su tarjeta independiente. */ .hn-page .hn-detail > .hn-detail__extra.event-map { width: 100%; margin: 0; padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); box-shadow: var(--hn-shadow); } .hn-page .hn-detail > .hn-detail__extra.event-map .event-map__frame { width: 100%; height: clamp(380px, 48vw, 520px); aspect-ratio: auto; } @media (max-width: 560px) { .hn-page .hn-detail > .hn-detail__extra.event-map .event-map__frame { height: clamp(320px, 88vw, 420px); aspect-ratio: auto; } } .hn-page .hn-detail__aside { display: grid; gap: 1rem; min-width: 0; } .hn-page .hn-detail__related { margin-top: clamp(0.5rem, 2vw, 1rem); } /* Panel lateral de la nota, con el mismo acabado que la tarjeta del evento */ .hn-page .hn-sidecard { background: #fff; border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); box-shadow: var(--hn-shadow); padding: clamp(1.1rem, 2.4vw, 1.6rem); display: grid; gap: 0.9rem; } .hn-page .hn-sidecard__title { font-family: var(--hn-display); text-transform: uppercase; font-size: 1.05rem; color: var(--hn-navy); padding-bottom: 0.75rem; border-bottom: 1px solid var(--hn-line); } /* ============ TARJETA DE INSCRIPCIÓN (aside del evento) ================== */ /* Tarjeta clara, como el resto del contenido: el navy y el cian se reservan para acentos (chips, iconos, botón), no para el fondo. */ .hn-page .event-card { background: #fff; color: var(--hn-text); border: 1px solid var(--hn-line); border-radius: var(--hn-r-lg); box-shadow: var(--hn-shadow); overflow: hidden; isolation: isolate; padding: 0; gap: 0; display: grid; align-content: start; } /* El primer y último bloque heredan el radio de la tarjeta: sin ellos, los fondos propios (cabecera en mist, pie en blanco) pisan las esquinas. */ .hn-page .event-card > *:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .hn-page .event-card > *:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .hn-page .event-card > * { padding-inline: clamp(1.1rem, 2.4vw, 1.5rem); } .hn-page .event-card__head { display: flex; align-items: center; gap: 0.9rem; background: var(--hn-mist); border-bottom: 1px solid var(--hn-line); color: var(--hn-navy); padding-block: clamp(1.1rem, 2.4vw, 1.4rem); margin: 0; } .hn-page .event-card__icon { width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--hn-line); } .hn-page .event-card__icon img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hn-page .event-card__id { display: grid; gap: 0.35rem; min-width: 0; } .hn-page .event-card__id h2 { font-family: var(--hn-display); font-size: 1.05rem; line-height: 1.15; color: var(--hn-navy); text-transform: none; } .hn-page .event-discipline { display: inline-flex; align-items: center; gap: 0.4rem; align-self: start; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(0, 177, 233, 0.14); color: var(--hn-accent-ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .hn-page .event-card__place { display: flex; align-items: center; gap: 0.4rem; color: var(--hn-muted); font-size: 0.88rem; } .hn-page .event-card__place i { color: var(--hn-accent-ink); } /* site.css inseta este bloque (margin: 0 1.35rem) y le pone filetes propios, pensados para la tarjeta anterior. Aquí los separadores los ponen `__head` y `__actions`, y deben cruzar la tarjeta completa. */ .hn-page .event-card__meta { margin: 0; border: 0; padding-block: 1.25rem; } .hn-page .event-meta-list { display: grid; gap: 1.15rem; } .hn-page .event-data-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0.85rem; align-items: start; } .hn-page .event-data-row__fa { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 177, 233, 0.12); color: var(--hn-accent-ink); font-size: 0.95rem; } .hn-page .event-data-row__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hn-muted); margin-bottom: 0.2rem; } .hn-page .event-data-row__value { color: var(--hn-navy); font-size: 1.02rem; font-weight: 700; line-height: 1.35; } .hn-page .event-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; } .hn-page .event-pill { display: inline-flex; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--hn-mist); border: 1px solid var(--hn-line); color: var(--hn-navy); font-size: 0.8rem; font-weight: 700; } /* Precio: banda de acento sobre fondo claro */ .hn-page .event-card__price-banner { position: relative; background: linear-gradient(120deg, rgba(0, 177, 233, 0.12) 0%, rgba(14, 60, 97, 0.08) 100%); border-top: 1px solid var(--hn-line); border-bottom: 1px solid var(--hn-line); color: var(--hn-navy); padding-block: 1rem; } .hn-page .event-card__price-label { color: var(--hn-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .hn-page .event-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; font-family: var(--hn-display); color: var(--hn-navy); font-size: clamp(1.6rem, 3.4vw, 2rem); line-height: 1.1; } .hn-page .event-card__price-from { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; min-height: 1.15rem; padding: 0.12rem 0.55rem 0.12rem 0.35rem; clip-path: none; border-radius: 3px; border: 1px solid rgba(14,60,97,.15); background: rgba(255,255,255,.6); color: var(--hn-navy); font-family: var(--hn-body); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .hn-page .event-card__price-amount { white-space: nowrap; } /* Estado del evento: píldora sobre superficie clara, junto a la disciplina. site.css la pintaba en azul claro sobre una banda navy que ya no existe; aquí se define con contraste propio para no depender de aquella banda. */ .hn-page .event-card__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .hn-page .event-card__status { display: inline-flex; align-items: center; align-self: start; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid transparent; background: var(--hn-mist); color: var(--hn-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; } .hn-page .event-card__status--registrate { background: rgba(0, 177, 233, 0.16); border-color: rgba(0, 177, 233, 0.45); color: #04283f; } .hn-page .event-card__status--proximamente { background: rgba(14, 60, 97, 0.08); border-color: rgba(14, 60, 97, 0.22); color: var(--hn-navy); } .hn-page .event-card__status--finalizado, .hn-page .event-card__status--cerrado, .hn-page .event-card__status--agotado { background: var(--hn-mist); border-color: var(--hn-line); color: var(--hn-muted); } /* Lista "Incluye": vive dentro de una fila de datos, con el mismo tono que los valores del resto de la tarjeta. */ .hn-page .event-includes { margin: 0.15rem 0 0; padding-left: 1.1rem; list-style: disc outside; color: var(--hn-text); font-size: 0.95rem; line-height: 1.5; } .hn-page .event-includes li { margin: 0.2rem 0; } .hn-page .event-includes__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hn-muted); margin-bottom: 0.2rem; } /* Apartado editorial después del detalle: «Incluye» ya no vive dentro de la tarjeta de registro ni compite visualmente con su CTA. */ .hn-page .event-includes-section { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; margin-top: clamp(1.4rem, 3vw, 2rem); padding: clamp(1rem, 2.5vw, 1.4rem); border: 1px solid var(--hn-line); border-radius: 16px; background: linear-gradient(135deg, #fff 0%, rgba(0, 177, 233, 0.07) 100%); } .hn-page .event-includes-section__icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 12px; background: var(--hn-navy); color: #fff; } .hn-page .event-includes-section__eyebrow { margin: 0 0 0.15rem; color: var(--hn-accent-ink); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .hn-page .event-includes-section h2 { margin: 0; color: var(--hn-navy); font-family: var(--hn-display); font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.2; } .hn-page .event-includes-section ul { display: grid; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; list-style: none; } .hn-page .event-includes-section li { position: relative; padding-left: 1rem; color: var(--hn-text); line-height: 1.5; } .hn-page .event-includes-section li::before { position: absolute; top: 0.56em; left: 0; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--hn-cyan); content: ''; } @media (min-width: 720px) { .hn-page .event-includes-section ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; } } /* Chips heredados de site.css: si algún contenido antiguo los trae, se alinean con la paleta del cromo nuevo en lugar de la legacy. */ .hn-page .event-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .hn-page .portalia-chip { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--hn-line); background: var(--hn-mist); color: var(--hn-navy); font-size: 0.85rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .hn-page .portalia-chip--solid { background: var(--hn-navy); border-color: var(--hn-navy); color: #fff; } .hn-page .portalia-chip--accent { background: rgba(0, 177, 233, 0.14); border-color: rgba(0, 177, 233, 0.4); color: var(--hn-accent-ink); } .hn-page .event-card__actions { display: grid; gap: 0.6rem; border-top: 1px solid var(--hn-line); padding-block: clamp(1.1rem, 2.4vw, 1.4rem); background: #fff; } .hn-page .event-card__note { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0; color: var(--hn-muted); font-size: 0.86rem; line-height: 1.4; text-align: center; } .hn-page .event-card__note i { color: var(--hn-accent-ink); } .hn-page .portalia-event-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 1rem 1.5rem; border: 0; border-radius: 12px; background: var(--hn-navy); color: #fff; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; cursor: pointer; transition: transform 0.2s var(--hn-ease), background 0.2s var(--hn-ease); } .hn-page .portalia-event-cta:hover { transform: translateY(-2px); } .hn-page .portalia-event-cta--register { background: var(--hn-cyan); color: #04283f; box-shadow: 0 16px 30px -16px rgba(0, 177, 233, 0.9); } /* Estados no accionables. `estadoEvento` los emite como

, no como