/* pages/web.css: la web pública, el portal del equipo RMK (layouts/landing.layout.php y landing/index.view.php).
   Diseño de ChatGPT (portada centrada con una vista del sistema) puesto en orden: todos los colores, tamaños,
   espacios, radios y sombras salen de tokens.css. Clara, con el azul RMK para las acciones, el azul profundo
   (--web-tinta) para los títulos y el rojo y el amarillo del logo como acentos (luces de la portada, tarjetas).
   Letras: Inter (400 · 500 · 600) y Geist Mono para las etiquetas y los datos (--font-web-datos); nada por debajo
   de 11 px.
     .barra             la barra de arriba (fija al bajar); en menos de 992 px el menú se abre con .barra-menu
     .web-boton         el botón de la web (--principal azul, --claro; --chico)
     .portada-estudio   el título centrado, las acciones y .workspace-marco, una vista del sistema con enlaces reales
     .prueba            operadores (.socios) y cifras
     .seccion           cada sección (--gris: fondo azul muy suave), con su .seccion-cabecera y su .etiqueta
     .nosotros, .rasgos, .filtro-ciudades, .tiendas/.tienda (--claro, --movistar, --bitel), .soluciones, .pasos, .llamada
     .pie               el pie
   Las secciones entran al bajar (.revelar → .visible) y las tarjetas suben 2 px al pasar el ratón, salvo con
   movimiento reducido. */

@layer base {
    html {
        -webkit-text-size-adjust: 100%;
    }
    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }
    .web {
        --anillo-foco: var(--anillo-foco-web);
        margin: 0;
        background: var(--color-superficie);
        color: var(--color-texto-2);
        font-family: var(--font-sans);
        font-size: var(--texto-web-cuerpo);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }
    .web *,
    .web *::before,
    .web *::after {
        box-sizing: border-box;
    }
    .web img {
        max-width: 100%;
        height: auto;
    }
    .web a {
        color: inherit;
    }
    .web :where(h1, h2, h3, p, ul, ol, dl, dd) {
        margin: 0;
    }
    .web :where(ul, ol) {
        padding: 0;
        list-style: none;
    }
    .web :where(b, strong) {
        font-weight: var(--fw-semi);
    }
    .web section[id] {
        scroll-margin-top: 72px;
    }
}

@layer pages {
    /* ---------- Comunes ---------- */
    .web-contenedor {
        width: min(100% - 2 * var(--espacio-6), 1280px);
        margin-inline: auto;
    }
    @media (max-width: 767.98px) {
        .web-contenedor {
            width: calc(100% - 2 * var(--espacio-5));
        }
    }
    .web-oculto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .web-saltar {
        position: fixed;
        top: var(--espacio-2);
        left: var(--espacio-2);
        z-index: 30;
        padding: var(--espacio-2) var(--espacio-4);
        border: 2px solid var(--color-primario);
        border-radius: var(--radio-md);
        background: var(--color-superficie);
        color: var(--color-primario);
        font-weight: var(--fw-semi);
        transform: translateY(-200%);
    }
    .web-saltar:focus {
        outline: 3px solid var(--marca-azul-300);
        outline-offset: 2px;
        transform: none;
    }
    /* la etiqueta sobre cada título */
    .etiqueta {
        margin-bottom: var(--espacio-3);
        color: var(--color-primario);
        font-family: var(--font-web-datos);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medio);
        letter-spacing: .14em;
        text-transform: uppercase;
    }
    .operador-punto {
        --punto: var(--web-tinta);
        display: inline-block;
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--punto);
    }
    .operador-punto--claro {
        --punto: var(--operador-claro);
    }
    .operador-punto--movistar {
        --punto: var(--operador-movistar);
    }
    .operador-punto--bitel {
        --punto: var(--operador-bitel);
    }

    /* el botón de la web */
    .web-boton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--espacio-3);
        min-height: 52px;
        padding: 0 var(--espacio-5);
        border: 1px solid transparent;
        border-radius: var(--radio-md);
        font-size: var(--fs-base);
        font-weight: var(--fw-semi);
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .2s, transform .2s, box-shadow .2s;
    }
    .web-boton:focus-visible {
        outline: none;
        box-shadow: var(--anillo-foco);
    }
    .web-boton--principal {
        background: var(--color-primario);
        color: var(--color-superficie);
    }
    .web-boton--principal:hover {
        background: var(--color-primario-hover);
        box-shadow: var(--sombra-sm);
        transform: translateY(-1px);
    }
    .web-boton--claro {
        border-color: var(--color-borde);
        background: var(--color-superficie);
        color: var(--web-tinta);
    }
    .web-boton--claro:hover {
        background: var(--color-superficie-2);
    }
    .web-boton--chico {
        min-height: 44px;
        padding: 0 var(--espacio-5);
    }

    /* ---------- Barra ---------- */
    .barra {
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid var(--color-borde);
        background: var(--color-superficie);
    }
    .barra-fila {
        display: flex;
        align-items: center;
        gap: var(--espacio-5);
        min-height: 60px;
    }
    .barra-marca {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: var(--espacio-2);
        min-height: 44px;
        border-radius: var(--radio-sm);
        text-decoration: none;
    }
    .barra-logo {
        width: auto;
        height: 32px;
    }
    .marca-texto {
        color: var(--web-tinta);
        font-size: var(--fs-xl);
        font-weight: var(--fw-semi);
        line-height: 1.1;
        letter-spacing: -.03em;
    }
    .marca-texto span {
        display: block;
        margin-top: 2px;
        font-size: var(--fs-xs);
        font-weight: var(--fw-medio);
        letter-spacing: .14em;
        text-transform: uppercase;
    }
    .barra-nav {
        display: flex;
        flex: 1;
        align-items: center;
        gap: var(--espacio-5);
    }
    .barra-enlaces {
        display: flex;
        gap: var(--espacio-2);
        margin-left: auto;
    }
    .barra-enlace {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 var(--espacio-3);
        border-radius: var(--radio-md);
        color: var(--color-texto-2);
        font-size: var(--fs-md);
        font-weight: var(--fw-medio);
        text-decoration: none;
        transition: color .15s, background-color .15s;
    }
    .barra-enlace:hover,
    .barra-enlace[aria-current="location"] {
        background: var(--color-primario-suave);
        color: var(--color-primario);
    }
    /* el punto bajo la sección en la que estás */
    .barra-enlace[aria-current="location"]::after {
        content: "";
        position: absolute;
        bottom: 4px;
        left: calc(50% - 2px);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--color-primario);
    }
    .barra-nav > .web-boton {
        min-height: 36px;
        padding: 0 var(--espacio-4);
        gap: var(--espacio-2);
        font-size: var(--fs-md);
    }
    .barra-nav > .web-boton::after {
        content: "↗" / "";
    }
    .barra-marca:focus-visible,
    .barra-enlace:focus-visible,
    .barra-menu:focus-visible {
        outline: none;
        box-shadow: var(--anillo-foco);
    }
    .barra-menu {
        display: none;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-md);
        background: var(--color-superficie-2);
        color: var(--web-tinta);
        cursor: pointer;
    }
    @media (max-width: 991.98px) {
        .barra-fila {
            min-height: 56px;
        }
        .barra-menu {
            display: grid;
        }
        /* sin JavaScript el menú se queda abierto (y el botón no hace falta) */
        .barra-nav {
            display: none;
        }
        @media (scripting: none) {
            .barra-nav {
                display: flex;
                flex-wrap: wrap;
            }
            .barra-menu {
                display: none;
            }
        }
        .barra[data-abierto] .barra-nav {
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: var(--espacio-3);
            padding: var(--espacio-4) var(--espacio-5) var(--espacio-5);
            border-bottom: 1px solid var(--color-borde);
            border-radius: 0 0 var(--radio-lg) var(--radio-lg);
            background: var(--color-superficie);
            box-shadow: var(--sombra-web-tarjeta);
        }
        .barra[data-abierto] .barra-enlaces {
            flex-direction: column;
            margin-left: 0;
        }
        /* en el menú abierto, los de siempre: 44 px para el dedo */
        .barra-enlace,
        .barra-nav > .web-boton {
            min-height: 44px;
            font-size: var(--fs-lg);
        }
    }
    @media (max-width: 767.98px) {
        .barra-logo {
            height: 30px;
        }
        .marca-texto {
            font-size: var(--fs-lg);
        }
    }

    /* ---------- Portada: el título centrado y la vista del sistema ---------- */
    .portada-estudio {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: clamp(40px, 5vw, 64px) 0 0;
        background: var(--color-superficie-2);
    }
    /* luces suaves con los colores del logo */
    .portada-estudio::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(ellipse at 10% 70%, var(--web-luz-azul), transparent 45%),
            radial-gradient(ellipse at 90% 55%, var(--web-luz-roja), transparent 45%),
            radial-gradient(ellipse at 50% 12%, var(--web-luz-amarilla), transparent 40%);
    }
    .estudio-intro {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }
    .estudio-intro > .etiqueta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--espacio-2);
        margin-bottom: var(--espacio-5);
        font-family: var(--font-sans);
    }
    .estudio-intro > .etiqueta span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--marca-rojo);
    }
    .estudio-intro h1 {
        color: var(--web-tinta);
        font-size: var(--texto-web-portada);
        font-weight: var(--fw-medio);
        line-height: 1.07;
        letter-spacing: -.05em;
    }
    /* "Un solo equipo.": los azules del logo, de profundo a claro */
    .estudio-intro h1 em {
        font-style: normal;
        color: var(--color-primario);
    }
    @supports (background-clip: text) or (-webkit-background-clip: text) {
        .estudio-intro h1 em {
            background: linear-gradient(100deg, var(--marca-azul-700), var(--marca-azul-600) 50%, var(--marca-azul-500));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    }
    .estudio-descripcion {
        margin-top: var(--espacio-5);
        color: var(--color-texto-2);
        font-size: var(--fs-lg);
        line-height: 1.7;
    }
    .estudio-acciones {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--espacio-5);
        margin-top: var(--espacio-6);
    }
    .estudio-enlace {
        display: inline-flex;
        align-items: center;
        gap: var(--espacio-3);
        min-height: 44px;
        border-radius: var(--radio-sm);
        color: var(--color-primario);
        font-size: var(--fs-base);
        font-weight: var(--fw-medio);
        text-decoration: none;
    }
    .estudio-enlace:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .estudio-enlace:focus-visible {
        outline: none;
        box-shadow: var(--anillo-foco);
    }
    .estudio-credenciales {
        margin-top: var(--espacio-3);
        color: var(--color-texto-atenuado);
        font-size: var(--fs-sm);
    }

    /* la vista del sistema: una ventana con su barra, su menú y las herramientas (enlaces reales) */
    .workspace-marco {
        position: relative;
        max-width: 1120px;
        margin: var(--espacio-7) auto 0;
        overflow: hidden;
        border: 1px solid var(--marca-azul-100);
        border-bottom: 0;
        border-radius: var(--radio-xl) var(--radio-xl) 0 0;
        background: var(--color-superficie);
        box-shadow: var(--sombra-web-marco);
        text-align: left;
    }
    .workspace-superior {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-4);
        min-height: 60px;
        padding: 0 var(--espacio-5);
        border-bottom: 1px solid var(--color-borde);
    }
    .workspace-marca {
        display: flex;
        align-items: center;
        gap: var(--espacio-2);
        color: var(--web-tinta);
        font-size: var(--fs-xl);
        font-weight: var(--fw-semi);
        letter-spacing: -.03em;
    }
    .workspace-marca img {
        width: 30px;
        height: 24px;
        object-fit: contain;
    }
    .workspace-marca b {
        margin-left: var(--espacio-1);
        padding-left: var(--espacio-3);
        border-left: 1px solid var(--color-borde);
        color: var(--color-texto-atenuado);
        font-size: var(--fs-sm);
        font-weight: var(--fw-normal);
        letter-spacing: 0;
    }
    .workspace-rotulo,
    .workspace-nav-label,
    .workspace-saludo p,
    .workspace-sello,
    .workspace-base > span:first-child {
        color: var(--color-texto-atenuado);
        font-size: var(--fs-xs);
        letter-spacing: .12em;
        text-transform: uppercase;
    }
    .workspace-avatar {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-primario-suave);
        color: var(--color-primario);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semi);
    }
    .workspace-cuerpo {
        display: grid;
        grid-template-columns: 208px 1fr;
        min-height: 360px;
    }
    .workspace-nav {
        display: flex;
        flex-direction: column;
        gap: var(--espacio-1);
        padding: var(--espacio-6) var(--espacio-4);
        border-right: 1px solid var(--color-borde);
        background: var(--color-superficie-2);
    }
    .workspace-nav-label {
        margin-bottom: var(--espacio-2);
    }
    .workspace-nav > a {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        min-height: 40px;
        padding: 0 var(--espacio-3);
        border-radius: var(--radio-md);
        color: var(--color-texto-2);
        font-size: var(--fs-md);
        text-decoration: none;
        transition: background-color .15s, color .15s;
    }
    .workspace-nav > a span {
        font-size: var(--fs-lg);
        line-height: 1;
    }
    .workspace-nav > a span:last-child:not(:first-child) {
        margin-left: auto;
        font-size: var(--fs-sm);
    }
    .workspace-nav > a.workspace-nav-actual,
    .workspace-nav > a:hover {
        background: var(--color-primario-suave);
        color: var(--color-primario);
    }
    .workspace-ayuda {
        margin-top: auto;
        padding: var(--espacio-5) var(--espacio-2) 0;
    }
    .workspace-ayuda p {
        margin-top: var(--espacio-1);
        color: var(--color-texto-2);
        font-size: var(--fs-md);
        line-height: 1.6;
    }
    .workspace-ayuda a {
        display: flex;
        justify-content: space-between;
        margin-top: var(--espacio-3);
        border-radius: var(--radio-sm);
        color: var(--color-primario);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medio);
        text-decoration: none;
    }
    .workspace-principal {
        padding: var(--espacio-6) var(--espacio-6) var(--espacio-5);
    }
    .workspace-saludo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-3);
        margin-bottom: var(--espacio-5);
    }
    .workspace-saludo h2 {
        margin-top: var(--espacio-1);
        color: var(--web-tinta);
        font-size: var(--fs-3xl);
        font-weight: var(--fw-medio);
        line-height: 1.3;
        letter-spacing: -.03em;
    }
    .workspace-sello {
        padding: var(--espacio-1) var(--espacio-3);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-sm);
        white-space: nowrap;
    }
    .workspace-herramientas {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--espacio-4);
    }
    /* una tarjeta por herramienta, cada una con un color del logo: azul, rojo y amarillo */
    .workspace-herramienta {
        --herramienta-fondo: var(--color-primario-suave);
        --herramienta-borde: var(--marca-azul-100);
        --herramienta-acento: var(--color-primario);
        --herramienta-titulo: var(--web-tinta);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: var(--espacio-5) var(--espacio-4) var(--espacio-4);
        border: 1px solid var(--herramienta-borde);
        border-radius: var(--radio-lg);
        background: var(--herramienta-fondo);
        color: var(--herramienta-acento);
        text-decoration: none;
        transition: transform .2s, box-shadow .2s;
    }
    .workspace-herramienta--1 {
        --herramienta-fondo: var(--color-peligro-suave);
        --herramienta-borde: var(--color-peligro-borde);
        --herramienta-acento: var(--color-peligro-texto);
        --herramienta-titulo: var(--color-peligro-texto);
    }
    .workspace-herramienta--2 {
        --herramienta-fondo: var(--color-puntos-suave);
        --herramienta-borde: var(--color-aviso-borde);
        --herramienta-acento: var(--color-puntos-texto);
        --herramienta-titulo: var(--color-puntos-texto);
    }
    .workspace-herramienta:hover {
        box-shadow: var(--sombra-web-tarjeta);
        transform: translateY(-2px);
    }
    .workspace-herramienta:focus-visible {
        outline: none;
        box-shadow: var(--anillo-foco);
    }
    .workspace-flecha {
        position: absolute;
        top: var(--espacio-4);
        right: var(--espacio-4);
        font-size: var(--fs-sm);
    }
    .portal-icon {
        flex: none;
        width: 24px;
        height: 24px;
        margin-bottom: var(--espacio-4);
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.5;
    }
    .workspace-herramienta h3 {
        color: var(--herramienta-titulo);
        font-size: var(--fs-lg);
        font-weight: var(--fw-semi);
        line-height: 1.3;
        letter-spacing: -.01em;
    }
    .workspace-herramienta p {
        margin-top: var(--espacio-2);
        color: var(--color-texto-2);
        font-size: var(--fs-md);
        line-height: 1.6;
    }
    .workspace-abrir {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: var(--espacio-2);
        margin-top: auto;
        padding-top: var(--espacio-4);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medio);
    }
    .workspace-inferior {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--espacio-5);
        margin-top: var(--espacio-5);
    }
    .workspace-inferior a {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        min-height: 44px;
        border-radius: var(--radio-md);
        color: var(--color-texto-atenuado);
        font-size: var(--fs-sm);
        text-decoration: none;
    }
    .workspace-inferior a > span:last-child {
        margin-left: auto;
        color: var(--color-texto-atenuado);
    }
    .workspace-inferior b {
        display: block;
        color: var(--web-tinta);
        font-size: var(--fs-base);
        font-weight: var(--fw-medio);
    }
    .workspace-inferior small {
        display: block;
        margin-top: 2px;
        color: var(--color-texto-atenuado);
        font-size: var(--fs-sm);
    }
    .workspace-red-icono {
        display: grid;
        flex: none;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-md);
        background: var(--color-superficie-2);
        color: var(--color-primario);
        font-size: var(--fs-xl);
    }
    .workspace-nav > a:focus-visible,
    .workspace-ayuda a:focus-visible,
    .workspace-inferior a:focus-visible {
        outline: none;
        box-shadow: var(--anillo-foco);
    }
    .workspace-base {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-4);
        padding: var(--espacio-3) var(--espacio-5);
        border-top: 1px solid var(--color-borde);
    }
    .workspace-base > span:last-child {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        color: var(--color-texto-atenuado);
        font-size: var(--fs-sm);
    }
    .workspace-base i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--neutro-300);
    }
    @media (max-width: 991.98px) {
        .workspace-cuerpo {
            grid-template-columns: 168px 1fr;
        }
        .workspace-nav {
            padding: var(--espacio-5) var(--espacio-3);
        }
        .workspace-principal {
            padding: var(--espacio-5);
        }
        .workspace-saludo h2 {
            font-size: var(--fs-xl);
        }
        .workspace-sello {
            display: none;
        }
        .workspace-herramienta {
            padding: var(--espacio-4) var(--espacio-3);
        }
    }
    /* en el celular: el menú de la ventana en una fila que se desplaza y las tarjetas una debajo de otra */
    @media (max-width: 767.98px) {
        .workspace-marco {
            margin-top: var(--espacio-6);
            border-radius: var(--radio-lg) var(--radio-lg) 0 0;
        }
        .workspace-superior {
            padding-inline: var(--espacio-4);
        }
        .workspace-rotulo,
        .workspace-nav-label,
        .workspace-ayuda {
            display: none;
        }
        .workspace-cuerpo {
            display: block;
            min-height: 0;
        }
        .workspace-nav {
            flex-direction: row;
            gap: var(--espacio-1);
            padding: var(--espacio-3);
            overflow-x: auto;
            border-right: 0;
            border-bottom: 1px solid var(--color-borde);
            scrollbar-width: none;
        }
        .workspace-nav > a {
            flex: none;
            gap: var(--espacio-2);
            white-space: nowrap;
        }
        .workspace-nav > a span:last-child:not(:first-child) {
            display: none;
        }
        .workspace-principal {
            padding: var(--espacio-5) var(--espacio-4);
        }
        .workspace-herramientas {
            grid-template-columns: 1fr;
            gap: var(--espacio-3);
        }
        .workspace-herramienta {
            display: grid;
            grid-template-columns: 28px 1fr;
            column-gap: var(--espacio-3);
            padding: var(--espacio-4);
            border-top: 3px solid var(--herramienta-acento);
        }
        .workspace-herramienta .portal-icon {
            grid-row: 1 / 3;
            align-self: start;
            margin-bottom: 0;
        }
        .workspace-herramienta h3 {
            padding-right: var(--espacio-4);
        }
        .workspace-herramienta p,
        .workspace-abrir {
            grid-column: 2;
        }
        .workspace-abrir {
            padding-top: var(--espacio-3);
        }
        .workspace-inferior {
            grid-template-columns: 1fr;
            gap: var(--espacio-2);
        }
        .workspace-base {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--espacio-1);
            padding: var(--espacio-3) var(--espacio-4);
        }
    }

    /* ---------- Prueba: operadores y cifras ---------- */
    .prueba {
        padding: var(--espacio-6) 0;
        border-bottom: 1px solid var(--color-borde);
        background: var(--color-superficie);
    }
    .prueba-rejilla {
        display: grid;
        gap: var(--espacio-6);
        align-items: center;
    }
    @media (min-width: 992px) {
        .prueba-rejilla {
            grid-template-columns: auto minmax(0, 1fr);
            gap: var(--espacio-7);
        }
    }
    .prueba-etiqueta {
        color: var(--color-texto-atenuado);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medio);
        letter-spacing: .04em;
    }
    .socios {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espacio-3) var(--espacio-5);
        margin-top: var(--espacio-3);
    }
    .socio {
        display: inline-flex;
        align-items: center;
        gap: var(--espacio-2);
        color: var(--web-tinta);
        font-size: var(--fs-3xl);
        font-weight: var(--fw-medio);
        letter-spacing: -.03em;
    }
    .cifras {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-5) 0;
    }
    @media (min-width: 768px) {
        .cifras {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
    .cifra {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: var(--espacio-1);
        padding: 0 var(--espacio-5);
        border-left: 1px solid var(--color-borde);
    }
    .cifra-valor {
        color: var(--web-tinta);
        font-size: var(--texto-web-cifra);
        font-weight: var(--fw-medio);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        letter-spacing: -.04em;
    }
    .cifra-etiqueta {
        color: var(--color-texto-atenuado);
        font-size: var(--fs-sm);
    }
    @media (max-width: 991.98px) {
        .socios-bloque {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--espacio-3) var(--espacio-5);
        }
        .socios {
            margin-top: 0;
        }
        .cifra:first-child {
            padding-left: 0;
            border-left: 0;
        }
    }
    @media (max-width: 767.98px) {
        .cifra:nth-child(odd) {
            padding-left: 0;
            border-left: 0;
        }
    }

    /* ---------- Secciones ---------- */
    .seccion {
        padding: var(--web-seccion) 0;
    }
    .seccion--gris {
        border-block: 1px solid var(--color-borde-suave);
        background: var(--color-primario-suave);
    }
    .seccion-cabecera {
        max-width: 680px;
        margin-bottom: var(--espacio-7);
    }
    .seccion-cabecera--partida {
        display: grid;
        gap: var(--espacio-4);
        align-items: end;
        max-width: none;
    }
    @media (min-width: 992px) {
        .seccion-cabecera--partida {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            gap: var(--espacio-8);
        }
    }
    .seccion-titulo {
        color: var(--web-tinta);
        font-size: var(--texto-web-titulo);
        font-weight: var(--fw-medio);
        line-height: 1.15;
        letter-spacing: -.04em;
        text-wrap: balance;
        overflow-wrap: break-word;
    }
    .seccion-entrada {
        max-width: 60ch;
        margin-top: var(--espacio-4);
        color: var(--color-texto-atenuado);
        font-size: var(--fs-lg);
        line-height: 1.7;
    }
    .seccion-cabecera--partida .seccion-entrada {
        margin-top: 0;
    }
    .seccion-parrafo {
        max-width: 62ch;
        margin-top: var(--espacio-4);
        color: var(--color-texto-2);
        line-height: 1.7;
    }

    /* ---------- Nosotros ---------- */
    .nosotros {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espacio-7);
    }
    @media (min-width: 992px) {
        .nosotros {
            grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
            gap: calc(var(--espacio-8) + var(--espacio-5));
            align-items: start;
        }
    }
    .rasgos {
        border-top: 1px solid var(--color-borde);
    }
    .rasgo {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: var(--espacio-4);
        padding: var(--espacio-5) 0;
        border-bottom: 1px solid var(--color-borde);
    }
    .rasgo-icono,
    .solucion-icono {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: var(--radio-lg);
        background: var(--color-primario-suave);
        color: var(--color-primario);
    }
    .rasgo-titulo {
        color: var(--web-tinta);
        font-size: var(--fs-xl);
        font-weight: var(--fw-medio);
        line-height: 1.3;
    }
    .rasgo-texto {
        margin-top: var(--espacio-1);
        color: var(--color-texto-atenuado);
        font-size: var(--fs-base);
        line-height: 1.65;
    }

    /* ---------- Tiendas ---------- */
    .filtro-ciudades {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espacio-2);
        margin-bottom: var(--espacio-6);
    }
    @media (max-width: 767.98px) {
        /* en el celular las ciudades se desplazan de lado (con aire para que se vea el foco) */
        .filtro-ciudades {
            flex-wrap: nowrap;
            margin-inline: calc(-1 * var(--espacio-5));
            padding: var(--espacio-1) var(--espacio-5);
            overflow-x: auto;
            scrollbar-width: none;
        }
    }
    .filtro-chip {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: var(--espacio-2);
        min-height: 44px;
        padding: 0 var(--espacio-4);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-md);
        background: var(--color-superficie);
        color: var(--color-texto-2);
        font-family: var(--font-sans);
        font-size: var(--fs-base);
        font-weight: var(--fw-medio);
        cursor: pointer;
        transition: background-color .15s, border-color .15s, color .15s;
    }
    .filtro-chip:hover {
        border-color: var(--color-borde-campo);
    }
    .filtro-chip[aria-pressed="true"] {
        border-color: var(--web-tinta);
        background: var(--web-tinta);
        color: var(--color-superficie);
    }
    .filtro-chip:focus-visible {
        outline: none;
        box-shadow: var(--anillo-foco);
    }
    .filtro-cuenta {
        color: var(--color-texto-atenuado);
        font-family: var(--font-web-datos);
        font-size: var(--fs-sm);
    }
    .filtro-chip[aria-pressed="true"] .filtro-cuenta {
        color: var(--marca-azul-100);
    }
    .tiendas {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
        gap: var(--espacio-5);
    }
    .tienda {
        --tienda-color: var(--web-tinta);
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--espacio-3);
        overflow: hidden;
        padding: var(--espacio-5) var(--espacio-5) 0;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-lg);
        background: var(--color-superficie);
        box-shadow: var(--sombra-xs);
        transition: transform .2s, box-shadow .2s;
    }
    .tienda:hover {
        box-shadow: var(--sombra-web-tarjeta);
        transform: translateY(-2px);
    }
    /* la marca corta con el color del operador */
    .tienda::before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--espacio-5);
        width: 40px;
        height: 3px;
        background: var(--tienda-color);
    }
    .tienda--claro {
        --tienda-color: var(--operador-claro);
    }
    .tienda--movistar {
        --tienda-color: var(--operador-movistar);
    }
    .tienda--bitel {
        --tienda-color: var(--operador-bitel);
    }
    .tienda-cabeza {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-3);
    }
    .tienda-operador {
        display: inline-flex;
        align-items: center;
        gap: var(--espacio-2);
        color: var(--color-texto);
        font-size: var(--fs-base);
        font-weight: var(--fw-medio);
    }
    .tienda-ciudad {
        color: var(--color-texto-atenuado);
        font-family: var(--font-web-datos);
        font-size: var(--fs-sm);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .tienda-titulo {
        color: var(--web-tinta);
        font-size: var(--fs-xl);
        font-weight: var(--fw-medio);
        line-height: 1.3;
        letter-spacing: -.02em;
    }
    .tienda-direccion {
        color: var(--color-texto-2);
        font-size: var(--fs-base);
    }
    .tienda-horario {
        display: inline-flex;
        align-items: center;
        gap: var(--espacio-2);
        padding-bottom: var(--espacio-2);
        color: var(--color-texto-atenuado);
        font-family: var(--font-web-datos);
        font-size: var(--fs-md);
    }
    .tienda-icono {
        font-size: var(--fs-lg);
    }
    .tienda-mapa {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        margin: auto calc(-1 * var(--espacio-5)) 0;
        padding: var(--espacio-4) var(--espacio-5);
        border-top: 1px solid var(--color-borde);
        color: var(--color-primario);
        font-size: var(--fs-base);
        font-weight: var(--fw-semi);
        text-decoration: none;
        transition: background-color .15s;
    }
    .tienda-mapa:hover {
        background: var(--color-primario-suave);
    }
    .tienda-mapa:focus-visible {
        outline: none;
        box-shadow: inset var(--anillo-foco);
    }

    /* ---------- Plataforma ---------- */
    .soluciones {
        display: grid;
        gap: var(--espacio-5);
    }
    @media (min-width: 768px) {
        .soluciones {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    .solucion {
        display: flex;
        flex-direction: column;
        gap: var(--espacio-3);
        padding: var(--espacio-6);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-lg);
        background: var(--color-superficie);
        transition: transform .2s, box-shadow .2s;
    }
    .solucion:hover {
        box-shadow: var(--sombra-web-tarjeta);
        transform: translateY(-2px);
    }
    .solucion-cabeza {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--espacio-2);
    }
    .solucion-numero {
        color: var(--color-texto-atenuado);
        font-family: var(--font-web-datos);
        font-size: var(--fs-sm);
        letter-spacing: .08em;
    }
    .solucion-titulo {
        color: var(--web-tinta);
        font-size: var(--fs-xl);
        font-weight: var(--fw-medio);
        line-height: 1.3;
        letter-spacing: -.02em;
    }
    .solucion-texto {
        color: var(--color-texto-atenuado);
        font-size: var(--fs-base);
        line-height: 1.7;
    }
    .solucion-enlace {
        display: inline-flex;
        align-items: center;
        gap: var(--espacio-1);
        border-radius: var(--radio-sm);
        color: var(--color-primario);
        font-weight: var(--fw-semi);
        text-decoration: none;
    }
    .solucion-enlace:focus-visible {
        outline: none;
        box-shadow: var(--anillo-foco);
    }

    /* ---------- Guía ---------- */
    .pasos {
        display: grid;
        gap: var(--espacio-5);
    }
    @media (min-width: 768px) {
        .pasos {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (min-width: 1200px) {
        .pasos {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
    .paso {
        display: flex;
        flex-direction: column;
        gap: var(--espacio-2);
        padding: var(--espacio-5) var(--espacio-5) var(--espacio-5) 0;
    }
    .paso-numero {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-bottom: var(--espacio-2);
        border-radius: var(--radio-lg);
        background: var(--color-superficie);
        color: var(--color-primario);
        font-family: var(--font-web-datos);
        font-size: var(--fs-md);
        font-weight: var(--fw-medio);
    }
    .paso-titulo {
        color: var(--web-tinta);
        font-size: var(--fs-lg);
        font-weight: var(--fw-semi);
        line-height: 1.3;
    }
    .paso-texto {
        color: var(--color-texto-atenuado);
        font-size: var(--fs-base);
        line-height: 1.65;
    }
    /* el llamado final para el equipo: del azul al amarillo del logo, muy suaves */
    .llamada {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-5);
        margin-top: var(--espacio-7);
        padding: var(--espacio-6) var(--espacio-7);
        border: 1px solid var(--marca-azul-100);
        border-radius: var(--radio-xl);
        background: linear-gradient(110deg, var(--color-superficie), var(--color-puntos-suave));
    }
    .llamada-titulo {
        color: var(--web-tinta);
        font-size: var(--fs-3xl);
        font-weight: var(--fw-semi);
        letter-spacing: -.03em;
    }
    .llamada-texto {
        margin-top: var(--espacio-1);
        color: var(--color-texto-atenuado);
        font-size: var(--fs-base);
    }
    .llamada .web-boton {
        border-color: transparent;
        background: var(--color-primario);
        color: var(--color-superficie);
    }
    .llamada .web-boton:hover {
        background: var(--color-primario-hover);
    }
    @media (max-width: 767.98px) {
        .llamada {
            padding: var(--espacio-5);
        }
    }

    /* ---------- Pie ---------- */
    .pie {
        border-top: 1px solid var(--marca-azul-100);
        background: var(--color-primario-suave);
        color: var(--color-texto-atenuado);
        font-size: var(--fs-base);
    }
    .pie-rejilla {
        display: grid;
        gap: var(--espacio-6);
        padding: var(--espacio-8) 0 var(--espacio-7);
    }
    @media (min-width: 768px) {
        .pie-rejilla {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (min-width: 1200px) {
        .pie-rejilla {
            grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3fr);
            gap: var(--espacio-7);
        }
    }
    .pie-logo {
        width: auto;
        height: 44px;
    }
    .pie-texto {
        max-width: 40ch;
        margin-top: var(--espacio-3);
        margin-bottom: var(--espacio-4);
        line-height: 1.7;
    }
    .pie-titulo {
        margin-bottom: var(--espacio-4);
        color: var(--color-primario);
        font-family: var(--font-web-datos);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medio);
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .pie-lista {
        display: grid;
        gap: var(--espacio-2);
    }
    .pie-redes {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espacio-4);
    }
    .pie-contacto {
        display: flex;
        align-items: center;
        gap: var(--espacio-2);
        min-height: 32px;
    }
    .pie-icono {
        color: var(--color-primario);
        font-size: var(--fs-xl);
    }
    .pie-enlace {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        border-radius: var(--radio-sm);
        color: var(--color-texto-2);
        text-decoration: none;
        transition: color .15s;
    }
    .pie-enlace:hover {
        color: var(--color-primario);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .pie-enlace:focus-visible {
        outline: none;
        box-shadow: var(--anillo-foco);
    }
    .pie-legal {
        padding: var(--espacio-5) 0 var(--espacio-6);
        border-top: 1px solid var(--marca-azul-100);
        font-size: var(--fs-md);
    }

    /* ---------- Movimiento: solo si el sistema no pide menos ---------- */
    @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
        .revelar {
            transition: opacity .5s ease-out, transform .5s ease-out;
        }
        .revelar:not(.visible) {
            opacity: 0;
            transform: translateY(12px);
        }
        .estudio-intro {
            animation: web-entrada .7s ease-out both;
        }
        .workspace-marco {
            animation: web-entrada .9s .1s ease-out both;
        }
    }
    @keyframes web-entrada {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .web-boton,
        .tienda,
        .solucion,
        .workspace-herramienta {
            transition: none;
        }
        .web-boton--principal:hover,
        .tienda:hover,
        .solucion:hover,
        .workspace-herramienta:hover {
            transform: none;
        }
    }
}

/* lo que el JS esconde (filtro de tiendas, tiendas de otra ciudad) gana a la pieza que lo pinta */
@layer utilities {
    .web [hidden] {
        display: none;
    }
}