.page-somosmas {
  background-color: #f5f5f2;
  position: relative;
  isolation: isolate; /* evita mezclar con otros contextos */
}

/* capa de grano */
.page-somosmas::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 .06 .1 .15 .2 .25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px; /* controla el tamaño del “grano” */
  opacity: 0.35; /* fuerza del grano */
  mix-blend-mode: multiply;
}

/* parches irregulares suavísimos (fibra) */
.page-somosmas::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      800px 400px at 10% 15%,
      rgba(0, 0, 0, 0.03),
      transparent 70%
    ),
    radial-gradient(
      600px 300px at 85% 35%,
      rgba(0, 0, 0, 0.025),
      transparent 70%
    ),
    radial-gradient(
      900px 450px at 35% 80%,
      rgba(0, 0, 0, 0.02),
      transparent 70%
    );
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* ====== SOMOS+ – Front (Hero) ====== */

/* Paleta (ajústala si ya tienes variables de marca) */
:root {
  --somos-green: #0f6f44;
  --somos-green-2: #0a5c38;
  --somos-yellow: #ffc52b;
  --somos-white: #ffffff;
}

.front {
  /* aire extra arriba (sobre el padding de Bootstrap) */
  padding-top: clamp(10rem, 10vw, 10rem);
  --somos-green: #0f6f44;
  --somos-yellow: #ffc52b;
}

/* Título “SOMOS+” más ancho para equilibrar con “+Referidos +Beneficios” */
.front .hero-title {
  color: var(--somos-green);
  font-size: clamp(5rem, 11vw, 7rem);
  line-height: 1.02;
  letter-spacing: 0.4px;
  margin-bottom: 0.35rem;
}

/* Subtítulo */
.front .hero-subtitle {
  color: #2a7e5a;
  letter-spacing: 0.4px;
  /* tamaño un poco menor que el título, pero robusto */
  font-size: clamp(1.6rem, 3.3vw, 2.6rem);
  margin-bottom: 1.2rem !important;
}

/* Texto */
.front .hero-lead {
  color: #2b2b2b;
  max-width: 46ch;
  font-size: clamp(1.2rem, 2vw, 0.5rem);
}

/* Botón Inscríbete: menos padding, texto más grande */
.front .hero-cta {
  padding: 0.55rem 1.1rem !important; /* antes .9rem 1.4rem */
  font-size: clamp(3rem, 3vw, 1.25rem); /* sube tamaño */
  line-height: 1.05; /* compacto como el mock */
  border-radius: 0.75rem; /* bordes un poco menos redondos */
}
.front .btn-brand-yellow {
  background-color: var(--somos-yellow);
  color: #13553b;
  border: 0;
}
.front .btn-brand-yellow:hover {
  background-color: #f2b817;
  color: #0d3e2c;
}

/* Link + Información: mismo cuerpo que el botón */
.front .hero-info {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700;
}
.front .link-brand-underline {
  color: var(--somos-green);
  text-decoration: underline 2px;
  text-underline-offset: 4px;
  font-size: clamp(2rem, 1.4vw, 1.25rem);
  font-weight: 100;
}
.front .link-brand-underline:hover {
  color: #0b5b36;
  text-decoration-thickness: 3px;
}

/* Contenedor de imagen (ligero respiro a la derecha en desktop) */
.front .hero-media {
  padding-right: clamp(0rem, 3vw, 1.25rem);
}

/* PNG combinado: sombra que respeta el contorno (alpha) */
.front .hero-main {
  display: block;
  border-radius: 1rem; /* si tu PNG ya trae radio, esto no afecta */
  /* sombras suaves tipo “card” que siguen la transparencia */
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.1))
    drop-shadow(0 36px 48px rgba(0, 0, 0, 0.09));
}

/* Badge posicionado arriba-derecha, ligeramente fuera del borde */
.front .hero-badge {
  width: clamp(110px, 15vw, 170px);
  top: -28px;
  right: 50px;
  transform: none; /* limpio */
  z-index: 3;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}

/* Responsive fino */
@media (max-width: 991.98px) {
  .front .hero-media {
    padding-right: 0;
  }
  .front .hero-badge {
    top: -18px;
    right: -18px;
    width: clamp(96px, 22vw, 140px);
  }
}
@media (max-width: 575.98px) {
  .front .hero-badge {
    top: -12px;
    right: -8px;
    width: 28vw; /* se reduce más en móvil */
  }
}

/* =================== tu das el primer paso (scoped) =================== */
.information-title {
  color: var(--somos-green);
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
  line-height: 1.15;
}

/* Tarjeta con sombra suave y radios grandes */
.info-card {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Íconos: tamaño fluido */
.info-icon {
  width: clamp(64px, 12vw, 96px);
  height: auto;
  user-select: none;
}

/* Texto dentro de las tarjetas */
.info-text {
  color: #2b2b2b;
  line-height: 1.55;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
/* Contenedor del icono: misma “altura visual” en las 3 cards */
.info-icon-wrap {
  min-height: clamp(64px, 12vw, 96px); /* igual al tamaño de .info-icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ajuste fino en móviles */
@media (max-width: 575.98px) {
  .info-text {
    max-width: 44ch;
  }
}

/* =================== SOMOS+ — FORMS (scoped) =================== */
.somos-forms {
  --somos-green: #0f6f44;
  --somos-green-2: #0a5c38;
  --somos-yellow: #ffc52b;
  --somos-white: #ffffff;

  /* Franja inferior verde que engancha con la siguiente sección */
  --green-start: 72%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) var(--green-start),
    var(--somos-green) var(--green-start),
    var(--somos-green) 100%
  );
}

@media (max-width: 992px) {
  .somos-forms {
    --green-start: 76%;
  }
}
@media (max-width: 576px) {
  .somos-forms {
    --green-start: 80%;
  }
}

.somos-forms__title {
  color: var(--somos-green);
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.15;
}

.somos-forms__hero {
  /* altura fija para evitar “saltos” y efecto zoom */
  height: 680px; /* ajusta 640–720px si lo necesitas */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: visible; /* para que el badge no se corte */
}

.somos-forms__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.somos-forms .somos-forms__overlay {
  position: absolute;
  inset: 0;
  left: 0;
  right: auto;
  width: 60%; /* aprox 60% izquierda */
  background: rgba(10, 92, 56, 0.66);
  backdrop-filter: saturate(120%) blur(1px);
  border-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width: 991.98px) {
  .somos-forms .somos-forms__overlay {
    width: 100%;
  }
}

.somos-forms__pills .somos-forms__pill {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: saturate(120%) blur(2px);
  color: #e7f0eb;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.45rem 1.1rem;
  font-weight: 600;
}
.somos-forms__pills .somos-forms__pill.active {
  background: var(--somos-yellow);
  color: #105a39;
  border-color: var(--somos-yellow);
}

/* Inputs “pill” blancos */
.somos-forms .somos-forms__input {
  background-color: var(--somos-white) !important;
  border: 0 !important;
  border-radius: 1.6rem !important;
  padding: 0.8rem 1.1rem !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  color: #155c3d;
}
.somos-forms .somos-forms__input::placeholder {
  color: #2d6e51;
  opacity: 0.85;
}

.somos-forms .form-control.is-invalid,
.somos-forms .form-select.is-invalid {
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.08);
}

/* Checks centrados como grupo */
.somos-forms .somos-forms__checks {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 0.25rem;
  margin-left: 50px;
}
.somos-forms .somos-forms__checks .form-check {
  width: max-content;
  text-align: left;
}
.somos-forms__checklabel {
  color: #eaf4ef;
  font-size: clamp(0.5rem, 2vw, 0.7rem);
}
.somos-forms__check {
  border-color: rgba(255, 255, 255, 0.6);
}

/* Botón: menos padding, letra mayor, subrayado, centrado por d-block mx-auto */
.somos-forms .somos-forms__btn-submit {
  background-color: var(--somos-yellow);
  color: #13553b;
  border: 0;
  padding: 0.4rem 1rem !important;
  font-size: clamp(2.5rem, 1.3vw, 1.25rem);
  line-height: 1.05;
  text-decoration: underline 2px;
  text-underline-offset: 6px;
}
.somos-forms .somos-forms__btn-submit:hover {
  background-color: #f2b817;
  color: #0d3e2c;
}

/* Badge centrado hacia el lado derecho */
.somos-forms__badge {
  width: clamp(110px, 16vw, 190px);
  left: 60%;
  bottom: clamp(-36px, -3vw, -18px);
  transform: translate(-50%, 10%);
  z-index: 3;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.somos-forms .was-validated .somos-forms__input:invalid,
.somos-forms .somos-forms__input.is-invalid {
  border: 1.5px solid #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15),
    0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

/* Por si en algún momento quedan invalid-feedback sueltas, que no ocupen espacio */
.somos-forms .invalid-feedback {
  display: none !important;
}

/* En tablet/móvil dejamos el flujo natural */
@media (max-width: 991.98px) {
  .somos-forms__hero {
    height: auto;
    min-height: 620px; /* tu valor anterior */
  }
}
@media (max-width: 575.98px) {
  .somos-forms__hero {
    min-height: 640px; /* tu valor anterior */
  }
}

/* Unifica el alto del textarea para que no “estire” el contenedor */
.somos-forms textarea.somos-forms__input {
  height: 120px; /* o 180px si tu mock lo necesita */
  resize: vertical; /* opcional: permite al usuario ampliarlo sin afectar el layout inicial */
}
/* =================== SOMOS+ — GIFTS (scoped) =================== */
.somos-gifts {
  --somos-green: #0f6f44;
  --somos-yellow: #ffc52b;
  background: var(--somos-green);
  color: #f4faf7;
  padding-top: 0.5rem;
}
.somos-gifts__title {
  color: #ffffff;
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
}
.somos-gifts__card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #e8f3ee;
}
.somos-gifts__head {
  color: var(--somos-yellow);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
}
.somos-gifts__list {
  padding-left: 1rem;
}
.somos-gifts__list li {
  margin-bottom: 0.6rem;
}
.somos-gifts__bonus {
  background: var(--somos-yellow);
  color: #12573a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* ===== SOMOS+ – Incentivos (scoped) ===== */
.somos-incentives {
  --somos-green: #0f6f44;
}

.somos-incentives__title {
  color: var(--somos-green);
  font-size: clamp(1.8rem, 4.6vw, 2.8rem);
  line-height: 1.12;
}

/* Imagen grande izquierda */
.somos-incentives__photo {
  display: block;
  width: 100%;
  border-radius: 1rem;
  /* sombra suave y profunda */
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.16))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08));
}

/* “Tarjetas” derechas (son imágenes) */
.somos-incentives__table {
  display: block;
  width: 100%;
  border-radius: 1rem;
  background: #fff; /* por si la PNG trae transparencia */
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.13))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.06));
}

/* Link de términos con estilo de marca */
.somos-incentives__link {
  color: var(--somos-green);
  font-weight: 700;
  text-decoration: underline 3px;
  text-underline-offset: 6px;
}
.somos-incentives__link:hover {
  color: #0b5b36;
  text-decoration-thickness: 4px;
}