/* AJ Showcasy Contact Form — CSS Premium (ES) */
/* Mantiene el mismo diseño; SOLO cambia textos/contactos en PHP */

.ajscf-section{
  --ajscf-text: #0b0f14;
  --ajscf-muted: #d6b100; /* color de “Vamos” (igual al ejemplo) */
  --ajscf-sub: rgba(20,24,31,.68);
  --ajscf-line: rgba(20,24,31,.14);
  --ajscf-pill: rgba(20,24,31,.16);
  --ajscf-pill-hover: rgba(20,24,31,.26);
  --ajscf-shadow: rgba(16,24,40,.08);
  --ajscf-btn: #0b0f14;

  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden;
}
.ajscf-section *{ box-sizing: border-box; }
.ajscf-section.ajscf-bg-white{ background:#fff !important; }
.ajscf-section.ajscf-bg-transparent{ background: transparent !important; }

.ajscf-inner{
  margin: 0 auto;
  max-width: 1100px;
  padding: 56px 28px 40px;
  position: relative;
  border-radius: 28px;
  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 30px 90px rgba(0,0,0,.20);
}
.ajscf-wide .ajscf-inner{ max-width: 1400px; }
.ajscf-narrow .ajscf-inner{ max-width: 1100px; }

/* HERO */
.ajscf-hero{ margin: 0 0 36px 0; }
.ajscf-h1{
  margin:0 !important;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 86px !important;
  line-height: 0.92 !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
  color: var(--ajscf-text) !important;
  text-align:left !important;
}
.ajscf-muted{ color: var(--ajscf-muted) !important; margin-right: 12px; }
.ajscf-strong{ color: var(--ajscf-text) !important; }

/* FORM */
.ajscf-form{
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
.ajscf-row{ margin-bottom: 22px; }

.ajscf-label{
  display:block;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(20,24,31,.70) !important;
  margin: 0 0 10px 0 !important;
  text-decoration: none !important;
}
.ajscf-label-big{ font-size: 14px !important; }

.ajscf-req::after{
  content:" *";
  color:#c0262d;
  font-weight:900;
}

.ajscf-input,
.ajscf-textarea{
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid var(--ajscf-line) !important;
  background: transparent !important;
  padding: 12px 0 !important;
  font-size: 14px !important;
  color: var(--ajscf-text) !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ajscf-input::placeholder{ color: rgba(20,24,31,.35) !important; }

.ajscf-input:focus{
  border-bottom-color: rgba(20,24,31,.85) !important;
  box-shadow: 0 6px 0 -5px rgba(20,24,31,.35) !important;
}

/* Grid 2 columnas */
.ajscf-row-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* PILLS */
.ajscf-pills{ display:flex; flex-wrap:wrap; gap: 10px; }
.ajscf-pill{ position:relative; display:inline-flex; }
.ajscf-pill input{ position:absolute; opacity:0; pointer-events:none; }

.ajscf-pill span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ajscf-pill) !important;
  border-radius:999px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(20,24,31,.78) !important;
  cursor:pointer !important;
  user-select:none;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s, color .12s;
  background: transparent !important;
}
.ajscf-pill span:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px var(--ajscf-shadow);
  border-color: var(--ajscf-pill-hover) !important;
}
.ajscf-pill input:checked + span{
  background: var(--ajscf-btn) !important;
  border-color: var(--ajscf-btn) !important;
  color: #fff !important;
}

/* BOTTOM */
.ajscf-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-top: 32px;
  padding: 0 !important;
}

.ajscf-response{
  font-size:13px;
  color: rgba(20,24,31,.55);
  min-width: 180px;
  text-align: right;
}

.ajscf-contactinfo{
  text-align:left !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(20,24,31,.85) !important;
}
.ajscf-ci-title{
  font-size: 16px !important;
  font-weight: 900 !important;
  color: rgba(20,24,31,.95) !important;
  margin-bottom: 4px !important;
}
.ajscf-ci-line{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(20,24,31,.80) !important;
}
.ajscf-contactinfo a{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(20,24,31,.80) !important;
  text-decoration: none !important;
}
.ajscf-contactinfo a:hover{ text-decoration: underline !important; }

/* BOTÓN */
.ajscf-btn{
  border:none !important;
  background: var(--ajscf-btn) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding: 16px 28px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  gap: 16px !important;
  box-shadow: 0 18px 50px rgba(11,15,20,.18);
  transition: transform .12s, box-shadow .12s, opacity .12s;
  white-space: nowrap;
}
.ajscf-arrow{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left: 8px !important;
}
.ajscf-btn:hover{ transform: translateY(-2px); box-shadow: 0 22px 58px rgba(11,15,20,.22); }
.ajscf-btn:active{ transform: translateY(0); opacity:.96; }

.ajscf-error{ border-bottom-color:#c0262d !important; box-shadow: 0 6px 0 -5px rgba(192,38,45,.25) !important; }

/* MODAL */
.ajscf-no-scroll{ overflow:hidden; }
.ajscf-modal{ position: fixed; inset: 0; display:none; z-index: 99999; }
.ajscf-modal.is-open{ display:flex !important; align-items:center !important; justify-content:center !important; padding: 24px !important; }
.ajscf-modal__backdrop{ position:absolute; inset:0; background: rgba(11,15,20,.58); backdrop-filter: blur(8px); }
.ajscf-modal__card{
  position: relative;
  width: min(620px, calc(100% - 28px));
  margin: 0 !important;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
  padding: 26px 26px 22px;
  overflow: hidden;
}
.ajscf-modal__content{ padding: 10px 6px 6px; text-align:center !important; }
.ajscf-modal__emoji{
  width: 64px; height: 64px; border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  font-size: 30px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.22);
  margin: 0 auto 14px auto !important;
  box-shadow: 0 14px 30px rgba(16,185,129,.14);
}
.ajscf-modal__title{ margin: 0; font-weight: 900; font-size: 30px; letter-spacing: -0.5px; color:#0b0f14; }
.ajscf-modal__sub{ margin: 10px auto 0 auto !important; font-size: 15px; line-height: 1.55; color: rgba(20,24,31,.68); max-width: 520px; }
.ajscf-modal__close{
  all: unset;
  position:absolute !important;
  right: 14px !important;
  top: 14px !important;
  width: 44px !important;
  height: 44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius: 999px !important;
  background: rgba(11,15,20,.06) !important;
  border: 1px solid rgba(11,15,20,.10) !important;
  cursor: pointer !important;
  color: rgba(11,15,20,.85) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}
.ajscf-modal__close svg{ display:block !important; width: 18px !important; height: 18px !important; }
.ajscf-modal__close svg path{ stroke: currentColor !important; }

/* RESPONSIVE (solo mobile, sin compactar desktop por altura) */
@media (max-width: 768px){
  .ajscf-row-2col{ grid-template-columns: 1fr; }
  .ajscf-inner{ padding: 42px 18px 30px !important; border-radius: 22px !important; box-shadow: none !important; }
  .ajscf-h1{ font-size: 52px !important; letter-spacing: -1.2px !important; line-height: 1 !important; }
  .ajscf-h1 .ajscf-muted{ display:inline !important; margin:0 10px 0 0 !important; }
  .ajscf-bottom{ flex-direction:column; align-items:stretch; gap: 14px; }
  .ajscf-response{ min-width: 0; text-align:center; }
  .ajscf-btn{ width:100% !important; justify-content:center !important; }
}


/* =========================================================
   AUTO-AJUSTE DESKTOP (por altura) — sem mudar layout
   Cola no FIM do style.css
========================================================= */

/* Portáteis/desktop baixos (ex: 900px de altura ou menos) */
@media (max-height: 900px){
  .ajscf-inner{ padding: 44px 26px 32px !important; }
  .ajscf-hero{ margin-bottom: 28px !important; }

  .ajscf-h1{
    font-size: 72px !important;
    line-height: 0.94 !important;
  }

  .ajscf-row{ margin-bottom: 18px !important; }
}

/* Muito comum: 1366x768 */
@media (max-height: 820px){
  .ajscf-inner{ padding: 38px 22px 28px !important; }
  .ajscf-hero{ margin-bottom: 22px !important; }

  .ajscf-h1{
    font-size: 62px !important;
    line-height: 0.95 !important;
  }

  .ajscf-row{ margin-bottom: 14px !important; }
  .ajscf-label{ margin-bottom: 8px !important; }

  .ajscf-input{ padding: 10px 0 !important; }
  .ajscf-pill span{ padding: 7px 10px !important; font-size: 11px !important; }

  .ajscf-bottom{ margin-top: 20px !important; }
  .ajscf-btn{ padding: 13px 20px !important; }
}

/* Caso extremo (muito baixo) */
@media (max-height: 740px){
  .ajscf-inner{ padding: 32px 20px 24px !important; }
  .ajscf-h1{ font-size: 54px !important; }
  .ajscf-row{ margin-bottom: 12px !important; }
}