/* ═══════════════════════════════════════════════════════════
Online Movers & Storage · 2026 — hoja principal
Diseño: Metropolis. El anterior queda en legacy.css.
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
PROPUESTA A · METROPOLIS
Adaptación del lenguaje visual de Metropolis Moving al contenido,
colores y funciones de Online Movers & Storage.
Qué cambia frente al diseño actual:
· Display condensada en mayúsculas, titulares gigantes bicolor
· El dorado de marca pasa de acento discreto a color protagonista
· El sitio "flota": lienzo con márgenes y esquinas muy redondeadas
· Grid tipo bento en servicios, con una tarjeta CTA dentro
· Marquee de llamada a la acción y logotipo gigante en el pie
Qué se conserva: contenido, colores de marca, formulario y pricing.
═══════════════════════════════════════════════════════════════ */
:root{
/* Paleta de marca, sin cambios — solo cambia el reparto de protagonismo */
--navy:#0A1C3A;
--navy-2:#12294D;
--blue:#2656A6;
--blue-2:#3B82F6;
/* El acento protagonista: antes dorado (Metropolis), ahora el azul de marca */
--acc:#2656A6; /* azul sólido: botones y áreas con texto blanco */
--acc-2:#3B82F6; /* azul brillante: destacados y bandas grandes */
--acc-3:#1D4ED8; /* azul profundo: estados hover */
--gold:#FFC53D; /* dorado: SOLO estrellas y calificaciones */
--acc-4:#8AB6FF; /* azul claro: texto/numeros sobre navy */
--pink:#E5228F; /* rosa de marca: acento puntual */
--ink:#0A1C3A;
--body:#43536E;
--mut:#7A88A0;
--paper:#FFFFFF;
--canvas:#E8EBF0; /* el gris sobre el que flota el sitio */
--soft:#EFF4FC;
--line:#DCE4F1;
/* Titulares: Inter en peso 800. Antes era Anton, que solo tiene un
peso y no permitia graduar jerarquia dentro de un mismo bloque. */
--ff-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--ff-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--r:22px;
--r-lg:30px;
--shadow:0 2px 4px rgba(10,28,58,.04), 0 18px 44px -22px rgba(10,28,58,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--canvas);
color:var(--body);
font-family:var(--ff-body);
font-size:16px;
line-height:1.62;
-webkit-font-smoothing:antialiased;
}
/* El lienzo blanco flotante — firma del diseño Metropolis */
.canvas{
max-width:1360px;
margin:0 auto;
background:var(--paper);
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:0 4px 40px -18px rgba(10,28,58,.28);
}
.container{max-width:1180px;margin:0 auto;padding:0 30px}
/* ── Tipografía: el cambio más visible ── */
h1,h2,h3,.display{
font-family:var(--ff-display);
font-weight:800;
color:var(--ink);
text-transform:uppercase;
letter-spacing:-.005em;
line-height:1.02;
margin:0;
text-wrap:balance;
}
h1{font-size:clamp(42px,6.1vw,76px)}
h2{font-size:clamp(30px,4.6vw,52px)}
h3{font-size:clamp(20px,2.4vw,27px)}
/* La segunda mitad del titular va en dorado — recurso constante de Metropolis */
.hl{color:var(--acc-2)}
p{margin:0}
.eyebrow{
display:inline-block;font-family:var(--ff-body);
font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--blue);margin-bottom:14px;
}
.lede{font-size:17.5px;line-height:1.6;max-width:64ch;color:var(--body)}
.center{text-align:center}
.sec{padding:96px 0}
.sec--tight{padding:64px 0}
/* ── Botones ── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
height:54px;padding:0 30px;border-radius:12px;border:0;cursor:pointer;
font-family:var(--ff-body);font-size:15.5px;font-weight:800;
text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;
white-space:nowrap;
}
.btn--acc{background:var(--acc);color:#fff;box-shadow:0 8px 20px -10px rgba(38,86,166,.85)}
.btn--acc:hover{background:var(--acc-3);transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--navy)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-2);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--sm{height:44px;padding:0 20px;font-size:14px}
/* ═══════════ HEADER ═══════════ */
.hd{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:26px;height:82px}
.hd__logo{display:flex;flex-direction:column;gap:2px;text-decoration:none;flex:0 0 auto}
.hd__logo img{height:42px;width:auto;max-width:205px;object-fit:contain}
.hd__logo span{
font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
color:var(--mut);padding-left:2px;
}
.hd__nav{display:flex;gap:4px;margin-left:auto}
.hd__nav a{
padding:10px 14px;border-radius:9px;text-decoration:none;
font-size:14.5px;font-weight:700;color:var(--ink);transition:background .18s,color .18s;
}
.hd__nav a:hover{background:var(--soft);color:var(--blue)}
.hd__tel{
display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
font-weight:800;font-size:16px;flex:0 0 auto;
}
.hd__tel svg{color:var(--acc-2)}
.hd__tel small{display:block;font-size:11px;font-weight:600;color:var(--mut)}
.hd__lang{display:flex;gap:3px;background:var(--soft);border-radius:999px;padding:4px;flex:0 0 auto}
.hd__lang a{
display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
text-decoration:none;font-size:12.5px;font-weight:800;color:var(--mut);transition:all .2s;
}
.hd__lang a.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(10,28,58,.14)}
.hd__lang svg{width:19px;height:19px;border-radius:50%}
.hd__burger{display:none;width:46px;height:46px;border:0;background:var(--soft);border-radius:11px;
cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.hd__burger span{width:20px;height:2.4px;background:var(--ink);border-radius:2px}
/* ═══════════ HERO ═══════════ */
.hero{position:relative;padding:16px 16px 0}
.hero__grid{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:stretch}
.hero__media{
position:relative;border-radius:var(--r);overflow:hidden;min-height:600px;
background:var(--navy);
}
.hero__media video,.hero__media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__veil{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,28,58,.30) 0%,rgba(10,28,58,.06) 40%,rgba(10,28,58,.88) 100%);
}
/* Swoosh decorativo — Metropolis lo usa como firma gráfica */
.hero__swoosh{position:absolute;top:-30px;left:-40px;width:270px;opacity:.5;pointer-events:none}
.hero__copy{position:absolute;left:0;right:0;bottom:0;padding:0 40px 38px;z-index:2}
.hero__copy h1{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero__copy p{
color:rgba(255,255,255,.9);font-size:15.5px;max-width:60ch;margin-top:16px;line-height:1.55;
}
.hero__copy p a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--acc-4);text-underline-offset:3px;text-decoration-thickness:2px}
.hero__stars{
display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 16px;
color:#fff;font-size:13.5px;font-weight:700;
}
.hero__stars i{color:var(--gold);font-style:normal;letter-spacing:1px}
/* Tarjeta del formulario, flotando a la derecha */
.hero__form{
background:var(--paper);border-radius:var(--r);padding:26px 24px;
box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.hero__form-t{
font-family:var(--ff-display);font-size:27px;text-transform:uppercase;
color:var(--ink);text-align:center;margin-bottom:4px;line-height:1;
}
.hero__form-s{text-align:center;font-size:13px;color:var(--mut);margin-bottom:16px}
/* ═══════════ BANDA DE CIFRAS + RESEÑAS ═══════════ */
.band{padding:18px 16px 0}
.band__grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}
.band__dark{
background:var(--navy);border-radius:var(--r);padding:34px 38px;
display:flex;align-items:center;justify-content:center;gap:38px;
position:relative;overflow:hidden;
}
.band__dark::after{
content:"";position:absolute;width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle,rgba(59,130,246,.20),transparent 68%);
top:-110px;right:-70px;
}
.band__ph{
width:112px;height:112px;border-radius:50%;overflow:hidden;flex:0 0 auto;
border:3px solid rgba(255,255,255,.14);position:relative;
}
.band__ph img{width:100%;height:100%;object-fit:cover}
.band__ph i{
position:absolute;top:-6px;right:-6px;width:34px;height:34px;border-radius:50%;
background:var(--acc-2);display:flex;align-items:center;justify-content:center;
color:#fff;font-style:normal;font-weight:900;font-size:17px;
}
.band__stats{display:flex;gap:44px;flex-wrap:wrap}
.band__stat b{
display:block;font-family:var(--ff-display);font-size:44px;color:#fff;line-height:1;
font-variant-numeric:tabular-nums;font-weight:800;
}
.band__stat span{display:block;font-size:13px;color:#A9BBD6;margin-top:8px;max-width:20ch;line-height:1.4}
.band__tags{display:flex;gap:8px;margin-top:12px}
.band__tags i{
font-style:normal;font-size:11.5px;font-weight:800;color:#fff;
border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 13px;
}
.band__rev{
background:var(--soft);border-radius:var(--r);padding:28px 30px;
display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.band__rev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.band__g{font-size:30px;font-weight:800;letter-spacing:-.04em}
.band__g i{font-style:normal}
.band__score{font-family:var(--ff-display);font-size:52px;color:var(--ink);line-height:1}
.band__score sup{font-size:22px;color:var(--gold);margin-left:2px}
.band__rev p{font-size:13.5px;color:var(--body);margin-top:6px;max-width:26ch}
/* ═══════════ ACREDITACIONES (era "as featured in") ═══════════ */
.creds{padding:44px 0 8px}
.creds__in{display:flex;align-items:center;gap:38px;flex-wrap:wrap;justify-content:center}
.creds__lb{
font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
}
.creds__it{display:flex;align-items:center;gap:9px;filter:grayscale(1);opacity:.62;transition:all .25s}
.creds__it:hover{filter:none;opacity:1}
.creds__it img{height:34px;width:auto}
.creds__it b{font-size:17px;font-weight:800;color:var(--ink)}
.creds__it span{font-size:12.5px;color:var(--mut);font-weight:700}
/* ═══════════ BENTO DE SERVICIOS ═══════════ */
.bento{
display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:236px;gap:16px;margin-top:44px;
}
.bt{
position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;
display:block;background:var(--navy);
}
.bt img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.bt:hover img{transform:scale(1.07)}
.bt::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 34%,rgba(10,28,58,.86) 100%);
}
.bt__lb{
position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2;
}
.bt__lb h3{color:#fff;font-size:21px}
.bt__lb p{
color:rgba(255,255,255,.82);font-size:13.5px;margin-top:7px;line-height:1.45;
max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin .45s;
}
.bt:hover .bt__lb p{max-height:110px;opacity:1}
.bt__tag{
position:absolute;top:16px;left:16px;z-index:2;
background:rgba(255,255,255,.94);border-radius:999px;padding:6px 14px;
font-size:12px;font-weight:800;color:var(--navy);
}
.bt__arrow{
position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
color:var(--navy);transition:background .25s,transform .25s;
}
.bt:hover .bt__arrow{background:var(--acc-2);color:#fff;transform:rotate(45deg)}
.bt--tall{grid-row:span 2}
.bt--wide{grid-column:1 / -1;grid-auto-rows:auto}
.bt--cta{
background:linear-gradient(120deg,var(--acc) 0%,var(--acc-2) 100%);display:flex;align-items:center;justify-content:space-between;
gap:30px;padding:34px 40px;position:relative;overflow:hidden;min-height:150px;flex-wrap:wrap;
}
.bt--cta::after{display:none}
.bt--cta h3{color:#fff;font-size:25px;position:relative;z-index:2}
.bt--cta p{color:rgba(255,255,255,.86);font-size:13.5px;margin-top:9px;position:relative;z-index:2}
.bt--cta svg.deco{position:absolute;right:-30px;bottom:-30px;width:190px;opacity:.20;color:#fff}
/* ═══════════ SECCIÓN DESTACADA (larga distancia) ═══════════ */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feat__list{display:flex;flex-direction:column;gap:12px;margin:26px 0 30px}
.feat__list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;list-style:none}
.feat__list .tk{
flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--acc-2);
display:flex;align-items:center;justify-content:center;color:#fff;margin-top:1px;
}
.feat__list b{color:var(--ink);font-weight:800}
.feat__media{position:relative}
.feat__media img{width:100%;border-radius:var(--r);display:block}
.feat__badge{
position:absolute;top:-18px;left:-18px;width:118px;height:118px;border-radius:50%;
background:var(--navy);color:#fff;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;padding:12px;
border:5px solid var(--paper);
}
.feat__badge b{font-family:var(--ff-display);font-size:32px;line-height:1;color:var(--acc-4);font-weight:800}
.feat__badge span{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-top:5px;line-height:1.25}
/* ═══════════ RESEÑAS CON PESTAÑAS ═══════════ */
.revs{background:var(--soft);border-radius:var(--r-lg);padding:52px 46px;margin:0 16px}
.revs__top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.revs__tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.revs__tab{
background:none;border:0;cursor:pointer;padding:0 0 13px;font-family:var(--ff-body);
font-size:15px;font-weight:800;color:var(--mut);position:relative;transition:color .2s;
}
.revs__tab.on{color:var(--ink)}
.revs__tab.on::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
background:var(--acc-2);border-radius:3px 3px 0 0;
}
.revs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rv{background:var(--paper);border-radius:16px;padding:22px;border:1px solid var(--line)}
.rv__hd{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.rv__av{
width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
position:relative;flex:0 0 auto;
}
.rv__av i{
position:absolute;bottom:-3px;right:-3px;background:var(--gold);color:var(--navy);
font-style:normal;font-size:9.5px;font-weight:900;border-radius:999px;padding:2px 5px;
border:2px solid var(--paper);
}
.rv__nm{font-weight:800;color:var(--ink);font-size:14.5px}
.rv__dt{font-size:12px;color:var(--mut)}
.rv p{font-size:14px;line-height:1.6}
.revs__nav{display:flex;gap:9px}
.revs__nav button{
width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);
cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all .2s;
}
.revs__nav button:hover{background:var(--acc-2);border-color:var(--acc-2);color:#fff}
/* ═══════════ FAQ NUMERADO ═══════════ */
.faq{max-width:900px;margin:0 auto}
.faq__it{border-bottom:1px solid var(--line)}
.faq__it summary{
display:flex;align-items:center;gap:18px;padding:24px 4px;cursor:pointer;list-style:none;
font-size:16.5px;font-weight:700;color:var(--ink);
}
.faq__it summary::-webkit-details-marker{display:none}
.faq__n{
font-family:var(--ff-display);font-size:17px;color:var(--mut);flex:0 0 auto;min-width:30px;
}
.faq__pl{
margin-left:auto;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--acc-2);
color:#fff;display:flex;align-items:center;justify-content:center;
font-size:20px;font-weight:700;transition:transform .3s;line-height:1;
}
.faq__it[open] .faq__pl{transform:rotate(45deg)}
.faq__a{padding:0 4px 26px 66px;font-size:15.5px;color:var(--body);line-height:1.65}
/* ═══════════ MARQUEE CTA ═══════════ */
.mq{background:linear-gradient(90deg,var(--acc) 0%,var(--acc-2) 50%,var(--acc) 100%);overflow:hidden;padding:26px 0}
.mq__tr{display:flex;gap:0;width:max-content;animation:mqRun 26s linear infinite}
.mq a{
display:inline-flex;align-items:center;gap:30px;padding-right:30px;text-decoration:none;
font-family:var(--ff-display);font-size:44px;color:#fff;text-transform:uppercase;
white-space:nowrap;transition:opacity .2s;
}
.mq a:hover{opacity:.7}
.mq svg{width:52px;flex:0 0 auto}
@keyframes mqRun{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq__tr{animation:none}}
/* ═══════════ FOOTER ═══════════ */
.ft{background:var(--navy);color:#A9BBD6;padding:52px 0 0;margin-top:0}
.ft__news{
display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.13);
}
.ft__news h3{color:#fff;font-size:26px;max-width:20ch}
.ft__form{display:flex;background:var(--paper);border-radius:12px;overflow:hidden;min-width:min(430px,100%)}
.ft__form input{flex:1;border:0;padding:0 18px;font:inherit;font-size:14.5px;outline:none;min-width:0}
.ft__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px;padding:38px 0 30px}
.ft__grid h4{
font-family:var(--ff-body);font-size:12px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:#fff;margin:0 0 16px;
}
.ft__grid a{display:block;color:#A9BBD6;text-decoration:none;font-size:14.5px;padding:5px 0;transition:color .2s}
.ft__grid a:hover{color:var(--acc-2)}
.ft__logo img{height:42px;width:auto;margin-bottom:14px}
.ft__grid p{font-size:14px;line-height:1.6;max-width:34ch}
.ft__soc{display:flex;gap:9px;margin-top:16px}
.ft__soc a{
width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);
display:flex;align-items:center;justify-content:center;color:#fff;padding:0;
}
.ft__soc a:hover{background:var(--acc-2);color:#fff}
/* Logotipo gigante — cierre característico de Metropolis */
.ft__word{
display:flex;align-items:center;justify-content:center;gap:26px;
padding:22px 0 34px;
}
.ft__word span{
font-family:var(--ff-display);font-size:clamp(38px,8.6vw,118px);color:#fff;
text-transform:uppercase;line-height:.9;letter-spacing:.01em;
}
.ft__word svg{width:clamp(46px,8vw,104px);color:var(--acc-2);flex:0 0 auto}
.ft__legal{
border-top:1px solid rgba(255,255,255,.13);padding:20px 0;
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;
}
/* ═══════════ RE-SKIN DE LOS COMPONENTES QUE SE CONSERVAN ═══════════ */
/* Formulario táctil: mismas funciones, estética Metropolis en azul */
.omvf{
--omvf-blue:#0A1C3A !important;
--omvf-blue2:#2656A6 !important;
--omvf-blue3:#3B82F6 !important;
}
/* Inter es bastante mas ancha que la condensada anterior: a 22px el titulo
se partia en dos lineas y se montaba sobre la pastilla de "Step 1 of 4".
Baja a 19px y el bloque se alinea arriba en vez de al centro. */
.omvf__title{font-family:var(--ff-display) !important;font-size:19px !important;
text-transform:uppercase !important;font-weight:800 !important;
letter-spacing:-.01em !important;line-height:1.12 !important}
.omvf__head{align-items:flex-start !important;gap:10px}
.omvf__stepchip{flex:0 0 auto}
@media(max-width:420px){ .omvf__title{font-size:17.5px !important} }
/* Tabla de precios: titulares con la tipografia del sitio.
Este bloque reasignaba --ff-display a Plus Jakarta Sans y esa familia se
cargaba entera (4 pesos, en las 95 paginas) solo para los titulares de
este componente. Ahora usa Inter 800 como el resto del sitio. */
.oms-pricing h1,
.oms-pricing h2,
.oms-pricing h3{
font-family:var(--ff-display);
font-weight:800;
text-transform:uppercase;
letter-spacing:.01em;
line-height:1.06;
}
/* Carrusel de reels */
.reels__head h3{font-family:var(--ff-display) !important;text-transform:uppercase !important;
font-weight:800 !important}
/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1080px){
.hero__grid{grid-template-columns:1fr}
.hero__media{min-height:440px}
.band__grid{grid-template-columns:1fr}
.bento{grid-template-columns:repeat(2,1fr)}
.bt--tall{grid-row:span 1}
.feat{grid-template-columns:1fr;gap:34px}
.revs__grid{grid-template-columns:1fr}
.ft__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
.container{padding:0 18px}
.canvas{border-radius:20px}
.sec{padding:60px 0}
.bento{grid-template-columns:1fr;grid-auto-rows:210px}
.band__dark{flex-direction:column;text-align:center;gap:24px;padding:28px 22px}
.band__stats{justify-content:center;gap:30px}
.revs{padding:34px 22px;margin:0 8px}
.ft__grid{grid-template-columns:1fr}
.hd__tel small{display:none}
.hero__copy{padding:0 22px 26px}
.mq a{font-size:30px;gap:20px;padding-right:20px}
.mq svg{width:36px}
}
/* Aparición al hacer scroll */
.rvl{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rvl.in{opacity:1;transform:none}
.rvl-1{transition-delay:.09s}.rvl-2{transition-delay:.18s}.rvl-3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.rvl{opacity:1;transform:none;transition:none}}
/* ══════════════════════════════════════════════════════════
MEJORAS · TANDA 1 · defectos
══════════════════════════════════════════════════════════ */
/* 1 · el componente trae su propio título y la sección ya lo pone.
Ojo: dentro de .oms-head también viven el switch Hourly/Flat-Rate,
la leyenda y la nota — sólo se esconde el título duplicado. */
#pricing .oms-head .oms-eyebrow,
#pricing .oms-head .oms-title{display:none!important}
#pricing .oms-head{margin-top:0}
/* 2 · ritmo vertical: menos aire muerto entre secciones */
.sec{padding:clamp(56px,6.4vw,92px) 0}
.sec--tight{padding:clamp(34px,4vw,58px) 0}
.sec + .sec--tight{padding-top:0}
.mission{padding:clamp(56px,6vw,80px) 0 32px}
/* pie de reseñas */
.revs__ft{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
}
.revs__meta{font-size:12.5px;color:var(--mut);font-weight:600}
.revs__cta{
display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;
color:var(--acc);transition:gap .2s,color .2s;
}
.revs__cta:hover{gap:12px;color:var(--acc-3)}
/* ══════════════════════════════════════════════════════════
MEJORAS · TANDA 2 · secciones nuevas
══════════════════════════════════════════════════════════ */
/* ─── CÓMO FUNCIONA · 3 pasos ─── */
.steps{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);
counter-reset:step;position:relative;
}
.step{
position:relative;background:var(--paper);border:1px solid var(--line);
border-radius:var(--r);padding:30px 26px 32px;
transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.step:hover{transform:translateY(-5px);box-shadow:0 22px 44px -28px rgba(10,28,58,.42);border-color:transparent}
.step__n{
display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;
background:var(--acc);color:#fff;font-family:var(--ff-display);font-size:19px;
letter-spacing:.02em;margin-bottom:18px;
}
.step h3{font-size:clamp(17px,1.35vw,20px);margin:0 0 10px;letter-spacing:-.01em}
.step p{font-size:14px;line-height:1.6;color:var(--body)}
/* la línea punteada que conecta los pasos */
.steps::before{
content:"";position:absolute;top:53px;left:16%;right:16%;height:2px;z-index:0;
background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 15px);
}
.step{z-index:1}
@media(max-width:900px){.steps{grid-template-columns:1fr}.steps::before{display:none}}
/* ══════════════════════════════════════════════════════════
COMPARATIVA · 3 columnas con los camiones
Nosotros / National Brands / Cheap Movers
══════════════════════════════════════════════════════════ */
.cmp{
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(24px,3.2vw,48px);
}
.cmp__hd{
display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3vw,44px);
align-items:end;margin-bottom:clamp(22px,2.6vw,34px);
}
.cmp__hd h2{max-width:17ch}
.cmp__note{font-size:14.5px;line-height:1.6;color:var(--body);max-width:48ch}
@media(max-width:820px){.cmp__hd{grid-template-columns:1fr}}
/* la tabla scrollea sola si no entra, en vez de romper el layout */
.cmp__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.cmp__t{width:100%;min-width:640px;border-collapse:separate;border-spacing:0}
.cmp__t th,.cmp__t td{padding:14px 12px;text-align:center;vertical-align:middle}
.cmp__t thead th{vertical-align:bottom;padding-bottom:16px}
.cmp__t thead th:not(.cmp__us){border-bottom:1px solid var(--line)}
.cmp__t thead th:first-child{vertical-align:bottom;text-align:left}
.cmp__lbl{
display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--mut);padding-bottom:2px;
}
.cmp__t tbody th{
text-align:left;font-weight:700;color:var(--ink);width:42%;
font-size:14px;line-height:1.4;
}
/* encabezado de cada marca */
.cmp__brand{
display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
color:var(--mut);line-height:1.3;margin-bottom:12px;
}
.cmp__us .cmp__brand{color:var(--acc)}
.cmp__truck{
display:block;margin:0 auto;width:100%;max-width:190px;height:96px;object-fit:contain;
}
.cmp__truck.is-off{visibility:hidden}
.cmp__rec{
display:inline-block;background:var(--acc);color:#fff;
font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
padding:5px 12px;border-radius:999px;margin-bottom:11px;white-space:nowrap;
box-shadow:0 8px 16px -8px rgba(38,86,166,.7);
}
/* nuestra columna, resaltada de punta a punta */
.cmp__t th.cmp__us{background:var(--soft);border-radius:16px 16px 0 0;position:relative}
.cmp__t td.cmp__us{background:rgba(38,86,166,.055)}
.cmp__t tbody tr:last-child td.cmp__us{border-radius:0 0 16px 16px}
/* cebra y separadores sólo en las columnas de al lado */
.cmp__t tbody tr:nth-child(even) td:not(.cmp__us),
.cmp__t tbody tr:nth-child(even) th{background:#F7F9FC}
.cmp__t tbody td:not(.cmp__us),.cmp__t tbody th{border-bottom:1px solid #EEF1F6}
.cmp__t tbody tr:last-child td:not(.cmp__us),
.cmp__t tbody tr:last-child th{border-bottom:0}
/* sí / no */
.cmp__t i{display:inline-block;width:26px;height:26px;vertical-align:middle;position:relative}
.cmp__t i.ok::before,.cmp__t i.ok::after,
.cmp__t i.no::before,.cmp__t i.no::after{content:"";position:absolute;border-radius:2px}
.cmp__t i.ok::before{left:4px;top:12px;width:8px;height:3px;background:#16A34A;transform:rotate(45deg)}
.cmp__t i.ok::after{left:8px;top:8px;width:15px;height:3px;background:#16A34A;transform:rotate(-50deg)}
.cmp__t i.no::before{left:4px;top:11.5px;width:18px;height:3px;background:#D9646A;transform:rotate(45deg)}
.cmp__t i.no::after{left:4px;top:11.5px;width:18px;height:3px;background:#D9646A;transform:rotate(-45deg)}
.cmp__ft{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
}
.cmp__ft p{font-size:14px;font-weight:600;color:var(--body)}
@media(max-width:640px){
.cmp__t{min-width:0}
.cmp__t th,.cmp__t td{padding:10px 4px}
.cmp__t tbody th{width:auto;font-size:11.5px;line-height:1.3;padding-left:6px}
.cmp__t th:not(.cmp__lbl-col),.cmp__t td{width:68px}
.cmp__brand{font-size:9px;letter-spacing:.02em;margin-bottom:7px;line-height:1.2}
.cmp__truck{max-width:66px;height:38px}
.cmp__rec{font-size:7.5px;letter-spacing:.03em;padding:3px 7px;margin-bottom:6px}
.cmp__t th.cmp__us{border-radius:12px 12px 0 0}
.cmp__t tbody tr:last-child td.cmp__us{border-radius:0 0 12px 12px}
.cmp__t i{width:20px;height:20px;transform:scale(.8)}
.cmp__ft{flex-direction:column;align-items:stretch;text-align:center}
.cmp__ft .btn{justify-content:center}
}
/* ─── ÁREAS QUE SERVIMOS ─── */
.area__top{
display:grid;grid-template-columns:1fr .82fr;gap:clamp(20px,3vw,48px);
align-items:end;margin-bottom:clamp(28px,3.4vw,46px);
}
.area__top .lede{font-size:15px;color:var(--body);line-height:1.6}
.area__grid{
display:grid;grid-template-columns:1.5fr 1.2fr .75fr .6fr;
gap:clamp(18px,2.2vw,32px);align-items:start;
}
.area__col h3{
font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--acc);margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--line);
font-family:var(--ff-body);
}
.area__list{display:flex;flex-wrap:wrap;gap:7px}
.area__list a{
display:inline-block;background:var(--paper);border:1px solid var(--line);
border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink);
transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.area__list a:hover{background:var(--acc);border-color:var(--acc);color:#fff;transform:translateY(-2px)}
.area__ft{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
margin-top:clamp(26px,3vw,42px);padding-top:24px;border-top:1px solid var(--line);
}
.area__ft span{font-size:14px;font-weight:600;color:var(--body)}
@media(max-width:1080px){.area__grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.area__top{grid-template-columns:1fr}}
@media(max-width:620px){.area__grid{grid-template-columns:1fr}}
/* ══════════════════════════════════════════════════════════
MEJORAS · TANDA 3 · conversión
══════════════════════════════════════════════════════════ */
/* ─── garantías bajo el form del hero ─── */
.hero__trust{
list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:9px;
}
.hero__trust li{
display:flex;align-items:flex-start;gap:9px;
font-size:12.5px;font-weight:600;color:var(--body);line-height:1.4;
}
.hero__trust svg{
width:11px;height:11px;flex:0 0 auto;margin-top:3px;color:#fff;
background:var(--acc);border-radius:50%;padding:3px;box-sizing:content-box;
}
/* ─── CTA final ─── */
.fin{
position:relative;overflow:hidden;border-radius:var(--r-lg);
background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 48%,var(--acc) 130%);
color:#fff;padding:clamp(30px,3.8vw,58px);
display:grid;grid-template-columns:1fr .62fr;gap:clamp(24px,3.4vw,54px);align-items:center;
}
.fin::after{
content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.42),transparent 62%);pointer-events:none;
}
.fin__copy{position:relative;z-index:2}
.fin h2{color:#fff}
.fin h2 .hl{color:var(--acc-2)}
.fin p{margin-top:16px;max-width:44ch;color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.6}
.fin__acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--soft);transform:translateY(-2px)}
.fin__tel{
display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:15px;color:#fff;
border-bottom:2px solid rgba(255,255,255,.42);padding-bottom:3px;transition:border-color .2s;
}
.fin__tel:hover{border-color:#fff}
.fin__pts{
position:relative;z-index:2;list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:18px;
}
.fin__pts li{
display:flex;align-items:baseline;gap:14px;
padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.16);
}
.fin__pts li:last-child{border-bottom:0;padding-bottom:0}
.fin__pts b{
font-family:var(--ff-display);font-size:clamp(26px,2.6vw,36px);line-height:1;
color:var(--acc-2);flex:0 0 auto;min-width:3.4ch;
}
.fin__pts span{font-size:13px;color:rgba(255,255,255,.78);font-weight:600;line-height:1.35}
@media(max-width:880px){.fin{grid-template-columns:1fr}}
/* ─── barra CTA fija en móvil ─── */
.mbar{
position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:9px;padding:10px 12px;
background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
border-top:1px solid var(--line);box-shadow:0 -6px 26px rgba(10,28,58,.1);
transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.7,.3,1);
padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.mbar.up{transform:none}
.mbar a{
flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
border-radius:999px;padding:13px 12px;font-size:14px;font-weight:800;
transition:transform .18s,background .2s;
}
.mbar a:active{transform:scale(.97)}
.mbar__tel{background:var(--soft);color:var(--ink);flex:0 0 42%}
.mbar__cta{background:var(--acc);color:#fff}
@media(max-width:860px){
.mbar[hidden]{display:flex} /* hidden solo controla el estado inicial vía JS */
.mbar{display:flex}
body{padding-bottom:0}
.canvas{padding-bottom:76px}
}
@media(min-width:861px){.mbar{display:none!important}}
/* ══════════════════════════════════════════════════════════
MEJORAS · TANDA 4 · pulido
══════════════════════════════════════════════════════════ */
/* (el subrayado del menú vive ahora en el bloque HEADER · menú real) */
/* scroll suave y anclas que no quedan bajo el header fijo */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* botones: una sola curva de movimiento en todo el sitio */
.btn{transition:transform .2s cubic-bezier(.2,.7,.3,1),background .22s,color .22s,box-shadow .22s,border-color .22s}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible,.revs__tab:focus-visible,.area__list a:focus-visible,
.faq__it summary:focus-visible,.revs__nav button:focus-visible{
outline:3px solid var(--acc-2);outline-offset:3px;border-radius:8px;
}
/* tarjetas del bento y del servicio: misma curva */
.bt{transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s}
.bt:hover{transform:translateY(-4px)}
/* FAQ: la respuesta se despliega con altura animada */
.faq__it summary{transition:color .2s}
.faq__it summary:hover{color:var(--acc)}
.faq__a{animation:faqIn .34s cubic-bezier(.2,.7,.3,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ritmo tipográfico: interlineado y medida más parejos */
.lede,.bt__lb p,.step p,.rv p{max-width:64ch}
.eyebrow{margin-bottom:14px}
/* la sección de reseñas ya no necesita el aire extra de abajo */
#reviews{padding-bottom:clamp(24px,3vw,40px)}
@media(prefers-reduced-motion:reduce){
.btn,.bt,.step,.area__list a,.revs__grid{transition:none!important}
.faq__a{animation:none}
}
@media(max-width:860px){
.hd__tel span small{display:none}
}
/* ── correcciones finales ── */
a{color:inherit}
.area__list a,.revs__cta,.fin__tel,.ft a,.faq__it summary{text-decoration:none}
.mbar a{text-decoration:none}
/* ══════════════════════════════════════════════════════════
RESEÑAS · widget Elfsight
El widget trae su propio HTML y estilos: aquí sólo le damos
el marco de Metropolis y un esqueleto mientras carga.
══════════════════════════════════════════════════════════ */
.revs__top{align-items:center}
.ef{position:relative;min-height:300px}
.ef [class^="elfsight-app-"]{position:relative;z-index:2}
/* esqueleto de carga: tres tarjetas latiendo */
.ef__skel{
position:absolute;inset:0;z-index:1;display:grid;
grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);
transition:opacity .45s ease,visibility .45s;
}
.ef__card{
background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
min-height:196px;position:relative;overflow:hidden;
}
.ef__card::before{
content:"";position:absolute;left:20px;top:22px;width:44px;height:44px;border-radius:50%;
background:var(--line);
}
.ef__card::after{
content:"";position:absolute;left:20px;right:20px;top:86px;height:10px;border-radius:5px;
background:var(--line);
box-shadow:0 22px 0 var(--line),0 44px 0 var(--line),0 66px 0 rgba(220,228,241,.6);
}
.ef__skel,.ef__card{animation:efPulse 1.5s ease-in-out infinite}
@keyframes efPulse{0%,100%{opacity:1}50%{opacity:.55}}
.ef--ready .ef__skel{opacity:0;visibility:hidden;animation:none}
.ef--ready{min-height:0}
@media(max-width:900px){.ef__skel{grid-template-columns:1fr}.ef__card:nth-child(n+2){display:none}}
/* el widget hereda la tipografía del sitio donde puede */
.ef,.ef *{font-family:var(--ff-body)}
@media(prefers-reduced-motion:reduce){
.ef__skel,.ef__card{animation:none}
}
/* respaldo cuando el widget no carga */
.ef__fb{
position:relative;z-index:3;background:var(--soft);border-radius:var(--r);
padding:clamp(26px,3vw,44px);text-align:center;
}
.ef__g{font-family:var(--ff-body);font-weight:800;font-size:26px;letter-spacing:-.02em}
.ef__g i{font-style:normal}
.ef__score{
font-family:var(--ff-display);font-size:clamp(40px,4.4vw,58px);line-height:1;
color:var(--ink);margin:12px 0 4px;
}
.ef__score sup{font-size:.4em;color:var(--gold);margin-left:3px}
.ef__fb p{max-width:52ch;margin:10px auto 20px;color:var(--body);font-size:14.5px;line-height:1.6}
.ef--fallback{min-height:0}
.hd__tel span{white-space:nowrap}
/* ══════════════════════════════════════════════════════════
La tabla de precios subió justo debajo de ACCREDITED BY:
la franja de acreditaciones necesita aire para no quedar
pegada al bloque de color que ahora viene inmediatamente.
══════════════════════════════════════════════════════════ */
.creds{padding:44px 0 40px}
#pricing,.bk-pricing{padding-top:clamp(46px,5vw,72px)}
#pricing .center,.bk-pricing .center{margin-bottom:26px}
/* ══════════════════════════════════════════════════════════
LICENCIAS · MR 1296 · US DOT 3381414
Van en tres lugares: junto al form del hero, en la franja
de acreditaciones y en el footer.
══════════════════════════════════════════════════════════ */
/* — hero, debajo del formulario — */
.hero__lic{
display:block;font-size:11px;font-weight:700;color:var(--mut);
letter-spacing:.03em;margin-top:2px;font-variant-numeric:tabular-nums;
}
/* — franja ACCREDITED BY — */
.creds__it--lic{
flex-direction:column;align-items:flex-start;gap:1px;
filter:none;opacity:1;padding-left:20px;position:relative;
}
.creds__it--lic::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:26px;background:var(--line);
}
.creds__it--lic b{
font-size:12.5px;font-weight:800;color:var(--acc);letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
.creds__it--lic span{
font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
@media(max-width:680px){.creds__it--lic{padding-left:0}.creds__it--lic::before{display:none}}
/* — footer — */
.ft__lic{
display:flex;align-items:center;gap:12px;
margin-top:clamp(26px,3vw,40px);padding:16px 18px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:14px;
}
.ft__lic svg{width:22px;height:22px;flex:0 0 auto;color:var(--acc-2)}
.ft__lic span{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.ft__lic b{font-size:13.5px;font-weight:800;color:#fff;letter-spacing:.01em}
.ft__lic i{
font-style:normal;font-size:12.5px;color:rgba(255,255,255,.66);
font-variant-numeric:tabular-nums;
}
.ft__lic i b{font-size:12.5px;color:rgba(255,255,255,.9);font-weight:700}
/* el número de DOT enlaza al registro público de la FMCSA */
.lic-link{
color:inherit;text-decoration:underline;text-decoration-style:dotted;
text-underline-offset:3px;text-decoration-thickness:1px;
transition:color .2s,text-decoration-color .2s;
}
.lic-link:hover{color:var(--acc);text-decoration-style:solid}
.lic-link--dark{color:rgba(255,255,255,.9);font-weight:700}
.lic-link--dark:hover{color:#fff}
/* ══════════════════════════════════════════════════════════
FOOTER · horario y barra legal
══════════════════════════════════════════════════════════ */
.ft__hours{font-size:14px;color:rgba(255,255,255,.62);line-height:1.5}
.ft__legal-nav{display:flex;gap:20px;flex-wrap:wrap}
.ft__legal-nav a{font-size:12.5px;color:rgba(255,255,255,.62);transition:color .2s}
.ft__legal-nav a:hover{color:#fff}
/* ══════════════════════════════════════════════════════════
WHATSAPP FLOTANTE
Se corre hacia arriba en móvil para no taparse con la
barra fija de CTA.
══════════════════════════════════════════════════════════ */
.wa{
position:fixed;right:20px;bottom:24px;z-index:70;
width:56px;height:56px;border-radius:50%;background:#25D366;
display:grid;place-items:center;
box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
transition:transform .25s cubic-bezier(.3,1.4,.5,1);
}
.wa svg{width:28px;height:28px;fill:#fff;position:relative;z-index:2}
.wa:hover{transform:scale(1.08)}
.wa::before,.wa::after{
content:"";position:absolute;inset:0;border-radius:50%;
background:rgba(37,211,102,.4);animation:waPulse 2.4s ease-out infinite;
}
.wa::after{animation-delay:1.2s}
@keyframes waPulse{
0%{transform:scale(1);opacity:.6}
70%{transform:scale(1.75);opacity:0}
100%{opacity:0}
}
@media(max-width:860px){.wa{bottom:88px;right:14px;width:50px;height:50px}.wa svg{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.wa::before,.wa::after{animation:none;opacity:0}.wa{transition:none}}
/* mensaje de estado del checklist */
.ft__form-msg{
margin-top:11px;font-size:13px;font-weight:600;min-height:1.2em;
color:rgba(255,255,255,.7);transition:color .2s;
}
.ft__form-msg.is-ok{color:#6EE7A8}
.ft__form-msg.is-error{color:#FF9BA8}
.ft__form input:invalid{box-shadow:none}
/* ══════════════════════════════════════════════════════════
HEADER · menú real con dropdowns y submenús
Escritorio: hover. Móvil: el nav baja como panel con acordeones.
Reemplaza los ajustes de header anteriores.
══════════════════════════════════════════════════════════ */
.hd{transition:box-shadow .26s ease}
.hd.is-stuck{box-shadow:0 12px 30px -20px rgba(10,28,58,.45)}
.hd__in{gap:18px;position:relative}
/* ── nav de escritorio ── */
.hd__nav{display:flex;align-items:center;gap:2px;margin-left:10px}
.hd__nav > a,.hd__dd-t{
position:relative;display:inline-flex;align-items:center;gap:6px;
background:none;border:0;cursor:pointer;font:inherit;
color:var(--ink);font-size:14px;font-weight:700;
padding:10px 11px;border-radius:9px;text-decoration:none;
white-space:nowrap;transition:color .18s,background .18s;
}
.hd__nav > a:hover,.hd__dd-t:hover{color:var(--acc)}
.hd__car{width:13px;height:13px;opacity:.65;transition:transform .25s ease}
.hd__item:hover .hd__car{transform:rotate(180deg)}
/* subrayado animado, igual que el resto del sitio */
.hd__nav > a::after,.hd__dd-t::after{
content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;
border-radius:2px;background:var(--acc);
transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.hd__nav > a:hover::after,.hd__item:hover .hd__dd-t::after,.hd__nav > a.on::after{transform:scaleX(1)}
.hd__nav > a.on{color:var(--ink)}
/* ── dropdown ── */
.hd__item{position:relative}
.hd__dd{
position:absolute;top:calc(100% + 12px);left:0;min-width:266px;
background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:8px;
box-shadow:0 30px 60px -26px rgba(10,28,58,.42);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.hd__dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.hd__item:hover .hd__dd{opacity:1;visibility:visible;transform:none}
.hd__dd a{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600;
transition:background .16s,color .16s;
}
.hd__dd a:hover{background:var(--soft);color:var(--acc)}
.hd__dd a svg{width:16px;height:16px;color:var(--acc);flex:0 0 auto}
/* ── submenú anidado (Additional Services) ── */
.hd__sub-item{position:relative}
.hd__dd a.hd__has-sub{justify-content:space-between}
.hd__sub-lbl{display:inline-flex;align-items:center;gap:10px}
.hd__car-r{width:15px;height:15px;color:var(--acc);opacity:.85;flex:0 0 auto;transition:transform .25s ease}
.hd__sub{
position:absolute;left:100%;top:-8px;min-width:274px;
background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:8px;
box-shadow:0 30px 60px -26px rgba(10,28,58,.42);
opacity:0;visibility:hidden;transform:translateX(8px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.hd__sub::before{content:"";position:absolute;left:-12px;top:0;width:12px;height:100%}
.hd__sub-item:hover .hd__sub{opacity:1;visibility:visible;transform:none}
.hd__sub a{display:block;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600}
/* si el submenú no entra a la derecha, se abre hacia la izquierda */
.hd__sub-item.flip .hd__sub{left:auto;right:100%;transform:translateX(-8px)}
.hd__sub-item.flip .hd__sub::before{left:auto;right:-12px}
.hd__sub-item.flip:hover .hd__sub{transform:none}
/* ── botón Get a Quote con menú ── */
.hd__quote{position:relative;display:inline-flex;flex:0 0 auto}
.hd__cta{gap:8px}
.hd__cta-ar{width:15px;height:15px;transition:transform .25s ease}
.hd__quote-menu{
position:absolute;top:calc(100% + 9px);right:0;min-width:246px;max-width:84vw;
background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:6px;
box-shadow:0 30px 60px -22px rgba(10,28,58,.5);
display:none;flex-direction:column;gap:2px;z-index:90;
}
.hd__quote-menu a{
display:flex;align-items:center;gap:11px;padding:12px;border-radius:10px;
color:var(--ink);text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap;
transition:background .15s,color .15s;
}
.hd__quote-menu a:hover,.hd__quote-menu a:active{background:var(--soft);color:var(--acc)}
.hd__quote-menu a svg{width:19px;height:19px;color:var(--acc);flex:0 0 auto}
.hd__quote.open .hd__quote-menu{display:flex}
.hd__quote.open .hd__cta-ar{transform:rotate(90deg)}
/* ── burger → X ── */
.hd__burger span{transition:transform .26s ease,opacity .18s ease}
.hd.menu-open .hd__burger span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.hd.menu-open .hd__burger span:nth-child(2){opacity:0}
.hd.menu-open .hd__burger span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}
/* ── extras que sólo se ven en el panel móvil ── */
.hd__mob-extra{display:none}
/* ── el menú es largo: estas medidas lo hacen entrar en el grid de 1180 ── */
.hd__in{gap:13px}
.hd__nav{margin-left:4px}
.hd__lang{margin-left:auto} /* empuja tel + CTA al borde derecho del grid */
.hd__nav > a,.hd__dd-t{padding:10px 8px;font-size:13.5px}
.hd__nav > a::after,.hd__dd-t::after{left:8px;right:8px}
.hd__logo img{max-width:178px}
.hd__logo span{font-size:9px;letter-spacing:.09em}
.hd__tel{font-size:15px}
.hd__lang a{padding:6px 9px}
.hd__cta{padding:0 15px;font-size:13.5px}
/* por debajo de 1330 el teléfono cede el sitio; el menú aguanta hasta 1080 */
@media(max-width:1330px){
.hd__tel{display:none}
}
@media(max-width:1180px){
.hd__nav > a,.hd__dd-t{padding:10px 6px;font-size:13px}
.hd__logo span{display:none}
}
/* ══════════ MÓVIL · el nav baja como panel ══════════ */
@media(max-width:1080px){
.hd__burger{display:flex}
.hd__logo span{display:none}
.hd__nav{
display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0;
position:absolute;top:100%;left:0;right:0;z-index:70;
background:var(--paper);border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:0 16px;max-height:0;overflow:hidden;
box-shadow:0 30px 46px -28px rgba(10,28,58,.5);
transition:max-height .34s cubic-bezier(.2,.7,.2,1),padding .3s ease;
}
.hd.menu-open .hd__nav{max-height:calc(100vh - 92px);overflow:auto;padding:12px 16px 20px;-webkit-overflow-scrolling:touch}
.hd__nav > a,.hd__dd-t{
width:100%;justify-content:space-between;font-size:15.5px;padding:14px 10px;border-radius:11px;
}
.hd__nav > a::after,.hd__dd-t::after{display:none}
.hd__nav > a:active,.hd__dd-t:active{background:var(--soft)}
.hd__item{width:100%}
/* acordeón nivel 1 */
.hd__dd{
position:static;opacity:1;visibility:visible;transform:none;
box-shadow:none;border:0;border-radius:0;min-width:0;
padding:0 0 4px 10px;max-height:0;overflow:hidden;
transition:max-height .34s cubic-bezier(.2,.7,.2,1);
}
.hd__dd::before{display:none}
.hd__item:hover .hd__dd{opacity:1;visibility:visible}
.hd__item.open > .hd__dd{max-height:1400px}
.hd__item.open .hd__car{transform:rotate(180deg)}
.hd__dd a{font-size:14.5px;padding:11px 10px}
/* acordeón nivel 2 */
.hd__sub{
position:static;opacity:1;visibility:visible;transform:none;
box-shadow:none;border:0;border-radius:0;min-width:0;
padding:0 0 4px 14px;max-height:0;overflow:hidden;
transition:max-height .28s ease;
}
.hd__sub::before{display:none}
.hd__sub-item:hover .hd__sub{opacity:1;visibility:visible}
.hd__sub-item.open .hd__sub{max-height:760px}
.hd__sub-item.open .hd__car-r{transform:rotate(90deg)}
.hd__sub a{font-size:14px}
/* pie del panel */
.hd__mob-extra{
display:flex;flex-direction:column;gap:10px;
margin-top:12px;padding:16px 10px 4px;border-top:1px solid var(--line);
}
.hd__mob-tel{
display:flex;align-items:center;gap:10px;text-decoration:none;
color:var(--ink);font-weight:800;font-size:17px;
}
.hd__mob-tel svg{width:19px;height:19px;color:var(--acc);flex:0 0 auto}
.hd__mob-tel small{display:block;font-size:11.5px;font-weight:600;color:var(--mut)}
.hd__mob-lic{
margin:0;font-size:11.5px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--mut);
}
/* fondo oscuro detrás del panel */
.hd__scrim{
position:fixed;inset:0;top:var(--hd-h,82px);z-index:50;
background:rgba(10,28,58,.42);opacity:0;transition:opacity .3s ease;
}
.hd__scrim.in{opacity:1}
body.no-scroll{overflow:hidden}
}
/* En teléfono el CTA no cabe en la misma fila: pasa a una segunda,
a lo ancho. Logo · idioma · burger arriba; "Get a Quote" abajo. */
@media(max-width:860px){
.hd__in{flex-wrap:wrap;height:auto;padding:11px 0 12px;gap:10px;row-gap:9px}
.hd__logo{order:1;flex:0 1 auto;min-width:0}
.hd__logo img{height:38px;max-width:158px}
.hd__lang{order:2;margin-left:auto}
.hd__lang a{padding:6px 8px;font-size:11.5px;gap:5px}
.hd__burger{order:3;width:44px;height:44px}
.hd__quote{order:4;flex:1 0 100%;display:block}
.hd__cta{width:100%;justify-content:center;height:46px;font-size:14.5px;padding:0 16px}
.hd__quote-menu{left:0;right:0;min-width:0;max-width:none}
/* el globo de WhatsApp no debe flotar sobre el menú abierto */
body.no-scroll .wa{opacity:0;pointer-events:none}
}
@media(max-width:380px){
.hd__logo img{height:34px;max-width:132px}
.hd__lang a{padding:5px 7px}
.hd__lang svg{width:17px;height:17px}
}
@media(prefers-reduced-motion:reduce){
.hd__nav,.hd__dd,.hd__sub,.hd__scrim,.hd__car,.hd__car-r,.hd__cta-ar{transition:none!important}
}
/* ══════════════════════════════════════════════════════════
PÁGINA BOOKING · primera página tipo servicio
Hero navy + dos rutas · franja de incluidos · comparativa
hourly vs flat · bloque de formulario.
══════════════════════════════════════════════════════════ */
/* ── HERO ── */
.bkh{position:relative;padding:16px 16px 0}
.bkh__panel{
position:relative;overflow:hidden;border-radius:var(--r);
background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 62%,#1B3A6B 100%);
padding:clamp(30px,5vw,62px) 0 clamp(96px,11vw,132px);
}
.bkh__panel::after{
content:"";position:absolute;right:-8%;top:-30%;width:52%;height:150%;
background:radial-gradient(closest-side,rgba(59,130,246,.34),transparent 72%);
pointer-events:none;
}
.bkh__swoosh{
position:absolute;right:2%;top:-6%;width:min(340px,34%);opacity:.13;
pointer-events:none;color:#fff;
}
.bkh__crumb{
display:flex;align-items:center;gap:9px;margin-bottom:22px;
font-size:12.5px;font-weight:700;color:rgba(255,255,255,.5);
}
.bkh__crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.bkh__crumb a:hover{color:#fff}
.bkh__crumb b{color:#fff}
.bkh__copy{position:relative;z-index:2;max-width:760px}
.bkh__stars{
display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
border-radius:999px;padding:8px 15px;
font-size:12.5px;font-weight:700;color:#fff;
}
.bkh__stars i{color:var(--gold);font-style:normal;letter-spacing:1px}
.bkh h1{
font-family:var(--ff-display);font-weight:800;color:#fff;
font-size:clamp(38px,6.4vw,80px);line-height:.94;letter-spacing:.005em;
text-transform:uppercase;margin:0 0 18px;
}
.bkh h1 .hl{color:var(--acc-4)}
.bkh__copy > p{
color:rgba(255,255,255,.8);font-size:clamp(15px,1.35vw,17.5px);
line-height:1.62;max-width:60ch;margin:0 0 26px;
}
.bkh__acts{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.bkh__tel{
display:inline-flex;align-items:center;gap:9px;color:#fff;
font-weight:800;font-size:16.5px;text-decoration:none;
}
.bkh__tel svg{color:var(--acc-4)}
.bkh__tel:hover{color:var(--acc-4)}
.bkh__lic{
margin:22px 0 0;font-size:12px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:rgba(255,255,255,.55);
}
.bkh__lic .lic-link{color:rgba(255,255,255,.78)}
/* ── las dos rutas ── */
.bkpick{
position:relative;z-index:3;margin-top:clamp(-96px,-8vw,-70px);
display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.bkpick__c{
position:relative;display:flex;flex-direction:column;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
padding:26px 26px 22px;text-decoration:none;overflow:hidden;
box-shadow:var(--shadow);
transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;
}
.bkpick__c::before{
content:"";position:absolute;top:0;left:26px;right:26px;height:4px;border-radius:0 0 999px 999px;
transform:scaleX(0);transform-origin:left;transition:transform .34s ease;
}
.bkpick__c--h::before{background:linear-gradient(90deg,var(--acc),var(--acc-2))}
.bkpick__c--f::before{background:linear-gradient(90deg,var(--pink),#FF7ABF)}
.bkpick__c:hover{transform:translateY(-6px);box-shadow:0 3px 6px rgba(10,28,58,.05),0 30px 60px -26px rgba(10,28,58,.42);border-color:#C6D6F2}
.bkpick__c:hover::before{transform:scaleX(1)}
.bkpick__ic{
width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
margin-bottom:16px;color:#fff;flex:0 0 auto;
}
.bkpick__ic svg{width:25px;height:25px}
.bkpick__c--h .bkpick__ic{background:var(--acc);box-shadow:0 12px 22px -10px rgba(38,86,166,.75)}
.bkpick__c--f .bkpick__ic{background:var(--pink);box-shadow:0 12px 22px -10px rgba(229,34,143,.65)}
.bkpick__k{
font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--mut);margin-bottom:6px;
}
.bkpick__c h2{
font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:.01em;
color:var(--ink);margin:0 0 10px;
}
.bkpick__c p{color:var(--body);font-size:14.5px;line-height:1.55;margin:0 0 16px;max-width:44ch}
.bkpick__from{
display:block;padding-top:14px;border-top:1px solid var(--line);
font-size:14px;font-weight:600;color:var(--mut);
}
.bkpick__from b{color:var(--ink);font-weight:800;font-size:16px}
.bkpick__go{
display:inline-flex;align-items:center;gap:8px;margin-top:16px;
font-size:14.5px;font-weight:800;color:var(--acc);
}
.bkpick__c--f .bkpick__go{color:var(--pink)}
.bkpick__go svg{width:17px;height:17px;transition:transform .25s ease}
.bkpick__c:hover .bkpick__go svg{transform:translateX(4px)}
/* ── franja de incluidos ── */
.bkincl{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:12px 26px;
}
.bkincl li{
display:flex;align-items:center;gap:10px;
font-size:14.5px;font-weight:700;color:var(--ink);
}
.bkincl svg{width:17px;height:17px;flex:0 0 auto;color:#16A34A}
/* ── el bloque de precios sí muestra su título en esta página ── */
#pricing.bk-pricing .oms-head .oms-eyebrow,
#pricing.bk-pricing .oms-head .oms-title{display:revert!important}
/* ── comparativa hourly vs flat ── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.vs__c{
position:relative;display:flex;flex-direction:column;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
padding:30px;box-shadow:var(--shadow);
transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,border-color .26s;
}
.vs__c::before{
content:"";position:absolute;top:0;left:30px;right:30px;height:4px;border-radius:0 0 999px 999px;
transform:scaleX(0);transform-origin:left;transition:transform .32s ease;
}
.vs__c--h::before{background:linear-gradient(90deg,var(--acc),var(--acc-2))}
.vs__c--f::before{background:linear-gradient(90deg,var(--pink),#FF7ABF)}
.vs__c:hover{transform:translateY(-6px);box-shadow:0 3px 6px rgba(10,28,58,.05),0 32px 58px -28px rgba(10,28,58,.44)}
.vs__c:hover::before{transform:scaleX(1)}
.vs__hd{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.vs__chip{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}
.vs__chip svg{width:25px;height:25px}
.vs__c--h .vs__chip{background:var(--acc);box-shadow:0 12px 22px -10px rgba(38,86,166,.7)}
.vs__c--f .vs__chip{background:var(--pink);box-shadow:0 12px 22px -10px rgba(229,34,143,.6)}
.vs__c h3{
font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
font-size:24px;line-height:1;letter-spacing:.01em;color:var(--ink);margin:0 0 5px;
}
.vs__for{font-size:13px;font-weight:700;color:var(--mut)}
.vs__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;flex-grow:1}
.vs__l li{position:relative;padding-left:30px;font-size:14.8px;line-height:1.5;color:var(--body)}
.vs__l li::before{
content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
background:var(--soft) url("data:image/svg+xml;utf8,") center/13px no-repeat;
}
.vs__c--f .vs__l li::before{
background:#FDE9F4 url("data:image/svg+xml;utf8,") center/13px no-repeat;
}
.vs__l li.vs__warn{color:var(--mut)}
.vs__l li.vs__warn::before{
background:#FFF4E0 url("data:image/svg+xml;utf8,") center/13px no-repeat;
}
.vs__cta{margin-top:26px;width:100%;justify-content:center}
/* ── bloque de formulario ── */
.bkform{display:grid;grid-template-columns:1fr 440px;gap:44px;align-items:center}
.bkform__copy h2{margin-bottom:14px}
.bkform__copy > p{color:var(--body);font-size:16px;line-height:1.62;max-width:48ch;margin:0 0 22px}
.bkform__pts{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px}
.bkform__pts li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink)}
.bkform__pts svg{width:18px;height:18px;flex:0 0 auto;color:#16A34A}
.bkform__alt{font-size:14.5px;color:var(--mut);margin:0}
.bkform__alt a{color:var(--acc);font-weight:800;text-decoration:none}
.bkform__alt a:hover{text-decoration:underline}
.bkform__box{
background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
padding:22px 20px;box-shadow:var(--shadow);
}
.bkform__box .hero__form-t,.bkform__box .hero__form-s{text-align:center}
.bkform__box .omvf{max-width:none;box-shadow:none;border-radius:14px;margin-top:12px}
/* ── responsive ── */
@media(max-width:980px){
.bkpick{grid-template-columns:1fr;margin-top:-72px}
.vs{grid-template-columns:1fr}
.bkform{grid-template-columns:1fr;gap:28px}
.bkincl{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
.bkh{padding:10px 10px 0}
.bkh__panel{padding:26px 0 92px;border-radius:20px}
.bkh__acts{gap:14px}
.bkh__acts .btn{width:100%;justify-content:center}
.bkh__tel{width:100%;justify-content:center}
.bkpick{margin-top:-64px;gap:14px}
.bkpick__c{padding:22px 20px 20px}
.vs__c{padding:24px 20px}
.bkincl{grid-template-columns:1fr;gap:10px}
.bkform__box{padding:16px 14px}
}
/* ══════════════════════════════════════════════════════════
HEADER STICKY · vidrio, compactado y barra de progreso
══════════════════════════════════════════════════════════ */
/* El lienzo tenía overflow:hidden, que convierte a .canvas en
contenedor de scroll y anula el sticky del header. `clip`
recorta igual (respeta el border-radius) pero no crea
contenedor de scroll, así que el header vuelve a pegarse. */
.canvas{overflow:clip}
.hd{
background:rgba(255,255,255,.82);
-webkit-backdrop-filter:saturate(180%) blur(16px);
backdrop-filter:saturate(180%) blur(16px);
transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,
transform .36s cubic-bezier(.2,.7,.2,1);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.hd{background:var(--paper)}
}
.hd.is-stuck{
background:rgba(255,255,255,.93);
border-bottom-color:rgba(220,228,241,.85);
box-shadow:0 10px 30px -18px rgba(10,28,58,.40);
}
/* ── se compacta al bajar ── */
.hd__in{transition:height .3s cubic-bezier(.2,.7,.2,1),padding .3s ease,row-gap .3s ease}
.hd.is-stuck .hd__in{height:66px}
.hd__logo img{transition:height .3s cubic-bezier(.2,.7,.2,1)}
.hd.is-stuck .hd__logo img{height:34px}
.hd__logo span{max-height:16px;overflow:hidden;transition:opacity .24s ease,max-height .3s ease}
.hd.is-stuck .hd__logo span{opacity:0;max-height:0}
.hd.is-stuck .hd__tel small{opacity:0;max-height:0;overflow:hidden;transition:opacity .2s ease,max-height .28s ease}
/* ── barra de progreso de lectura en el borde inferior ──
::before es el riel (se ve cuánto falta), ::after es el avance.
El degradado va en coordenadas del elemento, así que el destello
blanco del 92% al 100% viaja siempre en la punta de la barra. */
.hd::before,
.hd::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:5px;
opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:2;
}
.hd::before{background:rgba(38,86,166,.14)}
.hd::after{
background:linear-gradient(90deg,
var(--acc) 0%,var(--acc-2) 42%,var(--pink) 88%,#FFF0F8 100%);
box-shadow:0 0 10px rgba(59,130,246,.70),0 0 22px rgba(229,34,143,.45);
transform:scaleX(var(--sp,0));transform-origin:left;
}
.hd.is-stuck::before{opacity:1}
.hd.is-stuck::after{opacity:1}
/* ── móvil: se esconde al bajar, vuelve al subir ── */
@media(max-width:1080px){
.hd.is-hidden{transform:translateY(-101%)}
.hd.is-hidden::before,
.hd.is-hidden::after{opacity:0}
/* en pantallas chicas la barra se afina un poco */
.hd::before,.hd::after{height:4px;bottom:-1px}
}
/* ── móvil: al pegarse cede la fila del CTA; abajo ya está la barra fija ── */
@media(max-width:860px){
.hd__quote{max-height:60px;overflow:hidden;transition:max-height .3s ease,opacity .25s ease}
.hd.is-stuck .hd__quote{max-height:0;opacity:0}
.hd.is-stuck .hd__in{row-gap:0;padding:8px 0 9px}
.hd.is-stuck .hd__logo img{height:32px}
.hd.is-stuck .hd__burger{width:40px;height:40px}
/* con el menú abierto el CTA vuelve, para que no falte dentro del panel */
.hd.menu-open .hd__quote{max-height:60px;opacity:1}
.hd.menu-open .hd__in{row-gap:9px}
}
@media(prefers-reduced-motion:reduce){
.hd,.hd__in,.hd__logo img,.hd__logo span,.hd__quote{transition:none!important}
.hd.is-hidden{transform:none}
}
/* ── Booking · bloques de paridad con la página vieja ── */
.bkconsult{
display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
background:var(--soft);border:1px solid var(--line);border-radius:var(--r);
padding:26px 30px;
}
.bkconsult h3{
margin:0;flex:1 1 420px;max-width:58ch;
font-family:var(--ff-body);font-size:clamp(17px,1.8vw,21px);font-weight:800;
line-height:1.35;color:var(--ink);letter-spacing:-.01em;
}
.bkconsult .btn{flex:0 0 auto}
.bktrust{
text-align:center;margin:0;
font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
font-size:clamp(26px,4.4vw,52px);line-height:1;letter-spacing:.01em;color:var(--ink);
}
.gtee__badges{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 40px;
padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.gtee__badges img{height:58px;width:auto;object-fit:contain}
.gtee__rates{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.gtee__rates li{
display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 14px;
}
.gtee__rates img{height:30px;width:auto;object-fit:contain;margin-bottom:4px}
.gtee__rates b{font-family:var(--ff-display);font-weight:800;font-size:32px;line-height:1;color:var(--ink)}
.gtee__rates span{font-size:13px;font-weight:600;color:var(--mut)}
@media(max-width:860px){
.bkconsult{padding:22px;text-align:center;justify-content:center}
.bkconsult .btn{width:100%;justify-content:center}
.gtee__rates{grid-template-columns:repeat(2,1fr)}
.gtee__badges img{height:44px}
}
.bkpick__c p{margin-bottom:16px}
.bkpick__t{display:block;font-family:var(--ff-display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:.01em;color:var(--ink);margin:0 0 10px}
/* ══════════════════════════════════════════════════════════
PLANTILLA DE SERVICIO · bloques compartidos por las 11
══════════════════════════════════════════════════════════ */
.sec__lead{
max-width:62ch;margin:12px auto 0;
color:var(--body);font-size:16px;line-height:1.62;
}
/* ── páginas de una sola modalidad: se oculta el switch y el otro panel ── */
/* la seccion ya tiene su propio H2: el del componente sobra */
.solo-hourly .oms-head .oms-eyebrow,.solo-hourly .oms-head .oms-title,
.solo-flat .oms-head .oms-eyebrow,.solo-flat .oms-head .oms-title{display:none!important}
.solo-hourly .oms-switchwrap,
.solo-hourly .oms-switchnote,
.solo-hourly .oms-guide,
.solo-hourly [data-panel="flat"]{display:none!important}
.solo-flat .oms-switchwrap,
.solo-flat .oms-switchnote,
.solo-flat .oms-guide,
.solo-flat [data-panel="hourly"]{display:none!important}
.solo-flat [data-panel="flat"]{display:block!important}
/* ── pasos con icono en círculo ──
Antes el icono iba de fondo recortado a 190px de alto: se ampliaba y se
veía pixelado y a medias. Ahora va completo (object-fit:contain) dentro
de un círculo, con el número en una pastilla sobre el borde. */
.steps--ic .step{text-align:center;padding:36px 24px 32px}
.steps--ic .step__ic{
position:relative;display:inline-grid;place-items:center;
width:clamp(104px,8.4vw,128px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle at 50% 34%,#fff 0%,#F1F6FF 100%);
border:1px solid var(--line);
box-shadow:0 16px 32px -22px rgba(10,28,58,.45), inset 0 1px 0 #fff;
margin-bottom:22px;
transition:border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.steps--ic .step__ic img{
display:block;width:56%;height:56%;object-fit:contain;background:none;
}
.steps--ic .step__n{
position:absolute;top:-4px;right:-8px;margin:0;
width:42px;height:42px;font-size:15.5px;
background:var(--paper);color:var(--ink);
border:1px solid var(--line);
box-shadow:0 8px 18px -12px rgba(10,28,58,.5);
}
.steps--ic .step h3{max-width:26ch;margin-inline:auto}
.step:hover .step__ic{
transform:translateY(-3px);border-color:var(--acc-2);
box-shadow:0 20px 38px -22px rgba(38,86,166,.55), inset 0 1px 0 #fff;
}
.step:hover .step__n{border-color:var(--acc-2);color:var(--acc)}
/* la línea punteada pasa por el centro de los círculos */
.steps--ic::before{top:calc(36px + clamp(52px,4.2vw,64px))}
/* ── la promesa: tres columnas ── */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.promise__c{
background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
padding:28px 26px;box-shadow:var(--shadow);
transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s;
}
.promise__c:hover{transform:translateY(-5px);box-shadow:0 3px 6px rgba(10,28,58,.05),0 28px 52px -26px rgba(10,28,58,.4)}
.promise__c h3{
font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
font-size:23px;line-height:1;letter-spacing:.01em;color:var(--ink);
margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.promise__c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.promise__c li{position:relative;padding-left:28px;font-size:14.8px;line-height:1.52;color:var(--body)}
.promise__c li b{color:var(--ink);font-weight:800}
.promise__c li::before{
content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
background:var(--soft) url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.promise__c--acc{border-color:var(--acc);box-shadow:0 22px 48px -24px rgba(38,86,166,.45)}
.promise__c--acc h3{color:var(--acc)}
/* ── bloque de cruce entre servicios ── */
.cross{
display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
background:var(--navy);border-radius:var(--r);padding:34px 38px;
background-image:radial-gradient(closest-side at 100% 0,rgba(59,130,246,.32),transparent 70%);
}
.cross h2{
margin:0;color:#fff;
font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
font-size:clamp(22px,2.8vw,34px);line-height:1.02;letter-spacing:.01em;
}
.cross h2 .hl{color:var(--acc-4)}
.cross .btn{flex:0 0 auto}
.cross--soft{
background:var(--soft);background-image:none;
border:1px solid var(--line);
}
.cross--soft h2{color:var(--ink)}
.cross--soft h2 .hl{color:var(--acc)}
.cross--soft p{margin:10px 0 0;max-width:56ch;color:var(--body);font-size:15px;line-height:1.6}
.cross p{margin:10px 0 0;max-width:56ch;color:rgba(255,255,255,.78);font-size:15px;line-height:1.6}
@media(max-width:980px){
.promise{grid-template-columns:1fr}
}
@media(max-width:680px){
.cross{padding:26px 22px;text-align:center;justify-content:center}
.cross .btn{width:100%;justify-content:center}
.steps--ic .step{padding:30px 20px 26px}
}
/* ══════════════════════════════════════════════════════════
HERO DE SERVICIO · formulario a la derecha
El copy manda a la izquierda y el formulario de cotización
queda fijo al lado, visible sin scrollear.
══════════════════════════════════════════════════════════ */
.bkh__grid{
display:grid;grid-template-columns:minmax(0,1fr) 424px;
gap:48px;align-items:center;
}
.bkh__grid .bkh__copy{max-width:none}
.bkh__grid .bkh__copy > p{max-width:46ch}
.bkh__form{justify-self:end;width:100%;max-width:424px}
.bkh__form .omvf{max-width:none;width:100%}
.bkh__trust{
list-style:none;margin:16px 0 0;padding:0;
display:flex;flex-direction:column;gap:9px;
}
.bkh__trust li{
display:flex;align-items:center;gap:9px;
font-size:13px;font-weight:700;color:rgba(255,255,255,.82);
}
.bkh__trust svg{width:15px;height:15px;flex:0 0 auto;color:#6EE7A8}
/* con formulario al lado, el panel no necesita tanto aire abajo */
.bkh__grid ~ *,
.bkh:has(.bkh__grid) .bkh__panel{padding-bottom:clamp(34px,4vw,54px)}
@media(max-width:1180px){
.bkh__grid{grid-template-columns:minmax(0,1fr) 380px;gap:32px}
.bkh__form{max-width:380px}
}
@media(max-width:980px){
.bkh__grid{grid-template-columns:1fr;gap:30px}
.bkh__form{justify-self:stretch;max-width:440px;margin:0 auto}
.bkh__trust{align-items:center}
}
/* ══════════════════════════════════════════════════════════
PÁGINAS DE SERVICIO LOCAL · intro, beneficios y listas
══════════════════════════════════════════════════════════ */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.intro--flip .intro__img{order:-1}
.intro__copy h2,.intro__copy h3{margin:0 0 18px}
.intro__copy h3{
font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
font-size:clamp(22px,2.6vw,30px);line-height:1.04;letter-spacing:.01em;color:var(--ink);
}
.intro__copy p{color:var(--body);font-size:15.5px;line-height:1.68;margin:0 0 14px}
.intro__copy p:last-child{margin-bottom:0}
.intro__img{margin:0}
.intro__img img{
display:block;width:100%;height:100%;max-height:460px;object-fit:cover;
border-radius:var(--r);background:var(--soft);box-shadow:var(--shadow);
}
.lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 20px}
.lista li{position:relative;padding-left:28px;font-size:14.8px;line-height:1.45;color:var(--body)}
.lista li::before{
content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
background:var(--paper) url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.bene{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Con 4 tarjetas la rejilla de 3 deja una sola huerfana en la segunda fila.
Con 2 columnas quedan 2 y 2. Afecta a las 4 paginas que tienen 4 tarjetas
(referral y tres mas) y no toca las 56 que tienen 6.
Va dentro de una media query: :has() pesa mas que .bene a secas y si no,
le gana tambien a la regla de una sola columna en movil. */
@media(min-width:601px){
.bene:has(> .bene__c:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
.bene__c{
background:var(--paper);border:1px solid var(--line);border-radius:18px;
padding:24px 22px;box-shadow:0 2px 4px rgba(10,28,58,.03),0 16px 34px -26px rgba(10,28,58,.3);
transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s,border-color .24s;
}
.bene__c:hover{transform:translateY(-5px);border-color:#C6D6F2;box-shadow:0 3px 6px rgba(10,28,58,.05),0 26px 48px -26px rgba(10,28,58,.4)}
.bene__c h3{
margin:0 0 9px;font-family:var(--ff-body);font-size:16px;font-weight:800;
line-height:1.28;color:var(--ink);letter-spacing:-.01em;
}
.bene__c p{margin:0;font-size:14.4px;line-height:1.55;color:var(--body)}
@media(max-width:1080px){
.bene{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
.intro,.intro--flip{grid-template-columns:1fr;gap:26px}
.intro--flip .intro__img{order:0}
.intro__img img{max-height:300px}
.lista{grid-template-columns:1fr}
}
@media(max-width:600px){
.bene{grid-template-columns:1fr}
}
/* ── franja "Explore Our Additional Moving Services" ── */
.rel{
background:var(--soft);border:1px solid var(--line);border-radius:var(--r);
padding:26px 30px;
}
.rel h3{
margin:0 0 16px;font-family:var(--ff-body);font-size:13px;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
}
.rel__links{display:flex;flex-wrap:wrap;gap:9px}
.rel__links a{
display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;
background:var(--paper);border:1px solid var(--line);text-decoration:none;
font-size:13.5px;font-weight:700;color:var(--ink);
transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.rel__links a:hover{background:var(--acc);border-color:var(--acc);color:#fff;transform:translateY(-2px)}
@media(max-width:680px){
.rel{padding:20px 18px}
.rel__links a{font-size:13px;padding:8px 13px}
}
/* ── tarjetas de contacto (/contacts-us) ── */
.cont{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:stretch}
.cont__c{
display:flex;flex-direction:column;
background:var(--paper);border:1px solid var(--line);border-radius:18px;
padding:26px 24px;
box-shadow:0 2px 4px rgba(10,28,58,.03),0 16px 34px -26px rgba(10,28,58,.3);
transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s,border-color .24s;
}
.cont__c:hover{transform:translateY(-5px);border-color:#C6D6F2;box-shadow:0 3px 6px rgba(10,28,58,.05),0 26px 48px -26px rgba(10,28,58,.4)}
.cont__c h3{
margin:0 0 10px;font-family:var(--ff-body);font-size:17px;font-weight:800;
line-height:1.28;color:var(--ink);letter-spacing:-.01em;
}
.cont__c p{margin:0 0 18px;font-size:14.4px;line-height:1.6;color:var(--body)}
.cont__c .btn{margin-top:auto;align-self:flex-start}
/* ── embeds (formulario GHL, widget de reseñas) ── */
.embed{
background:var(--paper);border:1px solid var(--line);border-radius:20px;
padding:10px;overflow:clip;
box-shadow:0 2px 4px rgba(10,28,58,.03),0 20px 44px -30px rgba(10,28,58,.35);
}
.embed iframe{display:block;width:100%;border:0;border-radius:14px}
.embed>div{min-height:320px}
@media(max-width:1080px){
.team{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
.cont{grid-template-columns:1fr}
.cont__c{padding:22px 19px}
.embed{padding:6px;border-radius:16px}
}
@media(max-width:560px){
.team{grid-template-columns:repeat(2,1fr);gap:14px}
.team__c figcaption{padding:13px 10px 16px}
.team__c figcaption b{font-size:14.5px}
.team__c figcaption span{font-size:12px}
}
/* ── fichas del equipo · mismo tratamiento que es.onlinemovers.miami ── */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.team__c{
margin:0;background:var(--paper);border:1px solid var(--line);border-radius:20px;
padding:16px 16px 20px;text-align:left;
box-shadow:0 2px 4px rgba(10,28,58,.03),0 16px 34px -26px rgba(10,28,58,.3);
transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s,border-color .24s;
}
.team__c:hover{transform:translateY(-5px);border-color:#C6D6F2;box-shadow:0 3px 6px rgba(10,28,58,.05),0 26px 48px -26px rgba(10,28,58,.4)}
/* la foto va enmascarada en circulo sobre un fondo claro, como en el sitio ES */
.team__ph{
position:relative;border-radius:16px;overflow:clip;margin-bottom:14px;
background:radial-gradient(circle at 50% 42%,#fff 0 58%,var(--soft) 58% 100%);
}
.team__ph img{
display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 18%;
clip-path:circle(48% at 50% 45%);
}
.team__c figcaption{display:block}
.team__c figcaption b{
display:block;font-family:var(--ff-body);font-size:16.5px;font-weight:800;
line-height:1.25;color:var(--ink);letter-spacing:-.015em;
}
.team__rol{
display:block;margin-top:4px;font-size:11.5px;font-weight:700;line-height:1.35;
color:var(--mut);letter-spacing:.09em;text-transform:uppercase;
}
.team__rol::before{content:"/ ";color:var(--acc);font-weight:800}
/* ── redes en las fichas (cuentas de empresa, las del footer) ── */
.team__soc{
display:flex;flex-wrap:wrap;gap:5px;
margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
}
.team__soc a{
display:inline-flex;align-items:center;justify-content:center;
width:27px;height:27px;border-radius:8px;
color:var(--mut);background:var(--soft);border:1px solid var(--line);
transition:color .18s,background .18s,border-color .18s,transform .18s;
}
.team__soc a:hover{color:#fff;background:var(--acc);border-color:var(--acc);transform:translateY(-2px)}
.team__soc a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.team__soc svg{display:block}
@media(max-width:1080px){ .team{grid-template-columns:repeat(3,1fr)} }
@media(max-width:820px){ .team{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
.team{gap:12px}
.team__c{padding:12px 12px 16px;border-radius:16px}
.team__c figcaption b{font-size:14.5px}
.team__rol{font-size:10.5px;letter-spacing:.07em}
.team__soc{gap:4px;margin-top:10px;padding-top:9px}
.team__soc a{width:24px;height:24px;border-radius:7px}
.team__soc svg{width:13px;height:13px}
}
/* ── página madre de áreas: rejilla de 4 condados ── */
.area__grid--full{grid-template-columns:repeat(2,1fr);gap:26px 30px}
.area__col h3{display:flex;align-items:center;gap:9px}
.area__n{
display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;
padding:0 6px;border-radius:999px;background:var(--acc);color:#fff;
font-family:var(--ff-body);font-size:11.5px;font-weight:800;letter-spacing:0;
}
.area__note{
margin:6px 0 13px;font-size:13.5px;line-height:1.55;color:var(--mut);max-width:52ch;
}
@media(max-width:820px){ .area__grid--full{grid-template-columns:1fr;gap:24px} }
/* ── /financing: las dos opciones reutilizan .fin (banda navy) ── */
.fin h3{
position:relative;z-index:2;margin:0;
font-family:var(--ff-display);font-size:clamp(28px,3vw,40px);line-height:1;
letter-spacing:.01em;color:#fff;text-transform:uppercase;
}
.fin h3 + p{margin-top:14px}
.fin strong{color:#fff;font-weight:800}
/* los puntos de esta pagina son texto plano, no cifra + etiqueta */
.fin__pts li{font-size:14px;color:rgba(255,255,255,.86);line-height:1.5;font-weight:600}
.fin__pts li::before{
content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
background:var(--acc-2);transform:translateY(-2px);
}
.fin .fin__pts{margin-top:24px;gap:14px}
.fin .fin__pts li{padding-bottom:12px}
/* la tarjeta del video se separa del fondo navy */
.fin .embed{position:relative;z-index:2;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.fin .embed iframe{border-radius:12px}
@media(max-width:880px){
.fin .embed{margin-top:26px}
}
/* ── 4 pasos: que llenen la fila en vez de dejar uno huérfano ── */
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--4 .step{padding:22px 20px 24px}
.steps--4 .step h3{font-size:15px}
.steps--4 .step p{font-size:13.5px}
@media(max-width:1080px){ .steps--4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .steps--4{grid-template-columns:1fr} }
/* ── ficha de costos por ciudad (/5-most-expensive-cities-in-florida) ── */
.costos{align-self:start}
.costos__l{
list-style:none;margin:0;padding:24px 26px;
background:var(--paper);border:1px solid var(--line);border-radius:18px;
box-shadow:0 2px 4px rgba(10,28,58,.03),0 16px 34px -26px rgba(10,28,58,.3);
display:flex;flex-direction:column;gap:16px;
}
.costos__l li{display:flex;flex-direction:column;gap:3px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.costos__l li:last-child{border-bottom:0;padding-bottom:0}
.costos__l b{
font-family:var(--ff-body);font-size:11px;font-weight:800;letter-spacing:.11em;
text-transform:uppercase;color:var(--mut);
}
.costos__l span{font-size:16px;font-weight:700;color:var(--ink);line-height:1.35;font-variant-numeric:tabular-nums}
.costos__cta{
margin-top:18px!important;padding:14px 16px;border-radius:12px;
background:var(--soft);border-left:3px solid var(--acc);
font-size:14px!important;color:var(--body);
}
/* ── documentos legales (/privacy-policy, /terms-conditions) ── */
.bkh--doc .bkh__panel{padding-bottom:clamp(30px,4vw,54px)}
.doc__hd{max-width:760px}
.doc__hd h1{margin-bottom:14px}
.doc__upd{
margin-top:18px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.6);
font-variant-numeric:tabular-nums;
}
.doc{max-width:760px;margin:0 auto}
.doc h2{
margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line);
font-family:var(--ff-body);font-size:19px;font-weight:800;letter-spacing:-.015em;
line-height:1.3;color:var(--ink);
}
.doc > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h3{
margin:26px 0 9px;font-family:var(--ff-body);font-size:14.5px;font-weight:800;
letter-spacing:.01em;color:var(--ink);
}
.doc p{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--body)}
.doc ul{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.doc li{font-size:14.5px;line-height:1.6;color:var(--body)}
.doc a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
/* lo que de verdad hay que leer antes de firmar */
.doc__note{
margin:0 0 16px!important;padding:14px 17px;
background:var(--soft);border-left:3px solid var(--acc);border-radius:0 10px 10px 0;
font-size:14.5px!important;line-height:1.65!important;color:var(--ink)!important;font-weight:600;
}
@media(max-width:680px){
.doc h2{font-size:17.5px;margin-top:34px}
.doc p,.doc li{font-size:14.5px}
}
/* ── /payment: datos bancarios ── */
.pay{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.pay__c{
background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px 26px 28px;
box-shadow:0 2px 4px rgba(10,28,58,.03),0 16px 34px -26px rgba(10,28,58,.3);
}
.pay__c h2{margin:6px 0 0;font-family:var(--ff-body);font-size:20px;font-weight:800;letter-spacing:-.015em}
.pay__c p{margin:12px 0 18px;font-size:14.5px;line-height:1.6;color:var(--body)}
.pay__dl{margin:18px 0 0;display:flex;flex-direction:column;gap:0}
.pay__dl > div{
display:flex;justify-content:space-between;align-items:baseline;gap:18px;
padding:13px 0;border-bottom:1px solid var(--line);
}
.pay__dl > div:last-child{border-bottom:0;padding-bottom:0}
.pay__dl dt{
margin:0;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--mut);flex:0 0 auto;
}
.pay__dl dd{
margin:0;font-size:16px;font-weight:700;color:var(--ink);text-align:right;
font-variant-numeric:tabular-nums;letter-spacing:.01em;word-break:break-word;
}
.pay__note{
margin:24px auto 0;max-width:760px;text-align:center;font-size:15px;color:var(--body);
}
.pay__note a{color:var(--acc);font-weight:700}
@media(max-width:820px){
.pay{grid-template-columns:1fr}
.pay__dl > div{flex-direction:column;gap:3px}
.pay__dl dd{text-align:left}
}
/* ── escalera de los 4 niveles (premier-services) ── */
.tier{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}
.tier__s{
display:flex;flex-direction:column;gap:7px;padding:18px 16px 20px;
background:var(--paper);border:1px solid var(--line);border-radius:14px;
text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.tier__s:hover{border-color:#C6D6F2;transform:translateY(-3px);
box-shadow:0 3px 6px rgba(10,28,58,.05),0 20px 38px -26px rgba(10,28,58,.4)}
.tier__n{
font-family:var(--ff-body);font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--mut);
}
.tier__s b{font-family:var(--ff-body);font-size:15.5px;font-weight:800;color:var(--ink);
letter-spacing:-.012em;line-height:1.25}
/* el nivel en el que estas */
.tier__s--on{background:var(--navy);border-color:var(--navy);pointer-events:none}
.tier__s--on .tier__n{color:var(--acc-2)}
.tier__s--on b{color:#fff}
.tier__note{
margin:18px auto 0;max-width:60ch;text-align:center;font-size:14px;color:var(--mut);line-height:1.6;
}
.tier__note a{color:var(--acc);font-weight:700}
/* lo que NO entra en el nivel */
.lista--no li{color:var(--mut)}
.lista--no li::before{
background:none!important;content:"×";color:var(--mut);font-weight:800;font-size:15px;
line-height:1;width:auto;height:auto;transform:none;
}
@media(max-width:820px){ .tier{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .tier{grid-template-columns:1fr;gap:8px} .tier__s{padding:14px 15px 16px} }
/* ══════════════════════════════════════════════════════════
AJUSTES · redes con color de marca, escudo verde, logos
══════════════════════════════════════════════════════════ */
/* ── redes sociales con el color oficial de cada una ──
Van coloreadas en reposo. Cada enlace declara su color de marca en
--soc (fondo, puede ser degradado), --glow (color de la sombra) y
--anillo (un borde interior para las que son negras y se perderían
sobre el navy del pie). El hover no cambia el color: solo eleva,
aviva un poco y agranda el halo. */
.ft__soc a{
--soc:rgba(255,255,255,.12);
--glow:rgba(10,28,58,.9);
--anillo:0 0 0 0 transparent;
background:var(--soc);color:#fff;
box-shadow:var(--anillo),
0 5px 12px -7px var(--glow),
inset 0 1px 0 rgba(255,255,255,.22);
transition:transform .24s cubic-bezier(.2,.7,.3,1),
box-shadow .24s ease, filter .24s ease;
}
.ft__soc a svg{transition:transform .24s cubic-bezier(.2,.7,.3,1)}
/* efecto sutil: se eleva, avivan el color y crece el halo */
.ft__soc a:hover,
.ft__soc a:focus-visible{
background:var(--soc);
transform:translateY(-3px);
filter:saturate(1.14) brightness(1.09);
box-shadow:var(--anillo),
0 12px 22px -9px var(--glow),
inset 0 1px 0 rgba(255,255,255,.34);
}
.ft__soc a:hover svg{transform:scale(1.1)}
.ft__soc a:active{transform:translateY(-1px)}
.ft__soc a[aria-label="Facebook"]{--soc:#1877F2;--glow:#1877F2}
.ft__soc a[aria-label="Instagram"]{
--soc:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);
--glow:#D6249F;
}
/* negras: sin un anillo se funden con el navy del pie */
.ft__soc a[aria-label="TikTok"] {--soc:#010101;--glow:#FE2C55;--anillo:inset 0 0 0 1.4px #25F4EE}
.ft__soc a[aria-label="YouTube"] {--soc:#FF0000;--glow:#FF0000}
.ft__soc a[aria-label="LinkedIn"]{--soc:#0A66C2;--glow:#0A66C2}
.ft__soc a[aria-label="X"] {--soc:#0F1114;--glow:rgba(255,255,255,.55);--anillo:inset 0 0 0 1.2px rgba(255,255,255,.30)}
.ft__soc a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
.ft__soc a,.ft__soc a svg{transition:none}
.ft__soc a:hover{transform:none}
.ft__soc a:hover svg{transform:none}
}
/* mismas reglas para las redes de las fichas del equipo */
.team__soc a[aria-label*="Facebook"]:hover {background:#1877F2;border-color:#1877F2;color:#fff}
.team__soc a[aria-label*="Instagram"]:hover{
background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);
border-color:#D6249F;color:#fff;
}
.team__soc a[aria-label*="TikTok"]:hover {background:#000;border-color:#000;color:#fff}
.team__soc a[aria-label*="YouTube"]:hover {background:#FF0000;border-color:#FF0000;color:#fff}
.team__soc a[aria-label*="LinkedIn"]:hover{background:#0A66C2;border-color:#0A66C2;color:#fff}
.team__soc a[aria-label*=" X"]:hover {background:#000;border-color:#000;color:#fff}
/* ── escudo "Licensed & Insured" en verde ──
Es el sello de confianza del footer: tiene que saltar sobre el navy. */
.ft__lic{
background:linear-gradient(135deg,rgba(22,163,74,.20),rgba(22,163,74,.08));
border:1px solid rgba(74,222,128,.45);
box-shadow:0 0 0 1px rgba(74,222,128,.10) inset,0 10px 26px -18px rgba(34,197,94,.9);
}
.ft__lic svg{width:30px;height:30px;color:#4ADE80;stroke-width:2}
.ft__lic b{color:#BBF7D0}
.ft__lic i b{color:#DCFCE7}
.ft__lic .lic-link--dark{color:#DCFCE7}
.ft__lic .lic-link--dark:hover{color:#fff}
/* el mismo sello en la franja de acreditaciones del homepage */
.creds__it--lic{
background:linear-gradient(135deg,rgba(22,163,74,.10),rgba(22,163,74,.03));
border-color:rgba(22,163,74,.35);
}
.creds__it--lic b{color:#15803D}
.creds__it--lic .lic-link{color:#166534}
.creds__it--lic .lic-link:hover{color:#15803D}
/* ── logos más grandes ── */
.hd__logo img{height:56px;max-width:265px}
.hd.is-stuck .hd__logo img{height:44px}
.ft__logo img{height:62px;margin-bottom:18px}
@media(max-width:1330px){
.hd__logo img{height:50px;max-width:230px}
.hd.is-stuck .hd__logo img{height:40px}
}
@media(max-width:1040px){
.hd__logo img{height:46px;max-width:210px}
.ft__logo img{height:54px}
}
@media(max-width:560px){
.hd__logo img{height:40px;max-width:180px}
.ft__logo img{height:48px}
.ft__lic svg{width:26px;height:26px}
}
/* ══════════════════════════════════════════════════════════
ANCHO · el contenedor aprovecha las pantallas grandes
La barra del menú pedía 1.170px y solo tenía 1.120: por eso
se cortaba "Get a Quote". Se ensancha el lienzo, se modera
el logo y el menú pasa a ir centrado.
══════════════════════════════════════════════════════════ */
.canvas{max-width:1690px}
.container{max-width:1530px}
/* logo: más grande que el original, pero sin comerse la barra */
.hd__logo img{height:46px;max-width:215px}
.hd.is-stuck .hd__logo img{height:38px}
.ft__logo img{height:52px}
/* menú centrado entre el logo y los controles de la derecha */
.hd__nav{margin-left:auto;margin-right:auto}
.hd__lang{margin-left:0}
@media(max-width:1700px){ .container{max-width:1470px} }
@media(max-width:1560px){ .container{max-width:1320px} }
@media(max-width:1400px){ .container{max-width:1180px} }
@media(max-width:1330px){
.hd__logo img{height:42px;max-width:190px}
.hd.is-stuck .hd__logo img{height:36px}
}
@media(max-width:1040px){
.hd__logo img{height:44px;max-width:200px}
.ft__logo img{height:48px}
}
@media(max-width:560px){
.hd__logo img{height:38px;max-width:170px}
.ft__logo img{height:44px}
}
/* ── menú realmente centrado ──
El logo y el bloque de controles pesan distinto, así que centrar el nav
con margin:auto lo dejaba 108px a la izquierda. Dándoles a ambos lados
el mismo flex-basis, el centro del nav coincide con el de la barra. */
/* El logo mide 215px y el bloque de la derecha 416: centrar el menú en el
eje exacto de la barra dejaba 261px de aire a la izquierda y 53 a la
derecha. Con márgenes automáticos el hueco sobrante se reparte por igual,
así que el menú queda ópticamente centrado entre ambos bloques. */
.hd__logo{flex:0 1 auto;min-width:0}
.hd__end{
flex:0 0 auto;
display:flex;align-items:center;justify-content:flex-end;gap:16px;
}
.hd__nav{flex:0 0 auto;margin-left:auto;margin-right:auto}
/* con el lienzo ancho el menú puede respirar: texto algo mayor y más
holgura por enlace, que además reduce el aire sobrante a los lados */
@media(min-width:1401px){
.hd__nav > a,.hd__dd-t{font-size:14.5px;padding:10px 13px}
.hd__nav > a::after,.hd__dd-t::after{left:13px;right:13px}
}
@media(max-width:1040px){
/* en móvil el nav sale del flujo: el logo deja de competir por el espacio */
.hd__logo{flex:0 0 auto;margin-right:0}
.hd__end{flex:1 1 auto;min-width:0;margin-left:0;gap:10px}
}
/* ══════════════════════════════════════════════════════════
BENTO · CTA ancha: tres cajas de vidrio flotando
Al ensanchar el lienzo quedaba mucho aire entre el texto y el
botón. Son decorativas (aria-hidden y sin eventos de puntero).
══════════════════════════════════════════════════════════ */
.bt__float{
flex:1 1 auto;align-self:center;
display:flex;align-items:center;justify-content:center;
gap:clamp(18px,3.4vw,54px);
position:relative;z-index:1;pointer-events:none;
}
.bt__float i{
display:block;line-height:0;
filter:drop-shadow(0 20px 24px rgba(4,20,50,.50));
animation:btFlota 7s ease-in-out infinite;
will-change:transform;
}
.bt__float i svg{display:block;width:100%;height:auto}
/* tamaños y alturas distintas: el grupo se lee suelto, no alineado */
.bt__float i:nth-child(1){
width:clamp(76px,7.6vw,110px);margin-bottom:26px;
--g1:-9deg;--g2:-3deg;animation-duration:6.2s;animation-delay:-.9s;
}
.bt__float i:nth-child(2){
width:clamp(104px,10.4vw,150px);margin-top:14px;
--g1:5deg;--g2:-2deg;animation-duration:7.6s;animation-delay:-3.1s;
}
.bt__float i:nth-child(3){
width:clamp(62px,6.2vw,88px);margin-bottom:12px;
--g1:-4deg;--g2:7deg;animation-duration:5.4s;animation-delay:-1.9s;
}
@keyframes btFlota{
0%,100%{transform:translateY(6px) rotate(var(--g1,0deg))}
50% {transform:translateY(-10px) rotate(var(--g2,0deg))}
}
/* por debajo de este ancho la CTA se apila y las cajas estorban */
@media(max-width:1000px){ .bt__float{display:none} }
@media(prefers-reduced-motion:reduce){
.bt__float i{animation:none;transform:rotate(var(--g1,0deg))}
}
/* ══════════════════════════════════════════════════════════
POR QUÉ NOSOTROS · la foto es vertical y a media columna medía
~1030px de alto contra 490 del texto, así que la fila quedaba
desequilibrada. Se recorta en alto dejando al equipo completo
(object-position centrado en las personas, no en la imagen).
══════════════════════════════════════════════════════════ */
.feat__media img{
height:clamp(520px,42vw,660px);
object-fit:cover;object-position:50% 58%;
}
@media(max-width:1080px){
.feat__media img{height:clamp(340px,64vw,480px)}
}
/* ══════════════════════════════════════════════════════════
BOOKING · esta portada no lleva el formulario de presupuesto,
así que el lado derecho quedaba vacío. Mismas cajas de cartón
de la home, más grandes. Decorativas: aria-hidden y sin
eventos de puntero.
══════════════════════════════════════════════════════════ */
.bkh .container{position:relative}
.bkh__boxes{
position:absolute;z-index:1;pointer-events:none;
right:30px;top:50%;transform:translateY(-50%);
display:flex;align-items:center;gap:clamp(18px,2.6vw,44px);
}
.bkh__boxes i{
display:block;line-height:0;
filter:drop-shadow(0 26px 30px rgba(3,14,38,.55));
animation:btFlota 7s ease-in-out infinite;
will-change:transform;
}
.bkh__boxes i svg{display:block;width:100%;height:auto}
.bkh__boxes i:nth-child(1){
width:clamp(96px,9.2vw,142px);margin-bottom:58px;
--g1:-9deg;--g2:-3deg;animation-duration:6.8s;animation-delay:-1.4s;
}
.bkh__boxes i:nth-child(2){
width:clamp(130px,12.8vw,198px);margin-top:44px;
--g1:5deg;--g2:-2deg;animation-duration:8.2s;animation-delay:-3.6s;
}
.bkh__boxes i:nth-child(3){
width:clamp(78px,7.6vw,118px);margin-bottom:16px;
--g1:-4deg;--g2:7deg;animation-duration:5.9s;animation-delay:-2.2s;
}
/* el titular llega hasta ~810px: por debajo de este ancho el contenedor
se estrecha y las cajas empezarían a montarse sobre el texto */
@media(max-width:1560px){ .bkh__boxes{display:none} }
@media(prefers-reduced-motion:reduce){
.bkh__boxes i{animation:none;transform:rotate(var(--g1,0deg))}
}
/* ══════════════════════════════════════════════════════════
ÁREAS · cajas de cartón en la banda de cierre
La banda es más baja que la CTA de la home, así que van algo
más chicas. Se reparten el hueco entre el texto y el botón.
══════════════════════════════════════════════════════════ */
.cross--cajas{overflow:hidden}
.cross--cajas .bt__float{gap:clamp(16px,2.6vw,42px)}
.cross--cajas .bt__float i:nth-child(1){width:clamp(62px,6.2vw,90px);margin-bottom:20px}
.cross--cajas .bt__float i:nth-child(2){width:clamp(84px,8.4vw,122px);margin-top:12px}
.cross--cajas .bt__float i:nth-child(3){width:clamp(50px,5vw,72px);margin-bottom:8px}
/* por debajo de 1440 la banda parte el botón a una segunda línea:
medido en 1400 y en 1100, así que ahí las cajas se retiran */
@media(max-width:1439px){ .cross--cajas .bt__float{display:none} }
/* ══════════════════════════════════════════════════════════
404 · pagina de error
══════════════════════════════════════════════════════════ */
.e404__n{
display:inline-block;margin-bottom:14px;
font-family:var(--ff-display);font-size:clamp(46px,6vw,72px);line-height:1;
color:var(--acc-4);letter-spacing:.04em;
-webkit-text-stroke:1px rgba(138,182,255,.55);
}
.e404 h1{margin-top:4px}
.e404 > p{
color:rgba(255,255,255,.8);font-size:clamp(15px,1.35vw,17.5px);
line-height:1.62;max-width:52ch;margin:0 0 26px;
}
.e404__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);
}
.e404__c{
display:block;text-decoration:none;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
padding:24px 24px 26px;
transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.e404__c h3{margin:0 0 8px;font-size:17.5px;color:var(--ink);letter-spacing:-.01em}
.e404__c p{margin:0;font-size:14px;line-height:1.55;color:var(--body)}
.e404__c:hover{
transform:translateY(-4px);border-color:transparent;
box-shadow:0 22px 44px -28px rgba(10,28,58,.42);
}
.e404__c:hover h3{color:var(--acc)}
@media(max-width:900px){ .e404__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .e404__grid{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .e404__c:hover{transform:none} }