/* ==========================================================================
   Lausof SRL — hoja de estilos principal
   Paleta derivada del logo: azul marino, azules de la melena, dorado insignia
   ========================================================================== */

:root{
  /* color */
  --navy:#1d2947;
  --navy-deep:#131b30;
  --ice:#e9eef7;
  --paper:#fbfcfe;
  --card:#ffffff;
  --ink:#1d2947;
  --ink-soft:#4d5871;
  --ink-mid:#39445f;      /* gris azulado más oscuro: descripciones que piden contraste */
  --border:#d6ddea;
  --gold:#b3924f;          /* dorado de marca: filetes, bordes, iconografía */
  --gold-ink:#7d5f1f;      /* dorado legible: solo para texto sobre fondo claro */
  --gold-bright:#d0ac63;   /* dorado sobre fondo oscuro */
  --wa:#128040;
  --wa-dark:#0e6832;
  --wa-ink:#12703a;
  --on-navy:#ffffff;
  --on-navy-soft:#dce4f2;
  --header-bg:#ffffff;

  /* tipografía */
  --font:'Avenir Next','Avenir','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* forma: bordes rectos, sombra mínima — registro industrial, no "landing" */
  --radius:4px;
  --shadow:0 1px 2px rgba(29,41,71,.07);
}

/* Una sola paleta, la clara: el sitio se ve igual en todos los dispositivos,
   tengan el sistema en modo claro u oscuro. */

/* ---- base ---- */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.6;
}
h1,h2,h3{line-height:1.15;text-wrap:balance;margin:0;font-weight:700}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* el header es sticky: los anclajes tienen que frenar antes de quedar tapados */
section[id],footer[id]{scroll-margin-top:78px}

.kicker{
  text-transform:uppercase;letter-spacing:.14em;font-size:.92rem;
  font-weight:700;color:var(--gold-ink);margin:0 0 10px;
}
.kicker.on-dark{color:var(--gold-bright)}
section.block{padding:72px 0}
.block h2{font-size:clamp(1.7rem,3.2vw,2.25rem);letter-spacing:-.01em}
.block .sub{color:var(--ink-soft);max-width:56ch;margin:14px 0 0}

/* ---- barra superior ----
   Se mantiene clara en ambos temas: el logotipo es azul marino y necesita
   fondo claro ahora que el PNG no trae recuadro blanco propio. */
header.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  border-bottom:1px solid #d6ddea;
}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 0}
.brand img{display:block;height:46px;width:auto}
nav.main{display:flex;gap:24px;font-size:.94rem;font-weight:600}
nav.main a{color:#4d5871;text-decoration:none}
nav.main a:focus-visible{color:var(--gold-ink)}
/* Sin menú en mobile, la barra queda solo para la marca: logo centrado y
   más presente (el CTA vive en la barra fija de abajo, nunca acá). */
@media(max-width:880px){
  nav.main{display:none}
  .topbar-row{justify-content:center}
  .brand img{height:44px}
}

/* El CTA del header sólo aparece cuando el del hero ya salió de pantalla,
   para que nunca haya dos botones de WhatsApp visibles a la vez. */
html.js .nav-cta{opacity:0;visibility:hidden;transition:opacity .18s ease}
html.js body.past-hero .nav-cta{opacity:1;visibility:visible}

/* ---- botones ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--radius);padding:13px 24px;
  font-weight:700;font-size:.98rem;text-decoration:none;
  border:2px solid transparent;cursor:pointer;font-family:var(--font);
}
.btn-wa{background:var(--wa);color:#fff}
.btn-outline{border-color:rgba(255,255,255,.65);color:#fff;background:rgba(13,19,35,.45)}
.btn-ghost{border-color:#48587e;color:#fff}
.btn-sm{padding:9px 16px;font-size:.9rem}

/* ---- hero ---- */
.hero{position:relative;color:var(--on-navy);overflow:hidden;background:var(--navy-deep)}
.hero-photo{
  position:absolute;inset:0;
  background:#151e36 url('../assets/hero-flota-paisaje.jpg') center 68%/cover no-repeat;
}
/* velo: garantiza contraste del texto sin tapar del todo la foto de la flota */
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,23,42,.78),rgba(16,23,42,.6));
}
.hero-inner{position:relative;padding:78px 24px 84px;max-width:1120px}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.4rem);letter-spacing:-.015em;max-width:15ch}
.hero .lead{max-width:44ch;font-size:1.12rem;color:var(--on-navy-soft);margin:18px 0 28px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Atributos del hero: texto plano con tilde, nada de borde ni fondo.
   Si parecen botones (como "Ver servicios") prometen un clic que no existe. */
.hero-chips{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin:30px 0 0;padding:0;list-style:none;
}
.chip{
  font-size:.88rem;font-weight:600;color:var(--on-navy-soft);
}
.chip::before{content:"✓";color:var(--gold-bright);font-weight:700;margin-right:7px}

/* ---- franja de habilitaciones ---- */
.certs{background:var(--ice);border-block:1px solid var(--border);padding:18px 0}
.certs-row{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:center;
  font-size:.85rem;color:var(--ink-soft);
}
.certs-row b{color:var(--ink);font-weight:700}
.certs-row .ph{color:var(--gold-ink);font-style:italic}

/* ---- servicios ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.card-photo{
  position:relative;overflow:hidden;
  aspect-ratio:3/2;
  display:grid;place-items:center;text-align:center;padding:10px;
  color:#c6d0e6;font-size:.85rem;
  background:#22304f;
  border-bottom:3px solid var(--gold);
}

/* ---- rotación de fotos ----
   Cinco fotos que se encadenan con fundido. Cada una queda 3,4s en
   pantalla (ciclo completo: 17s) y el cruce entre una y otra ocupa
   0,9s, así el cambio nunca corta en seco.
   La saliente aguanta en opacidad plena hasta que la entrante (que apila
   encima) ya terminó de aparecer, y recién ahí se apaga: si las dos se
   cruzaran a mitad de camino se vería el fondo azul del recuadro en cada
   cambio. En la vuelta de la última a la primera funciona igual, pero
   destapando: la primera aparece por debajo y la última la revela. */
.slideshow{position:absolute;inset:0}
.slideshow img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  animation:rotarFotos 17s infinite;
}
.slideshow img:nth-child(2){animation-delay:3.4s}
.slideshow img:nth-child(3){animation-delay:6.8s}
.slideshow img:nth-child(4){animation-delay:10.2s}
.slideshow img:nth-child(5){animation-delay:13.6s}

@keyframes rotarFotos{
  0%{opacity:0}
  5.3%{opacity:1}
  25.3%{opacity:1}
  30.6%{opacity:0}
  100%{opacity:0}
}

/* Variante para tarjetas con 3 fotos: mismo ritmo de 3,4s por foto,
   el ciclo se acorta a 10,2s. */
.slideshow-3 img{animation:rotarFotos3 10.2s infinite}

@keyframes rotarFotos3{
  0%{opacity:0}
  8.8%{opacity:1}
  42.2%{opacity:1}
  51%{opacity:0}
  100%{opacity:0}
}

/* Variante para tarjetas con 4 fotos: mismo ritmo de 3,4s por foto,
   el ciclo se acorta a 13,6s. */
.slideshow-4 img{animation:rotarFotos4 13.6s infinite}

@keyframes rotarFotos4{
  0%{opacity:0}
  6.6%{opacity:1}
  31.6%{opacity:1}
  38.2%{opacity:0}
  100%{opacity:0}
}

/* Variante para tarjetas con 6 fotos: mismo ritmo de 3,4s por foto,
   el ciclo se estira a 20,4s y se suma el retardo de la sexta. */
.slideshow-6 img{animation:rotarFotos6 20.4s infinite}
.slideshow-6 img:nth-child(6){animation-delay:17s}

@keyframes rotarFotos6{
  0%{opacity:0}
  4.4%{opacity:1}
  21.1%{opacity:1}
  25.5%{opacity:0}
  100%{opacity:0}
}

/* Variante para tarjetas con 9 fotos: mismo ritmo de 3,4s por foto,
   el ciclo se estira a 30,6s y hay que sumar los retardos de la sexta
   a la novena. */
.slideshow-9 img{animation:rotarFotos9 30.6s infinite}
.slideshow-9 img:nth-child(6){animation-delay:17s}
.slideshow-9 img:nth-child(7){animation-delay:20.4s}
.slideshow-9 img:nth-child(8){animation-delay:23.8s}
.slideshow-9 img:nth-child(9){animation-delay:27.2s}

@keyframes rotarFotos9{
  0%{opacity:0}
  2.9%{opacity:1}
  14.1%{opacity:1}
  17%{opacity:0}
  100%{opacity:0}
}

/* Variante para tarjetas con una sola foto: no hay nada que rotar. */
.slideshow-1 img{animation:none;opacity:1}

/* Sin movimiento: queda fija la primera foto */
@media (prefers-reduced-motion: reduce){
  .slideshow img{animation:none}
  .slideshow img:first-child{opacity:1}
}
.card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:1.1rem}
.card p{margin:0;color:var(--ink-mid);font-size:.94rem}

/* ---- especificaciones de cada servicio ----
   Los datos duros van aparte de la descripción: es lo que diferencia una
   tarjeta que sirve para cotizar de un folleto. La lista es la que se estira
   (flex:1), así el botón de WhatsApp queda al pie en todas las tarjetas
   aunque tengan distinta cantidad de renglones. */
.card .ficha{
  margin:0;padding:0;list-style:none;flex:1;
  display:flex;flex-direction:column;gap:7px;
  font-size:.88rem;line-height:1.45;color:var(--ink-soft);
}
.card .ficha li{position:relative;padding-left:15px}
.card .ficha li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;background:var(--gold);
}
.card .tag{
  align-self:flex-start;background:var(--gold-ink);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:3px;padding:3px 8px;
}
.card a.walink{font-size:.93rem;font-weight:700;color:var(--wa-ink);text-decoration:none}
/* en táctil el enlace de texto queda chico para el pulgar: pasa a bloque
   con padding vertical (~44px de zona de toque, WCAG 2.5.8 pide 24 mínimo) */
@media(max-width:720px){
  .card a.walink{display:block;padding:12px 0;margin:-6px 0}
}

/* ---- por qué ---- */
.why{background:var(--ice);border-block:1px solid var(--border)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
@media(max-width:960px){.why-grid{grid-template-columns:repeat(2,1fr)}}
/* en pantalla angosta cada columna queda en ~150px y el texto se parte en
   renglones de dos palabras: una sola columna, como ya hacen las prácticas */
@media(max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-item{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  border-top:3px solid var(--gold);padding:18px;box-shadow:var(--shadow);
}
.why-item b{display:block;margin-bottom:6px}
.why-item p{margin:0;color:var(--ink-soft);font-size:.92rem}

/* Fondo alternado para las secciones que no son "Por qué elegirnos" y
   necesitan separarse de la anterior. */
.block.alt{background:var(--ice);border-block:1px solid var(--border)}

/* ---- seguridad operativa ----
   Mismas fichas que "Por qué elegirnos", pero son siete: en tres columnas
   quedaría una ficha huérfana en la última fila. Van dos columnas que se
   llenan de arriba hacia abajo (4+3), y cada ficha con su propia altura
   para que las cortas no arrastren aire de las largas. */
.why-grid.practicas{
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;
  align-items:start;
}
@media(max-width:560px){
  .why-grid.practicas{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}

/* ---- flota y capacidades ----
   Tabla, no galería: acá se responde "¿podés llevar esto?", que es lo que
   pregunta un comprador. */
.tabla-flota{
  width:100%;margin-top:36px;border-collapse:collapse;
  background:var(--card);border:1px solid var(--border);
  font-size:.94rem;text-align:left;
}
.tabla-flota th,.tabla-flota td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.tabla-flota thead th{
  background:var(--navy);color:var(--on-navy);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
}
.tabla-flota tbody th{width:38%;color:var(--ink);font-weight:700}
.tabla-flota td{color:var(--ink-soft)}
.tabla-flota tbody tr:last-child th,.tabla-flota tbody tr:last-child td{border-bottom:none}
@media(max-width:560px){
  .tabla-flota{font-size:.88rem}
  .tabla-flota th,.tabla-flota td{padding:11px 12px}
  .tabla-flota tbody th{width:42%}
}

/* ---- nosotros ---- */
.nosotros p{max-width:62ch;color:var(--ink-mid);margin:18px 0 0}
.nosotros .cierre{font-weight:700;color:var(--ink)}

/* ---- testimonios ---- */
/* Pared de reseñas: todas visibles, sin carrusel. flex-wrap centrado para
   que la fila incompleta (3+2 en desktop) quede centrada y no colgando. */
.quotes{
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start; /* cada reseña con su altura: sin huecos por estirarse a la más alta */
  gap:12px;margin-top:36px;
}
.quote{
  flex:1 1 260px;max-width:340px;
  margin:0; /* blockquote trae 1em/40px de margen del navegador: acá separa el gap */
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;
}
.quote .star-off{opacity:.25}

/* En mobile las cinco reseñas colapsan en una sola tarjeta tipo lista con
   separadores: misma información en un tercio del alto, sin carrusel. */
@media(max-width:720px){
  .quotes{
    display:block;margin-top:24px;padding:4px 18px;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .quote{
    border:none;box-shadow:none;border-radius:0;max-width:none;
    padding:14px 0;gap:6px;
    border-bottom:1px solid var(--border);
  }
  .quote:last-child{border-bottom:none}
  .quote .stars{font-size:.8rem}
  .quote p{font-size:.94rem}
}
.quote p{margin:0;font-size:.97rem;color:var(--ink);flex:1}
.quote footer{font-size:.85rem;color:var(--ink-soft)}
.quote .stars{color:var(--gold-ink);letter-spacing:.12em;font-size:.9rem}

/* ---- carrusel horizontal en mobile ----
   Evita la columna interminable de tarjetas: se deslizan de a una.
   El aviso de deslizar va ANTES de las tarjetas: cada tarjeta mide más de
   una pantalla, y si el aviso queda abajo nadie se entera de que hay seis
   servicios hasta después de scrollear la primera entera. */
.swipe-hint{display:none}
@media(max-width:720px){
  .swipe{
    display:flex;grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    /* sangrado a los bordes: debe coincidir con el padding de .wrap en mobile.
       scroll-padding hace que las tarjetas frenen a 20px del borde también
       después de deslizar, no solo en la posición inicial. */
    gap:14px;margin:16px -20px 0;padding:2px 20px 12px;
    scroll-padding:0 20px;
    scrollbar-width:none;
  }
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 84%;scroll-snap-align:start}
  .swipe-hint{
    display:block;margin:14px 0 0;font-size:.95rem;font-weight:600;
    color:var(--ink-soft);
  }
  .card-photo{aspect-ratio:4/3}
}

/* ---- cta final ---- */
.cta-final{background:var(--navy);color:var(--on-navy);text-align:center}
.cta-final img{width:132px;height:auto;margin-bottom:20px}
.cta-final h2{font-size:clamp(1.7rem,3.6vw,2.3rem)}
.cta-final p{color:var(--on-navy-soft);max-width:46ch;margin:14px auto 28px}

/* ---- footer ---- */
footer.site{background:var(--navy-deep);color:#c3cee4;padding:56px 0 36px;font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr;gap:26px}}
footer.site p{margin:0 0 8px}
footer.site b{color:#fff;display:block;margin-bottom:10px}
footer.site a{color:#c3cee4}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* teléfonos y correos con zona de toque: son enlaces que se tocan con apuro */
footer.site ul a{display:inline-block;padding-block:6px}
/* ---- datos para proveedores ----
   Va al pie y en un cuerpo más chico: no le habla al cliente que busca una
   grúa, le habla al área de compras que da de alta al proveedor. */
.proveedores{
  border-top:1px solid #2a3557;
  margin-top:36px;padding-top:24px;font-size:.88rem;
}
/* en una fila, como la franja de habilitaciones: son tres datos cortos y
   así el pie no se estira (footer.site ul los apila, hay que ganarle) */
footer.site .proveedores ul{flex-direction:row;flex-wrap:wrap;gap:6px 28px}
.proveedores p{margin:12px 0 0}

.legal{
  border-top:1px solid #2a3557;
  margin-top:40px;padding-top:20px;font-size:.82rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ---- barra fija de acción (mobile) ---- */
.wa-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(19,27,48,.97);border-top:1px solid #2a3557;
}
.wa-bar .btn{flex:1;padding:12px 12px;font-size:.92rem}
.wa-bar .btn-ghost{flex:0 0 34%}
@media(max-width:880px){
  /* visible desde que carga la página: el que llega apurado por un auxilio
     tiene que poder llamar sin scrollear. El botón de WhatsApp del hero se
     oculta acá abajo para que no haya dos verdes en la primera pantalla:
     gana la barra, que queda al alcance del pulgar. */
  .wa-bar{display:flex}
  .hero .ctas .btn-wa{display:none}
  .nav-cta{display:none}
  /* espacio reservado siempre, para que la barra no tape el final de la página */
  body{padding-bottom:84px}
}

/* ---- hover ----
   Sólo para dispositivos con puntero real. En una pantalla táctil el estado
   :hover se queda "pegado" después de tocar, porque no existe el sacar el dedo. */
@media (hover:hover){
  nav.main a:hover{color:var(--gold-ink)}
  .btn-wa:hover{background:var(--wa-dark)}
  .btn-outline:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
  .btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
  .card a.walink:hover{text-decoration:underline}
  footer.site a:hover{color:var(--gold-bright)}
}

/* ---- ajustes de mobile ---- */
@media(max-width:720px){
  body{font-size:16px}
  section.block{padding:52px 0}
  .wrap{padding:0 20px}
  .hero-inner{padding:56px 20px 60px}
  /* art direction: en pantalla angosta la foto de la flota queda tapada por
     los botones; va el minibús en la quebrada, más vertical y con aire */
  .hero-photo{
    background-image:url('../assets/pasajeros-1-quebrada.jpg');
    background-position:32% center;
  }
  /* velo más liviano que en desktop: fuerte arriba (contraste del título),
     suelto abajo para que el minibús se aprecie */
  .hero-photo::after{
    background:linear-gradient(180deg,rgba(16,23,42,.68),rgba(16,23,42,.34));
  }
  /* con menos velo, el subtítulo necesita blanco pleno y una sombra sutil */
  .hero .lead{color:#fff;text-shadow:0 1px 10px rgba(16,23,42,.55)}
  /* botones apilados pero más livianos que el default */
  .hero .ctas .btn{flex:1 0 100%;padding:11px 16px;font-size:.94rem}
  /* las seis habilitaciones en dos columnas compactas: se leen de un vistazo
     y no empujan los servicios una pantalla entera hacia abajo */
  .certs-row{
    display:grid;grid-template-columns:1fr 1fr;
    gap:8px 14px;font-size:.78rem;line-height:1.4;
    align-items:start;text-align:left;
  }
}