/* ==========================================================================
   Lausof SRL — "Alquiler de autoelevadores"
   Complemento de styles.css. No repite nada que ya esté en la hoja principal:
   acá viven sólo las piezas que esta página agrega (encabezado de sección,
   ficha de los equipos y preguntas frecuentes).
   Los colores, la tipografía, los bordes y las fichas se heredan tal cual.
   ========================================================================== */

/* ---- encabezado de página ----
   Mismo lenguaje que el hero de la home pero más bajo. Sin foto de fondo:
   la única foto real de los autoelevadores es un recorte vertical sobre
   blanco (del tríptico impreso) y estirado como fondo quedaría falso. Va el
   azul de marca con un degradado suave; cuando la familia saque una foto
   apaisada de los equipos en el galpón, se suma acá como en las demás
   páginas (y se arma el og propio con ella). */
.page-head{
  position:relative;color:var(--on-navy);overflow:hidden;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 62%,#0d1426 100%);
}
.page-head-inner{position:relative;padding:56px 24px 60px;max-width:1120px}
.page-head h1{font-size:clamp(1.9rem,4.4vw,2.9rem);letter-spacing:-.015em;max-width:20ch}
.page-head .lead{max-width:54ch;font-size:1.08rem;color:var(--on-navy-soft);margin:16px 0 26px}
.page-head .ctas{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:720px){
  .page-head-inner{padding:48px 20px 52px}
  .page-head .ctas .btn{flex:1 0 100%;padding:11px 16px;font-size:.94rem}
}

/* ---- los equipos ----
   La foto real del tríptico (los Lonking con el mástil extendido, recorte
   sobre blanco) al lado de las dos fichas de modelo. La foto NO se recorta
   con object-fit: es vertical y el mástil es justamente lo que hay que ver. */
.equipos{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:28px;margin-top:36px;align-items:start}
@media(max-width:880px){.equipos{grid-template-columns:1fr}}
.equipos figure{
  margin:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.equipos figure img{display:block;width:100%;height:auto;border-bottom:3px solid var(--gold)}
.equipos figcaption{padding:12px 16px;font-size:.88rem;color:var(--ink-soft)}

/* Ficha por modelo: mismo registro que las tarjetas .clave del depósito. */
.modelos{display:grid;gap:16px;align-content:start}
.modelo{
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);
}
.modelo h3{font-size:1.05rem;margin-bottom:4px}
.modelo .modelo-tipo{margin:0 0 10px;color:var(--ink-soft);font-size:.88rem}
.modelo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.modelo li{color:var(--ink-mid);font-size:.94rem;padding-left:18px;position:relative}
.modelo li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;background:var(--gold)}
.modelo li b{color:var(--ink)}

/* ---- texto corrido de las secciones ---- */
.texto p{max-width:62ch;color:var(--ink-mid);margin:18px 0 0}

/* ---- preguntas frecuentes ----
   details/summary nativo, igual que en deposito-galpon.html: se abre y
   cierra sin JavaScript. */
.faq{margin-top:32px;display:flex;flex-direction:column;gap:10px;max-width:760px}
.faq details{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:0 18px;
}
.faq summary{
  cursor:pointer;font-weight:700;font-size:.98rem;
  padding:15px 0;list-style:none;position:relative;padding-right:28px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  color:var(--gold-ink);font-size:1.25rem;font-weight:700;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--ink-mid);font-size:.94rem;max-width:60ch}
@media (hover:hover){.faq summary:hover{color:var(--gold-ink)}}

/* ---- cierre ---- */
.cta-final .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}