/* =====================================================================
   MercadoKayak — sistema de diseño
   Idea: el mapa de un recorrido de eslalon. Agua profunda, puertas
   verdes y rojas numeradas, dorsal amarillo para el precio. Tipografía
   ancha y pesada de cartel deportivo; el resto, en silencio.
   ===================================================================== */

:root {
    /* ---- Capa 1 · Primitivos ---- */
    --p-navy-950: #061c26;
    --p-navy-900: #0b2530;
    --p-slate-600: #46606a;
    --p-slate-400: #7f959c;
    --p-teal-700: #0e6079;
    --p-teal-800: #0a4a5e;
    --p-teal-900: #072f3f;
    --p-teal-300: #5cc3d6;
    --p-teal-100: #dcecf1;
    --p-mist-100: #eef3f2;
    --p-mist-300: #d0dcd8;
    --p-white: #ffffff;
    --p-red-600: #d7371f;
    --p-red-700: #b52d18;
    --p-green-600: #1e8f5e;
    --p-yellow-400: #ffd23f;

    --p-radius-sm: .375rem;
    --p-radius-md: .75rem;
    --p-radius-lg: 1.25rem;

    --p-font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --p-width-normal: 100%;
    --p-width-wide: 112%;
    --p-width-display: 122%;

    /* ---- Capa 2 · Semánticos ---- */
    --ink: var(--p-navy-900);            /* texto principal, botón primario */
    --ink-deep: var(--p-navy-950);       /* pie, bloques oscuros */
    --ink-soft: var(--p-slate-600);      /* texto secundario */
    --water: var(--p-teal-700);          /* enlaces, iconos, foco */
    --water-deep: var(--p-teal-800);     /* hover */
    --water-night: var(--p-teal-900);    /* portada */
    --water-light: var(--p-teal-300);    /* detalles sobre fondo oscuro */
    --water-tint: var(--p-teal-100);     /* fondos suaves, selección */
    --foam: var(--p-mist-100);           /* fondo de página */
    --paper: var(--p-white);             /* superficies */
    --line: var(--p-mist-300);           /* divisores */
    --field-line: var(--p-slate-400);    /* borde de campos (contraste 3:1) */
    --gate: var(--p-red-600);            /* llamada a la acción, puerta roja */
    --gate-deep: var(--p-red-700);
    --gate-green: var(--p-green-600);    /* éxito, puerta verde */
    --bib: var(--p-yellow-400);          /* dorsal: el precio */

    --font: var(--p-font-body);
    --radius: var(--p-radius-sm);
    --radius-lg: var(--p-radius-md);
    --radius-xl: var(--p-radius-lg);
    --stretch-heading: var(--p-width-wide);
    --stretch-display: var(--p-width-display);

    /* ---- Capa 3 · Componentes ---- */
    --btn-radius: var(--radius);
    --field-border: 1.5px solid var(--field-line);
    --field-focus-ring: 0 0 0 3px rgba(14, 96, 121, .22);
    --card-shadow-hover: 0 14px 30px -14px rgba(6, 28, 38, .45);
    --header-h: 7.1rem;

    /* Puente hacia Bootstrap */
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 11, 37, 48;
    --bs-body-bg: var(--foam);
    --bs-body-bg-rgb: 238, 243, 242;
    --bs-secondary-color: var(--ink-soft);
    --bs-secondary-rgb: 70, 96, 106;
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-primary: var(--ink);
    --bs-primary-rgb: 11, 37, 48;
    --bs-link-color: var(--water);
    --bs-link-color-rgb: 14, 96, 121;
    --bs-link-hover-color: var(--water-deep);
    --bs-link-hover-color-rgb: 10, 74, 94;
    --bs-heading-color: var(--ink);
}

html, body {
    font-family: var(--font);
    background: var(--foam);
    color: var(--ink);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

body { line-height: 1.55; }

a { text-underline-offset: .18em; }

:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-6 {
    font-stretch: var(--stretch-heading);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.08;
    color: var(--ink);
}

h5, h6, .h5, .h6 { font-stretch: var(--p-width-normal); font-weight: 700; letter-spacing: -.005em; }

h1, .h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); }
.h3 { font-size: 1.5rem; }
.h4 { font-size: 1.3rem; }

h1:focus { outline: none; }

/* ---------- Botones ---------- */
.btn {
    --bs-btn-border-radius: var(--btn-radius);
    --bs-btn-font-weight: 700;
    transition: background-color .12s, border-color .12s, color .12s, transform .12s;
}

.btn:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; box-shadow: none; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--water-deep);
    --bs-btn-hover-border-color: var(--water-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--water-deep);
    --bs-btn-active-border-color: var(--water-deep);
    --bs-btn-disabled-bg: var(--ink);
    --bs-btn-disabled-border-color: var(--ink);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--gate);
    --bs-btn-border-color: var(--gate);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gate-deep);
    --bs-btn-hover-border-color: var(--gate-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gate-deep);
    --bs-btn-active-border-color: var(--gate-deep);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--gate);
    --bs-btn-disabled-border-color: var(--gate);
}

.btn-light {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--bib);
    --bs-btn-hover-border-color: var(--bib);
}

.btn-outline-primary {
    --bs-btn-color: var(--water-deep);
    --bs-btn-border-color: var(--water);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--water-deep);
    --bs-btn-hover-border-color: var(--water-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--water-deep);
    --bs-btn-active-border-color: var(--water-deep);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--field-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
}

.btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
}

.btn-success {
    --bs-btn-bg: var(--gate-green);
    --bs-btn-border-color: var(--gate-green);
    --bs-btn-hover-bg: #17734b;
    --bs-btn-hover-border-color: #17734b;
    --bs-btn-active-bg: #17734b;
    --bs-btn-active-border-color: #17734b;
}

.btn-link { --bs-btn-color: var(--water); }

/* ---------- Formularios ---------- */
.form-control, .form-select {
    border: var(--field-border);
    border-radius: var(--radius);
    background-color: var(--paper);
    color: var(--ink);
}

.form-control::placeholder { color: #5d747c; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--water);
    box-shadow: var(--field-focus-ring);
}

.form-check-input:checked { background-color: var(--water); border-color: var(--water); }
.form-label { font-weight: 700; font-size: .875rem; }
.darker-border-checkbox.form-check-input { border-color: var(--field-line); }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

.valid.modified:not([type=checkbox]) { outline: 2px solid var(--gate-green); }
.invalid { outline: 2px solid var(--gate); }
.validation-message { color: var(--gate-deep); font-size: .875rem; }

/* ---------- Superficies ---------- */
.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-bg: var(--paper);
    --bs-card-cap-bg: var(--foam);
}

.table { --bs-table-bg: transparent; --bs-table-border-color: var(--line); }
.table > thead th { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ink-soft);
    --bs-breadcrumb-item-active-color: var(--ink-soft);
    font-size: .875rem;
}

.badge { font-weight: 700; border-radius: var(--radius); }
.badge.text-bg-primary { background-color: var(--water) !important; color: #fff !important; }
.badge.text-bg-secondary { background-color: var(--ink-soft) !important; color: #fff !important; }

.badge.text-bg-light {
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    padding: .45em .8em;
    font-weight: 600;
}

a.badge.text-bg-light:hover {
    border-color: var(--ink) !important;
    background-color: var(--ink) !important;
    color: #fff !important;
}

.alert { border-radius: var(--radius-lg); }

.pagination {
    --bs-pagination-color: var(--ink);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--ink);
    --bs-pagination-hover-border-color: var(--ink);
    --bs-pagination-active-bg: var(--ink);
    --bs-pagination-active-border-color: var(--ink);
    --bs-pagination-focus-color: var(--ink);
    --bs-pagination-focus-box-shadow: var(--field-focus-ring);
    --bs-pagination-border-radius: var(--radius);
    gap: .25rem;
}

.pagination .page-link { border-radius: var(--radius); font-weight: 600; }

/* ---------- Dorsal: el precio ---------- */
.bib {
    display: inline-block;
    background: var(--bib);
    color: var(--ink);
    font-stretch: var(--stretch-heading);
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1;
    padding: .42em .6em .4em;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px var(--ink);
}

.bib-lg { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); border-radius: 6px; box-shadow: inset 0 0 0 3px var(--ink); }

/* ---------- Pictogramas de categoría ---------- */
.glyph {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.glyph .accent { fill: var(--glyph-accent, var(--gate)); stroke: none; }
.glyph .accent-line { stroke: var(--glyph-accent, var(--gate)); }

/* ---------- Portada ---------- */
.hero {
    position: relative;
    margin: -1.5rem calc(50% - 50vw) 0;
    background:
        radial-gradient(60% 90% at 78% 45%, rgba(14, 96, 121, .75) 0, transparent 70%),
        var(--water-night);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.hero-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .38;
}

@media (min-width: 992px) { .hero-map { opacity: 1; } }

.hero .container {
    padding-top: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.hero-title {
    color: #fff;
    font-size: clamp(2.4rem, 1rem + 5.2vw, 4.7rem);
    font-stretch: var(--stretch-display);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.03em;
    max-width: 13ch;
    margin: 0 0 1.25rem;
}

.hero-lead {
    max-width: 30rem;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .86);
    margin: 0 0 1.75rem;
}

.hero-search { display: flex; max-width: 38rem; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }

.hero-search .form-control {
    border: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 1.05rem 1.2rem;
    font-size: 1.05rem;
}

.hero-search .form-control:focus { box-shadow: none; outline: 3px solid var(--bib); outline-offset: 2px; }

.hero-search .btn {
    border-radius: 0 var(--radius) var(--radius) 0;
    padding-inline: 1.5rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.quick-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; max-width: 38rem; }

.quick-links a {
    padding: .35rem .8rem;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .12s, color .12s;
}

.quick-links a:hover { background: #fff; color: var(--ink); }

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    font-size: .9rem;
    color: rgba(255, 255, 255, .82);
}

.hero-facts li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-facts .bi { color: var(--bib); }

/* El mapa: ríos, curvas de nivel y puertas */
.hero-map .contour { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1.5; }
.hero-map .river { fill: none; stroke: #0f6c88; stroke-width: 132; stroke-linecap: round; }
.hero-map .river-edge { fill: none; stroke: rgba(92, 195, 214, .35); stroke-width: 138; stroke-linecap: round; }
.hero-map .flow { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-dasharray: 1 16; stroke-linecap: round; }
.hero-map .gate line { stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; stroke-dasharray: 3 4; }
.hero-map .gate text { fill: #fff; font: 800 13px var(--font); text-anchor: middle; opacity: .8; }

.hero-map .paddler {
    offset-path: path("M560 -30 C480 70,700 90,690 190 C680 290,520 280,560 370 C600 450,820 430,860 590");
    offset-rotate: auto;
    offset-distance: 0%;
    animation: run 9s cubic-bezier(.4, .05, .3, 1) .3s both;
}

@keyframes run { from { offset-distance: 2%; } to { offset-distance: 66%; } }

/* ---------- Secciones ---------- */
.section { margin-block: clamp(3rem, 6vw, 5rem) 0; }
.section.first { margin-top: clamp(2.5rem, 5vw, 4rem); }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-head h2 { margin: 0; }
.section-head p { margin: .4rem 0 0; color: var(--ink-soft); max-width: 42ch; }
.section-head a { font-weight: 700; white-space: nowrap; }

/* Categorías */
.cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }

@media (min-width: 768px) { .cat-tiles { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

.cat-tile {
    --glyph-accent: var(--gate);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.75rem;
    min-height: 11.5rem;
    padding: 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: background-color .15s, color .15s, border-color .15s;
}

.cat-tile .glyph { font-size: 3.6rem; }
.cat-tile-name { font-stretch: var(--stretch-heading); font-weight: 800; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.01em; }
.cat-tile-sub { display: block; margin-top: .3rem; font-size: .8rem; color: var(--ink-soft); font-weight: 500; line-height: 1.35; }

.cat-tile:hover { background: var(--ink); border-color: var(--ink); color: #fff; --glyph-accent: var(--bib); }
.cat-tile:hover .cat-tile-sub { color: rgba(255, 255, 255, .75); }

.facet-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .875rem; }
.facet-line > span { color: var(--ink-soft); margin-right: .25rem; }

/* ---------- Rejilla y tarjeta de anuncio ---------- */
.ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 1.9rem 1rem;
}

@media (min-width: 992px) {
    .ad-grid.has-feature { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
    .ad-grid.has-feature > :first-child { grid-column: span 2; grid-row: span 2; }
}

.ad-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--ink);
    text-decoration: none;
}

.ad-card:hover { color: var(--ink); }

.ad-card-media { position: relative; flex: 1 1 auto; margin-bottom: 1.2rem; }

.ad-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--water-tint);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.ad-card:hover .ad-card-img { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }

.ad-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ad-card-img .bi-image { font-size: 2.5rem; color: var(--water); opacity: .45; }

.ad-card .bib {
    position: absolute;
    left: .75rem;
    bottom: -1.05rem;
    font-size: 1.15rem;
    z-index: 1;
}

.ad-flag {
    position: absolute;
    top: .75rem;
    left: .75rem;
    padding: .25rem .6rem;
    background: var(--gate);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 4px;
}

.ad-flag.is-reserved { left: auto; right: .75rem; background: var(--ink); }

.ad-card-body { padding: 0 .15rem; }

.ad-title {
    font-weight: 600;
    font-size: .975rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-place { margin-top: .4rem; font-size: .82rem; color: var(--ink-soft); }

/* La primera tarjeta ocupa dos columnas y dos filas */
@media (min-width: 992px) {
    .ad-grid.has-feature > :first-child .ad-card-img { aspect-ratio: auto; height: 100%; min-height: 20rem; }
    .ad-grid.has-feature > :first-child .bib { font-size: 1.6rem; }
    .ad-grid.has-feature > :first-child .ad-title { font-size: 1.2rem; font-weight: 700; }
}

/* ---------- Cómo funciona ---------- */
.steps-band { background: var(--paper); border-block: 1px solid var(--line); }

.steps { display: grid; gap: 2rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.steps li { position: relative; }

.step-num {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
    font-stretch: var(--stretch-display);
    font-weight: 900;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--water);
}

.step-num::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.steps li:last-child .step-num::after { display: none; }

.steps h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.steps p { margin: 0; color: var(--ink-soft); max-width: 32ch; }

/* ---------- Llamada a vender ---------- */
.sell-cta {
    position: relative;
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    background:
        repeating-linear-gradient(to bottom, transparent 0 55px, rgba(255, 255, 255, .12) 55px 56px),
        var(--gate);
    color: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

@media (min-width: 768px) { .sell-cta { grid-template-columns: 1fr auto; } }

.sell-cta h2 { color: #fff; font-stretch: var(--stretch-display); font-weight: 900; margin: 0 0 .5rem; max-width: 18ch; }
.sell-cta p { margin: 0; font-size: 1.1rem; max-width: 38ch; color: rgba(255, 255, 255, .95); }

/* ---------- Buscador ---------- */
.results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-bottom: 1.5rem;
}

.results-head h1 { margin: 0; }
.results-count { color: var(--ink-soft); font-weight: 600; }

.filters { position: static; border-radius: var(--radius-lg); }

@media (min-width: 992px) {
    .filters { position: sticky; top: calc(var(--header-h) + 1rem); }
}

.filters .filters-title { font-stretch: var(--stretch-heading); font-weight: 800; font-size: 1.1rem; margin-bottom: 1rem; }

/* ---------- Detalle ---------- */
.gallery-main { width: 100%; max-height: 560px; object-fit: contain; background: var(--ink-deep); border-radius: var(--radius-lg); }
.gallery-thumbs { display: flex; gap: .5rem; overflow-x: auto; }

.gallery-thumbs img {
    width: 104px;
    height: 78px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.gallery-empty { aspect-ratio: 4 / 3; background: var(--water-tint); border-radius: var(--radius-lg); }
.ad-description { white-space: pre-line; overflow-wrap: anywhere; max-width: 68ch; font-size: 1.05rem; line-height: 1.65; }

.attributes { margin: 0; }
.attributes dt, .attributes dd { padding-block: .6rem; border-bottom: 1px solid var(--line); margin: 0; }
.attributes dt { font-weight: 500 !important; }
.attributes dd { font-weight: 600; }

@media (min-width: 992px) { .buy-sticky { position: sticky; top: calc(var(--header-h) + 1rem); } }

.buy-card { border-radius: var(--radius-xl); padding: 1.5rem; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.facts li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; line-height: 1.3; }
.facts .bi { color: var(--water); font-size: 1.15rem; line-height: 1; }
.facts small { display: block; color: var(--ink-soft); font-size: .75rem; }

.seller { display: flex; align-items: center; gap: .85rem; }

.avatar {
    width: 2.9rem;
    height: 2.9rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-stretch: var(--stretch-heading);
    font-weight: 800;
    font-size: 1.1rem;
}

.safety {
    border-radius: var(--radius-lg);
    background: var(--water-tint);
    padding: 1rem 1.15rem;
    font-size: .875rem;
}

.safety h2 { font-size: 1rem; font-stretch: var(--p-width-normal); margin-bottom: .4rem; }
.safety ul { padding-left: 1.1rem; margin: 0; }

/* ---------- Edición ---------- */
.photo-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.photo-item { position: relative; }
.photo-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.photo-item:first-child img { outline: 3px solid var(--gate); }

.photo-actions { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }

.my-ad-thumb img { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius); }

.legal { max-width: 46rem; }
.legal h2 { font-size: 1.25rem; margin-top: 1.75rem; }

/* ---------- Asistente de publicación ---------- */
.wizard-steps { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; padding: 0; font-size: .9rem; }
.wizard-steps .btn-link { text-decoration: none; color: var(--ink-soft); }

.wizard-steps .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: .8rem;
    font-weight: 700;
}

.wizard-steps li.done .btn-link { color: var(--water); }
.wizard-steps li.active .btn-link { color: var(--ink); font-weight: 700; }
.wizard-steps li.active .step-number { background: var(--gate); border-color: var(--gate); color: #fff; }

.choice-tile {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: .95rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    transition: border-color .12s, background-color .12s;
}

.choice-tile:hover { border-color: var(--ink); }
.choice-tile.selected { border-color: var(--water); box-shadow: inset 0 0 0 1px var(--water); background: var(--water-tint); }
.choice-more { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }

.review dt { font-weight: 500; color: var(--ink-soft); }
.review-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius); }
.metric-bar { height: 3px; background: var(--water); opacity: .5; border-radius: 2px; margin-left: auto; }

/* ---------- Cuenta: formularios de identidad como tarjeta ---------- */
main > .row > .col-lg-6 > section,
main > .row > .col-md-4 > section,
main > .row > .col-lg-4 > section {
    padding: 1.75rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
}

main > h1:first-child { margin-bottom: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .ad-card:hover .ad-card-img { transform: none; }
    .hero-map .paddler { animation: none; offset-distance: 30%; }
}

/* ---------- Plantilla Blazor ---------- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Se ha producido un error."
    }

/* ---------- Cuerda de boyas (divisor de marca) ---------- */
.rope {
    height: 12px;
    background-image:
        radial-gradient(circle at 12px 50%, var(--gate) 0 5.4px, transparent 5.9px),
        radial-gradient(circle at 36px 50%, #fff 0 5.4px, transparent 5.9px),
        linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35));
    background-size: 48px 12px, 48px 12px, 100% 1px;
    background-repeat: repeat-x, repeat-x, no-repeat;
    background-position: 0 0, 0 0, 0 50%;
}

.cat-tile > .bi { font-size: 3.6rem; line-height: 1; color: var(--water); }
.cat-tile:hover > .bi { color: var(--bib); }

main > .row section h2 { font-size: 1.2rem; font-stretch: var(--p-width-normal); font-weight: 700; margin-bottom: 1rem; }

.section-head { flex-wrap: wrap; }
.section-head > div { flex: 1 1 16rem; }

/* ---- Chat ---- */
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }

.chat {
    display: flex;
    flex-direction: column;
    max-width: 46rem;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--line);
}

.chat-log {
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    height: min(60vh, 32rem);
    overflow-y: auto;
    padding: 1rem;
    background: var(--foam);
}

.chat-msg { display: flex; flex-direction: column; max-width: 80%; }
.chat-msg-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg-theirs { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
    padding: .5rem .8rem;
    border-radius: var(--radius-lg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.chat-msg-mine .chat-bubble { background: var(--water); color: #fff; }
.chat-msg-theirs .chat-bubble { background: var(--paper); border: 1px solid var(--line); }
.chat-time { color: var(--ink-soft); font-size: .75rem; margin-top: .15rem; }

.chat-form {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    padding: .75rem 1rem;
    border-top: 1px solid var(--line);
}
.chat-form textarea { resize: none; }

.chat-unread { background: var(--water-tint); }