/* ============================================================ Panel del cliente — GranVía Solutions Los colores y las tipografías salen del brand kit, igual que el panel del equipo (~/design-system/gvs-brand-kit/tokens/). No se inventa nada aquí. Está escrito para el móvil primero: el cliente lo va a abrir en el teléfono cuando le llegue el enlace, no sentado en un escritorio. Todo va en una sola columna y las tablas anchas se deslizan solas dentro de su caja. ============================================================ */ :root{ --bg:#FAFAF5; --paper:#FFFFFF; --paper-2:#F2F2EA; --ink:#0F0F0F; --ink-soft:#4A4A45; --ink-faint:#8A8A82; --line:#E4E3DA; --line-2:#D2D1C6; --accent:#6754E9; --accent-strong:#5340D6; --accent-tint:#ECEAFC; --accent-ink:#2E2470; --lime:#C6FF00; --lime-tint:#F0FFBF; --navy:#161829; --navy-2:#1E2138; --navy-line:#2E3252; /* Un solo morado en cuatro intensidades: son cuatro momentos de lo mismo, no cuatro categorías. Los cuatro pasan 3:1 contra el blanco. */ --serie-1:#9080EE; --serie-2:#7360E8; --serie-3:#5B47DC; --serie-4:#3B2BA3; --ok:#1F9E5A; --ok-tint:#E0F4E9; --warn:#E0A100; --warn-tint:#FBF0CF; --bad:#E0392B; --bad-tint:#FBE2DF; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px; --pop:4px 4px 0 var(--ink); --pop-sm:3px 3px 0 var(--ink); --sombra:0 6px 18px rgba(15,15,15,.10); --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --display:"Archivo Black","Arial Black",var(--sans); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--sans); font-size:16px; line-height:1.55; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; } button,input{font:inherit;color:inherit} a{color:var(--accent);text-underline-offset:2px} /* ════════ ACCESO ════════════════════════════════════════════ */ body.acceso{ min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:24px; background: radial-gradient(1100px 520px at 12% -8%, var(--accent-tint), transparent 62%), radial-gradient(760px 420px at 105% 108%, var(--lime-tint), transparent 60%), var(--bg); } .login{width:100%;max-width:392px} .login-caja{ background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--pop); padding:36px 32px 30px; } .login-logo{width:186px;height:auto;display:block;margin:0 auto 6px} .login-sub{ text-align:center; color:var(--ink-faint); font-size:13px; font-weight:600; letter-spacing:.02em; margin-bottom:26px; } .login label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 6px; } .login input{ width:100%; padding:12px 13px; margin-bottom:18px; background:var(--paper-2); border:1.5px solid var(--line-2); border-radius:var(--r-sm); font-size:16px; outline:none; transition:border-color .14s, background .14s; } .login input:focus{border-color:var(--accent);background:var(--paper)} .login button{ width:100%; padding:13px; cursor:pointer; background:var(--accent); color:#fff; font-weight:700; border:1.5px solid var(--ink); border-radius:var(--r-sm); box-shadow:var(--pop-sm); transition:transform .1s, box-shadow .1s; } .login button:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)} .login button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} .login button:disabled{opacity:.6;cursor:progress} .login-error{ margin-top:14px; padding:10px 12px; font-size:14px; font-weight:600; color:#8A1B12; background:var(--bad-tint); border-radius:var(--r-sm); } .login-pie{ text-align:center; margin-top:20px; font-size:13px; color:var(--ink-faint); max-width:392px; } .login-guia{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:13px 15px; background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--r-md); color:var(--ink); text-decoration:none; transition:border-color .14s, box-shadow .14s, transform .14s; } .login-guia:hover, .login-guia:focus-visible{ border-color:var(--ink); box-shadow:var(--pop-sm); transform:translate(-1px,-1px); } .login-guia .lg-ico{flex:none; width:22px; height:22px; color:var(--accent)} .login-guia .lg-ico svg{width:22px; height:22px; display:block} .login-guia .lg-txt{flex:1; font-size:12.5px; line-height:1.4; color:var(--ink-faint)} .login-guia .lg-txt b{display:block; font-size:13.5px; color:var(--accent); margin-bottom:2px} .login-guia .lg-fuera{flex:none; width:14px; height:14px; color:var(--ink-faint)} .login-guia .lg-fuera svg{width:14px; height:14px; display:block} .login-guia:hover .lg-fuera{color:var(--accent)} /* En el móvil la caja se sube un poco. Centrada del todo quedaba demasiado baja: el 100vh de los navegadores de móvil cuenta la barra de direcciones, así que el centro de lo que de verdad se ve está más arriba de donde el navegador lo pone —y con el teclado abierto el bloque se salía de pantalla. `svh` mide el alto visible de verdad, y `align-content:start` con un margen proporcional al alto (clamp) deja el bloque arriba con aire, sin pegarlo al borde. La misma regla vale para las pantallas bajas (móvil apaisado), donde antes se cortaba el pie. */ @media (max-width:560px), (max-height:680px){ body.acceso{align-content:start; padding:clamp(18px,6.5vh,52px) 18px 30px} } @media (max-width:560px){ .login{margin-inline:auto} .login-caja{padding:28px 22px 24px} .login-logo{width:164px} } /* ════════ CABECERA ══════════════════════════════════════════ */ .alto{ position:sticky; top:0; z-index:20; background:var(--navy); color:#fff; border-bottom:1.5px solid var(--navy-line); } .alto-dentro{ max-width:1000px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; gap:14px; } .alto-logo{height:26px;width:auto;flex:0 0 auto} .alto-quien{flex:1;min-width:0;line-height:1.25} .alto-quien strong{display:block;font-size:15px;font-weight:800; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .alto-quien span{display:block;font-size:12px;color:#A8ACC4} .salir{ flex:0 0 auto; padding:7px 13px; cursor:pointer; font-size:13px; font-weight:700; background:transparent; color:#fff; border:1.5px solid var(--navy-line); border-radius:var(--r-pill); } .salir:hover{background:var(--navy-2);border-color:#4A4F78} /* Los atajos se deslizan de lado en el móvil en vez de partirse en tres filas, que empujaban el contenido media pantalla hacia abajo. */ .atajos{ max-width:1000px; margin:0 auto; padding:0 18px 10px; display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; } .atajos::-webkit-scrollbar{display:none} .atajos a{ flex:0 0 auto; padding:6px 12px; border-radius:var(--r-pill); font-size:13px; font-weight:600; text-decoration:none; color:#C9CCE0; background:var(--navy-2); border:1px solid var(--navy-line); } .atajos a:hover{color:#fff;background:#262A45} /* El atajo de la sección que se está leyendo. Se pinta con el morado de marca —igual que el menú del panel del equipo— y no con el lima: sobre el azul oscuro de la cabecera el lima grita más que el propio contenido. */ .atajos a.activo{ color:#fff; background:var(--accent); border-color:var(--accent); } .atajos a.activo:hover{background:var(--accent-strong)} /* La barra la mueve el JavaScript con desplazamiento suave; en quien pide menos movimiento el navegador lo respeta solo. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } /* ════════ LIENZO ════════════════════════════════════════════ */ .lienzo{max-width:1000px;margin:0 auto;padding:22px 18px 10px} .lienzo.cargando{padding:60px 18px;text-align:center;color:var(--ink-faint);font-weight:600} .seccion{margin-bottom:34px;scroll-margin-top:110px} .seccion > h2{ font-family:var(--display); font-size:20px; font-weight:400; letter-spacing:-.01em; margin-bottom:4px; } .seccion > .pista{font-size:14px;color:var(--ink-soft);margin-bottom:14px;max-width:65ch} .caja{ background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r-md); box-shadow:var(--pop-sm); padding:16px 18px; margin-bottom:12px; } /* ════════ LAS CUATRO CIFRAS ═════════════════════════════════ */ .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} /* Aire debajo de la fila de tarjetas cuando la sección sigue. Sin esto se pegan a lo que venga: las tarjetas llevan sombra sólida de 3px, que sale fuera de la caja y se come lo poco que hubiera. Iba parcheado a mano en contactos, en Google y en enlaces —y en redes se olvidó—, así que vive aquí. `:not(:last-child)` porque en el resumen y en ventas las tarjetas cierran la sección, y ahí el margen sobra: ya separa la sección entera. */ .cifras:not(:last-child){margin-bottom:16px} .cifra{ background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r-md); box-shadow:var(--pop-sm); padding:14px 16px 12px; } .cifra h3{font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--ink-soft);margin-bottom:8px} .cifra .dato{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .cifra .n{font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:-.02em} .cifra .u{font-size:13px;color:var(--ink-faint);font-weight:600} .cifra .pie{font-size:12.5px;color:var(--ink-faint);margin-top:7px;line-height:1.4} /* La ventana de tiempo de la cifra. Va pegada al número y antes del pie porque forma parte del dato, no de su explicación: «600 clics» sin «del 25 jul al 21 ago» es un número sin unidad. En mayúsculas pequeñas para que se lea como una etiqueta y no compita con la cifra. */ .cifra .ventana{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:6px; line-height:1.35; } .delta{font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill)} .delta.sube{color:#0E7A41;background:var(--ok-tint)} .delta.baja{color:#8A1B12;background:var(--bad-tint)} .delta.igual{color:var(--ink-faint);background:var(--paper-2)} /* ════════ MINIGRÁFICA DE BARRAS ═════════════════════════════ Un morado en cuatro intensidades, del periodo más viejo al de ahora. Cada barra lleva su mes debajo: el color refuerza el orden, no es lo único que lo cuenta. */ .minibarras{margin-bottom:10px} .mb-fila{display:flex;align-items:flex-end;gap:4px;height:38px} /* `cursor:help` porque cada barra lleva su periodo y su número en un `title`: sin el cambio de cursor no hay nada que invite a pararse encima. */ .mb{flex:1;display:flex;align-items:flex-end;height:100%;cursor:help} .mb i{display:block;width:100%;border-radius:3px 3px 0 0} .mb-eje{display:flex;justify-content:space-between;margin-top:4px; font-size:10.5px;color:var(--ink-faint);font-weight:600} .mb.parcial i{opacity:.55} /* ════════ BARRAS APILADAS ═══════════════════════════════════ Para lo que se parte en trozos: las búsquedas por tramo de posición y las visitas por canal. La altura total sigue siendo proporcional —si un mes hay menos, la columna baja—; lo que cambia dentro es el reparto. */ .apilada{margin:10px 0 4px} .ap-fila{display:flex;align-items:flex-end;gap:8px;height:96px} .ap-col{flex:1;display:flex;align-items:flex-end;height:100%} .ap-pila{width:100%;display:flex;flex-direction:column-reverse;border-radius:4px;overflow:hidden} .ap-pila i{display:block;width:100%} .ap-eje{display:flex;margin-top:5px} .ap-eje span{flex:1;text-align:center;font-size:10.5px;color:var(--ink-faint);font-weight:600} .leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px} .leyenda .lg{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-soft)} .leyenda .lg i{width:10px;height:10px;border-radius:3px;flex:0 0 auto} /* Los cinco tonos de categoría, para lo que NO es tiempo: los canales de Analytics y los tramos de posición. Validados con el comprobador del skill de visualización — contraste 3:1 y separación para los tres tipos de daltonismo. No inventar un sexto: lo que sobre va a «Otros». */ :root{ --cat-1:#5B47DC; --cat-2:#C77400; --cat-3:#0E9AA7; --cat-4:#B8367C; --cat-5:#5C7A2E; } /* ════════ BLOQUE PLEGADO ════════════════════════════════════ Plegado no puede ser mudo: a la derecha del título va el número que se venía a ver, y muchas veces eso ya responde sin abrir. El triángulo se dibuja con bordes y no con un carácter, que sale cuadradito según la tipografía. */ .plegable{margin-bottom:12px} .plegable-cab{ width:100%; display:flex; align-items:center; gap:10px; cursor:pointer; padding:13px 16px; text-align:left; background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--r-sm); } .plegable-cab:hover{border-color:var(--accent)} .plegable-cab::before{ content:""; flex:0 0 auto; width:0; height:0; border-left:6px solid var(--ink-faint); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; transition:transform .15s; } .plegable-cab[aria-expanded="true"]::before{transform:rotate(90deg)} .plegable-titulo{flex:1;font-size:14.5px;font-weight:700} .plegable-pista{font-size:13px;color:var(--ink-faint);font-weight:600} .plegable-cuerpo{padding:14px 16px 4px} /* ════════ PÁGINAS QUE SUBEN Y BAJAN ═════════════════════════ */ .mov{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px} .mov-col h4{ font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; margin-bottom:8px; } .mov-col.sube h4{color:#0E7A41} .mov-col.baja h4{color:#8A1B12} .mov-fila{ display:flex;align-items:baseline;gap:10px;padding:8px 0; border-bottom:1px solid var(--line); } .mov-fila:last-child{border-bottom:none} .mov-fila .ruta{flex:1;min-width:0;font-size:13.5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mov-fila .dif{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums} .mov-col.sube .dif{color:#0E7A41} .mov-col.baja .dif{color:#8A1B12} .mov-fila .antes{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums} /* ════════ TABLA DE ARTÍCULOS CON DETALLE ════════════════════ */ .filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .filtros input,.filtros select{ padding:9px 12px; background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--r-sm); font-size:14.5px; outline:none; } .filtros input{flex:1 1 200px} .filtros input:focus,.filtros select:focus{border-color:var(--accent)} tr.art{cursor:pointer} tr.art:hover{background:var(--accent-tint)} .art-abrir{ background:none;border:none;padding:0;cursor:pointer;text-align:left; font:inherit;color:inherit;display:flex;align-items:center;gap:8px;width:100%; } .art-abrir::before{ content:""; flex:0 0 auto; width:0; height:0; border-left:5.5px solid var(--ink-faint); border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .15s; } .art-abrir[aria-expanded="true"]::before{transform:rotate(90deg)} .art-abrir b{font-weight:700} tr.art-detalle > td{background:var(--paper-2);padding:16px 18px} .art-detalle-caja{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .art-detalle h5{ font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-soft);margin-bottom:8px; } .art-kpis{display:flex;gap:16px;flex-wrap:wrap} .art-kpi{min-width:76px} .art-kpi .n{font-family:var(--display);font-size:20px;display:block} .art-kpi .et{font-size:11.5px;color:var(--ink-faint);font-weight:600} .art-busq{list-style:none;font-size:13.5px} .art-busq li{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)} .art-busq li:last-child{border-bottom:none} .art-busq .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .art-busq .p{font-variant-numeric:tabular-nums;color:var(--ink-faint);font-weight:600} /* ════════ TABLAS ════════════════════════════════════════════ Envueltas siempre en .tabla-caja: en el móvil se deslizan de lado en vez de romper el ancho de la página. */ .tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:420px} th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)} th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-soft);font-weight:700;white-space:nowrap} td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--paper-2)} .tenue{color:var(--ink-faint)} .corta{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ════════ ESTADOS Y AVISOS ══════════════════════════════════ */ .nota{ padding:12px 14px; border-radius:var(--r-sm); font-size:14px; border-left:4px solid var(--line-2); background:var(--paper-2); color:var(--ink-soft); margin-bottom:12px; } .nota.bien{border-left-color:var(--ok);background:var(--ok-tint);color:#0E5A31} .nota.ojo{border-left-color:var(--warn);background:var(--warn-tint);color:#6B4E00} .nota.mal{border-left-color:var(--bad);background:var(--bad-tint);color:#8A1B12} .nota strong{font-weight:800} .vacio{ padding:22px 18px; text-align:center; color:var(--ink-faint); font-size:14.5px; background:var(--paper-2); border:1.5px dashed var(--line-2); border-radius:var(--r-md); } .pastilla{ display:inline-block; padding:4px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700; background:var(--paper-2); color:var(--ink-soft); } .pastilla.si{background:var(--ok-tint);color:#0E7A41} .pastilla.no{background:var(--paper-2);color:var(--ink-faint)} /* ════════ MEDICIÓN ══════════════════════════════════════════ */ .eventos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px} .evento{ padding:12px 14px; border:1.5px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); } .evento.dormido{background:var(--paper-2);border-style:dashed} .evento h4{font-size:14px;font-weight:700;margin-bottom:2px} .evento .veces{font-family:var(--display);font-size:22px;font-weight:400} .evento.dormido .veces{color:var(--ink-faint)} .evento p{font-size:12.5px;color:var(--ink-faint);line-height:1.4;margin-top:3px} /* ════════ LO TUYO ═══════════════════════════════════════════ */ .tarea{ padding:14px 16px; border:1.5px solid var(--ink); border-radius:var(--r-sm); background:var(--paper); box-shadow:var(--pop-sm); margin-bottom:10px; } .tarea h4{font-size:15.5px;font-weight:800;margin-bottom:4px} .tarea p{font-size:14px;color:var(--ink-soft);line-height:1.5} .falta{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line); } .falta:last-child{border-bottom:none} .falta .n{font-family:var(--display);font-size:24px;color:var(--accent-ink)} .falta .de{font-size:13px;color:var(--ink-faint);font-weight:600} .falta .txt{flex:1 1 260px;min-width:0} .falta .txt strong{display:block;font-size:14.5px} .falta .txt span{font-size:13px;color:var(--ink-faint);line-height:1.45} .ficheros{list-style:none} .ficheros li{padding:9px 0;border-bottom:1px solid var(--line); display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .ficheros li:last-child{border-bottom:none} .ficheros a{font-weight:600;text-decoration:none} .ficheros a:hover{text-decoration:underline} .ficheros .tipo{font-size:11.5px;color:var(--ink-faint);font-weight:700; text-transform:uppercase;letter-spacing:.05em} .boton-fuera{ display:inline-block; margin-top:12px; padding:10px 16px; background:var(--accent); color:#fff; font-weight:700; font-size:14px; text-decoration:none; border:1.5px solid var(--ink); border-radius:var(--r-sm); box-shadow:var(--pop-sm); } .boton-fuera:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)} /* ════════ LÍNEA DE TIEMPO ═══════════════════════════════════ */ .linea{list-style:none;position:relative;padding-left:22px} .linea::before{content:"";position:absolute;left:5px;top:6px;bottom:6px; width:2px;background:var(--line-2)} .linea li{position:relative;padding:0 0 16px} .linea li::before{content:"";position:absolute;left:-21px;top:6px; width:10px;height:10px;border-radius:50%; background:var(--accent);border:2px solid var(--paper)} .linea .fecha{font-size:11.5px;font-weight:700;color:var(--ink-faint); text-transform:uppercase;letter-spacing:.05em} .linea .que{font-size:15px;font-weight:700;margin:1px 0 2px} .linea .detalle{font-size:13.5px;color:var(--ink-soft);line-height:1.5} .mas{ margin-top:6px; padding:9px 16px; cursor:pointer; font-size:14px; font-weight:700; background:var(--paper); color:var(--accent); border:1.5px solid var(--line-2); border-radius:var(--r-pill); } .mas:hover{border-color:var(--accent);background:var(--accent-tint)} /* ════════ EXTRAS ════════════════════════════════════════════ */ .extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px} .extra{ padding:13px 15px; border:1.5px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); } .extra h4{font-size:14.5px;font-weight:700;margin-bottom:3px} .extra p{font-size:13px;color:var(--ink-faint);line-height:1.45} /* ════════ PIE ═══════════════════════════════════════════════ Se llama `.pie-pagina` y no `.pie` porque `.pie` ya estaba cogido por la línea de explicación de cada tarjeta de cifra. Con el mismo nombre, el `text-align:center` y el relleno de 26px de aquí se colaban dentro de cada tarjeta: el texto salía centrado y con un hueco enorme encima. Es la misma colisión que en el panel del equipo obligó a prefijar las barras con `mb-`. */ .pie-pagina{ max-width:1000px; margin:0 auto; padding:26px 18px 40px; font-size:13px; color:var(--ink-faint); text-align:center; } /* ════════ TAPA DE SESIÓN CADUCADA ═══════════════════════════ */ .tapa{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(15,15,15,.55); padding:24px; } .tapa div{ background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--pop); padding:26px 28px; max-width:360px; text-align:center; } .tapa h3{font-family:var(--display);font-size:18px;font-weight:400;margin-bottom:8px} .tapa p{font-size:14px;color:var(--ink-soft);margin-bottom:16px} .tapa button{ padding:11px 20px; cursor:pointer; font-weight:700; background:var(--accent); color:#fff; border:1.5px solid var(--ink); border-radius:var(--r-sm); box-shadow:var(--pop-sm); } @media (max-width:520px){ .seccion > h2{font-size:18px} .cifra .n{font-size:26px} .lienzo{padding:18px 14px 6px} .alto-dentro,.atajos{padding-left:14px;padding-right:14px} } /* ════════ FACEBOOK E INSTAGRAM ══════════════════════════════ */ /* Una campaña por fila, con lo que se puede decir sin engañar: a cuánta gente distinta llega y cuánto cuesta. Sin CTR — son campañas de interacción y ese 11 % al lado del 3 % de la web se leería como «las redes van seis veces mejor que Google», que es falso. */ /* Las listas del bloque de IA. Hacen falta porque el reset de arriba —`*{margin:0;padding:0}`— deja los `