/* Theme Name: MO&PC Uruguay Theme URI: https://mopc.cc Author: Kreiva Digital Author URI: https://kreivadigital.com Description: Tema a medida para MO&PC Business Solutions Uruguay. Portado uno a uno desde la propuesta estética aprobada: el CSS es el mismo, con los assets como archivos en vez de data URI. Version: 1.3.3 Requires at least: 6.5 Requires PHP: 8.0 License: Propietario — Kreiva Digital Text Domain: mopc */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/ubuntu-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/ubuntu-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/ubuntu-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/ubuntu-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/ubuntu-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/ubuntu-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/ubuntu-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/ubuntu-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(assets/fonts/archivo-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(assets/fonts/archivo-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(assets/fonts/archivo-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(assets/fonts/archivo-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(assets/fonts/archivo-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(assets/fonts/archivo-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== Tokens ===== Comprometido con un solo tema claro: es la maqueta de una web corporativa y tiene que verse igual sin importar el modo del sistema del que la mira. Por eso todos los colores se pintan explícitos, sin heredar nada del host. */ :root{ --paper:#FAFBFD; --surface:#FFFFFF; --ink:#101826; --muted:#5B6A85; --line:#DFE6F1; --navy:#0B1B3F; --navy-mid:#16336E; --signal:#0087FD; --signal-tint:#EAF3FE; --r:14px; --r-pill:999px; --shadow:0 1px 2px rgba(11,27,63,.04), 0 8px 24px -12px rgba(11,27,63,.18); --shadow-lift:0 2px 4px rgba(11,27,63,.05), 0 20px 44px -18px rgba(11,27,63,.28); } *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink); font:400 17px/1.65 'Ubuntu',system-ui,sans-serif;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;margin:0; letter-spacing:-.02em;text-wrap:balance;color:var(--navy)} p{margin:0} a{color:var(--signal)} img{max-width:100%;display:block} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .eyebrow{font:500 12px/1 'Ubuntu',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)} :focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:4px} /* ===== Barra superior de contacto ===== */ .topbar{background:var(--navy);color:#B9CBE4;font-size:13.5px;padding:10px 0} .topbar .wrap{display:flex;gap:30px;align-items:center;justify-content:flex-end;flex-wrap:wrap} .topbar a,.topbar span.item{display:inline-flex;align-items:center;gap:9px; color:#B9CBE4;text-decoration:none;transition:color .2s} .topbar a:hover,.topbar a:focus-visible{color:#fff} .topbar svg{width:15px;height:15px;fill:none;stroke:var(--signal);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;flex:none} /* ===== Header ===== */ .hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)} .hd .wrap{display:flex;align-items:center;gap:28px;height:74px;transition:height .25s ease} .hd.small .wrap{height:60px} .hd .logo{height:44px;transition:height .25s ease} /* El logo es un link al inicio: como flex no suma el hueco de línea de un inline. */ .hd .logo-link{display:flex;align-items:center} .hd.small .logo{height:36px} .hd nav{margin-left:auto;display:flex;gap:26px;align-items:center} .hd nav a:not(.btn){font:500 15px/1 'Ubuntu',sans-serif;color:var(--navy);text-decoration:none;padding:6px 0;position:relative} .hd nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--signal);border-radius:2px;transition:right .25s ease} .hd nav a:hover::after,.hd nav a:focus-visible::after{right:0} /* .hd nav a (0,1,2) le gana a .btn (0,1,0): sin esta regla el botón de «Trabajá con nosotros» se quedaba con el padding del link de menú y salía aplastado. Por lo mismo la regla de color del nav lleva :not(.btn) — si no, le pisaba el color:#fff de .btn-primary y el texto salía navy sobre el azul. */ .hd nav a.btn{padding:12px 28px;margin-left:6px} .hd nav a.btn::after{display:none} .btn{display:inline-block;border:0;cursor:pointer;border-radius:var(--r-pill); font:500 15px/1 'Ubuntu',sans-serif;padding:13px 26px;text-decoration:none;transition:.2s ease} .btn-primary{background:var(--signal);color:#fff;box-shadow:0 6px 18px -6px rgba(0,135,253,.6)} .btn-primary:hover,.btn-primary:focus-visible{background:#0072d8;color:#fff;transform:translateY(-1px)} .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)} .btn-light{background:#fff;color:var(--navy);box-shadow:0 6px 18px -6px rgba(11,27,63,.45)} .btn-light:hover,.btn-light:focus-visible{background:#F2F6FC;color:var(--navy);transform:translateY(-1px)} .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff} .hd-menu{display:none;background:none;border:0;padding:8px} .hd-menu span{display:block;width:24px;height:2px;background:var(--navy);border-radius:2px;margin:5px 0} /* ===== Hero ===== */ .hero{position:relative;overflow:hidden;background:var(--navy)} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} .hero-slide.on{opacity:1} .hero-slide img{width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,rgba(11,27,63,.94) 0%,rgba(11,27,63,.75) 42%,rgba(11,27,63,.18) 100%)} .hero-inner{position:relative;z-index:2;min-height:540px;display:flex;align-items:center} /* Guiño al faro del logo: un haz suave detrás del titular. */ .hero-inner::before{content:"";position:absolute;left:-10%;top:50%;width:70%;height:120%; transform:translateY(-50%);pointer-events:none; background:radial-gradient(60% 50% at 0% 50%,rgba(0,135,253,.32),transparent 70%)} .hero-copy{position:relative;max-width:640px;padding:96px 0} .hero h1{font-size:clamp(40px,6vw,68px);line-height:1.02;color:#fff;font-weight:700;margin:14px 0 20px} /* SEO: la portada tiene un solo h1, la línea de marca. Esta regla lo deja igual al bloque que antes contenía al eyebrow suelto (hereda la letra y el alto de renglón del hero). */ .hero .hero-marca{font:inherit;letter-spacing:inherit;text-wrap:inherit;color:inherit;margin:0} /* Los lemas del carrusel eran cuatro h1: ahora son párrafos con el mismo aspecto. */ .hero .hero-lema{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-.02em;text-wrap:balance; font-size:clamp(40px,6vw,68px);line-height:1.02;color:#fff;font-weight:700;margin:14px 0 20px} .hero p{font-size:19px;line-height:1.6;color:#C6D6EE;margin-bottom:34px} /* Los cuatro textos del hero van apilados en la misma celda: el hero mide siempre lo que el más largo y ya no salta al cambiar de diapositiva (en el teléfono saltaba hasta 60px). El inactivo se oculta con visibility, no con display:none, para que siga ocupando su lugar. Al cambiar, el viejo se va y recién después entra el nuevo: nunca se superponen. */ .hero-txts{display:grid} .hero-txt{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s} .hero-txt.on{opacity:1;visibility:visible;transition:opacity .45s ease .3s,visibility 0s} .hero .eyebrow{color:#7FC0FF} .dots{position:absolute;left:0;right:0;bottom:34px;z-index:3;display:flex;gap:9px;justify-content:center} .dots button{width:34px;height:4px;border:0;padding:0;border-radius:2px;cursor:pointer; background:rgba(255,255,255,.32);transition:.25s} .dots button.on{background:var(--signal);width:52px} /* ===== Secciones ===== */ section{padding:104px 0} .sec-head{max-width:680px;margin-bottom:52px} .sec-head h2{font-size:clamp(30px,4vw,44px);font-weight:600;margin:14px 0 16px} .sec-head p{color:var(--muted);font-size:18px} .lead{color:var(--muted);font-size:18px;max-width:70ch} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:34px 30px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)} .card .ico{width:56px;height:56px;border-radius:var(--r);background:var(--signal-tint); display:flex;align-items:center;justify-content:center;margin-bottom:20px} .card .ico img{width:32px;height:32px;object-fit:contain} .card h3{font-size:21px;font-weight:600;margin-bottom:10px} .card p{color:var(--muted);font-size:15.5px;line-height:1.6;margin-bottom:8px} /* ===== Plataforma sobre navy ===== */ .dark{background:var(--navy);color:#D5E1F2} .dark h2,.dark h3{color:#fff} .dark .sec-head p{color:#A9BCD8} .dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);box-shadow:none} .dark .card:hover{background:rgba(255,255,255,.075);transform:translateY(-4px);box-shadow:none} .dark .card p{color:#A9BCD8} .dark .card .ico{background:rgba(0,135,253,.18)} /* ===== Instagram ===== */ .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .ig-tile{aspect-ratio:1;border-radius:var(--r);background:linear-gradient(140deg,#E6EEF8,#D3E0EE); border:1px solid var(--line);display:flex;align-items:center;justify-content:center; font-size:12px;color:var(--muted);transition:transform .25s ease} .ig-tile:hover{transform:scale(1.03)} /* ===== Clientes ===== */ /* Muro de logos. Flex y no grid a propósito: son 19 marcas, que en 6 columnas dejan una sola en el último renglón. Con flex-wrap + justify-content:center el renglón incompleto queda centrado, para cualquier cantidad de logos. */ .logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 34px} /* max-width además de la altura: varios logos son muy apaisados (Santander 4,3:1, Prextamo, Pronto+) y con la altura sola se desbordaban de su celda y se pisaban entre sí. object-fit:contain los encaja sin deformarlos; el clamp evita medias queries aparte. Sin grayscale a propósito. A 12 de los 19 se les quitó el fondo, pero 7 son tinta BLANCA sobre color (Credisol, Cabal, Verde, Creditel, paigo, Crédito de la Casa, Prextamo): ahí la caja ES el logo y sacarla los deja invisibles. En gris esas 7 quedaban como bloques opacos —Cabal casi negro— entre las marcas sueltas. En color el muro se lee parejo. */ .logos img{transition:.25s;height:clamp(30px,5.2vw,44px);max-width:clamp(98px,17vw,152px);object-fit:contain} .logos img.caja{border-radius:5px} .logos img:hover{transform:translateY(-2px)} /* ===== Contacto ===== */ .contact{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start} .dato{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)} .dato .k{font:500 13px/1.6 'Ubuntu',sans-serif;letter-spacing:.08em;text-transform:uppercase; color:var(--signal);min-width:104px} .dato .v{color:var(--ink)} form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:34px;box-shadow:var(--shadow);display:grid;gap:16px} label{font:500 13px/1 'Ubuntu',sans-serif;color:var(--muted);display:block;margin-bottom:7px} input,textarea{width:100%;font:400 16px/1.5 'Ubuntu',sans-serif;color:var(--ink); background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:13px 15px} input:focus,textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px var(--signal-tint)} textarea{resize:vertical;min-height:120px} /* Formulario de contacto: la trampa para bots queda fuera de pantalla (no ocupa lugar), y los avisos de error y los campos a revisar en rojo. */ .form-contacto .mopc-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden} .form-contacto .ok.error{color:#C62828!important} .form-contacto [aria-invalid="true"]{border-color:#C62828} /* ===== Footer ===== */ footer{background:var(--navy);color:#9FB4D2;padding:64px 0 30px;font-size:15px} footer a{color:#C7D8F0;text-decoration:none} footer a:hover{color:#fff} .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.12)} /* Rótulos del pie: eran h4 y no son contenido, son etiquetas de menú. Mismo aspecto. */ .f-grid .f-titulo{font-family:'Archivo',system-ui,sans-serif;font-weight:700;text-wrap:balance;color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px} .f-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px} .f-social{display:flex;gap:12px;margin-top:22px} .f-social a{width:40px;height:40px;border-radius:var(--r-pill);background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center;transition:.2s} .f-social a:hover{background:var(--signal)} .f-social svg{width:19px;height:19px;fill:#C7D8F0} .f-social a:hover svg{fill:#fff} .f-bottom{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px} @media (max-width:980px){ /* Tarjetas: 2 columnas en tablet, como en la propuesta original. El 01/09 esta regla se perdió al pasar los logos a flex (el selector era compartido: .cards,.logos). */ .cards{grid-template-columns:repeat(2,1fr)} /* Logos en tablet y teléfono: la grilla de 2 columnas de la propuesta original, con su gap de 18px y su tope de 52px. El flex queda solo para escritorio. Son 19 logos: el último, impar, ocupa las dos columnas y queda centrado. */ .logos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:center;justify-items:center; /* Renglones de alto fijo y entero. Con alto automático, los logos que chocan contra el tope de ancho quedan con altos fraccionarios (44,78px…) y todo lo que viene abajo cae en media coordenada: el texto de Contacto se dibujaba distinto al del original. 52 + 18 de gap = 70px de paso; el original promediaba 69,4. */ grid-auto-rows:52px} /* Topes medidos sobre el original: sus 24 logos ocupaban hasta 48px de alto y 76% de la celda (mediana 36 × 89px). Los nuevos vienen recortados, sin el aire que traían los viejos, así que con 52px/100% salían un cuarto más grandes. 48px/66% es el centro de la franja que mejor reproduce esa caja. */ .logos img{height:auto;max-height:48px;max-width:66%;width:auto} /* El último, impar, se centra en las dos columnas pero con el tope de UNA: si no, Prextamo tomaba el doble de ancho y salía bastante más grande que el resto. */ .logos img:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 18px) / 2 * .66)} .ig-grid{grid-template-columns:repeat(3,1fr)} .contact,.f-grid{grid-template-columns:1fr;gap:36px} .hd nav{display:none} .hd-menu{display:block;margin-left:auto} section{padding:72px 0} .hero-inner{min-height:440px} } @media (max-width:560px){ /* Tarjetas: 1 columna en teléfono. Sin esto quedaban en 3, con la tercera fuera de pantalla. */ .cards{grid-template-columns:1fr} .ig-grid{grid-template-columns:repeat(2,1fr)} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ========================================================================================== Ajustes de mobile y firma — 23/08/2026 Van al final a propósito: con la misma especificidad gana la última regla, así que estos bloques pisan a los de arriba sin tener que tocarlos. ========================================================================================== */ /* El header es sticky y se comía el principio de cada sección al saltar desde el menú. */ html {scroll-padding-top:90px} /* ----- Firma ----- */ .f-firma {padding-top:16px;text-align:center;font-size:12.5px;color:rgba(199,216,240,.6)} .f-firma a {color:rgba(199,216,240,.85);border-bottom:1px solid rgba(255,255,255,.18)} .f-firma a:hover {color:#fff;border-bottom-color:var(--signal)} /* ----- La hamburguesa se convierte en X ----- */ .hd-menu span {transition:transform .25s ease,opacity .2s ease} .hd.abierto .hd-menu span:nth-child(1) {transform:translateY(7px) rotate(45deg)} .hd.abierto .hd-menu span:nth-child(2) {opacity:0} .hd.abierto .hd-menu span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)} @media (max-width:980px) { /* El topbar tenía justify-content:flex-end y gap de 30px sin ningún ajuste para pantallas chicas: los tres datos envolvían contra el margen derecho y quedaba escalonado. La dirección se va acá y no en un breakpoint más chico. Los tres datos juntos necesitan ~670px para entrar en una línea, así que esconderla recién en 560 dejaba una banda muerta entre 561 y 980 donde quedaba una línea larga arriba y dos cortas abajo — se leía como accidental. 980 además es el ancho donde el header ya se vuelve compacto y aparece la hamburguesa: que el topbar se compacte en el mismo punto se lee como una decisión. No se pierde: la dirección sigue en el pie del sitio. */ .topbar .wrap {justify-content:center;gap:8px 22px} .topbar .item-dir {display:none} /* ----- Menú desplegable ----- El botón estaba pero no abría nada: el nav quedaba en display:none y en el celular no había forma de navegar. Ahora el mismo