/* =========================================================
   TRAFIPAQ — Resoluciones Logísticas
   Paleta de marca: azul #6DAFDA · verde #74AE61 · negro #000 · blanco #fff
   ========================================================= */

/* =========================================================
   TIPOGRAFÍAS PROPIAS
   Archivo e Inter servidas desde el propio hosting. No se pide nada a
   Google: el navegador del visitante no contacta ningún servidor ajeno,
   así que no se filtra su IP a terceros y el sitio funciona igual sin
   conexión a dominios externos.
   Son las mismas fuentes variables que servía Google, sólo los tramos
   latin y latin-ext (los que usa el castellano).
   ========================================================= */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../font/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../font/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../font/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../font/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}



/* ---------- TOKENS ---------- */
:root{
  /* marca */
  --azul:#6DAFDA;
  --verde:#74AE61;
  --negro:#000000;
  --blanco:#FFFFFF;

  /* variantes derivadas (misma familia, para contraste y profundidad) */
  --azul-900:#1F5C82;
  --azul-700:#2E7FAE;
  --azul-500:#4E9BCB;
  --azul-100:#E4F1F9;
  --verde-900:#2F5324;
  --verde-700:#4C7C3C;
  --verde-500:#5E9A4C;
  --verde-100:#E7F2E2;

  /* neutros */
  --ink:#0A0A0A;
  --ink-2:#1A1A1A;
  --ink-3:#2B2B2B;
  --gris-900:#111315;
  --gris-700:#3D444A;
  --gris-500:#6B7480;
  --gris-300:#C9CFD6;
  --gris-200:#E3E7EB;
  --gris-100:#F2F4F6;
  --gris-50:#F8F9FA;

  /* sistema */
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --wrap:1200px;
  --gutter:clamp(18px, 4vw, 40px);
  --sec-pad:clamp(64px, 8vw, 116px);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(10,10,10,.06);
  --shadow-md:0 2px 6px rgba(0,0,0,.07), 0 18px 44px rgba(10,10,10,.10);
  --shadow-lg:0 30px 80px rgba(0,0,0,.28);
  --grad:linear-gradient(100deg, var(--azul) 0%, var(--verde) 100%);
  /* Mismo degradado, profundizado, para llevar texto blanco encima */
  --grad-hondo:linear-gradient(100deg, #256A93 0%, #3D6830 100%);
  --ease:cubic-bezier(.22,.75,.28,1);

  --font-display:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.65;
  color:var(--ink);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  /* clip (no "hidden") para no crear un contenedor de scroll que rompa el header sticky */
  overflow-x:clip;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; line-height:1.04; letter-spacing:-.02em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}
svg{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
:focus-visible{outline:3px solid var(--azul); outline-offset:3px; border-radius:4px}

.wrap{width:min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline:auto}
.skip-link{position:absolute; left:-9999px; top:0; z-index:999; background:var(--negro); color:#fff; padding:12px 18px}
.skip-link:focus{left:12px; top:12px}

/* ---------- HELPERS ---------- */
.ico{width:1.05em; height:1.05em; flex:none}

.stripes{display:inline-flex; flex-direction:column; gap:3px; width:26px; flex:none}
.stripes i{display:block; height:3px; border-radius:2px; background:var(--azul)}
.stripes i:nth-child(2){background:var(--verde); width:80%}
.stripes i:nth-child(3){background:var(--azul); width:60%}
.stripes--lg{width:56px; gap:6px}
.stripes--lg i{height:6px}

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--azul-900);
  margin:0 0 18px;
}
.eyebrow--light{color:#fff}
.eyebrow--light .stripes i:nth-child(2){background:var(--verde)}

.txt-grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- BOTONES ---------- */
.btn{
  --btn-bg:var(--negro); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; border-radius:999px; border:2px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-display); font-weight:700; font-size:.94rem; letter-spacing:.01em;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ico{transition:transform .2s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

.btn--primary{--btn-bg:var(--azul-700); box-shadow:0 8px 24px rgba(46,127,174,.32)}
.btn--primary:hover{--btn-bg:var(--azul-900); box-shadow:0 14px 34px rgba(46,127,174,.42)}
.btn--dark{--btn-bg:var(--negro)}
.btn--dark:hover{--btn-bg:var(--ink-3)}
.btn--line{--btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--gris-300)}
.btn--line:hover{--btn-bd:var(--negro)}
.btn--ghost{--btn-bg:rgba(255,255,255,.10); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.45); backdrop-filter:blur(6px)}
.btn--ghost:hover{--btn-bg:#fff; --btn-fg:var(--negro); --btn-bd:#fff}
.btn--verde{--btn-bg:var(--verde-700); box-shadow:0 8px 24px rgba(76,124,60,.32)}
.btn--verde:hover{--btn-bg:var(--verde-900); box-shadow:0 14px 34px rgba(76,124,60,.42)}
/* Degradado de marca, el mismo del botón de Instagram del pie */
.btn--grad{--btn-bg:var(--grad); --btn-fg:var(--negro); box-shadow:0 8px 26px rgba(76,124,60,.34)}
.btn--grad:hover{box-shadow:0 14px 36px rgba(76,124,60,.46)}
.btn--wa{--btn-bg:var(--verde-700)}
.btn--wa:hover{--btn-bg:var(--verde-900)}
.btn--lg{padding:13px 30px; font-size:1.02rem}
.btn--full{width:100%}
.btn--mini{padding:6px 14px; font-size:.78rem; --btn-bg:transparent; --btn-fg:var(--gris-700); --btn-bd:var(--gris-300)}
.btn--mini:hover{--btn-bg:var(--negro); --btn-fg:#fff; --btn-bd:var(--negro)}
.btn[disabled]{opacity:.5; pointer-events:none}
.btn[hidden]{display:none}

/* =========================================================
   HEADER
   ========================================================= */
/* Fijo y transparente: arranca montado sobre el video del hero y recién al
   bajar toma fondo claro. */
.site-header{position:fixed; top:0; left:0; right:0; z-index:100}

.navbar{
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* Vidrio esmerilado: se transparenta el contenido que pasa por detrás, pero el
   velo blanco más el desenfoque mantienen legibles el logo y los ítems, incluso
   sobre las secciones negras. */
.is-scrolled .navbar{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom-color:rgba(0,0,0,.09);
  box-shadow:0 6px 26px rgba(10,10,10,.10);
}
.navbar__in{display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:84px}
.is-scrolled .navbar__in{min-height:72px; transition:min-height .3s var(--ease)}

/* Los dos logos se superponen y sólo se cruzan por opacidad: el tamaño es fijo
   y no cambia al pasar de la versión blanca a la de color. */
.brand{position:relative; display:block; height:28px; aspect-ratio:1031/180; flex:none}
.brand img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:left center;
  transition:opacity .3s var(--ease);
}
.brand__color{opacity:0}
.is-scrolled .brand__blanco{opacity:0}
.is-scrolled .brand__color{opacity:1}

.nav{display:flex; align-items:center; gap:30px}
.nav__list{display:flex; align-items:center; gap:26px}
.nav__list a{
  position:relative; display:block; padding:6px 1px;
  color:#fff; font-weight:600; font-size:.92rem;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  transition:color .2s var(--ease), text-shadow .2s var(--ease);
}
/* Subrayado: aparece al pasar el mouse y queda fijo en la sección actual */
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px;
  border-radius:2px; background:var(--grad);
  transform:scaleX(0); transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav__list a:hover::after, .nav__list a.is-current::after{transform:scaleX(1)}
.is-scrolled .nav__list a{color:var(--gris-700); text-shadow:none}
.is-scrolled .nav__list a:hover, .is-scrolled .nav__list a.is-current{color:var(--ink)}
.nav__cta{padding:8px 20px; font-size:.86rem}

.burger{display:none; width:46px; height:46px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.2); border-radius:12px; cursor:pointer; padding:0; place-items:center; align-content:center; transition:border-color .3s var(--ease), background .3s var(--ease)}
.is-scrolled .burger{border-color:var(--gris-300); background:transparent}
.burger span{display:block; width:20px; height:2px; background:#fff; border-radius:2px; margin:4px auto; transition:transform .25s var(--ease), opacity .2s var(--ease), background .3s var(--ease)}
.is-scrolled .burger span{background:var(--ink)}
/* Con el menú abierto el panel es oscuro: las barras vuelven a blanco */
.burger[aria-expanded="true"] span{background:#fff}
/* Las tres barras están separadas 10 px entre centros (2 px de alto + 4 px de
   margen a cada lado): ese es el desplazamiento que las hace cruzarse en X. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

@media (max-width:1080px){
  .burger{display:grid}
  /* Sin backdrop-filter: crea un bloque contenedor y rompería el position:fixed
     del drawer. Al no haber desenfoque, el velo tiene que ser un poco más denso. */
  .is-scrolled .navbar{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(255,255,255,.88);
  }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(88vw, 380px);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px;
    background:#0A0A0A; padding:96px 24px 32px;
    transform:translateX(100%); transition:transform .32s var(--ease);
    border-left:1px solid rgba(255,255,255,.12); overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column; align-items:stretch; gap:2px}
  /* Dentro del panel oscuro los enlaces son siempre blancos */
  .nav__list a{padding:14px 16px; font-size:1.02rem; color:#fff; text-shadow:none}
  .is-scrolled .nav__list a,
  .is-scrolled .nav__list a:hover,
  .is-scrolled .nav__list a.is-current{color:#fff}
  .nav__list a::after{left:16px; right:16px; bottom:9px}
  .nav__cta{margin-top:14px; width:100%; padding-block:12px}
  .nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:99; opacity:0; transition:opacity .3s var(--ease)}
  .nav-backdrop.is-on{opacity:1}
  body.no-scroll{overflow:hidden}
}

/* =========================================================
   HERO
   ========================================================= */
/* Ocupa el alto completo de la pantalla: el video se ve entero al entrar */
.hero{
  position:relative; isolation:isolate; color:#fff; overflow:hidden; background:var(--negro);
  min-height:100vh;
  min-height:100svh;          /* en celular descuenta la barra del navegador */
  display:flex; flex-direction:column;
}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:60% 50%}
/* El video se monta sobre la foto: si no carga o no reproduce, queda la foto */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:60% 50%;
  opacity:0; transition:opacity .9s var(--ease); pointer-events:none;
}
.hero__video.is-on{opacity:1}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    /* Cubre el ancho del titular: el video cambia de encuadre y el texto tiene que leerse siempre */
    linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.34) 80%, rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.65) 100%);
}
/* El contenido se centra en el alto disponible. El padding superior, más grande
   que el inferior, compensa el header fijo montado arriba. */
.hero__in{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(120px,13vw,160px) 0 clamp(56px,7vw,90px); max-width:900px;
}

.hero__title{
  font-size:clamp(2.7rem, 6.6vw, 5rem);
  font-weight:900; text-transform:uppercase; letter-spacing:-.035em;
  margin:0 0 22px;
}
.hero__lead{font-size:clamp(.9rem,1.32vw,1.1rem); color:rgba(255,255,255,.86); max-width:56ch; margin-bottom:34px}
.hero__lead strong{color:#fff}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px}

.hero__strip{height:7px; background:var(--grad)}

@media (max-width:560px){
  .hero__actions{flex-direction:column; align-items:stretch}
  .hero__actions .btn{width:100%}
  .nosotros__acciones .btn{width:100%}

  /* En el celular la portada tiene que entrar en una pantalla: se recortan los
     aires y el titular baja un punto para no comerse un renglón de más. */
  .hero__in{padding:100px 0 40px}
  .hero__title{font-size:clamp(2.3rem,10.4vw,3rem); margin-bottom:14px}
  /* La bajada es larga: en el celular se ajusta el cuerpo y el interlineado
     para que el botón principal siga entrando en la primera pantalla. */
  .hero__lead{font-size:.85rem; line-height:1.55; margin-bottom:22px}
}

/* =========================================================
   FACTBAR
   ========================================================= */
.factbar{background:var(--gris-50); border-bottom:1px solid var(--gris-200)}
/* Cuatro datos en columna: ícono arriba, título y bajada debajo */
.factbar__in{display:grid; grid-template-columns:repeat(4,1fr); padding:32px 0}
.fact{
  display:flex; flex-direction:column; gap:9px;
  padding:2px clamp(12px,1.5vw,22px);
  border-left:1px solid var(--gris-200);
}
.fact__ico{width:29px; height:29px; flex:none; color:var(--azul-700); stroke-width:1.6}
.fact:nth-child(2n) .fact__ico{color:var(--verde-700)}
.fact b{
  font-family:var(--font-display); font-weight:800; font-size:.79rem;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.35;
}
.fact span{font-size:.79rem; color:var(--gris-500); line-height:1.5}

/* La primera columna de cada fila no lleva línea divisoria */
.fact:nth-child(4n+1){border-left:0; padding-left:0}

@media (max-width:1080px){
  .factbar__in{grid-template-columns:repeat(2,1fr); row-gap:28px}
  .fact:nth-child(4n+1){border-left:1px solid var(--gris-200); padding-left:clamp(12px,1.5vw,22px)}
  .fact:nth-child(2n+1){border-left:0; padding-left:0}
}
@media (max-width:480px){
  .factbar__in{grid-template-columns:1fr; row-gap:22px}
  .fact, .fact:nth-child(2n+1){border-left:0; padding-left:0}
}

/* =========================================================
   SECCIONES
   ========================================================= */
.section{padding:var(--sec-pad) 0; position:relative; background:var(--gris-50)}
.section--dark{background:var(--negro); color:#fff}
.section--dark .sec-sub{color:rgba(255,255,255,.72)}

.sec-head{max-width:760px; margin-bottom:clamp(36px,4.5vw,60px)}
.sec-head--center{max-width:880px; margin-inline:auto; text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-title{font-size:clamp(2.1rem,4.2vw,3.3rem); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; margin-bottom:18px}
.sec-title--xl{font-size:clamp(2.2rem,4.6vw,3.6rem)}
/* Resalte dentro de un titular: cursiva y el degradado de marca (celeste a
   verde), el mismo de la portada y los botones. El resto del titular queda en
   negro. */
.resalte{
  font-style:italic;
  font-synthesis:style;   /* Archivo no trae cursiva propia: la inclina el navegador */
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* El degradado se corta justo en la palabra: sin esto arrastraría el ancho
     del renglón entero y quedaría casi de un solo color. */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  /* La cursiva inclina las letras y la primera se sale de su caja por abajo a
     la izquierda. Como el degradado se recorta contra esa caja, la "A" quedaba
     cortada al medio. Se agranda la caja y se compensa con margen negativo,
     así el texto no se mueve ni un píxel. */
  padding:.08em .1em .08em .14em;
  margin-left:-.14em; margin-right:-.1em;
}

.sec-sub{font-size:1.06rem; color:var(--gris-700); margin:0}

/* ---------- SERVICIOS ---------- */
/* Ocho servicios en dos filas de cuatro, todas las tarjetas del mismo tamaño.
   Se estiran para terminar a la misma altura dentro de cada fila. */
.grid-serv{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:1080px){ .grid-serv{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .grid-serv{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grid-serv{grid-template-columns:1fr} }

.card-serv{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:30px 22px 26px; border-radius:var(--radius);
  background:var(--blanco); border:1px solid var(--gris-200);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card-serv::after{
  content:""; position:absolute; inset:auto 0 0 0; height:4px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
  border-radius:0 0 var(--radius) var(--radius);
}
.card-serv:hover, .card-serv:focus-within{box-shadow:var(--shadow-md); border-color:var(--gris-300)}
.card-serv:hover::after{transform:scaleX(1)}

.card-serv__ico{
  width:54px; height:54px; border-radius:14px; flex:none; margin-bottom:16px;
  display:grid; place-items:center; background:var(--azul-100); color:var(--azul-900);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.card-serv__ico svg{width:27px; height:27px}
/* Primera fila: azul · verde · azul · verde */
.card-serv:nth-child(2n) .card-serv__ico{background:var(--verde-100); color:var(--verde-900)}
/* Segunda fila: arranca en verde, alternancia invertida */
.card-serv:nth-child(n+5):nth-child(odd) .card-serv__ico{background:var(--verde-100); color:var(--verde-900)}
.card-serv:nth-child(n+5):nth-child(even) .card-serv__ico{background:var(--azul-100); color:var(--azul-900)}
/* El número queda como marca de agua en la esquina, fuera del flujo centrado */
.card-serv__num{
  position:absolute; top:16px; right:18px;
  font-family:var(--font-display); font-weight:900; font-size:1.35rem;
  line-height:1; letter-spacing:-.04em; color:var(--gris-200);
  transition:color .25s var(--ease);
}
.card-serv:hover .card-serv__num{color:var(--azul-500)}

.card-serv h3{font-size:1.12rem; font-weight:800; margin-bottom:9px; line-height:1.2}
.card-serv__lead{font-size:.91rem; color:var(--gris-700); margin:0}

/* ---- Desplegable "Ver más" ---- */
.card-serv__more{width:100%; margin-top:16px; border-top:1px solid var(--gris-200); padding-top:14px}
.card-serv__more summary{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  list-style:none; padding:5px 2px; border-radius:8px;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gris-500);
  transition:color .2s var(--ease);
}
.card-serv__more summary::-webkit-details-marker{display:none}
.card-serv__more summary:hover{color:var(--ink)}
.card-serv__chev{width:15px; height:15px; stroke-width:2.4; transition:transform .25s var(--ease)}
.card-serv__more[open] .card-serv__chev{transform:rotate(180deg)}
.card-serv__more .txt-menos{display:none}
.card-serv__more[open] .txt-mas{display:none}
.card-serv__more[open] .txt-menos{display:inline}

.card-serv__body{padding-top:12px; text-align:left; animation:desplegar .3s var(--ease)}
@keyframes desplegar{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.card-serv__body p{font-size:.9rem; color:var(--gris-700); margin:0 0 11px; line-height:1.62}
.card-serv__body h4{
  font-family:var(--font-display); font-size:.82rem; font-weight:800;
  letter-spacing:.05em; color:var(--ink); margin:16px 0 7px;
}

.card-serv__link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:auto; padding-top:20px;
  font-family:var(--font-display); font-weight:700; font-size:.83rem;
  letter-spacing:.02em; color:var(--azul-900);
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.card-serv__link .ico{width:1.15em; height:1.15em}
.card-serv__link:hover{color:var(--verde-900); gap:12px}


/* ---------- SEPARADOR ---------- */
/* Franja fina con la cinta de la marca. Escala a lo ancho manteniendo su
   proporción, así la cinta nunca se deforma ni se corta; el tope sólo entra en
   juego en monitores muy anchos, y ahí recorta el margen blanco de la imagen. */
.separador{overflow:hidden; line-height:0; background:var(--gris-50)}
.separador img{
  width:100%; height:auto; max-height:150px;
  object-fit:cover; object-position:center center;
}

/* ---------- BANNER DE IMAGEN ---------- */
.banner-vid{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(280px, 42vh, 480px);
  display:grid; align-items:center;
  background:var(--negro); color:#fff;
  border-block:5px solid transparent; border-image:var(--grad) 1;
}
.banner-vid__poster, .banner-vid__media{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center center;
}
/* El video se monta sobre su fotograma: si no carga, queda la imagen */
.banner-vid__media{opacity:0; transition:opacity 1s var(--ease)}
.banner-vid__media.is-on{opacity:1}
/* Velo oscuro del lado donde va la frase */
.banner-vid::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.60) 45%, rgba(0,0,0,.22) 100%);
}
.banner-vid--alt::after{
  background:linear-gradient(270deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.60) 45%, rgba(0,0,0,.22) 100%);
}

.banner-vid__in{padding:clamp(40px,6vw,64px) 0; display:grid; gap:18px; justify-items:start}
.banner-vid--alt .banner-vid__in{justify-items:end; text-align:right}

.banner-vid__claim{
  margin:0; max-width:22ch;
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.7rem, 4.2vw, 3.2rem); line-height:1.02;
  letter-spacing:-.03em; text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}

/* En pantallas angostas el recorte pasa a ser horizontal: se corre el encuadre
   hacia el motivo de cada foto para que no quede cortado. */
@media (max-width:820px){
  .banner-vid .banner-vid__poster{object-position:78% center}
  .banner-vid--alt .banner-vid__poster{object-position:30% center}
}
@media (max-width:640px){
  .banner-vid--alt .banner-vid__in{justify-items:start; text-align:left}
  .banner-vid--alt::after{background:linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.3) 100%)}
  .banner-vid__claim{max-width:none}
}
/* En los celulares más angostos la frase más larga quedaba a dos píxeles del
   borde: se baja un punto el cuerpo para que respire. */
@media (max-width:400px){
  .banner-vid__claim{font-size:1.55rem}
}

/* La foto del camión al atardecer trae el logo pintado en el lateral, arriba a
   la izquierda. El encuadre se sube para que ese logo entre entero y la frase
   quede del lado del atardecer, sobre el cielo. */
.banner-vid--atardecer{min-height:clamp(300px,44vh,460px)}
.banner-vid--atardecer .banner-vid__poster{object-position:center 34%}
@media (max-width:820px){
  /* En vertical el recorte pasa a ser horizontal: se corre al frente del camión
     y al atardecer, así la frase cae sobre el cielo y no encima del logo
     pintado en el lateral. */
  .banner-vid--atardecer .banner-vid__poster{object-position:62% center}
}

/* ---------- NOSOTROS ---------- */
/* Sin imagen: el título queda a un lado y el texto al otro. Ocupa el ancho
   completo sin que los párrafos queden con renglones inleíbles de punta a punta. */
/* Título arriba a la izquierda, botones debajo, texto a la derecha ocupando
   las dos filas. En una columna el orden queda: título, texto y recién ahí los
   botones, que es como se lee en el celular. */
.nosotros{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(28px,5vw,72px); align-items:start}
.nosotros__head{grid-column:1; grid-row:1}
.nosotros__texto{grid-column:2; grid-row:1 / span 2}
.nosotros__acciones{grid-column:1; grid-row:2; display:flex; gap:12px; flex-wrap:wrap}

@media (max-width:900px){
  .nosotros{grid-template-columns:1fr; gap:26px}
  .nosotros__head, .nosotros__texto, .nosotros__acciones{grid-column:1; grid-row:auto}
}

.nosotros__texto p{color:var(--gris-700); margin-bottom:1.15em}
.nosotros__texto p:last-child{margin-bottom:0}
.nosotros__texto strong{color:var(--ink)}

@media (max-width:560px){
  .nosotros__acciones{flex-direction:column; align-items:stretch}
  .nosotros__acciones .btn{width:100%}
}

/* ---------- VALORES DENTRO DE NOSOTROS ---------- */
/* "Por qué elegirnos" dejó de ser una sección propia y pasó a ser la segunda
   mitad de Nosotros. La línea de arriba marca el corte entre las dos partes. */
/* Los seis valores cierran el relato de Nosotros. Van sin título propio, pero
   con una línea que marca el corte, igual que las cintas de clientes. */
.nosotros__grid{
  margin-top:clamp(52px,6vw,86px);
  padding-top:clamp(46px,5vw,72px);
  border-top:1px solid var(--gris-200);
}

/* Los clientes tienen sección propia, entre Servicios y Contacto. Va más
   angosta de alto que una sección normal: son sólo dos cintas y un título. */
.seccion-clientes{padding-block:clamp(48px,5.5vw,78px)}
.seccion-clientes .marcas{margin-top:0}

/* ---------- VALORES ---------- */
/* Sin cajas: los seis valores van escritos sobre el fondo, uno por columna */
.grid-val{display:grid; grid-template-columns:repeat(6,1fr); gap:34px 22px}
@media (max-width:1080px){ .grid-val{grid-template-columns:repeat(3,1fr); gap:38px 32px} }
@media (max-width:700px){ .grid-val{grid-template-columns:repeat(2,1fr); gap:32px 26px} }
@media (max-width:460px){
  /* En una sola columna el ícono pasa al costado, igual que en la barra de
     datos: con el ícono arriba los seis valores ocupaban tres pantallas. */
  .grid-val{grid-template-columns:1fr; gap:26px}
  .val{display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:6px}
  .val__ico{grid-row:span 2; margin-bottom:0; margin-top:2px; width:26px; height:26px; stroke-width:1.45}
  .val h3{margin-bottom:0; align-self:center}
}

.val__ico{width:28px; height:28px; color:var(--azul-700); margin-bottom:14px; stroke-width:1.6}
.val:nth-child(2n) .val__ico{color:var(--verde-700)}
.val h3{font-size:.97rem; font-weight:800; line-height:1.25; margin-bottom:8px}
.val p{font-size:.85rem; line-height:1.55; color:var(--gris-700); margin:0}

@media (min-width:1081px){
  /* A seis columnas el texto es angosto: se compensa con tipografía más chica */
  .val h3{font-size:.92rem}
  .val p{font-size:.81rem}
}

/* El campo más importante del formulario: teléfono. Se destaca con un fondo
   suave y una línea de ayuda debajo. */
.field--clave input{background:var(--azul-100); border-color:var(--azul-500)}
.field--clave input:focus{background:var(--blanco)}
.field__ayuda{margin:7px 0 0; font-size:.82rem; line-height:1.5; color:var(--gris-700)}

/* ---------- CARRUSEL DE CLIENTES ---------- */
/* Dos cintas que desfilan en sentidos opuestos, sin JavaScript. El truco: cada
   cinta lleva el listado DOS veces y se desplaza justo la mitad, así al volver
   al punto de partida la imagen es idéntica y el bucle no se nota. */
.marcas{margin-top:clamp(46px,6vw,74px)}
/* Lleva la clase .sec-title: tipografía, cuerpo y color de titular de sección.
   Acá sólo se centra y se le da el aire de abajo. */
/* Mismo tratamiento que el nombre de la sucursal en Contacto: caja baja, peso
   medio, cuerpo mediano. No es un titular de sección. */
.marcas__titulo{
  text-align:center; margin:0 0 clamp(26px,3vw,38px);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.35rem,2.1vw,1.6rem);
  letter-spacing:-.01em; line-height:1.2; text-transform:none;
  color:var(--ink);
}
/* La cinta se sale del ancho de contenido y ocupa la pantalla entera */
.marcas__cinta{width:100vw; margin-left:calc(50% - 50vw)}

.marquee{
  overflow:hidden;
  /* Los extremos se desvanecen: los logos entran y salen sin cortarse de golpe */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee + .marquee{margin-top:16px}
.marquee__track{display:flex; width:max-content; animation:desfile 70s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
/* Al pasar el mouse se frena, para poder mirar un logo */
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__grupo{display:flex; align-items:center; gap:16px; padding-right:16px}

@keyframes desfile{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

.marca{
  flex:none; display:grid; place-items:center;
  width:184px; height:100px; padding:14px 20px;
  background:var(--blanco); border:1px solid var(--gris-200);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.marca:hover{box-shadow:var(--shadow-md); transform:translateY(-3px)}
/* Los logos van a color: son clientes reales y la idea es que se reconozcan.
   Para verlos apagados y en gris —una cinta más discreta— agregar acá:
   filter:grayscale(1); opacity:.72;  y en .marca:hover img el filter:none. */
.marca img{max-width:100%; max-height:62px; width:auto; object-fit:contain}

@media (max-width:640px){
  .marca{width:142px; height:82px; padding:10px 14px}
  .marca img{max-height:48px}
  .marquee__grupo{gap:12px; padding-right:12px}
  .marquee__track{animation-duration:52s}
}

/* Si el visitante pidió menos animaciones, las cintas se quedan quietas y se
   pueden mover con el dedo. */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .marquee__track{animation:none}
}

/* ---------- SEGUNDA SUCURSAL ---------- */
/* Buenos Aires va debajo de Mar del Plata y con la mitad del peso: sin título
   de bloque, en una fila de datos chicos separada por una línea. La jerarquía
   la marca el tamaño, no el orden.
   Los cuatro bloques son hermanos y se reparten con "space-between": el nombre
   queda pegado al borde izquierdo, el WhatsApp al derecho, y los dos del medio
   caen con la misma separación entre sí y con los extremos. Así la fila ocupa
   exactamente el ancho de la línea de arriba. */
.sede2{
  margin-top:clamp(30px,3.4vw,44px);
  padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--gris-200);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:18px clamp(22px,2.6vw,34px);
}
/* El mapa de la sucursal, en miniatura. Mismo recurso propio que el de la casa
   central —ninguna imagen viene de afuera— pero a una escala que no le discuta
   protagonismo a Mar del Plata. */
.sede2__mapa{
  flex:none; display:block; width:265px; overflow:hidden;
  border-radius:var(--radius-sm); border:1px solid var(--gris-200);
  box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease)
}
.sede2__mapa img{display:block; width:100%; height:auto; transition:transform .5s var(--ease)}
.sede2__mapa:hover{box-shadow:var(--shadow-md)}
.sede2__mapa:hover img{transform:scale(1.04)}
/* Los cuatro textos se reparten el ancho que queda al costado del mapa: el
   primero pegado al mapa, el último al borde, y la misma luz entre todos. */
.sede2__datos{
  flex:1 1 440px;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:16px 28px;
}
.sede2__nombre{
  margin:0;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  line-height:1.3; color:var(--ink);
}
.sede2__tag{
  display:block; margin-bottom:3px;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:800; color:var(--gris-500);
}
.sede2__dato b{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:800;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-500); margin-bottom:3px;
}
/* Los mismos íconos que en la casa central, a la mitad de tamaño: el glifo
   repite, la escala es la que marca que este bloque pesa menos. */
.sede2__dato .ico{width:16px; height:16px; flex:none; color:var(--azul-700)}
.sede2__dato:nth-of-type(2n) .ico{color:var(--verde-700)}
.sede2__dato span,
.sede2__dato a{font-size:.95rem; line-height:1.5; color:var(--gris-700)}
.sede2__dato a{border-bottom:1px solid var(--gris-300); transition:border-color .2s var(--ease)}
.sede2__dato a:hover{border-color:var(--ink)}

/* Con el mapa al costado ya no entran los cuatro datos en una sola fila: pasan
   a dos columnas, que es más prolijo que dejarlos cortar solos. */
@media (max-width:1040px){
  .sede2__datos{display:grid; grid-template-columns:1fr 1fr; gap:16px 26px}
}

@media (max-width:760px){
  /* Apilados, el reparto no tiene sentido: todo pegado a la izquierda. */
  .sede2{flex-direction:column; align-items:flex-start; gap:18px}
  /* Apilado, el mapa toma el ancho de la columna para que el bloque cierre
     parejo con las fichas. En el teléfono queda a todo el ancho; de 640 px
     para arriba se planta en 420 y sigue siendo más chico que el de la casa
     central. La jerarquía acá la marcan la etiqueta "Casa central", el tamaño
     del nombre y las fichas con fondo, no el mapa. */
  .sede2__mapa{width:100%; max-width:420px}
  /* Las mismas fichas que la casa central, pero sin fondo ni sombra: se ven
     como piezas, no compiten. El nombre de la sucursal las encabeza. */
  .sede2__datos{flex:none; width:100%; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch}
  .sede2__nombre{grid-column:1 / -1}
  .sede2__dato{
    border:1px solid var(--gris-200); border-radius:var(--radius-sm);
    padding:12px 13px 13px;
  }
  .sede2__dato:nth-of-type(1){grid-area:2 / 1}                  /* Dirección */
  .sede2__dato:nth-of-type(3){grid-area:2 / 2}                  /* WhatsApp  */
  .sede2__dato:nth-of-type(2){grid-area:3 / 1 / auto / -1}      /* Horario   */
}

/* =========================================================
   PREGUNTAS FRECUENTES
   Desplegables nativos (<details>): funcionan sin JavaScript y el buscador
   lee el contenido aunque esté cerrado.
   ========================================================= */
.faq{max-width:860px; margin-inline:auto; display:grid; gap:12px}
.faq__item{
  background:var(--blanco); border:1px solid var(--gris-200);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:border-color .2s var(--ease)
}
.faq__item[open]{border-color:var(--azul-500)}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 22px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.35;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--azul-900)}
.faq__chev{width:18px; height:18px; flex:none; stroke-width:2.4; color:var(--gris-500); transition:transform .25s var(--ease)}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__cuerpo{padding:0 22px 20px}
.faq__cuerpo p{margin:0; color:var(--gris-700); font-size:.95rem; line-height:1.65}
.faq__cuerpo a{color:var(--azul-900); font-weight:600; border-bottom:1px solid var(--gris-300)}
.faq__cuerpo a:hover{border-bottom-color:var(--azul-900)}

/* =========================================================
   ZONAS DE COBERTURA
   Vive dentro de la primera pregunta frecuente: es la respuesta a
   "¿a qué zonas llegan?". Aunque el desplegable esté cerrado, el buscador lee
   el listado igual, que es de donde salen las búsquedas por localidad.
   ========================================================= */
.cobertura__grupos{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px; margin-top:20px}
.cobertura__grupo h4{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul-900); margin-bottom:6px; font-weight:800;
}
.cobertura__grupo p{margin:0; font-size:.88rem; line-height:1.6; color:var(--gris-700)}
@media (max-width:620px){
  .cobertura__grupos{grid-template-columns:1fr; gap:16px}
  .cobertura__grupo p{font-size:.85rem; line-height:1.55}
}

/* Contacto entra en una pantalla: aires, titular y fichas un punto más chicos
   que en el resto de las secciones. */
#contacto{padding-block:clamp(50px,5.2vw,70px)}
#contacto .sec-head{margin-bottom:clamp(26px,3vw,38px)}
#contacto .sec-title{font-size:clamp(1.8rem,3.2vw,2.5rem)}


/* =========================================================
   COTIZADOR  (sobre fondo claro)
   ========================================================= */
.quoter{
  max-width:960px; margin-inline:auto;
  background:var(--blanco); border:1px solid var(--gris-200);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
}
.quoter__progress{padding:26px clamp(22px,4vw,42px) 0}
.qbar{height:6px; border-radius:999px; background:var(--gris-200); overflow:hidden}
.qbar span{display:block; height:100%; width:16.6%; border-radius:999px; background:var(--grad); transition:width .4s var(--ease)}
.qbar__meta{display:flex; justify-content:space-between; gap:14px; margin-top:12px; font-size:.82rem; color:var(--gris-500)}
.qbar__meta #qStepName{font-family:var(--font-display); font-weight:700; color:var(--ink); text-align:right}

.quoter__form{padding:clamp(24px,4vw,42px)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.qstep{display:none; border:0; padding:0; margin:0; min-inline-size:0}
.qstep.is-active{display:block; animation:qin .35s var(--ease)}
@keyframes qin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.qstep__title{
  display:flex; align-items:center; gap:14px; padding:0; margin:0 0 24px;
  font-family:var(--font-display); font-weight:800; color:var(--ink);
  font-size:clamp(1.2rem,2.4vw,1.6rem); letter-spacing:-.02em;
}
.qstep__n{
  display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px;
  background:var(--grad); color:var(--negro); font-size:.95rem; font-weight:900;
}

/* opciones de servicio */
.opt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (max-width:820px){ .opt-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .opt-grid{grid-template-columns:1fr} }
.opt{position:relative; display:block; cursor:pointer}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span{
  display:flex; align-items:center; min-height:64px; padding:14px 16px 14px 46px;
  border-radius:12px; border:1.5px solid var(--gris-300); background:var(--blanco);
  color:var(--gris-700); font-size:.93rem; font-weight:500; line-height:1.3;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.opt span::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; border:2px solid var(--gris-300);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.opt:hover span{border-color:var(--azul-500); background:var(--gris-50)}
.opt input:checked + span{border-color:var(--azul-700); background:var(--azul-100); color:var(--ink)}
.opt input:checked + span::before{border-color:var(--azul-700); background:var(--azul-700); box-shadow:inset 0 0 0 3px var(--azul-100)}
.opt input:focus-visible + span{outline:3px solid var(--azul); outline-offset:3px}

/* campos */
.f-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.f-grid--dir{grid-template-columns:2fr 1.25fr .85fr}
@media (max-width:760px){ .f-grid, .f-grid--dir{grid-template-columns:1fr} .f-2,.f-3{grid-column:auto !important} }
.f-2{grid-column:span 2}
.f-3{grid-column:span 3}

.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field label{font-size:.83rem; font-weight:600; color:var(--gris-700); letter-spacing:.01em}
.opt-tag{font-weight:400; color:var(--gris-500); font-size:.78rem}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:11px;
  border:1.5px solid var(--gris-300); background:var(--blanco);
  color:var(--ink); font-size:.96rem; font-family:var(--font-body);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{resize:vertical; min-height:92px}
.field input::placeholder, .field textarea::placeholder{color:var(--gris-500)}
.field input:hover, .field select:hover, .field textarea:hover{border-color:var(--gris-500)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--azul-700); box-shadow:0 0 0 3px rgba(46,127,174,.16);
}
.field input.is-error, .field textarea.is-error{border-color:#C0392B; background:#FDF1EF}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D444A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px;
}
.field select option{background:var(--blanco); color:var(--ink)}
.field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55; cursor:pointer}

/* mensajes de zona */
.zone, .route{
  display:none; align-items:flex-start; gap:10px; margin:16px 0 0;
  padding:13px 16px; border-radius:11px; font-size:.92rem; font-weight:500;
}
.zone.is-on, .route.is-on{display:flex}
.zone::before, .route::before{
  content:""; width:20px; height:20px; flex:none; margin-top:1px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.zone--ok, .route--ok{background:var(--verde-100); border:1px solid rgba(76,124,60,.45); color:var(--verde-900)}
.zone--ok::before, .route--ok::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C7C3C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
}
.zone--ask, .route--ask{background:var(--azul-100); border:1px solid rgba(46,127,174,.45); color:var(--azul-900)}
.zone--ask::before, .route--ask::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7FAE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.2a2.6 2.6 0 1 1 3.2 2.9v1.4'/%3E%3Cpath d='M12.7 16.6h.01'/%3E%3C/svg%3E");
}
.zone b, .route b{color:var(--ink)}
.route{margin-top:12px}

.qerr{
  display:none; margin:16px 0 0; padding:11px 15px; border-radius:11px;
  background:#FDF1EF; border:1px solid rgba(192,57,43,.5);
  color:#8C2F17; font-size:.88rem; font-weight:500;
}
.qerr.is-on{display:block}
.qnote{margin:18px 0 0; font-size:.84rem; color:var(--gris-500)}

/* resumen */
.review{display:grid; gap:1px; background:var(--gris-200); border:1px solid var(--gris-200); border-radius:12px; overflow:hidden}
.review__row{display:grid; grid-template-columns:200px 1fr; gap:16px; margin:0; padding:13px 18px; background-color:var(--blanco); font-size:.93rem}
.review__row dt{color:var(--gris-500); font-weight:500}
.review__row dd{margin:0; color:var(--ink); font-weight:500; overflow-wrap:anywhere}
@media (max-width:620px){ .review__row{grid-template-columns:1fr; gap:3px} }

/* navegación del wizard */
.quoter__nav{display:flex; gap:12px; justify-content:space-between; margin-top:30px; padding-top:26px; border-top:1px solid var(--gris-200)}
#qPrev[hidden]{display:none}

/* éxito */
.quoter__done{padding:clamp(30px,5vw,56px); text-align:center; color:var(--ink); animation:qin .4s var(--ease)}
.done__ico{width:74px; height:74px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; background:var(--verde-100); border:2px solid var(--verde-700)}
.done__ico svg{width:38px; height:38px; color:var(--verde-700); stroke-width:2}
.quoter__done h3{font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:900; text-transform:uppercase; margin-bottom:10px}
.done__lead{color:var(--gris-700); font-size:1.05rem; margin-bottom:28px}
.done__box{text-align:left; border:1px solid var(--gris-200); border-radius:12px; overflow:hidden; margin-bottom:24px}
.done__box-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; background:var(--gris-100); font-size:.82rem; color:var(--gris-500); font-weight:600}
.done__box pre{
  margin:0; padding:18px 16px; max-height:340px; overflow:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8rem; line-height:1.7;
  color:var(--gris-700); white-space:pre-wrap; word-break:break-word;
}
.done__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* =========================================================
   CONTACTO
   ========================================================= */
/* ---------- CONTACTO ---------- */
/* Mapa a la izquierda, datos a la derecha, sin cajas. */
/* El mapa ocupa algo menos de la mitad: así el bloque entero de la casa
   central baja de alto y queda en una proporción de 2 a 1 contra el de
   Buenos Aires, que es la jerarquía que tienen las dos sucursales. */
.contacto{display:grid; grid-template-columns:minmax(0,41fr) minmax(0,59fr); gap:clamp(28px,4vw,52px); align-items:center}
@media (max-width:900px){ .contacto{grid-template-columns:1fr; gap:26px} }

/* El mapa es una imagen y al mismo tiempo el botón de "cómo llegar" */
.contacto__mapa{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius-lg); border:1px solid var(--gris-200);
  box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease)
}
.contacto__mapa img{width:100%; height:100%; object-fit:cover; aspect-ratio:88/62; transition:transform .5s var(--ease)}
.contacto__mapa:hover{box-shadow:var(--shadow-md)}
.contacto__mapa:hover img{transform:scale(1.03)}
.contacto__mapa-pie{
  position:absolute; left:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 17px; border-radius:999px;
  background:var(--negro); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  box-shadow:var(--shadow-md);
}
.contacto__mapa-pie .ico{width:14px; height:14px; transition:transform .2s var(--ease)}
.contacto__mapa:hover .contacto__mapa-pie .ico{transform:translateX(3px)}

/* No es un titular de sección: es el nombre de la sucursal. Va en caja baja,
   con peso medio y sin el interletrado apretado de los títulos. */
.contacto__info h3{
  font-size:clamp(1.18rem,1.85vw,1.4rem); font-weight:700;
  text-transform:none; letter-spacing:-.01em; line-height:1.2;
  margin:12px 0 8px;
}
.contacto__aclara{margin:0 0 clamp(24px,3vw,32px); font-size:.86rem; line-height:1.55; color:var(--gris-500)}

.contacto__datos{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 24px}
/* ---- Contacto en el teléfono: los datos pasan a ser fichas ----
   Apilados uno debajo del otro y todos pegados al margen izquierdo, los datos
   se leían como una lista larga sin forma. En fichas cada dato es una pieza
   con su borde, y los dos cortos comparten renglón: la sección se acorta y
   deja de ser una columna de texto suelto.

   El acomodo es: [Dirección | WhatsApp] arriba, y Horario y Email a todo el
   ancho, porque su contenido no entra en media pantalla. El orden del HTML no
   se toca —lo que cambia es dónde cae cada ficha—, así que el lector de
   pantalla y el tabulador siguen el mismo recorrido de siempre. */
@media (max-width:640px){
  .contacto__datos{grid-template-columns:1fr 1fr; gap:12px}
  .contacto__datos li{
    background:var(--blanco); border:1px solid var(--gris-200);
    border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
    padding:13px 14px 15px;
    grid-template-columns:auto 1fr; column-gap:9px; row-gap:2px;
  }
  .contacto__datos li:nth-child(1){grid-area:1 / 1}          /* Dirección  */
  .contacto__datos li:nth-child(3){grid-area:1 / 2}          /* WhatsApp   */
  .contacto__datos li:nth-child(2){grid-area:2 / 1 / auto / -1}  /* Horario */
  .contacto__datos li:nth-child(4){grid-area:3 / 1 / auto / -1}  /* Email   */
  .contacto__datos .ico{margin-top:1px; margin-bottom:0}
  .contacto__datos li > span,
  .contacto__datos li > a{grid-column:1 / -1}
}
.contacto__datos li{display:grid; gap:5px; align-content:start}
.contacto__datos .ico{width:19px; height:19px; color:var(--azul-700); margin-bottom:3px}
.contacto__datos li:nth-child(2n) .ico{color:var(--verde-700)}
.contacto__datos b{
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris-500);
}
.contacto__datos span, .contacto__datos a{font-size:.9rem; line-height:1.5; color:var(--ink)}
.contacto__datos a{justify-self:start; border-bottom:1px solid var(--gris-300); transition:border-color .2s var(--ease)}
.contacto__datos a:hover{border-color:var(--ink)}

.contacto__tag{
  display:inline-block; padding:4px 11px; border-radius:999px;
  background:var(--verde-100); color:var(--verde-900);
  font-family:var(--font-display); font-weight:800; font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase;
}



/* =========================================================
   FOOTER  (texto claro sobre el degradado de marca)
   ========================================================= */
/* El degradado va en su versión honda: con el azul y el verde claros, el texto
   blanco quedaba en 2,2 de contraste y los datos del pie no se leían. */
.footer{background:var(--grad-hondo); color:#EAF0F3}
.footer__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px); padding:clamp(48px,6vw,76px) 0}
@media (max-width:940px){ .footer__in{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer__in{grid-template-columns:1fr} }

.footer__brand img{height:78px; width:auto; object-fit:contain; object-position:left center; margin-bottom:18px}
.footer__brand p{font-size:.92rem; max-width:38ch; margin-bottom:20px}

.ig{display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border-radius:999px; border:1.5px solid rgba(255,255,255,.5); font-size:.88rem; font-weight:600; color:#fff; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease)}
.ig svg{width:19px; height:19px}
.ig:hover{background:#fff; border-color:#fff; color:var(--negro)}

.footer__col h3{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:18px; font-weight:800}
.footer__col ul{display:grid; gap:10px}
.footer__col a{font-size:.92rem; transition:color .18s var(--ease)}
.footer__col a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.footer__suc li{display:grid; gap:2px; font-size:.9rem}
.footer__suc b{color:#fff; font-family:var(--font-display); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase}

.footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:10px 22px; flex-wrap:wrap; padding:22px 0; border-top:1px solid rgba(255,255,255,.22); font-size:.83rem}
.footer__bottom p{margin:0}
.footer__credit{color:#DCE6EC}
.footer__credit a{border-bottom:1px solid transparent; transition:border-color .2s var(--ease)}
.footer__credit a:hover{border-bottom-color:rgba(255,255,255,.6)}
.footer__credit strong{
  font-family:var(--font-display); font-weight:800; letter-spacing:.1em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.wa-fab{position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.wa-fab__btn{
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--verde-700); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(76,124,60,.5);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.wa-fab__btn:hover{transform:scale(1.07); background:var(--verde-900)}
.wa-fab__btn svg{width:28px; height:28px; stroke-width:1.8}
.wa-fab__menu{
  order:-1; width:min(78vw, 280px); padding:16px; border-radius:16px;
  background:#0E1113; border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-lg);
  animation:qin .25s var(--ease);
}
.wa-fab__menu p{margin:0 0 12px; font-size:.8rem; color:rgba(255,255,255,.6)}
.wa-fab__menu a{
  display:block; padding:11px 14px; border-radius:10px; margin-bottom:8px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:.88rem; font-weight:600;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.wa-fab__menu a:last-child{margin-bottom:0}
.wa-fab__menu a:hover{background:var(--verde-700); border-color:transparent}

/* =========================================================
   AJUSTES PARA CELULARES Y TABLETS
   ========================================================= */

/* ---- Áreas táctiles ----
   En pantallas sin mouse, todo lo que se toca necesita unos 44 px de alto.
   Se agrega relleno y se compensa con margen negativo para no mover el diseño. */
@media (max-width:900px){
  .card-serv__more summary{padding-block:14px; margin-block:-9px}
  .contacto__datos a{display:inline-block; padding-block:12px; margin-block:-8px}
  .footer__col a{display:inline-block; padding-block:9px; margin-block:-7px}
  .footer__credit a{display:inline-block; padding-block:10px; margin-block:-8px}
  .card-serv__link{padding-bottom:6px}

  /* Los botones bajan a unos 47 px de alto: el tamaño cómodo para el pulgar
     sin que ocupen media pantalla. En escritorio siguen igual. */
  .btn{padding:11px 20px; font-size:.88rem}
  .btn--lg{padding:12px 22px; font-size:.94rem}

  /* Los campos del formulario van a 16 px sí o sí: por debajo de esa medida,
     Safari de iPhone hace zoom sobre el campo al tocarlo y descuadra la página. */
  .field input, .field textarea, .field select{font-size:16px}
}

@media (max-width:640px){

  /* Los titulares aprovechan todo el ancho: sin los saltos de línea pensados
     para escritorio quedan en menos renglones. */
  .sec-title br{display:none}

  /* Barra de datos: el ícono pasa al costado. Cuatro datos apilados con el
     ícono arriba ocupaban media pantalla de alto cada uno. */
  .factbar__in{row-gap:22px}
  .fact{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:14px; row-gap:3px; align-items:start;
  }
  /* Al costado del texto, y no arriba, el ícono compite con la tipografía:
     se afina el trazo y se achica un punto para que acompañe en vez de pesar. */
  .fact__ico{grid-row:span 2; margin-top:3px; width:26px; height:26px; stroke-width:1.45}
  .fact b{align-self:center}

  /* Servicios: en el celular las tarjetas muestran sólo la definición corta.
     El desplegable "Ver más" se oculta —el texto largo se lee en la compu—,
     así las ocho tarjetas no se convierten en un scroll interminable. */
  .card-serv__more{display:none}
  .card-serv{padding:26px 20px 22px}
  .card-serv__ico{width:48px; height:48px; margin-bottom:14px}
  .card-serv__ico svg{width:24px; height:24px}

  /* Cotizador: el nombre del paso ya aparece como título justo debajo */
  .qbar__meta #qStepName{display:none}
  .qbar__meta{justify-content:flex-start}

  /* ---- Pie ----
     En el celular el pie es lo último que se ve y no tiene que convertirse en
     una segunda página: enlaces en dos columnas, aires recortados y el bloque
     de marca reducido al logo (la descripción repite lo que ya dice la
     portada, así que en pantalla chica no aporta). */
  .footer__in{padding:34px 0; gap:24px}
  .footer__col ul{grid-template-columns:1fr 1fr; column-gap:18px; gap:6px}
  .footer__col h3{margin-bottom:10px; font-size:.72rem}
  .footer__suc{grid-template-columns:1fr; gap:12px}
  .footer__suc li{font-size:.86rem}
  .footer__brand img{height:56px; margin-bottom:12px}
  .footer__brand p{display:none}
  .footer__bottom{padding:16px 0; font-size:.78rem; gap:4px 18px}

  /* El botón flotante de WhatsApp, algo más chico para tapar menos contenido */
  .wa-fab{right:14px; bottom:14px}
  .wa-fab__btn{width:52px; height:52px}
  .wa-fab__btn svg{width:25px; height:25px}
}

/* =========================================================
   ANIMACIONES DE ENTRADA
   ========================================================= */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}

/* =========================================================
   IMPRESIÓN
   ========================================================= */
@media print{
  .site-header,.wa-fab,.hero__actions,.quoter__nav{display:none}
  body{color:#000; background:#fff}
  .section--dark{background:#fff; color:#000}
}