/* Renueva tu web · base común de las tres propuestas de portada */
:root{
  --cobalto:#2B3BFF; --tomate:#FF4A1C; --amarillo:#FFD400; --menta:#00B37E;
  --tinta:#111111; --papel:#F3F1EC; --blanco:#FFFFFF; --gris:#5E5B55;
  --display:"Anton",Impact,sans-serif; --font:"Familjen Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.65,0,.35,1); --ease-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--papel);color:var(--tinta);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* navegación: isla discreta, no barra de lado a lado */
.nav{position:absolute;top:18px;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:0 28px;pointer-events:none}
.nav>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:currentColor}
.logo .mark{width:30px;height:30px;flex:none}
.logo b{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.logo small{font-weight:600;font-size:14px;margin-right:-4px}
.menu{display:flex;align-items:center;gap:6px;background:var(--papel);color:var(--tinta);border:2px solid var(--tinta);padding:5px 5px 5px 16px}
.menu a{text-decoration:none;font-size:14px;font-weight:500;padding:8px 10px}
.menu a:hover{text-decoration:underline;text-underline-offset:4px}
.menu .go{background:var(--tinta);color:var(--papel);padding:9px 14px;font-weight:600}
.menu .go:hover{text-decoration:none;background:var(--cobalto)}
.mark{--hueco:var(--papel);--acento:var(--cobalto)}

/* botón principal */
.cta{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 10px 0 24px;font:600 17px/1 var(--font);text-decoration:none;border:2px solid currentColor;background:var(--cta-bg,var(--tinta));color:var(--cta-fg,var(--papel));transition:transform .2s var(--ease),background .5s var(--ease),color .5s var(--ease)}
.cta i{display:grid;place-items:center;width:38px;height:38px;background:var(--cta-fg,var(--papel));color:var(--cta-bg,var(--tinta));font-style:normal;transition:transform .35s var(--ease-out)}
.cta:hover i{transform:translateX(4px)}
.cta:active{transform:translateY(2px)}
.garantia{font-size:14px;margin-top:12px;opacity:.85}
.servicios{display:flex;flex-wrap:wrap;gap:6px 8px;margin:18px 0 22px}
.servicios span{font-size:13px;font-weight:600;padding:5px 10px;border:2px solid currentColor}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

.etiqueta-off{position:fixed;left:12px;bottom:12px;z-index:50;background:var(--tinta);color:var(--papel);font:600 13px/1 var(--font);padding:8px 10px;}

@media (max-width:820px){
  .nav{top:12px;padding:0 16px}
  .menu a:not(.go){display:none}
  .menu{padding:4px}
  .logo b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amarillo);color:var(--tinta);padding:10px 14px;font-weight:700;text-decoration:none;border:2px solid var(--tinta)}
.saltar:focus{top:12px}