/* Cerrajería Iván · integración de fotografías reales */
:root {
  --hero-photo: url("../img/photos/hero.webp");
  --cylinder-photo: url("../img/photos/cylinder.webp");
  --portal-photo: url("../img/photos/portal.webp");
  --car-photo: url("../img/photos/car.webp");
  --trust-photo: url("../img/photos/trust.webp");
  --process-photo: url("../img/photos/process.webp");
}

.photo-lock {
  background-image:
    linear-gradient(90deg, rgba(246,247,242,.93) 0%, rgba(246,247,242,.74) 20%, rgba(246,247,242,.08) 48%, rgba(0,0,0,.08) 100%),
    var(--hero-photo);
  background-position: 56% 50%;
}

.photo-cylinder {
  background-image: linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,0)), var(--cylinder-photo);
  background-position: 52% 50%;
}

.photo-portal {
  background-image: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0)), var(--portal-photo);
  background-position: 50% 48%;
}

.photo-car {
  background-image: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--car-photo);
  background-position: 52% 48%;
}

.hero { background: #fff; }

.needs {
  background: #f6f7f2;
  border-top: 1px solid #e3e2dc;
  border-bottom: 1px solid #e3e2dc;
}

.feature-cards {
  background: #fff;
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(88px, 9vw, 128px);
}

.feature-card {
  background: #fff;
  border: 1px solid #e3e2dc;
}

/* Experiencia: la fotografía forma parte del fondo, cubre toda la altura
   y se desvanece hacia la izquierda sin recortes ni formas. */
.trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: #f3f4f6;
  background-image:
    linear-gradient(90deg,
      #f3f4f6 0%,
      #f3f4f6 34%,
      rgba(243,244,246,.98) 42%,
      rgba(243,244,246,.82) 51%,
      rgba(243,244,246,.48) 61%,
      rgba(243,244,246,.16) 70%,
      rgba(243,244,246,0) 78%),
    var(--trust-photo);
  background-repeat: no-repeat;
  background-size: 100% 100%, min(64vw, 1080px) 100%;
  background-position: center, right center;
}

.trust::before,
.trust::after {
  content: none !important;
  display: none !important;
}

.trust-layout {
  position: relative;
  z-index: 1;
}

/* Cómo trabajamos: beige cálido y tarjetas integradas */
.process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(78px, 8vw, 118px) 0;
  background: #e9e1d5;
  color: #252525;
}

.process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--process-photo) center 42% / cover no-repeat;
  opacity: .035;
}

.process::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(233,225,213,.99), rgba(233,225,213,.94));
}

.process .process-heading {
  margin-bottom: clamp(34px, 4vw, 54px);
}

.process .process-heading h2,
.process .process-heading p,
.process .process-step h2,
.process .process-step p {
  color: #252525;
}

.process .process-heading p {
  max-width: 650px;
  opacity: .76;
}

.process .process-grid {
  gap: 18px;
  min-height: 0;
}

.process .process-step {
  min-height: 250px;
  padding: clamp(28px, 3vw, 40px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(98,82,62,.14);
  box-shadow: 0 18px 42px rgba(67,53,38,.06);
  color: #252525;
}

.process .process-step:first-child {
  border-left: 1px solid rgba(98,82,62,.14);
}

.process .process-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(183,27,28,.24);
  border-radius: 50%;
  color: #b71b1c;
  background: rgba(255,255,255,.58);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
}

.process .process-step h2 { margin-top: 34px; }
.process .process-step p { opacity: .68; }

.faq {
  background: #f6f7f2;
  border-top: 1px solid #e3e2dc;
}

.contact { background: #fff; }

@media (max-width: 1180px) {
  .photo-lock {
    background-image: linear-gradient(180deg, rgba(246,247,242,.10), rgba(246,247,242,.22)), var(--hero-photo);
    background-position: 50% 48%;
  }

  .trust {
    background-size: 100% 100%, 66% 100%;
    background-position: center, right center;
  }

  .process .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .photo-lock { background-position: 52% 50%; }

  .photo-cylinder,
  .photo-portal,
  .photo-car { min-height: 240px; }

  .photo-cylinder { background-position: 58% 50%; }
  .photo-portal { background-position: 48% 50%; }
  .photo-car { background-position: 54% 48%; }

  .trust {
    padding-bottom: 300px;
    background-image:
      linear-gradient(180deg,
        #f3f4f6 0%,
        #f3f4f6 55%,
        rgba(243,244,246,.94) 65%,
        rgba(243,244,246,.42) 80%,
        rgba(243,244,246,0) 92%),
      var(--trust-photo);
    background-size: 100% 100%, 100% 300px;
    background-position: center, center bottom;
  }

  .process { padding: 72px 0; }

  .process .process-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .process .process-step {
    min-height: 220px;
    border: 1px solid rgba(98,82,62,.14);
  }
}