/* ---------- Fuentes variables auto-alojadas ---------- */
@font-face {
    font-family: "MonaSans";
    src: url("../fonts/MonaSans.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Erode";
    src: url("../fonts/Erode.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
/* =========================================================
   Tinta: #333947 · Marca: #03C5B0 · Secundario: #E59501
   ========================================================= */
:root {
    --ink: #333947;
    --ink-90: rgba(51, 57, 71, 0.9);
    --ink-70: rgba(51, 57, 71, 0.7);
    --ink-60: rgba(51, 57, 71, 0.6);
    --ink-55: rgba(51, 57, 71, 0.55);
    --ink-45: rgba(51, 57, 71, 0.45);
    --ink-30: rgba(51, 57, 71, 0.3);
    --ink-15: rgba(51, 57, 71, 0.15);
    --ink-10: rgba(51, 57, 71, 0.1);
    --ink-04: rgba(51, 57, 71, 0.04);
    --brand: #03c5b0;
    --brand-10: rgba(3, 197, 176, 0.12);
    --accent: #e59501;
    --accent-15: rgba(229, 149, 1, 0.15);
    --bg: #fff;
    --shell: 1330px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --shadow-card: 0 24px 60px -30px rgba(51, 57, 71, 0.35);
    --shadow-big: 0 40px 80px -40px rgba(51, 57, 71, 0.4);
    --font-sans: "MonaSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Erode", Georgia, "Times New Roman", serif;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img {
    max-width: 100%;
    display: block;
}
a {
    color: inherit;
}
[hidden] {
    display: none !important;
}
::selection {
    background: var(--brand);
    color: #fff;
}
h1,
h2,
h3 {
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}
p {
    margin: 0;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
button {
    font: inherit;
    cursor: pointer;
}
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.skip-link {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.2s;
}
.skip-link:focus {
    transform: none;
}
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- Layout ---------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 20px;
}
@media (min-width: 768px) {
    .shell {
        padding-inline: 40px;
    }
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-60);
    margin: 0;
}
.eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--brand);
    flex: none;
}
.eyebrow__dot--ink {
    background: var(--ink-30);
}
.eyebrow__dot--accent {
    background: var(--accent);
}
.eyebrow--light {
    color: rgba(255, 255, 255, 0.6);
}
.h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 500;
}
.h2 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 500;
}
.h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
}
.dot-brand {
    color: var(--brand);
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.8rem 1.6rem;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
}
.btn svg {
    width: 1rem;
    height: 1rem;
}
.btn--ink {
    background: var(--ink);
    color: #fff;
}
.btn--ink:hover {
    background: var(--brand);
    color: var(--ink);
}
.btn--brand {
    background: var(--brand);
    color: var(--ink);
}
.btn--brand:hover {
    background: var(--accent);
}
.btn--ghost {
    border-color: var(--ink-15);
}
.btn--ghost:hover {
    border-color: var(--ink);
}
.btn--ghost-light {
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.btn--ghost-light:hover {
    border-color: rgba(255, 255, 255, 0.6);
}
.btn--block {
    width: 100%;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}
.link-arrow svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s;
}
.link-arrow:hover svg {
    transform: translateX(2px);
}
.link-arrow--lg {
    font-size: 1rem;
    gap: 0.5rem;
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.link-arrow--lg:hover {
    color: var(--brand);
}

/* =========================================================
   CABECERA + NAVEGACIÓN + DESPLEGABLES + DRAWER (bloque único)
   ========================================================= */

/* ---------- Cabecera ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-10)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:64px}
@media(min-width:768px){.header-inner{height:72px}}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand__mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--ink);color:#fff;font-family:var(--font-display);font-size:1.1rem;font-weight:600}
.brand__name{font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.brand .custom-logo{height:40px;width:auto}
.nav-desktop{display:none}
@media(min-width:1024px){.nav-desktop{display:block}}
.nav-desktop ul{display:flex;gap:2rem;align-items:center}
.nav-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--ink-15);background:none;color:var(--ink)}
.nav-toggle svg{width:20px;height:20px}
@media(min-width:1024px){.nav-toggle{display:none}}
.header-actions{display:flex;align-items:center;gap:.75rem}
.header-cta{display:none}
@media(min-width:640px){.header-cta{display:inline-flex}}

/* ---------- Nav items ---------- */
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:0;font-size:.875rem;font-weight:500;color:var(--ink-70);text-decoration:none;transition:color .2s}
.nav-link:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px}
.nav-link .chev{width:12px;height:12px;transition:transform .25s}
.has-mega.is-open>.mega-trigger{color:var(--ink)}
.has-mega.is-open>.mega-trigger .chev{transform:rotate(180deg)}

/* ---------- Items del desplegable (compartidos) ---------- */
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.25rem}
.mega-item{
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ink-70);
    text-decoration: none;
    display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;
    border-radius:var(--r-sm);
    text-decoration:none;
    transition:background-color .15s, padding-left .25s cubic-bezier(.16,1,.3,1)
}
.mega-item::before{content:"§";font-family:var(--font-display);font-weight:500;font-size:.85rem;line-height:1;color:var(--ink-30);transition:color .2s}
@supports (content:"x" / ""){.mega-item::before{content:"§" / ""}}
.mega-item:hover{
    background:var(--ink-04);
    padding-left:1rem;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.mega-item:hover::before{color:var(--brand)}
.mega-all{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.35rem;padding:.75rem;border-top:1px solid var(--ink-10);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);text-decoration:none;transition:color .2s,background-color .2s}
.mega-all:hover{color:var(--ink);background:var(--ink-04);border-radius: 0 0 var(--r-sm) var(--r-sm);}
.mega-all svg{width:14px;height:14px}
.has-mega.is-open .mega-item{animation:mega-in .45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(40ms + var(--i,0) * 22ms)}
@keyframes mega-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- Desplegable en escritorio: popover ---------- */
@media(min-width:1024px){
    .has-mega .mega-panel{position:absolute;top:100%;left:50%;width:28rem;padding:14px 0 0;background:none;border:0;box-shadow:none;border-radius:0;visibility:hidden;opacity:0;transform:translate(-50%,10px) scale(.97);transform-origin:top center;transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s}
    .has-mega .mega-inner{background:#fff;border:1px solid var(--ink-10);border-radius:var(--r-md);padding:.5rem;box-shadow:0 30px 70px -20px rgba(51,57,71,.35)}
    .has-mega.is-open .mega-panel{visibility:visible;opacity:1;transform:translate(-50%,0) scale(1);transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1)}
}

/* ---------- Drawer móvil ---------- */
.mnav{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.mnav.is-open{visibility:visible;pointer-events:auto}
.mnav__overlay{position:absolute;inset:0;background:rgba(51,57,71,.45);opacity:0;transition:opacity .3s ease}
.mnav.is-open .mnav__overlay{opacity:1}
.mnav__panel{position:absolute;top:0;right:0;bottom:0;width:min(24rem,88vw);display:flex;flex-direction:column;background:#fff;box-shadow:-20px 0 60px rgba(51,57,71,.25);transform:translateX(100%);transition:transform .38s cubic-bezier(.16,1,.3,1)}
.mnav.is-open .mnav__panel{transform:none}
.mnav__head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--ink-10)}
.mnav__close{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--ink-15);background:none;color:var(--ink)}
.mnav__close svg{width:18px;height:18px}
.mnav__body{flex:1;overflow-y:auto;padding:1rem 1.25rem}
.mnav__body ul{display:block}
.mnav__body li{border-bottom:1px solid var(--ink-10)}
.mnav__body .nav-link{width:100%;justify-content:space-between;padding:1rem 0;font-size:1rem}
.mnav__foot{display:grid;gap:.6rem;padding:1.25rem;border-top:1px solid var(--ink-10)}
html.u-lock{overflow:hidden}

/* Acordeón del drawer + blindaje frente a las reglas de escritorio */
.mnav .mega-panel{position:static;width:auto;padding:0;background:none;border:0;box-shadow:none;border-radius:0;opacity:1;transform:none;display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s}
.mnav .has-mega.is-open .mega-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1)}
.mnav .mega-inner{overflow:hidden;background:none;border:0;box-shadow:none;border-radius:0}
.mnav .mega-grid{grid-template-columns:1fr;gap:.1rem;padding:.25rem 0 .75rem}
.mnav .mega-all{justify-content:flex-start;border-top:0;padding-top:0}

@media(prefers-reduced-motion:reduce){
    .has-mega.is-open .mega-item{animation:none}
    .has-mega .mega-panel,.mnav .mega-panel,.mnav__panel,.mnav__overlay,.nav-link .chev{transition:none}
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
}
.hero__deco {
    position: absolute;
    right: -3rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 26rem;
    line-height: 1;
    color: var(--ink-04);
    pointer-events: none;
    user-select: none;
    display: none;
}
@media (min-width: 1200px) {
    .hero__deco {
        display: block;
    }
}
.hero__grid {
    display: grid;
    gap: 3.5rem;
    padding-block: 4rem;
}
@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: 7fr 5fr;
        align-items: center;
        padding-block: 6rem;
    }
}
.hero__title {
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5.5vw, 4.6rem);
    font-weight: 500;
    line-height: 1.04;
}
.hero__title em {
    font-weight: 300;
    font-style: italic;
}
.hero__lead {
    margin-top: 1.5rem;
    max-width: 36rem;
    font-size: 1.1rem;
    color: var(--ink-70);
}

/* Buscador */
.search-box {
    margin-top: 2.25rem;
}
.search-box__bar {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--ink);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s;
}
.search-box__bar:focus-within {
    border-color: var(--brand);
}
@media (min-width: 768px) {
    .search-box__bar {
        flex-direction: row;
        align-items: stretch;
    }
}
.search-box__divider {
    display: none;
    width: 1px;
    background: var(--ink-10);
}
@media (min-width: 768px) {
    .search-box__divider {
        display: block;
    }
}
.search-field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}
.search-field__icon {
    position: absolute;
    left: 1.25rem;
    width: 20px;
    height: 20px;
    color: var(--ink-45);
    pointer-events: none;
}
.search-field input {
    flex: 1;
    height: 56px;
    border: 0;
    background: none;
    padding: 0 1rem 0 3.25rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    font-variation-settings: "wght" 500, "wdth" 100, "opsz" 21;
    color: var(--ink);
}
.search-field input::placeholder {
    color: var(--ink-45);
}
.search-field input:focus {
    outline: none;
}
.search-select {
    position: relative;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--ink-10);
}
@media (min-width: 768px) {
    .search-select {
        border-top: 0;
    }
}
.search-select select {
    appearance: none;
    -webkit-appearance: none;
    height: 56px;
    width: 100%;
    border: 0;
    background: transparent
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333947' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 14px center/14px;
    padding: 0 2.5rem 0 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    font-variation-settings: "wght" 500, "wdth" 100, "opsz" 21;
    color: var(--ink-90);
}
.search-select select:focus {
    outline: none;
}
.search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 8px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    padding-inline: 1.75rem;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.search-submit:hover {
    background: var(--brand);
    color: var(--ink);
}
.search-submit svg {
    width: 16px;
    height: 16px;
}

/* Sugerencias en vivo */
.search-box__wrap {
    position: relative;
}
.search-suggest {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 12px);
    z-index: 40;
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-md);
    box-shadow: 0 24px 60px -20px rgba(51, 57, 71, 0.35);
    overflow: hidden;
    text-align: left;
}
.search-suggest ul {
    max-height: 340px;
    overflow: auto;
}
.sg-item a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: background-color 0.15s;
}
.sg-item a:hover,
.sg-item[aria-selected="true"] a {
    background: var(--ink-04);
}
.sg-thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex: none;
}
.sg-thumb.avatar--initials {
    font-size:.95rem;
    border-radius:10px
}
.sg-body {
    flex: 1;
    min-width: 0;
}
.sg-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-title .sg-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    vertical-align: middle;
    margin-left: 0.4rem;
}
.sg-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--ink-55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-dot {
    background: var(--brand);
}
.sg-dot--premium {
    background: var(--accent);
}
.sg-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    flex: none;
}
.sg-rating svg {
    width: 14px;
    height: 14px;
    fill: var(--accent);
}
.sg-foot {
    border-top: 1px solid var(--ink-10);
    padding: 0.75rem;
}
.sg-foot button {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    padding: 0.65rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.sg-foot button:hover {
    background: var(--brand);
    color: var(--ink);
}
.sg-empty,
.sg-loading {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-55);
}
.sg-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--ink-15);
    border-top-color: var(--ink);
    animation: ea-spin 0.7s linear infinite;
}
@keyframes ea-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Chips */
.chips {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.85rem;
}
.chips__label {
    color: var(--ink-45);
}
.filter-popular .chips li {
    display: inline-flex;
}
.chip {
    border: 1px solid var(--ink-15);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    color: var(--ink-70);
    text-decoration: none;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.chip:hover {
    border-color: var(--brand);
    color: var(--ink);
}

/* Stats */
.stats {
    margin-top: 3rem;
    max-width: 36rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 0;
}
.stat {
    padding-inline: 1.25rem;
}
.stat:first-child {
    padding-left: 0;
}
.stat + .stat {
    border-left: 1px solid var(--ink-10);
}
.stat dd {
    margin: 0;
}
.stat dt {
    margin-top: 0.25rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-45);
}

/* Tarjeta destacada del hero */
.spot-card {
    position: relative;
    max-width: 380px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: 28px;
    padding: 12px;
    box-shadow: var(--shadow-big);
    transform: rotate(-1.5deg);
    transition: transform 0.5s;
}
.spot-card:hover {
    transform: rotate(0);
}
.spot-card__badge {
    position: absolute;
    top: -14px;
    right: 24px;
    z-index: 2;
    background: var(--accent);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(51, 57, 71, 0.2);
}
.spot-card__media {
    border-radius: 20px;
    overflow: hidden;
}
.avatar {
    display: block;
    overflow: hidden;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar--hero {
    aspect-ratio: 4/3;
}
.avatar--wide {
    aspect-ratio: 16/9;
}
.avatar--row {
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    flex: none;
}
@media (min-width: 768px) {
    .avatar--row {
        width: 72px;
        height: 72px;
    }
}
.avatar--ph {
    width: 144px;
    height: 144px;
    border-radius: 24px;
}
@media (min-width: 768px) {
    .avatar--ph {
        width: 176px;
        height: 176px;
    }
}
.avatar--initials {
    display: grid;
    place-items: center;
    background: hsl(var(--av-hue, 210) 32% 90%);
    color: hsl(var(--av-hue, 210) 35% 32%);
    font-family: var(--font-display);
    font-weight: 600;
}
.avatar--hero.avatar--initials,
.avatar--wide.avatar--initials {
    font-size: 3.5rem;
}
.avatar--row.avatar--initials,
.avatar--ph.avatar--initials {
    font-size: 1.5rem;
}
.spot-card__body {
    padding: 1.25rem;
}
.spot-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.spot-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
}
.spot-name a {
    text-decoration: none;
}
.spot-name a:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.spot-meta {
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--ink-60);
}
.vcheck {
    width: 16px;
    height: 16px;
    color: var(--brand);
    flex: none;
}
.vcheck--lg {
    width: 18px;
    height: 18px;
}
.spot-foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.spot-note {
    max-width: 380px;
    margin: 1.5rem auto 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--ink-55);
}
.pulse-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex: none;
}
.pulse-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.6;
    animation: pulse 2s ease-out infinite;
}
.pulse-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--brand);
}
@keyframes pulse {
    from {
        transform: scale(1);
        opacity: 0.6;
    }
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pulse-dot::before {
        animation: none;
    }
}

/* ---------- Marquesina ---------- */
.marquee-section {
    border-top: 1px solid var(--ink-10);
    padding-block: 3rem;
}
@media (min-width: 768px) {
    .marquee-section {
        padding-block: 4rem;
    }
}
.marquee-section__head {
    margin-bottom: 2rem;
}
.marquee {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 5%,
        #000 95%,
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 5%,
        #000 95%,
        transparent
    );
}
.marquee + .marquee {
    margin-top: 1.5rem;
}
.marquee__group {
    display: flex;
    flex: none;
    width: max-content;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.25rem);
    padding-inline-end: clamp(2.5rem, 5vw, 4.25rem);
    animation: ea-marquee var(--marquee-duration, 40s) linear infinite;
    will-change: transform;
}
.marquee--reverse .marquee__group {
    animation-name: ea-marquee-reverse;
}
.marquee.is-paused .marquee__group {
    animation-play-state: paused;
}
@keyframes ea-marquee {
    to {
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes ea-marquee-reverse {
    from {
        transform: translate3d(-100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .marquee {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .marquee::-webkit-scrollbar {
        display: none;
    }
    .marquee__group {
        animation: none;
    }
}
.logotype {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
    color: var(--ink-70);
}
.logotype__mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--ink-04);
    border: 1px solid var(--ink-10);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
}
.logotype__img {
    height: 26px;
    width: auto;
    object-fit: contain;
}
.logotype--serif {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.35rem;
}
.logotype--caps {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.logotype--medium {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
.logotype--wide {
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ---------- Especialidades ---------- */
.index-section {
    border-top: 1px solid var(--ink-10);
    padding-block: 4rem;
}
@media (min-width: 768px) {
    .index-section {
        padding-block: 6rem;
    }
}
.section-head {
    margin-bottom: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}
.section-head .h2 {
    margin-top: 1rem;
}
.section-head__note {
    max-width: 22rem;
    font-size: 0.875rem;
    color: var(--ink-60);
}
.spec-list {
    display: grid;
    column-gap: 3.5rem;
}
@media (min-width: 768px) {
    .spec-list {
        grid-template-columns: 1fr 1fr;
    }
}
.spec-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem 1rem;
    margin-inline: -1rem;
    border-top: 1px solid var(--ink-10);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background-color 0.2s;
}
.spec-item:hover {
    background: var(--ink);
    border-top: 1px solid transparent;
}
.spec-name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 500;
    transition: color 0.2s;
}
.spec-item:hover .spec-name {
    color: #fff;
}
.spec-side {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.spec-count {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-45);
    transition: color 0.2s;
}
.spec-item:hover .spec-count {
    color: rgba(255, 255, 255, 0.6);
}
.spec-arrow {
    width: 20px;
    height: 20px;
    color: var(--ink-30);
    transition:
        transform 0.2s,
        color 0.2s;
    align-self: center;
}
.spec-item:hover .spec-arrow {
    transform: translate(2px, -2px);
    color: var(--brand);
}

/* ---------- Destacados ---------- */
.feat-section {
    border-top: 1px solid var(--ink-10);
    padding-block: 4rem;
}
@media (min-width: 768px) {
    .feat-section {
        padding-block: 6rem;
    }
}
.feat-grid {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .feat-grid {
        grid-template-columns: 5fr 7fr;
        align-items: start;
    }
}
.feat-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: box-shadow 0.3s;
}
.feat-card:hover {
    box-shadow: var(--shadow-big);
}
.cover-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.feat-card__media img,
.feat-card__media .avatar--initials {
    transition: transform 0.7s;
}
.feat-card:hover .feat-card__media img,
.feat-card:hover .feat-card__media .avatar--initials {
    transform: scale(1.03);
}
.feat-card__body {
    padding: 1.75rem;
}
.feat-title {
    margin-top: 0.75rem;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
}
.feat-meta {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--ink-60);
}
.feat-desc {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--ink-70);
}
.feat-foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ink-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.verified {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.rows {
    display: grid;
    gap: 0.75rem;
}
.rows--feat {
    align-content: start;
}
.lawyer-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-md);
    padding: 1.25rem 1rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
@media (min-width: 768px) {
    .lawyer-row {
        gap: 1.25rem;
        padding: 1.25rem;
    }
}
.lawyer-row:hover {
    border-color: var(--ink-30);
    box-shadow: 0 20px 50px -25px rgba(51, 57, 71, 0.3);
}
.lr-body {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}
.lr-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.lr-meta {
    margin-top: 0.1rem;
    font-size: 0.85rem;
    color: var(--ink-55);
    white-space: normal;
}

/* ---------- Valor ---------- */
.value-section {
    border-top: 1px solid var(--ink-10);
    background: var(--ink-04);
    padding-block: 4rem;
}
@media (min-width: 768px) {
    .value-section {
        padding-block: 6rem;
    }
}
.value-grid {
    display: grid;
    gap: 3.5rem;
}
@media (min-width: 1024px) {
    .value-grid {
        grid-template-columns: 5fr 7fr;
    }
}
@media (min-width: 1024px) {
    .value-intro {
        position: sticky;
        top: 7rem;
    }
}
.value-intro .h2 {
    margin-top: 1rem;
}
.value-intro .h2 em {
    font-weight: 300;
    font-style: italic;
}
.value-intro__lead {
    margin-top: 1.25rem;
    color: var(--ink-70);
}
.value-intro .link-arrow--lg {
    margin-top: 1.75rem;
}
.steps {
    margin-top: 2.5rem;
    border-top: 1px solid var(--ink-10);
}
.steps li {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--ink-10);
}
.steps li span {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ink-30);
}
.steps strong {
    font-weight: 600;
}
.steps p {
    font-size: 0.85rem;
    color: var(--ink-60);
}
.value-list li {
    display: grid;
    grid-template-columns: 3rem 1fr 2rem;
    column-gap: 1.25rem;
    align-items: start;
    border-top: 1px solid var(--ink-10);
    padding-block: 1.75rem;
}
.value-list li:last-child {
    border-bottom: 1px solid var(--ink-10);
}
@media (min-width: 768px) {
    .value-list li {
        padding-block: 2.25rem;
    }
}
.value-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--ink-30);
    padding-top: 0.5rem;
    transition: color 0.2s;
}
.value-list li:hover .value-num {
    color: var(--brand);
}
.value-list h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 500;
}
.value-list p {
    margin-top: 0.6rem;
    max-width: 32rem;
    color: var(--ink-60);
}
.item-arrow {
    width: 20px;
    height: 20px;
    margin-top: 0.5rem;
    color: var(--ink-30);
    opacity: 0;
    transform: translateX(-4px);
    transition:
        transform 0.2s,
        opacity 0.2s,
        color 0.2s;
}
.value-list li:hover .item-arrow {
    opacity: 1;
    transform: none;
    color: var(--brand);
}

/* ---------- CTA ---------- */
.cta-wrap {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-xl);
    padding: 3.5rem 1.75rem;
}
@media (min-width: 768px) {
    .cta-band {
        padding: 5rem 4rem;
    }
}
.cta-band__deco {
    position: absolute;
    right: -1.5rem;
    top: -4rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    user-select: none;
}
.cta-band__inner {
    position: relative;
    max-width: 40rem;
}
.cta-band h2 {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: 1.06;
}
.cta-band h2 em {
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}
.cta-band__lead {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
}
.cta-band__actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.cta-band__note {
    margin-top: 1.5rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}
/* ---------- Prose - 404 ---------- */
.prose {
    max-width: 48rem;
    padding-block: 4rem;
}
@media (min-width: 768px) {
    .prose {
        padding-block: 6rem;
    }
}
.prose__date {
    font-size: 0.85rem;
    color: var(--ink-45);
}
.prose .h1 {
    margin-top: 0.5rem;
}
.prose__content {
    margin-top: 2rem;
    line-height: 1.7;
    color: var(--ink-90);
}
.prose__content p {
    margin-bottom: 1em;
}
.prose__content a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.prose__content img {
    border-radius: var(--r-md);
}
.err404 {
    padding-block: 6rem;
    text-align: center;
}
.err404__num {
    font-family: var(--font-display);
    font-size: 5rem;
    color: var(--ink-15);
}
.err404 .h2 {
    margin-top: 0.5rem;
}
.err404__lead {
    margin: 0.75rem auto 2rem;
    max-width: 28rem;
    color: var(--ink-60);
}
/* ---------- Pie ---------- */
.site-footer {
    border-top: 1px solid var(--ink-10);
}
.footer-grid {
    display: grid;
    gap: 2.5rem;
    padding-block: 3.5rem;
}
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 4fr 3fr 2fr 3fr;
    }
}
.footer-col--brand p {
    margin-top: 1rem;
    max-width: 18rem;
    font-size: 0.85rem;
    color: var(--ink-60);
}
.footer-col h3 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-45);
}
.footer-col ul {
    margin-top: 1rem;
    display: grid;
    gap: 0.6rem;
}
.footer-col a {
    font-size: 0.875rem;
    color: var(--ink-70);
    text-decoration: none;
}
.footer-col a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.footer-bottom {
    border-top: 1px solid var(--ink-10);
}
.footer-bottom__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 1.25rem;
    font-size: 0.72rem;
    color: var(--ink-45);
}
/* ---------- Perfil individual ---------- */
.crumbs {
    font-size: 0.72rem;
    color: var(--ink-45);
}
.crumbs a {
    text-decoration: none;
    color: inherit;
}
.crumbs a:hover {
    color: var(--ink);
}
.profile-head {
    border-bottom: 1px solid var(--ink-10);
    padding-block: 2.5rem;
}
@media (min-width: 768px) {
    .profile-head {
        padding-block: 3.5rem;
    }
}
.ph-grid {
    margin-top: 2rem;
    display: grid;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 768px) {
    .ph-grid {
        grid-template-columns: auto 1fr;
    }
}
.ph-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.ph-title-row .h1 {
    font-size: clamp(2rem, 3.6vw, 3rem);
}
.verified-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-10);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
}
.ph-sub {
    margin-top: 0.5rem;
    color: var(--ink-60);
}
.ph-rating {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}
.ph-rating > span:last-child {
    font-size: 0.85rem;
    color: var(--ink-45);
}
.profile-grid {
    display: grid;
    gap: 3rem;
    padding-block: 3rem;
}
@media (min-width: 1024px) {
    .profile-grid {
        grid-template-columns: 8fr 4fr;
    }
}
.profile-bio {
    margin-top: 1rem;
    line-height: 1.7;
    color: var(--ink-90);
}
.profile-bio p {
    margin-bottom: 1em;
}
.dl-grid {
    margin-top: 2.5rem;
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .dl-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 2.5rem;
    }
}
.dl-grid > div {
    border-top: 1px solid var(--ink-10);
    padding-top: 1rem;
}
.dl-grid dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-45);
}
.dl-grid dd {
    margin: 0.25rem 0 0;
    font-weight: 500;
}
.related {
    margin-top: 3.5rem;
}
.related .rows {
    margin-top: 1.25rem;
}
.profile-side {
    min-width: 0;
}
.side-card {
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-card);
}
@media (min-width: 1024px) {
    .side-card {
        position: sticky;
        top: 7rem;
    }
}
.side-card__label {
    font-size: 0.85rem;
    color: var(--ink-55);
}
.side-card__note {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--ink-55);
}
.side-actions {
    margin-top: 1.5rem;
    display: grid;
    gap: 0.75rem;
}
.side-trust {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ink-10);
    display: grid;
    gap: 0.6rem;
}
.side-trust li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.85rem;
    color: var(--ink-60);
}
.side-trust li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}

/* ---------- Alta ---------- */
.alta-page {
    padding-block: 4rem;
}
@media (min-width: 768px) {
    .alta-page {
        padding-block: 6rem;
    }
}
.alta-page__inner {
    max-width: 48rem;
    margin-inline: auto;
}
.alta-page .h1 {
    margin-top: 1rem;
}
.alta-page__lead {
    margin-top: 1rem;
    color: var(--ink-60);
}
.alta-page__form {
    margin-top: 2.5rem;
    background: #fff;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}
.alta-page__note {margin-top:1.25rem; font-size:.85rem; color:var(--ink-55)}
@media (min-width: 768px) {
    .alta-page__form {
        padding: 2.5rem;
    }
}
/* ---------- Alta: pricing cards + switcher ---------- */
.plans-grid{display:grid;gap:1.5rem;margin-top:2.5rem}
@media(min-width:768px){.plans-grid{grid-template-columns:1fr 1fr;align-items:stretch}}
.plan-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink-10);border-radius:var(--r-lg);padding:2rem}
.plan-card--featured{border-color:var(--accent);box-shadow:var(--shadow-card)}
.plan-card__badge{position:absolute;top:-12px;right:1.5rem;background:var(--accent);color:var(--ink);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.35rem .9rem;border-radius:999px}
.plan-card__name{font-family:var(--font-display);font-size:1.5rem;font-weight:600}
.plan-card__price{margin-top:.25rem;font-family:var(--font-display);font-size:2.25rem;font-weight:600;letter-spacing:-.02em}
.plan-card__claim{margin-top:.25rem;font-size:.9rem;color:var(--ink-60);padding-bottom:1.25rem;border-bottom:1px solid var(--ink-10)}
.plan-features{margin:1.25rem 0 1.75rem;display:grid;gap:.6rem;flex:1}
.plan-features li{position:relative;padding-left:1.6rem;font-size:.9rem;color:var(--ink-70)}
.plan-features li::before{position:absolute;left:0;top:0;font-weight:700}
.plan-features .is-yes::before{content:"✓";color:var(--brand)}
.plan-features .is-no::before{content:"—";color:var(--ink-30)}
.plan-features .is-soon::before{content:"•";color:var(--accent)}
.plan-features em{font-style:normal;font-size:.78rem;color:var(--ink-45)}
.plan-switch-wrap{margin-top:3.5rem}
.plan-switch{display:inline-flex;background:var(--ink-04);border:1px solid var(--ink-10);border-radius:999px;padding:4px;gap:4px}
.plan-switch__btn{border:0;background:none;border-radius:999px;padding:.6rem 1.5rem;font-weight:600;font-size:.9rem;color:var(--ink-60);transition:background-color .2s,color .2s}
.plan-switch__btn:hover{color:var(--ink)}
.plan-switch__btn.is-active{background:var(--ink);color:#fff}
.plan-switch__tag{display:inline-block;margin-left:.4rem;background:var(--accent);color:var(--ink);border-radius:999px;padding:.1rem .5rem;font-size:.68rem;font-weight:700}
.plan-panel{margin-top:1.5rem}
.alta-page__note{margin-top:1.25rem;font-size:.85rem;color:var(--ink-55)}
.side-web-plain{display:block;padding:.75rem 1rem;border:1px dashed var(--ink-15);border-radius:10px;font-size:.85rem;color:var(--ink-60);text-align:center}

.field {
    margin: 0;
    display: grid;
    gap: 0.4rem;
}
.field--full {
    grid-column: 1/-1;
}
.field label {
    font-weight: 600;
    font-size: 0.875rem;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--ink-15);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font: inherit;
    color: var(--ink);
    background: #fff;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: transparent;
}
.field--check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    color: var(--ink-60);
}
.field--check input {
    width: auto;
    margin-top: 0.3em;
}
.form-actions {
    margin: 1.5rem 0 0;
}
.form-actions .btn {
    padding: 1rem 2rem;
    border-radius: 999px;
}
.hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.form-success {
    background: var(--brand-10);
    border: 1px solid var(--brand);
    border-radius: var(--r-md);
    padding: 2rem;
    text-align: center;
}
.form-success h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
}
.form-success p {
    margin-top: 0.5rem;
    color: var(--ink-70);
}

/* ---------- Logotipo en cajas ---------- */
.logo-box {
    display: grid;
    place-items: center;
    background: var(--ink-04);
    border: 1px solid var(--ink-10);
}
.logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.avatar--row.logo-box {
    border-radius: 14px;
}
.avatar--ph.logo-box {
    border-radius: 24px;
}
.avatar--hero.logo-box img,
.avatar--wide.logo-box img {
    padding: 2.5rem
}

/* ---------- Chips y badges ---------- */
.cat-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--ink-04);
    border: 1px solid var(--ink-10);
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ink-70);
}
.badges {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.badges--mini {
    margin-top: 0.4rem;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--ink-15);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-70);
}
.badge--ver {
    background: var(--brand-10);
    border-color: transparent;
    color: var(--ink);
    font-weight: 600;
}
.badge--premium {
    background: var(--accent);
    border-color: transparent;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.62rem;
    padding: 0.4rem 0.7rem;
}
.ribbon{
    position:absolute;
    top:1rem;
    left:1rem;
    z-index:2;
    pointer-events:none;
    border-radius:999px;
    padding:.4rem 1rem;
    font-size:.66rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em
}
.ribbon--premium {
    background: var(--accent);
    color: var(--ink);
}
.lawyer-row--premium {
    border-color: rgba(229, 149, 1, 0.4);
}
.feat-card--premium {
    border-color: rgba(229, 149, 1, 0.4);
}
.lr-side {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    margin-top: 0.25rem;
    border-top: 1px solid var(--ink-04);
    padding-top: 0.75rem;
}
@media (min-width: 768px) {
    .lawyer-row {
        flex-direction: row;
        align-items: center;
        padding: 1.25rem;
    }

    .lr-meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lr-side {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.4rem;
        margin-top: 0;
        border-top: 0;
        padding-top: 0;
    }
}

.side-social {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-10);
    display: flex;
    gap: 1.25rem;
}
.side-social a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-60);
    text-decoration: none;
}
.side-social a:hover {
    color: var(--ink);
}
.btn--wa {
    background: #128c7e;
    color: #fff;
}
.btn--wa:hover {
    background: var(--brand);
    color: var(--ink);
}

/* ---------- Formulario de alta con acf_form ---------- */
.ea-rgpd {
    margin-top: 1.25rem;
    font-size: 0.78rem;
    color: var(--ink-55);
}
.ea-acf-form .acf-fields {
    border: 0;
    background: none;
    display: grid;
    gap: 1.1rem;
    padding: 0;
}
.ea-acf-form .acf-field {
    margin: 0;
    padding: 0;
    border: 0 !important;
    width: auto !important;
    clear: none;
    min-height: 0;
}
.ea-acf-form .acf-label {
    margin-bottom: 0.4rem;
}
.ea-acf-form .acf-label label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink);
}
.ea-acf-form .acf-label .acf-req {
    color: var(--accent);
}
.ea-acf-form .acf-input input[type="text"],
.ea-acf-form .acf-input input[type="email"],
.ea-acf-form .acf-input input[type="url"],
.ea-acf-form .acf-input input[type="number"],
.ea-acf-form .acf-input textarea,
.ea-acf-form .acf-input select {
    width: 100%;
    border: 1px solid var(--ink-15);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font: inherit;
    color: var(--ink);
    background: #fff;
}
.ea-acf-form .acf-input input:focus,
.ea-acf-form .acf-input textarea:focus,
.ea-acf-form .acf-input select:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: transparent;
}
.ea-acf-form .acf-input .acf-button-wrap {
    display: none;
}
.ea-acf-form .acf-form-submit {
    margin-top: 1.5rem;
}
.ea-acf-form .acf-button {
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.ea-acf-form .acf-button:hover {
    background: var(--brand);
    color: var(--ink);
}
.ea-acf-form .acf-notice {
    border-radius: 12px;
}
.hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- provincias, how-it-works, verify, detector ---------- */
.prov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.prov-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem 1rem;border:1px solid var(--ink-10);border-radius:10px;font-size:.9rem;font-weight:500;text-decoration:none;transition:border-color .2s,background-color .2s}
.prov-item:hover{border-color:var(--ink-30);background:var(--ink-04)}
.prov-item .spec-arrow{width:16px;height:16px;color:var(--ink-30)}
.steps-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.steps-grid li{border:1px solid var(--ink-10);border-radius:var(--r-md);padding:1.75rem;background:#fff}
.steps-grid li span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;font-family:var(--font-display);font-size:1.1rem;margin-bottom:1rem}
.steps-grid h3{font-family:var(--font-display);font-size:1.35rem;font-weight:500}
.steps-grid p{margin-top:.5rem;font-size:.9rem;color:var(--ink-60)}
.how-note{margin-top:2rem}
.verify-section{border-top:1px solid var(--ink-10);padding-block:4rem}
@media(min-width:768px){.verify-section{padding-block:6rem}}
.detector-feedback{margin-top:.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.85rem}
.chip--feedback{background:var(--ink);color:#fff;border:0;cursor:pointer}
.chip--feedback:hover{background:var(--brand);color:var(--ink)}
.chip--quizas{border:1px dashed var(--ink-30);color:var(--ink-60);background:none}
.stat dd{font-family:var(--font-display);font-size:1.15rem;font-weight:500;line-height:1.3}
.spot-card__badge--star{background:var(--accent)}
.page-head__order{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px}
.trust-verify{display:flex;gap:.6rem;align-items:flex-start}
.side-trust--verify li:first-child strong{font-weight:600;color:var(--ink)}