/* ==========================================================================
   SectionHowItWorks.css — Cards + rombos fuera en los laterales (fix 100vw)
   ========================================================================== */

.srHIW {
  position: relative;
  background: #ffffff;
  padding: 80px 0 100px;

  /* ✅ ancho completo sin provocar scroll horizontal */
  width: 100%;
  max-width: 100vw;

  /* ✅ truco: expandir lateralmente sin sacar el contenido del flujo */
  margin-right: calc(50% - 50vw);

  /* ✅ permitir que se vean los rombos */
  overflow: visible;
}

.srHIW__container {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* =========================
   ROMBOS decorativos externos (fuera de las cajas)
   ========================= */
.srHIW::before,
.srHIW::after {
  content: "";
  position: absolute;
  background-image: var(--srHIW-diamond-url);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
  pointer-events: none;
  opacity: 1;
  z-index: 1;
  filter: drop-shadow(0 12px 18px rgba(60, 30, 150, 0.18));
}

/* ✅ Rombo izquierdo ligeramente fuera de la primera card */
.srHIW::before {
  top: 130px;
  left: -45px;
}

/* ✅ Rombo derecho ligeramente fuera de la última card */
.srHIW::after {
  bottom: 30px;
  right: -45px;
}

/* =========================
   Título principal
   ========================= */
.srHIW__head {
  text-align: left;
  margin-bottom: 50px;
}

.srHIW__title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.srHIW__titleHighlight {
  background: linear-gradient(90deg, #6d28d9, var(--color2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================
   GRID
   ========================= */
.srHIW__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  align-items: stretch;
}

/* =========================
   CARD
   ========================= */
.srHIW__card {
  background: #f9fafb;
  border-radius: 16px;
  text-align: center;
  padding: 30px 30px;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  z-index: 2;

  box-shadow:
    -8px 12px 0 -2px var(--color2),
    0 12px 0 -2px var(--color2),
    0 15px 40px grey;
}

.srHIW__card:hover {
  transform: translateY(-6px);
  box-shadow:
    -8px 14px 0 -2px var(--color2),
    0 14px 0 -2px var(--color2),
    0 24px 50px grey;
}

/* =========================
   CONTENIDO INTERNO
   ========================= */
.srHIW__cardTitle {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #374151;
}

.srHIW__diamond {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 0 5px;
  background-image: var(--srHIW-diamond-url);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
}

.srHIW__cardText {
  margin: 0 auto;
  max-width: 38ch;
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.6;
}

/* =========================
   ANIMACIÓN de aparición
   ========================= */
.srHIW__fadeUp {
  opacity: 0;
  transform: translateY(18px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.srHIW__fadeUp.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   ANIMACIÓN rombos flotantes
   ========================= */
@keyframes floatDiamond {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.srHIW::before,
.srHIW::after {
  animation: floatDiamond 6s ease-in-out infinite;
}

.srHIW::after {
  animation-delay: 3s;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1024px) {
  .srHIW__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .srHIW::before {
    top: 180px;
    left: -35px;
    width: 80px;
    height: 80px;
  }

  .srHIW::after {
    bottom: 120px;
    right: -35px;
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 768px) {
  .srHIW__grid {
    grid-template-columns: 1fr;
  }

  .srHIW__head {
    text-align: center;
  }

  .srHIW__title {
    text-align: center;
    font-size: 2rem;
  }

  .srHIW::before,
  .srHIW::after {
    opacity: 0.35;
    width: 60px;
    height: 60px;
  }

  .srHIW::before {
    top: 80px;
    left: -25px;
  }

  .srHIW::after {
    bottom: 60px;
    right: -25px;
  }
}