/* index.html: carrusel, qué ofrecemos, cotización, servicios y banda de contacto */

/* ---- Carrusel ---- */
.hero{position:relative;background:var(--hero);color:var(--on-dark);overflow:hidden;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 7px,transparent 7px 16px)}
.slides{position:relative;display:grid;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
@media (pointer:fine){.slides{cursor:grab}.slides.dragging{cursor:grabbing}}
.slides a{-webkit-user-drag:none}

.slide{grid-area:1/1;min-width:0;transform:translate3d(100%,0,0);transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.slide.active{transform:none}
.slides.dragging .slide{transition:none}

/* alto del carrusel: se ajusta en el clamp() */
.slide-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;min-height:clamp(540px,53vw,870px);padding-block:clamp(3rem,7vw,6rem)}
.slide h1,.slide h2{font-size:clamp(2.3rem,5.2vw,4rem);color:#fff;margin-bottom:.4em}
.slide p{font-size:1.15rem;margin-bottom:.35em}

/* Fondo de cada diapositiva = foto (--img) + capa oscura.
   --a1, --a2, --a3: opacidad de la capa a la izquierda, centro y derecha */
.slide{--a1:.85;--a2:.65;--a3:.25;
  --overlay:linear-gradient(90deg,rgba(22,29,36,var(--a1)),rgba(22,29,36,var(--a2)) 55%,rgba(22,29,36,var(--a3)));
  background-color:var(--hero);background-image:var(--overlay),var(--img);background-size:cover;background-repeat:no-repeat;background-position:center}
.slide-1{--img:url("../img/perucar_main_inicio_01.webp");--a1:.8;--a2:.62;--a3:.2;background-position:center 8%}
.slide-2{--img:url("../img/perucar_main_inicio_02.webp");--a1:.72;--a2:.5;--a3:.1;background-position:center 25%}
.slide-3{--img:url("../img/perucar_main_inicio_03.webp");--a1:.6;--a2:.4;--a3:.05;background-position:center 6%}
.slide h1,.slide h2,.slide p{text-shadow:0 1px 14px rgba(0,0,0,.4)}
.slide p{color:#e6e8eb}
.slide .btn{margin-top:1.25rem}

/* ---- Qué ofrecemos ---- */
.about{background:#161d24;color:#eceef0;font-family:"Outfit","Segoe UI",Arial,sans-serif}
.about h2{font-family:inherit;font-weight:500;font-size:clamp(2rem,3.2vw,2.6rem);line-height:1.2;letter-spacing:0;color:#eceef0;margin:0 0 1.6rem}
.about p{max-width:860px;margin:0;font-size:1.25rem;line-height:1.9;font-weight:300;text-align:justify;color:#eceef0}

/* ---- Cotización (los campos están en main.css) ---- */
.quote h2,.services h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.quote .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:2.5rem}
.quote-intro p{color:var(--muted)}

/* ---- Servicios ---- */
.services{background:var(--bg)}
.grid{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 1.75rem}
.grid li{border-top:3px solid var(--brand-dark);padding-top:1rem}
:root[data-theme="dark"] .grid li{border-top-color:var(--brand-light)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .grid li{border-top-color:var(--brand-light)}}
.grid svg{width:38px;height:38px;color:var(--brand-red-ink);margin-bottom:.5rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.grid h3{font-size:1.2rem}
.grid p{color:var(--muted);font-size:1rem;margin:0}

/* ---- Banda de contacto (fondo fijo) ---- */
.contact-band{position:relative;color:#fff;text-align:center;
  background-color:var(--brand-dark);
  background-image:linear-gradient(rgba(22,29,36,.74),rgba(22,29,36,.74)),url("../img/perucar_background_inicio_01.webp");
  background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
@media (max-width:960px){

  /* en móviles el fondo fijo da problemas */
  .contact-band{background-attachment:scroll}
}
.contact-band h2{font-size:clamp(1.8rem,3.6vw,2.8rem);color:#fff}
.contact-band p{color:var(--on-dark-soft);margin-inline:auto}
.contact-band .actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:1.5rem}
.contact-band .btn.ghost{color:#fff}

/* ---- Responsive ---- */
@media (max-width:960px){
  .slide-inner,.quote .wrap{grid-template-columns:1fr}
  .slide{--overlay:linear-gradient(rgba(22,29,36,.74),rgba(22,29,36,.74))}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .about p{text-align:left;font-size:1.125rem;line-height:1.8}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
}