/* ============================================================
   template-compra-sms.css — Frame "frame-login-compra-correo"
   Figma: "Actu pagina web andes scd"
   Nodo principal: 3701:9607 (Frame 410 — logos panel)
   Sistema diseño compartido: 3617:7094 / 3617:7095 / 3617:7096

   Colores exactos (RGBA 0–1 → HEX):
     #2D353C  r=0.17555 g=0.20890 b=0.23558  texto oscuro
     #0D2666  r=0.05098 g=0.14902 b=0.40000  azul principal
     #44535F  r=0.26667 g=0.32549 b=0.37255  gris borde / label
     #F5F5F5  r=0.96078 g=0.96078 b=0.96078  fondo form container
     #0A3C83  r=0.03922 g=0.23529 b=0.51373  botón azul
     #FFFFFF  blanco

   Tipografía exacta Figma:
     Heading  → Poppins Bold 700,    40px,     lh 51px,   #2D353C
     Cuerpo   → Poppins Light 300,   18px,     lh 31px,   #2D353C
     Label    → Poppins Regular 400, 15.13px,  lh auto,   #44535F
     Botón    → Poppins SemiBold 600,16.92px,  lh auto,   #FFFFFF

   Dimensiones exactas Figma:
     Logos frame (3701:9607): 608×435px, cornerRadius 21.26px
     Form container (3617:7096): radius 18.29px, padding 19/26px, gap 20px
     Input: height 30px, cornerRadius 9.14px, stroke 1px #44535F
     Botón:  205×38px, cornerRadius 24.37px, fill #0A3C83

   Breakpoints: 375px / 768px / 1440px
   BEM: .compra-sms__*
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
.andes-compra-sms {
  --cs-texto:       #2D353C;
  --cs-azul:        #0D2666;
  --cs-azul-btn:    #0A3C83;
  --cs-borde:       #44535F;
  --cs-fondo-form:  #F5F5F5;
  --cs-blanco:      #FFFFFF;
  --cs-radio-form:  18px;
  --cs-radio-input: 9px;
  --cs-radio-btn:   24px;
  --cs-fuente:      'Poppins', sans-serif;
}

/* ── Página completa — ocupa la altura libre entre header y borde ── */
.andes-compra-sms {
  min-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    160deg,
    #e8f4fd 0%,
    #f0f7fc 40%,
    #ffffff 100%
  );
}

/* ── Sección centrada ─────────────────────────────────────────── */
.compra-sms__seccion {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

/* ── Contenedor 2 columnas — 1440px canvas de referencia ─────── */
.compra-sms__contenido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Columna logos — nodo 3701:9607 Frame 410: 608×435px ─────── */
.compra-sms__panel-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 21px;
  overflow: hidden;
}

.compra-sms__logos-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 608px;
  border-radius: 21px;
}

/* ── Columna formulario — Frame 293 (nodo 3617:7094)
   layoutMode VERTICAL, itemSpacing 25px, counterAxisAlignItems CENTER ── */
.compra-sms__panel-form {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
}

/* Heading — nodo 3617:7095 styleOverrideTable "21"
   Poppins Bold 700, EXACTO 40px, lh 51px, #2D353C */
.compra-sms__heading {
  font-family: var(--cs-fuente);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3.1875rem;
  color: var(--cs-texto);
  margin: 0;
}

/* Cuerpo — nodo 3617:7095 styleOverrideTable "3"
   Poppins Light 300, EXACTO 18px, lh 31px, #2D353C */
.compra-sms__cuerpo {
  font-family: var(--cs-fuente);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.9375rem;
  color: var(--cs-texto);
  margin: 0;
}

/* ── Form container — nodo 3617:7096
   fill #F5F5F5, cornerRadius 18.29px → 18px
   paddingTop/Bottom 19px (1.1875rem), paddingLeft/Right 26px (1.625rem)
   itemSpacing 20px (1.25rem) ── */
.compra-sms__form-caja {
  background-color: var(--cs-fondo-form);
  border-radius: var(--cs-radio-form);
  padding: 1.1875rem 1.625rem;
}

.compra-sms__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Input — nodo I3617:7098;2493:6160
   fill #FFF, stroke 1px #44535F, cornerRadius 9.14px → 9px
   height 30px, Poppins Regular 400, 15.13px → 15px, color #44535F */
.compra-sms__campo {
  width: 100%;
  background-color: var(--cs-blanco);
  border: 1px solid var(--cs-borde);
  border-radius: var(--cs-radio-input);
  font-family: var(--cs-fuente);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--cs-texto);
  padding: 0.4375rem 0.875rem;
  min-height: 30px;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.compra-sms__campo::placeholder {
  color: rgba(68, 83, 95, 0.55);
}

.compra-sms__campo:focus {
  outline: none;
  border-color: var(--cs-azul-btn);
  box-shadow: 0 0 0 3px rgba(10, 60, 131, 0.15);
}

/* Botón — nodo 3617:7099 "boton-envio"
   fill #0A3C83, cornerRadius 24.37px → 24px, EXACTO 205×38px
   Poppins SemiBold 600, 16.92px → 17px, color #FFFFFF */
.compra-sms__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cs-azul-btn);
  color: var(--cs-blanco);
  font-family: var(--cs-fuente);
  font-weight: 600;
  font-size: 1.0625rem;
  border: none;
  border-radius: var(--cs-radio-btn);
  padding: 0.6875rem 2rem;
  min-height: 38px;
  max-width: 205px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 0 auto;
  white-space: nowrap;
}

.compra-sms__btn:hover,
.compra-sms__btn:focus {
  background-color: var(--cs-azul);
  color: var(--cs-blanco);
}

.compra-sms__btn:focus-visible {
  outline: 3px solid rgba(13, 38, 102, 0.4);
  outline-offset: 2px;
}

/* ============================================================
   MOBILE — max-width: 375px
   ============================================================ */
@media (max-width: 375px) {
  .andes-compra-sms {
    min-height: calc(100vh - 130px);
  }

  .compra-sms__seccion {
    padding: 2rem 1rem;
    align-items: flex-start;
  }

  .compra-sms__contenido {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Logos — reducido en mobile */
  .compra-sms__panel-logos {
    max-width: 240px;
    margin: 0 auto;
  }

  /* Heading mobile — escala ~55% de 40px */
  .compra-sms__heading {
    font-size: 1.375rem;
    line-height: 1.35;
  }

  .compra-sms__cuerpo {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .compra-sms__form-caja {
    padding: 1rem;
  }

  .compra-sms__btn {
    max-width: 100%;
  }
}

/* ============================================================
   TABLET — 376px a 767px
   ============================================================ */
@media (min-width: 376px) and (max-width: 767px) {
  .compra-sms__seccion {
    padding: 2.5rem 1.5rem;
    align-items: flex-start;
  }

  .compra-sms__contenido {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .compra-sms__panel-logos {
    max-width: 300px;
    margin: 0 auto;
  }

  .compra-sms__heading {
    font-size: 1.625rem;
    line-height: 1.3;
  }

  .compra-sms__cuerpo {
    font-size: 1rem;
    line-height: 1.65;
  }

  .compra-sms__form-caja {
    padding: 1.125rem 1.25rem;
  }

  .compra-sms__btn {
    max-width: 100%;
  }
}

/* ============================================================
   TABLET ANCHO — 768px a 1439px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1439px) {
  .compra-sms__seccion {
    padding: 3rem 2rem;
  }

  .compra-sms__contenido {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .compra-sms__panel-logos {
    max-width: 100%;
  }

  /* Heading tablet — escala ~70% de 40px */
  .compra-sms__heading {
    font-size: 1.875rem;
    line-height: 1.3;
  }

  .compra-sms__cuerpo {
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  .compra-sms__btn {
    max-width: 205px;
  }
}

/* ============================================================
   DESKTOP — min-width: 1440px
   Canvas Figma: 1440px
   Logos frame (3701:9607): EXACTO 608×435px, cornerRadius 21.26px
   Form container (3617:7096): padding EXACTO 19px/26px
   Input: height EXACTO 30px
   Botón: EXACTO 205×38px
   ============================================================ */
@media (min-width: 1440px) {
  .compra-sms__seccion {
    padding: 4rem 2rem;
  }

  .compra-sms__contenido {
    grid-template-columns: 608px 1fr;
    gap: 4rem;
    max-width: 1320px;
  }

  .compra-sms__panel-logos {
    width: 608px;
    height: 435px;
    flex-shrink: 0;
  }

  .compra-sms__logos-img {
    width: 608px;
    height: 435px;
    object-fit: cover;
  }

  /* Heading EXACTO — Poppins Bold 700, 40px, lh 51px */
  .compra-sms__heading {
    font-size: 2.5rem;
    line-height: 3.1875rem;
  }

  /* Cuerpo EXACTO — Poppins Light 300, 18px, lh 31px */
  .compra-sms__cuerpo {
    font-size: 1.125rem;
    line-height: 1.9375rem;
  }

  /* Form container EXACTO — padding 19px top/bottom, 26px left/right */
  .compra-sms__form-caja {
    padding: 1.1875rem 1.625rem;
  }

  /* Input EXACTO — height 30px, font 15px */
  .compra-sms__campo {
    min-height: 30px;
    font-size: 0.9375rem;
  }

  /* Botón EXACTO — 205×38px, radius 24px */
  .compra-sms__btn {
    max-width: 205px;
    min-height: 38px;
    font-size: 1.0625rem;
  }
}

/* ============================================================
   DEGRADADO INFERIOR — nodo 3617:7129 "degradado-login-azul 1"
   type: RECTANGLE
   imageRef: e0749bb787c590202e59547befeb61eb1bd7b665
   absoluteRenderBounds: 1440×225px, aspect-ratio 4096:551
   Fallback mientras no existen los WebP exportados de Figma
   ============================================================ */
.compra-sms-degradado {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #93CDE9 0%, #4F92C8 52%, #336198 100%);
  height: 80px;
}

.compra-sms-degradado img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}