@import url("/assets/fonts.css");

/* ============ base ============ */
:root{
  --navy:#282A5B; --navy-d:#1A1C3D; --navy-l:#3A3D74;
  --red:#ED1B24; --red-d:#C4292D;
  --ink:#14162B; --body:#4B5468; --muted:#77809A;
  --line:#E4E7EE; --wash:#F5F7FB; --white:#fff;
  --shell:1180px; --gut:24px;
  --r:4px;
  --shadow:0 1px 2px rgba(20,22,43,.05), 0 8px 24px -12px rgba(20,22,43,.16);
  --shadow-lg:0 2px 4px rgba(20,22,43,.05), 0 22px 48px -20px rgba(20,22,43,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--body);
  font:400 17px/1.65 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:Archivo, system-ui, sans-serif; color:var(--ink);
  margin:0; line-height:1.1; letter-spacing:-.022em; font-weight:700;
}
h1{font-size:clamp(2.3rem,5.2vw,3.7rem); font-weight:800; letter-spacing:-.032em}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.028em}
h3{font-size:1.2rem}
p{margin:0 0 1.05em}
.shell{max-width:var(--shell); margin:0 auto; padding:0 var(--gut)}
.narrow{max-width:760px}
section{padding:clamp(56px,7vw,96px) 0}
.wash{background:var(--wash)}

/* ============ tipografía de apoyo ============ */
.eyebrow{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:12px; margin:0 0 18px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:80px}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:""; flex:1; height:1px; background:var(--line); max-width:80px}
.lede{font-size:1.13rem; color:var(--body)}
.center{text-align:center}

/* placa: guiño a la identidad del rubro */
.plate{
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--navy); border-radius:6px; padding:5px 11px;
  font-family:Archivo,sans-serif; font-weight:800; font-size:.74rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--navy);
  background:linear-gradient(#fff,#eef1f7);
}
.plate .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}

/* ============ botones ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:Archivo,sans-serif; font-weight:700; font-size:.95rem;
  letter-spacing:.01em; padding:14px 26px; border-radius:var(--r);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red-d); color:#fff}
.btn-red:hover{background:#a8211f}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-d)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:#fff}
.btn-ghost:hover{border-color:var(--navy); color:var(--navy)}
.btn-light{background:#fff; color:var(--navy)}
.btn-light:hover{background:#eef1f7}
.btn-sm{padding:10px 18px; font-size:.87rem}

/* ============ header ============ */
.hdr{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line);
}
.hdr .in{display:flex; align-items:center; gap:28px; height:76px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:46px; width:auto}
.nav{display:flex; gap:26px; margin-left:auto}
.nav a{
  font-family:Archivo,sans-serif; font-weight:600; font-size:.93rem;
  color:var(--ink); text-decoration:none; padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transition:transform .16s ease;
}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--red)}
.hdr-cta{display:flex; align-items:center; gap:14px; flex:none}
.hdr-tel{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.95rem;
  color:var(--navy); text-decoration:none; white-space:nowrap;
}
.hdr-tel:hover{color:var(--red)}
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center; margin-left:auto;
}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ============ hero ============ */
.hero{padding:clamp(44px,6vw,84px) 0 clamp(52px,6vw,92px); overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero h1{margin:16px 0 18px}
.hero .lede{max-width:30ch; margin-bottom:26px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.hero .fine{font-size:.94rem; color:var(--muted); margin:0}
.hero-media{position:relative}
.hero-media::before{
  content:""; position:absolute; inset:auto -8% -6% 8%; height:62%;
  background:var(--wash); border-radius:var(--r); z-index:0;
}
.hero-media img{position:relative; z-index:1}

/* ============ franja de datos ============ */
.strip{background:var(--navy); color:#fff}
.strip .in{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,4vw,48px); padding:clamp(34px,4vw,52px) 0;
}
.strip .item{display:flex; flex-direction:column; gap:5px}
.strip .n{font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(1.9rem,3.4vw,2.5rem); color:#fff; letter-spacing:-.03em; line-height:1}
.strip .t{font-size:.98rem; color:#C7CBE6}
.strip .item + .item{border-left:1px solid rgba(255,255,255,.16); padding-left:clamp(20px,4vw,48px)}

/* ============ servicios ============ */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#cfd5e4}
.card .ph{aspect-ratio:16/10; overflow:hidden; background:var(--wash)}
.card .ph img{width:100%; height:100%; object-fit:cover}
.card .bd{padding:22px 22px 26px}
.card h3{margin:0 0 9px; color:var(--navy); font-size:1.1rem; line-height:1.28}
.card p{margin:0; font-size:.97rem; color:var(--body)}

/* ============ bloque partido ============ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,68px); align-items:center}
.split.rev .txt{order:2}
.split img{border-radius:var(--r)}

/* lista de razones */
.reasons{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:18px}
.reasons li{padding-left:44px; position:relative}
.reasons b{display:block; font-family:Archivo,sans-serif; color:var(--ink); font-size:1.02rem; margin-bottom:3px}
.reasons li::before{
  content:""; position:absolute; left:0; top:2px; width:28px; height:28px;
  border-radius:50%; background:var(--wash); border:1px solid var(--line);
}
.reasons li::after{
  content:""; position:absolute; left:9px; top:11px; width:9px; height:5px;
  border-left:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(-45deg);
}

/* ============ formulario ============ */
.form-wrap{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3.4vw,36px); box-shadow:var(--shadow);
}
.field{margin-bottom:16px}
.field label{
  display:block; font-family:Archivo,sans-serif; font-weight:600; font-size:.86rem;
  color:var(--ink); margin-bottom:6px;
}
.field .req{color:var(--red)}
.field input,.field textarea{
  width:100%; font:400 16px/1.5 Inter,sans-serif; color:var(--ink);
  padding:12px 14px; border:1px solid #D5DAE5; border-radius:var(--r);
  background:#fff; transition:border-color .14s ease, box-shadow .14s ease;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(40,42,91,.12);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red-d)}
.consent{display:flex; gap:11px; align-items:flex-start; margin-bottom:14px}
.consent input{margin:3px 0 0; width:17px; height:17px; flex:none; accent-color:var(--navy)}
.consent span{font-size:.8rem; line-height:1.5; color:var(--muted)}
.form-legal{font-size:.8rem; color:var(--muted); margin:14px 0 0}
.form-legal a{color:var(--navy)}
.notice{padding:14px 16px; border-radius:var(--r); margin-bottom:16px; font-size:.96rem}
.notice.ok{background:#EAF5EC; color:#1F5C2E; border:1px solid #C8E3CE}
.notice.err{background:#FDECEB; color:#8E2D29; border:1px solid #F3CFCD}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ============ contacto ============ */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:start}
.info-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:22px}
.info-list dt{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.info-list dd{margin:0; font-size:1.06rem; color:var(--ink)}
.info-list dd a{color:var(--navy); text-decoration:none; font-weight:500}
.info-list dd a:hover{color:var(--red)}
.map{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:8px}
.map iframe{display:block; width:100%; height:380px; border:0; filter:saturate(.92)}

/* ============ ciudades ============ */
.cities{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; justify-content:center}
.cities span{
  font-size:.87rem; color:var(--body); background:#fff; border:1px solid var(--line);
  border-radius:100px; padding:6px 14px;
}

/* ============ CTA final ============ */
.endcta{background:var(--navy); color:#fff; text-align:center}
.endcta h2{color:#fff}
.endcta p{color:#C7CBE6; max-width:52ch; margin:14px auto 28px}
.endcta .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ============ footer ============ */
.ftr{background:var(--navy-d); color:#AFB5D6; padding:56px 0 28px; font-size:.94rem}
.ftr a{color:#D6DAF0; text-decoration:none}
.ftr a:hover{color:#fff}
.ftr .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:38px}
.ftr h4{color:#fff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin:0 0 14px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ftr img{height:40px; width:auto; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.92}
.ftr .bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.86rem;
}

/* ============ barra móvil ============ */
.callbar{display:none}

/* ============ páginas internas ============ */
.phead{background:var(--wash); border-bottom:1px solid var(--line); padding:clamp(40px,5vw,64px) 0}
.phead h1{margin:12px 0 0}
.prose h2{margin:2em 0 .6em; font-size:1.5rem}
.prose h3{margin:1.8em 0 .5em; font-size:1.12rem; color:var(--navy)}
.prose ul{padding-left:22px}
.prose li{margin-bottom:.5em}

/* ============ responsive ============ */
@media (max-width:960px){
  .hero .grid,.split,.contact-grid{grid-template-columns:1fr}
  .split.rev .txt{order:0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .strip .in{grid-template-columns:1fr; gap:22px}
  .strip .item + .item{border-left:0; border-top:1px solid rgba(255,255,255,.16); padding-left:0; padding-top:22px}
  .hero-media{order:-1}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav,.hdr-tel{display:none}
  .burger{display:flex}
  .hdr.open .nav{
    display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column;
    background:#fff; border-bottom:1px solid var(--line); padding:18px var(--gut) 24px; gap:4px;
  }
  .hdr.open .nav a{padding:11px 0; border-bottom:1px solid var(--line)}
  .hdr .in{gap:12px}
  .hdr-cta .btn{display:none}
  .cards{grid-template-columns:1fr}
  .ftr .cols{grid-template-columns:1fr; gap:30px}
  body{padding-bottom:66px}
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px; position:fixed; bottom:0; left:0; right:0;
    z-index:70; background:var(--line); box-shadow:0 -2px 14px rgba(20,22,43,.14);
  }
  .callbar a{
    background:#fff; text-align:center; padding:15px 8px; text-decoration:none;
    font-family:Archivo,sans-serif; font-weight:700; font-size:.92rem; color:var(--navy);
  }
  .callbar a.primary{background:var(--red-d); color:#fff}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
:focus-visible{outline:3px solid rgba(40,42,91,.45); outline-offset:2px; border-radius:2px}

/* ============ bloques del original ============ */
/* el original usa h3 para el titulo del hero y h1 para "USA AUTO TAGS & TITLES";
   se respeta la jerarquia y se ajusta solo el tamano visual */
.display{
  font-size:clamp(2.3rem,5.2vw,3.7rem); font-weight:800; letter-spacing:-.032em;
  margin:16px 0 18px;
}
.section-title{
  font-size:clamp(1.75rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.028em;
}
h1.center{margin-bottom:44px; text-align:center}

/* franja "Open 7 days a week" */
.band{background:var(--navy); color:#D5D9F0}
.band .band-title{
  color:#fff; font-size:clamp(1.75rem,3.4vw,2.6rem); font-weight:800;
  letter-spacing:-.028em; margin-bottom:16px;
}
.band p{color:#C7CBE6; max-width:44ch}
.band .btn{margin-top:12px}

/* cajas de "USA AUTO TAGS & TITLES" */
.boxes{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 34px}
.box h3{
  color:var(--navy); font-size:1.06rem; line-height:1.3; margin-bottom:9px;
  padding-top:14px; border-top:2px solid var(--red);
}
.box p{margin:0; font-size:.97rem}

@media (max-width:960px){ .boxes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .boxes{grid-template-columns:1fr; gap:26px} }

/* lista de razones en dos columnas, para el bloque de 6 */
.reasons.cols{grid-template-columns:1fr 1fr; gap:20px 26px}
.reasons.cols li{font-size:.95rem}
.reasons.cols b{font-size:.97rem; line-height:1.3}
@media (max-width:1080px){ .reasons.cols{grid-template-columns:1fr} }

/* la banda agregada usa el azul oscuro, para no fundirse con la franja */
.band{background:var(--navy-d)}

/* seccion "let's meet" */
.meet{background:var(--wash)}
.meet .cta{display:flex; gap:12px; flex-wrap:wrap}

/* el mapa, con mas presencia */
.map iframe{height:440px}

/* las 6 cajas del bloque agregado: h3 con el mismo peso visual que tenían como negrita */
.reasons.cols li h3{
  font-family:Archivo,sans-serif; color:var(--ink); font-size:.97rem;
  line-height:1.3; margin:0 0 3px; font-weight:700;
}