/* =========================================================
   HERO 7MA CONTROL — takeover total de la primera seccion
   Inspirado en la referencia: foto a la derecha, degradado
   blanco a la izquierda, tarjetas de confianza y barra inferior.
   Scope fuerte para ganar a los !important previos.
   ========================================================= */

:root {
  --h7-red: #d94452;
  --h7-red-dark: #c2384a;
  --h7-ink: #0f1f3a;
  --h7-gray: #5b6576;
  --h7-rose: #ffe9ec;
  --nav-h: 80px;
}

/* Neutraliza decoraciones heredadas de la seccion hero anterior */
#root section.hero7ma-section::before,
#root section.hero7ma-section::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

#root section.hero7ma-section {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: clamp(520px, calc(100vh - var(--nav-h)), 720px) !important;
  padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(1.25rem, 2.5vw, 2rem) !important;
  margin-top: var(--nav-h);
  background: #ffffff !important;
  overflow: hidden !important;
  isolation: isolate;
}

/* Imagen de fondo, anclada a la derecha */
#root section.hero7ma-section .hero7ma__bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url("../img/hero-7ma-control-bg.jpg");
  background-size: cover;
  background-position: 72% center;
  z-index: -2 !important;
}

/* Velo/degradado: blanco solido a la izquierda -> transparente a la derecha */
#root section.hero7ma-section .hero7ma__veil {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 30%,
      rgba(255, 250, 251, 0.92) 44%,
      rgba(255, 248, 250, 0.55) 58%,
      rgba(255, 255, 255, 0.12) 72%,
      rgba(255, 255, 255, 0) 84%
    ),
    radial-gradient(120% 90% at 0% 50%, rgba(255, 244, 246, 0.6), transparent 60%);
}

#root section.hero7ma-section .hero7ma__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 3.5vw, 2.5rem);
  position: relative;
  z-index: 1;
}

#root section.hero7ma-section .hero7ma__content {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Badge */
#root section.hero7ma-section .hero7ma__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(217, 68, 82, 0.18);
  box-shadow: 0 6px 18px rgba(15, 31, 58, 0.06);
  color: var(--h7-ink);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
}
#root section.hero7ma-section .hero7ma__badge svg {
  width: 17px;
  height: 17px;
  color: var(--h7-red);
}

/* Titulo */
#root section.hero7ma-section .hero7ma__title {
  margin: 0.9rem 0 0 !important;
  font-weight: 800 !important;
  color: var(--h7-ink) !important;
  font-size: clamp(2.3rem, 4.4vw, 3.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
}
#root section.hero7ma-section .hero7ma__accent {
  color: var(--h7-red) !important;
}

/* Parrafo */
#root section.hero7ma-section .hero7ma__lead {
  margin: 0.8rem 0 0 !important;
  color: var(--h7-gray) !important;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem) !important;
  line-height: 1.55 !important;
  max-width: 30em;
}

/* Tarjetas de confianza */
#root section.hero7ma-section .hero7ma__trust {
  list-style: none !important;
  margin: 1.1rem 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0.5rem !important;
  width: 100%;
  max-width: 540px;
}
#root section.hero7ma-section .hero7ma__trust-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.95rem;
  background: #ffffff;
  border: 1px solid rgba(15, 31, 58, 0.06);
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(15, 31, 58, 0.06);
}
#root section.hero7ma-section .hero7ma__trust-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--h7-rose);
  color: var(--h7-red);
}
#root section.hero7ma-section .hero7ma__trust-ic svg {
  width: 19px;
  height: 19px;
}
#root section.hero7ma-section .hero7ma__trust-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
#root section.hero7ma-section .hero7ma__trust-txt strong {
  color: var(--h7-ink);
  font-weight: 700;
  font-size: 1rem;
}
#root section.hero7ma-section .hero7ma__trust-txt small {
  color: var(--h7-gray);
  font-size: 0.85rem;
}
#root section.hero7ma-section .hero7ma__trust-check {
  margin-left: auto;
  color: #16a34a;
}
#root section.hero7ma-section .hero7ma__trust-check svg {
  width: 22px;
  height: 22px;
}

/* Botones */
#root section.hero7ma-section .hero7ma__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}
#root section.hero7ma-section .hero7ma__btn-primary,
#root section.hero7ma-section .hero7ma__btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border-radius: 13px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#root section.hero7ma-section .hero7ma__btn-primary {
  background: var(--h7-red);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(217, 68, 82, 0.32);
}
#root section.hero7ma-section .hero7ma__btn-primary:hover {
  background: var(--h7-red-dark);
  transform: translateY(-1px);
}
#root section.hero7ma-section .hero7ma__btn-primary svg {
  width: 20px;
  height: 20px;
}
#root section.hero7ma-section .hero7ma__btn-ghost {
  background: #ffffff;
  color: var(--h7-ink);
  border: 1px solid rgba(15, 31, 58, 0.14);
  box-shadow: 0 6px 16px rgba(15, 31, 58, 0.05);
}
#root section.hero7ma-section .hero7ma__btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 31, 58, 0.24);
}

/* Barra inferior flotante */
#root section.hero7ma-section .hero7ma__strip {
  margin-top: 1.6rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 1rem 1.6rem;
  background: #ffffff;
  border: 1px solid rgba(15, 31, 58, 0.07);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(15, 31, 58, 0.09);
}
#root section.hero7ma-section .hero7ma__strip-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 1.4rem;
  position: relative;
}
#root section.hero7ma-section .hero7ma__strip-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(15, 31, 58, 0.08);
}
#root section.hero7ma-section .hero7ma__strip-ic {
  flex: 0 0 auto;
  color: var(--h7-red);
}
#root section.hero7ma-section .hero7ma__strip-ic svg {
  width: 22px;
  height: 22px;
}
#root section.hero7ma-section .hero7ma__strip-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
#root section.hero7ma-section .hero7ma__strip-txt strong {
  color: var(--h7-ink);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
#root section.hero7ma-section .hero7ma__strip-txt small {
  color: var(--h7-gray);
  font-size: 0.8rem;
}

/* ============================ TABLET ============================ */
@media (max-width: 1024px) {
  #root section.hero7ma-section .hero7ma__bg {
    background-position: 78% center;
  }
  #root section.hero7ma-section .hero7ma__veil {
    background:
      linear-gradient(
        100deg,
        #ffffff 0%,
        #ffffff 38%,
        rgba(255, 248, 250, 0.7) 60%,
        rgba(255, 255, 255, 0.15) 80%,
        rgba(255, 255, 255, 0) 92%
      );
  }
  #root section.hero7ma-section .hero7ma__strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem 1rem;
  }
  #root section.hero7ma-section .hero7ma__strip-item:nth-child(2)::after {
    display: none;
  }
}

/* ============================ MOBILE ============================ */
@media (max-width: 720px) {
  #root section.hero7ma-section {
    min-height: auto !important;
    padding-bottom: 2rem !important;
  }
  /* La foto pasa a un velo casi solido: el texto manda */
  #root section.hero7ma-section .hero7ma__bg {
    background-position: 70% center;
    opacity: 0.9;
  }
  #root section.hero7ma-section .hero7ma__veil {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 250, 251, 0.97) 45%,
        rgba(255, 255, 255, 0.99) 100%
      );
  }
  #root section.hero7ma-section .hero7ma__content {
    max-width: 100%;
  }
  #root section.hero7ma-section .hero7ma__title {
    font-size: clamp(2.1rem, 9vw, 2.9rem) !important;
  }
  #root section.hero7ma-section .hero7ma__trust {
    max-width: 100%;
  }
  #root section.hero7ma-section .hero7ma__cta {
    width: 100%;
  }
  #root section.hero7ma-section .hero7ma__btn-primary,
  #root section.hero7ma-section .hero7ma__btn-ghost {
    width: 100%;
  }
  #root section.hero7ma-section .hero7ma__strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 0.6rem;
    padding: 1rem;
  }
  #root section.hero7ma-section .hero7ma__strip-item::after {
    display: none !important;
  }
  #root section.hero7ma-section .hero7ma__strip-item {
    padding: 0.2rem 0.4rem;
  }
  #root section.hero7ma-section .hero7ma__strip-txt strong {
    white-space: normal;
  }
}