@layer reinicio, tokens, base, componentes, utilidades;

/* ==========================================================================
   TOKENS — Sistema de diseño M.E.L (miescort.lat) · v1.0
   ÚNICO archivo del proyecto donde existen valores.
   Referencia y porqués: documentos/sistema-de-diseno/01-fundamentos.md
   ========================================================================== */

@layer tokens {
  :root {
    /* ============ NIVEL 1 · VALORES BASE (solo se usan en este archivo) ============ */

    /* Paleta */
    --mel-violeta-50: #F6EEFF;
    --mel-violeta-300: #A074DD;
    --mel-violeta-600: #4C00B8;
    --mel-violeta-700: #400099;
    --mel-violeta-800: #33007A;
    --mel-negro: #000000;
    --mel-gris-900: #333333;
    --mel-gris-600: #666666;
    --mel-gris-500: #8A8A8A;
    --mel-gris-400: #9E9E9E;
    --mel-gris-200: #E0E0E0;
    --mel-gris-100: #E8E8E8;
    --mel-gris-50: #F5F5F5;
    --mel-blanco: #FFFFFF;
    --mel-verde-600: #0A8039;
    --mel-verde-500: #15A34A;   /* 3,30:1 sobre blanco: el verde más vivo que aún cumple
                                   el 3:1 que la WCAG 1.4.11 pide a lo que no es texto */
    --mel-verde-700: #086B30;
    --mel-verde-50: #E7F6EC;
    --mel-ambar-700: #7A4A00;
    --mel-ambar-50: #FFF4DB;
    --mel-rojo-600: #B3261E;
    --mel-rojo-50: #FDECEA;
    --mel-dorado-600: #946200;

    /* Escala de espacio, base 5: es la costumbre real del sitio actual (5·10·15·20·25·30
       cubren el 85 % de sus valores). El nombre es el valor en px. */
    --mel-esp-1: 0.0625rem; /*  1 px — el más fino: pegar dos piezas sin que se toquen (Sebas, 2026-10-04) */
    --mel-esp-2: 0.125rem;  /*  2 px */
    --mel-esp-5: 0.3125rem; /*  5 px */
    --mel-esp-8: 0.5rem;    /*  8 px — media escala, para ajustes ópticos */
    --mel-esp-10: 0.625rem; /* 10 px */
    --mel-esp-15: 0.9375rem;/* 15 px */
    --mel-esp-20: 1.25rem;  /* 20 px */
    --mel-esp-25: 1.5625rem;/* 25 px */
    --mel-esp-30: 1.875rem; /* 30 px */
    --mel-esp-40: 2.5rem;   /* 40 px */
    --mel-esp-50: 3.125rem; /* 50 px */
    --mel-esp-60: 3.75rem;  /* 60 px */
    --mel-esp-80: 5rem;     /* 80 px */

    /* ============ NIVEL 2 · ROLES (lo único que usan los componentes) ============ */

    /* Color · fondos */
    --mel-color-fondo: var(--mel-blanco);
    --mel-color-fondo-sutil: var(--mel-gris-50);
    --mel-color-fondo-inactivo: var(--mel-gris-100);
    --mel-color-velo: rgb(0 0 0 / .6);
    --mel-color-fondo-medios: var(--mel-negro);   /* detrás de fotos y videos: visor ampliado y franjas cuando la foto no llena el marco */

    /* Color · texto */
    --mel-color-titulo: var(--mel-negro);
    --mel-color-texto: var(--mel-gris-900);
    --mel-color-texto-secundario: var(--mel-gris-600);
    --mel-color-texto-deshabilitado: var(--mel-gris-400);
    --mel-color-texto-inverso: var(--mel-blanco);
    --mel-color-enlace: var(--mel-violeta-600);

    /* Color · marca */
    --mel-color-marca: var(--mel-violeta-600);
    --mel-color-marca-presionado: var(--mel-violeta-700);
    --mel-color-marca-activo: var(--mel-violeta-800);
    --mel-color-marca-suave: var(--mel-violeta-50);
    --mel-color-marca-borde: var(--mel-violeta-300);

    /* Color · bordes */
    --mel-color-borde: var(--mel-gris-200);
    --mel-color-borde-control: var(--mel-gris-500);

    /* Color · acción de contacto */
    --mel-color-whatsapp: var(--mel-verde-600);
    --mel-color-whatsapp-presionado: var(--mel-verde-700);

    /* Color · estados (siempre con ícono y texto, nunca solo color) */
    --mel-color-exito: var(--mel-verde-700);
    --mel-color-en-vivo: var(--mel-verde-500);    /* el punto que late: dice «ahora mismo» */
    --mel-color-exito-fondo: var(--mel-verde-50);
    --mel-color-aviso: var(--mel-ambar-700);
    --mel-color-aviso-fondo: var(--mel-ambar-50);
    --mel-color-error: var(--mel-rojo-600);
    --mel-color-error-fondo: var(--mel-rojo-50);

    /* Color · acento RESERVADO: no usar hasta que exista un nivel de anuncio superior a "Destacado" */
    --mel-color-acento-reservado: var(--mel-dorado-600);

    /* Tipografía · familia y pesos */
    --mel-fuente: "Inter", "Inter Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mel-peso-normal: 400;
    --mel-peso-medio: 500;
    --mel-peso-semi: 600;
    --mel-peso-negrita: 700;
    --mel-peso-extra: 800;

    /* Tipografía · tamaños. En celular son EXACTAMENTE los del sitio actual (escala modular
       razón 1,067 desde 14,5 px, medida en producción el 2026-09-19); crecen hasta escritorio. */
    --mel-texto-minimo: clamp(0.74625rem, 0.7390rem + 0.0280vw, 0.7619rem);  /* 11,94 → 12,2 px: bajo micro, solo etiquetas cortas sobre imagen (Sebas, 2026-09-26) */
    --mel-texto-micro: clamp(0.79625rem, 0.7885rem + 0.0300vw, 0.8125rem);   /* 12,74 → 13 px */
    --mel-texto-pequeno: clamp(0.84937rem, 0.8372rem + 0.0472vw, 0.875rem);  /* 13,59 → 14 px */
    --mel-texto-cuerpo: clamp(0.90625rem, 0.8618rem + 0.1728vw, 1rem);       /* 14,5 → 16 px */
    --mel-texto-enfasis: clamp(0.96688rem, 0.9215rem + 0.1763vw, 1.0625rem); /* 15,47 → 17 px */
    --mel-texto-etiqueta: clamp(1.03188rem, 0.9877rem + 0.1717vw, 1.125rem); /* 16,51 → 18 px */
    --mel-texto-subtitulo: clamp(1.10062rem, 1.0297rem + 0.2753vw, 1.25rem); /* 17,61 → 20 px */
    --mel-texto-titulo: clamp(1.17437rem, 1.0791rem + 0.3698vw, 1.375rem);   /* 18,79 → 22 px */
    --mel-texto-encabezado: clamp(1.25331rem, 1.1124rem + 0.5472vw, 1.55rem); /* 20,05 → 24,8 px: el peldaño +5 de la escala 1,067, que faltaba entre «título» (+4) y «destacado» (+6) (Sebas, 2026-10-10) */
    --mel-texto-destacado: clamp(1.3375rem, 1.1417rem + 0.7604vw, 1.75rem);  /* 21,4 → 28 px */
    --mel-texto-portada: clamp(1.5rem, 1.1440rem + 1.3825vw, 2.25rem);       /* 24 → 36 px */
    /* El texto de los campos. iOS hace zoom al tocar un campo de menos de 16 px, así que
       hay un suelo técnico; lo que NO debe pasar es que ese suelo se escriba como número
       suelto. «etiqueta» es el peldaño más bajo de la escala que lo supera (16,51), así que
       el campo es un peldaño más y crece con la pantalla como todo lo demás. Escrito como
       1rem fijo, en celular quedaba a medio píxel de dos peldaños —parecía una errata— y en
       escritorio se quedaba por debajo del cuerpo: la relación se invertía con el ancho. */
    --mel-texto-campo: var(--mel-texto-etiqueta);
    /* La PISTA de un campo no es su contenido: se lee antes de escribir y desaparece al
       hacerlo, así que no tiene por qué medir lo que mide el campo —el suelo de 16 px lo
       exige iOS al CAMPO, no a su pista—. Pero tampoco es una nota al margen: mientras el
       campo está vacío es lo ÚNICO que se ve de él. Por eso va al texto de lectura.
       Sebas probó los tres peldaños en pantalla: 16,51 «muy grande», 13,59 «muy pequeño».
       En su sitio la pista del formulario mide exactamente esto (2026-09-21). */
    --mel-texto-pista: var(--mel-texto-cuerpo);

    /* Tipografía · interlineados */
    --mel-interlineado-minimo: 1.4;
    --mel-interlineado-micro: 1.4;
    --mel-interlineado-pequeno: 1.5;
    --mel-interlineado-cuerpo: 1.6;
    --mel-interlineado-enfasis: 1.5;
    --mel-interlineado-etiqueta: 1.35;
    --mel-interlineado-subtitulo: 1.35;
    --mel-interlineado-titulo: 1.3;
    --mel-interlineado-encabezado: 1.3;
    --mel-interlineado-destacado: 1.3;
    --mel-interlineado-portada: 1.15;
    --mel-interlineado-campo: 1.5;

    /* Espacio con nombre. Valores tomados del sitio actual (medidos el 2026-09-19):
       5 dentro de una idea · 10 entre elementos · 15/20 título-contenido · 30 entre secciones · 25 canal. */
    --mel-espacio-dentro-min: var(--mel-esp-5);   /*  5 px */
    --mel-espacio-dentro: var(--mel-esp-10);      /* 10 px */
    --mel-espacio-historias: var(--mel-esp-8);    /*  8 px: hueco entre tarjetas de «Anuncios con video» (Sebas, 2026-09-26) */
    --mel-espacio-grupo: var(--mel-esp-15);       /* 15 px */
    --mel-espacio-titulo: var(--mel-esp-20);      /* 20 px */
    --mel-espacio-seccion: var(--mel-esp-30);     /* 30 px: su 30 + línea + 30 */
    --mel-espacio-seccion-compacta: var(--mel-esp-25); /* 25 px: secciones compactas de la ficha v2 (Sebas, 2026-09-26: toda la parte de información, de la descripción a los precios) */
    /* 40 px: el aire alrededor de la cabecera de una pantalla que NO abre la página —la que
       viene detrás de las migas—. Se probó con 30 (el de sección) y Sebas lo quiso «respirando
       un poquito más»; 50 es el aire de bloque y hunde demasiado el título en un teléfono.
       El peldaño ya estaba en la escala base; lo que faltaba era el rol (2026-09-22). */
    --mel-espacio-cabecera: var(--mel-esp-40);    /* 40 px */
    --mel-espacio-bloque: var(--mel-esp-50);      /* 50 px */
    --mel-canal: var(--mel-esp-25);               /* 25 px: canal lateral */
    /* El relleno lateral de una píldora pequeña se mide en su PROPIO texto, no en la escala
       vertical: así el casquete se ve igual a cualquier tamaño de letra. Es lo que hace su
       sitio (1em de 12,74 = 12,74) y por eso su botón mide 104 de ancho. */
    --mel-pildora-relleno: 1em;
    --mel-espacio-columna: var(--mel-esp-25);     /* 25 px: entre los bloques apilados de una seccion (las columnas del pie en celular) */
    --mel-espacio-optico: var(--mel-esp-2);       /*  2 px: el ajuste mas pequeno del sistema. Separar dos renglones que casi se tocan, extender un area tactil, despegar un subrayado */

    /* Tamaños */
    /* Tamaños. Lo visible es lo del sitio actual; el ÁREA que responde al dedo se extiende
       aparte hasta --mel-tactil-min (WCAG 2.2 AA · 2.5.8 exige 24 px; aquí 30). */
    --mel-tactil-min: 1.875rem;              /* 30 px: mínimo del área táctil */
    --mel-hoja-alto: 60dvh;                  /* la hoja de filtros al abrir (Sebas, 2026-09-27) */
    --mel-hoja-alto-max: 92dvh;              /* …arrastrada hacia arriba: casi toda la pantalla, deja ver que hay algo detrás */
    --mel-asa-ancho: 2.25rem;                /* 36 px: la barrita para arrastrar la hoja */
    --mel-asa-alto: var(--mel-esp-5);        /*  5 px */
    --mel-progreso-alto: var(--mel-esp-5);   /*  5 px: barra de progreso del registro (Sebas, 2026-10-10) */
    --mel-control-alto: 2.6875rem;           /* 43 px: alto de sus botones de contacto */
    --mel-control-alto-compacto: 1.5rem;     /* 24 px: el botón pequeño de la cabecera.
                                                En su sitio mide 22 (medido a 412 y a 360). Se sube a 24 a propósito:
                                                es el mínimo táctil de la WCAG 2.5.8, así que lo que se VE pasa a ser
                                                el objetivo mínimo real. Decisión de Sebas, 2026-09-21. */
    --mel-pestana-alto: 1.625rem;            /* 26 px: pestañas Anuncios/Videos */
    --mel-chip-alto: 1.625rem;               /* 26 px: chips de características */
    --mel-fila-enlace: 1.5rem;               /* 24 px: filas del pie y de listas de enlaces */
    --mel-cabecera-alto: 3.75rem;            /* 60 px */
    --mel-cabecera-icono: 1.5625rem;         /* 25 px: «Ingresar» y «Menú» (Sebas, 2026-10-04: probó 26; 2 px sobre los 23 de --mel-icono-lg, sin tocar el alto) */
    --mel-barra-contacto-alto: 4rem;         /* 64 px */
    --mel-fila-alto: var(--mel-esp-50);      /* 50 px: alto de una fila de lista (ciudades, paises) */
    --mel-miniatura: 4.375rem;               /* 70 px: miniatura de la galeria de la ficha */
    --mel-miniatura-chica: 3.5rem;           /* 56 px: miniatura de la galería en la ficha v2, más chica (Sebas, 2026-09-26) */
    --mel-panel-fila-a-la-vista: 1.15;        /* inicio del panel (/escort): tarjetas de anuncio o de video a la vista en la
                                                fila que se desliza con el dedo. Una entera y la siguiente asoma (≈ 320 px de
                                                ancho a 412), para que se note que hay más (Sebas, 2026-10-11). Un número y
                                                no un ancho, como --mel-historias-a-la-vista */
    --mel-panel-fila-tope: 22.5rem;           /* 360 px: lo más ancha que crece esa tarjeta (computadora, tableta). La foto
                                                es de 70 px: más ancha, los datos quedan sueltos y caben menos a la vista */
    --mel-panel-tarjeta-lineas: 2;            /* inicio del panel (/escort): renglones máximos del título de la tarjeta de
                                                anuncio o de video (y de la nota de un video); más largo se corta con «…» (lo
                                                mismo que --mel-ventana-video-lineas en el sitio). Es la tarjeta que eligió
                                                Sebas el 2026-10-11 entre tres (la opción 1, «la de hoy, pulida») */
    --mel-campo-dias: 4.375rem;               /* 70 px: el campo de los días de destacado, entre «−» y «+» en la ventana
                                                «Destacar» del panel (créditos, 2026-10-12). Caben 3 cifras centradas al
                                                tamaño de campo (16,5 px) con su relleno; un campo de ancho completo
                                                separaría «−» y «+» del número. Mide lo mismo que --mel-miniatura, que hasta
                                                hoy se usaba prestado para esto en la administración (riesgo 18) */
    --mel-panel-boton-publicar: 14.25em;      /* inicio del panel (/escort): ancho mínimo de «Publicar anuncio» y «Publicar
                                                video», para que los dos midan lo mismo (Sebas, 2026-10-12: «los dos morados
                                                rellenos, el mismo tamaño»). Es lo que mide el más largo, «Publicar anuncio»,
                                                con su ícono y el relleno de .boton (13,98 em: 202,7 px a 412, medido), y un
                                                cuarto de em de holgura por si otra pantalla dibuja la letra un pelo más ancha
                                                (206,6 px a 412). En em y no en px: sigue a la letra del botón */
    --mel-historias-a-la-vista: 4.55;         /* tarjetas de «Anuncios con video» a la vista: 3 y la cuarta asoma
                                                (≈ 83 px de ancho a 360, ≈ 97 a 412). Era 4,4 (≈ 79 a 412); Sebas las
                                                pidió más anchas al verlas en su celular, 2026-09-26.
                                                Un número y no un ancho: así asoma en cualquier celular (decisión 0013) */
    --mel-compacta-partes: 3;                /* vista compacta del listado (2026-09-27): el ancho útil de cada fila, menos
                                                el hueco, se parte en 3 y la foto se queda con una parte («más o menos
                                                un tercio», referencia kinky.nl): ≈ 98 px a 360 y ≈ 116 a 412.
                                                Un número y no un ancho: vale para cualquier celular */
    --mel-contador: 1.125rem;                /* 18 px: el círculo con el número de filtros activos */
    --mel-separador-alto: var(--mel-esp-25); /* 25 px: alto del filo vertical entre pestanas */
    --mel-logo-sm: 9.0625rem;                /* 145 px de ancho · cabecera. Medido en su sitio */
    --mel-logo-md: 10rem;                    /* 160 px de ancho · pie. Medido en su sitio */
    --mel-punto: 0.5rem;                     /*  8 px: el punto de estado que late */
    --mel-bandera: 2rem;                     /* 32 px · círculo: el dibujo 4:3 se recorta cuadrado */
    --mel-bandera-sm: 1.5625rem;             /* 25 px: cuando la bandera acompaña al texto en vez de
                                                anclarlo, como en el cambio de país del pie */
    --mel-icono-sm: 0.875rem;                /* 14 px */
    --mel-icono-md: 1.0625rem;               /* 17 px */
    --mel-icono-lg: 1.4375rem;               /* 23 px */
    --mel-icono-xl: 3.125rem;                /* 50 px: el ícono protagonista de una ventana (el escudo de «verificados»), como en la ciudad y el sitio anterior */

    /* Rejilla y anchos */
    --mel-contenedor: 75rem;                 /* 1200 px */
    --mel-columna: 37.5rem;                  /* 600 px: el ancho de toda la página del sitio en cualquier pantalla. El sitio
                                                es de celular: en tableta y computadora se ve la misma columna, centrada,
                                                como prepagos.com (medido el 2026-10-13: 600). La enciende data-mel-columna
                                                en <html> (header.php); el panel no la lleva (decisión 0029). En PHP se repite
                                                como MEL_COLUMNA (functions.php): si cambia uno, cambia el otro */
    --mel-sangrado: 100vmax;                 /* lo que una franja sale de la columna para pintar hasta los bordes de la
                                                pantalla (la barra violeta de la cabecera): más que cualquier pantalla, y
                                                sin ocupar sitio ni dar desplazamiento de lado */
    --mel-ancho-lectura: 45rem;              /* 720 px */
    --mel-rejilla-hueco: var(--mel-esp-15);
    --mel-ancho-ventana: 26rem;              /* 416 px: ancho máximo de una ventana. En celular
                                                manda el ancho de pantalla menos un respiro a los lados */
    --mel-tarjeta-min: 17.5rem;              /* 280 px */

    /* Forma */
    --mel-radio-xs: 3px;                    /* piezas pequeñas con fondo: sello RTA, contadores sobre foto */
    --mel-radio-sm: 5px;                     /* piezas grandes: botones, tarjetas, fotos */
    --mel-radio-md: 8px;
    --mel-radio-hoja: 1rem;                  /* 16 px: esquinas de arriba de la hoja que sube desde abajo (filtros) */
    --mel-radio-pildora: 999px;
    --mel-borde-fino: 1px;
    --mel-borde-grueso: 2px;
    --mel-sombra-flotante: 0 4px 16px rgb(0 0 0 / .12);
    --mel-sombra-barra: 0 -2px 8px rgb(0 0 0 / .06);
    --mel-desenfoque-velo: 8px;              /* el velo del aviso +18 desenfoca la página: no se ve nada hasta
                                                confirmar la edad. El mismo del sitio actual (--ciu-desenfoque-aviso) */
    --mel-contorno-fino: 0 0 0 1px;          /* contorno de 1 px sin ocupar sitio: banderas y miniaturas */
    --mel-contorno-foco: 0 0 0 1px;         /* el filo de una pieza que ya tiene borde propio, al recibir
                                               el foco: engorda de 1 a 2 px en vez de añadir un segundo
                                               anillo por fuera. Se probó con 2 px (3 en total) y pesaba */
    --mel-opacidad-apagado: .55;             /* imagen de algo que aún no está disponible */
    --mel-opacidad-inactiva: .7;             /* miniatura no elegida: la elegida se reconoce por ser la más viva (sitio anterior) */
    --mel-gris-inactivo: 70%;                /* ídem: casi sin color (grayscale). Con solo la opacidad, sobre blanco, se distinguía poco.
                                                Un porcentaje y no el filtro entero: así se puede ir mezclando al deslizar */

    /* Foco de teclado */
    --mel-foco-color: var(--mel-violeta-600);
    --mel-foco-ancho: 2px;
    --mel-foco-separacion: 2px;

    /* Movimiento */
    --mel-mov-rapido: 120ms;
    --mel-mov-normal: 200ms;
    --mel-mov-lento: 320ms;
    --mel-mov-latido: 2000ms;                /* el latido de un indicador de estado. Largo a proposito:
                                                acompana, no llama. Se apaga solo con prefers-reduced-motion */
    --mel-mov-nulo: 0.01ms;                  /* cuando la persona pidió reducir el movimiento */
    --mel-curva-entra: cubic-bezier(.2, 0, 0, 1);
    --mel-curva-sale: cubic-bezier(.4, 0, 1, 1);
    /* El acordeón de las tarjetas de categoría de la portada de país (2026-10-11). Más largas que las de arriba a
       propósito: no responden a un toque, acompañan mientras se lee la tarjeta. */
    --mel-tarjeta-ritmo: 3000ms;             /* cuánto se queda abierta cada franja antes de dar paso a la siguiente
                                                (Sebas, 2026-10-11: «cada 3 s»). Lo lee también assets/js/portada.js */
    --mel-tarjeta-cambio: 600ms;             /* lo que tarda en abrirse una franja: casi el doble de --mel-mov-lento,
                                                para que se lea como un gesto y no como un salto */

    /* Capas */
    --mel-capa-base: 0;
    --mel-capa-elevada: 10;
    --mel-capa-fija: 100;
    --mel-capa-velo: 900;
    --mel-capa-ventana: 1000;
    --mel-capa-aviso: 1100;
    --mel-capa-maxima: 1200;

    /* Proporciones de imagen */
    --mel-ratio-ficha: 4 / 5;
    --mel-ratio-tarjeta: 16 / 10;
    --mel-ratio-miniatura: 9 / 16;
    --mel-ratio-video: 9 / 16;
    --mel-ratio-historia: 7 / 10;             /* tarjetas de «Anuncios con video»: más anchas sin crecer en alto (Sebas, 2026-09-26) */
    --mel-ratio-compacta: 4 / 5;              /* la foto de la vista compacta del listado: la misma forma que cada foto del
                                                carrusel de la cuadrícula (181 × 225 a 412), así el recorte no cambia al cambiar de vista */
    --mel-lista-alto: 230px;                  /* alto fijo de cada fila de la vista «Lista» del listado (Sebas, 2026-10-02: 450 → 300 → 275 → 250 → 230) */
    --mel-lista-foto: 0.45;                   /* parte del ancho útil de la fila «Lista» que es foto; el resto (55 %) es información (Sebas, 2026-10-02) */
    --mel-lista-lineas: 5;                    /* renglones máximos de la descripción en esa fila: lo que cabe en 230 px con edad y precio, línea y dirección debajo (5 × 20,4 con la letra de la «Grande»; con micro cabían 6; Sebas, 2026-10-04) */
    --mel-lista-sello: 1.375rem;              /* 22 px: el círculo morado de «Destacado», antes del nombre (Sebas, 2026-10-04: 23 → 17 → 22, «5 px más») */
    --mel-lista-sello-icono: 0.8125rem;       /* 13 px: la llama blanca dentro del círculo, en la misma proporción (≈ 0,6 del círculo) */
    --mel-lista-sello-hueco: var(--mel-esp-8); /* 8 px entre el círculo y el nombre */
    --mel-lista-precio-hueco: var(--mel-esp-1); /* entre «$60» y «/hora»: la barra pegada (RAE), sin tocar la cifra (Sebas, 2026-10-04) */
    --mel-lista-descripcion: var(--mel-texto-pequeno);                /* 13,59 px, como la «Grande» (Sebas, 2026-10-04: probó micro y volvió a igualarlas) */
    --mel-lista-descripcion-interlineado: var(--mel-interlineado-pequeno);
    --mel-lista-direccion: var(--mel-texto-minimo);                   /* 11,94 px: la zona, dato secundario (Sebas, 2026-10-04: dos escalones bajo los 13,59 de antes) */
    --mel-lista-direccion-interlineado: var(--mel-interlineado-minimo);
    --mel-lista-a-la-vista: 1;                /* casillas a la vista en el carrusel del destacado en esa fila: una, que llena la foto (en la «Grande», 3; Sebas, 2026-10-04) */
    --mel-lista-flecha: var(--mel-icono-md);  /* 17 px: flechas de ese carrusel, más chicas que las de la «Grande» (23; Sebas, 2026-10-04) */

    /* Plantilla «Grande» (la cuadrícula del listado): sus propios tokens, como la «Lista», para mover una
       sin tocar la otra (Sebas, 2026-10-04). Se crean cuando se toca cada medida. */
    --mel-grande-precio-hueco: var(--mel-esp-1); /* entre «$60» y «/hora», como en la «Lista» */
    --mel-grande-lineas: 2;                   /* renglones de la descripción: siempre llenos y «…» al final (Sebas, 2026-10-04) */
    --mel-grande-descripcion: var(--mel-texto-pequeno);               /* 13,59 px, como la «Lista» (Sebas probó 14,5 el 2026-10-04 y volvió a este) */
    --mel-grande-descripcion-interlineado: var(--mel-interlineado-pequeno);

    /* Ventana del video (partes/ciudad-ventana-video.php; la misma para las historias y la pestaña «Videos»). */
    --mel-ventana-video-lineas: 2;            /* renglones máximos del título del video, en la tarjeta y en la ventana; más largo se corta con «…» (Sebas, 2026-10-10) */

    /* Tarjetas de categoría de la portada de país con las fotos de los anuncios (inicio.php, inc/portada.php): el
       acordeón de franjas que eligió Sebas el 2026-10-11. Si cambia, se rehacen los `sizes` de inc/portada.php. */
    --mel-acordeon-abierta: 0.56;             /* parte del ancho de la foto que ocupa la franja abierta; las demás se
                                                 reparten el resto (con 5 franjas, 0,11 cada una: ≈ 38 px a 412). Más
                                                 estrechas dejan de leerse como fotos; más anchas, la abierta pierde la cara */

    /* Menú lateral (partes/menu-lateral.php, assets/css/menu.css; 2026-10-04): entra desde la derecha. */
    --mel-menu-ancho: 22.5rem;                /* 360 px: lo más ancho que se abre, el tope de Material 3 para un panel de
                                                 navegación. Más ancho (tableta, escritorio) las filas se estiran y el ojo
                                                 viaja de más entre el nombre y su flecha */
    --mel-menu-respiro: var(--mel-esp-50);    /* 50 px de página que siguen a la vista a la izquierda en un celular: dicen
                                                 «sigues aquí» y son donde se toca para cerrar (Material deja 56; aquí el
                                                 peldaño de la escala más cercano) */
    --mel-menu-fila: var(--mel-esp-40);       /* 40 px: alto de cada fila del menú (categorías, país). Con 50, como las listas
                                                 de ciudades, las tres categorías se veían sueltas (Sebas, 2026-10-04) */
  }

  /* Roles que cambian con el ancho. Cortes (constantes): 640 medio · 1024 ancho · 1280 extra.
     Los dos que ensanchan no tocan al sitio (:root con data-mel-columna): su página es una columna de celular en
     cualquier pantalla, así que en la computadora manda el valor de celular (decisión 0029). Siguen para el panel. */
  @media (max-width: 359px) {
    :root { --mel-canal: var(--mel-esp-20); }
  }
  @media (min-width: 640px) {
    :root:not([data-mel-columna]) { --mel-canal: var(--mel-esp-30); --mel-rejilla-hueco: var(--mel-esp-20); }
  }
  @media (min-width: 1024px) {
    :root:not([data-mel-columna]) { --mel-espacio-seccion: var(--mel-esp-40); --mel-espacio-bloque: var(--mel-esp-80); --mel-cabecera-alto: 4rem; /* 64 px */ }
  }
}