/* cerrajero.uy, header y hero copiados de pintor.uy (22/10/2026): barra superior que se va con el scroll, header pegado
   arriba que arranca transparente sobre el hero (logo con contorno blanco) y se vuelve blanco al bajar, menú en Oswald 700
   mayúsculas con raya roja y desplegables, hero con foto y velo oscuro de abajo hacia arriba, H1 en Oswald y botones
   rectangulares de radio 8. Paleta de cerrajero.uy en el lugar de la de pintor: azul marino #033457 (su gris oscuro;
   hover y lo más oscuro #022238) y rojo #DA1B35 (su rojo; hover #B3152B). Va después de style.css. Sin blur. */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/oswald-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: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/oswald-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: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url("../fonts/open-sans-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: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url("../fonts/open-sans-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; }
:root{
  --cab-f-titulos:Oswald,"Arial Narrow",sans-serif;
  --cab-navy:#033457;--cab-navy-2:#022238;--cab-rojo:#DA1B35;--cab-rojo-2:#B3152B;
  --cab-texto:#181818;--cab-texto-2:#545454;--cab-borde:#E5E5E5;--cab-fondo-2:#F5F5F5;--cab-radio:8px;
  --cab-fs-xs:.8125rem;
  --cab-fs-sm:clamp(.875rem,.85rem + .1vw,.9375rem);
  --cab-fs-lg:clamp(1.0625rem,.99rem + .3vw,1.25rem);
  --cab-fs-h3:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --cab-fs-h1:clamp(2rem,1.55rem + 1.9vw,3.125rem);
  --cab-fs-h1-home:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);
  --cab-fs-btn:clamp(1rem,.95rem + .2vw,1.125rem);
  --alto-header:64px;
}
@media (min-width:1100px){:root{--alto-header:80px}}
html{scroll-padding-top:80px}
/* El header ya no es fijo: va en el flujo y se pega arriba (sticky), sin el padding que le dejaba lugar */
body,body.home-page{padding-top:0}

/* Botones: rectángulo de radio 8 px; el de WhatsApp va en rojo */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1.3em;border-radius:var(--cab-radio);font-family:var(--cab-f-titulos);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:var(--cab-fs-btn);text-decoration:none;border:2px solid transparent;line-height:1.2;cursor:pointer;transition:background-color .2s,color .2s}
.boton i{font-size:1.15em;line-height:1}
.boton--wa{background:var(--cab-rojo);color:#fff}
.boton--wa:hover{background:var(--cab-rojo-2);color:#fff}
.boton--linea{background:#fff;color:var(--cab-navy);border-color:var(--cab-navy)}
.boton--linea:hover{background:var(--cab-fondo-2)}
.boton--grande{font-size:calc(var(--cab-fs-btn) * 1.1);padding:.85em 1.5em}
.boton--bloque{width:100%}

/* Barra superior: azul marino de la marca, solo desde 860 px (en celular no va); se va con el scroll */
.topbar{display:none;background:var(--cab-navy);color:#fff;font-size:var(--cab-fs-xs);font-weight:600;position:relative;z-index:1001}
@media (min-width:860px){.topbar{display:block}}
.topbar__fila{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px}
.topbar i{color:#fff;opacity:.85;margin-right:5px;font-size:1.1em}
.topbar__zona,.topbar__horario{color:#E4E4E4}
.topbar__horario{display:none}
.topbar__zona{display:inline-flex;align-items:center}
@media (min-width:1180px){.topbar__horario{display:inline-flex;align-items:center}}
.topbar__acciones{display:flex;align-items:center;gap:22px}
.topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;letter-spacing:.02em}
.topbar a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Header: blanco y sólido (sin blur); sobre el hero arranca transparente */
.cabecera{position:sticky;top:0;z-index:1000;background:#fff;transition:background-color .25s,box-shadow .25s}
.cabecera.is-scrolled,.cabecera.menu-abierto{box-shadow:0 6px 20px rgba(24,24,24,.08)}
.cabecera__fila{display:flex;align-items:center;gap:20px;min-height:64px}
@media (min-width:1100px){.cabecera__fila{min-height:80px}}
.logo{display:block;text-decoration:none;flex:0 0 auto}
.logo__img{width:auto;height:56px}
@media (min-width:1100px){.logo__img{height:70px}}
.logo__img--claro{display:none}

/* Menú de escritorio: Oswald en mayúsculas, raya roja abajo en hover y en la sección activa */
.nav{display:none;flex:1;align-self:stretch}
.nav__lista{display:flex;justify-content:center;align-items:stretch;gap:2px;list-style:none;margin:0;padding:0;height:100%}
.nav__item{position:relative;display:flex}
.nav__link{position:relative;display:flex;align-items:center;padding:0 14px;text-decoration:none;color:var(--cab-texto);font-family:var(--cab-f-titulos);font-weight:700;font-size:var(--cab-fs-btn);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:18px;height:3px;border-radius:2px;background:var(--cab-rojo);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav__link:hover,.nav__link[aria-current]{color:var(--cab-navy)}
.nav__link:hover::after,.nav__link[aria-current]::after,.nav__item--sub:focus-within>.nav__link::after{transform:scaleX(1)}
.nav__panel{position:absolute;top:100%;left:50%;min-width:250px;padding-top:0;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav__item--sub:hover .nav__panel,.nav__item--sub:focus-within .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__sub{list-style:none;margin:0;padding:10px;background:#fff;border-top:3px solid var(--cab-rojo);border-radius:0 0 var(--cab-radio) var(--cab-radio);box-shadow:0 18px 40px rgba(24,24,24,.16)}
.nav__sub a{display:block;padding:9px 12px;border-radius:6px;font-size:var(--cab-fs-sm);font-weight:600;color:var(--cab-texto);text-decoration:none;border-left:3px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.nav__sub a:hover,.nav__sub a[aria-current]{background:var(--cab-fondo-2);color:var(--cab-navy);border-left-color:var(--cab-rojo)}

.cabecera__acciones{margin-left:auto;display:flex;align-items:center;gap:6px}
.cabecera__cta{padding:.6em 1.1em;white-space:nowrap;flex-shrink:0}
@media (min-width:1100px) and (max-width:1279px){.nav__link{padding:0 10px}.nav__link::after{left:10px;right:10px}}
.cabecera__cta span{display:none}
@media (min-width:600px) and (max-width:1099px),(min-width:1280px){.cabecera__cta span{display:inline}}

/* Hamburguesa que se vuelve X */
.burger{width:46px;height:46px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;padding:0;border-radius:var(--cab-radio)}
.burger span{display:block;width:24px;height:2.5px;background:var(--cab-texto);border-radius:2px;transition:transform .25s,opacity .2s,background-color .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
@media (min-width:1100px){.nav{display:block}.burger{display:none}}

/* Menú de celular: panel blanco a pantalla completa bajo el header */
.menu-movil[hidden]{display:none}
.menu-movil{background:#fff;border-top:1px solid var(--cab-borde);padding:8px 0 28px;max-height:calc(100dvh - var(--alto-header));overflow:auto;overscroll-behavior:contain}
.menu-movil__lista{list-style:none;margin:0 0 20px;padding:0}
.menu-movil__lista>li{border-bottom:1px solid var(--cab-borde)}
.menu-movil__lista>li>a,.menu-movil__lista summary{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;font-family:var(--cab-f-titulos);font-weight:700;font-size:var(--cab-fs-h3);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:var(--cab-texto);cursor:pointer;list-style:none}
.menu-movil__lista summary::-webkit-details-marker{display:none}
.menu-movil__lista>li>a[aria-current],.menu-movil__lista details[open]>summary{color:var(--cab-navy)}
.menu-movil__flecha{font-size:.7em;color:var(--cab-rojo);transform:rotate(90deg);transition:transform .2s}
.menu-movil__lista details[open] .menu-movil__flecha{transform:rotate(-90deg)}
.menu-movil__sub{list-style:none;margin:0 0 12px;padding:4px 0 4px 14px;border-left:3px solid var(--cab-rojo)}
.menu-movil__sub a{display:block;padding:9px 4px;font-weight:600;color:var(--cab-texto-2);text-decoration:none}
.menu-movil__sub a[aria-current]{color:var(--cab-navy)}
.menu-movil__acciones{display:grid;gap:10px}
.menu-movil__zona{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:var(--cab-fs-sm);color:var(--cab-texto-2)}
.menu-movil__zona i{color:var(--cab-rojo)}

/* Sobre el hero: transparente con textos blancos hasta que el header llega arriba o se abre el menú */
.cabecera--sobre-hero{margin-bottom:calc(-1 * var(--alto-header))}
.cabecera--sobre-hero~main>.portada:first-child,
.cabecera--sobre-hero~main>.page-intro:first-child{padding-top:calc(28px + var(--alto-header))}
.cabecera--sobre-hero~main>.portada--home:first-child{padding-top:calc(52px + var(--alto-header))}
.cabecera--sobre-hero:not(.is-scrolled):not(.menu-abierto){background:transparent}
.cabecera--sobre-hero:not(.is-scrolled):not(.menu-abierto) .logo__img{display:none}
.cabecera--sobre-hero:not(.is-scrolled):not(.menu-abierto) .logo__img--claro{display:block}
.cabecera--sobre-hero:not(.is-scrolled):not(.menu-abierto) .nav__link{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.cabecera--sobre-hero:not(.is-scrolled):not(.menu-abierto) .burger span{background:#fff}

/* Hero: azul marino con texto blanco */
.portada{background:var(--cab-navy);color:#fff;padding:28px 0 40px}
.portada--home{padding:52px 0 60px;background:linear-gradient(180deg,var(--cab-navy) 0,var(--cab-navy-2) 100%)}
.portada__titulo{font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.015em !important;color:#fff;font-size:var(--cab-fs-h1);line-height:1.05;margin:.15em 0 .35em;text-wrap:balance}
.portada--home .portada__titulo{font-size:var(--cab-fs-h1-home)}
.portada__titulo em{font-style:normal;color:inherit}
.portada__lead{font-size:var(--cab-fs-lg);line-height:1.65;color:#EBEBEB;max-width:760px;margin:0 0 1em}
.portada__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.portada .boton--linea{background:transparent;color:#fff;border-color:#fff}
.portada .boton--linea:hover{background:#fff;color:var(--cab-navy)}

/* Hero con foto de fondo; capa azul marino casi negra encima para que el texto blanco se lea */
.portada--foto{position:relative;overflow:hidden;isolation:isolate;background:#021B2E}
.portada__fondo{position:absolute;inset:0;z-index:-2}
.portada__fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (min-width:1024px){.portada__fondo img{object-position:50% 40%}}
.portada--foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(2,27,46,.92) 0%,rgba(2,27,46,.7) 40%,rgba(2,27,46,.35) 80%,rgba(2,27,46,.3) 100%)}
.portada--foto .portada__contenido{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.portada--foto .boton{text-shadow:none}

.portada__migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;font-size:var(--cab-fs-xs);color:#D0D0D0}
.portada__migas li+li::before{content:"›";margin-right:6px}
.portada__migas a{color:#fff;text-decoration:none}
.portada__migas a:hover{text-decoration:underline}

/* Cabeceras de las páginas internas (precios, servicios, zonas, guías, contacto…): el mismo hero, sin foto */
.page-intro{background:linear-gradient(180deg,var(--cab-navy) 0,var(--cab-navy-2) 100%);color:#fff;padding:28px 0 40px}
.page-intro__inner{max-width:1200px}
.page-intro__eyebrow{color:#D0D0D0;font-size:var(--cab-fs-xs);letter-spacing:.08em;margin:0 0 12px}
.page-intro__title{font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.015em !important;color:#fff;font-size:var(--cab-fs-h1);line-height:1.05;margin:.15em 0 .35em;text-wrap:balance}
.page-intro__desc{font-size:var(--cab-fs-lg);line-height:1.65;color:#EBEBEB;max-width:760px}

/* Celular: botones del hero uno abajo del otro y de ancho completo; el header queda solo con logo y menú */
@media (max-width:767px){
  .portada__cta{flex-direction:column;align-items:stretch}
  .portada__cta .boton{width:100%}
  /* H1 del hero en 6,8vw como pintor.uy: los títulos largos de las landings entran en 2 líneas a 375 px */
  .portada__titulo,.portada--home .portada__titulo,.page-intro__title,.ar-head__title{font-size:6.8vw}
  .cabecera__cta{display:none}
}

/* Footer azul marino: el logo con contorno blanco, más grande para que se lea MONTEVIDEO */
.footer__logo img{width:auto;height:80px}

/* Cabecera de los artículos: el mismo hero (azul marino, migas adentro, H1 en Oswald), alineada a la izquierda */
.cabecera--sobre-hero~main>.ar-article:first-child>.ar-head{padding-top:calc(28px + var(--alto-header))}
.ar-head{background:linear-gradient(180deg,var(--cab-navy) 0,var(--cab-navy-2) 100%);padding:28px 0 40px}
.ar-head__inner{max-width:1200px}
.ar-head__title{font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.015em !important;color:#fff;font-size:var(--cab-fs-h1);line-height:1.05;margin:.15em 0 .35em;max-width:960px;text-wrap:balance}
.ar-head__lead{font-size:var(--cab-fs-lg);line-height:1.65;color:#EBEBEB;max-width:760px}
.ar-head__meta{color:#D0D0D0}
.ar-head .portada__migas li:last-child{min-width:0}
@media (max-width:767px){
  .ar-head .portada__migas ol{flex-wrap:nowrap;overflow:hidden}
  .ar-head .portada__migas li:last-child span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Botones dentro de la cabecera de contacto: los mismos del hero (rectángulo radio 8, Oswald; el primero en rojo y el
   segundo con contorno blanco). El verde de WhatsApp queda solo en la burbuja flotante. */
.page-intro .btn{border-radius:var(--cab-radio);font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:calc(var(--cab-fs-btn) * 1.1);padding:.85em 1.5em;border:2px solid transparent;box-shadow:none;line-height:1.2}
.page-intro .btn--primary{background:var(--cab-rojo);color:#fff}
.page-intro .btn--primary:hover{background:var(--cab-rojo-2);color:#fff;transform:none}
.page-intro .btn--whatsapp{background:transparent;color:#fff;border-color:#fff}
.page-intro .btn--whatsapp:hover{background:#fff;color:var(--cab-navy);transform:none}
@media (max-width:767px){.page-intro .btn{width:100%;justify-content:center}}

/* Íconos de los botones y del WhatsApp flotante: Font Awesome Free 6.5.2 (SVG oficiales en public/images/iconos/fa,
   licencia CC BY 4.0) en lugar de los de Remix Icon. Se cambian por CSS los mismos <i class="ri-…">: el ícono es una
   máscara del SVG pintada con el color del texto, así hereda el color de cada botón. */
.ri-whatsapp-line,.ri-phone-line,.ri-arrow-right-line,.ri-arrow-left-line,.ri-send-plane-line,.ri-send-plane-fill{display:inline-block;width:1em;height:1em;line-height:1;vertical-align:-.125em;flex:0 0 auto}
.ri-whatsapp-line::before,.ri-phone-line::before,.ri-arrow-right-line::before,.ri-arrow-left-line::before,.ri-send-plane-line::before,.ri-send-plane-fill::before{content:"" !important;display:block;width:100%;height:100%;background-color:currentColor;-webkit-mask:var(--fa) center/contain no-repeat;mask:var(--fa) center/contain no-repeat}
.ri-whatsapp-line{--fa:url("../images/iconos/fa/whatsapp.svg");width:1.12em;height:1.12em;vertical-align:-.18em}
.ri-phone-line{--fa:url("../images/iconos/fa/phone.svg");width:.9em;height:.9em}
.ri-arrow-right-line{--fa:url("../images/iconos/fa/arrow-right.svg")}
.ri-arrow-left-line{--fa:url("../images/iconos/fa/arrow-left.svg")}
.ri-send-plane-line,.ri-send-plane-fill{--fa:url("../images/iconos/fa/paper-plane.svg")}
.whatsapp-float i{font-size:32px}

/* cerrajeromaldonado.com: antetítulo del hero (servicio + localidad) y enlaces a las versiones en inglés y portugués */
.portada__idiomas{margin:-6px 0 12px;font-size:var(--cab-fs-xs);color:#D0D0D0}
.portada__idiomas a{color:#fff;text-decoration:none}
.portada__idiomas a:hover{text-decoration:underline}
.portada__antetitulo{font-family:var(--cab-f-titulos);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:#fff;opacity:.9;margin:0}
/* Versiones en inglés y portugués: el menú son los tres idiomas y se ve también en celular */
.cabecera--idiomas .nav{display:block}
@media (max-width:767px){.cabecera--idiomas .nav__lista{justify-content:flex-end}.cabecera--idiomas .nav__link{padding:0 4px;font-size:.74rem;letter-spacing:0 !important}.cabecera--idiomas .cabecera__cta{display:none}.cabecera--idiomas .logo__img{height:40px}}