/* Prisma BI — portal cliente.
   Tokens, tipografía y componentes copiados del mockup PrismaBI_mockup_502.html.
   Cambio deliberado: el marco de teléfono del mockup era la maqueta; acá .phone es la
   página real, ancho completo en móvil y centrada con el mismo ancho (390px) en escritorio. */
:root{
  /* Contraste (WCAG 1.4.3, 4.5:1 para texto normal). Los grises de texto se eligieron para pasar
     sobre blanco Y sobre --field: --grey 6.1:1 / 5.7:1, --grey2 5.0:1 / 4.6:1. El gris claro de antes
     (#A3A9B4, 2.4:1) queda como --grey3 y SÓLO va en trazos y decoración, nunca en texto.
     El verde y el ámbar también se oscurecieron para leerse sobre sus fondos claros (5.2:1 y 5.2:1). */
  --ink:#0F1115; --ink2:#2A2F38; --grey:#5B6270; --grey2:#667085; --grey3:#A3A9B4; --rule:#E7E9EE; --field:#F6F7F9;
  --green:#10753A; --greenbg:#E8F5EC; --red:#B3261E; --redbg:#FBECEA; --amber:#955800; --amberbg:#FCF2E1;
  --spec:linear-gradient(90deg,#FF3B30 0 16.6%,#FF9500 16.6% 33.3%,#FFCC00 33.3% 50%,#34C759 50% 66.6%,#32ADE6 66.6% 83.3%,#5856D6 83.3% 100%);
  --nav-h:92px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:#fff;font-family:'Poppins',system-ui,-apple-system,sans-serif;color:var(--ink2);
     -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}

.phone{width:100%;max-width:430px;margin:0 auto;min-height:100dvh;background:#fff;display:flex;flex-direction:column;position:relative}

.top{background:#0A0A0A;color:#fff;padding:calc(18px + env(safe-area-inset-top)) 22px 16px;position:relative;flex-shrink:0}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--spec)}
.top .row{display:flex;justify-content:space-between;align-items:center}
.top .client{display:flex;align-items:center;gap:10px;min-width:0}
.crown{width:30px;height:30px;border-radius:8px;background:#fff;display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.crown svg{width:18px;height:18px}
.crown img{width:100%;height:100%;object-fit:cover}
/* Marca del cliente: sin caja blanca y a su proporción. El archivo de 502 es texto claro con la
   corona cian sobre fondo transparente, o sea hecho para fondo oscuro: la barra ya lo es. */
.crown.marca-cliente{width:auto;height:30px;background:transparent;border-radius:0}
/* Alto en píxeles, no en porcentaje: dentro de la rejilla de la caja el 100 % no resolvía y la
   imagen salía a su tamaño natural (74 px) recortada por overflow:hidden — se veía la corona y
   no la palabra. */
.crown.marca-cliente img{width:auto;height:30px;max-height:30px;object-fit:contain}
.top .name{font-weight:600;font-size:15px;min-width:0}
.top .name small{display:block;font-weight:400;color:#8B919C;font-size:12px;margin-top:-2px}
.top .topright{display:flex;align-items:center;gap:16px;flex-shrink:0}
/* El logo es el archivo de Nico (1.png), recortado por scripts/generar_logos.py.
   En el teléfono va sólo el rombo: la palabra apretaba el nombre del cliente hasta partirlo
   en dos renglones. El fondo negro del PNG se funde con el de la barra. */
.top .marca{display:none}
.top .marca-chica{height:26px;width:26px;display:block;border-radius:6px}
.top .pb{font-size:12px;letter-spacing:.22em;color:#8B919C;font-weight:500}
.top .salir{font-size:12px;color:#8B919C}
.top .salir:hover{color:#fff}
.top .client{color:inherit;border-radius:10px}
.top .client:focus-visible,.top .salir:focus-visible{outline:2px solid #D7FF3E;outline-offset:3px}

.screen{flex:1;padding:22px 22px calc(var(--nav-h) + 28px);display:block}
/* Los envoltorios de dos columnas sólo existen en escritorio: acá se disuelven y el orden
   de lectura del teléfono queda exactamente como estaba. */
.col-a,.col-b,.titulo{display:contents}

h2{font-size:20px;font-weight:600;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em}
.sub{color:var(--grey);font-size:13px;margin:0 0 28px}

.src{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--grey2)}
.src i{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0}
.src.fresh i{background:var(--green)}
.src.warn i{background:var(--amber)}
.src.stale i{background:var(--red)}

.stat{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0;border-top:1px solid var(--rule)}
.stat:last-of-type{border-bottom:1px solid var(--rule)}
.stat .l{font-size:14px;color:var(--ink2)}
.stat .l small{display:block;color:var(--grey2);font-size:12px}
.stat .v{font-size:22px;font-weight:600;color:var(--ink);text-align:right;white-space:nowrap}
.stat .v small{display:block;font-size:12px;font-weight:500}
.up{color:var(--green)} .dn{color:var(--red)} .fl{color:var(--grey2)}

.note{margin-top:20px;padding:16px 18px;background:var(--field);border-radius:14px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.note b{color:var(--ink);font-weight:600}
.note .who{display:block;color:var(--grey2);font-size:12px;margin-top:10px}
.empty{margin-top:8px;padding:18px;background:var(--field);border-radius:14px;font-size:13.5px;line-height:1.55;color:var(--grey)}

.goal{margin-top:22px}
.goal .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.goal .lbl b{color:var(--ink);font-weight:600}
.goal .track{height:10px;background:var(--field);border-radius:999px;overflow:hidden}
.goal .fill{height:100%;background:var(--green);border-radius:999px}

.top3{display:flex;flex-direction:column;gap:14px}
.card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:stretch}
.thumb{width:96px;height:120px;border-radius:12px;background:#0F1115;position:relative;overflow:hidden;flex-shrink:0}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.thumb .play i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.thumb .play i::after{content:"";border-left:11px solid #0F1115;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.thumb .tag{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.92);color:#0F1115;font-size:12px;font-weight:600;padding:2px 7px;border-radius:999px}
.thumb.v1{background:linear-gradient(160deg,#20242c,#0b0c0f)}
.thumb.v2{background:linear-gradient(160deg,#2b2417,#0b0c0f)}
.thumb.v3{background:linear-gradient(160deg,#17232b,#0b0c0f)}
.card .body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.card .rank{font-size:12px;font-weight:600;color:var(--grey2);letter-spacing:.04em}
.card .t{display:block;font-size:15px;font-weight:600;color:var(--ink);margin:2px 0 4px;line-height:1.25}
.card .t:hover{text-decoration:underline}
.card .m{font-size:22px;font-weight:600;color:var(--green);line-height:1.1}
.card .m small{font-size:12px;font-weight:400;color:var(--grey);margin-left:5px}
.card .why{font-size:12.5px;color:var(--grey);margin-top:6px;line-height:1.45}

.insight{padding:20px 0;border-top:1px solid var(--rule)}
.insight:first-of-type{border-top:0;padding-top:4px}
.insight .t{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
.insight .b{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0 0 12px}
/* Cada cifra viaja pegada a su etiqueta: si se separan al cortar la línea, el número queda huérfano. */
.ev{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;color:var(--grey);margin-bottom:12px}
.ev .par{display:inline-flex;gap:6px;align-items:baseline}
.ev .n{font-size:20px;font-weight:600;color:var(--ink)}
.ev .vs,.ev .sep{color:var(--grey2)}
.ev .n.g{color:var(--green)} .ev .n.r{color:var(--red)}
.strip{display:flex;gap:6px;margin-bottom:12px}
.strip .th{width:44px;height:56px;border-radius:7px;background:#0F1115;overflow:hidden;display:block}
.strip .th img{width:100%;height:100%;object-fit:cover}
.act{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink)}
.act::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);margin-top:7px;flex-shrink:0}

.filters{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filters a{background:#fff;border:1px solid var(--rule);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.filters a[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g{position:relative;display:block}
.g .thumb{width:100%;height:130px;border-radius:10px}
.g .dot{position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.g .dot.g{background:#22A75D} .g .dot.y{background:#F5B400} .g .dot.r{background:#D9342B} .g .dot.p{background:#A3A9B4}
/* El estado y el rendimiento van en texto debajo del nombre; el punto sólo los resume. */
.g .est{font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.3}
.g .n{display:block;font-size:12px;color:var(--ink2);margin-top:6px;line-height:1.3;font-weight:500}
.g .n:hover{text-decoration:underline}
.g .q{font-size:12px;color:var(--grey2)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--grey);margin-bottom:12px;flex-wrap:wrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}

.back{display:inline-block;font-size:12.5px;color:var(--grey);margin-bottom:14px}
/* El contenedor se llama .detalle (antes .detail-head). Las reglas viejas quedaron apuntando al
   nombre anterior y dejaron de aplicar en silencio: el precio salía «Q7.30por conversación». */
/* En el teléfono: la miniatura (96 px) con nombre, costo y estado a su derecha; el resto —por qué,
   historia, atributos— debajo, a todo el ancho. Los envoltorios se disuelven (display:contents) y
   cada grupo se coloca a mano: antes se disolvía la ficha ENTERA y sus hijos caían alternados en
   las dos columnas (el costo en 96 px, la ficha en la otra…). */
.detalle{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px 14px;align-items:center;margin-bottom:16px}
.detalle-media,.detalle-info{display:contents}
.detalle-media .thumb{grid-column:1;grid-row:1}
.detalle-cab{grid-column:2;grid-row:1;min-width:0}
.detalle-media .ver-pieza,.detalle-media .ver-anuncio,.detalle-resto{grid-column:1/-1}
.detalle-media .ver-pieza{text-align:left;margin:0}
.detalle .dt{font-size:18px;margin:0 0 6px}
.detalle .m{font-size:22px;font-weight:600;color:var(--green);line-height:1.1}
.detalle .m small{font-size:12px;font-weight:400;color:var(--grey);margin-left:5px}
.chip{display:inline-block;margin-top:8px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--field);color:var(--grey)}
.chip.g{background:var(--greenbg);color:var(--green)}
.chip.y{background:var(--amberbg);color:var(--amber)}
.chip.r{background:var(--redbg);color:var(--red)}
.chip.p{background:var(--field);color:var(--grey)}
.why-lead{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0 0 4px}
.attrs{margin-top:18px}
.attr{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--rule);font-size:13px}
.attr:last-child{border-bottom:1px solid var(--rule)}
.attr .k{color:var(--grey)}
.attr .v{color:var(--ink);font-weight:500;text-align:right}

/* ---- visor de la pieza ---- */
/* La miniatura pasa a ser un <button> cuando hay archivo: mismo aspecto, semántica correcta. */
button.thumb{border:0;padding:0;font:inherit;cursor:pointer;display:block}
.thumb.abre{cursor:zoom-in}
.thumb.abre:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.thumb.abre::after{content:"";position:absolute;inset:0;background:rgba(15,17,21,0);transition:background .15s}
.thumb.abre:hover::after{background:rgba(15,17,21,.18)}

/* El diálogo se mide por SU CONTENIDO (`width:fit-content`). Con un ancho máximo fijo, una pieza
   vertical dejaba el diálogo de 760 px y el pie y la equis quedaban flotando lejos del video. */
/* El diálogo se desplaza por dentro si no cabe (pantallas bajas), y el cierre —44 px, objetivo
   cómodo al tacto— va pegajoso arriba a la derecha: siempre a la vista, nunca fuera del área. */
.visor{border:0;padding:0;background:transparent;color:#fff;overflow:auto;overscroll-behavior:contain;
       width:fit-content;max-width:92vw;max-height:92dvh}
.visor[open]{display:flex;flex-direction:column}
/* Nada se encoge dentro del diálogo: si no cabe, desborda y se desplaza. Sin esto, la columna flex
   aplastaba el botón de cierre a 26 px en una pantalla baja. */
.visor-cerrar,.visor-media,.visor-nota,.visor-pie{flex-shrink:0}
.visor::backdrop{background:rgba(8,8,10,.94)}
.visor-media{display:flex;justify-content:center;align-items:center}
.visor-media img,.visor-media video{max-width:min(92vw,760px);max-height:76dvh;width:auto;height:auto;
                                    display:block;border-radius:14px;background:#000}
.visor-cerrar{position:sticky;top:0;align-self:flex-end;width:44px;height:44px;margin:0 0 -44px;z-index:2;
              border:0;border-radius:50%;background:rgba(8,8,10,.62);box-shadow:0 0 0 1px rgba(255,255,255,.28);
              color:#fff;font-size:24px;line-height:1;cursor:pointer}
.visor-cerrar:focus-visible{outline:3px solid #D7FF3E;outline-offset:2px}
.visor-cerrar:hover{background:rgba(255,255,255,.26)}
.visor-pie{display:grid;gap:5px;padding:14px 2px 0;font-size:13.5px;max-width:min(92vw,760px)}
.visor-pie p{margin:0}
.visor-nombre{font-weight:600;font-size:15px}
.visor-costo{color:#fff}
.visor-attrs{color:#B4B9C4;font-size:12.5px;line-height:1.5}
/* Sin archivo, el visor muestra la miniatura ampliada y LO DICE: una miniatura a pantalla completa
   sin aviso se lee como la pieza, y no lo es. */
.visor-nota{margin:10px 0 0;font-size:12.5px;color:#B4B9C4;text-align:center}
.visor-reintentar{font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);
                  border:0;border-radius:999px;padding:5px 12px;cursor:pointer;margin-left:6px}
.visor-reintentar:hover{background:rgba(255,255,255,.26)}
.visor-media img.solo-miniatura{max-height:60dvh;opacity:.9}
.visor-enlace{color:#D7FF3E;font-size:13px;justify-self:start;margin-top:4px}
.strip button.th{border:0;padding:0;cursor:zoom-in}
.visor-enlace:hover{text-decoration:underline}
@media (max-width:560px){
  .visor{max-width:94vw}
  .visor-pie{padding-bottom:10px}
}

.ver-pieza{font-size:12px;color:var(--grey2);margin:10px 0 0;text-align:center}
.ver-anuncio{display:inline-block;margin-top:10px;font-size:13px;color:var(--ink);
             border-bottom:1px solid var(--rule);padding-bottom:2px}
.ver-anuncio:hover{border-color:var(--ink)}

.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
     background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--rule);
     display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:space-between;
     padding:10px 6px calc(14px + env(safe-area-inset-bottom));z-index:10}
/* Columnas a medida del texto y no seis iguales: a 12 px «Aprendimos» mide 72 px y una sexta
   parte de 390 son 63. Con columnas iguales las palabras largas se montaban una sobre otra.
   Cada enlace mide su contenido mínimo (la palabra más larga) y lo que sobra va a los huecos;
   «Este mes» lleva espacio duro en la plantilla para no partirse en dos renglones. */
@media (min-width:900px){.nav{max-width:390px}}
/* 12 px mínimo también acá: «Qué funciona» ya no cabe en una línea de 63 px, así que la etiqueta
   puede partirse en dos y la barra crece (--nav-h) para que el contenido no quede debajo. */
.nav a{font-size:12px;color:var(--grey2);display:flex;flex-direction:column;align-items:center;gap:4px;
       padding:4px 0;white-space:normal;text-align:center;line-height:1.15;letter-spacing:-.02em;align-self:start;width:min-content}
.nav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a:focus-visible{outline:2px solid var(--green);border-radius:8px}

.admin-strip{position:fixed;top:0;left:0;right:0;background:#D7FF3E;color:#0F1115;font-size:12px;font-weight:600;
             text-align:center;padding:4px;z-index:20}
.admin-strip a{text-decoration:underline}
body.app:has(.admin-strip) .top{padding-top:calc(28px + env(safe-area-inset-top))}

/* login */
body.login{background:#0A0A0A;display:grid;place-items:center;min-height:100dvh;padding:24px}
.login-card{background:#fff;border-radius:20px;padding:32px 28px;max-width:380px;width:100%;position:relative;overflow:hidden}
.login-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--spec)}
.login-card .marca{height:76px;width:76px;display:block;margin:0 0 18px;border-radius:16px}
.login-card h1{font-size:22px;font-weight:600;color:var(--ink);margin:10px 0 6px}
.login-card .lead{font-size:13.5px;line-height:1.55;color:var(--grey);margin:0 0 20px}
.login-card .error{font-size:13px;color:var(--red);background:var(--redbg);padding:10px 12px;border-radius:10px;margin:0 0 14px}
.login-card .dev{font-size:12px;word-break:break-all;background:var(--field);padding:10px;border-radius:10px}
.login-card .campo{display:block;font-size:12px;color:var(--grey);margin:0 0 5px}
.login-card input{width:100%;font:inherit;font-size:16px;padding:13px 15px;border:1px solid var(--rule);border-radius:12px;margin-bottom:14px;background:var(--field)}
.login-card input[type=hidden]{display:none}
.login-card .nota-sesion{font-size:12px;color:var(--grey2);margin:14px 0 0;line-height:1.5;text-align:center}
.login-card input:focus{outline:2px solid var(--ink);border-color:transparent}
.btn{display:block;width:100%;text-align:center;background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:600;
     padding:13px;border:0;border-radius:999px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--grey);font-weight:500;margin-top:10px}



/* ============================ Tendencias ============================
   El gráfico es SVG dibujado por el servidor, sin librería. El tamaño de la tipografía va en
   unidades del viewBox y NO en px: el SVG escala al ancho del contenedor, así que un 11 que se ve
   bien en escritorio se convierte en 5 px en un teléfono. Por eso los valores de acá son grandes y
   el bloque de escritorio los baja. */
.seg-bloque{margin:0 0 14px}
.seg-rotulo{font-size:12px;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;margin:0 0 7px}
.seg-nota{font-size:12px;line-height:1.5;color:var(--grey2);margin:8px 0 0}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.seg a,.seg span{font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--rule);
                 color:var(--grey);white-space:nowrap}
.seg a:hover{border-color:var(--ink2);color:var(--ink)}
.seg a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.seg .off{color:var(--grey2);background:var(--field);border-style:dashed;cursor:help}
.seg-bloque.metrica{margin-bottom:20px}
.seg.met a,.seg.met span{font-size:12px;padding:6px 11px}

/* Dos gráficos, uno por tamaño de pantalla. El servidor no sabe el ancho del navegador y el mismo
   viewBox escalado no sirve: con el de escritorio, 390 px daban 136 px de alto y un cuarto del
   ancho gastado en el margen de las etiquetas. Se dibujan los dos y el CSS muestra uno. */
.solo-escritorio{display:none}
.chart{margin:0 0 26px;padding:0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.g-grid{stroke:var(--rule);stroke-width:1}
.g-linea{fill:none;stroke-linejoin:round;stroke-linecap:round}
.g-ref{fill:none;stroke:var(--grey3);stroke-linecap:round}
.g-eje.encurso{fill:var(--ink2);font-weight:600}
.g-et{font-weight:600;dominant-baseline:middle}
.g-et-ref{fill:var(--grey2);font-weight:500}
.g-tick,.g-eje{fill:var(--grey2)}
/* Los tamaños van en unidades del viewBox, así que cada caja necesita los suyos. Calibrados para
   que el texto rendido no baje de 12 px: la caja móvil (430 de ancho) se dibuja a 346 px en un
   teléfono de 390 → 15 unidades ≈ 12 px; la de escritorio (860) a ~1080 px en 1440 → 12 ≈ 15 px. */
.solo-movil .g-linea{stroke-width:2.6}
.solo-movil .g-cola{stroke-dasharray:5 5}
.solo-movil .g-ref{stroke-width:2;stroke-dasharray:2.5 5}
.solo-movil .g-fin{r:3.6}
.solo-movil .g-solo{r:4}
.solo-movil .g-et{font-size:15px}
.solo-movil .g-et-ref{font-size:15px}
.solo-movil .g-tick,.solo-movil .g-eje{font-size:15px}
.solo-escritorio .g-linea{stroke-width:2.2}
.solo-escritorio .g-cola{stroke-dasharray:6 5}
.solo-escritorio .g-ref{stroke-width:1.8;stroke-dasharray:2 5}
.solo-escritorio .g-fin{r:3.2}
.solo-escritorio .g-solo{r:3.6}
.solo-escritorio .g-et{font-size:12px}
.solo-escritorio .g-et-ref{font-size:12px}
.solo-escritorio .g-tick,.solo-escritorio .g-eje{font-size:12px}

/* ==================== Comparador de meses (Este mes) ==================== */
.comparador{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;
            padding:12px 14px;background:var(--field);border-radius:14px}
.comparador label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--grey)}
.comparador select{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;
                   border:1px solid var(--rule);border-radius:9px;padding:7px 9px;max-width:150px}
.comparador select:focus{outline:2px solid var(--ink);border-color:transparent}
.comparador button{font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:var(--ink);
                   border:0;border-radius:999px;padding:8px 15px;cursor:pointer}
.comparador .aviso{flex-basis:100%;font-size:12px;line-height:1.5;color:var(--grey2)}
/* el período que de verdad se comparó, pegado a las cifras; en ámbar cuando hubo recorte */
.periodo-efectivo{font-size:12.5px;line-height:1.5;color:var(--grey);margin:0 0 6px}
.periodo-efectivo.recorte{color:var(--amber)}
.pie.parcial{margin:0 0 10px;color:var(--amber)}

/* ============================ Reportes ============================ */
.volver{margin:0 0 10px}
.volver a{font-size:12.5px;color:var(--grey)}
.volver a:hover{color:var(--ink)}
h2 .chip,.meses .chip{display:inline-block;font-size:12px;font-weight:600;vertical-align:middle;
      padding:3px 9px;border-radius:999px;background:var(--greenbg);color:var(--green);margin-left:8px}
.meses .chip.gris{background:var(--field);color:var(--grey2)}
/* El PDF es un botón secundario junto al título, no un enlace escondido en el subtítulo. */
.titulo-fila{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 4px}
.titulo-fila h2{margin:0}
.btn-sec{display:inline-block;font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--ink);
         border-radius:999px;padding:8px 14px;white-space:nowrap;line-height:1.2}
.btn-sec:hover{background:var(--ink);color:#fff}
.btn-sec:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.meses{list-style:none;padding:0;margin:0}
.meses li{border-bottom:1px solid var(--rule)}
.meses li>a,.meses li>span:first-child{display:block}
.meses li>a{display:flex;align-items:center;gap:4px;padding:15px 0}
.meses li>span:first-child{padding:15px 0}
.meses li.pendiente{display:flex;align-items:center;gap:4px;color:var(--grey2)}
.meses .mes{font-size:15.5px;font-weight:600;color:var(--ink)}
.meses li.pendiente .mes{color:var(--grey2)}
.meses .ir{margin-left:auto;font-size:12.5px;color:var(--grey)}
.meses li>a:hover .ir{color:var(--ink)}

.kpis{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 18px}
.kpi{padding:14px 0;border-bottom:1px solid var(--rule)}
.kpi .v{font-size:34px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.05}
.kpi .q{font-size:12.5px;color:var(--grey);margin-top:2px}
.kpi .dd{font-size:12px;margin-top:6px;color:var(--grey)}
.kpi .dd.t-g{color:var(--green)}
.kpi .dd.t-r{color:var(--red)}
.note.proy{background:var(--field);border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.6;margin:0 0 18px}
.note.gris{color:var(--grey2);font-size:12.5px;margin:0 0 18px}
.editorial{margin:0 0 20px}
.editorial p{font-size:14px;line-height:1.65;color:var(--ink2);margin:0;max-width:65ch}
.editorial p+p{margin-top:12px}
.editorial.cierre{margin-top:22px}
.ventas{border-left:3px solid var(--green);padding:2px 0 2px 14px;margin:0 0 20px}
.ventas .n{font-size:17px;font-weight:600;color:var(--ink)}
.ventas .c{font-size:13px;color:var(--grey);margin-top:2px}
.ventas .c .t-g{color:var(--green)}
.ventas .c .t-r{color:var(--red)}
.ventas .f{font-size:12px;color:var(--grey2);margin-top:5px}
h3.bloque.sep{margin-top:26px}
.bloque-diff .lead{font-size:14px;line-height:1.6;color:var(--ink);margin:0 0 8px}
.bloque-diff p{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0 0 7px}

h3.bloque{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 10px;letter-spacing:.01em}
.lecturas{list-style:none;padding:0;margin:0 0 26px}
.lecturas li{font-size:13.5px;line-height:1.6;color:var(--ink2);padding:0 0 0 16px;margin:0 0 11px;position:relative}
.lecturas li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--ink)}

.tt{width:100%;border-collapse:collapse;font-size:12.5px}
.tt th{text-align:left;font-weight:500;color:var(--grey2);font-size:12px;padding:0 6px 7px 0;
       border-bottom:1px solid var(--rule);white-space:nowrap}
.tt td{padding:9px 6px 9px 0;border-bottom:1px solid var(--rule);color:var(--ink2)}
.tt td:first-child{font-weight:500;color:var(--ink)}
.tt .n{text-align:right;padding:9px 0 9px 12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tt th:not(:first-child){text-align:right;padding:0 0 7px 12px}
.tt .pip{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;vertical-align:middle}
.tt .t-bueno{color:var(--green)}
.tt .t-malo{color:var(--red)}
.tt .t-estable,.tt .t-nada{color:var(--grey2)}
.tt .mini{font-weight:400;color:var(--grey2)}
.pie{font-size:12px;line-height:1.55;color:var(--grey2);margin:14px 0 0}

/* ============================================================================
   CAPAS — conclusión, evidencia, detalle

   El nivel 1 es lo único que se ve sin hacer scroll en un teléfono, así que se
   dimensiona para eso: número grande, una línea que dice qué cuenta y una frase
   corta. Nada de tablas ni gráficas acá arriba.

   El nivel 3 es un <details> nativo. El triángulo propio del navegador se apaga
   y se dibuja uno con borde para que sea igual en Safari, Chrome y Firefox: el
   marcador nativo cambia de forma y de lugar en cada uno, y el resumen dejaba de
   alinearse con el resto de la pantalla.
   ============================================================================ */
.capa1{margin:2px 0 18px}
.capa1 .c-num{font-size:56px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em;
              margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.capa1 .c-delta{font-size:13px;font-weight:500;padding:5px 11px;border-radius:999px;
                white-space:nowrap;letter-spacing:0}
.capa1 .c-delta.t-g{color:var(--green);background:var(--greenbg)}
.capa1 .c-delta.t-r{color:var(--red);background:var(--redbg)}
.capa1 .c-delta.t-n{color:var(--grey);background:var(--field)}
.capa1 .c-unidad{font-size:15px;color:var(--ink2);margin:6px 0 0}
.capa1 .c-frase{font-size:15px;line-height:1.55;color:var(--ink);margin:12px 0 0;max-width:65ch}
.capa1 .c-frase+.c-frase{margin-top:10px}
/* La conclusión escrita por una persona va en el tono del cuerpo, no en el del titular. La barra
   verde que la marcaba se quitó: dentro de una tarjeta competía con el borde. */
.capa1.editorial .c-frase{color:var(--ink2)}
.capa1-src{margin-top:10px}

.capa3{margin-top:24px;border-top:1px solid var(--rule)}
.capa3>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
               padding:15px 0;font-size:14px;font-weight:500;color:var(--ink)}
.capa3>summary::-webkit-details-marker{display:none}
.capa3>summary::after{content:"";width:7px;height:7px;margin-left:auto;
                      border-right:1.7px solid var(--grey);border-bottom:1.7px solid var(--grey);
                      transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.capa3[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.capa3>summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.capa3-cuerpo{padding:2px 0 8px}
/* Las tablas anchas se desplazan dentro de su caja: sin esto, en un teléfono la de siete columnas
   estira la página entera y toda la pantalla se mueve de lado. */
.capa3-cuerpo .tt{display:block;overflow-x:auto;white-space:nowrap}

.resumen{margin:0 0 6px}
.resumen .rl{display:flex;justify-content:space-between;align-items:center;gap:16px;
             padding:13px 0;border-top:1px solid var(--rule)}
.resumen .rl:last-child{border-bottom:1px solid var(--rule)}
.resumen .rl .q{font-size:13.5px;color:var(--ink2)}
.resumen .rl .dd{font-size:12px;color:var(--grey);margin-top:3px}
.resumen .rl .dd.t-g{color:var(--green)}
.resumen .rl .dd.t-r{color:var(--red)}
.resumen .rl .v{font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
                line-height:1.05;white-space:nowrap}

/* ============================================================================
   TARJETAS — cada bloque distinto de una pantalla va en la suya

   Fondo blanco, borde sutil, radio 12 y relleno 20 (24 en escritorio); 24 px entre tarjetas y
   16 px entre los elementos de una misma tarjeta. Antes todo iba apilado a la misma distancia y
   con el mismo peso: el texto editorial, «Qué sigue», la nota, el comparador y la tabla se leían
   como un solo bloque.
   ============================================================================ */
.tarjeta{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:20px}
.tarjeta+.tarjeta{margin-top:24px}
.tarjeta>*+*{margin-top:16px}
.tarjeta .capa1{margin:0}
.tarjeta .capa1-src{margin-top:12px}
.tarjeta h3.bloque{margin:0 0 12px}
.tarjeta h3.bloque+*{margin-top:0}
.tarjeta>.stat+.stat{margin-top:0}
.tarjeta>.periodo-efectivo{margin-bottom:0}
.tarjeta>.periodo-efectivo+.stat{margin-top:10px}
.tarjeta>.stat+.src{margin-top:12px}
.tarjeta .comparador{margin:0;padding:0;background:transparent;border-radius:0}
.tarjeta .seg-bloque{margin:0}
.tarjeta .seg-bloque+.seg-bloque{margin-top:20px}
.tarjeta .chart{margin:0}
.tarjeta .lecturas{margin:0}
.tarjeta .lecturas li:last-child{margin-bottom:0}
.tarjeta .filters{margin-bottom:0}
.tarjeta .insight{padding:0;border-top:0}
.tarjeta .meses li:last-child{border-bottom:0}
.tarjeta .meses li:last-child>a,.tarjeta .meses li:last-child>span:first-child{padding-bottom:0}
.tarjeta .meses li:first-child>a,.tarjeta .meses li:first-child>span:first-child{padding-top:0}
.tarjeta .who{display:block;margin-top:12px;font-size:12px;color:var(--grey2)}
/* prosa editorial: 65 caracteres por línea y párrafos de verdad */
.prosa p{margin:0;font-size:14px;line-height:1.65;color:var(--ink2);max-width:65ch}
.prosa p+p{margin-top:12px}
/* «Qué sigue» numerado: un punto por renglón, con aire entre ellos */
.pasos-editorial{list-style:none;margin:0;padding:0;counter-reset:paso}
.pasos-editorial li{position:relative;padding-left:34px;font-size:14px;line-height:1.6;color:var(--ink2);max-width:65ch}
.pasos-editorial li+li{margin-top:14px}
.pasos-editorial li::before{counter-increment:paso;content:counter(paso);position:absolute;left:0;top:1px;width:22px;height:22px;
                            border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
/* el plegado es una tarjeta más: sin relleno propio, el resumen y el cuerpo llevan el suyo */
details.capa3.tarjeta{padding:0;margin-top:24px;border-top:1px solid var(--rule)}
.capa3.tarjeta>summary{padding:16px 20px}
.capa3.tarjeta .capa3-cuerpo{padding:0 20px 20px}
.capa3.tarjeta .capa3-cuerpo>*+*{margin-top:16px}

/* ============================================================================
   ESCRITORIO (≥900 px)

   El mockup venía dentro de un marco de teléfono, y eso era la maqueta, no el
   producto: en 1440 px dejaba tres cuartos de pantalla en negro. Acá el mismo
   contenido se reacomoda — la barra de abajo pasa a ser una columna a la
   izquierda y las pantallas que tienen dos bloques los ponen lado a lado.

   Lo que NO cambia: qué se muestra. Ni un dato más, ni una gráfica, ni una
   métrica de las que el PRD deja fuera. Una pantalla más ancha es más lugar
   para lo mismo, no una excusa para mostrar lo que en el teléfono se decidió
   no mostrar.
   ============================================================================ */
@media (min-width:900px){
  /* --marco es el ancho máximo del CONTENIDO (lo que se lee), centrado en el viewport.
     --canaleta es lo que sobra a cada lado: cero hasta un viewport de 1440 px, 560 px en uno de 2560.

     REGLA: todas las bandas horizontales de fondo —franja de admin, cabezal, espectro, barra
     lateral, área de contenido— van de 0 a 100 % del viewport. Sólo el contenido interno respeta
     el marco. Por eso la canaleta NO es una columna vacía de la rejilla (eso dejaba el fondo de la
     barra y del main cortados en el marco, y el scrollbar del main metido hacia adentro): es
     RELLENO dentro de la barra y dentro del main, que siguen ocupando el viewport entero. */
  /* El lateral a la escala del contenido: 256 px, filas de 48 px, 15 px de letra e iconos de 22.
     Entre 900 y 1100 px se queda en 236 para no apretar las tarjetas. */
  :root{--lateral:256px;--contenido:1080px;--marco:1440px;
        --canaleta:max(0px, calc((100vw - var(--marco)) / 2))}
  body.app{background:#fff}

  /* Dos columnas que cubren el viewport: la barra (con la canaleta izquierda adentro) y el main
     (con la derecha adentro). La fila del cabezal cruza las dos. */
  .phone{max-width:none;min-height:100dvh;height:100dvh;display:grid;
         grid-template-columns:calc(var(--lateral) + var(--canaleta)) minmax(0,1fr);
         grid-template-rows:auto minmax(0,1fr);
         grid-template-areas:"top top" "nav main"}

  .top{grid-area:top;padding:16px 40px}
  /* Lo de adentro del cabezal se alinea con el marco, no con el viewport: si no, en 2560 px el
     logo queda a medio metro del nombre de la pantalla que encabeza. */
  .top .row{max-width:var(--marco);margin-inline:auto}
  .top .marca{display:block;height:34px;width:auto}
  .top .marca-chica{display:none}
  .top .name{font-size:16px}
  .crown.marca-cliente{height:34px}
  .crown.marca-cliente img{height:34px;max-height:34px}
  .top .name small{font-size:12px}

  /* La navegación deja de ser una barra flotante y pasa a ser una columna fija:
     en escritorio hay lugar para que se vea siempre dónde está uno. */
  .nav{grid-area:nav;position:static;transform:none;width:auto;max-width:none;
       display:flex;flex-direction:column;gap:6px;justify-content:flex-start;
       border-top:0;border-right:1px solid var(--rule);background:#fff;backdrop-filter:none;
       padding:22px 12px 22px calc(12px + var(--canaleta));overflow-y:auto}
  /* Cada fila ocupa TODO el ancho (align-self:stretch anula el start del móvil): el fondo negro del
     activo es una fila completa y el icono y el texto arrancan en el mismo punto en todas. */
  .nav a{flex-direction:row;justify-content:flex-start;gap:12px;font-size:15px;width:auto;letter-spacing:0;
         align-self:stretch;min-height:48px;padding:0 14px;border-radius:10px;color:var(--grey);line-height:1.2}
  .nav a svg{width:22px;height:22px;flex-shrink:0}
  .nav a:hover{background:var(--field);color:var(--ink)}
  .nav a[aria-current="page"]{background:var(--ink);color:#fff;font-weight:600}

  /* scrollbar-gutter: una pantalla corta (sin scroll) centraba el marco 7 px más a la derecha que
     una larga, y el título saltaba al cambiar de pestaña. */
  .screen{grid-area:main;overflow-y:auto;scrollbar-gutter:stable;padding:34px calc(40px + var(--canaleta)) 60px 40px}
  /* La banda (.screen) no se acota nunca: se acota el marco de adentro. */
  .marco{max-width:var(--contenido);margin-inline:auto}
  /* Todo arranca en el borde izquierdo del marco. Antes los hijos con max-width se centraban
     (margin-inline:auto) y el título saltaba de posición al cambiar de pestaña. */
  .marco>*{margin-inline:0}

  h2{font-size:26px}
  .sub{font-size:14px;margin-bottom:32px}
  .tarjeta{padding:24px}
  .capa3.tarjeta>summary{padding:18px 24px}
  .capa3.tarjeta .capa3-cuerpo{padding:0 24px 24px}

  /* --- Este mes: el titular y el contexto a la izquierda, las cifras a la derecha --- */
  /* La nota se coloca por área, no por orden del DOM: en el teléfono tiene que ir DESPUÉS de las
     cifras que explica, y acá va debajo del titular grande. */
  /* Las tarjetas de la izquierda se apilan en la columna 1; las cifras van a la derecha y ocupan
     tantas filas como tarjetas haya a la izquierda (--filas, puesto por la plantilla), así el
     detalle plegado queda debajo de todo. La separación entre tarjetas la da el hueco de la rejilla. */
  .s-mes .marco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
         gap:24px 32px;align-content:start;align-items:start}
  .s-mes .marco>*{max-width:none;margin-inline:0}
  .s-mes .marco>.tarjeta+.tarjeta{margin-top:0}
  .s-mes .titulo{display:block;grid-column:1/-1;width:100%;margin-bottom:8px}
  .s-mes .titulo .sub{margin-bottom:0}
  .s-mes .t-conclusion,.s-mes .t-sigue,.s-mes .t-nota,.s-mes .t-comparador{grid-column:1}
  .s-mes .t-metricas{grid-column:2;grid-row:2 / span var(--filas,1)}
  .s-mes .capa3{grid-column:1/-1;margin-top:8px}
  .capa1 .c-num{font-size:76px}
  .capa1 .c-unidad{font-size:17px}
  .capa1 .c-frase{font-size:15.5px}
  .stat{padding:16px 0}
  .stat .v{font-size:24px}
  .note{font-size:14px}

  /* --- Qué funciona: las tres, una al lado de la otra --- */
  .top3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
  .card{grid-template-columns:1fr;gap:14px}
  .card .thumb{width:100%;height:auto;aspect-ratio:4/5}
  .card .thumb .play i,.g .thumb .play i{width:46px;height:46px}
  .card .thumb .play i::after,.g .thumb .play i::after{border-left-width:14px;border-top-width:9px;border-bottom-width:9px}
  .card .thumb .tag{font-size:12px;padding:3px 9px}
  .card .t{font-size:17px}
  .card .m{font-size:24px}
  .card .why{font-size:13px}

  /* --- Qué aprendimos: una sola columna angosta; la prosa se lee peor cuanto más ancha --- */
  .s-aprendimos .marco>:not(h2):not(.sub){max-width:720px}
  .insight .t{font-size:20px}
  .insight .b{font-size:14.5px}
  .strip .th{width:58px;height:74px}

  /* --- Creativos: la grilla usa el ancho que haya --- */
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
  .g .thumb{height:auto;aspect-ratio:4/5}
  .g .dot{width:12px;height:12px;top:10px;right:10px}
  .g .n{font-size:13px;margin-top:9px}
  .g .q{font-size:12px}
  .filters a{padding:7px 14px;font-size:13px}
  .filters a:hover{border-color:var(--ink)}

  /* --- Detalle: la pieza grande a la izquierda, lo que se sabe de ella a la derecha ---
     Se apunta a .detalle y no a una clase de sección: la sección del detalle se llama «creativos»
     (para que la navegación marque esa pestaña), así que una regla colgada de .s-creativo no casa
     con nada y no avisa — la miniatura se iba a todo el ancho de la pantalla. */
  .detalle{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start;
           max-width:var(--contenido);margin-inline:0}
  .detalle-media,.detalle-info{display:block}
  .detalle-media .thumb{width:100%;height:auto;aspect-ratio:4/5;border-radius:16px}
  .detalle .dt{font-size:26px;margin-bottom:8px}
  .detalle .m{font-size:26px}
  .detalle .m small{font-size:14px;margin-left:8px}
  .card .m small{font-size:13px;margin-left:7px}
  .why-lead{font-size:14.5px}


  /* --- Tendencias: el gráfico arriba a todo lo ancho, lecturas y tabla lado a lado debajo --- */
  .s-tendencias .marco{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:24px 32px;
                align-content:start;align-items:start;
                grid-template-areas:"tit tit" "sub sub" "capa1 capa1" "ctrl ctrl" "fig fig" "a b"}
  .s-tendencias .marco>*{max-width:none;margin-inline:0}
  .s-tendencias .marco>.tarjeta+.tarjeta{margin-top:0}
  .s-tendencias h2{grid-area:tit;margin-bottom:0}
  .s-tendencias .sub{grid-area:sub;margin:-20px 0 8px}
  .s-tendencias .t-conclusion{grid-area:capa1}
  .s-tendencias .t-controles{grid-area:ctrl}
  .s-tendencias .t-grafica{grid-area:fig}
  .s-tendencias .t-lecturas{grid-area:a}
  .s-tendencias .capa3{grid-area:b;margin-top:0}
  .s-tendencias .empty{grid-column:1/-1}
  .solo-escritorio{display:block}
  .solo-movil{display:none}

  /* --- Reportes: KPI en fila, y las tres columnas del cierre --- */
  .s-reportes .marco>:not(h2):not(.sub){max-width:760px}
  .s-reporte .marco>:not(h2):not(.sub):not(.volver):not(.titulo-fila){max-width:860px}
  .resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px;margin-bottom:10px}
  /* En columna, la cifra va PRIMERO: leer «+26%» antes de saber +26% de qué obliga a bajar y
     volver a subir. En el teléfono no hace falta, porque ahí van una al lado de la otra. */
  .resumen .rl{display:flex;flex-direction:column;border-top:0;padding:0}
  .resumen .rl:last-child{border-bottom:0}
  .resumen .rl .v{order:-1;font-size:40px;line-height:1.05}
  .resumen .rl .q{margin-top:4px}
  .resumen .rl .dd{margin-top:5px}
  .kpis{grid-template-columns:repeat(3,1fr);gap:0 26px}
  .kpi{border-bottom:0;padding:0 0 4px}
  .kpi .v{font-size:40px}
  .editorial p{font-size:14.5px}
  .lecturas li{font-size:14px}
  .tt{font-size:13px}
  .tt th{font-size:12px}
  .pie{font-size:12px}

  .empty{max-width:720px}
  /* La franja de admin es hija del <body>, no de .phone, así que NO puede colocarse con
     `grid-area:top`: en la rejilla del body no existe esa área, y una línea con nombre que no
     existe manda el elemento a una columna IMPLÍCITA. Esa columna fantasma le robaba ancho a
     .phone y el sobrante crecía con el viewport: era la franja blanca a la derecha del cabezal
     en pantallas anchas, sólo en la vista de admin. Se apila con flex y la franja va primero. */
  body.app:has(.admin-strip){display:flex;flex-direction:column;height:100dvh}
  body.app:has(.admin-strip) .admin-strip{position:static;order:-1;flex-shrink:0}
  body.app:has(.admin-strip) .phone{height:auto;min-height:0;flex:1}
  body.app:has(.admin-strip) .top{padding-top:18px}
}

/* Entre 900 y 1100 px el lateral se queda compacto: a 256 px apretaba las tarjetas. */
@media (min-width:900px) and (max-width:1100px){
  :root{--lateral:236px}
  .nav a{font-size:14px;padding:0 12px}
}

/* Pantallas anchas de verdad: no estirar más, centrar. */
@media (min-width:1500px){
  :root{--contenido:1180px}
}