/*
 * Ríos Espinosa — main stylesheet
 * Consume tokens definidos en tokens.css. NO declarar custom properties aquí.
 *
 * Orden:
 *   1. Reset mínimo + base elements
 *   2. Tipografía (headings, body, helpers de marca)
 *   3. Utilidades (.rios-container, .rios-stack)
 *   4. Componentes base reutilizables (.rios-btn, .rios-card, .rios-eyebrow, .rios-display)
 *   5. Layout (header, footer, main)
 *   6. Bloques de página (hero, sedes, services, post-list, article)
 */


/* ============================================================
 * 1. Reset / Base
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--font-sans);
    font-size: 100%;                       /* 16px base · respeta accesibilidad */
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    letter-spacing: -0.003em;              /* tracking sutil · alivia densidad percibida de GT America Regular */
}

body { margin: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
    color: var(--color-text-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--easing-standard);
}
a:hover { color: var(--color-brand-hover); }
a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

::selection { background: var(--color-brand); color: var(--color-text-inverse); }


/* ============================================================
 * 2. Tipografía
 * ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--color-text-brand);
    line-height: var(--leading-snug);
    margin-block: 0 var(--space-3);
    text-wrap: balance;
}

h1 {
    font-size: clamp(var(--font-size-3xl), 4vw + 1rem, var(--font-size-5xl));
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}
h2 {
    font-size: clamp(var(--font-size-2xl), 2.5vw + 0.75rem, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
}
h3 {
    font-size: clamp(var(--font-size-xl), 1.5vw + 0.75rem, var(--font-size-2xl));
    font-weight: var(--font-weight-medium);
}
h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

p {
    margin-block: 0 var(--space-4);
    max-width: 70ch;
}
p:last-child { margin-bottom: 0; }

ul, ol { padding-inline-start: var(--space-6); }
li + li { margin-top: var(--space-2); }

strong, b { font-weight: var(--font-weight-bold); }

small { font-size: var(--font-size-sm); color: var(--color-text-muted); }

blockquote {
    margin: var(--space-6) 0;
    padding-inline-start: var(--space-5);
    border-inline-start: 3px solid var(--color-brand);
    font-style: italic;
    color: var(--color-text);
    max-width: 60ch;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-divider);
    margin-block: var(--space-12);
}


/* ----- Helpers tipográficos de marca ----- */

/* .rios-eyebrow — etiqueta CAPS con tracking 0.18em (patrón del manual)
 * Uso: subtítulo de sección, kicker antes de un H2, badge. */
.rios-eyebrow {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-brand);
    margin-bottom: var(--space-3);
}
.rios-eyebrow--inverse { color: var(--color-text-inverse); }
.rios-eyebrow--muted { color: var(--color-text-muted); }

/* .rios-display — titular gigante en GT America Regular (placeholder de Light).
 * Patrón del manual: Light gigante + Bold mediano en la misma composición.
 * Cuando lleguen los archivos Light, cambiar font-weight a 300. */
.rios-display {
    font-family: var(--font-sans);
    font-size: clamp(var(--font-size-4xl), 6vw + 1rem, var(--font-size-6xl));
    font-weight: var(--font-weight-regular);            /* ← cambiar a --font-weight-light cuando se incorpore */
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-text-brand);
    text-wrap: balance;
    margin-block: 0 var(--space-4);
}

/* .rios-lead — párrafo de entrada destacado */
.rios-lead {
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    max-width: 60ch;
}


/* ============================================================
 * 3. Utilidades de layout
 * ============================================================ */

.rios-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-x-padding);
}
.rios-container--sm { max-width: var(--container-sm); }
.rios-container--md { max-width: var(--container-md); }
.rios-container--lg { max-width: var(--container-lg); }

/* Stack vertical · separación uniforme entre hijos */
.rios-stack > * + * { margin-top: var(--space-4); }
.rios-stack--lg > * + * { margin-top: var(--space-8); }
.rios-stack--xl > * + * { margin-top: var(--space-12); }

/* Skip link accesibilidad */
.rios-skip-link {
    position: absolute;
    left: -9999px;
}
.rios-skip-link:focus {
    left: var(--space-2);
    top: var(--space-2);
    background: var(--color-brand);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-3);
    z-index: var(--z-toast);
    border-radius: var(--radius-sm);
}


/* ============================================================
 * 4. Componentes base
 * ============================================================ */

/* ---------- Botón ---------- */

.rios-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--easing-standard),
        color var(--duration-fast) var(--easing-standard),
        border-color var(--duration-fast) var(--easing-standard),
        transform var(--duration-fast) var(--easing-standard);
    -webkit-appearance: none;
}
.rios-btn:hover { transform: translateY(-1px); }
.rios-btn:active { transform: translateY(0); }
.rios-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.rios-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Variante primaria — fondo azul institucional */
.rios-btn--primary {
    background: var(--color-brand);
    color: var(--color-text-inverse);
}
.rios-btn--primary:hover { background: var(--color-brand-hover); color: var(--color-text-inverse); }
.rios-btn--primary:active { background: var(--color-brand-pressed); }

/* Variante outline — borde azul, fondo transparente */
.rios-btn--outline {
    background: transparent;
    color: var(--color-brand);
    border-color: var(--color-brand);
}
.rios-btn--outline:hover {
    background: var(--color-brand);
    color: var(--color-text-inverse);
}

/* Variante ghost — solo texto, sin borde */
.rios-btn--ghost {
    background: transparent;
    color: var(--color-brand);
}
.rios-btn--ghost:hover {
    background: var(--color-bg-alt);
    color: var(--color-brand);
}

/* Variante inversa — sobre fondos azules oscuros */
.rios-btn--inverse {
    background: var(--color-text-inverse);
    color: var(--color-brand);
}
.rios-btn--inverse:hover { background: var(--color-bg-alt); }

/* Tamaños */
.rios-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
.rios-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--font-size-lg); }


/* ---------- Card base ---------- */
/* .rios-card es el primitivo. Variantes específicas (sede, service, post) heredan y modifican. */

.rios-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        transform var(--duration-base) var(--easing-standard),
        box-shadow var(--duration-base) var(--easing-standard),
        border-color var(--duration-fast) var(--easing-standard);
}
.rios-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.rios-card--featured {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
}
.rios-card--brand {
    background: var(--color-bg-inverse);
    border-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
}
.rios-card--brand .rios-eyebrow { color: var(--color-text-inverse); opacity: 0.7; }
.rios-card--brand h2,
.rios-card--brand h3 { color: var(--color-text-inverse); }

.rios-card__body { padding: var(--space-6); }
.rios-card__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }


/* ---------- Motivo 4-servicios (degradado de azules) ---------- */
/* Patrón identitario del manual: 4 bloques en degradado representando las 4 áreas. */

.rios-services-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rios-services-strip__item {
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-inverse);
    text-align: center;
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-caps);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    transition: filter var(--duration-fast) var(--easing-standard);
}
.rios-services-strip__item:hover { filter: brightness(1.1); color: var(--color-text-inverse); }
.rios-services-strip__item--asesoria     { background: var(--color-service-asesoria); }
.rios-services-strip__item--fincas       { background: var(--color-service-fincas); }
.rios-services-strip__item--inmobiliaria { background: var(--color-service-inmobiliaria); }
.rios-services-strip__item--legal        { background: var(--color-service-legal); }
/* Laboral cierra el degradado con el tono más claro → texto en azul brand para contraste */
.rios-services-strip__item--laboral      { background: var(--color-service-laboral); color: var(--color-text-brand); }
.rios-services-strip__item--laboral:hover { color: var(--color-text-brand); }

@media (max-width: 640px) {
    .rios-services-strip { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
 * 5. Layout — Header / Main / Footer
 * ============================================================ */

.rios-header {
    background: var(--color-bg);
    border-bottom: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 100);
    transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.rios-header.is-scrolled {
    border-bottom-color: var(--color-border);
    box-shadow: 0 1px 12px rgba(0, 13, 51, 0.05);
}
.rios-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--space-3);
    min-height: 64px;
}

/* Logo: imagen original del cliente (PNG transparent del manual de marca) */
.rios-header__logo,
.rios-footer__logo {
    flex: 0 0 auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.rios-header__logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
}
.rios-footer__logo-img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 100%;
    /* PNG transparent del cliente es color brand sobre transparente; sobre fondo brand del footer
     * invertimos a blanco con filter (mantiene los detalles del logo intactos) */
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.rios-header__nav {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rios-nav {
    list-style: none;
    display: flex;
    align-items: stretch;            /* todos los li ocupan misma altura */
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    justify-content: center;
    line-height: 1;
}
.rios-nav__item {
    display: flex;                   /* flex (no inline-flex) evita baseline residual */
    align-items: center;
    line-height: 1;
    margin: 0;
    padding: 0;
}
.rios-nav__link, .rios-nav a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    position: relative;
    padding: var(--space-2) 0;
    line-height: 1;                  /* antes 1.4 → tilde de la Á desalineaba el primer item */
    transition: color 150ms ease;
}
/* Mobile-only items (Acceso clientes) ocultos en desktop */
.rios-nav__item--mobile-only { display: none; }
.rios-nav__link::after, .rios-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: var(--color-brand);
    transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rios-nav__link:hover::after, .rios-nav a:hover::after,
.rios-nav .current-menu-item > a::after {
    width: 100%;
}
.rios-nav__link:hover, .rios-nav a:hover { color: var(--color-brand); }

/* Header right-side cluster: lang + contact CTA + hamburger */
.rios-header__cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.rios-lang-switcher {
    list-style: none;
    display: flex;
    align-items: stretch;            /* normaliza altura de items */
    gap: 0;                          /* sin gap — el border interno los separa */
    margin: 0;
    padding: 0;
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 1;
}
.rios-lang-switcher li {
    display: flex;                   /* asegura alineación uniforme */
    align-items: stretch;
    margin: 0;
    padding: 0;
}
.rios-lang-switcher li + li {
    border-left: 1px solid var(--color-border);   /* separador limpio sin gap */
}
.rios-lang-switcher a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2);       /* 4px 8px → tokens */
    text-decoration: none;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    transition: background 150ms ease, color 150ms ease;
}
.rios-lang-switcher a:hover { background: var(--color-bg-alt); color: var(--color-brand); }
.rios-lang-switcher .is-active a {
    background: var(--color-brand);
    color: var(--color-text-inverse);
}

/* Acceso clientes — dropdown <details> CSS only */
.rios-header__access {
    position: relative;
}
.rios-header__access > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-medium);
    transition: border-color 150ms ease, color 150ms ease;
    user-select: none;
}
.rios-header__access > summary::-webkit-details-marker { display: none; }
.rios-header__access > summary::marker { content: ''; }
.rios-header__access > summary:hover { color: var(--color-brand); border-color: var(--color-brand); }
.rios-header__access[open] > summary { color: var(--color-brand); border-color: var(--color-brand); background: var(--color-bg-alt); }
.rios-header__access-arrow {
    transition: transform 200ms ease;
}
.rios-header__access[open] .rios-header__access-arrow { transform: rotate(180deg); }

.rios-header__access-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    list-style: none;
    padding: 8px;
    margin: 0;
    min-width: 280px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 32px -8px rgba(0, 13, 51, 0.18), 0 4px 12px rgba(0, 13, 51, 0.06);
    z-index: 110;
}
.rios-header__access-menu a {
    display: block;
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: background 150ms ease;
}
.rios-header__access-menu a:hover { background: var(--color-bg-alt); }
.rios-header__access-menu a strong {
    display: block;
    color: var(--color-text-brand);
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
}
.rios-header__access-menu a span {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

/* Contact CTA en header */
.rios-header__contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 200ms ease;
}
.rios-header__contact:hover { background: var(--color-brand-hover, #001a52); color: var(--color-text-inverse); }
.rios-header__contact > svg { flex-shrink: 0; }

/* Hamburger (mobile) */
.rios-header__hamburger {
    display: none;
    width: 36px; height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: stretch;
}
.rios-header__hamburger span {
    display: block;
    height: 2px;
    background: var(--color-brand);
    border-radius: 2px;
    transition: transform 200ms ease, opacity 150ms ease;
}
body.rios-nav-open .rios-header__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.rios-nav-open .rios-header__hamburger span:nth-child(2) { opacity: 0; }
body.rios-nav-open .rios-header__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rios-main { padding-block: 0 0; }

/* ---------- Scroll reveal (chiches) ---------- */
.rios-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.rios-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.rios-reveal--delay-1 { transition-delay: 100ms; }
.rios-reveal--delay-2 { transition-delay: 200ms; }
.rios-reveal--delay-3 { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
    .rios-reveal { opacity: 1; transform: none; transition: none; }
}


/* ---------- Hero ---------- */

.rios-hero {
    background: var(--color-bg-alt);
    padding-block: var(--space-hero-y);
}
.rios-hero__title { color: var(--color-text-brand); }
.rios-hero__lead {
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    max-width: 60ch;
}


/* ---------- Sedes ---------- */

.rios-sedes { padding-block: var(--space-section-y); }
.rios-sedes__heading { text-align: center; margin-bottom: var(--space-8); }
.rios-sedes__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
}
.rios-sede-card {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    transition: transform var(--duration-fast) var(--easing-standard);
}
.rios-sede-card:hover { transform: translateY(-2px); }
.rios-sede-card__link {
    display: block;
    padding: var(--space-6);
    text-decoration: none;
    color: var(--color-text-brand);
    text-align: center;
}
.rios-sede-card__name {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}


/* ---------- Services (grid de las 4 áreas como cards) ---------- */

.rios-services {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
}
.rios-service-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        transform var(--duration-base) var(--easing-standard),
        box-shadow var(--duration-base) var(--easing-standard);
}
.rios-service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.rios-service-card.is-featured {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
}
.rios-service-card a {
    display: block;
    padding: var(--space-6);
    text-decoration: none;
    color: var(--color-text);
}
.rios-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.rios-service-title { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.rios-service-summary { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }


/* ---------- Article / Page ---------- */

.rios-article__hero img {
    border-radius: var(--radius-lg);
    margin-block: var(--space-6);
}
.rios-article__body,
.rios-page__body {
    max-width: var(--container-sm);
    margin-inline: auto;
}
.rios-article__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

/* TLDR box (resumen al inicio de artículos) */
#tldr {
    background: var(--color-bg-alt);
    border-inline-start: 4px solid var(--color-brand);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-8);
    border-radius: var(--radius-sm);
}
#tldr p:last-child { margin-bottom: 0; }

/* Tablas en artículos */
.rios-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-6);
}
.rios-article__body th,
.rios-article__body td {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.rios-article__body thead th {
    background: var(--color-bg-alt);
    color: var(--color-text-brand);
}


/* ---------- Post list (archive) ---------- */

.rios-post-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}
.rios-post-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        transform var(--duration-base) var(--easing-standard),
        box-shadow var(--duration-base) var(--easing-standard);
}
.rios-post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.rios-post-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.rios-post-card__thumb img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
.rios-post-card__body { padding: var(--space-5); }
.rios-post-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}
.rios-post-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.rios-post-card__more {
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}


/* ---------- Footer (rediseñado) ---------- */

.rios-footer {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    margin-top: 0;
}
.rios-footer__top { padding-block: clamp(var(--space-10), 6vw, var(--space-12)); }
.rios-footer a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    transition: color 150ms ease;
}
.rios-footer a:hover { color: var(--color-text-inverse); }

.rios-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: clamp(var(--space-5), 4vw, var(--space-8));
}
.rios-footer__col { min-width: 0; }
.rios-footer__col--brand { padding-right: var(--space-4); }

.rios-footer__logo { display: inline-block; margin-bottom: var(--space-5); }
.rios-footer__tagline {
    color: rgba(255,255,255,.78);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    margin: 0 0 var(--space-5);
    max-width: 280px;
}
.rios-footer__social {
    display: flex;
    gap: var(--space-2);
}
.rios-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.78);
    transition: all 150ms ease;
}
.rios-footer__social a:hover {
    background: var(--color-text-inverse);
    color: var(--color-brand);
    border-color: var(--color-text-inverse);
}

.rios-footer__heading {
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 var(--space-4);
    opacity: 0.9;
}

.rios-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rios-footer__list li {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}
.rios-footer__list--contact li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.rios-footer__list--contact li > svg {
    flex-shrink: 0;
    color: rgba(255,255,255,.6);
}

.rios-footer__col--sedes .rios-footer__list a {
    display: block;
    line-height: 1.35;
}
.rios-footer__col--sedes .rios-footer__list strong {
    display: block;
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
}
.rios-footer__col--sedes .rios-footer__list span {
    display: block;
    color: rgba(255,255,255,.6);
    font-size: var(--font-size-xs);
}

.rios-footer__dpd {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255,255,255,.15);
    font-size: var(--font-size-xs);
}
.rios-footer__dpd a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255,255,255,.7);
}
.rios-footer__dpd a:hover { color: var(--color-text-inverse); }

.rios-footer__copy {
    background: rgba(0, 0, 0, 0.18);
    padding-block: var(--space-4);
    font-size: var(--font-size-xs);
}
.rios-footer__copy-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.rios-footer__copy small {
    color: rgba(255,255,255,.6);
}
.rios-footer__legal-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    line-height: 1;
}
.rios-footer__legal-menu li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}
.rios-footer__legal-menu a {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size-xs);   /* 12px tokenizado, antes 11px hardcoded */
    line-height: 1;
}
.rios-footer__legal-menu a:hover { color: var(--color-text-inverse); }

@media (max-width: 900px) {
    .rios-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .rios-footer__col--brand { grid-column: 1 / -1; padding-right: 0; max-width: 100%; }
    .rios-footer__copy-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
    .rios-footer__grid { grid-template-columns: 1fr; }
    .rios-footer__legal-menu { flex-wrap: wrap; gap: var(--space-3); }
}


/* ============================================================
 * 6. Iconografía
 * ============================================================ */

.rios-icon {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex-shrink: 0;
    line-height: 0;
}

.rios-icon--brand { color: var(--color-brand); }
.rios-icon--muted { color: var(--color-text-muted); }
.rios-icon--inverse { color: var(--color-text-inverse); }


/* ============================================================
 * 7. Imágenes — ratios, duotone, overlays
 * ============================================================ */

.rios-image {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    position: relative;
}

.rios-image > img,
.rios-image > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ratios estándar */
.rios-image--16x9 { aspect-ratio: 16 / 9; }
.rios-image--4x3 { aspect-ratio: 4 / 3; }
.rios-image--3x2 { aspect-ratio: 3 / 2; }
.rios-image--1x1 { aspect-ratio: 1 / 1; }
.rios-image--3x4 { aspect-ratio: 3 / 4; }

/* Squared (no radius) — para heroes full-bleed */
.rios-image--square { border-radius: 0; }

/* Duotone: B/N con tinte muy sutil de primario.
 * Para retratos del equipo, basta el grayscale — overlay azul fuerte se ve "alien".
 * Para paisajes/sedes, opcional con .rios-image--duotone--strong (más tinte). */
.rios-image--duotone {
    position: relative;
}
.rios-image--duotone > img,
.rios-image--duotone > picture > img {
    filter: grayscale(0.92) contrast(1.02);
    transition: filter 350ms ease;
}
/* Hover: vuelve a color natural (chiche) */
a:hover .rios-image--duotone > img,
.rios-team-card__link:hover .rios-image--duotone > img,
.rios-team-preview__card a:hover .rios-image--duotone > img {
    filter: grayscale(0) contrast(1);
}
/* Variante fuerte: para sede tiles que necesitan veil identitario */
.rios-image--duotone--strong::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-brand);
    mix-blend-mode: multiply;
    opacity: 0.35;
    pointer-events: none;
}

/* Overlay sutil para captions sobre la foto */
.rios-image--brand-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 31, 99, 0.65) 0%, rgba(0, 31, 99, 0.15) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Hero con imagen + overlay institucional */
.rios-hero--with-image {
    position: relative;
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rios-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 31, 99, 0.85) 0%, rgba(0, 31, 99, 0.6) 100%);
    pointer-events: none;
    z-index: 1;
}


/* ============================================================
 * 8. Styleguide-only — grid de iconos
 * ============================================================ */

.sg-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--space-3);
}
.sg-icon-cell {
    margin: 0;
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-brand);
    transition: background 150ms ease;
}
.sg-icon-cell:hover {
    background: var(--color-bg-alt);
}
.sg-icon-cell figcaption {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
}
.sg-icon-feat {
    margin-right: var(--space-2);
    color: var(--color-text-brand);
}


/* ============================================================
 * 9. Templates — componentes específicos de front-page / single / sede
 * ============================================================ */

/* ---------- Botones extra (inverso/ghost para fondos brand) ---------- */
.rios-btn--primary-inverse {
    background: var(--color-text-inverse);
    color: var(--color-brand);
    border-color: var(--color-text-inverse);
}
.rios-btn--primary-inverse:hover { background: var(--color-bg-alt); color: var(--color-brand); }

.rios-btn--ghost-inverse {
    background: transparent;
    color: var(--color-text-inverse);
    border-color: rgba(255,255,255,.6);
}
.rios-btn--ghost-inverse:hover { background: rgba(255,255,255,.08); color: var(--color-text-inverse); border-color: var(--color-text-inverse); }

/* ---------- Section wrappers ---------- */
.rios-section { padding-block: var(--space-section-y, var(--space-12)); }
.rios-section--alt { background: var(--color-bg-alt); }
.rios-section--brand {
    background: var(--color-brand);
    color: var(--color-text-inverse);
}
.rios-section--brand h2,
.rios-section--brand h3 { color: var(--color-text-inverse); }
.rios-section--brand .rios-eyebrow { color: rgba(255,255,255,.7); }

.rios-section__header {
    max-width: 720px;
    margin: 0 auto var(--space-8);
    text-align: center;
}
.rios-section__header .rios-eyebrow { display: inline-block; margin-bottom: var(--space-2); }
.rios-section__header h2 { margin-bottom: var(--space-3); }

/* ---------- Service cards (motivo 4-servicios + variantes) ---------- */
.rios-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
}
.rios-service-card {
    display: block;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    position: relative;
}
.rios-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand);
}
.rios-service-card__icon {
    display: inline-flex;
    width: 64px; height: 64px;
    align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text-brand);
    margin-bottom: var(--space-4);
}
.rios-service-card__title { color: var(--color-text-brand); margin-bottom: var(--space-2); }
.rios-service-card__lead { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-4); }
.rios-service-card__more {
    color: var(--color-brand);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    display: inline-flex; align-items: center; gap: var(--space-1);
}
/* Variantes tono — herencia visual del manual */
.rios-service-card--asesoria .rios-service-card__icon { background: rgba(26, 45, 90, .08); }
.rios-service-card--fincas .rios-service-card__icon   { background: rgba(50, 76, 126, .08); }
.rios-service-card--inmobiliaria .rios-service-card__icon { background: rgba(77, 95, 141, .08); }
.rios-service-card--legal .rios-service-card__icon    { background: rgba(112, 129, 172, .08); }

/* ---------- Sede cards (5 sedes en home) ---------- */
.rios-sedes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}
.rios-sede-card {
    text-align: center;
}
.rios-sede-card__link {
    display: block;
    padding: var(--space-6) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: all 200ms ease;
}
.rios-sede-card__link:hover {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-color: var(--color-brand);
    transform: translateY(-2px);
}
.rios-sede-card__icon { color: var(--color-text-brand); margin-bottom: var(--space-3); }
.rios-sede-card__link:hover .rios-sede-card__icon { color: var(--color-text-inverse); }
.rios-sede-card__name { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
.rios-sede-card__city { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0; }
.rios-sede-card__link:hover .rios-sede-card__city { color: rgba(255,255,255,.7); }

/* ---------- Posts grid + post card ---------- */
.rios-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}
.rios-post-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.rios-post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rios-post-card__media { display: block; }
.rios-post-card__body { padding: 0 var(--space-5) var(--space-5); }
.rios-post-card__title { font-size: var(--font-size-lg); margin: var(--space-2) 0; line-height: var(--leading-snug); }
.rios-post-card__title a { color: var(--color-text-brand); text-decoration: none; }
.rios-post-card__title a:hover { text-decoration: underline; }
.rios-post-card__excerpt { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: 0; }

/* ---------- Breadcrumb (inline text simple, separador via ::after) ---------- */
.rios-breadcrumb {
    padding-block: var(--space-4);
    background: var(--color-bg-alt);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}
.rios-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rios-breadcrumb li {
    display: inline;
    color: var(--color-text-muted);
}
.rios-breadcrumb li:not(:last-child)::after {
    content: " / ";
    display: inline;
    color: var(--color-text-muted);
    opacity: .35;
    margin-inline: 0.4em;
    user-select: none;
}
.rios-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.rios-breadcrumb a:hover {
    color: var(--color-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.rios-breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

/* ---------- Article — single.php ---------- */
.rios-article__container { max-width: 760px; margin-inline: auto; }
.rios-article__header { padding-top: var(--space-10); }
.rios-article__title {
    color: var(--color-text-brand);
    font-size: var(--font-size-4xl);
    line-height: var(--leading-tight);
    margin-block: var(--space-3) var(--space-4);
}
.rios-article__lead {
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}
.rios-article__byline {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-block: var(--space-6);
}
.rios-article__author-avatar { display: block; flex-shrink: 0; }
.rios-article__author-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.rios-article__byline-meta { flex: 1; }
.rios-article__author-name { margin: 0; font-size: var(--font-size-base); }
.rios-article__author-name a { color: var(--color-text-brand); font-weight: var(--font-weight-medium); text-decoration: none; }
.rios-article__author-name a:hover { text-decoration: underline; }
.rios-article__meta {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.rios-article__hero-wrapper { margin-block: var(--space-6); }
.rios-article__body {
    margin-block: var(--space-6);
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
}
/* Jerarquía dentro del artículo · ratio H2/body ≈ 1.6x para legibilidad editorial */
.rios-article__body h2 {
    font-size: clamp(1.4rem, 0.9vw + 1.125rem, 1.75rem);   /* 22.4 → 28px */
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin-top: var(--space-10);
    margin-bottom: var(--space-3);
}
.rios-article__body h3 {
    font-size: clamp(1.2rem, 0.5vw + 1rem, 1.375rem);      /* 19.2 → 22px */
    line-height: 1.3;
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}
.rios-article__body h4 {
    font-size: var(--font-size-lg);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}
.rios-article__body > p,
.rios-article__body > ul,
.rios-article__body > ol { margin-bottom: var(--space-4); }
.rios-article__body img { border-radius: var(--radius-md); margin-block: var(--space-5); }
.rios-article__body blockquote {
    border-left: 4px solid var(--color-brand);
    padding: var(--space-4) var(--space-6);
    margin-block: var(--space-8);
    color: var(--color-text-brand);
    font-style: italic;
}

.rios-article__author-card {
    margin-top: var(--space-12);
    background: var(--color-bg-alt);
    padding-block: var(--space-10);
}
.rios-author-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-6);
    align-items: start;
}
.rios-author-card__avatar { border-radius: var(--radius-md); overflow: hidden; }
.rios-author-card__body h3 { color: var(--color-text-brand); margin-bottom: var(--space-3); }
.rios-author-card__body p { margin-bottom: var(--space-4); }

.rios-related { padding-block: var(--space-12); }

/* ---------- Sede page (tpl-sede.php) ---------- */
.rios-sede-nap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-8);
    padding: var(--space-8);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}
.rios-sede-nap__col .rios-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.rios-sede-nap__col p { margin: 0 0 var(--space-3); }
.rios-sede-nap__col a { color: var(--color-text-brand); text-decoration: none; }
.rios-sede-nap__col a:hover { text-decoration: underline; }

/* Team grid */
.rios-team-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
}
.rios-team-card { margin: 0; }
.rios-team-card__link { display: block; text-decoration: none; color: inherit; }
.rios-team-card__photo { margin-bottom: var(--space-3); transition: filter 200ms ease; }
.rios-team-card__link:hover .rios-team-card__photo > img { filter: none; }
.rios-team-card__link:hover .rios-team-card__photo::after { opacity: 0; }
.rios-team-card__name { margin: 0; color: var(--color-text-brand); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.rios-team-card__role { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Services list (linked list in sede page) */
.rios-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}
.rios-services-list li a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    color: var(--color-text-brand);
    text-decoration: none;
    width: 100%;
    transition: background 150ms ease;
}
.rios-services-list li a:hover { background: var(--color-brand); color: var(--color-text-inverse); }

/* Generic prose container for content from editor */
.rios-prose { max-width: 760px; margin-inline: auto; line-height: var(--leading-relaxed); }
.rios-prose h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.rios-prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.rios-prose p { margin-bottom: var(--space-4); }
.rios-prose ul, .rios-prose ol { margin-bottom: var(--space-4); }
.rios-prose blockquote {
    margin-block: var(--space-10);                          /* 40px arriba y abajo · separa la cita del párrafo */
    padding: var(--space-5) var(--space-6);
    border-inline-start: 3px solid var(--color-brand);
    background: var(--color-bg-alt);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text-brand);
}
.rios-prose blockquote p { margin-bottom: var(--space-3); }
.rios-prose blockquote p:last-child { margin-bottom: 0; }


/* ============================================================
 * 10. Hero full + foto + duotone
 * ============================================================ */

.rios-hero--full {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    color: var(--color-text-inverse);
    overflow: hidden;
    isolation: isolate;
}
.rios-hero__photo {
    position: absolute; inset: 0;
    z-index: 0;
    background: var(--color-brand-deep, #001339);
}
.rios-hero__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    /* Duotone: B/N + brand tint via filter */
    filter: grayscale(1) contrast(1.05);
}
/* Duotone overlay tinted with brand */
.rios-hero--full .rios-hero__overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 31, 99, 0.55) 0%, rgba(0, 31, 99, 0.88) 100%),
        var(--color-brand);
    background-blend-mode: multiply;
    pointer-events: none;
}
.rios-hero__inner {
    position: relative;
    z-index: 2;
    padding-block: var(--space-16);
}
.rios-hero__title {
    color: var(--color-text-inverse);
    margin-block: var(--space-4);
    max-width: 720px;
}
.rios-hero__lead {
    color: rgba(255,255,255,.9);
    font-size: var(--font-size-xl);
    max-width: 620px;
    margin-bottom: var(--space-6);
}
.rios-hero__cta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ============================================================
 * 11. Stats bar (cifras institucionales bajo hero)
 * ============================================================ */

.rios-stats {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--space-8);
}
.rios-stats__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-6);
}
.rios-stats__item {
    text-align: center;
    border-right: 1px solid var(--color-border);
    padding: var(--space-3) 0;
}
.rios-stats__item:last-child { border-right: 0; }
.rios-stats__num {
    display: block;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-brand);
    margin-bottom: var(--space-2);
}
.rios-stats__label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

/* ============================================================
 * 12. Sedes con foto (grid en home)
 * ============================================================ */

.rios-sedes-photo-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}
.rios-sede-photo-card { display: flex; }
.rios-sede-photo-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.rios-sede-photo-card__link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand);
}
.rios-sede-photo-card__photo { border-radius: 0; }
.rios-sede-photo-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.rios-sede-photo-card__name {
    color: var(--color-text-brand);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-2);
}
.rios-sede-photo-card__address {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    flex: 1;
    margin-bottom: var(--space-3);
}
.rios-sede-photo-card__more {
    color: var(--color-brand);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    display: inline-flex; align-items: center; gap: var(--space-1);
}

/* ============================================================
 * 13. Trust grid (4 items con icon, no foto)
 * ============================================================ */

.rios-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
}
.rios-trust-item {
    text-align: center;
    padding: var(--space-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.rios-trust-item__icon {
    display: inline-flex;
    width: 80px; height: 80px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-text-brand);
    margin-bottom: var(--space-4);
}
.rios-trust-item h3 {
    color: var(--color-text-brand);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-lg);
}
.rios-trust-item p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* ============================================================
 * 14. Sede page — info + map side by side
 * ============================================================ */

.rios-sede-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
}
.rios-sede-info__nap h2 {
    color: var(--color-text-brand);
    margin-bottom: var(--space-5);
}
.rios-sede-info__nap .rios-sede-nap {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: 0;
    background: transparent;
}
.rios-sede-info__map { display: flex; flex-direction: column; }
.rios-map-embed {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    aspect-ratio: 4/3;
    background: var(--color-bg-alt);
    flex: 1;
    min-height: 320px;
}

/* ============================================================
 * 15. Form "Consultar con el despacho"
 * ============================================================ */

.rios-form {
    background: var(--color-bg);
    color: var(--color-text);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.rios-form--inverse {
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
}
.rios-form__title {
    color: var(--color-text-brand);
    margin-bottom: var(--space-5);
}
.rios-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.rios-form__field {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}
.rios-form__field > span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.rios-form__field input,
.rios-form__field textarea {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.rios-form__field input:focus,
.rios-form__field textarea:focus {
    outline: 0;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(0, 31, 99, 0.15);
}
.rios-form__checkbox {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--space-3);
    margin-block: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    align-items: start;
}
.rios-form__checkbox input { margin-top: 4px; }
.rios-form__checkbox a { color: var(--color-text-brand); }
.rios-form__error {
    color: #b00020;
    font-size: var(--font-size-xs);
    min-height: 1em;
    display: block;
}
.rios-form__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.rios-form__assurance {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin: 0;
    text-align: center;
}
.rios-form__msg {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    min-height: 1em;
}
.rios-form__msg:empty { padding: 0; min-height: 0; }
.rios-form__msg--success {
    background: rgba(0, 100, 50, 0.08);
    color: #006432;
    border: 1px solid rgba(0, 100, 50, 0.2);
}
.rios-form__msg--error {
    background: rgba(176, 0, 32, 0.08);
    color: #b00020;
    border: 1px solid rgba(176, 0, 32, 0.2);
}

/* ============================================================
 * 16. CTA form layout (intro a la izquierda + form a la derecha)
 * ============================================================ */

.rios-cta-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: start;
}
.rios-cta-form__intro h2 {
    color: var(--color-text-inverse);
    margin-block: var(--space-3) var(--space-4);
}
.rios-cta-form__intro .rios-lead {
    color: rgba(255,255,255,.9);
    margin-bottom: var(--space-5);
}
.rios-cta-form__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
}
.rios-cta-form__bullets li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: rgba(255,255,255,.9);
    font-size: var(--font-size-base);
}
.rios-cta-form__bullets li > svg { color: rgba(255,255,255,.7); flex-shrink: 0; }
.rios-cta-form__alt {
    color: rgba(255,255,255,.75);
    font-size: var(--font-size-sm);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255,255,255,.15);
}
.rios-cta-form__alt a {
    color: var(--color-text-inverse);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: var(--font-weight-medium);
}
.rios-cta-form__alt a:hover { text-decoration: underline; }


/* ============================================================
 * 16-bis. FAQ block (campo ACF + FAQPage schema)
 * ============================================================ */

.rios-faq {
    margin-top: var(--space-12);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
}
.rios-faq__header {
    margin-bottom: var(--space-6);
}
.rios-faq__header .rios-eyebrow {
    display: block;
    margin-bottom: var(--space-2);
}
.rios-faq__header h2 {
    color: var(--color-text-brand);
    font-size: var(--font-size-3xl);
    line-height: 1.2;
    margin: 0;
}
.rios-faq__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.rios-faq__item {
    border-bottom: 1px solid var(--color-border);
}
.rios-faq__item:first-child { border-top: 1px solid var(--color-border); }
.rios-faq__details { }
.rios-faq__question {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    line-height: 1.35;
    user-select: none;
    transition: color 150ms ease;
}
.rios-faq__question:hover { color: var(--color-brand); }
.rios-faq__question::-webkit-details-marker { display: none; }
.rios-faq__question::marker { content: ''; }

.rios-faq__sign {
    position: relative;
    width: 16px; height: 16px;
    flex-shrink: 0;
}
.rios-faq__sign::before,
.rios-faq__sign::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform 200ms ease;
}
.rios-faq__sign::before {
    top: 50%; left: 0;
    width: 16px; height: 2px;
    transform: translateY(-50%);
}
.rios-faq__sign::after {
    top: 0; left: 50%;
    width: 2px; height: 16px;
    transform: translateX(-50%) scaleY(1);
}
.rios-faq__details[open] .rios-faq__sign::after {
    transform: translateX(-50%) scaleY(0);
}

.rios-faq__answer {
    padding: 0 0 var(--space-5);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
    max-width: 720px;
}
.rios-faq__answer p { margin: 0 0 var(--space-3); }
.rios-faq__answer p:last-child { margin-bottom: 0; }
.rios-faq__answer a {
    color: var(--color-text-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============================================================
 * 17. REDISEÑO BOUTIQUE FOTOGRÁFICO (2026-05-22 segunda dirección)
 * ============================================================
 *
 * Reemplaza estética anterior:
 *  - Iconos pequeños (16-18px) acompañando texto, NO gigantes centrales.
 *  - Foto protagonista, texto compositivo encima.
 *  - Editorial minimal: line-only inputs, links con underline, números romanos.
 *  - Sin cards con sombras pesadas. Detalle institucional sobre forma.
 */

/* ---------- Rule / numeración editorial ---------- */
.rios-rule {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    color: var(--color-brand);
    letter-spacing: var(--tracking-caps);
    position: relative;
    padding-right: var(--space-4);
    margin-right: var(--space-3);
}
.rios-rule::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: var(--space-2);
    height: 1px;
    background: var(--color-brand);
    opacity: 0.4;
}
.rios-rule--inverse { color: var(--color-text-inverse); }
.rios-rule--inverse::after { background: var(--color-text-inverse); opacity: 0.5; }

/* ---------- Section head ----------
 * Layout editorial vertical: eyebrow (+ rule opcional) arriba · título mediano debajo · lead largo abajo.
 * Antes era flex baseline — apilaba eyebrow + título en horizontal lo que daba aspecto "amontonado".
 */
.rios-section-head {
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
/* El eyebrow (y el rule editorial, ambos inline-block) quedan en la primera línea de flujo,
 * el título cae debajo por ser block, y el lead va al final. */
.rios-section-head .rios-eyebrow { margin-bottom: var(--space-4); }
.rios-section-head__lead {
    max-width: 640px;
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
}

/* ---------- Editorial link CTA (con flecha + underline) ---------- */
.rios-link-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    letter-spacing: 0.01em;
    transition: gap 200ms ease, color 200ms ease;
}
.rios-link-cta:hover { gap: var(--space-4); color: var(--color-brand); }
.rios-link-cta--inverse { color: var(--color-text-inverse); }
.rios-link-cta--inverse:hover { color: var(--color-text-inverse); }

/* ============================================================
 * 18. Hero full-bleed (foto protagonista + texto compositivo)
 * ============================================================ */

.rios-hero-bleed {
    position: relative;
    min-height: 88vh;
    color: var(--color-text-inverse);
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
}
.rios-hero-bleed__photo {
    position: absolute; inset: 0;
    z-index: 0;
}
.rios-hero-bleed__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1) contrast(1.05) brightness(1.12);
}
/* Duotone overlay azul brand */
.rios-hero-bleed__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--color-brand);
    mix-blend-mode: multiply;
    opacity: 0.55;
    pointer-events: none;
}
/* Veil — más oscuro a la izquierda donde va el texto, suave a la derecha.
 * Fuerte a la izquierda para legibilidad del título+lead blancos, dejando
 * la mitad derecha de la foto visible. */
.rios-hero-bleed__veil {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0, 13, 51, 0.74) 0%, rgba(0, 13, 51, 0.45) 38%, rgba(0, 13, 51, 0.12) 68%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.rios-hero-bleed__inner {
    position: relative; z-index: 2;
    padding-block: clamp(var(--space-12), 10vh, var(--space-16));
    width: 100%;
}
.rios-hero-bleed__copy {
    max-width: 600px;
}
.rios-hero-bleed__est {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,.75);
    margin: 0 0 var(--space-6);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}
.rios-hero-bleed__est::before {
    content: "";
    display: inline-block;
    width: var(--space-8);
    height: 1px;
    background: rgba(255,255,255,.5);
}
.rios-hero-bleed__title {
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-8);
}
.rios-hero-bleed__title em {
    font-style: italic;
    font-weight: var(--font-weight-medium);
    color: rgba(255,255,255,.85);
}
.rios-hero-bleed__lead {
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255,255,255,.85);
    max-width: 520px;
    margin: 0 0 var(--space-10);
}
.rios-hero-bleed__cta { margin-top: var(--space-6); }

/* ============================================================
 * 19. Intro editorial section
 * ============================================================ */

.rios-intro {
    padding-block: var(--space-section-y);
    border-bottom: 1px solid var(--color-border);
}
.rios-intro__grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: clamp(var(--space-6), 4vw, var(--space-12));
    align-items: start;
}
@media (max-width: 768px) {
    .rios-intro__grid { grid-template-columns: 1fr; }   /* stack label encima del body */
}
.rios-intro__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.rios-intro__title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    margin: 0 0 var(--space-6);
    max-width: 720px;
}
.rios-intro__lead {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    margin: 0;
    max-width: 720px;
}

/* ============================================================
 * 20. Áreas de práctica (sin iconos gigantes, num grande editorial)
 * ============================================================ */

.rios-areas {
    padding-block: var(--space-section-y);
}
.rios-areas__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-border);
}
/* Variante 5 áreas (home): una fila de cinco columnas en desktop ancho,
   2+2+1 (quinta a ancho completo) en tablet, columna única en mobile. */
.rios-areas__grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
    .rios-areas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .rios-areas__grid { grid-template-columns: 1fr; }
}
.rios-area {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: background 250ms ease;
    position: relative;
}
.rios-areas__grid > .rios-area:last-child { border-right: 0; }
/* Responsive borders: en grid 4-col el último de cada fila no tiene border-right, etc.
   Para simplificar visual en breakpoints: drop border-right en la segunda columna en 2-col, dropear todos en 1-col */
@media (max-width: 900px) {
    .rios-areas__grid > .rios-area:nth-child(2n) { border-right: 0; }
}
@media (max-width: 540px) {
    .rios-areas__grid > .rios-area { border-right: 0; }
}
.rios-area:hover { background: var(--color-bg-alt); }
.rios-area::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 0; height: 2px;
    background: var(--color-brand);
    transition: width 300ms ease;
}
.rios-area:hover::before { width: 100%; }

.rios-area__num {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}
.rios-area__title {
    font-size: var(--font-size-xl);
    line-height: 1.2;
    color: var(--color-text-brand);
    margin: 0 0 var(--space-3);
    font-weight: var(--font-weight-medium);
}
.rios-area__desc {
    flex: 1;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-5);
}
.rios-area__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: gap 200ms ease;
}
.rios-area:hover .rios-area__more { gap: var(--space-3); }

/* ============================================================
 * 21. Sedes gallery (boutique foto-protagonista, fondo claro)
 * ============================================================ */

.rios-sedes-gallery {
    padding-block: var(--space-section-y);
    background: var(--color-bg);
}
.rios-sedes-gallery__list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
}
@media (max-width: 1024px) {
    .rios-sedes-gallery__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .rios-sedes-gallery__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .rios-sedes-gallery__list { grid-template-columns: 1fr; }
}
.rios-sede-tile { margin: 0; }
.rios-sede-tile__link {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text-inverse);
    aspect-ratio: 3/4;
    background: var(--color-brand);
}
.rios-sede-tile__photo {
    position: absolute; inset: 0;
    overflow: hidden;
}
.rios-sede-tile__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rios-sede-tile__link:hover .rios-sede-tile__photo img { transform: scale(1.04); }
/* Veil: solo en la parte inferior, no cubre la foto entera — deja ver el color real */
.rios-sede-tile__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 13, 51, 0.92) 0%, rgba(0, 13, 51, 0.45) 35%, rgba(0, 13, 51, 0) 60%);
    transition: background 300ms ease;
}
.rios-sede-tile__link:hover .rios-sede-tile__veil {
    background: linear-gradient(0deg, rgba(0, 13, 51, 0.85) 0%, rgba(0, 13, 51, 0.3) 45%, rgba(0, 13, 51, 0) 70%);
}
.rios-sede-tile__caption {
    position: absolute;
    inset: 0;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
}
.rios-sede-tile__count {
    font-size: var(--font-size-xs);
    letter-spacing: 0.2em;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    margin-bottom: auto;
    align-self: flex-start;
}
.rios-sede-tile__name {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-1);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.rios-sede-tile__city {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,.75);
    margin: 0 0 var(--space-4);
}
.rios-sede-tile__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms ease, gap 200ms ease;
}
.rios-sede-tile__link:hover .rios-sede-tile__more {
    opacity: 1;
    transform: translateY(0);
    gap: var(--space-3);
}

/* ============================================================
 * 22. Blog feed editorial
 * ============================================================ */

.rios-blog-feed {
    padding-block: var(--space-section-y);
}
.rios-blog-feed__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
}
@media (max-width: 900px) {
    .rios-blog-feed__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .rios-blog-feed__grid { grid-template-columns: 1fr; }
}
.rios-feed-card { display: flex; flex-direction: column; }
.rios-feed-card__media {
    display: block;
    margin-bottom: var(--space-5);
    overflow: hidden;
}
.rios-feed-card__media img {
    width: 100%; height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rios-feed-card__media:hover img { transform: scale(1.03); }
.rios-feed-card__date {
    font-size: var(--font-size-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.rios-feed-card__title {
    font-size: var(--font-size-xl);
    line-height: 1.25;
    margin: 0 0 var(--space-3);
    font-weight: var(--font-weight-medium);
}
.rios-feed-card__title a {
    color: var(--color-text-brand);
    text-decoration: none;
}
.rios-feed-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rios-feed-card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ============================================================
 * 23. CTA section editorial (brand bg + form)
 * ============================================================ */

.rios-cta {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    padding-block: var(--space-section-y);
}
.rios-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);   /* form más ancho que intro: 45/55 aprox */
    gap: clamp(var(--space-8), 6vw, var(--space-16));        /* más respiración entre columnas */
    align-items: start;
}
@media (max-width: 900px) {
    .rios-cta__grid { grid-template-columns: 1fr; gap: var(--space-8); }   /* stack en tablet/mobile */
}
.rios-cta__intro { padding-top: var(--space-2); }            /* alineado con primera label del form */
.rios-cta__title {
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-inverse);
    margin: var(--space-4) 0 var(--space-6);
}
.rios-cta__lead {
    color: rgba(255,255,255,.85);
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-8);
    max-width: 480px;
}
.rios-cta__alt {
    color: rgba(255,255,255,.7);
    font-size: var(--font-size-sm);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255,255,255,.18);
}
.rios-cta__alt a {
    color: var(--color-text-inverse);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,.4);
    transition: text-decoration-color 200ms ease;
    margin: 0 var(--space-1);
}
.rios-cta__alt a:hover { text-decoration-color: rgba(255,255,255,1); }

/* ============================================================
 * 24. Form boxed institucional premium (2026-05-22 v3)
 *
 * Card blanca con peso visual, sobre fondo brand contrasta fuerte.
 * Inputs con border completo cómodo, labels normales, submit sólido grande.
 * Variante --on-brand: misma card blanca sobre fondo azul (no inverse).
 * ============================================================ */

.rios-form--boxed {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: clamp(var(--space-6), 3.5vw, var(--space-10));   /* 24→40px · respira más */
    box-shadow: 0 24px 48px -16px rgba(0, 13, 51, 0.18), 0 2px 6px rgba(0, 13, 51, 0.06);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);                                       /* 16px entre fields · antes 8px */
    width: 100%;
    max-width: 520px;                                          /* evita formularios "kilométricos" en columnas anchas */
}

/* Cuando el form es el único bloque de una sección (página de contacto, dejar reseña),
 * centrarlo explícitamente — sin esto queda alineado al inicio del contenedor. */
.rios-form--centered { margin-inline: auto; }

/* Cuando el form vive sobre fondo brand sólido (sección CTA), reforzar shadow */
.rios-form--boxed.rios-form--on-brand {
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 0;
}

.rios-form--boxed .rios-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);                                       /* 16px columnas · antes 8px */
}
@media (max-width: 540px) {
    .rios-form--boxed .rios-form__row { grid-template-columns: 1fr; }   /* stack en mobile */
}

.rios-form--boxed .rios-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);                                       /* 8px label-input · antes 4px */
}

.rios-form--boxed label {
    font-size: var(--font-size-sm);                            /* 14px · antes 12px (muy pequeño) */
    font-weight: var(--font-weight-medium);
    color: var(--color-text);                                  /* texto base · antes muted */
    letter-spacing: 0.005em;
    line-height: 1.4;
}
.rios-form--boxed .rios-form__optional {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-xs);
    opacity: 0.75;
    margin-left: var(--space-1);
}

.rios-form--boxed input,
.rios-form--boxed textarea {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);                    /* 12px 16px · antes 9px 12px */
    font-family: var(--font-sans);
    font-size: var(--font-size-base);                          /* 16px · antes 14px (evita zoom iOS) */
    color: var(--color-text);
    line-height: 1.5;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    resize: vertical;
    width: 100%;
}
.rios-form--boxed textarea { min-height: 120px; line-height: 1.6; padding-top: var(--space-3); }

.rios-form--boxed input::placeholder,
.rios-form--boxed textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.55;
}

.rios-form--boxed input:focus,
.rios-form--boxed textarea:focus {
    outline: 0;
    background: var(--color-bg);
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(0, 31, 99, 0.12);
}

/* Checkbox: plano sin caja contenedora, sólo el cuadrado del check + texto */
.rios-form--boxed .rios-form__checkbox {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-2) var(--space-3);
    align-items: start;
    cursor: pointer;
    user-select: none;
    margin-top: var(--space-1);
    padding: 0;
    background: transparent;
    border: 0;
}
.rios-form--boxed .rios-form__checkbox input {
    grid-row: 1; grid-column: 1;
    appearance: none;
    width: 20px; height: 20px;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.rios-form--boxed .rios-form__checkbox-box {
    grid-row: 1; grid-column: 1;
    pointer-events: none;
    width: 20px; height: 20px;
    border: 1.5px solid var(--color-text-muted);
    border-radius: 3px;
    background: var(--color-bg);
    position: relative;
    transition: all 150ms ease;
}
.rios-form--boxed .rios-form__checkbox input:checked + .rios-form__checkbox-box {
    background: var(--color-brand);
    border-color: var(--color-brand);
}
.rios-form--boxed .rios-form__checkbox input:checked + .rios-form__checkbox-box::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 6px; height: 12px;
    border: solid var(--color-text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.rios-form--boxed .rios-form__checkbox-text {
    grid-row: 1; grid-column: 2;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text);
    font-weight: var(--font-weight-regular);
}
.rios-form--boxed .rios-form__checkbox-text a {
    color: var(--color-text-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.rios-form--boxed .rios-form__checkbox .rios-form__error {
    grid-row: 2; grid-column: 1 / -1;
}

/* Submit + actions */
.rios-form--boxed .rios-form__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);                                       /* 12px · antes 8px */
    margin-top: var(--space-4);                                /* 16px · antes 12px */
}
.rios-form--boxed .rios-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-6);                    /* 16px 24px · antes 14px */
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border: 0;
    border-radius: var(--radius-md);                           /* matching form border-radius */
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 200ms ease, transform 100ms ease;
}
.rios-form--boxed .rios-form__submit:hover {
    background: var(--color-brand-hover, #001a52);
}
.rios-form--boxed .rios-form__submit:active { transform: translateY(1px); }
.rios-form--boxed .rios-form__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.rios-form--boxed .rios-form__assurance {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin: 0;
    text-align: center;
}

.rios-form--boxed .rios-form__error {
    color: #b00020;
    font-size: var(--font-size-xs);
    margin-top: 4px;
}
.rios-form--boxed .rios-form__error:empty {
    display: none;
}

.rios-form--boxed .rios-form__msg {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    min-height: 1em;
    background: transparent;
    border: 1px solid transparent;
}
.rios-form--boxed .rios-form__msg:empty { padding: 0; border: 0; min-height: 0; }
.rios-form--boxed .rios-form__msg--success {
    background: rgba(0, 100, 50, 0.08);
    border-color: rgba(0, 100, 50, 0.25);
    color: #006432;
}
.rios-form--boxed .rios-form__msg--error {
    background: rgba(176, 0, 32, 0.06);
    border-color: rgba(176, 0, 32, 0.25);
    color: #b00020;
}

/* Acordeón RGPD: minimal, sin caja completa — solo summary subrayado, body con scroll */
.rios-form--boxed .rios-form__rgpd {
    margin-top: 0;
}
.rios-form--boxed .rios-form__rgpd-toggle {
    list-style: none;
    cursor: pointer;
    padding: var(--space-2) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    user-select: none;
}
.rios-form--boxed .rios-form__rgpd-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.rios-form--boxed .rios-form__rgpd-toggle::-webkit-details-marker { display: none; }
.rios-form--boxed .rios-form__rgpd-toggle::marker { content: ''; }

.rios-form--boxed .rios-form__rgpd-sign {
    position: relative;
    width: 10px; height: 10px;
    flex-shrink: 0;
}
.rios-form--boxed .rios-form__rgpd-sign::before,
.rios-form--boxed .rios-form__rgpd-sign::after {
    content: "";
    position: absolute;
    background: var(--color-brand);
    transition: transform 200ms ease;
}
.rios-form--boxed .rios-form__rgpd-sign::before {
    top: 50%; left: 0;
    width: 10px; height: 1.5px;
    transform: translateY(-50%);
}
.rios-form--boxed .rios-form__rgpd-sign::after {
    top: 0; left: 50%;
    width: 1.5px; height: 10px;
    transform: translateX(-50%) scaleY(1);
}
.rios-form--boxed .rios-form__rgpd[open] .rios-form__rgpd-sign::after {
    transform: translateX(-50%) scaleY(0);
}

/* Body: caja con scroll para no extender el form. ~5 líneas visibles. */
.rios-form--boxed .rios-form__rgpd-body {
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    font-size: var(--font-size-xs);
    line-height: 1.55;
    color: var(--color-text-muted);
    max-height: 8.5em;       /* ~5 líneas + scroll */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.rios-form--boxed .rios-form__rgpd-body::-webkit-scrollbar { width: 6px; }
.rios-form--boxed .rios-form__rgpd-body::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
.rios-form--boxed .rios-form__rgpd-body p {
    margin: 0 0 var(--space-2);
}
.rios-form--boxed .rios-form__rgpd-body p:last-child { margin-bottom: 0; }
.rios-form--boxed .rios-form__rgpd-body strong {
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
}
.rios-form--boxed .rios-form__rgpd-body a {
    color: var(--color-text-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ============================================================
 * 24-b. Stats strip (cifras animadas — usado en Nosotros + Home)
 * ============================================================ */
.rios-stats-strip {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-block: clamp(var(--space-8), 5vw, var(--space-10));
    background: var(--color-bg);
}
.rios-stats-strip__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.rios-stats-strip__grid > li {
    text-align: center;
    border-right: 1px solid var(--color-border);
}
.rios-stats-strip__grid > li:last-child { border-right: 0; }
.rios-stats-strip__num {
    display: block;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}
.rios-stats-strip__label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.4;
    max-width: 180px;
    margin-inline: auto;
}

/* ============================================================
 * 24-c. Prose section (2 cols: imagen + texto editorial)
 * ============================================================ */
.rios-prose-section {
    padding-block: var(--space-section-y);
}
.rios-prose-section__grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(var(--space-10), 6vw, var(--space-20));   /* 40 → 80px · más aire entre imagen y texto */
    align-items: start;
}
.rios-prose-section__media { position: sticky; top: 88px; }
.rios-prose-section__caption {
    margin-top: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
}
.rios-prose-section__body h2 {
    color: var(--color-text-brand);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: var(--space-4) 0 var(--space-5);
}
.rios-prose-section__body .rios-lead {
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}
.rios-prose-section__body p { line-height: var(--leading-relaxed); color: var(--color-text); }

/* ============================================================
 * 24-d. Pullquote editorial
 * ============================================================ */
.rios-pullquote {
    padding-block: clamp(var(--space-10), 6vw, var(--space-14));
    background: var(--color-bg-alt);
    border-block: 1px solid var(--color-border);
}
.rios-pullquote blockquote {
    margin: 0 auto;
    max-width: 820px;
    text-align: center;
}
.rios-pullquote blockquote p {
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.35;
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-6);
}
.rios-pullquote blockquote footer {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ============================================================
 * 24-e. Values grid (4 valores)
 * ============================================================ */
.rios-values {
    padding-block: var(--space-section-y);
}
.rios-values__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
}
.rios-values__grid > li {
    padding: var(--space-8) var(--space-5) var(--space-6);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.rios-values__grid > li:last-child { border-right: 0; }
.rios-values__grid > li::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 32px; height: 2px;
    background: var(--color-brand);
}
.rios-values__grid h3 {
    color: var(--color-text-brand);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-3);
    font-weight: var(--font-weight-medium);
}
.rios-values__grid p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
 * 24-f. Team preview (grid 4 cols)
 * ============================================================ */
.rios-team-preview {
    padding-block: var(--space-section-y);
    background: var(--color-bg-alt);
}
.rios-team-preview__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}
.rios-team-preview__card a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.rios-team-preview__card .rios-image {
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rios-team-preview__card .rios-image img {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rios-team-preview__card a:hover .rios-image img { transform: scale(1.05); }
.rios-team-preview__card h3 {
    color: var(--color-text-brand);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin: 0;
    text-align: center;
}


/* ============================================================
 * 24-g. Profile page (single-profesional)
 * ============================================================ */
.rios-profile { }
.rios-profile__header {
    padding-block: clamp(var(--space-10), 6vw, var(--space-12));
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}
.rios-profile__grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: clamp(var(--space-6), 5vw, var(--space-10));
    align-items: start;
}
.rios-profile__photo .rios-image {
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rios-profile__photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand);
    color: rgba(255,255,255,.4);
}
.rios-profile__name {
    color: var(--color-text-brand);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: var(--space-2) 0 var(--space-2);
}
.rios-profile__puesto {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-3);
}
.rios-profile__areas {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 var(--space-4);
}
.rios-profile__role {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.55;
    margin: 0 0 var(--space-6);
}
.rios-profile__education {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}
.rios-profile__education p { margin: 0; }
.rios-profile__meta {
    list-style: none;
    padding: var(--space-4) 0 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}
.rios-profile__meta li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.rios-profile__meta a { color: var(--color-text-brand); text-decoration: none; }
.rios-profile__meta a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .rios-profile__grid { grid-template-columns: 1fr; }
    .rios-profile__photo { max-width: 320px; }
}

/* ============================================================
 * 24-h. Archive header (equipo, servicios)
 * ============================================================ */
.rios-archive__header {
    padding-block: var(--space-section-y);
    border-bottom: 1px solid var(--color-border);
}
.rios-archive__header .rios-eyebrow {
    display: block;
    margin-bottom: var(--space-3);
}
.rios-archive__title {
    color: var(--color-text-brand);
    margin-bottom: var(--space-5);
    max-width: 820px;
}
.rios-archive__lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
    max-width: 720px;
}
.rios-archive__group {
    padding-block: clamp(var(--space-10), 6vw, var(--space-14));
    border-bottom: 1px solid var(--color-border);
}
.rios-archive__group:last-child { border-bottom: 0; }


/* ============================================================
 * 24-i. Caso práctico (single + archive)
 * ============================================================ */
.rios-case__header { padding-block: var(--space-section-y); border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
.rios-case__duration {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-4);
}
.rios-case__section {
    padding-block: var(--space-8);
    border-bottom: 1px dashed var(--color-border);
}
.rios-case__section:last-of-type { border-bottom: 0; }
.rios-case__section .rios-eyebrow { display: inline-block; margin-left: var(--space-2); margin-bottom: var(--space-4); }
.rios-case__section--result { background: var(--color-bg-alt); padding-inline: var(--space-6); border-radius: var(--radius-md); border: 0; margin-top: var(--space-4); }
.rios-case__section--result .rios-prose { font-size: var(--font-size-lg); color: var(--color-text-brand); font-weight: var(--font-weight-medium); }

/* Cases grid (archive) */
.rios-cases-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}
.rios-case-card a {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.rios-case-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-brand); }
.rios-case-card__body { padding: var(--space-5); }
.rios-case-card__title { color: var(--color-text-brand); font-size: var(--font-size-xl); margin: var(--space-2) 0 var(--space-3); line-height: 1.3; }
.rios-case-card__excerpt, .rios-case-card__result { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.5; margin: 0 0 var(--space-4); }
.rios-case-card__result { color: var(--color-text-brand); font-style: italic; }
.rios-case-card__more { color: var(--color-brand); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; gap: var(--space-1); }

/* ============================================================
 * 24-j. Timeline (página /nuestra-historia/)
 * ============================================================ */
.rios-timeline {
    padding-block: var(--space-section-y);
}
.rios-timeline__list {
    list-style: none; padding: 0; margin: 0;
    max-width: 880px;
    margin-inline: auto;
}
.rios-timeline__item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: clamp(var(--space-5), 4vw, var(--space-10));
    padding-bottom: var(--space-12);
    position: relative;
}
.rios-timeline__item:last-child { padding-bottom: 0; }
.rios-timeline__rail {
    position: sticky;
    top: 88px;
    align-self: start;
    border-left: 2px solid var(--color-brand);
    padding-left: var(--space-4);
    padding-block: var(--space-2);
}
.rios-timeline__dot {
    position: absolute;
    left: -5px;
    top: 12px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-brand);
    box-shadow: 0 0 0 4px var(--color-bg);
}
.rios-timeline__year {
    display: block;
    color: var(--color-text-brand);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.rios-timeline__content .rios-eyebrow { display: block; margin-bottom: var(--space-2); }
.rios-timeline__title {
    color: var(--color-text-brand);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    line-height: 1.3;
    margin: 0 0 var(--space-3);
    letter-spacing: -0.01em;
}
.rios-timeline__text {
    color: var(--color-text);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-5);
    max-width: 600px;
}
.rios-timeline__photo {
    margin: 0;
    max-width: 480px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

@media (max-width: 768px) {
    .rios-timeline__item { grid-template-columns: 1fr; }
    .rios-timeline__rail { position: static; border-left: 0; border-top: 2px solid var(--color-brand); padding-left: 0; padding-top: var(--space-3); }
    .rios-timeline__dot { left: 0; top: -5px; }
}

/* ============================================================
 * 24-k. Sala de prensa (archive-prensa)
 * ============================================================ */
.rios-press-list {
    list-style: none; padding: 0; margin: 0;
    max-width: 820px;
    margin-inline: auto;
}
.rios-press-item {
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.rios-press-item:last-child { border-bottom: 0; }
.rios-press-item__date {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-2);
}
.rios-press-item__date strong { color: var(--color-text-brand); }
.rios-press-item__title {
    font-size: var(--font-size-xl);
    color: var(--color-text-brand);
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}
.rios-press-item__title a { color: inherit; text-decoration: none; }
.rios-press-item__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rios-press-item__summary {
    color: var(--color-text);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-3);
    max-width: 640px;
}

/* ============================================================
 * 24-l. Google Reviews block
 * ============================================================ */
.rios-reviews {
    padding-block: var(--space-section-y);
    background: var(--color-bg-alt);
}
.rios-reviews__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    flex-wrap: wrap;
}
.rios-reviews__stars {
    display: inline-flex;
    gap: 2px;
    color: #f5a623;                             /* amarillo Google · convención de reseñas */
}
.rios-reviews__stars svg { fill: currentColor; stroke: currentColor; }
.rios-reviews__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.rios-review-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.rios-review-card__stars {
    display: inline-flex;
    gap: 2px;
    color: #f5a623;                             /* amarillo Google · convención de reseñas */
    margin-bottom: var(--space-3);
}
.rios-review-card__stars svg { fill: currentColor; stroke: currentColor; }
.rios-review-card__quote {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
    line-height: 1.55;
    font-style: italic;
}
.rios-review-card__quote p { margin: 0; }
.rios-review-card__author {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.rios-review-card__author strong { color: var(--color-text-brand); font-weight: var(--font-weight-medium); }

@media (max-width: 900px) {
    .rios-reviews__grid { grid-template-columns: 1fr; }
    .rios-cases-grid { grid-template-columns: 1fr; }
}


/* ============================================================
 * 25. Responsive (rediseño boutique)
 * ============================================================ */

@media (max-width: 1024px) {
    .rios-areas__grid { grid-template-columns: repeat(2, 1fr); }
    .rios-areas__grid > .rios-area:nth-child(2n) { border-right: 0; }
    .rios-areas__grid > .rios-area:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
    /* Variante 5 áreas: la quinta tarjeta cierra a ancho completo */
    .rios-areas__grid--5 > .rios-area:last-child { grid-column: 1 / -1; border-right: 0; }

    .rios-sedes-gallery__list { grid-template-columns: repeat(3, 1fr); }
    .rios-sedes-gallery__list > li:nth-child(n+4) { aspect-ratio: 16/9; }

    .rios-stats-strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    .rios-stats-strip__grid > li:nth-child(2n) { border-right: 0; }
    .rios-stats-strip__grid > li:nth-child(-n+2) { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }

    .rios-values__grid { grid-template-columns: repeat(2, 1fr); }
    .rios-values__grid > li:nth-child(2n) { border-right: 0; }

    .rios-team-preview__grid { grid-template-columns: repeat(3, 1fr); }
    .rios-team-preview__grid > li:nth-child(n+7) { display: none; }

    .rios-prose-section__grid { grid-template-columns: 1fr; }
    .rios-prose-section__media { position: static; max-width: 360px; }
}

@media (max-width: 900px) {
    .rios-sede-info { grid-template-columns: 1fr; }
    .rios-cta-form { grid-template-columns: 1fr; gap: var(--space-6); }
    .rios-form__row { grid-template-columns: 1fr; }
    .rios-intro__grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .rios-blog-feed__grid { grid-template-columns: 1fr; }
    .rios-cta__grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .rios-form--editorial .rios-form__row { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 920px) {
    .rios-header__hamburger { display: inline-flex; }
    .rios-header__contact { display: none; }
    .rios-header__access { display: none; }
    .rios-header__nav {
        position: fixed;
        inset: 64px 0 0 0;
        background: var(--color-bg);
        padding: var(--space-8) var(--space-6);
        z-index: 50;
        transform: translateX(100%);
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }
    .rios-header__nav.is-open { transform: translateX(0); }
    .rios-nav {
        flex-direction: column;
        gap: var(--space-3);
        justify-content: flex-start;
    }
    .rios-nav__link, .rios-nav a {
        font-size: var(--font-size-lg);
        display: block;
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-border);
    }
    .rios-nav__link::after, .rios-nav a::after { display: none; }
    .rios-nav__item--mobile-only { display: block; }
    .rios-nav__item--mobile-only .rios-nav__link { color: var(--color-text-brand); font-weight: var(--font-weight-medium); }
    body.rios-nav-open { overflow: hidden; }
}

@media (max-width: 768px) {
    .rios-author-card { grid-template-columns: 1fr; text-align: left; }
    .rios-author-card__avatar { max-width: 140px; }
    .rios-article__title { font-size: var(--font-size-3xl); }
    .rios-article__body { font-size: var(--font-size-base); }
    .rios-display { font-size: var(--font-size-4xl); }

    .rios-hero-bleed { min-height: 78vh; }
    .rios-hero-bleed__title { font-size: clamp(2rem, 8vw, 3rem); }
    .rios-hero-bleed__lead { font-size: var(--font-size-base); }
    .rios-areas__grid { grid-template-columns: 1fr; }
    .rios-areas__grid > .rios-area { border-right: 0; }
    .rios-sedes-gallery__list { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .rios-sedes-gallery__list > li { aspect-ratio: 3/4; }

    /* Buttons en hero CTA: ancho completo en mobile para mejor tap */
    .rios-hero__cta, .rios-hero-bleed__cta { flex-direction: column; align-items: stretch; }
    .rios-hero__cta > .rios-btn, .rios-hero-bleed__cta > .rios-link-cta { justify-content: center; }

    /* Title sizes editorial más pequeños en mobile */
    .rios-intro__title { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    .rios-cta__title { font-size: clamp(1.6rem, 6vw, 2rem); }

    /* Team preview en home: 2 cols en mobile (en lugar de 4) */
    .rios-team-preview__grid { grid-template-columns: repeat(2, 1fr); }
    .rios-team-preview__grid > li:nth-child(n+5) { display: none; }

    /* Sede NAP: tablet ya 1col por design, mobile lo mismo */
    .rios-sede-nap { grid-template-columns: 1fr; padding: var(--space-5); gap: var(--space-5); }

    /* Footer copy bar: stack mobile */
    .rios-footer__copy-inner { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
    .rios-footer__legal-menu { gap: var(--space-3); flex-wrap: wrap; }

    /* Logo brand más compacto en mobile */
    .rios-brand__name { font-size: 15px; letter-spacing: 0.12em; }
    .rios-brand__est { font-size: 7px; letter-spacing: 0.32em; }

    /* Profile education + meta: padding reducido */
    .rios-profile__education { padding-top: var(--space-3); }

    /* Reviews grid + cases grid: 1 col mobile */
    .rios-cases-grid, .rios-reviews__grid { grid-template-columns: 1fr; }

    /* Stats Nosotros: 1col forzado en muy estrecho */
    @media (max-width: 460px) {
        .rios-stats-strip__grid { grid-template-columns: 1fr; }
        .rios-stats-strip__grid > li { border-right: 0; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); }
        .rios-stats-strip__grid > li:last-child { border-bottom: 0; }
    }
}

/* Mobile xs — fine tuning <420px */
@media (max-width: 420px) {
    .rios-hero-bleed__title { font-size: 1.85rem; }
    .rios-display { font-size: 2.2rem; }
    .rios-display em { font-style: italic; }
    .rios-section-head { margin-bottom: var(--space-6); padding-bottom: var(--space-4); }
    .rios-form--boxed { padding: var(--space-5); }   /* 20px mobile · evitar apretón total */
}

/* Print: estilo legible (extra) */
@media print {
    .rios-header, .rios-footer, .rios-cta, .rios-form, .rios-hero-bleed__photo, .rios-hero__overlay { display: none; }
    body { color: black; }
    a { color: black; text-decoration: underline; }
}

/* ============================================================
 * Pillar pages (/servicios/{asesoria,legal,administracion-fincas,inmobiliaria}/)
 * ============================================================ */

/* Hero pillar — institucional, no full-bleed photo */
.rios-pillar-hero {
    padding-block: var(--space-16) var(--space-16);    /* 64px · simétrico, evita CTA pegado a la sección siguiente */
    border-bottom: 1px solid var(--color-border);
}
.rios-pillar-hero .rios-display {
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}
.rios-pillar-hero .rios-lead {
    max-width: 60ch;
    margin-bottom: var(--space-8);
}
.rios-pillar-hero__cta { margin-top: var(--space-4); }

/* Audience grid (3 cards: Particulares / Autónomos / Sociedades) */
.rios-pillar-audience__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--space-8);
}
.rios-pillar-audience__grid .rios-card {
    height: 100%;
    text-decoration: none;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: transform var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
}
.rios-pillar-audience__grid .rios-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand);
}
.rios-pillar-audience__grid .rios-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--color-text);
}
.rios-pillar-audience__grid .rios-card h3 {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: var(--color-text);
}
.rios-pillar-audience__grid .rios-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}
.rios-pillar-audience__grid .rios-card__more {
    margin-top: auto;
    padding-top: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* Process steps (numbered cards) */
.rios-process {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: var(--space-8);
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(4, 1fr);
}
.rios-process__step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rios-process__num {
    font-family: var(--font-sans);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    line-height: 1;
    letter-spacing: -0.02em;
}
.rios-process__body { display: flex; flex-direction: column; gap: var(--space-2); }
.rios-process__title {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}
.rios-process__desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
}

/* Section heading title (used in pillar) */
.rios-section-head__title {
    font-size: clamp(var(--font-size-2xl), 2vw + 0.875rem, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    margin-top: 0;
    margin-bottom: 0;
    color: var(--color-text-brand);                 /* azul institucional · más jerarquía */
    max-width: 38ch;                                /* antes 30ch · permite títulos de 5-6 palabras en una línea */
    line-height: var(--leading-snug);
    letter-spacing: -0.015em;
}

/* Responsive — Pillar */
@media (max-width: 900px) {
    .rios-pillar-audience__grid { grid-template-columns: 1fr 1fr; }
    .rios-process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .rios-pillar-hero { padding-block: var(--space-10) var(--space-8); }
    .rios-pillar-audience__grid { grid-template-columns: 1fr; }
    .rios-process { grid-template-columns: 1fr; }
}

/* Pillar audience grid — 4-card variant (para fincas con 4 sedes) */
.rios-pillar-audience__grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
    .rios-pillar-audience__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .rios-pillar-audience__grid--4 { grid-template-columns: 1fr; }
}

/* Pillar audience grid — 5-card variant (fincas: las 5 sedes en una fila en escritorio) */
.rios-pillar-audience__grid--5 {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}
@media (max-width: 1100px) {
    .rios-pillar-audience__grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .rios-pillar-audience__grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .rios-pillar-audience__grid--5 { grid-template-columns: 1fr; }
}

/* ============================================================
 * Áreas chips — linkean post → pillar (cierra cluster linking)
 * ============================================================ */
.rios-areas-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-block: var(--space-8);
}
.rios-areas-chips .rios-eyebrow {
    margin-right: var(--space-2);
}
.rios-areas-chips__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.rios-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    text-decoration: none;
    transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
.rios-chip:hover {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-color: var(--color-brand);
}

/* Target list (Para quién en single-servicio) */
.rios-target-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 720px;
}
.rios-target-list li {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
}

/* Pricing */
.rios-pricing {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    margin: 0;
}

/* ============================================================
 * Resales Online — grid de propiedades en /servicios/inmobiliaria/
 * Listings reales vía Web API V6, cache transient 1h.
 * ============================================================ */
.rios-resales-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-8));
    margin-top: var(--space-8);
}
@media (max-width: 900px) {
    .rios-resales-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .rios-resales-grid { grid-template-columns: 1fr; }
}
.rios-resales-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}
.rios-resales-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.rios-resales-card__media {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-bg-alt);
}
.rios-resales-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rios-resales-card:hover .rios-resales-card__media img {
    transform: scale(1.03);
}
.rios-resales-card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rios-resales-card__type {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.rios-resales-card__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    color: var(--color-text);
}
.rios-resales-card__title a {
    color: inherit;
    text-decoration: none;
}
.rios-resales-card__title a:hover { color: var(--color-brand); }
.rios-resales-card__meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.rios-resales-card__meta li::before {
    content: "·";
    margin-right: var(--space-3);
    color: var(--color-text-subtle);
}
.rios-resales-card__meta li:first-child::before { content: none; margin-right: 0; }
.rios-resales-card__price {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    letter-spacing: -0.01em;
}
.rios-resales-empty {
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--space-6);
}

/* ============================================================
 * Fix global anti-baseline en menús flex
 *
 * Problema diagnosticado 2026-05-27: el primer item de varios menús horizontales
 * (Áreas en nav header, Aviso Legal en footer, ES en lang switcher) aparecía
 * desalineado verticalmente vs los demás. Causa: combinación de `align-items: center`
 * + glifas con tildes (Á) + `line-height` heredado distinto en parent vs item.
 *
 * Fix defensivo: cualquier <ul> que sea flex horizontal en el theme normaliza
 * line-height=1 y alinea por flex (no baseline) en todos sus li/a hijos.
 * ============================================================ */
.rios-header__nav ul,
.rios-footer ul[class*="menu"],
.rios-header__access-menu,
.rios-nav,
.rios-lang-switcher,
.rios-footer__legal-menu,
.rios-footer__list {
    line-height: 1;
}
.rios-header__nav ul > li,
.rios-footer ul[class*="menu"] > li,
.rios-header__access-menu > li,
.rios-nav > li,
.rios-lang-switcher > li,
.rios-footer__legal-menu > li {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* ============================================================
 * Property detail (/inmobiliaria/{REF}/) — vista detalle de propiedad Resales
 * ============================================================ */
.rios-property-hero {
    padding-block: var(--space-10) var(--space-6);
    background: var(--color-bg);
}
.rios-property-hero__head {
    max-width: 880px;
}
.rios-property-hero__title {
    margin: var(--space-2) 0 var(--space-3);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.rios-property-hero__price {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    margin: 0 0 var(--space-5);
    letter-spacing: -0.01em;
}
.rios-property-hero__meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}
.rios-property-hero__meta strong {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    margin-right: var(--space-1);
}

/* Galería: 1 lead grande + thumbnails grid */
.rios-property-gallery {
    padding-block: 0 var(--space-8);
}
.rios-property-gallery__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(3, 130px);
    gap: var(--space-2);
}
.rios-property-gallery__img {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}
.rios-property-gallery__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(0.4,0,0.2,1);
}
.rios-property-gallery__img:hover img {
    transform: scale(1.04);
}
.rios-property-gallery__img--lead {
    grid-column: 1;
    grid-row: 1 / -1;
    border-radius: var(--radius-md);
}
@media (max-width: 768px) {
    .rios-property-gallery__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px repeat(2, 110px);
    }
    .rios-property-gallery__img--lead {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

/* Body 2 columnas: content + sidebar sticky con form */
.rios-property-body__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: clamp(var(--space-6), 4vw, var(--space-12));
    align-items: start;
}
@media (max-width: 1024px) {
    .rios-property-body__grid {
        grid-template-columns: 1fr;
    }
}
.rios-property-body__aside {
    position: sticky;
    top: calc(var(--space-12) + 64px);   /* header sticky + margen */
}
@media (max-width: 1024px) {
    .rios-property-body__aside { position: static; }
}
.rios-property-body__ref {
    margin-top: var(--space-10);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.rios-property-body__ref code {
    background: var(--color-bg-alt);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-brand);
}

/* Features dl/dt/dd */
.rios-property-features {
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
.rios-property-features__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.rios-property-features__row:last-child {
    border-bottom: 0;
}
.rios-property-features dt {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rios-property-features dd {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
}
@media (max-width: 540px) {
    .rios-property-features__row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* Aside contact card refinements */
.rios-property-contact__title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.rios-property-contact__lead {
    margin: 0 0 var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

/* ============================================================
 * Reseñas — page /dejar-resena/ + /resenas/
 * ============================================================ */

/* /dejar-resena/: grid de 5 cards una por sede */
.rios-resena-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}
.rios-resena-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard);
}
.rios-resena-card:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
}
.rios-resena-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rios-resena-card__name {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.rios-resena-card__rating {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.rios-resena-card__stars {
    color: #F5B400;                          /* dorado Google reviews */
    font-size: var(--font-size-lg);
    letter-spacing: 0.1em;
    line-height: 1;
}
.rios-resena-card__rating-text strong { color: var(--color-text); }

.rios-resena-card__cta {
    align-self: stretch;
    margin-top: auto;
}
.rios-resena-card__alt {
    margin: 0;
    text-align: center;
    font-size: var(--font-size-sm);
}
.rios-resena-card__alt a {
    color: var(--color-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.rios-resena-card__alt a:hover { color: var(--color-brand); text-decoration: underline; }

.rios-resena-card__qr {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.rios-resena-card__qr img {
    width: 120px;
    height: 120px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    padding: var(--space-2);
}
.rios-resena-card__qr-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Aside "por qué importa" */
.rios-resena-aside {
    max-width: 760px;
    margin-inline: auto;
}
.rios-resena-tips {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rios-resena-tips li {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}
.rios-resena-tips strong { color: var(--color-text-brand); }


/* /resenas/: hero con AggregateRating destacado */
.rios-resenas-aggregate {
    margin-top: var(--space-10);
    padding: var(--space-8);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-6);
    align-items: center;
}
.rios-resenas-aggregate__rating {
    display: flex;
    align-items: baseline;
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}
.rios-resenas-aggregate__value {
    font-size: clamp(3rem, 6vw, 4.5rem);
    letter-spacing: -0.03em;
}
.rios-resenas-aggregate__sep,
.rios-resenas-aggregate__max {
    font-size: var(--font-size-3xl);
    color: var(--color-text-muted);
    margin-left: var(--space-1);
}
.rios-resenas-aggregate__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-text);
}
.rios-resenas-aggregate__stars {
    color: #F5B400;
    font-size: var(--font-size-2xl);
    letter-spacing: 0.08em;
    line-height: 1;
}
@media (max-width: 768px) {
    .rios-resenas-aggregate {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .rios-resenas-aggregate__rating { justify-content: center; }
    .rios-resenas-aggregate__meta { align-items: center; }
}

/* Filter chips por sede */
.rios-resenas-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.rios-resenas-filter__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
    line-height: 1;
}
.rios-resenas-filter__chip:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-border-strong);
}
.rios-resenas-filter__chip.is-active {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-color: var(--color-brand);
}

/* List de reseñas en /resenas/ */
.rios-resenas-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}
@media (max-width: 768px) {
    .rios-resenas-list { grid-template-columns: 1fr; }
}
.rios-resenas-empty {
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-8) 0;
    text-align: center;
}

/* Actions block in reviews home block */
.rios-reviews__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* ============================================================
 * single-servicio.php — layout para campos ACF migrados de prod
 * ============================================================ */
.rios-servicio-hero {
    padding-top: clamp(var(--space-10), 6vw, var(--space-14));
    padding-bottom: clamp(var(--space-12), 7vw, var(--space-20));   /* 48 → 80px · evita que el botón CTA quede pegado a la sección de color siguiente */
}
.rios-servicio-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: center;
}
@media (max-width: 900px) {
    .rios-servicio-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.rios-servicio-hero__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.rios-servicio-hero__copy h1 { margin: 0; line-height: var(--leading-tight); }
.rios-servicio-hero__subtitulo {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    line-height: var(--leading-snug);
    margin: 0;
}
.rios-servicio-hero__copy .rios-prose--lead {
    color: var(--color-text-muted);
    max-width: none;
    margin: 0;
    font-size: var(--font-size-lg);
}
.rios-servicio-hero__copy .rios-prose--lead p { margin: 0 0 var(--space-3); }
.rios-servicio-hero__copy .rios-prose--lead p:last-child { margin-bottom: 0; }
.rios-servicio-hero__cta { margin-top: var(--space-4); }
.rios-servicio-hero__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4/3;
    background: var(--color-bg-subtle);
}
.rios-servicio-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Items "Descubre las ventajas" */
.rios-servicio-items {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-8);
}
@media (max-width: 720px) {
    .rios-servicio-items { grid-template-columns: 1fr; gap: var(--space-5); }
}
.rios-servicio-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-5);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.rios-servicio-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-text-brand);
    transform: translateY(-2px);
}
.rios-servicio-item__num {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-brand);
    line-height: 1;
    letter-spacing: -0.02em;
    min-width: 2.5rem;
}
.rios-servicio-item__body { display: flex; flex-direction: column; gap: var(--space-2); }
.rios-servicio-item__titulo {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-base);
    line-height: var(--leading-snug);
    display: block;
}
.rios-servicio-item__desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
}

/* Filas H2 + texto */
.rios-servicio-fila__container { max-width: 880px; }
.rios-servicio-fila__container .rios-prose { max-width: none; }
.rios-servicio-fila__container .rios-section-head__title {
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}

/* ============================================================
 * BLOG — Tabla de contenidos (TOC) auto desde H2
 * ============================================================ */
.rios-toc {
    background: var(--color-bg-subtle, #F5F9FF);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-text-brand);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    margin: 0 0 var(--space-8);
    max-width: 760px;
    margin-inline: auto;
}
.rios-toc__title {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-lg);
    line-height: var(--leading-snug);
}
.rios-toc__title .rios-eyebrow {
    color: var(--color-text-brand);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.rios-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rios-toc__item { margin: 0; }
.rios-toc__link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: baseline;
    color: var(--color-text-base);
    text-decoration: none;
    font-size: var(--font-size-base);
    line-height: var(--leading-snug);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed transparent;
    transition: border-color .2s ease, color .2s ease;
}
.rios-toc__link:hover {
    color: var(--color-text-brand);
    border-bottom-color: var(--color-text-brand);
}
.rios-toc__num {
    color: var(--color-text-brand);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.rios-toc__text { font-weight: var(--font-weight-medium); }

/* ============================================================
 * BLOQUES DE ENRIQUECIMIENTO — landing dinámica
 * ============================================================ */

/* Stats bar */
.rios-servicio-stats {
    background: var(--color-text-brand);
    color: #fff;
    padding-block: clamp(var(--space-6), 4vw, var(--space-10));
}
.rios-servicio-stats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
    text-align: center;
}
@media (max-width: 720px) {
    .rios-servicio-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
.rios-servicio-stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-inline: var(--space-3);
}
.rios-servicio-stats__item:first-child { border-left: 0; }
@media (max-width: 720px) {
    .rios-servicio-stats__item:nth-child(odd) { border-left: 0; }
}
.rios-servicio-stats__num {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
}
.rios-servicio-stats__num-sub {
    font-size: 0.5em;
    opacity: 0.65;
    font-weight: var(--font-weight-regular);
    margin-left: 0.1em;
}
.rios-servicio-stats__label {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-weight-medium);
}

/* Equipo (profesionales del área) */
.rios-servicio-equipo {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}
@media (max-width: 900px) { .rios-servicio-equipo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rios-servicio-equipo { grid-template-columns: 1fr; } }
.rios-servicio-equipo__card {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform .25s ease;
}
.rios-servicio-equipo__card:hover { transform: translateY(-4px); }
.rios-servicio-equipo__media {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-full, 999px);
    margin: 0 auto var(--space-3);
    max-width: 160px;
    background: var(--color-bg-subtle);
}
.rios-servicio-equipo__media--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-text-brand);
    color: #fff;
}
.rios-servicio-equipo__ini {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(var(--font-size-2xl), 6vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.04em;
    line-height: 1;
}
.rios-servicio-equipo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.85);
    transition: filter .35s ease;
}
.rios-servicio-equipo__card:hover .rios-servicio-equipo__img { filter: grayscale(0); }
.rios-servicio-equipo__nombre {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-base);
    line-height: var(--leading-snug);
}
.rios-servicio-equipo__puesto {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.rios-servicio-equipo__more {
    margin-top: var(--space-10);
    text-align: center;
}

/* Sedes (versión compacta para landing servicio) */
.rios-servicio-sedes {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5);
}
@media (max-width: 1024px) { .rios-servicio-sedes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .rios-servicio-sedes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .rios-servicio-sedes { grid-template-columns: 1fr; } }
.rios-servicio-sede {
    padding: var(--space-5);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.rios-servicio-sede:hover {
    border-color: var(--color-text-brand);
    box-shadow: var(--shadow-md);
}
.rios-servicio-sede__name {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-brand);
    line-height: var(--leading-snug);
}
.rios-servicio-sede__addr {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--leading-snug);
}
.rios-servicio-sede__tel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-base);
    font-size: var(--font-size-sm);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}
.rios-servicio-sede__tel:hover { color: var(--color-text-brand); }
.rios-servicio-sede__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-brand);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

/* Servicios relacionados */
.rios-servicio-relacionados {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
@media (max-width: 900px) { .rios-servicio-relacionados { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rios-servicio-relacionados { grid-template-columns: 1fr; } }
.rios-servicio-relacionado__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.rios-servicio-relacionado__card:hover {
    border-color: var(--color-text-brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.rios-servicio-relacionado__title {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-base);
    line-height: var(--leading-snug);
}
.rios-servicio-relacionado__sub {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
}
.rios-servicio-relacionado__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}


/* ============================================================
 * Contacto — page /contacto/ (tpl-contacto.php)
 * Grid de 5 sedes con NAP completo + «Cómo llegar».
 * ============================================================ */

.rios-contact-sedes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}
.rios-contact-sede {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard);
}
.rios-contact-sede:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
}
.rios-contact-sede__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rios-contact-sede__name {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
}
.rios-contact-sede__name a {
    color: var(--color-text);
    text-decoration: none;
}
.rios-contact-sede__name a:hover { color: var(--color-brand); }
.rios-contact-sede__address {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--leading-normal);
}
.rios-contact-sede__address svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--color-text-muted);
}
.rios-contact-sede__channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}
.rios-contact-sede__channels li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.rios-contact-sede__channels svg { color: var(--color-text-muted); flex: 0 0 auto; }
.rios-contact-sede__channels a {
    color: var(--color-text-brand);
    text-decoration: none;
}
.rios-contact-sede__channels a:hover { text-decoration: underline; }
.rios-contact-sede__hours {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--leading-normal);
}
.rios-contact-sede__hours strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.rios-contact-sede__hours-note { font-size: var(--font-size-xs); }
.rios-contact-sede__directions {
    margin: auto 0 0;
    font-size: var(--font-size-sm);
}
.rios-contact-sede__directions a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--font-size-xs);
    transition: gap var(--duration-base) var(--easing-standard);
}
.rios-contact-sede__directions a:hover { gap: var(--space-3); }


/* ============================================================
 * Nav principal — submenús del menú WP (Servicios / Sedes)
 * Desktop: dropdown bajo el item padre. Mobile: lista anidada indentada.
 * ============================================================ */

.rios-nav > li { position: relative; }
.rios-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--space-3));
    min-width: 250px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--space-2));
    transition:
        opacity var(--duration-base) var(--easing-standard),
        transform var(--duration-base) var(--easing-standard),
        visibility var(--duration-base) var(--easing-standard);
}
/* Puente invisible entre el link y el dropdown — evita que el hover se pierda en el trayecto */
.rios-nav .sub-menu::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--space-3));
    left: 0;
    right: 0;
    height: var(--space-3);
}
.rios-nav > li:hover > .sub-menu,
.rios-nav > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.rios-nav .sub-menu a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    width: 100%;
    line-height: var(--leading-snug);
}
.rios-nav .sub-menu a::after { display: none; }
.rios-nav .sub-menu a:hover { background: var(--color-bg-alt); }
/* Caret del item padre */
.rios-nav > li.menu-item-has-children > a::before {
    content: "";
    display: inline-block;
    order: 2;
    width: 6px;
    height: 6px;
    margin-left: var(--space-2);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--duration-fast) var(--easing-standard);
}

@media (max-width: 920px) {
    /* Mobile: submenú siempre visible, anidado e indentado bajo su padre */
    .rios-nav .sub-menu {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0 var(--space-4);
    }
    .rios-nav .sub-menu a {
        font-size: var(--font-size-base);
        color: var(--color-text-muted);
        padding: var(--space-2) 0;
        border-radius: 0;
    }
    .rios-nav .sub-menu a:hover { background: transparent; }
    .rios-nav > li.menu-item-has-children > a::before { display: none; }
}


/* ============================================================
 * Stats editorial (home — rompe ritmo I-V)
 * Bloque de cifras grandes entre Intro y Áreas. Sin caja, sin rule
 * romano, sin eyebrow. Su silencio tipográfico es lo que lo hace
 * sobresalir frente a las secciones con head numerado.
 *
 * TODO(font-light): cuando llegue el peso Light de GT America,
 * sustituir font-weight de .rios-stats__num por var(--font-weight-light)
 * y reducir letter-spacing a -0.04em. Hoy va con Regular (400) que
 * es el más ligero disponible (.woff2 no incluye Light).
 * ============================================================ */

.rios-stats {
    padding-block: clamp(3rem, 7vw, 6.5rem);
    background: var(--color-bg);
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}
.rios-stats__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.rios-stats__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
    border-right: 1px solid var(--color-divider);
    min-height: clamp(8rem, 12vw, 11rem);
}
.rios-stats__item:last-child { border-right: 0; }
.rios-stats__num {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    line-height: 0.95;
    font-weight: var(--font-weight-regular);    /* TODO sustituir por Light cuando llegue */
    color: var(--color-text-brand);
    letter-spacing: -0.035em;
    font-feature-settings: "kern", "liga", "tnum", "lnum";
}
.rios-stats__num sup {
    font-size: 0.45em;
    font-weight: var(--font-weight-medium);
    top: -0.55em;
    letter-spacing: 0;
    margin-left: 0.05em;
}
.rios-stats__num-sub {
    font-size: 0.4em;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin-left: 0.08em;
    vertical-align: 0.45em;
}
.rios-stats__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
    max-width: 22ch;
}
@media (max-width: 900px) {
    .rios-stats__list { grid-template-columns: repeat(2, 1fr); }
    .rios-stats__item:nth-child(2n) { border-right: 0; }
    .rios-stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--color-divider); }
}
@media (max-width: 540px) {
    .rios-stats__list { grid-template-columns: 1fr; }
    .rios-stats__item {
        border-right: 0;
        border-bottom: 1px solid var(--color-divider);
        padding-block: clamp(1.25rem, 4vw, 2rem);
    }
    .rios-stats__item:last-child { border-bottom: 0; }
}


/* ============================================================
 * Áreas — índice editorial vertical (home)
 * Reemplaza el grid horizontal por listado tipo índice de revista:
 * número grande (peso = acento por área), título, descripción, link.
 * Hairline entre filas, acento --color-service-* en el numeral.
 * ============================================================ */

.rios-areas-index-section {
    padding-block: var(--space-section-y);
}
.rios-areas-index {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    border-top: 1px solid var(--color-divider);
}
.rios-areas-index__row {
    border-bottom: 1px solid var(--color-divider);
    position: relative;
}
.rios-areas-index__row::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 0; height: 2px;
    background: var(--color-brand);
    transition: width 350ms var(--easing-standard);
}
.rios-areas-index__row:hover::before { width: 100%; }

.rios-areas-index__link {
    display: grid;
    grid-template-columns: clamp(5.5rem, 11vw, 9rem) minmax(0, 1fr) minmax(0, 1.6fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: clamp(1.5rem, 4vw, 2.75rem);
    text-decoration: none;
    color: inherit;
    transition: background 250ms var(--easing-standard);
}
.rios-areas-index__row:hover .rios-areas-index__link {
    background: linear-gradient(90deg, var(--color-bg-alt) 0%, transparent 80%);
}

.rios-areas-index__num {
    font-family: var(--font-sans);
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 0.9;
    font-weight: var(--font-weight-regular);    /* TODO sustituir por Light cuando llegue */
    letter-spacing: -0.04em;
    color: var(--rios-blue-shade-4);            /* default tono medio-claro · sobrescrito por modifier */
    transition: color 350ms var(--easing-standard), transform 350ms var(--easing-standard);
    font-feature-settings: "tnum", "lnum";
}
.rios-areas-index__row--asesoria     .rios-areas-index__num { color: var(--color-service-asesoria); }
.rios-areas-index__row--fincas       .rios-areas-index__num { color: var(--color-service-fincas); }
.rios-areas-index__row--inmobiliaria .rios-areas-index__num { color: var(--color-service-inmobiliaria); }
.rios-areas-index__row--legal        .rios-areas-index__num { color: var(--color-service-legal); }

.rios-areas-index__row:hover .rios-areas-index__num {
    color: var(--color-brand);
}

.rios-areas-index__heading { min-width: 0; }
.rios-areas-index__title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: var(--leading-snug);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-brand);
    letter-spacing: -0.005em;
}

.rios-areas-index__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
}
.rios-areas-index__desc {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
    max-width: 52ch;
}
.rios-areas-index__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    transition: gap 250ms var(--easing-standard);
}
.rios-areas-index__row:hover .rios-areas-index__more { gap: var(--space-4); }

@media (max-width: 900px) {
    .rios-areas-index__link {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "num heading"
            "body body";
        row-gap: var(--space-5);
    }
    .rios-areas-index__num     { grid-area: num; }
    .rios-areas-index__heading { grid-area: heading; align-self: center; }
    .rios-areas-index__body    { grid-area: body; }
}
@media (max-width: 540px) {
    .rios-areas-index__title { font-size: clamp(1.35rem, 6vw, 1.75rem); }
    .rios-areas-index__num   { font-size: clamp(2.25rem, 12vw, 3.75rem); }
}


/* ============================================================
 * Pillar hero — foto institucional con tratamiento duotone
 * El home tiene hero foto a sangre fuerte; el pillar arrancaba con
 * texto plano sobre blanco. Esto homogeneíza la entrada visual sin
 * romper marca (filtro = solo azul brand + neutros).
 *
 * object-position distinto por slug de área para variar el encuadre
 * y que las 4 pillars no se vean clonadas usando la misma foto.
 * Cuando lleguen más fotos (despacho reuniones / archivo / fachada),
 * cambiar el background-image por área en .rios-pillar-hero--{slug}.
 * ============================================================ */

.rios-pillar-hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(5rem, 12vw, 9rem);
    color: var(--color-text-inverse);
    background: var(--color-bg-inverse);
    overflow: hidden;
}
.rios-pillar-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2026/05/rios-recepcion-1.jpg");
    background-size: cover;
    background-position: center 35%;
    /* Duotone: greyscale + boost de contraste, luego color() lo deja en gama brand vía mezcla */
    filter: grayscale(1) contrast(1.08) brightness(0.9);
    opacity: 1;
    z-index: -2;
}
.rios-pillar-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Capa azul brand encima — duotone clásico, con suficiente transparencia
     * para que la foto se distinga (antes 0.85-0.96 = foto invisible). */
    background: linear-gradient(180deg,
        rgba(0, 31, 99, 0.66) 0%,
        rgba(0, 31, 99, 0.74) 55%,
        rgba(0, 18, 71, 0.82) 100%);
    z-index: -1;
}
.rios-pillar-hero .rios-section-head .rios-rule,
.rios-pillar-hero .rios-section-head .rios-eyebrow {
    color: var(--color-text-inverse);
}
.rios-pillar-hero .rios-section-head .rios-rule::after {
    background: var(--color-text-inverse);
    opacity: 0.5;
}
.rios-pillar-hero .rios-display {
    color: var(--color-text-inverse);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    max-width: 22ch;
    margin: 0;
}
.rios-pillar-hero .rios-lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 60ch;
    margin-top: var(--space-6);
}
.rios-pillar-hero__cta {
    margin-top: clamp(2rem, 4vw, 3rem);
}
.rios-pillar-hero__cta .rios-btn--primary {
    background: var(--color-text-inverse);
    color: var(--color-text-brand);
    border-color: var(--color-text-inverse);
}
.rios-pillar-hero__cta .rios-btn--primary:hover {
    background: transparent;
    color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
}

/* Variación del encuadre por slug del page (modifier class en el propio
 * elemento, añadido por tpl-pillar.php). Mientras solo hay 1 foto
 * institucional, cambiar object-position rompe el efecto clónico de las
 * 4-5 pillars. Cuando lleguen más fotos sustituir background-image por área. */
.rios-pillar-hero--asesoria::before                  { background-position: center 28%; }
.rios-pillar-hero--administracion-fincas::before     { background-position: center 52%; }
.rios-pillar-hero--inmobiliaria::before              { background-position: right 35%; }
.rios-pillar-hero--legal::before                     { background-position: left 38%; }
.rios-pillar-hero--laboral::before                   { background-position: center 60%; }
/* EN (slug WPML) */
.rios-pillar-hero--advisory::before                  { background-position: center 28%; }
.rios-pillar-hero--property-administration::before   { background-position: center 52%; }
.rios-pillar-hero--real-estate::before               { background-position: right 35%; }
.rios-pillar-hero--labour::before                    { background-position: center 60%; }

/* Override del responsive antiguo (línea 3481) — sin esto el padding cae a 40px en mobile y el duotone queda apretado */
@media (max-width: 600px) {
    .rios-pillar-hero { padding-block: clamp(4rem, 14vw, 6rem); }
}