/* ========================================================================== Sistema visual (ver DESIGN.md). Claro, con la foto de la ciudad como protagonista y un color saturado por ciudad (--city*) que se define en el desde data//ciudad.json. Anadir una ciudad no toca este archivo. ========================================================================== */ /* Fuentes propias, servidas desde assets/fonts/ (nada sale a Google). Cada archivo es variable: una sola descarga cubre todo el rango de peso. */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/geist.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/geist-mono.woff2") format("woff2"); } :root { color-scheme: light; --paper: #f7f9f8; --paper-2: #ffffff; --paper-3: #eaf0ec; --ink: #0e1c17; --ink-2: #3f524a; --ink-3: #5b6c64; --line: #dce5e0; --line-2: #c3d0ca; /* Se sobrescriben en con el color de cada ciudad. */ --city: #0e1c17; --city-deep: #0e1c17; --city-tint: #eaf0ec; --warn: #8a4b12; --warn-bg: #fbefdc; --stop: #a32d2d; --stop-bg: #fce9e9; --r: 16px; --r-s: 12px; --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace; --wrap: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); --col: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter))); --ease: cubic-bezier(0.16, 1, 0.3, 1); } @view-transition { navigation: auto; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; margin: 0; } p { margin: 0; text-wrap: pretty; } a { color: inherit; } img { max-width: 100%; display: block; } dl, dd { margin: 0; } ul, ol { margin: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .ico { width: 1.15em; height: 1.15em; flex: none; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 0.75rem 1rem; z-index: 100; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--city-deep); outline-offset: 3px; border-radius: 4px; } .num { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; } /* ------------------------------------------------------------------ nav --- */ .nav { position: sticky; top: 10px; z-index: 40; display: flex; align-items: center; gap: 0.75rem; width: var(--col); margin: 10px auto 0; padding: 0.5rem 0.55rem 0.5rem 1rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); } .nav__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-right: auto; } .nav__links { display: flex; gap: 0.15rem; flex: none; } .nav__links a { padding: 0.5rem 0.7rem; border-radius: var(--r-s); text-decoration: none; color: var(--ink-2); font-size: 0.9rem; font-weight: 500; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .nav__links a:hover { background: var(--paper-3); color: var(--ink); } .nav__links a[aria-current="page"] { background: var(--paper-3); color: var(--ink); } .nav__search { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.4rem 0.9rem; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: border-color 0.2s var(--ease); } .nav__search:hover { border-color: var(--ink-3); } @media (max-width: 560px) { .nav { gap: 0.35rem; padding-left: 0.85rem; } .nav__links a { padding: 0.5rem 0.5rem; font-size: 0.85rem; } .nav__search span { display: none; } .nav__search { padding: 0.4rem 0.65rem; } } .nav--privada { justify-content: center; } .nav--privada .nav__brand { margin: 0; } /* ----------------------------------------------------------------- hero --- */ .hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; width: var(--col); min-height: clamp(440px, 72dvh, 680px); margin: 12px auto 0; border-radius: var(--r); overflow: hidden; color: #fff; background: var(--city-deep); } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--city-deep) 92%, transparent) 0%, color-mix(in srgb, var(--city-deep) 45%, transparent) 42%, rgba(0, 0, 0, 0.12) 100%); } .hero--plano { min-height: clamp(260px, 38dvh, 380px); background: linear-gradient(135deg, var(--city), var(--city-deep)); } .hero--plano::after { display: none; } .hero__body { width: 100%; padding: clamp(1.25rem, 4vw, 3rem); display: grid; gap: 1rem; justify-items: start; } .hero__title { font-size: clamp(2.3rem, 6.4vw, 4.75rem); letter-spacing: -0.03em; max-width: 16ch; } .hero__sub { font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 44ch; color: color-mix(in srgb, #fff 90%, var(--city-deep)); } .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .chips li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.85rem; font-weight: 500; } .hero__credit { position: absolute; top: 12px; right: 12px; max-width: 72%; padding: 0.25rem 0.6rem; border-radius: var(--r-s); background: rgba(0, 0, 0, 0.6); font-size: 0.6875rem; line-height: 1.4; color: #fff; } .hero__credit a { color: inherit; } /* Un solo momento orquestado: la foto se asienta y el texto sube. */ @media (prefers-reduced-motion: no-preference) { .hero__img { animation: asentar 1.4s var(--ease) both; } .hero__body > * { animation: subir 0.8s var(--ease) both; } .hero__body > :nth-child(2) { animation-delay: 0.08s; } .hero__body > :nth-child(3) { animation-delay: 0.16s; } .hero__body > :nth-child(4) { animation-delay: 0.24s; } } @keyframes asentar { from { transform: scale(1.08); } to { transform: none; } } @keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------- botones --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.65rem 1.15rem; border: 1px solid transparent; border-radius: var(--r-s); background: var(--city); color: #fff; font: inherit; font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: transform 0.15s var(--ease), background-color 0.2s var(--ease); } .btn:hover { background: var(--city-deep); } .btn:active { transform: translateY(1px) scale(0.985); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn--ghost:hover { background: var(--paper-3); } .btn--claro { background: var(--city-deep); } .btn--claro:hover { background: var(--ink); } .hero .btn { background: #fff; color: var(--ink); } .hero .btn:hover { background: var(--city-tint); } .btn--grande { min-height: 52px; padding: 0.8rem 1.4rem; font-size: 1.02rem; } .pill { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; padding: 0.12rem 0.6rem; background: var(--paper-2); color: var(--ink-2); font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; } .pill--star { background: var(--city); border-color: var(--city); color: #fff; } .pill--dev { background: var(--warn-bg); border-color: transparent; color: var(--warn); } .stamp { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 999px; } .stamp--vale { background: var(--city-tint); color: var(--city-deep); } .stamp--sobra { background: var(--paper-3); color: var(--ink-2); } .stamp--salta { background: var(--stop-bg); color: var(--stop); } /* ------------------------------------------------------------- secciones --- */ .sec { padding-block: clamp(2.75rem, 6vw, 4.5rem); } .sec--abre { padding-bottom: 0; } .sec--abre .sec__head { margin-bottom: 0; } .sec[id], .grupo[id] { scroll-margin-top: 132px; } .sec__head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .sec__title { font-size: clamp(1.65rem, 3.4vw, 2.5rem); } .sec__lede { margin-top: 0.75rem; color: var(--ink-2); } .aparte { margin-top: 1.5rem; } .subtitulo { font-size: 1.3rem; margin: 2.5rem 0 1rem; } /* ----------------------------------------------- tiras de categorias (fotos) --- */ .tiles-wrap { padding-top: 1.25rem; } .tiles { list-style: none; display: flex; gap: 12px; overflow-x: auto; max-width: var(--wrap); margin-inline: auto; padding: 0.25rem var(--gutter) 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; } .tiles::-webkit-scrollbar { display: none; } .tile { position: relative; isolation: isolate; display: block; width: 210px; height: 280px; border-radius: var(--r); overflow: hidden; scroll-snap-align: start; color: #fff; background: var(--city-deep); text-decoration: none; } .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s var(--ease); } .tile:hover img { transform: scale(1.06); } .tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--city-deep) 90%, transparent) 0%, transparent 62%); } .tile__ico { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--city-deep); display: grid; place-items: center; font-size: 1.25rem; } .tile__body { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; } .tile__body strong { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.1; letter-spacing: -0.015em; } .tile__body span { font-size: 0.8rem; color: color-mix(in srgb, #fff 85%, var(--city-deep)); } .tile--sin-foto { background: var(--city-tint); color: var(--city-deep); } .tile--sin-foto::after { display: none; } .tile--sin-foto .tile__ico { background: var(--city); color: #fff; } .tile--sin-foto .tile__body span { color: var(--ink-2); } /* ------------------------------------------------- para orientarte / datos --- */ .orient { padding-block: clamp(2.75rem, 6vw, 4.5rem); } .orient__grid { display: grid; gap: 2.5rem 4rem; } @media (min-width: 900px) { .orient__grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; } } .lede-big { font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.35; letter-spacing: -0.01em; font-weight: 500; margin-top: 1rem; max-width: 44ch; } .lede-big--corto { margin-top: 0; max-width: 62ch; } .facts > div { padding: 0.95rem 0; border-top: 1px solid var(--line); } .facts > div:first-child { border-top-color: var(--ink); } .facts dt { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; } .facts dt .ico { color: var(--city); } .facts dd { margin: 0.25rem 0 0 1.7rem; color: var(--ink-2); } @media (min-width: 800px) { .facts--ancho { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; } .facts--ancho > div:nth-child(2) { border-top-color: var(--ink); } } /* ---------------------------------------------------------------- filtros --- */ .ctx { position: sticky; top: 74px; z-index: 30; padding: 0.6rem 0; background: color-mix(in srgb, var(--paper) 96%, transparent); border-block: 1px solid var(--line); } .ctx__row { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); scrollbar-width: none; } .ctx__row::-webkit-scrollbar { display: none; } .ctx__label { font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; padding-right: 0.25rem; } .ctx__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0.35rem 0.95rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font: inherit; font-size: 0.875rem; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .ctx__btn:hover { border-color: var(--ink-3); color: var(--ink); } .ctx__btn[aria-pressed="true"] { background: var(--city); border-color: var(--city); color: #fff; } .ctx__count { margin-left: auto; padding-left: 0.75rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; } /* -------------------------------------------- lugares: filas con reglas --- */ .grupo { padding-block: clamp(1.75rem, 4vw, 2.75rem); } .grupo[hidden] { display: none; } .grupo__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.9rem; } .grupo__title { display: flex; align-items: center; gap: 0.6rem; font-size: clamp(1.4rem, 2.8vw, 2rem); } .grupo__title .ico { color: var(--city); } .grupo__n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.05rem 0.55rem; } .grupo__lede { flex-basis: 100%; color: var(--ink-2); } .grupo--sub .grupo__title { font-size: 1.25rem; } .entries { border-top: 1px solid var(--ink); } .entry { display: grid; gap: 0.7rem 2.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 140px; } .entry[hidden] { display: none; } @media (min-width: 840px) { .entry { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .entry__meta { grid-column: 2; grid-row: 1 / span 2; } .entry__go { grid-column: 1; } .entry:not(:has(.entry__meta)) .entry__main { grid-column: 1 / -1; } } .entry--star { background: var(--city-tint); margin-inline: -1rem; padding-inline: 1rem; border-radius: var(--r-s); border-bottom-color: transparent; } .entry__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.015em; } .entry__text { margin-top: 0.35rem; color: var(--ink-2); max-width: 62ch; } .entry__note { margin-top: 0.35rem; color: var(--ink-3); font-size: 0.9375rem; max-width: 62ch; } .entry__warn { display: flex; gap: 0.55rem; margin-top: 0.6rem; padding: 0.6rem 0.8rem; background: var(--warn-bg); color: var(--warn); border-radius: var(--r-s); font-size: 0.9rem; } .entry__warn .ico { margin-top: 0.15rem; } .entry__meta { display: grid; gap: 0.55rem; align-content: start; font-size: 0.9rem; } .entry__meta > div { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.75rem; align-items: baseline; } .entry__meta dt { font-size: 0.8rem; color: var(--ink-3); } .entry__meta dd .num, .entry__meta .num { font-size: 0.82rem; } .entry__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; } .enlace { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 32px; color: var(--city-deep); font-size: 0.9rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .enlace:hover { text-decoration-thickness: 2px; } /* ---------------------------------------------- tablero de precios (firma) --- */ .board { background: var(--city-deep); color: #fff; padding-block: clamp(3rem, 7vw, 5rem); } .board__head { max-width: 58ch; } .board__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); color: #fff; } .board__lede { margin-top: 0.75rem; color: color-mix(in srgb, #fff 80%, var(--city-deep)); } .board__rows { display: grid; gap: 0 3rem; margin-top: 2rem; } @media (min-width: 800px) { .board__rows { grid-template-columns: 1fr 1fr; } } .board__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); } .board__rows dt { color: rgba(255, 255, 255, 0.95); } .board__rows dd { font-family: var(--font-mono); font-size: clamp(0.95rem, 1.8vw, 1.15rem); font-weight: 500; color: var(--city-tint); text-align: right; max-width: 50%; } /* --------------------------------------------- avisos, trucos, filas de datos --- */ .warns { display: grid; gap: 12px; } @media (min-width: 800px) { .warns { grid-template-columns: 1fr 1fr; } } .warn { display: flex; gap: 0.9rem; padding: 1.1rem 1.2rem; background: var(--warn-bg); border-radius: var(--r); } .warn .ico { flex: none; width: 1.5rem; height: 1.5rem; color: var(--warn); margin-top: 0.1rem; } .warn h3 { font-size: 1.05rem; } .warn p { margin-top: 0.3rem; color: var(--ink-2); } .bits { display: grid; gap: 0 3rem; } @media (min-width: 800px) { .bits { grid-template-columns: 1fr 1fr; } } .bits--aparte { margin-top: 2rem; } .bit { padding: 1.1rem 0; border-top: 1px solid var(--line); } .bits > .bit:first-child, .bits > .bit:nth-child(2) { border-top-color: var(--ink); } @media (max-width: 799px) { .bits > .bit:nth-child(2) { border-top-color: var(--line); } } .bit h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; } .bit p { margin-top: 0.3rem; color: var(--ink-2); } .lista { margin-top: 0.5rem; padding-left: 1.15rem; display: grid; gap: 0.4rem; color: var(--ink-2); } .ruled { border-top: 1px solid var(--ink); } .ruled__row { display: grid; gap: 0.5rem 2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); } @media (min-width: 700px) { .ruled__row { grid-template-columns: 1fr auto; align-items: baseline; } } .ruled__row h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; } .ruled__row p { color: var(--ink-2); margin-top: 0.2rem; max-width: 62ch; } .ruled__row .num { color: var(--ink); margin: 0; } .duo { display: flex; gap: 1.75rem; } .duo dt { font-size: 0.8rem; color: var(--ink-3); } .dias { display: grid; gap: 2rem 3rem; } @media (min-width: 800px) { .dias { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } .dia { border-top: 1px solid var(--ink); padding-top: 1rem; } .dia h3 { font-size: 1.25rem; } .dia ol { list-style: none; padding: 0; margin-top: 0.9rem; display: grid; gap: 0.9rem; counter-reset: paso; } .dia li { counter-increment: paso; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; } .dia li::before { content: counter(paso); font-family: var(--font-mono); font-size: 0.8rem; color: var(--city); padding-top: 0.2rem; } .dia li strong { font-family: var(--font-display); font-size: 1.05rem; } .dia li span { display: block; color: var(--ink-2); font-size: 0.9rem; } /* -------------------------------------------- donde dormir y "tenemos mas" --- */ .stay { background: var(--city-tint); padding-block: clamp(3rem, 7vw, 5rem); } .stay--pagina + .stay--pagina { border-top: 1px solid var(--line); } .stay__list { list-style: none; padding: 0; border-top: 1px solid var(--city-deep); } .stay__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid color-mix(in srgb, var(--city-deep) 25%, transparent); } .stay__row h3 { font-size: 1.15rem; } .stay__row p { color: var(--ink-2); font-size: 0.9rem; margin-top: 0.15rem; } .mas { display: grid; gap: 12px; } @media (min-width: 800px) { .mas { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } .mas__tile, .city { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 260px; border-radius: var(--r); overflow: hidden; color: #fff; background: var(--city-deep); text-decoration: none; } .mas__tile img, .city img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s var(--ease); } .mas__tile:hover img, .city:hover img { transform: scale(1.05); } .mas__tile::after, .city::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--city-deep) 92%, transparent) 0%, color-mix(in srgb, var(--city-deep) 30%, transparent) 55%, transparent 100%); } .mas__body, .city__body { display: grid; gap: 0.3rem; padding: 1.25rem; max-width: 36rem; } .mas__body strong, .city__body strong { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.05; letter-spacing: -0.02em; } .mas__body span, .city__body span { color: color-mix(in srgb, #fff 88%, var(--city-deep)); } .city__body small { font-family: var(--font-mono); font-size: 0.8rem; margin-top: 0.3rem; } .mas__go { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--city-deep); display: grid; place-items: center; font-size: 1.25rem; transition: transform 0.25s var(--ease); } .mas__tile:hover .mas__go { transform: translate(2px, -2px); } .cities { display: grid; gap: 12px; } .city { min-height: clamp(320px, 44vw, 480px); } @media (min-width: 800px) { .cities { grid-template-columns: repeat(12, 1fr); } .city:nth-child(3n + 1) { grid-column: span 7; } .city:nth-child(3n + 2) { grid-column: span 5; } .city:nth-child(3n) { grid-column: span 12; } } /* --------------------------------------------------- guia privada: piezas --- */ .entradas { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5rem 0; } .entradas--linea { margin-top: 1.25rem; } .btn--dos { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.85rem 1.2rem; border-radius: var(--r); text-align: left; } .btn--dos strong { font-weight: 600; } .btn--dos span { font-size: 0.8rem; font-weight: 400; opacity: 0.9; } .videos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 1.5rem; } .video { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color 0.2s var(--ease); } .video:hover { border-color: var(--city); } .video strong { display: block; font-weight: 600; } .video span > span { display: block; color: var(--ink-2); font-size: 0.875rem; margin-top: 0.15rem; } .video__play { flex: none; position: relative; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--city-tint); } .video__play::after { content: ""; position: absolute; left: 0.9rem; top: 0.65rem; border-style: solid; border-width: 0.4rem 0 0.4rem 0.66rem; border-color: transparent transparent transparent var(--city-deep); } .galeria { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); } .galeria summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; } .galeria__grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 1rem; } .galeria figure { margin: 0; } .galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: var(--paper-3); } .galeria figcaption { margin-top: 0.3rem; font-size: 0.8rem; color: var(--ink-2); } .vacio { padding: 1.25rem; background: var(--paper-2); border: 1px dashed var(--line-2); border-radius: var(--r); } .vacio h3 { font-size: 1.1rem; } .vacio p { margin-top: 0.4rem; color: var(--ink-3); } .vacio code { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.1rem 0.4rem; background: var(--paper-3); border-radius: 6px; } .vacio__campos { display: flex; flex-wrap: wrap; gap: 0.35rem; } /* ------------------------------------------------------------- buscador --- */ .search { width: min(640px, calc(100% - 2rem)); max-height: min(72dvh, 580px); margin: 8dvh auto auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); color: var(--ink); overflow: hidden; } .search::backdrop { background: rgba(14, 28, 23, 0.5); } .search__bar { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); font-size: 1.25rem; } .search__bar input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; border: 0; outline: 0; background: transparent; color: var(--ink); } .search__close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-2); cursor: pointer; font-size: 1.2rem; } .search__close:hover { background: var(--paper-3); } .results { list-style: none; padding: 0.4rem; overflow-y: auto; max-height: 52dvh; } .results a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0.75rem; border-radius: var(--r-s); text-decoration: none; } .results a:hover, .results a:focus-visible { background: var(--paper-3); } .results strong { font-weight: 600; } .results small { color: var(--ink-3); font-size: 0.8rem; white-space: nowrap; } .search__hint { padding: 0.75rem 1.1rem 1rem; color: var(--ink-3); font-size: 0.9rem; } .search__hint:empty { display: none; } /* ----------------------------------------------------------------- pie --- */ .foot { margin-top: clamp(3rem, 7vw, 5rem); padding-block: 2.5rem 3rem; background: var(--paper-3); border-top: 1px solid var(--line); } .foot__grid { display: grid; gap: 1.75rem 3rem; } @media (min-width: 800px) { .foot__grid { grid-template-columns: 1.4fr 1fr; } } .foot__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.03em; } .foot__note { margin-top: 0.5rem; color: var(--ink-2); max-width: 48ch; } .foot__nav { display: grid; gap: 0.35rem; align-content: start; } .foot__nav a { color: var(--ink-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; } .foot__nav a:hover { color: var(--ink); text-decoration: underline; } .foot--privada p { color: var(--ink-2); max-width: 60ch; } /* ------------------------------------------------------- movimiento reducido --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Al llegar desde el buscador a un lugar (#ancla), la fila se marca un momento. */ .entry[data-llegada] { background: var(--city-tint); margin-inline: -1rem; padding-inline: 1rem; border-radius: var(--r-s); } .tiles { scroll-padding-inline: var(--gutter); }