@view-transition { navigation: auto; } :root, html[data-theme="night"] { --navy: #161c24; --navy-2: #0a0d12; --navy-3: #12171f; --cream: #ffffff; --orange: #ffffff; --muted: #9aa3ad; --line: rgba(255, 255, 255, 0.12); --ink: #05070a; --btn-ink: #000000; --radius-control: 8px; --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif; --font-body: "Montserrat", ui-sans-serif, system-ui, sans-serif; --font-ui: "Montserrat", ui-sans-serif, system-ui, sans-serif; } /* Día: 07:00–18:59 hora local del dispositivo (script en ). */ html[data-theme="day"] { color-scheme: light; --navy: #111111; --navy-2: #ffffff; --navy-3: #f3f4f6; --cream: #111111; --orange: #111111; --muted: #6b7280; --line: rgba(0, 0, 0, 0.10); --ink: #f9fafb; --btn-ink: #ffffff; } * { box-sizing: border-box; } html { scroll-behavior: auto; color-scheme: dark; } html[data-theme="day"] { color-scheme: light; } body { margin: 0; background: var(--navy-2); color: var(--cream); font-family: var(--font-body); line-height: 1.5; text-align: justify; } h1, h2, h3, h4, h5, h6, .nav6, .site-header, .when, .k, .axis-label, .tapa-title, .hdr-search, button, label, input, textarea, select, .redes, footer.site, .cookie-bar, .search-panel, .pie-cta, .nota-related-list a, .nota-related-list strong { text-align: start; hyphens: none; } button { font: inherit; cursor: pointer; color: inherit; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; object-fit: cover; object-position: var(--focal, 50% 50%); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: 12px; z-index: 1000; padding: 10px 14px; background: var(--cream); color: var(--navy-2); font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius-control); transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--cream); outline-offset: 2px; } html[data-theme="day"] .skip-link { color: #ffffff; background: #111111; outline-color: #111111; } .site-header { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px clamp(16px, 4vw, 40px) 14px; background: var(--navy-2); view-transition-name: site-header; } .logo { width: 44px; height: 44px; flex: 0 0 auto; } .nav6 { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; position: relative; flex: 1; font-family: var(--font-ui); font-size: 14px; font-weight: 600; } .nav6 a { padding: 8px 12px; opacity: .72; transition: opacity .15s ease-out, color .15s ease-out; } .nav6 a:hover { opacity: 1; } .nav6 a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .nav6 a[aria-current="page"] { opacity: 1; color: var(--orange); } .nav6 .bar { position: absolute; bottom: 0; height: 2px; background: var(--orange); width: var(--bar-w, 48px); left: var(--bar-l, 0); transition: left .22s cubic-bezier(.5, 0, .2, 1), width .22s cubic-bezier(.5, 0, .2, 1); } .when { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-left: auto; } .hdr-search { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-family: var(--font-ui); } .hdr-search button { border: 1px solid var(--line); background: transparent; color: var(--cream); padding: 7px 12px; font-size: 12px; letter-spacing: .04em; border-radius: var(--radius-control); } .hdr-search button:hover { border-color: var(--orange); color: var(--orange); } .search-panel { position: fixed; inset: 0; z-index: 90; background: rgba(7, 11, 16, 0.72); display: grid; place-items: start center; padding: 12vh 16px 24px; } .search-panel[hidden] { display: none; } .search-box { width: min(560px, 100%); background: var(--navy-2); border: 1px solid var(--line); padding: 18px 18px 12px; } .search-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .search-box label { display: block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 0; } .search-close { border: 1px solid var(--line); background: transparent; color: var(--cream); font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-control); cursor: pointer; } .search-close:hover { border-color: var(--orange); color: var(--orange); } .search-box input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--cream); font: inherit; font-size: 1.25rem; padding: 8px 0 12px; outline: none; } .search-box input:focus { border-bottom-color: var(--orange); } .search-box input:focus-visible, .search-hits button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .search-hint, .search-empty { margin: 12px 0 4px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); } .search-hits { list-style: none; margin: 8px 0 0; padding: 0; max-height: 42vh; overflow: auto; } .search-hits button { width: 100%; text-align: left; border: 0; background: transparent; color: var(--cream); padding: 12px 0; border-bottom: 1px solid var(--line); } .search-hits button:hover { color: var(--orange); } .search-hits .k { margin-bottom: 4px; } .search-hits strong { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.2; } .k { font-family: var(--font-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); } .hero-kicker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; } .hero-kicker-row .k { margin-bottom: 0; } .entidad-pill { display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--navy-3); color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; border-radius: 4px; } .meta { font-family: var(--font-ui); font-size: 12px; color: var(--muted); } /* —— Hero 01 + 3 secundarias —— */ .top-block { background: var(--navy-2); padding: 28px clamp(16px, 4vw, 40px) 32px; max-width: 1180px; margin: 0 auto; } .hero { display: grid; grid-template-columns: 1.05fr 1.35fr; gap: clamp(18px, 3vw, 32px); align-items: start; } .hero.hero-text-lead { grid-template-columns: 1fr; max-width: 860px; margin: 0; } .hero.hero-text-lead .hero-copy { max-width: 100%; } .hero.hero-text-lead .hero-copy h1 { font-size: clamp(2.2rem, 5.2vw, 3.5rem); line-height: 0.98; margin: 14px 0 18px; text-wrap: balance; } .hero.hero-text-lead .hero-copy .dek { font-size: clamp(1.15rem, 2vw, 1.35rem); max-width: 64ch; line-height: 1.5; margin-bottom: 20px; } .hero-copy h1 { margin: 10px 0 14px; font-family: var(--font-display); font-size: clamp(1.85rem, 4.2vw, 2.85rem); line-height: .95; font-weight: 700; text-wrap: balance; } .hero-copy .dek { margin: 0 0 16px; max-width: 52ch; font-size: clamp(1.05rem, 1.8vw, 1.2rem); text-wrap: pretty; } .hero-media { position: relative; overflow: hidden; background: #000; min-height: 280px; } .hero-media-link { display: block; color: inherit; text-decoration: none; } .hero-media img { width: 100%; height: 360px; object-fit: cover; object-position: var(--focal, 50% 20%); view-transition-name: tapa-foto; } .odo-inline { display: inline-flex; gap: 0.015em; align-items: baseline; vertical-align: baseline; overflow: hidden; font-variant-numeric: tabular-nums; line-height: 1; height: 1em; } .odo-visual { display: inline-flex; gap: 0.015em; align-items: baseline; vertical-align: baseline; line-height: 1; } .odo-digit { display: inline-block; overflow: hidden; position: relative; height: 1em; width: 0.68em; /* Montserrat 700: ~0.55 cortaba los glifos */ line-height: 1; flex: 0 0 auto; } .odo-digit .reel { display: block; will-change: transform; } .odo-digit .reel span { display: block; height: 1em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; } .hero-copy h1 .odo-inline, .nota-page h1 .odo-inline { /* El h1 usa line-height < 1; el odo necesita caja completa */ line-height: 1; height: 1em; } .cta { display: inline-block; border: 0; background: var(--cream); color: var(--navy-2); padding: 12px 18px; font-family: var(--font-ui); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; border-radius: var(--radius-control); transition: transform .12s ease-out, opacity .12s ease-out; } .cta:active { transform: scale(0.97); } .cta:hover { opacity: .88; } .cta:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; } main { background: var(--navy-2); } .wrap { padding: 28px clamp(16px, 4vw, 40px) 48px; max-width: 1180px; margin: 0 auto; } /* —— Rails —— */ .rail-block { margin-bottom: 36px; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 14px; } .section-head h2 { margin: 0; font-family: var(--font-ui); font-size: 14px; letter-spacing: .06em; text-transform: none; color: var(--cream); font-weight: 600; opacity: .85; } .rail-nav { display: flex; gap: 4px; flex: 0 0 auto; } .rail-nav button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--cream); border-radius: var(--radius-control); padding: 0; opacity: .72; transition: opacity .15s ease-out, border-color .15s ease-out, color .15s ease-out; } .rail-nav button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rail-nav button:hover:not(:disabled) { opacity: 1; color: var(--orange); border-color: var(--orange); } .rail-nav button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .rail-nav button:disabled { opacity: .28; cursor: default; } .rail-wrap { position: relative; } .rail-wrap::before, .rail-wrap::after { content: ""; position: absolute; top: 0; bottom: 8px; width: 48px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .2s ease-out; } .rail-wrap::before { left: 0; background: linear-gradient(to right, var(--navy-2), transparent); } .rail-wrap::after { right: 0; background: linear-gradient(to left, var(--navy-2), transparent); } .rail-wrap[data-edge-start="1"]::before { opacity: 1; } .rail-wrap[data-edge-end="1"]::after { opacity: 1; } .rail { display: flex; gap: 14px; overflow-x: auto; cursor: grab; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; } .rail::-webkit-scrollbar { display: none; } .rail.dragging { cursor: grabbing; scroll-snap-type: none; } .rail-card { flex: 0 0 min(240px, 72vw); scroll-snap-align: start; border: 0; padding: 0; background: transparent; text-align: left; display: block; color: inherit; transition: outline-color .15s ease-out; } .rail-card img { width: 100%; height: 148px; object-fit: cover; object-position: var(--focal, 50% 50%); } .rail-card h3 { margin: 10px 0 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; font-weight: 600; } .rail-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .rail-card.is-lift { outline: 1px solid var(--orange); outline-offset: 4px; } /* —— Kiosco vertical (resto de la sección) —— */ .axis-label { margin: 0 0 6px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .vkiosk-block { padding: 8px 0 8px; } .vkiosk-frame { position: relative; height: 12rem; max-width: 640px; margin: 0 auto; } .vkiosk-frame::before, .vkiosk-frame::after { content: ""; position: absolute; left: 0; right: 0; height: 44px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; } .vkiosk-frame::before { top: 0; background: linear-gradient(var(--navy-2), transparent); } .vkiosk-frame::after { bottom: 0; background: linear-gradient(transparent, var(--navy-2)); } .vkiosk-frame[data-edge-start="1"]::before { opacity: .95; } .vkiosk-frame[data-edge-end="1"]::after { opacity: .95; } .vkiosk-chevs { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 3; } .vkiosk-chevs button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--cream); background: color-mix(in srgb, var(--navy-2) 88%, transparent); padding: 0; cursor: pointer; } .vkiosk-chevs button:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); } .vkiosk-chevs button:disabled { opacity: .28; cursor: default; } .vkiosk-chevs svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .vkiosk { height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0; padding: 3.6rem 10px 3.6rem 0; cursor: grab; touch-action: pan-y; } .vkiosk::-webkit-scrollbar { display: none; } .vkiosk.dragging { cursor: grabbing; scroll-snap-type: none; } .vrow { flex: 0 0 auto; scroll-snap-align: center; display: block; color: inherit; text-decoration: none; width: 100%; text-align: left; opacity: var(--op, 0.45); transition: opacity .18s ease-out; } .vrow.is-center { --op: 1; } .vrow-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; min-height: 3.4rem; padding: 10px 0; border-top: 1px solid var(--line); } .vrow:first-child .vrow-inner { border-top: 0; } .vrow-copy { min-width: 0; order: 1; } .vrow img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: var(--focal, 50% 50%); justify-self: stretch; order: 2; } /* Zigzag: impar foto derecha, par foto izquierda */ .vrow:nth-child(even) .vrow-copy { order: 2; } .vrow:nth-child(even) img { order: 1; } .vrow.is-no-media .vrow-inner { grid-template-columns: 1fr; } .vrow.is-no-media .vrow-copy { max-width: 100%; order: 1 !important; } .vrow h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.18; font-weight: 600; } .vrow .meta { margin: 0; } .vrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* —— Kiosk —— */ .relevante { margin: 0; padding: 28px 0 32px; background: var(--navy-2); } .relevante .inner { padding: 0 clamp(16px, 4vw, 40px); max-width: 1180px; margin: 0 auto 4px; } .relevante h2 { margin: 0; font-family: var(--font-ui); font-size: 14px; letter-spacing: .06em; text-transform: none; color: var(--cream); font-weight: 600; opacity: .85; } #kiosk { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; cursor: grab; touch-action: pan-x; padding: 28px max(28px, calc(50% - 118px)); perspective: 1200px; scroll-snap-type: x mandatory; } #kiosk::-webkit-scrollbar { display: none; } #kiosk.dragging { cursor: grabbing; scroll-snap-type: none; } .tapa { flex: 0 0 220px; height: 310px; border: 0; padding: 0; background: none; scroll-snap-align: center; display: block; color: inherit; } .tapa:focus-visible .tapa-face { outline: 2px solid var(--orange); outline-offset: 3px; } .tapa-face { width: 100%; height: 100%; background-color: #111; background-size: cover; background-repeat: no-repeat; background-position: var(--focal, 50% 50%); box-shadow: 0 22px 40px rgba(0,0,0,.5); position: relative; transform: rotateY(var(--ry, 0deg)) scale(var(--sc, .92)); transition: transform .18s ease-out; overflow: hidden; } .tapa.is-center .tapa-face { --sc: 1.06; box-shadow: 0 28px 48px rgba(0,0,0,.55); } .tapa-face::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, rgba(10, 14, 20, .92)); opacity: 0; transition: opacity .2s ease-out; pointer-events: none; } .tapa.is-center .tapa-face::after { opacity: 1; } .tapa-title { position: absolute; left: 12px; right: 12px; bottom: 14px; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; font-weight: 700; color: #f8f9fa; text-align: left; text-shadow: 0 2px 14px #000; z-index: 1; opacity: 0; transform: translateY(6px); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .2s ease-out, transform .2s ease-out; pointer-events: none; } .tapa.is-center .tapa-title { opacity: 1; transform: translateY(0); } .tapa-face.tapa-text-lead { background-color: var(--navy-3) !important; border: 1px solid var(--line); padding: 18px 16px 16px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; text-decoration: none; } .tapa-face.tapa-text-lead::after { display: none !important; } .tapa-lead-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 12px; flex-shrink: 0; } .tapa-lead-kicker { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); font-weight: 700; } .tapa-lead-entidad { font-family: var(--font-ui); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--cream) 8%, transparent); border: 1px solid var(--line); padding: 2px 6px; border-radius: 3px; font-weight: 600; max-width: 105px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tapa-lead-title { margin: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; font-weight: 700; color: var(--cream); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; text-align: left; } .tapa-lead-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: 11px; color: var(--muted); flex-shrink: 0; } .tapa-lead-cifra { font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: 12px; } /* —— Cierre: Suscríbete + redes, mismo nivel —— */ .cierre { background: var(--ink); border-top: 1px solid var(--line); } .pie-cta { max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; font-family: var(--font-ui); } .suscribir-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1 1 260px; max-width: 420px; } .suscribir-inline[hidden] { display: none; } .suscribir-inline input[type="email"] { flex: 1 1 160px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--cream); font: inherit; font-size: 0.95rem; padding: 8px 0; outline: none; } .suscribir-inline input[type="email"]:focus { border-bottom-color: var(--orange); } .suscribir-inline button[type="submit"] { border: 0; background: var(--cream); color: var(--navy-2); padding: 10px 14px; font-family: var(--font-ui); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; border-radius: var(--radius-control); } .suscribir-inline button[type="submit"]:disabled { opacity: .6; } .pie-cta .note { margin: 0; font-size: 13px; color: var(--muted); } .redes { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13px; } .redes a { display: inline-flex; align-items: center; gap: 8px; opacity: .78; transition: opacity .15s ease-out, color .15s ease-out; } .redes a:hover { opacity: 1; color: var(--orange); } .redes a:focus-visible, .legal-links a:focus-visible, .crumbs a:focus-visible, .fuente-box a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .redes a[aria-disabled="true"] { cursor: default; } .redes-soon { flex: 1 1 100%; font-size: 12px; color: var(--muted); } .redes svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; } .noscript-banner { margin: 0; padding: 16px clamp(16px, 4vw, 40px); background: var(--navy); border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: 14px; } .legal-links a { color: var(--muted); } .legal-links a:hover { color: var(--orange); } .cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--navy); border: 1px solid var(--line); font-family: var(--font-ui); font-size: 13px; box-shadow: 0 16px 40px rgba(0,0,0,.45); } .cookie-bar[hidden] { display: none !important; } .cookie-bar p { margin: 0; flex: 1 1 220px; color: var(--cream); line-height: 1.35; } .cookie-bar a { color: var(--orange); text-decoration: underline; } body.has-cookie-bar { padding-bottom: 5.5rem; } .cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; } .cookie-ok, .cookie-ghost { border: 0; padding: 10px 14px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius-control); } .hdr-search button:focus-visible, .search-close:focus-visible, .vkiosk-chevs button:focus-visible, .cookie-ok:focus-visible, .cookie-ghost:focus-visible, .suscribir-inline button:focus-visible, .suscribir-inline input:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .wrap.is-empty { display: none; } /* —— Nota indexable —— */ .nota-page { max-width: 720px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 64px; } .nota-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 20px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--font-ui); } .nota-share[hidden] { display: none !important; } .nota-share-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; } .nota-share-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; } .share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: var(--cream); font-family: var(--font-ui); font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; user-select: none; } .share-btn svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; } .share-btn:hover { background: var(--cream); color: var(--navy-2); border-color: var(--cream); } .share-btn:active { transform: scale(0.96); } .share-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; } .share-btn.is-copied { background: var(--cream); color: var(--navy-2); border-color: var(--cream); } @media (max-width: 520px) { .share-btn span:not(.share-copy-text) { display: none; } .share-btn { padding: 8px 10px; } .share-btn svg { width: 15px; height: 15px; } } .nota-page .face-img { width: 100%; height: clamp(340px, 52vh, 460px); object-fit: cover; object-position: var(--focal, 50% 20%); margin: 0 0 20px; background: #111; view-transition-name: tapa-foto; } .nota-page.is-no-media .face-img { display: none !important; } .nota-page.is-no-media .meta { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .nota-gallery { position: relative; margin: 0 0 20px; } .nota-gallery-scroller { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nota-gallery-scroller::-webkit-scrollbar { display: none; } .nota-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; } .nota-gallery .face-img { margin: 0; display: block; } .nota-gallery-slide:not(:first-child) .face-img { view-transition-name: none; } .nota-gallery-chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .nota-gallery-status { margin: 0; } .nota-gallery-prev, .nota-gallery-next { width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; color: var(--cream); border-radius: var(--radius-control); cursor: pointer; position: relative; } .nota-gallery-prev::before, .nota-gallery-next::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); } .nota-gallery-prev::before { transform: translateX(2px) rotate(45deg); } .nota-gallery-next::before { transform: translateX(-2px) rotate(-135deg); } .nota-gallery-prev:disabled, .nota-gallery-next:disabled { opacity: .35; cursor: default; } @media (prefers-reduced-motion: reduce) { .nota-gallery-scroller { scroll-behavior: auto; } } .nota-page h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.08; margin: 8px 0 12px; font-weight: 700; } .nota-page .dek { font-size: 1.15rem; color: var(--muted); margin: 0 0 16px; } .nota-page .meta { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-bottom: 24px; } .nota-body p { margin: 0 0 1.1em; hyphens: auto; -webkit-hyphens: auto; } .nota-body p.nota-en-corto { margin-top: 1.4em; padding: 14px 16px; background: var(--navy-3); border-left: 3px solid var(--accent); border-radius: 4px; font-size: 0.96em; line-height: 1.55; } .nota-body p.nota-en-corto strong { color: var(--cream); font-weight: 700; } .nota-entities { margin: 28px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 13px; color: var(--muted); } .nota-entities strong { color: var(--cream); font-weight: 600; } .nota-entities ul { margin: 8px 0 0; padding-left: 1.2em; } /* —— Evento / Cartelera D8 en Nota —— */ .evento-pill { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--cream); color: var(--ink); padding: 3px 8px; border-radius: 4px; } .evento-cartelera-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } /* —— Sticky Action Bar —— */ .evento-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 95; background: rgba(14, 22, 31, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35); transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1), opacity .32s ease; } html[data-theme="day"] .evento-sticky-bar { background: rgba(255, 255, 255, 0.96); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); } .evento-sticky-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .evento-sticky-bar.is-dismissed { display: none !important; } .evento-sticky-inner { max-width: 1120px; margin: 0 auto; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .evento-sticky-info { display: flex; align-items: center; gap: 12px; min-width: 0; } .evento-sticky-badge { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--cream); color: var(--ink); padding: 3px 7px; border-radius: 3px; flex-shrink: 0; } .evento-sticky-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .evento-sticky-title { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evento-sticky-meta { font-family: var(--font-ui); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evento-sticky-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .evento-sticky-btn-primary { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--cream); color: var(--ink); padding: 7px 12px; border-radius: 4px; text-decoration: none; transition: opacity .18s ease; } .evento-sticky-btn-primary:hover { opacity: .88; } .evento-sticky-btn-close { display: grid; place-items: center; width: 30px; height: 30px; background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); cursor: pointer; padding: 0; transition: color .18s ease, border-color .18s ease; } .evento-sticky-btn-close:hover { color: var(--cream); border-color: var(--cream); } /* —— Datos Prácticos y Programa Detallado —— */ .nota-agenda { margin: 32px 0 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--navy-3); scroll-margin-top: 24px; transition: border-color .4s ease, box-shadow .4s ease; } .nota-agenda.is-highlighted { border-color: var(--cream); box-shadow: 0 0 0 2px var(--cream); } .nota-agenda-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .nota-agenda-badge-row { display: flex; align-items: center; gap: 8px; margin: 0; } .nota-agenda-badge-row .axis-label { margin: 0; font-size: 11px; } .nota-agenda-backlink { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; } .nota-agenda-backlink:hover { color: var(--cream); text-decoration: underline; } .nota-agenda-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .nota-agenda-list h3 { margin: 0 0 10px; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--cream); } .nota-agenda-dl { display: grid; gap: 8px; margin: 0; } .nota-agenda-dl > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: 10px; align-items: baseline; } .nota-agenda-dl dt { margin: 0; font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .nota-agenda-dl dd { margin: 0; font-family: var(--font-body); font-size: 14px; color: var(--cream); text-align: start; } .nota-agenda-funciones-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .nota-agenda-funciones-list li { font-family: var(--font-body); font-size: 13.5px; line-height: 1.45; color: var(--cream); } .nota-agenda-funciones-list li strong { font-weight: 600; } .nota-agenda-sesion-tag { color: var(--muted); font-size: 12.5px; margin-left: 2px; } .nota-agenda-detalle-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); } .nota-agenda-subhead { margin: 0 0 6px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .nota-agenda-detalle-text { margin: 0; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--cream); text-align: start; text-wrap: pretty; } .nota-agenda-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .evento-hero-contact-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--cream); border: 1px solid var(--line); padding: 6px 12px; border-radius: 5px; text-decoration: none; transition: background .18s ease, color .18s ease; } .evento-hero-contact-btn:hover { background: color-mix(in srgb, var(--cream) 10%, transparent); text-decoration: underline; } .evento-link { color: var(--cream); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .evento-link:hover { opacity: .85; } @media (max-width: 600px) { .evento-sticky-inner { padding: 8px 14px; } .evento-sticky-meta { display: none; } .nota-agenda-dl > div { grid-template-columns: 1fr; gap: 2px; } .nota-agenda { padding: 16px; } } .nota-related { margin: 36px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); } .nota-related[hidden] { display: none; } .nota-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .nota-related h2 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; } .nota-related-all { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); text-decoration: none; } .nota-related-all:hover { text-decoration: underline; } .nota-related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .nota-related-list a { display: block; text-decoration: none; color: inherit; padding: 12px 0; border-bottom: 1px solid var(--line); } .nota-related-list a:hover strong { color: var(--orange); } .nota-related-list strong { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 4px 0 6px; line-height: 1.25; } .nota-related-list .meta { display: block; font-size: 13px; color: var(--muted); margin: 0; } .wrap-axis { max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } footer.site { padding: 18px clamp(16px, 4vw, 40px) 36px; background: var(--ink); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; } @media (max-width: 720px) { .when { display: none; } .hero { grid-template-columns: 1fr; } .hero-media img { height: 240px; } } /* —— Sección: reequilibrio Día / Semana / Resto (portada no cambia) —— */ body.page-seccion .top-block { padding-top: 16px; padding-bottom: 18px; } body.page-seccion .hero { gap: clamp(14px, 2.5vw, 24px); align-items: center; } body.page-seccion .hero-copy h1 { margin: 8px 0 10px; font-size: clamp(1.5rem, 3.2vw, 2.25rem); } body.page-seccion .hero-copy .dek { margin: 0 0 12px; font-size: clamp(0.98rem, 1.5vw, 1.08rem); max-width: 34ch; } body.page-seccion .hero-media { min-height: 260px; } body.page-seccion .hero-media img { height: 340px; } body.page-seccion .cta { padding: 10px 16px; } body.page-seccion .relevante { padding: 16px 0 18px; } body.page-seccion #kiosk { gap: 12px; padding: 12px max(18px, calc(50% - 94px)); } body.page-seccion .tapa { flex: 0 0 172px; height: 242px; } body.page-seccion .tapa-title { font-size: 1rem; } body.page-seccion .tapa.is-center .tapa-face { --sc: 1.04; } body.page-seccion .tapa-face { box-shadow: 0 14px 28px rgba(0,0,0,.4); } body.page-seccion .wrap { padding-top: 10px; padding-bottom: 44px; } body.page-seccion .vkiosk-block { padding: 4px 0 12px; } body.page-seccion .vkiosk-frame { height: min(22rem, 48vh); max-width: none; margin: 0; } body.page-seccion .vkiosk { padding: 5rem 8px 5rem 0; } body.page-seccion .vrow-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-height: 4.2rem; padding: 12px 0; } body.page-seccion .vrow h3 { font-size: 1.18rem; } @media (max-width: 720px) { body.page-seccion .hero-media img { height: 240px; } body.page-seccion .tapa { flex: 0 0 148px; height: 208px; } body.page-seccion #kiosk { padding: 10px max(14px, calc(50% - 80px)); } body.page-seccion .vkiosk-frame { height: min(20rem, 44vh); } } /* —— Cultura: un hero completo por vista + agenda —— */ body.page-cultura-agenda .top-block.cultura-hero-rail { max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px) 16px; position: relative; } .cultura-hero-track { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; /* Una sola columna visible: el % es del scrollport */ width: 100%; min-height: 380px; } .cultura-hero-track::-webkit-scrollbar { display: none; } .cultura-hero-track.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; } .cultura-hero-slide { box-sizing: border-box; flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 0; } body.page-cultura-agenda .cultura-hero-slide.hero { display: grid; grid-template-columns: 1.05fr 1.35fr; gap: clamp(20px, 3.5vw, 36px); align-items: center; min-height: 380px; } body.page-cultura-agenda .cultura-hero-slide.hero.hero-text-lead { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; align-content: center; } body.page-cultura-agenda .cultura-hero-slide.hero.hero-text-lead .hero-copy h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.02; margin: 12px 0 16px; } body.page-cultura-agenda .cultura-hero-slide.hero.hero-text-lead .hero-copy .dek { font-size: clamp(1.1rem, 1.8vw, 1.25rem); max-width: 58ch; margin-bottom: 20px; } body.page-cultura-agenda .cultura-hero-slide .hero-copy h1 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); line-height: 1.02; margin: 10px 0 14px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; } body.page-cultura-agenda .cultura-hero-slide .hero-copy .dek { font-size: clamp(1.02rem, 1.6vw, 1.15rem); max-width: 50ch; line-height: 1.45; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.page-cultura-agenda .cultura-hero-slide .hero-media { min-height: 340px; height: 360px; border-radius: 4px; overflow: hidden; } body.page-cultura-agenda .cultura-hero-slide .hero-media img { height: 360px; width: 100%; object-fit: cover; view-transition-name: none; } body.page-cultura-agenda .cultura-hero-slide:first-child .hero-media img { view-transition-name: tapa-foto; } .cultura-hero-chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; min-height: 28px; } .cultura-hero-dots { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cultura-hero-dot { width: 8px; height: 8px; padding: 0; border: 1px solid var(--muted); border-radius: 50%; background: transparent; cursor: pointer; } .cultura-hero-dot[aria-current="true"] { background: var(--orange); border-color: var(--orange); } .cultura-hero-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .cultura-hero-nav { display: flex; gap: 8px; align-items: center; } .cultura-hero-nav button { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 8px 12px; cursor: pointer; } .cultura-hero-nav button:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); } .cultura-hero-nav button:disabled { opacity: .35; cursor: default; } .cultura-hero-hint { margin: 0; font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } @media (max-width: 720px) { body.page-cultura-agenda .cultura-hero-slide.hero { grid-template-columns: 1fr; min-height: auto; } body.page-cultura-agenda .cultura-hero-slide .hero-media, body.page-cultura-agenda .cultura-hero-slide .hero-media img { height: 240px; min-height: 240px; } .cultura-hero-chrome { flex-wrap: wrap; } } body.page-cultura-agenda #rieles.wrap { padding-top: 20px; padding-bottom: 12px; border-top: 1px solid var(--line); margin-top: 8px; } body.page-cultura-agenda .agenda-genres { gap: 8px; margin-bottom: 28px; } body.page-cultura-agenda .agenda-genre { min-height: 72px; padding: 12px 10px; } body.page-cultura-agenda .agenda-genre-name { font-size: clamp(0.92rem, 1.6vw, 1.1rem); } .cultura-agenda { max-width: none; margin: 0; padding: 4px 0 20px; } .cultura-agenda .section-head { margin-bottom: 16px; } .cultura-agenda .section-head h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 700; } .agenda-dek { margin: 0; font-family: var(--font-ui); font-size: 13px; color: var(--muted); max-width: 52ch; } .agenda-genres { display: grid; grid-template-columns: repeat(var(--agenda-genre-cols, 5), minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; } @media (max-width: 720px) { .agenda-genres { grid-template-columns: repeat(2, 1fr); } } .agenda-genre { border: 1px solid var(--line); background: var(--navy-3); padding: 14px 12px; text-align: left; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; border-radius: var(--radius-control); transition: border-color .2s ease, opacity .2s ease; } .agenda-genre-name { font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; line-height: 1.1; } .agenda-genre-count { font-family: var(--font-ui); font-size: 12px; color: var(--muted); } .agenda-genre[aria-pressed="true"] { border-color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream); background: color-mix(in srgb, var(--cream) 10%, transparent); } .agenda-genre.is-dim { opacity: .38; } .agenda-genre:hover { border-color: var(--cream); } .agenda-genre:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; } .agenda-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px, 3vw, 28px); align-items: start; } @media (max-width: 800px) { .agenda-split { grid-template-columns: 1fr; } } .agenda-cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .agenda-cal-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; } .agenda-cal-hint { font-family: var(--font-ui); font-size: 12px; color: var(--muted); } .agenda-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .agenda-dow { font-family: var(--font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0 8px; } .agenda-day { aspect-ratio: 1; border: 1px solid transparent; background: transparent; font-family: var(--font-ui); font-size: 13px; color: var(--muted); display: grid; place-items: center; position: relative; border-radius: 4px; padding: 0; transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease; } .agenda-day.pad { visibility: hidden; pointer-events: none; } .agenda-day.has { color: var(--cream); font-weight: 600; } .agenda-day.has::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); } .agenda-day.lit { border-color: color-mix(in srgb, var(--cream) 60%, transparent); color: var(--cream); background: color-mix(in srgb, var(--cream) 12%, transparent); } .agenda-day.lit::after { background: var(--cream); } .agenda-day.today { background: var(--navy); color: var(--cream); font-weight: 700; } html[data-theme="day"] .agenda-day.today { background: var(--navy); color: #f8f9fa; } .agenda-day.selected { outline: 2px solid var(--cream); outline-offset: 1px; } .agenda-day.is-dim { opacity: .28; } .agenda-day:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; } .agenda-fichas { border-left: 1px solid var(--line); padding-left: clamp(14px, 2vw, 22px); min-height: 200px; } @media (max-width: 800px) { .agenda-fichas { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; } } .agenda-fichas-title { margin: 0 0 12px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .agenda-ficha-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .agenda-ficha { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; border-radius: 0; transition: opacity .18s ease; } .agenda-ficha:hover { opacity: .88; } .agenda-ficha:hover .agenda-ficha-t { text-decoration: underline; text-underline-offset: 3px; } .agenda-ficha:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 4px; } .agenda-ficha.is-static { cursor: default; } .agenda-ficha img, .agenda-ficha-ph { width: 112px; height: 112px; background: var(--navy); display: block; object-fit: cover; object-position: var(--focal, 50% 50%); border-radius: 6px; flex-shrink: 0; } .agenda-ficha-ph { border: 1px dashed var(--line); } .agenda-ficha-t { display: block; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; line-height: 1.25; margin: 4px 0 6px; color: var(--cream); letter-spacing: -0.01em; } .agenda-ficha-gancho { margin: 0 0 6px; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--cream); opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .agenda-ficha-copy .k { display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; } .agenda-ficha-copy .meta { display: block; font-family: var(--font-ui); font-size: 12px; line-height: 1.4; color: var(--muted); margin-bottom: 6px; } .agenda-ficha-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); font-weight: 700; text-decoration: none; } .agenda-ficha:hover .agenda-ficha-cta { text-decoration: underline; } @media (max-width: 540px) { .agenda-ficha { grid-template-columns: 88px 1fr; gap: 12px; padding: 12px 0; } .agenda-ficha img, .agenda-ficha-ph { width: 88px; height: 88px; } } .agenda-empty { margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .hero-media img, .tapa-face, .nav6 .bar, .cta, .agenda-genre, .agenda-day { transition: none !important; transform: none !important; } } .legal { max-width: 640px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px) 64px; } .legal h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 12px; } .legal h2 { font-family: var(--font-ui); font-size: 14px; letter-spacing: .06em; margin: 28px 0 10px; opacity: .9; } .legal p, .legal li { color: var(--cream); opacity: .92; hyphens: auto; -webkit-hyphens: auto; } .legal ul { padding-left: 1.2em; } .legal a { color: var(--orange); } .crumbs { font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; color: var(--muted); } .crumbs a { color: var(--orange); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .fuente-box { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin: 28px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); } .fuente-box a { color: var(--orange); } .crawl-list { padding-bottom: 32px; } .crawl-list ul { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 10px; } .crawl-list a { color: inherit; text-decoration: none; display: block; } .crawl-list a:hover strong { color: var(--orange); } .buscar-form { display: flex; gap: 8px; margin: 16px 0 28px; } .buscar-form input { flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--cream); font-family: var(--font-ui); font-size: 16px; padding: 8px 0; } .buscar-form button { font-family: var(--font-ui); background: var(--orange); color: var(--ink); border: 0; padding: 10px 14px; font-weight: 700; } footer.site .legal-links { max-width: 46rem; text-align: right; line-height: 1.6; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }