/* Portal público (inicio, blog y notas). Tokens y componentes: sancarloscomercial-design. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --color-canvas: #f5f5f5;
    --color-paper: #ffffff;
    --color-surface-alt: #fafafa;
    --color-ink: #0a0a0a;
    --color-ink-soft: #171717;
    --color-mid-gray: #737373;
    --color-hairline: #e5e5e5;
    --color-brand: #0f285a;
    --color-brand-deep: #091c43;
    --color-brand-soft: #eef3fb;
    --color-accent: #e66e1e;
    --color-accent-soft: #fff2e9;
    --color-brand-line: #cbd7ea;
    --font-geist: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius-interactive: 18px;
    --radius-card: 24px;
    --radius-nested: 10px;
    --shadow-subtle: 0 0 0 1px rgba(23, 23, 23, .05), 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --on-dark-soft: rgba(255, 255, 255, .72);
    color-scheme: light;
}

/* Identidad San Carlos Comercial: colores extraídos del logo oficial. */
.portal a:focus-visible,.portal button:focus-visible,.portal input:focus-visible,.portal textarea:focus-visible{outline-color:var(--color-brand)}
.p-top{border-top:4px solid var(--color-accent)}
.p-search{border:1px solid var(--color-brand-line);background:var(--color-brand-soft)}
.p-search:focus-within{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(15,40,90,.09);background:var(--color-paper)}
.p-search button,.p-social a{color:var(--color-brand)}
.p-social a:hover{background:var(--color-brand-soft)}
.p-nav a:hover,.p-nav a[aria-current]{color:var(--color-brand)}
.p-nav a[aria-current]{border-bottom-color:var(--color-accent)}
.btn,.portal .btn{background:var(--color-brand);color:#fff}
.btn:hover{background:var(--color-brand-deep)}
.btn.ghost,.portal .btn.ghost{background:var(--color-brand-soft);color:var(--color-brand)}
.btn.ghost:hover{background:#dfe8f6}
.btn.on-dark,.portal .btn.on-dark{background:#fff;color:var(--color-brand)}
.chip{background:var(--color-brand);color:#fff}
.chip.soft{background:var(--color-accent-soft);color:#8c3909}
.chip.light{color:var(--color-brand)}
.cat-tag,.biz .tag,.more{color:var(--color-brand)}
.label h2{position:relative;padding-left:14px}
.label h2:before{content:"";position:absolute;left:0;top:.15em;width:4px;height:1em;border-radius:6px;background:var(--color-accent)}
.label a:not(.btn):hover{color:var(--color-brand)}
.box.news,.band,.p-footer,.lp-final{background:var(--color-brand)}
.band .thumb{background:var(--color-brand-deep)}
.cta{border:1px solid var(--color-brand-line);border-left:5px solid var(--color-accent);background:var(--color-brand-soft)}
.zones button[aria-pressed=true],.zone-link[aria-current],#pager button[aria-current=page],#pager a[aria-current=page]{background:var(--color-brand);color:#fff}
.dir-card.is-featured,.lp-box-strong{border-color:var(--color-brand);box-shadow:0 0 0 1px var(--color-brand),0 8px 24px rgba(15,40,90,.08)}
.dir-logo-fallback,.avatar,.lp-step-n,.lp-mock-btn,.sform button{background:var(--color-brand);color:#fff}
.stars,.lp-feature svg{color:var(--color-accent);stroke:var(--color-accent)}
.store-perk{border-color:var(--color-brand);background:var(--color-brand)}
.review-form input:focus,.review-form select:focus,.review-form textarea:focus,.reply input:focus,.reply textarea:focus,.dir-filters input:focus,.dir-filters select:focus{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(15,40,90,.09)}
.plan-card:has(input:checked){border-color:var(--color-brand);box-shadow:0 0 0 1px var(--color-brand)}
.review-form .plan-card input[type=radio],.review-form .check-row input{accent-color:var(--color-brand)}
.lp-price b,.pr-price strong{color:var(--color-brand)}
.lp-plan:first-child{border-top:4px solid var(--color-accent)}
.lp-plan:last-child{border-top:4px solid var(--color-brand)}
.p-drop-btn:hover,.p-drop.is-open .p-drop-btn,.p-drop-btn[aria-current]{color:var(--color-brand)}
.p-drop-btn[aria-current]{border-bottom-color:var(--color-accent)}
.p-drop-menu a:hover,.p-drop-menu a[aria-current]{background:var(--color-brand-soft);color:var(--color-brand)}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-paper); scroll-behavior: smooth; }

body.portal {
    margin: 0;
    min-width: 320px;
    background: var(--color-paper);
    color: var(--color-ink-soft);
    font-family: var(--font-geist);
    font-size: 14px;
    line-height: 1.5;
    font-feature-settings: "ss01" on, "cv11" on;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.portal a { color: inherit; text-decoration: none; }
.portal button, .portal input, .portal textarea { font: inherit; }
.portal a:focus-visible, .portal button:focus-visible, .portal input:focus-visible, .portal textarea:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.portal h1, .portal h2, .portal h3, .portal h4 { margin: 0; color: var(--color-ink); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }

/* Fondo muy sutil alterno en Inicio, para separar secciones sin competir con las tarjetas de color. */
#secciones, #tiendas, #directorio, #alojamiento { background: var(--color-canvas); padding-block: 40px; }
.portal section { padding-top: 56px; }

/* ---------- Cabecera ---------- */
.p-top { background: var(--color-paper); border-bottom: 1px solid var(--color-hairline); }
.p-top .wrap { min-height: 72px; padding-block: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.p-logo img { height: 40px; width: auto; display: block; }
.spacer { flex: 1; }

.p-search {
    width: min(320px, 100%);
    height: 40px;
    padding: 0 6px 0 16px;
    border-radius: var(--radius-interactive);
    display: flex;
    align-items: center;
    background: var(--color-canvas);
}
.p-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--color-ink); font-size: 14px; }
.p-search input::placeholder { color: var(--color-mid-gray); }
.p-search button { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--color-ink); display: grid; place-items: center; cursor: pointer; }

.p-social { display: flex; gap: 4px; }
.p-social a { width: 36px; height: 36px; border-radius: var(--radius-interactive); display: grid; place-items: center; color: var(--color-ink); }
.p-social a:hover { background: var(--color-canvas); }

.p-actions { display: flex; align-items: center; gap: 8px; }

.p-nav { background: var(--color-paper); border-bottom: 1px solid var(--color-hairline); }
.p-nav .wrap { min-height: 48px; display: flex; align-items: center; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.p-nav a { padding-block: 13px; color: var(--color-mid-gray); font-size: 14px; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; }
.p-nav a:hover { color: var(--color-ink); }
.p-nav a[aria-current] { color: var(--color-ink); border-bottom-color: var(--color-ink); }

/* ---------- Botones y etiquetas ---------- */
.btn {
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius-interactive);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-ink);
    color: var(--color-surface-alt);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.btn:hover { background: var(--color-ink-soft); }
.portal .btn { color: var(--color-surface-alt); }
.btn.ghost, .portal .btn.ghost { background: var(--color-canvas); color: var(--color-ink); }
.btn.ghost:hover { background: var(--color-hairline); }
.btn.on-dark, .portal .btn.on-dark { background: var(--color-paper); color: var(--color-ink); }
.btn.on-dark:hover { background: var(--color-canvas); }
.btn.small { min-height: 36px; padding: 6px 14px; font-size: 13px; }

.chip { display: inline-block; padding: 2px 10px; border-radius: 18px; background: var(--color-ink-soft); color: var(--color-surface-alt); font-size: 12px; font-weight: 500; }
.chip.soft { background: var(--color-canvas); color: var(--color-ink-soft); }
.chip.light { background: rgba(255, 255, 255, .92); color: var(--color-ink); }

.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.meta.left { justify-content: flex-start; color: var(--color-mid-gray); }
.date { color: var(--color-mid-gray); font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.cat-tag { color: var(--color-ink); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Ilustraciones (marcadores de posición monocromos) ---------- */
.art { position: absolute; inset: 0; overflow: hidden; }
.art svg { width: 100%; height: 100%; display: block; }

/* ---------- Encabezado de sección ---------- */
.label { margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
.label h2 { font-size: 24px; white-space: nowrap; }
.label i { flex: 1; height: 1px; background: var(--color-hairline); }
.label a:not(.btn) { color: var(--color-mid-gray); font-size: 13px; font-weight: 500; white-space: nowrap; }
.label a:not(.btn):hover { color: var(--color-ink); }

/* ---------- Hero ---------- */
.hero { padding-top: 24px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel {
    position: relative;
    min-height: 440px;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    color: #fff;
}
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 10, .45); }
.panel .art { z-index: -2; transition: transform .8s ease; }
.panel:hover .art { transform: scale(1.04); }
.panel-in { max-width: 620px; padding: 0 clamp(20px, 5vw, 48px) 36px; }
.portal .panel h2 { margin-block: 14px; color: #fff; font-size: clamp(22px, 2.6vw, 30px); }

/* ---------- Tarjetas y listas ---------- */
.card { position: relative; }
.thumb { position: relative; overflow: hidden; background: var(--color-canvas); isolation: isolate; }
.thumb .art { transition: transform .6s ease; }
.card:hover .thumb .art { transform: scale(1.05); }
.thumb .chip { position: absolute; z-index: 2; left: 12px; top: 12px; }
.card h3 { margin-block: 8px; font-size: 18px; }
.card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.spot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.big-stack { display: flex; flex-direction: column; gap: 24px; }
.spot .big .thumb { aspect-ratio: 4 / 3.3; border-radius: var(--radius-card); }
.portal .spot .big h3 { margin-block: 14px 8px; font-size: clamp(20px, 2.2vw, 26px); }
.spot .big p { margin: 0 0 12px; color: var(--color-mid-gray); }

.list { display: flex; flex-direction: column; gap: 16px; }
.row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; }
.row .thumb { aspect-ratio: 1; border-radius: var(--radius-nested); }
.portal .row h3 { margin-block: 2px 4px; font-size: 15px; }
.list.divided .row { padding-bottom: 16px; border-bottom: 1px solid var(--color-hairline); }
.list.divided .row:last-child { padding: 0; border: 0; }

.side { display: flex; flex-direction: column; gap: 24px; }
.box { padding: 20px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-subtle); }
.box h4 { margin-bottom: 14px; font-size: 18px; }
.follow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.follow a { padding: 10px 14px; border-radius: var(--radius-interactive); display: flex; justify-content: space-between; gap: 8px; background: var(--color-canvas); font-size: 13px; font-weight: 500; }
.follow a:hover { background: var(--color-hairline); }
.follow b { color: var(--color-mid-gray); font-weight: 500; }

.box.news { border-color: var(--color-ink-soft); background: var(--color-ink-soft); }
.box.news h4 { color: #fff; }
.box.news p { margin: 0 0 14px; color: var(--on-dark-soft); }
.box.news input, .nl input { width: 100%; height: 44px; margin-bottom: 10px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-interactive); background: rgba(255, 255, 255, .08); color: #fff; }
.box.news input::placeholder, .nl input::placeholder { color: var(--on-dark-soft); }
.box.news button, .nl button { width: 100%; }
.ok { min-height: 1.4em; margin-top: 10px; font-size: 13px; color: #fff; }

.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid4 .thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid3 .thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }

/* ---------- Secciones (categorías) ---------- */
.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cat { position: relative; aspect-ratio: 1; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; display: grid; place-items: end center; }
.cat .art { z-index: -1; transition: transform .6s ease; }
.cat:hover .art { transform: scale(1.06); }
.cat span { margin-bottom: 12px; padding: 4px 12px; border-radius: 18px; background: rgba(255, 255, 255, .94); color: var(--color-ink); font-size: 13px; font-weight: 500; }

/* ---------- Banda oscura ---------- */
.band { margin-top: 56px; padding-block: 56px 64px !important; background: var(--color-ink); color: #fff; }
.band .label h2, .band .card h3, .band .vrow h3 { color: #fff; }
.band .label i { background: rgba(255, 255, 255, .18); }
.band .meta.left { color: var(--on-dark-soft); }
.band .thumb { background: var(--color-ink-soft); }
.trend { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.trend .thumb.tall { aspect-ratio: 16 / 9.5; border-radius: var(--radius-card); }
.trend > .card h3 { margin-block: 14px 10px; font-size: clamp(20px, 2.2vw, 28px); }
.trend .list { gap: 20px; }
.vrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.vrow .thumb { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
.vrow h3 { margin-block: 8px 6px; font-size: 16px; }
.chip.gray { background: rgba(255, 255, 255, .16); color: #fff; }
.play { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 10, 10, .55); transition: background .2s; }
.play svg { margin-left: 3px; }
.play.sm { width: 38px; height: 38px; }
.card:hover .play { background: var(--color-ink); }

/* ---------- Invitación ---------- */
.cta { padding-right: 24px; border-radius: var(--radius-card); overflow: hidden; display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: center; background: var(--color-canvas); }
.cta-img { position: relative; align-self: stretch; min-height: 110px; }
.cta h3 { margin-bottom: 4px; font-size: 20px; }
.cta p { margin: 0; color: var(--color-mid-gray); }
.cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Directorio ---------- */
.dir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.dir-intro h3 { margin-bottom: 12px; font-size: clamp(24px, 3vw, 30px); }
.dir-intro p { max-width: 46ch; margin: 0 0 18px; color: var(--color-mid-gray); }
.zones { display: flex; flex-wrap: wrap; gap: 8px; }
.zones button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--color-canvas); color: var(--color-ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.zones button:hover { background: var(--color-hairline); }
.zones button[aria-pressed="true"] { background: var(--color-ink-soft); color: var(--color-surface-alt); }
.biz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.biz article { padding: 16px 18px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); display: grid; gap: 4px; background: var(--color-paper); box-shadow: var(--shadow-subtle); }
.biz article[hidden] { display: none; }
.biz h3 { font-size: 16px; }
.biz .where, .biz .hours { color: var(--color-mid-gray); font-size: 13px; }
.biz .tag { color: var(--color-ink); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Semana ---------- */
.weekly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wk { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 18px; }
.wk .thumb { aspect-ratio: 1; border-radius: var(--radius-card); }
.portal .wk h3 { margin-block: 6px; font-size: 18px; }
.wk p { margin: 6px 0 8px; color: var(--color-mid-gray); }
.more { color: var(--color-ink); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pie ---------- */
.p-footer { margin-top: 72px; background: var(--color-ink); color: #fff; }
.p-footer .wrap { padding-block: 44px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.p-footer p, .p-footer li { color: var(--on-dark-soft); font-size: 14px; }
.p-footer h4 { margin-bottom: 12px; color: #fff; font-size: 16px; }
.p-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.p-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-footer .p-logo img { filter: brightness(0) invert(1); }
.legal { padding: 16px; border-top: 1px solid rgba(255, 255, 255, .14); color: var(--on-dark-soft); font-size: 13px; text-align: center; }

/* ---------- Nota y blog ---------- */
.crumbs { background: var(--color-canvas); border-bottom: 1px solid var(--color-hairline); }
.crumbs .wrap { padding-block: 14px; display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--color-mid-gray); font-size: 13px; }
.crumbs a:hover { color: var(--color-ink); }
.crumbs .now { color: var(--color-ink); font-weight: 500; }
.post h1 { margin-block: 16px 16px; font-size: clamp(28px, 4vw, 40px); }
.post-meta { margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.post-meta .meta { justify-content: flex-start; color: var(--color-mid-gray); gap: 4px 20px; }
.share { display: flex; gap: 6px; }
.share a { width: 36px; height: 36px; border-radius: var(--radius-interactive); display: grid; place-items: center; background: var(--color-canvas); color: var(--color-ink); }
.share a:hover { background: var(--color-ink-soft); color: #fff; }
.sample-note { margin-left: 8px; padding: 2px 10px; border-radius: 18px; display: inline-block; background: var(--color-canvas); color: var(--color-mid-gray); font-size: 12px; font-weight: 500; }
.portal figure { margin: 0; }
.frame { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--color-canvas); isolation: isolate; }
.frame.wide { aspect-ratio: 16 / 9; }
.portal figcaption { margin-top: 8px; color: var(--color-mid-gray); font-size: 13px; }
.post figure.top { margin-bottom: 28px; }
.prose { max-width: 70ch; font-size: 16px; line-height: 1.75; }
.prose p { margin: 0 0 20px; }
.prose .lead::first-letter { float: left; padding: 6px 12px 0 0; color: var(--color-ink); font-size: 4em; font-weight: 600; line-height: .8; }
.portal .prose h2 { margin: 36px 0 12px; font-size: clamp(22px, 2.6vw, 28px); }
blockquote.pull { max-width: none; margin: 32px 0; padding: 24px 28px; border-radius: var(--radius-card); background: var(--color-canvas); }
blockquote.pull svg { display: block; margin-bottom: 10px; }
blockquote.pull p { margin: 0 0 12px; color: var(--color-ink); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
blockquote.pull cite { color: var(--color-mid-gray); font-size: 13px; font-style: normal; font-weight: 500; }
.feature { max-width: none; margin: 32px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.feature .frame { aspect-ratio: 4 / 3; }
.portal .feature h3 { margin-bottom: 10px; font-size: 22px; }
.feature p { margin: 0 0 14px; color: var(--color-mid-gray); font-size: 14px; }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.checks li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--color-ink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.tags-share { margin-top: 36px; padding-block: 20px; border-block: 1px solid var(--color-hairline); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.tags, .sharebox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tags b, .sharebox b { margin-right: 4px; font-size: 13px; font-weight: 600; }
.tag-link { padding: 4px 12px; border-radius: 18px; background: var(--color-canvas); color: var(--color-ink-soft); font-size: 12px; font-weight: 500; }
.tag-link:hover { background: var(--color-hairline); }
.author { margin-top: 32px; padding: 24px; border-radius: var(--radius-card); display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: center; background: var(--color-canvas); }
.avatar { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--color-ink-soft); color: #fff; font-size: 26px; font-weight: 600; }
.author small { display: block; color: var(--color-mid-gray); font-size: 13px; }
.author h4 { margin-block: 2px 6px; font-size: 18px; }
.author p { margin: 0; color: var(--color-mid-gray); }
.reply { margin-top: 40px; }
.portal .reply h3 { margin-bottom: 6px; font-size: 24px; }
.reply > p { margin: 0 0 16px; color: var(--color-mid-gray); }
.fields { margin-bottom: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reply input, .reply textarea { width: 100%; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius-interactive); background: var(--color-canvas); color: var(--color-ink); font-size: 14px; }
.reply input { min-height: 44px; }
.reply textarea { min-height: 130px; margin-bottom: 14px; display: block; resize: vertical; }
.reply input:focus, .reply textarea:focus { outline: 0; border-color: var(--color-hairline); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-ink); }
.reply .ok { color: var(--color-ink); font-weight: 500; }
.side-h { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-hairline); font-size: 18px; }
.sform { border-radius: var(--radius-interactive); overflow: hidden; display: flex; background: var(--color-canvas); }
.sform input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; outline: 0; background: none; color: var(--color-ink); font-size: 14px; }
.sform button { width: 46px; border: 0; display: grid; place-items: center; background: var(--color-ink-soft); color: #fff; cursor: pointer; }
.hotcats { display: grid; gap: 10px; }
.hot { position: relative; height: 64px; padding: 0 18px; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.hot .art { z-index: -2; transition: transform .5s; }
.hot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 10, .45); }
.hot:hover .art { transform: scale(1.06); }
.hot span { padding: 2px 10px; border-radius: 18px; background: rgba(255, 255, 255, .94); color: var(--color-ink); font-size: 13px; font-weight: 500; }
.recent-big .thumb { aspect-ratio: 16 / 10; border-radius: var(--radius-card); }
.recent-big h3 { font-size: 17px; }
.news-band { text-align: center; }
.news-band h2 { margin-bottom: 10px; color: #fff; font-size: clamp(26px, 3.4vw, 36px); }
.news-band p { max-width: 52ch; margin: 0 auto 22px; color: var(--on-dark-soft); }
.nl { max-width: 560px; margin: 0 auto; display: flex; gap: 10px; }
.nl input { margin: 0; }
.nl button { width: auto; }
.nl-ok { min-height: 1.4em; margin-top: 12px; color: #fff; font-size: 14px; }

/* Blog (archivo) */
.blog-head { margin-bottom: 24px; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.blog-head h1 { font-size: clamp(32px, 4.4vw, 44px); }
.blog-head p { max-width: 52ch; margin: 6px 0 0; color: var(--color-mid-gray); }
.count { color: var(--color-mid-gray); font-size: 13px; font-weight: 500; white-space: nowrap; }
#filters { margin-bottom: 28px; }
#posts { display: grid; gap: 28px; }
.bcard { padding-bottom: 28px; border-bottom: 1px solid var(--color-hairline); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: center; }
.bcard:last-child { padding-bottom: 0; border-bottom: 0; }
.bcard .thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-card); display: block; }
.bcard h2 { margin-block: 12px 10px; font-size: clamp(20px, 2.2vw, 24px); }
.bcard:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.bcard .meta.left { margin-bottom: 12px; }
.bcard p { margin: 0 0 16px; color: var(--color-mid-gray); }
#pager { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
#pager button { min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-interactive); background: var(--color-canvas); color: var(--color-ink); font-weight: 500; cursor: pointer; }
#pager button:hover { background: var(--color-hairline); }
#pager button[aria-current="page"] { background: var(--color-ink-soft); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .cats { grid-template-columns: repeat(3, 1fr); }
    .split, .dir, .trend { grid-template-columns: 1fr; }
    .cta { grid-template-columns: 160px minmax(0, 1fr); padding-right: 0; }
    .cta .cta-actions { grid-column: 1 / -1; margin: 0 20px 20px; }
    .grid4 { grid-template-columns: repeat(2, 1fr); }
    .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .side { display: grid; grid-template-columns: repeat(2, 1fr); }
    .p-footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; }
    .panel { min-height: 380px; }
    .spot, .weekly, .side, .biz { grid-template-columns: 1fr; }
    .p-social { display: none; }
    .p-search { order: 5; width: 100%; }
    .portal section { padding-top: 44px; }
}
@media (max-width: 640px) {
    .bcard, .feature, .fields { grid-template-columns: 1fr; }
    .bcard { gap: 14px; }
    .nl { flex-direction: column; }
    .nl button { width: 100%; }
    .prose { font-size: 15px; }
}
@media (max-width: 520px) {
    .label h2 { white-space: normal; font-size: 20px; }
    .label a:not(.btn) { display: none; }
    .cta { grid-template-columns: 1fr; }
    .cta-img { min-height: 120px; }
    .cta-text { padding-inline: 20px; }
    .vrow { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
    .cats { gap: 12px; }
    .grid4, .grid3 { grid-template-columns: 1fr; }
    .wk { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
    .portal .wk h3 { font-size: 16px; }
    .p-footer .wrap { grid-template-columns: 1fr; }
    .author { grid-template-columns: 1fr; justify-items: start; }
    .tags-share { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Legibilidad del texto sobre imágenes */
.panel::after { background: rgba(10, 10, 10, .55); }
.panel .meta { color: #fff; opacity: 1; }

/* ---------- Notas reales (base de datos) ---------- */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s ease; }
.panel .cover-img { z-index: -2; }
.panel:hover .cover-img { transform: scale(1.04); }
.card:hover .thumb .cover-img { transform: scale(1.05); }
.hero.single { grid-template-columns: 1fr; }
.empty-panel { background: var(--color-ink-soft); min-height: 260px; }
.empty-panel::after { display: none; }
.empty-note { margin: 0; padding: 32px 0; color: var(--color-mid-gray); }

/* Filtros y paginación como enlaces */
.zone-link { min-height: 36px; padding: 0 14px; border-radius: 18px; display: inline-flex; align-items: center; background: var(--color-canvas); color: var(--color-ink); font-size: 13px; font-weight: 500; }
.zone-link:hover { background: var(--color-hairline); }
.zone-link[aria-current] { background: var(--color-ink-soft); color: var(--color-surface-alt); }
#pager a { min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-interactive); display: inline-grid; place-items: center; background: var(--color-canvas); color: var(--color-ink); font-weight: 500; }
#pager a:hover { background: var(--color-hairline); }
#pager a[aria-current="page"] { background: var(--color-ink-soft); color: #fff; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }

/* ---------- Directorio de negocios ---------- */
.dir-intro-row { margin-bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.dir-filters { margin-bottom: 28px; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto auto; gap: 10px; }
.dir-filters input, .dir-filters select { min-width: 0; height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-interactive); background: var(--color-canvas); color: var(--color-ink); font-size: 14px; }
.dir-filters input:focus, .dir-filters select:focus { outline: 0; border-color: var(--color-hairline); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-ink); }
.dir-filters .btn { min-height: 44px; }
.dir-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#directorio .dir-grid, #alojamiento .dir-grid, #tours .dir-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dir-card { padding: 20px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: 12px; background: var(--color-paper); box-shadow: var(--shadow-subtle); }
.dir-card.is-featured { border-color: var(--color-ink-soft); }
.dir-head { display: flex; gap: 12px; align-items: center; }
.dir-logo { width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--radius-interactive); object-fit: cover; background: var(--color-canvas); }
.dir-logo-fallback { display: grid; place-items: center; background: var(--color-ink-soft); color: var(--color-surface-alt); font-size: 16px; font-weight: 600; }
.dir-title { min-width: 0; }
.portal .dir-title h3 { font-size: 17px; overflow-wrap: anywhere; }
.dir-title h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dir-chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.dir-text { margin: 0; color: var(--color-mid-gray); overflow-wrap: anywhere; }
.dir-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--color-ink-soft); font-size: 13px; }
.dir-facts li { display: flex; gap: 8px; align-items: flex-start; }
.dir-facts svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; fill: none; stroke: var(--color-mid-gray); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dir-actions { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1000px) {
    .dir-grid, #directorio .dir-grid, #alojamiento .dir-grid, #tours .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dir-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dir-intro-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dir-grid, #directorio .dir-grid, #alojamiento .dir-grid, #tours .dir-grid, .dir-filters { grid-template-columns: 1fr; }
}

/* ---------- Directorio: tarjeta con foto y ficha del negocio ---------- */
.dir-card { padding: 0; overflow: hidden; gap: 0; }
.dir-photo { height: 160px; display: grid; place-items: center; background: var(--color-canvas); color: var(--color-mid-gray); font-size: 32px; font-weight: 600; overflow: hidden; }
.dir-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-body { padding: 16px 20px 20px; display: flex; flex: 1; flex-direction: column; gap: 10px; }
.dir-body h3 { font-size: 18px; }
.dir-body .dir-chips { margin-top: 0; }
.dir-hours { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }

.biz-title { margin-block: 10px 8px; font-size: clamp(28px, 4vw, 40px); }
.biz-rating { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.biz-rating a { color: var(--color-mid-gray); text-decoration: underline; text-underline-offset: 3px; }
.stars { color: var(--color-ink); letter-spacing: 1px; }
.biz-lead { margin: 0 0 20px; color: var(--color-mid-gray); font-size: 16px; }
.biz-h2 { margin: 36px 0 14px; font-size: 24px; }
.biz-gallery { margin-bottom: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.biz-gallery a { aspect-ratio: 4 / 3; border-radius: var(--radius-nested); overflow: hidden; background: var(--color-canvas); }
.biz-gallery a.is-main { grid-column: span 4; aspect-ratio: 16 / 9; border-radius: var(--radius-card); }
.biz-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz-map { aspect-ratio: 16 / 9; }
.biz-info h4 { margin-bottom: 12px; }
.store-perk { border-color: var(--color-ink-soft); background: var(--color-ink-soft); }
.store-perk h4 { color: #fff; }
.store-perk p { margin: 0 0 14px; color: var(--on-dark-soft); }

.review-card { padding: 16px 0; border-bottom: 1px solid var(--color-hairline); }
.review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.review-card h3 { margin: 8px 0 4px; font-size: 16px; }
.review-card p { margin: 6px 0 0; color: var(--color-ink-soft); overflow-wrap: anywhere; }
.review-ok { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-interactive); background: var(--color-canvas); color: var(--color-ink); font-weight: 500; }
.review-form { margin-top: 28px; display: grid; gap: 12px; }
.review-form h3 { font-size: 20px; }
.review-form .fields { margin-bottom: 0; }
.review-form input, .review-form select, .review-form textarea { width: 100%; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius-interactive); background: var(--color-canvas); color: var(--color-ink); font-size: 14px; }
.review-form input, .review-form select { min-height: 44px; }
.review-form textarea { min-height: 110px; resize: vertical; }
.review-form input:focus, .review-form select:focus, .review-form textarea:focus { outline: 0; border-color: var(--color-hairline); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-ink); }
.review-form small { color: var(--color-mid-gray); }
.review-form .btn { justify-self: start; }
.review-errors { color: #e7000b; font-size: 14px; }
.review-errors p { margin: 2px 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 640px) { .biz-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .biz-gallery a.is-main { grid-column: span 2; } }

/* Imágenes y recuadros dentro de las notas */
.prose img { max-width: 100%; height: auto; margin: 8px 0 20px; border-radius: var(--radius-card); display: block; }
.prose .callout { margin: 24px 0; padding: 18px 22px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-canvas); }
.prose blockquote { margin: 28px 0; padding: 20px 24px; border-radius: var(--radius-card); background: var(--color-canvas); font-size: 18px; font-weight: 500; }
.prose blockquote p:last-child { margin-bottom: 0; }

/* Páginas fijas de la revista (/pagina/{slug}) */
.pg-hero { padding: 56px 0 24px; }
.pg-hero .wrap, .pg-narrow { max-width: 760px; }
.pg-hero h1 { margin: 12px 0; font-size: clamp(30px, 6vw, 44px); }
.pg-hero p, .pg-sec p { color: var(--color-mid-gray); font-size: 17px; line-height: 1.7; }
.pg-hero .btn { margin-top: 12px; }
.pg-sec { padding: 24px 0; }
.pg-sec h2 { margin: 8px 0 10px; font-size: clamp(22px, 4vw, 30px); }
.pg-narrow.center { text-align: center; margin-inline: auto; }
.pg-h { margin-bottom: 16px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pg-card { background: var(--color-paper); border: 1px solid var(--color-hairline); border-radius: 24px; padding: 22px; }
.pg-card h3 { font-size: 18px; margin-bottom: 6px; }
.pg-card p { margin: 0; font-size: 15px; }
.pg-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--color-canvas); border-radius: 24px; padding: 28px; }
.pg-cta p { margin: 6px 0 0; }
/* Fondo elegible por sección desde el editor visual (Llamada a acción → Fondo), limitado a la paleta de marca. */
.pg-cta--brand { background: var(--color-brand); color: #fff; }
.pg-cta--brand p { color: var(--on-dark-soft); }
.pg-cta--brand .btn { background: #fff; color: var(--color-brand); }
.pg-cta--brand .btn:hover { background: var(--color-brand-soft); }
.pg-cta--brand-soft { background: var(--color-brand-soft); }
.pg-cta--accent-soft { background: var(--color-accent-soft); }
.pg-cta--white { background: var(--color-paper); border: 1px solid var(--color-hairline); }
.pg-quote { margin: 0; font-size: 22px; line-height: 1.5; color: var(--color-ink); font-weight: 500; }
.pg-spacer.sm { height: 16px; } .pg-spacer.md { height: 40px; } .pg-spacer.lg { height: 72px; }
.pg-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.pg-about-art { aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--color-canvas); }
.pg-about-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-about h2 { margin: 8px 0 10px; font-size: clamp(22px, 4vw, 30px); }
.pg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pg-gallery figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--color-canvas); }
.pg-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pg-gallery figcaption { padding: 10px 14px; color: var(--color-mid-gray); font-size: 13px; }
.pg-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.pg-brands img { height: 40px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: .15s ease; }
.pg-brands a:hover img, .pg-brands span img:hover { filter: none; opacity: 1; }
@media (max-width: 720px) { .pg-about { grid-template-columns: 1fr; } .pg-about-art { aspect-ratio: 16 / 10; } }
.pg-carousel { position: relative; }
.pg-carousel-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.pg-carousel-track::-webkit-scrollbar { display: none; }
.pg-carousel-slide { position: relative; flex: 0 0 86%; scroll-snap-align: start; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-canvas); color: inherit; }
.pg-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: rgba(10, 10, 10, .55); color: #fff; }
.pg-carousel-caption strong { display: block; font-size: 16px; }
.pg-carousel-caption span { display: block; margin-top: 2px; font-size: 13px; opacity: .9; }
.pg-carousel-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.pg-carousel-nav button { width: 36px; height: 36px; border: 1px solid var(--color-hairline); border-radius: 18px; background: var(--color-paper); color: var(--color-ink); font-size: 18px; cursor: pointer; }
.pg-carousel-nav button:hover { background: var(--color-canvas); }
@media (min-width: 640px) { .pg-carousel-slide { flex-basis: 46%; } }
@media (min-width: 980px) { .pg-carousel-slide { flex-basis: 32%; } }
.pg-countdown { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--color-canvas); border-radius: 24px; padding: 28px; }
.pg-countdown p { margin: 6px 0 0; }
.pg-countdown-boxes { display: flex; gap: 10px; }
.pg-countdown-boxes div { min-width: 62px; padding: 10px 4px; border-radius: 18px; background: var(--color-paper); border: 1px solid var(--color-hairline); text-align: center; }
.pg-countdown-boxes strong { display: block; font-size: 22px; color: var(--color-brand); }
.pg-countdown-boxes span { display: block; margin-top: 2px; color: var(--color-mid-gray); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.pg-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 12px; }
.pg-bento-item { position: relative; display: block; margin: 0; border-radius: 18px; overflow: hidden; background: var(--color-canvas); color: inherit; grid-column: span 2; }
.pg-bento-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-bento-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: rgba(10, 10, 10, .55); color: #fff; font-size: 13px; font-weight: 500; }
.pg-bento-item.is-wide { grid-column: span 4; }
.pg-bento-item.is-tall { grid-row: span 2; }
.pg-bento-item.is-large { grid-column: span 4; grid-row: span 2; }
@media (min-width: 640px) { .pg-bento-item { grid-column: span 1; } .pg-bento-item.is-wide { grid-column: span 2; } .pg-bento-item.is-large { grid-column: span 2; } }
.pg-video-bubble { position: fixed; bottom: 20px; z-index: 60; width: 60px; height: 60px; padding: 0; border: 1px solid var(--color-hairline); border-radius: 50%; background: var(--color-brand); color: #fff; box-shadow: var(--shadow-subtle); cursor: pointer; display: grid; place-items: center; overflow: hidden; }
.pg-video-bubble svg { width: 24px; height: 24px; }
.pg-video-bubble img { width: 100%; height: 100%; object-fit: cover; }
.pg-video-bubble-bottom-right { right: 20px; }
.pg-video-bubble-bottom-left { left: 20px; }
.pg-video-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(10, 10, 10, .7); }
.pg-video-modal[hidden] { display: none; }
.pg-video-modal-inner { position: relative; width: min(920px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 18px; overflow: hidden; }
.pg-video-modal-inner iframe, .pg-video-modal-inner video { width: 100%; height: 100%; border: 0; display: block; }
.pg-video-modal [data-video-close] { position: absolute; top: 8px; right: 8px; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(10, 10, 10, .6); color: #fff; font-size: 20px; cursor: pointer; }

/* Inscripción de negocios (derivado de .box y .review-form: mismos radios, bordes y colores). */
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px 16px 16px 44px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-paper); cursor: pointer; }
.plan-card:has(input:checked) { border-color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink); }
.review-form .plan-card input[type=radio] { position: absolute; left: 16px; top: 18px; width: 18px; min-height: 0; height: 18px; padding: 0; accent-color: var(--color-ink); }
.plan-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; }
.plan-card ul { margin: 0; padding-left: 18px; color: var(--color-mid-gray); font-size: 14px; }
.premium-fields { display: grid; gap: 12px; }
.premium-fields[hidden] { display: none; }
.file-field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.review-form .check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.review-form .check-row input { width: 18px; min-height: 0; height: 18px; padding: 0; margin-top: 2px; accent-color: var(--color-ink); }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; } }

/* Marketplace (derivado de .dir-card, .box y .review-form). */
.mk-price { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.mk-price-lg { margin: 4px 0 16px; font-size: 30px; letter-spacing: -.75px; }
.mk-price-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-safety { margin: 16px 0 0; color: var(--color-mid-gray); font-size: 13px; }
.mk-report { margin-top: 16px; }
.mk-report summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--color-mid-gray); }
.mk-report .review-form { margin-top: 12px; }
@media (max-width: 640px) { .mk-price-fields { grid-template-columns: 1fr; } }

/* Landing para vender tiendas (/vender). Mobile-first; solo tokens del sistema: canvas, paper, ink, hairline, radios 18/24. */
.lp-hero { padding-block: 40px 24px; }
.lp-hero-grid { display: grid; gap: 32px; align-items: center; }
.lp-hero-text { display: grid; gap: 16px; justify-items: start; }
.lp-hero h1 { margin: 0; font-size: 36px; line-height: 1.11; letter-spacing: -.9px; font-weight: 600; max-width: 18ch; }
.lp-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--color-mid-gray); max-width: 52ch; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-note { margin: 0; font-size: 13px; color: var(--color-mid-gray); }
.lp-mock { display: grid; place-items: center; padding: 24px 16px; border-radius: var(--radius-card); background: var(--color-canvas); }
.lp-mock-card { width: 100%; max-width: 340px; padding: 20px; display: grid; gap: 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-subtle); }
.lp-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-mock-title { font-size: 18px; font-weight: 600; }
.lp-mock-who { margin: 0; font-size: 14px; color: var(--color-mid-gray); }
.lp-mock-lines { margin: 0; padding: 12px 0; list-style: none; display: grid; gap: 8px; border-block: 1px solid var(--color-hairline); font-size: 14px; }
.lp-mock-lines li, .lp-mock-total { display: flex; justify-content: space-between; gap: 12px; }
.lp-mock-total { font-size: 16px; }
.lp-mock-btn { display: grid; place-items: center; min-height: 40px; border-radius: var(--radius-interactive); background: var(--color-ink); color: var(--color-surface-alt); font-size: 14px; font-weight: 500; }
.lp-compare, .lp-features, .lp-steps { display: grid; gap: 16px; }
.lp-steps { margin: 0; padding: 0; list-style: none; }
.lp-box-strong { border-color: var(--color-ink-soft); box-shadow: 0 0 0 1px var(--color-ink-soft); }
.lp-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; color: var(--color-mid-gray); }
.lp-feature svg { width: 28px; height: 28px; margin-bottom: 12px; fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-feature h4, .lp-steps h4 { margin-bottom: 8px; }
.lp-feature p, .lp-steps p { margin: 0; font-size: 14px; color: var(--color-mid-gray); }
.lp-step-n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; background: var(--color-ink-soft); color: var(--color-surface-alt); font-size: 14px; font-weight: 600; }
.lp-faq { display: grid; gap: 12px; }
.lp-faq details { padding: 0; }
.lp-faq summary { padding: 16px 20px; cursor: pointer; font-size: 16px; font-weight: 500; list-style-position: inside; }
.lp-faq details[open] summary { border-bottom: 1px solid var(--color-hairline); }
.lp-faq p { margin: 0; padding: 16px 20px; font-size: 15px; color: var(--color-mid-gray); }
.lp-final { display: grid; gap: 12px; justify-items: start; padding: 32px 24px; border-radius: var(--radius-card); background: var(--color-ink-soft); color: #fff; }
.lp-final h2 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -.75px; }
.lp-final p { margin: 0; color: var(--on-dark-soft); }
@media (min-width: 768px) {
    .lp-hero { padding-block: 64px 32px; }
    .lp-hero-grid { grid-template-columns: 1.2fr 1fr; gap: 48px; }
    .lp-hero h1 { font-size: 48px; line-height: 1.1; letter-spacing: -2.4px; }
    .lp-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lp-final { padding: 48px; }
}
.lp-plans { display: grid; gap: 16px; margin-top: 24px; }
.lp-plan { display: grid; gap: 10px; align-content: start; }
.lp-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-plan-head h3 { margin: 0; font-size: 24px; letter-spacing: -.6px; }
.lp-plan-tag { margin: 0; color: var(--color-mid-gray); font-size: 14px; }
.lp-price { margin: 4px 0 0; }
.lp-price b { font-size: 36px; line-height: 1.11; letter-spacing: -.9px; font-weight: 600; }
.lp-price span { color: var(--color-mid-gray); font-size: 14px; }
.lp-plan-save { margin: 0; font-size: 13px; color: var(--color-mid-gray); }
.lp-plan-list { padding-block: 8px; }
.lp-plan .btn { justify-self: start; }
@media (min-width: 768px) { .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Promociones: ofertas, alojamiento y tours (derivado de .dir-card, .box y .chip; solo tokens del sistema). */
.pr-filters { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) auto auto; }
.pr-photo { position: relative; }
.pr-off { position: absolute; left: 12px; top: 12px; }
.pr-where { margin: 0; font-size: 14px; color: var(--color-mid-gray); }
.pr-price-row { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pr-price { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.pr-price-lg { font-size: 36px; line-height: 1.11; letter-spacing: -.9px; }
.pr-old { color: var(--color-mid-gray); font-size: 14px; }
.pr-note { color: var(--color-mid-gray); font-size: 13px; }
.pr-left { margin: 0; font-size: 13px; font-weight: 500; }
.pr-valid { margin: 4px 0 0; font-size: 13px; color: var(--color-mid-gray); }
.pr-buy { display: grid; gap: 4px; }
.pr-includes, .pr-terms { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; }
.pr-terms { color: var(--color-mid-gray); font-size: 14px; }
.pr-deal { display: grid; margin-bottom: 28px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper); box-shadow: var(--shadow-subtle); }
.pr-deal-photo { min-height: 220px; background: var(--color-canvas); display: block; }
.pr-deal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-deal-body { padding: 20px; display: grid; gap: 10px; align-content: center; }
.pr-deal-body h2, .pr-deal-body h3 { margin: 0; font-size: 24px; line-height: 1.33; letter-spacing: -.6px; }
@media (min-width: 768px) { .pr-deal { grid-template-columns: 1.1fr 1fr; } .pr-deal-body { padding: 32px; } .pr-deal-photo { min-height: 320px; } }
@media (max-width: 900px) { .pr-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pr-filters { grid-template-columns: 1fr; } }

/* Menú superior con desplegable. En pantallas angostas los enlaces del grupo se aplanan en la misma fila desplazable. */
.p-drop, .p-drop-menu { display: contents; }
.p-drop-btn { display: none; }
@media (min-width: 900px) {
    .p-nav .wrap { overflow: visible; }
    .p-drop { position: relative; display: block; }
    .p-drop-btn { display: inline-flex; align-items: center; gap: 6px; padding: 13px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--color-mid-gray); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
    .p-drop-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
    .p-drop-btn:hover, .p-drop.is-open .p-drop-btn { color: var(--color-ink); }
    .p-drop-btn[aria-current] { color: var(--color-ink); border-bottom-color: var(--color-ink); }
    .p-drop-menu { display: none; position: absolute; z-index: 30; top: 100%; left: -12px; min-width: 210px; padding: 8px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-subtle); }
    .p-drop.is-open .p-drop-menu { display: grid; gap: 2px; }
    .p-drop-menu a { padding: 10px 12px; border: 0; border-radius: var(--radius-interactive); }
    .p-drop-menu a:hover { background: var(--color-canvas); }
    .p-drop-menu a[aria-current] { background: var(--color-canvas); }
}

/* Capa final de marca: debe quedar después de los componentes base. */
body.portal .chip{background:var(--color-brand);color:#fff}
body.portal .chip.soft{background:var(--color-accent-soft);color:#8c3909}
body.portal .chip.light{background:#fff;color:var(--color-brand)}
body.portal .box.news,body.portal .band,body.portal .p-footer,body.portal .lp-final{background:var(--color-brand)}
body.portal .band .thumb{background:var(--color-brand-deep)}
body.portal .cta{border:1px solid var(--color-brand-line);border-left:5px solid var(--color-accent);background:var(--color-brand-soft)}
body.portal .zones button[aria-pressed="true"],body.portal .zone-link[aria-current],body.portal #pager button[aria-current="page"],body.portal #pager a[aria-current="page"]{background:var(--color-brand);color:#fff}
body.portal .dir-card.is-featured,body.portal .lp-box-strong{border-color:var(--color-brand);box-shadow:0 0 0 1px var(--color-brand),0 8px 24px rgba(15,40,90,.08)}
body.portal .dir-logo-fallback,body.portal .avatar,body.portal .lp-step-n,body.portal .lp-mock-btn,body.portal .sform button{background:var(--color-brand);color:#fff}
body.portal .store-perk{border-color:var(--color-brand);background:var(--color-brand)}
body.portal .lp-price b,body.portal .pr-price{color:var(--color-brand)}
body.portal .lp-plan:first-child{border-top:4px solid var(--color-accent)}
body.portal .lp-plan:last-child{border-top:4px solid var(--color-brand)}
@media (min-width:900px){body.portal .p-drop-btn:hover,body.portal .p-drop.is-open .p-drop-btn,body.portal .p-drop-btn[aria-current]{color:var(--color-brand)}body.portal .p-drop-btn[aria-current]{border-bottom-color:var(--color-accent)}body.portal .p-drop-menu a:hover,body.portal .p-drop-menu a[aria-current]{background:var(--color-brand-soft);color:var(--color-brand)}}

/* /vender: ritmo por capítulos y separación clara entre secciones. */
body.portal .lp{background:var(--color-paper)}
body.portal .lp-hero{position:relative;padding-block:72px;border-bottom:1px solid var(--color-brand-line);background:var(--color-brand-soft);overflow:hidden}
body.portal .lp-hero:before,body.portal .lp-hero:after{content:"";position:absolute;pointer-events:none;border-radius:24px}
body.portal .lp-hero:before{width:180px;height:180px;right:-70px;top:-85px;background:var(--color-accent-soft);border:1px solid rgba(230,110,30,.18);rotate:18deg}
body.portal .lp-hero:after{width:90px;height:90px;left:-46px;bottom:-42px;background:#fff;border:1px solid var(--color-brand-line);rotate:-12deg}
body.portal .lp-hero .wrap{position:relative;z-index:1}
body.portal .lp-hero h1{color:var(--color-brand)}
body.portal .lp-mock{padding:28px;background:#fff;border:1px solid var(--color-brand-line);box-shadow:0 18px 44px rgba(15,40,90,.10)}
body.portal .lp-mock-card{border-top:4px solid var(--color-accent);box-shadow:0 12px 28px rgba(15,40,90,.12)}
body.portal .lp-section{padding-block:72px;border-bottom:1px solid var(--color-hairline)}
body.portal .lp-section .label{margin-bottom:32px}
body.portal .lp-section .label h2{font-size:clamp(24px,3vw,32px);color:var(--color-brand)}
body.portal .lp-section .label i{background:var(--color-brand-line)}
body.portal .lp-compare-section{background:#fff}
body.portal .lp-compare-section .box{padding:28px;box-shadow:0 10px 28px rgba(15,40,90,.07)}
body.portal .lp-compare-section .box:first-child{border-top:4px solid var(--color-accent)}
body.portal .lp-compare-section .box:last-child{border-top:4px solid var(--color-brand);background:var(--color-brand-soft)}
body.portal .lp-features-section{background:var(--color-surface-alt)}
body.portal .lp-feature{min-height:210px;padding:24px;border-color:var(--color-brand-line);background:#fff;box-shadow:0 8px 22px rgba(15,40,90,.06);transition:translate .2s,box-shadow .2s}
body.portal .lp-feature:nth-child(odd){border-top:4px solid var(--color-accent)}
body.portal .lp-feature:nth-child(even){border-top:4px solid var(--color-brand)}
body.portal .lp-feature:hover{translate:0 -3px;box-shadow:0 14px 30px rgba(15,40,90,.11)}
body.portal .lp-steps-section{background:var(--color-brand-soft);border-color:var(--color-brand-line)}
body.portal .lp-steps .box{position:relative;min-height:220px;padding:24px;border:0;background:#fff;box-shadow:0 10px 26px rgba(15,40,90,.09)}
body.portal .lp-steps .box:after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:4px;border-radius:6px 6px 0 0;background:var(--color-accent)}
body.portal .lp-stores-section{background:#fff}
body.portal .lp-stores-section .dir-card{box-shadow:0 10px 28px rgba(15,40,90,.07)}
body.portal .lp-pricing-section{background:var(--color-accent-soft);border-color:rgba(230,110,30,.18)}
body.portal .lp-pricing-section .lp-lead{color:#714528}
body.portal .lp-pricing-section .lp-plan{padding:28px;background:#fff;box-shadow:0 14px 34px rgba(90,45,15,.09)}
body.portal .lp-faq-section{background:var(--color-canvas)}
body.portal .lp-faq details{border-color:var(--color-brand-line);background:#fff;box-shadow:0 5px 14px rgba(15,40,90,.05)}
body.portal .lp-faq details[open]{border-color:var(--color-brand);box-shadow:0 10px 24px rgba(15,40,90,.09)}
body.portal .lp-faq details[open] summary{color:var(--color-brand);background:var(--color-brand-soft)}
body.portal .lp-closing-section{padding-block:72px;background:#fff;border-bottom:0}
body.portal .lp-final{position:relative;padding:56px;overflow:hidden;box-shadow:0 18px 42px rgba(15,40,90,.18)}
body.portal .lp-final:after{content:"";position:absolute;width:160px;height:160px;right:-55px;bottom:-80px;border-radius:50%;background:var(--color-accent);opacity:.9}
body.portal .lp-final>*{position:relative;z-index:1}
body.portal .lp-final h2{color:#fff;font-size:clamp(30px,4vw,42px)}
@media(max-width:767px){body.portal .lp-hero{padding-block:48px}body.portal .lp-section{padding-block:48px}body.portal .lp-section .label{margin-bottom:24px}body.portal .lp-feature,body.portal .lp-steps .box{min-height:0}body.portal .lp-pricing-section .lp-plan,body.portal .lp-compare-section .box{padding:22px}body.portal .lp-closing-section{padding-block:48px}body.portal .lp-final{padding:36px 24px}body.portal .lp-final:after{width:110px;height:110px;right:-45px;bottom:-55px}}

/* Navegación móvil: panel lateral táctil; deriva radios, color y sombra del sistema oficial. */
.p-menu-toggle,.p-nav-head,.p-nav-backdrop{display:none}
@media(max-width:899px){
    body.portal img{max-width:100%}
    body.portal main,body.portal section,body.portal .wrap,body.portal .grid,body.portal [class*="grid"]>*{min-width:0}
    body.portal.p-menu-open{overflow:hidden}
    .p-top{position:relative;z-index:62;background:var(--color-paper);border-bottom:1px solid var(--color-hairline)}
    .p-top .wrap{min-height:64px;padding-block:8px;gap:8px;flex-wrap:wrap}
    .p-top .spacer{display:none}
    .p-logo img{height:32px;width:auto}
    .p-social{display:none}
    .p-menu-toggle{display:inline-flex;min-height:44px;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--color-brand-line);border-radius:var(--radius-interactive);background:var(--color-brand-soft);color:var(--color-brand);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
    .p-actions{margin-left:auto}
    .p-actions .btn.ghost{display:none}
    .p-actions .btn.small{min-height:44px;padding-inline:13px;white-space:nowrap}
    .p-search{order:10;width:100%;height:44px;margin-top:0}
    .p-nav-backdrop{display:block;position:fixed;z-index:63;inset:0;border:0;background:rgba(9,28,67,.48);opacity:0;pointer-events:none;transition:opacity .2s ease}
    body.p-menu-open .p-nav-backdrop{opacity:1;pointer-events:auto}
    .p-nav{position:fixed;z-index:64;inset:0 0 0 auto;width:min(88vw,360px);height:100dvh;border:0;background:var(--color-paper);box-shadow:-18px 0 44px rgba(9,28,67,.18);transform:translateX(105%);transition:transform .22s ease;visibility:hidden}
    .p-nav.is-open{transform:translateX(0);visibility:visible}
    .p-nav .wrap{height:100%;min-height:0;padding:16px;display:flex;flex-direction:column;align-items:stretch;gap:4px;overflow-y:auto}
    .p-nav-head{display:flex;min-height:48px;margin-bottom:8px;padding:0 4px 12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-hairline);color:var(--color-brand)}
    .p-nav-head strong{font-size:20px}
    .p-nav-head button{display:grid;width:44px;height:44px;place-items:center;border:0;border-radius:var(--radius-interactive);background:var(--color-canvas);color:var(--color-ink);cursor:pointer}
    .p-nav a,.p-drop-btn{width:100%;min-height:48px;padding:12px 14px;display:flex;align-items:center;border:0;border-radius:var(--radius-interactive);background:transparent;color:var(--color-ink);font:inherit;font-size:15px;font-weight:600;text-align:left;text-decoration:none}
    .p-nav a[aria-current],.p-drop-btn[aria-current]{background:var(--color-brand-soft);color:var(--color-brand)}
    .p-drop{display:block}
    .p-drop-btn{justify-content:space-between;cursor:pointer}
    .p-drop-btn::after{content:"";width:7px;height:7px;margin-left:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
    .p-drop.is-open .p-drop-btn::after{transform:rotate(225deg) translate(-2px,-2px)}
    .p-drop-menu{display:none;padding:2px 0 8px 12px}
    .p-drop.is-open .p-drop-menu{display:grid;gap:2px}
    .p-drop-menu a{min-height:44px;font-size:14px;font-weight:500;color:var(--color-mid-gray)}
}
@media(max-width:420px){
    .p-top .wrap{padding-inline:12px}
    .p-menu-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .p-menu-toggle{width:44px;padding:0;justify-content:center}
    .p-actions .btn.small{padding-inline:11px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.p-nav,.p-nav-backdrop{transition:none}}
.pr-contact-form{margin-top:16px;padding-top:18px;border-top:1px solid var(--color-hairline)}
.pr-contact-form h2{margin:0;color:var(--color-brand);font-size:20px}
.pr-contact-form label{display:grid;gap:6px;font-size:14px;font-weight:500}
.pr-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pr-contact-form .btn{width:100%;min-height:48px}
@media(max-width:640px){.pr-contact-grid{grid-template-columns:1fr}.pr-contact-form{scroll-margin-top:16px}}

/* Inscripción de negocios: pasos en tarjetas (derivado de .box, .cta y .lp-step-n; sin colores nuevos). */
.portal .reg-page { padding: 40px 0 64px; background: var(--color-canvas); }
main:has(.reg-page) ~ .p-footer { margin-top: 0; }
.review-form.form-steps { margin-top: 24px; gap: 16px; }
.portal .form-step { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-subtle); }
.form-step-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--color-hairline); }
.form-step-head .lp-step-n { flex: none; margin: 0; }
.form-step-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 20px; }
.form-step-head p { margin: 2px 0 0; color: var(--color-mid-gray); font-size: 14px; }
.form-step .plan-card { border-radius: var(--radius-interactive); background: var(--color-surface-alt); }
.form-step .plan-card:has(input:checked) { border-color: var(--color-brand); background: var(--color-paper); }
.form-step.premium-fields { border-left: 5px solid var(--color-accent); }
.form-step.premium-fields[hidden] { display: none; }
@media (max-width: 640px) {
    .portal .reg-page { padding: 24px 0 48px; }
    .portal .form-step { padding: 16px; }
    .review-form .form-final .btn { width: 100%; min-height: 48px; justify-self: stretch; }
}