/*
 * Mayoralia components — institutional-blue design system.
 * Every reusable UI block (buttons, cards, badges, search, ficha, forms,
 * tables, Imserso blocks) rebuilt on the `--mv-*` tokens. Template class names
 * are preserved so the repaint is CSS-only.
 *
 * Colour discipline:
 *   - Blue / navy  → all brand & structure (hero, links, headings accent,
 *     badges, table headers, banners, tiles).
 *   - Warm orange (--mv-cta) → ONLY the primary conversion buttons
 *     (Buscar · Llamar · Solicitar información · Avísame).
 *   - Gold (--mv-gold) → the premium "Destacado" highlight only.
 *   - Everything else neutral (ink / muted) on white.
 *
 * @package Mayoralia
 */

/* ==========================================================================
   Micro-labels
   ========================================================================== */
.kicker,
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    font-weight: 800;
    color: var(--mv-blue);
}

/* ==========================================================================
   Buttons / CTA
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    padding: .8rem 1.5rem;
    border-radius: var(--mv-r-pill);
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Warm CTA — reserved for the primary conversion actions ONLY.
   `.btn-gold` (legacy class name) and `.btn-cta` are the same warm button. */
.btn-gold,
.btn-cta {
    background: var(--mv-cta);
    color: var(--mv-cta-ink);
    box-shadow: var(--mv-shadow-sm);
}
.btn-gold:hover,
.btn-cta:hover {
    background: var(--mv-cta-hover);
    color: var(--mv-cta-ink);
}

/* Institutional blue — default action */
.btn-primary {
    background: var(--mv-blue);
    color: #fff;
    box-shadow: var(--mv-shadow-sm);
}
.btn-primary:hover { background: var(--mv-navy); color: #fff; }

/* White button — for navigational actions placed on a dark blue block
   (keeps the warm CTA orange isolated to conversion buttons only) */
.btn-on-dark {
    background: #fff;
    color: var(--mv-navy);
    box-shadow: var(--mv-shadow-sm);
}
.btn-on-dark:hover { background: var(--mv-sky); color: var(--mv-navy); }

/* Outline blue — secondary action */
.btn-secondary {
    background: transparent;
    color: var(--mv-blue);
    border-color: var(--mv-blue);
}
.btn-secondary:hover { background: var(--mv-sky); color: var(--mv-navy); }

/* ==========================================================================
   Home hero — navy → blue gradient
   ========================================================================== */
.hero {
    background: var(--mv-hero);
    color: #fff;
    padding: 2rem 0 2.2rem;
}
.hero .kicker { color: var(--mv-sky-2); margin-bottom: .8rem; }
.hero h1 { color: #fff; max-width: 20ch; margin-bottom: .5rem; }
.hero p.hero-sub {
    color: #e6f0fb;
    font-size: 1.1rem;
    max-width: 54ch;
    margin-bottom: 0;
}

/* White rounded search card */
.buscador {
    background: var(--mv-card);
    color: var(--mv-ink);
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-lg);
    box-shadow: var(--mv-shadow);
    padding: 1.1rem;
    margin-top: 1.8rem;
}
.buscador .field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.buscador label {
    font-weight: 800;
    display: block;
    margin-bottom: .35rem;
    font-size: .95rem;
    color: var(--mv-ink);
}
.buscador select {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    padding: .75rem .7rem;
    border: 2px solid var(--mv-line);
    border-radius: var(--mv-r-md);
    background: var(--mv-card);
    color: var(--mv-ink);
}
.buscador select:hover { border-color: var(--mv-sky-2); }
.buscador select:focus-visible { border-color: var(--mv-blue); }
.buscador .actions { margin-top: 1.1rem; }

/* ==========================================================================
   Cards / listings
   ========================================================================== */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.3rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}
/* Sanitas-style product card: solid blue header strip carrying the name in
   white, a flat white body below, defined hairline border, small radius. No
   floaty drop-shadow — definition comes from the border. */
.card-centro {
    position: relative;
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-sm);
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .14s ease, border-color .14s ease;
}
.card-centro:hover {
    border-color: var(--mv-blue);
    box-shadow: var(--mv-shadow-sm);
}

/* Solid colored header strip — the signature institutional move */
.card-head {
    position: relative;
    background: var(--mv-blue);
    color: #fff;
    padding: .8rem 1.1rem;
    /* Sized for an eyebrow + a two-line title so 1- and 2-line cards share the
       same header height and their bodies start at the same y across a row. */
    min-height: 5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
}
.card-eyebrow {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    font-weight: 800;
    color: var(--mv-sky-2);
}
.card-title { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.card-title a { color: #fff; text-decoration: none; }
.card-title a:hover { color: #fff; text-decoration: underline; }
/* Stretched link — whole card clickable, phone stays independent */
.card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Premium / featured centro marker (gold), a crisp label on the header */
.card-destacado {
    position: absolute;
    top: .55rem;
    right: .7rem;
    z-index: 2;
    background: var(--mv-gold);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .66rem;
    font-weight: 800;
    padding: .18rem .5rem;
    border-radius: var(--mv-r-sm);
}
.card-centro--destacado { border-color: var(--mv-gold); }
.card-centro--destacado:hover { border-color: var(--mv-gold); }

.card-body {
    padding: .9rem 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}
.card-loc {
    margin: 0;
    color: var(--mv-muted);
    font-size: .98rem;
    display: flex;
    align-items: flex-start;
    gap: .45rem;
}
.card-loc .icon { flex: none; width: 1.05em; height: 1.05em; color: var(--mv-blue); margin-top: .15em; }
.card-phone {
    margin: 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.card-phone .icon { flex: none; width: 1.05em; height: 1.05em; color: var(--mv-blue); }
.card-phone a {
    position: relative;
    z-index: 2;
    color: var(--mv-blue);
    text-decoration: none;
}
.card-phone a:hover { color: var(--mv-navy); text-decoration: underline; }

/* "Ver ficha ›" chevron affordance (visual only — the whole card is the link) */
.card-more {
    margin-top: auto;
    padding-top: .35rem;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: var(--mv-blue);
    font-weight: 800;
    font-size: .95rem;
}
.card-more .icon { width: 1em; height: 1em; }

/* Generic (non-centro) card fallback used by search/index */
.card-centro > h2,
.card-centro > h3 { margin: 0; padding: 1rem 1.15rem 0; font-size: 1.2rem; }
.card-centro > h2 a { color: var(--mv-ink); text-decoration: none; }
.card-centro > h2 a:hover { color: var(--mv-blue); }
.card-centro > .card-meta { padding: 0 1.15rem 1.15rem; color: var(--mv-muted); }

/* ==========================================================================
   Badges / pills
   ========================================================================== */
.badges { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--mv-sky);
    color: var(--mv-navy);
    font-size: .85rem;
    font-weight: 800;
    padding: .35rem .8rem;
    border-radius: var(--mv-r-pill);
    text-decoration: none;
    line-height: 1.4;
}
.badge-tipo { background: var(--mv-blue); color: #fff; }
.badge-tipo:hover { background: var(--mv-navy); color: #fff; }
.badge-verificado {
    background: transparent;
    color: var(--mv-blue);
    border: 1.5px solid var(--mv-blue);
}
.badge-verificado svg { width: 1em; height: 1em; }
.badge-accent { background: var(--mv-sky); color: var(--mv-blue); }
/* Premium / featured centro badge (gold) */
.badge-destacado { background: var(--mv-gold); color: #fff; }
.badge-destacado svg { width: 1em; height: 1em; }

/* Inline icon defaults */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    stroke: currentColor;
    fill: none;
}

/* ==========================================================================
   Home — province / type tiles
   ========================================================================== */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.tile {
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-left: 3px solid var(--mv-blue);
    border-radius: var(--mv-r-sm);
    box-shadow: none;
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--mv-ink);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.tile:hover {
    border-color: var(--mv-blue);
    border-left-color: var(--mv-navy);
    color: var(--mv-ink);
    box-shadow: var(--mv-shadow-sm);
}
.tile .tile-name { font-weight: 800; font-size: 1.1rem; }
.tile .tile-count {
    background: var(--mv-sky);
    color: var(--mv-navy);
    font-weight: 800;
    border-radius: var(--mv-r-sm);
    padding: .25rem .6rem;
    font-size: .95rem;
    min-width: 2.6rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Single centro (ficha) — blue hero
   ========================================================================== */
.ficha-hero {
    background: var(--mv-hero);
    color: #fff;
    padding: 1.3rem 0 1.6rem;
}
.ficha-hero .badges { margin: .3rem 0 .9rem; }
.ficha-hero h1 { margin: 0 0 .5rem; max-width: 24ch; color: #fff; }
.ficha-address {
    color: #dbe8f7;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
.ficha-address .icon { margin-top: .18em; color: #fff; }

/* Breadcrumbs + badges adapt to the dark blue hero */
.ficha-hero .breadcrumbs { color: #cfe0f5; }
.ficha-hero .breadcrumbs a { color: #fff; }
.ficha-hero .breadcrumbs span[aria-current] { color: #fff; }
.ficha-hero .badge { background: rgba(255, 255, 255, .16); color: #fff; }
.ficha-hero .badge-tipo { background: #fff; color: var(--mv-navy); }
.ficha-hero .badge-tipo:hover { background: var(--mv-sky); color: var(--mv-navy); }
.ficha-hero .badge-verificado { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.ficha-hero .badge-accent { background: rgba(255, 255, 255, .16); color: #fff; }
.ficha-hero .badge-destacado { background: var(--mv-gold); color: #fff; }

/* Real featured image (when a center has one), shown inside the blue hero. */
.ficha-cover {
    margin: .2rem 0 1rem;
    border-radius: var(--mv-r-md);
    overflow: hidden;
}
.ficha-cover--photo img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* .container.ficha-body (0,2,0) so this beats .container's `padding: 0 1.2rem`
   shorthand in style.css, which (equal specificity, later source) would
   otherwise reset padding-top to 0 and glue the cards to the blue hero. */
.container.ficha-body { padding-top: 2.2rem; }
.ficha-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.8rem;
    align-items: start;
}

/* Servicios / Instalaciones live below the two-column top and span the full
   content width, so the chips use the whole row instead of being cramped into
   the narrow left half (no dead right column). Its panels bring their own
   bottom margin; a small top gap separates it from the grid above. */
.ficha-full { margin-top: .4rem; }

.panel {
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-sm);
    box-shadow: none;
    padding: 1.1rem 1.1rem;
    margin: 0 0 1.4rem;
}
.panel h2 {
    margin-top: 0;
    font-size: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--mv-line);
}

/* Facts list (icon + text) */
.facts-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 1rem;
}
.facts-list li { display: flex; gap: .85rem; align-items: flex-start; }
.facts-list .fact-icon {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--mv-r-pill);
    background: var(--mv-sky);
    color: var(--mv-blue);
}
.facts-list .fact-icon .icon { width: 1.25rem; height: 1.25rem; }
.facts-list .fact-body { display: flex; flex-direction: column; }
.facts-list .fact-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mv-muted);
    font-weight: 800;
}
.facts-list .fact-value { font-size: 1.08rem; }
.facts-list .fact-value a { font-weight: 700; }

/* Service / facility chips */
.chips {
    list-style: none;
    margin: .3rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
.chips li {
    background: var(--mv-sky);
    color: var(--mv-navy);
    border-radius: var(--mv-r-pill);
    padding: .4rem .85rem;
    font-size: .98rem;
    font-weight: 600;
}

/* Map */
#mapa-centro {
    height: 340px;
    width: 100%;
    border-radius: var(--mv-r-md);
    border: 1px solid var(--mv-line);
    z-index: 0;
}
.mapa-nota {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .7rem 0 0;
    color: var(--mv-muted);
    font-size: .92rem;
}
.mapa-nota .icon { color: var(--mv-blue); width: 1em; height: 1em; }

/* CTA callbox — blue panel with a warm orange conversion button.
   Static & full-width on mobile (prominent, never sticky); becomes sticky only
   at the desktop two-column breakpoint (see the responsive section below),
   where `top` clears the sticky site header. */
/* Structured Sanitas-style contact panel: solid blue header, white body, the
   phone and the warm-orange conversion button. Flat, edged, defined border. */
.cta-callbox {
    position: static;
    background: var(--mv-card);
    color: var(--mv-ink);
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-sm);
    box-shadow: var(--mv-shadow-sm);
    overflow: hidden;
    margin-bottom: 1.4rem;
    text-align: left;
}
.cta-callbox__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--mv-blue);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    padding: .7rem 1.15rem;
}
.cta-callbox__head .icon { width: 1.1em; height: 1.1em; }
.cta-callbox__body { padding: 1.15rem; }
.cta-callbox .cta-label {
    display: block;
    color: var(--mv-muted);
    margin-bottom: .3rem;
}
.cta-callbox .cta-phone {
    display: block;
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--mv-blue);
    text-decoration: none;
    margin-bottom: 1rem;
    word-break: break-word;
}
.cta-callbox .cta-phone:hover { color: var(--mv-navy); text-decoration: underline; }
.cta-callbox .btn-gold,
.cta-callbox .btn-cta { width: 100%; }

/* Registry trust block */
.registro-block {
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-left: 5px solid var(--mv-blue);
    border-radius: var(--mv-r-sm);
    box-shadow: none;
    padding: 1.2rem 1.3rem;
}
.registro-block .registro-num { font-size: 1.15rem; font-weight: 800; margin: 0 0 .3rem; }
.registro-block small { color: var(--mv-muted); }
.registro-block p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Result count
   ========================================================================== */
.result-count {
    color: var(--mv-muted);
    font-weight: 700;
    margin: 0 0 1.2rem;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Lead capture form — blue fields, orange submit
   ========================================================================== */
.lead-form-wrap {
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-top: 5px solid var(--mv-blue);
    border-radius: var(--mv-r-lg);
    box-shadow: var(--mv-shadow);
    padding: 1.5rem 1.4rem;
    margin: 0 0 1.4rem;
}
.lead-form-wrap h2 { margin-top: 0; }
.lead-form__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.lead-field { margin: 0; }
.lead-field label { font-weight: 800; display: block; margin-bottom: .35rem; }
.lead-field input[type="text"],
.lead-field input[type="tel"],
.lead-field input[type="email"],
.lead-field select,
.lead-field textarea {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    padding: .75rem .7rem;
    border: 2px solid var(--mv-line);
    border-radius: var(--mv-r-md);
    background: var(--mv-card);
    color: var(--mv-ink);
}
.lead-field input:focus-visible,
.lead-field select:focus-visible,
.lead-field textarea:focus-visible { border-color: var(--mv-blue); }
.lead-field .req { color: var(--mv-danger); }
.lead-field--consent { margin-top: 1rem; }
.lead-field--consent label {
    font-weight: 400;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    line-height: 1.4;
}
.lead-field--consent input {
    margin-top: .25rem;
    width: 1.3rem;
    height: 1.3rem;
    flex: none;
    accent-color: var(--mv-blue);
}

.lead-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lead-form__actions { margin: 1.3rem 0 0; }
.lead-form__submit { width: 100%; }

.lead-form__status {
    border-radius: var(--mv-r-md);
    padding: .9rem 1rem;
    margin: 0 0 1.1rem;
    font-weight: 600;
}
.lead-form__status.is-success {
    background: var(--mv-ok-bg);
    border: 2px solid var(--mv-ok);
    color: #0f5e34;
}
.lead-form__status.is-error {
    background: var(--mv-danger-bg);
    border: 2px solid var(--mv-danger);
    color: #8a1a14;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination { margin: 1.5rem 0; }
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.pagination .page-numbers {
    display: inline-block;
    padding: .55rem .95rem;
    border: 2px solid var(--mv-line);
    border-radius: var(--mv-r-md);
    text-decoration: none;
    font-weight: 800;
    color: var(--mv-blue);
    font-variant-numeric: tabular-nums;
}
.pagination .page-numbers.current {
    background: var(--mv-blue);
    border-color: var(--mv-blue);
    color: #fff;
}
.pagination .page-numbers:hover:not(.current) { border-color: var(--mv-blue); }

/* ==========================================================================
   Prestación calculator (embedded in the Ley de Dependencia guide)
   ========================================================================== */
.calc {
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-md);
    padding: 1.2rem 1.3rem 1.4rem;
    margin: 1.8rem 0;
    background: var(--mv-card);
    box-shadow: var(--mv-shadow-sm);
}
.calc__title { margin: 0 0 .3rem; }
.calc__lead { color: var(--mv-muted); margin: 0 0 1rem; font-size: .98rem; max-width: none; }
.calc__fields { display: grid; gap: 1rem; }
.calc__field { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .35rem; max-width: none; }
.calc__field label { font-weight: 700; font-size: .95rem; }
.calc__field select {
    width: 100%;
    max-width: 100%;
    min-height: 3rem;
    padding: .5rem .7rem;
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-sm);
    background: var(--mv-card);
    font: inherit;
    color: var(--mv-ink);
}
.calc__field select:hover { border-color: var(--mv-sky-2); }
.calc__field select:focus-visible { border-color: var(--mv-blue); }
.calc__result {
    margin-top: 1.1rem;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--mv-blue);
    background: var(--mv-sky);
    border-radius: var(--mv-r-sm);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.calc__result-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mv-muted); font-weight: 800; }
.calc__prestacion { font-size: 1.05rem; color: var(--mv-navy); }
.calc__amount { font-size: 1.9rem; font-weight: 900; color: var(--mv-blue); line-height: 1.1; }
.calc__note { font-size: .85rem; color: var(--mv-muted); margin-top: .25rem; }
.calc__fallback { font-size: .9rem; color: var(--mv-muted); margin: 1rem 0 0; }
.tree-link { margin-top: .5rem; }
.tree-link a { font-weight: 700; }

/* ==========================================================================
   Printable visit checklist (checklist guide) — print/save-as-PDF lead magnet
   ========================================================================== */
.printable-checklist {
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-md);
    padding: 1.2rem 1.3rem 1.4rem;
    margin: 1.8rem 0;
    background: var(--mv-card);
    box-shadow: var(--mv-shadow-sm);
}
.printable-checklist__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem 1.2rem;
    flex-wrap: wrap;
}
.printable-checklist__head h2 { margin: 0; }
.printable-checklist__intro { color: var(--mv-muted); max-width: none; }
.print-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.1rem;
    border: 2px solid var(--mv-blue);
    border-radius: var(--mv-r-pill);
    background: transparent;
    color: var(--mv-blue);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.print-btn:hover { background: var(--mv-sky); }
.checklist-items { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .65rem; }
.checklist-items li { position: relative; padding-left: 2rem; max-width: none; }
.checklist-items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .12em;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--mv-blue);
    border-radius: 4px;
}
@media print {
    body * { visibility: hidden; }
    .printable-checklist, .printable-checklist * { visibility: visible; }
    .printable-checklist {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }
    .print-btn { display: none; }
}
@media (min-width: 992px) {
    .calc__fields { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
    font-size: .95rem;
    color: var(--mv-muted);
    margin: 0 0 1rem;
}
/* The BreadcrumbList markup is a semantic <ol> (good for SEO). Render it inline
   with "›" separators instead of the browser's default numbered list. */
.breadcrumbs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .5rem;
}
.breadcrumbs-item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}
.breadcrumbs-item:not(:first-child)::before {
    content: "\203A";           /* › */
    margin-right: .5rem;
    color: currentColor;
    opacity: .6;
}
.breadcrumbs a { text-decoration: none; color: var(--mv-blue); }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span[aria-current] {
    color: var(--mv-ink);
    font-weight: 700;
    /* A very long current crumb truncates instead of blowing out the row. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22rem;
}

/* ==========================================================================
   Default WP search form (404 / empty search)
   ========================================================================== */
.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: stretch;
    margin: 1rem 0;
}
.search-form .search-field {
    flex: 1 1 16rem;
    font: inherit;
    font-size: 1.05rem;
    padding: .7rem .8rem;
    border: 2px solid var(--mv-line);
    border-radius: var(--mv-r-md);
    background: var(--mv-card);
    color: var(--mv-ink);
}
.search-form .search-field:focus-visible { border-color: var(--mv-blue); }
.search-form .search-submit {
    font: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    padding: .7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--mv-r-md);
    background: var(--mv-blue);
    color: #fff;
    cursor: pointer;
}
.search-form .search-submit:hover { background: var(--mv-navy); }

/* ==========================================================================
   Imserso editorial section
   ========================================================================== */
.imserso-page { padding-top: 1.4rem; padding-bottom: 2.4rem; }

.imserso-header h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; }
.imserso-temporada {
    display: inline-block;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--mv-navy);
    background: var(--mv-sky);
    border-radius: var(--mv-r-pill);
    padding: .15em .8em;
    white-space: nowrap;
}

/* Status banner — structured institutional callout: defined border, strong
   colored left-accent bar, small radius, semantic-but-institutional tint and a
   matching icon. Blue by default, status-driven accents. */
.imserso-estado {
    position: relative;
    margin: 1.2rem 0 1.6rem;
    padding: 1.1rem 1.25rem 1.1rem 3rem;
    border-radius: var(--mv-r-sm);
    background: var(--mv-sky);
    border: 1px solid var(--mv-line);
    border-left: 5px solid var(--mv-blue);
    box-shadow: none;
}
/* Institutional info icon (inherits the accent color via currentColor mask) */
.imserso-estado::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--mv-blue);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12' y2='8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12' y2='8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.imserso-estado.is-solicitud-abierta { border-left-color: var(--mv-ok); background: var(--mv-ok-bg); }
.imserso-estado.is-solicitud-abierta::before { background-color: var(--mv-ok); }
.imserso-estado.is-solicitud-cerrada { border-left-color: var(--mv-warn); background: var(--mv-warn-bg); }
.imserso-estado.is-solicitud-cerrada::before { background-color: var(--mv-warn); }
.imserso-estado.is-reservas-abiertas { border-left-color: var(--mv-ok); background: var(--mv-ok-bg); }
.imserso-estado.is-reservas-abiertas::before { background-color: var(--mv-ok); }
.imserso-estado.is-operativa { border-left-color: var(--mv-navy); background: var(--mv-sky); }
.imserso-estado.is-operativa::before { background-color: var(--mv-navy); }
.imserso-estado__eyebrow {
    margin: 0 0 .35rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 800;
    color: var(--mv-muted);
}
.imserso-estado__titulo { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 800; color: var(--mv-ink); }
.imserso-estado__texto { margin: 0; max-width: 68ch; }

/* Table of contents */
.imserso-toc {
    margin: 1.4rem 0;
    padding: 1rem 1.25rem;
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-left: 4px solid var(--mv-blue);
    border-radius: var(--mv-r-sm);
}
.imserso-toc__title {
    margin: 0 0 .5rem;
    font-weight: 800;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mv-muted);
}
.imserso-toc ul { margin: 0; padding-left: 1.1rem; }
.imserso-toc li { margin: .2rem 0; }

/* Responsive data tables — blue-headed */
.imserso-tabla {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0 1.4rem;
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-md);
    background: var(--mv-card);
}
.imserso-tabla:focus-visible { outline: 3px solid var(--mv-blue); outline-offset: 2px; }
.imserso-tabla table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 1rem; }
.imserso-tabla caption { text-align: left; padding: .75rem 1rem; font-weight: 700; color: var(--mv-muted); }
.imserso-tabla th,
.imserso-tabla td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--mv-line); }
.imserso-tabla thead th {
    position: sticky;
    top: 0;
    background: var(--mv-blue);
    color: #fff;
    font-weight: 800;
    z-index: 1;
}
.imserso-tabla tbody th { font-weight: 700; color: var(--mv-navy); background: var(--mv-sky); }
.imserso-tabla tbody tr:last-child th,
.imserso-tabla tbody tr:last-child td { border-bottom: 0; }

/* Notes — structured left-accent callouts: defined border, small radius, icon */
.imserso-nota,
.imserso-pendiente {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-radius: var(--mv-r-sm);
    border: 1px solid var(--mv-line);
    font-size: .98rem;
}
.imserso-nota { background: var(--mv-sky); border-left: 4px solid var(--mv-blue); }
.imserso-pendiente { background: var(--mv-warn-bg); border-left: 4px solid var(--mv-warn); font-weight: 600; }
.imserso-nota strong { color: var(--mv-navy); }

/* Hub / cross-links — edged rows with a chevron affordance */
.imserso-hub-links { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.imserso-hub-links li {
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-left: 3px solid var(--mv-blue);
    border-radius: var(--mv-r-sm);
    padding: .8rem 1rem;
    max-width: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.imserso-hub-links li:hover { border-color: var(--mv-blue); box-shadow: var(--mv-shadow-sm); }
.imserso-hub-links a { font-weight: 700; text-decoration: none; }
.imserso-hub-links a::after { content: " ›"; font-weight: 800; }
.imserso-hub-links a:hover { text-decoration: underline; }

/* CTA block — blue gradient with the newsletter form; edged & flat */
.imserso-cta {
    margin: 1.8rem 0;
    padding: 1.4rem 1.5rem;
    background: var(--mv-hero);
    color: #fff;
    border-radius: var(--mv-r-sm);
    box-shadow: none;
}
.imserso-cta__title { color: #fff; margin: 0 0 .4rem; font-size: 1.3rem; }
.imserso-cta__pitch { color: #fff; margin: 0 0 1.1rem; opacity: .95; max-width: 60ch; }

/* Newsletter double opt-in form (inside the blue .imserso-cta block) */
.newsletter-form { max-width: 42rem; }
.newsletter-form__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.newsletter-field { margin: 0; }
.newsletter-field label { color: #fff; font-weight: 800; display: block; margin-bottom: .35rem; }
.newsletter-field input[type="email"],
.newsletter-field input[type="text"] {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    padding: .75rem .7rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: var(--mv-r-md);
    background: var(--mv-card);
    color: var(--mv-ink);
}
.newsletter-field input:focus-visible { border-color: #fff; }
.newsletter-field .req { color: #ffd9a8; }
.newsletter-field--consent { margin-top: 1rem; }
.newsletter-field--consent label {
    color: #fff;
    font-weight: 400;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    line-height: 1.4;
}
.newsletter-field--consent a { color: #fff; text-decoration: underline; }
.newsletter-field--consent input {
    margin-top: .25rem;
    width: 1.3rem;
    height: 1.3rem;
    flex: none;
    accent-color: var(--mv-cta);
}

.newsletter-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.newsletter-form__actions { margin: 1.2rem 0 0; }

.newsletter-form__status {
    border-radius: var(--mv-r-md);
    padding: .9rem 1rem;
    margin: 0 0 1.1rem;
    font-weight: 600;
}
.newsletter-form__status.is-success {
    background: var(--mv-ok-bg);
    border: 2px solid var(--mv-ok);
    color: #0f5e34;
}
.newsletter-form__status.is-error {
    background: var(--mv-danger-bg);
    border: 2px solid var(--mv-danger);
    color: #8a1a14;
}

/* Confirm / unsubscribe message page */
.newsletter-message { padding: 2.5rem 0; }
.newsletter-message__box {
    max-width: 46rem;
    margin: 0 auto;
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-top: 5px solid var(--mv-blue);
    border-radius: var(--mv-r-lg);
    box-shadow: var(--mv-shadow);
    padding: 2rem 1.75rem;
    text-align: center;
}
.newsletter-message__box.is-error { border-top-color: var(--mv-danger); }
.newsletter-message__title { margin: 0 0 .6rem; }
.newsletter-message__text { margin: 0 0 1.4rem; color: var(--mv-muted); }

/* FAQ */
.imserso-faq { display: grid; gap: 1rem; margin: 1.2rem 0; }
.imserso-faq__item {
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-sm);
    padding: 1rem 1.25rem;
}
.imserso-faq__q { margin: 0 0 .4rem; font-size: 1.15rem; }
.imserso-faq__a p { margin: 0; }

/* Actualidad list */
.imserso-actualidad-list { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 1rem; }
.imserso-actualidad-item {
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-left: 3px solid var(--mv-blue);
    border-radius: var(--mv-r-sm);
    padding: 1rem 1.25rem;
    max-width: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.imserso-actualidad-item:hover { border-color: var(--mv-blue); box-shadow: var(--mv-shadow-sm); }
.imserso-actualidad-item h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.imserso-actualidad-item > a { text-decoration: none; }
.imserso-actualidad-item > a:hover h2 { text-decoration: underline; }
.imserso-actualidad-date { color: var(--mv-muted); font-size: .9rem; margin: 0 0 .4rem; }

/* Source attribution — structured institutional note (defined box, left accent) */
.imserso-fuente {
    margin-top: 2rem;
    padding: .85rem 1rem;
    background: var(--mv-sky);
    border: 1px solid var(--mv-line);
    border-left: 4px solid var(--mv-blue);
    border-radius: var(--mv-r-sm);
    color: var(--mv-muted);
    font-size: .92rem;
}
.imserso-fuente p { margin: 0; max-width: none; }
.imserso-fuente a { font-weight: 700; }

/* Home Imserso promo card — blue gradient */
.home-imserso {
    background: var(--mv-hero);
    color: #fff;
    border-radius: var(--mv-r-sm);
    box-shadow: none;
    padding: clamp(1.5rem, 4vw, 2.6rem);
}
.home-imserso__body { max-width: 60ch; }
.home-imserso__kicker {
    display: inline-block;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mv-sky-2);
    margin-bottom: .5rem;
}
.home-imserso__title { color: #fff; margin: 0 0 .6rem; }
.home-imserso__pitch { color: #fff; opacity: .95; margin: 0 0 1.2rem; }
.home-imserso__actions { margin: 0; }

/* ==========================================================================
   Guías — evergreen article section (single.php) + hub (page-guias.php)
   ========================================================================== */
.single-post { padding-top: 1.4rem; padding-bottom: 2.4rem; }

.guia-header h1 { margin: 0 0 .4rem; }
.guia-meta {
    margin: 0 0 1.4rem;
    color: var(--mv-muted);
    font-size: .92rem;
    font-weight: 700;
}

/* Readable measure for running text; tables, TOC and CTA stay full-width. */
.guia-article > p,
.guia-article > ul,
.guia-article > ol,
.guia-article > h2,
.guia-article > h3,
.guia-body > p,
.guia-body > ul,
.guia-body > ol { max-width: 42rem; }

.guia-article > h2 { margin-top: 2rem; font-size: 1.5rem; }
.guia-article > h3 { margin-top: 1.4rem; font-size: 1.2rem; }
.guia-article > ul,
.guia-article > ol { padding-left: 1.3rem; }
.guia-article > ul li,
.guia-article > ol li { margin: .35rem 0; }
.guia-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--mv-ink);
    max-width: 46rem;
}

/* In-content source line (reuses .imserso-fuente box) */
.guia-fuente { max-width: none; }

/* Soft directory CTA — blue institutional block, never a floaty card */
.guia-cta {
    margin: 2rem 0 1rem;
    padding: 1.5rem 1.6rem;
    background: var(--mv-hero);
    color: #fff;
    border-radius: var(--mv-r-sm);
}
.guia-cta__kicker {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mv-sky-2);
    margin-bottom: .5rem;
}
.guia-cta__title { color: #fff; margin: 0 0 .5rem; font-size: 1.35rem; }
.guia-cta__pitch { color: #fff; opacity: .95; margin: 0 0 1.1rem; max-width: 58ch; }
.guia-cta__actions { margin: 0; }

/* Hub */
.guias-hub { padding-top: 1.4rem; padding-bottom: 2.4rem; }
.guias-hub__intro { max-width: 52rem; }
.guias-hub__intro p { font-size: 1.1rem; color: var(--mv-ink); }

/* Guide cards on the hub — reuse .card-centro chrome, own body copy */
.card-guia .card-body { gap: .6rem; }
.card-guia__excerpt { margin: 0; color: var(--mv-ink); font-size: .98rem; line-height: 1.5; }

/* Home promo — white institutional block with blue accent (distinct from the
   blue Imserso block below it) */
.home-guias {
    background: var(--mv-card);
    border: 1px solid var(--mv-line);
    border-left: 5px solid var(--mv-blue);
    border-radius: var(--mv-r-sm);
    padding: clamp(1.4rem, 3.5vw, 2.2rem);
}
.home-guias__body { max-width: 60ch; }
.home-guias__kicker {
    display: inline-block;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mv-blue);
    margin-bottom: .5rem;
}
.home-guias__title { margin: 0 0 .6rem; }
.home-guias__pitch { color: var(--mv-muted); margin: 0 0 1rem; }
.home-guias__list { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.home-guias__list li { margin: .3rem 0; }
.home-guias__list a { font-weight: 700; text-decoration: none; }
.home-guias__list a:hover { text-decoration: underline; }
.home-guias__actions { margin: 0; }

/* ==========================================================================
   Primary navigation — mobile drawer + desktop horizontal
   ========================================================================== */

/* Hamburger toggle. Only meaningful with JS, so it is hidden by default and
   revealed once nav.js adds `.nav-js` to <html>; that way a no-JS visitor sees
   a plain stacked menu instead of an inert button. */
.nav-toggle {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem .75rem;
    font: inherit;
    font-weight: 800;
    color: var(--mv-navy);
    background: var(--mv-card);
    border: 2px solid var(--mv-line);
    border-radius: var(--mv-r-md);
    cursor: pointer;
}
html.nav-js .nav-toggle { display: inline-flex; }
.nav-toggle:hover { border-color: var(--mv-blue); }
.nav-toggle__label { font-size: 1rem; }
.nav-toggle__box {
    position: relative;
    width: 22px;
    height: 16px;
    flex: none;
}
.nav-toggle__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bar:nth-child(3) { top: auto; bottom: 0; }
/* Bars morph into an X while the drawer is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }

/* Mobile menu drawer: full-width panel under the header. Visible by default
   (usable without JS); with JS it collapses behind the toggle. */
.main-nav { flex-basis: 100%; }
html.nav-js .main-nav { display: none; }
html.nav-js .main-nav.is-open { display: block; }
.main-nav .nav-menu {
    flex-direction: column;
    gap: 0;
    margin-top: .6rem;
    padding: .3rem 0 .2rem;
    border-top: 1px solid var(--mv-line);
}
.main-nav .nav-menu li { width: 100%; max-width: none; }
.main-nav .nav-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: .6rem .4rem;
    border-radius: var(--mv-r-sm);
}
.main-nav .nav-menu a:hover,
.main-nav .nav-menu a:focus-visible { background: var(--mv-sky); text-decoration: none; }

/* ==========================================================================
   Mobile-first component fixes (phones first; enhancements added ≥ breakpoints)
   ========================================================================== */

/* Full-width, tall search button so it stacks under the stacked selects. */
.buscador .btn { width: 100%; min-height: 3rem; }
.buscador select { min-height: 3rem; }

/* Full-width submit for the newsletter form on phones. */
.newsletter-form__submit { width: 100%; }

/* Lead & newsletter controls stay comfortably tappable. */
.lead-field input,
.lead-field select,
.lead-field textarea,
.newsletter-field input { min-height: 3rem; }
.lead-field textarea { min-height: 6rem; }

/* Wrapped content tables (see mayoralia_wrap_content_tables) and Gutenberg
   tables scroll sideways instead of forcing the page to overflow. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0 1.4rem;
    border: 1px solid var(--mv-line);
    border-radius: var(--mv-r-md);
}
.table-scroll:focus-visible { outline: 3px solid var(--mv-blue); outline-offset: 2px; }
.table-scroll table { width: 100%; border-collapse: collapse; }
.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Breadcrumbs never overflow: they wrap; if a single crumb is very long the
   trail scrolls sideways rather than pushing the layout. */
.breadcrumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: break-word;
}

/* Tiles: keep them roomy and prevent the count pill from being squeezed off. */
.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ==========================================================================
   Single responsive breakpoint — 992px (mobile-first)
   Below 992px everything above is mobile: stacked, single-column, hamburger
   drawer, non-sticky callbox. This one block carries the whole desktop layout:
   multi-column grids, horizontal nav, sticky ficha callbox, roomier spacing.
   ========================================================================== */
@media (min-width: 992px) {
    /* --- Layout grids (straight to full desktop columns) --- */
    .buscador .field-grid { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
    .buscador .actions { margin-top: 0; }
    .cards-grid { grid-template-columns: 1fr 1fr 1fr; }
    .newsletter-form__fields { grid-template-columns: 2fr 1fr; }
    .ficha-grid { grid-template-columns: 1.5fr 1fr; }

    /* Ficha CTA callbox becomes sticky, clearing the sticky site header. */
    .cta-callbox { position: sticky; top: 5.5rem; }

    /* --- Roomier desktop spacing (mobile trims restored) --- */
    .home-section { margin: 4rem 0; }
    .hero { padding: 3rem 0 3.2rem; }
    .hero p.hero-sub { font-size: 1.2rem; }
    .ficha-hero { padding: 1.7rem 0 2.1rem; }
    /* More breathing room below the blue hero so the (also blue) "Contacto"
       callbox header doesn't visually merge with it in the two-column layout. */
    .container.ficha-body { padding-top: 3rem; }
    .ficha-cover--photo img { height: 260px; }
    .buscador { padding: 1.4rem; }
    .panel { padding: 1.3rem 1.4rem; }
    .cta-callbox__body { padding: 1.4rem; }
    .cta-callbox .cta-phone { font-size: 1.9rem; }

    /* --- Navigation: horizontal nav, hamburger hidden --- */
    .nav-toggle,
    html.nav-js .nav-toggle { display: none; }
    .main-nav,
    html.nav-js .main-nav {
        display: block;
        flex-basis: auto;
        margin-left: auto;
    }
    .main-nav .nav-menu {
        flex-direction: row;
        gap: .3rem 1.2rem;
        margin-top: 0;
        padding: 0;
        border-top: 0;
    }
    .main-nav .nav-menu li { width: auto; }
    .main-nav .nav-menu a {
        width: auto;
        min-height: 0;
        padding: .35rem .3rem;
        border-radius: 0;
    }
    .main-nav .nav-menu a:hover,
    .main-nav .nav-menu a:focus-visible { background: transparent; }
}