/* ════════════════════════════════════════════════════════════
   form.css  —  FEMECOG 2026  v4
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ────────────────────────────────────────────────────────────
  1 VARIABLES
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap {
  /* Colores */
  --nv:   #0F2A52;
  --nv2:  #1B3A6B;
  --tl:   #006B77;
  --tl2:  #0a8a98;
  --gd2:  #e0b030;
  --err:  #c0392b;
  --ok:   #1a7a4a;
  --bg:   #F0F4F9;
  --wh:   #ffffff;
  --brd:  #cdd6e8;
  --tx:   #12243a;
  --mu:   #6b7a95;
  --rad:  10px;
  --sh:   0 4px 20px rgba(15,42,82,.09);
  --tr:   .2s ease;
}

/* ────────────────────────────────────────────────────────────
   2 RESET SCOPED — no toca nada fuera de #fmcg-wrap
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap *,
#fmcg-wrap *::before,
#fmcg-wrap *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Base del wrapper — ancho completo garantizado */
#fmcg-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 60px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--tx) !important;
  background: var(--bg) !important;
}

/* ────────────────────────────────────────────────────────────
  3 HERO — padding generoso para que se vea el texto
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fmcg-hero {
  display: block !important;
  width: 100% !important;
  padding: 80px 24px 90px !important;
  margin: 0 !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(
    135deg,
    #0F2A52 0%,
    #1e4480 45%,
    #006B77 100%
  ) !important;
}

/* Luz de fondo */
#fmcg-wrap .fmcg-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 15% 50%, rgba(197,149,26,.18) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(0,107,119,.22)  0%, transparent 50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Curva inferior */
#fmcg-wrap .fmcg-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: 40px !important;
  background: var(--bg) !important;
  clip-path: ellipse(55% 100% at 50% 100%) !important;
  z-index: 1 !important;
}

/* Todo lo directo del hero arriba de los efectos */
#fmcg-wrap .fmcg-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

#fmcg-wrap .fmcg-hero-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(197,149,26,.18) !important;
  border: 1px solid rgba(197,149,26,.4) !important;
  color: #e0b030 !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 5px 16px !important;
  border-radius: 50px !important;
  margin-bottom: 16px !important;
}

#fmcg-wrap .fmcg-hero h1 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}

#fmcg-wrap .fmcg-hero p {
  font-size: clamp(.85rem, 1.5vw, .95rem) !important;
  color: rgba(255,255,255,.78) !important;
  font-weight: 300 !important;
  letter-spacing: .02em !important;
}

/* ────────────────────────────────────────────────────────────
  4 STEPS
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fmcg-steps {
  display: flex !important;
  align-items: center !important;
  max-width: 540px !important;
  margin: 36px auto 28px !important;
  padding: 0 20px !important;
}

#fmcg-wrap .fmcg-stp {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  position: relative !important;
}

#fmcg-wrap .fmcg-stp:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  top: 17px !important;
  left: 55% !important;
  width: 90% !important;
  height: 2px !important;
  background: var(--brd) !important;
  z-index: 0 !important;
  transition: background .4s !important;
}

#fmcg-wrap .fmcg-stp.done:not(:last-child)::after { background: var(--tl) !important; }

#fmcg-wrap .fmcg-stp-dot {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid var(--brd) !important;
  background: var(--wh) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: var(--mu) !important;
  position: relative !important;
  z-index: 1 !important;
  transition: all .3s !important;
}

#fmcg-wrap .fmcg-stp.act .fmcg-stp-dot  { background: var(--nv2) !important; border-color: var(--nv2) !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(27,58,107,.2) !important; }
#fmcg-wrap .fmcg-stp.done .fmcg-stp-dot { background: var(--tl)  !important; border-color: var(--tl)  !important; color: #fff !important; }

#fmcg-wrap .fmcg-stp-lbl  { font-size: .68rem !important; color: var(--mu) !important; font-weight: 500 !important; text-align: center !important; white-space: nowrap !important; }
#fmcg-wrap .fmcg-stp.act  .fmcg-stp-lbl { color: var(--nv2) !important; font-weight: 600 !important; }
#fmcg-wrap .fmcg-stp.done .fmcg-stp-lbl { color: var(--tl)  !important; }

/* ────────────────────────────────────────────────────────────
  5 BODY — contenedor centrado con padding lateral
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fmcg-body {
  display: block !important;
  max-width: 860px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* ────────────────────────────────────────────────────────────
  6 GRIDS
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fg2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
#fmcg-wrap .fg1 { display: grid !important; grid-template-columns: 1fr !important;     gap: 20px !important; }
#fmcg-wrap .fc2 { grid-column: span 2 !important; }

/* ────────────────────────────────────────────────────────────
  7 TARJETAS
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fmcg-card {
  background: var(--wh) !important;
  border: 1px solid var(--brd) !important;
  border-radius: var(--rad) !important;
  box-shadow: var(--sh) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  animation: fmcgUp .4s ease both !important;
}

#fmcg-wrap .fmcg-card:nth-child(2) { animation-delay: .07s !important; }
#fmcg-wrap .fmcg-card:nth-child(3) { animation-delay: .14s !important; }
#fmcg-wrap .fmcg-card:nth-child(4) { animation-delay: .21s !important; }
#fmcg-wrap .fmcg-card:nth-child(5) { animation-delay: .28s !important; }

@keyframes fmcgUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#fmcg-wrap .fmcg-ch {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--brd) !important;
  background: linear-gradient(90deg, rgba(15,42,82,.04) 0%, transparent 100%) !important;
}

#fmcg-wrap .fmcg-ch-ic {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: var(--nv2) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

#fmcg-wrap .fmcg-ch h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--nv) !important;
  margin-bottom: 1px !important;
}

#fmcg-wrap .fmcg-ch p { font-size: .76rem !important; color: var(--mu) !important; }

#fmcg-wrap .fmcg-cb { padding: 24px !important; }

/* ────────────────────────────────────────────────────────────
  8 CAMPOS
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .ff {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

#fmcg-wrap label {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  display: block !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#fmcg-wrap .fr {
  color: var(--err) !important;
  margin-left: 3px !important;
}

#fmcg-wrap .fh {
  font-size: .73em !important;
  font-weight: 400 !important;
  color: var(--mu) !important;
  margin-left: 5px !important;
}

#fmcg-wrap input[type="text"],
#fmcg-wrap input[type="email"],
#fmcg-wrap input[type="number"],
#fmcg-wrap select,
#fmcg-wrap textarea {
  display: block !important;
  width: 100% !important;
  border: 1.5px solid var(--brd) !important;
  border-radius: 7px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .9rem !important;
  color: var(--tx) !important;
  background: #fff !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color var(--tr), box-shadow var(--tr) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

#fmcg-wrap input[type="text"],
#fmcg-wrap input[type="email"],
#fmcg-wrap input[type="number"] {
  height: 58px !important;
  padding: 0 14px !important;
}

#fmcg-wrap select {
  min-height: 58px !important;
  height: auto !important;
  padding: 14px 42px 14px 14px !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%231B3A6B' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 10px 6px !important;
  cursor: pointer !important;
}

#fmcg-wrap textarea {
  min-height: 120px !important;
  padding: 14px !important;
  resize: vertical !important;
}

#fmcg-wrap input:focus,
#fmcg-wrap select:focus,
#fmcg-wrap textarea:focus {
  border-color: var(--nv2) !important;
  box-shadow: 0 0 0 3px rgba(27,58,107,.13) !important;
}

#fmcg-wrap input.fe,
#fmcg-wrap select.fe,
#fmcg-wrap textarea.fe {
  border-color: var(--err) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.10) !important;
}

#fmcg-wrap input.fok {
  border-color: var(--ok) !important;
}

#fmcg-wrap .ferr {
  font-size: .76rem !important;
  color: var(--err) !important;
  display: none !important;
  margin-top: 2px !important;
}

#fmcg-wrap .ferr.on {
  display: block !important;
}

#fmcg-wrap .fcnt {
  font-size: .74rem !important;
  color: var(--mu) !important;
  text-align: right !important;
  transition: color var(--tr) !important;
}

#fmcg-wrap .fcnt.warn {
  color: #C5951A !important;
  font-weight: 600 !important;
}

#fmcg-wrap .fcnt.over {
  color: var(--err) !important;
  font-weight: 600 !important;
}

#fmcg-wrap .fsep {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 6px 0 16px !important;
}

#fmcg-wrap .fsep::before,
#fmcg-wrap .fsep::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--brd) !important;
}

#fmcg-wrap .fsep span {
  font-size: .7rem !important;
  color: var(--mu) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

/* ────────────────────────────────────────────────────────────
  9 INDICADORES DEL TÍTULO
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .ftitle-rules { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 5px !important; }

#fmcg-wrap .ftitle-rule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: .73rem !important;
  color: var(--mu) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  background: rgba(0,0,0,.04) !important;
  transition: all var(--tr) !important;
}

#fmcg-wrap .ftitle-rule.pass { background: rgba(26,122,74,.10) !important; color: var(--ok) !important; }
#fmcg-wrap .ftitle-rule.fail { background: rgba(192,57,43,.10) !important; color: var(--err) !important; }

/* ────────────────────────────────────────────────────────────
  10 AUTORES
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap #fm-autores {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#fmcg-wrap .fmcg-autor {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1.5px solid var(--brd) !important;
  box-shadow: 0 2px 10px rgba(15,42,82,.07) !important;
}

#fmcg-wrap .autor-oculto { display: none !important; }

#fmcg-wrap .autor-entrando { animation: autorEntra .35s cubic-bezier(.22,.68,0,1.2) both !important; }
@keyframes autorEntra {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#fmcg-wrap .autor-saliendo { animation: autorSale .25s ease both !important; pointer-events: none !important; }
@keyframes autorSale {
  from { opacity: 1; }
  to   { opacity: 0; transform: scale(.97); }
}

#fmcg-wrap .fmcg-autor-hd {
  padding: 13px 18px !important;
  background: linear-gradient(135deg, var(--nv) 0%, var(--nv2) 100%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#fmcg-wrap .fmcg-autor-num {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important;
  border: 2px solid rgba(255,255,255,.3) !important;
  color: #fff !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#fmcg-wrap .fmcg-autor-hd-info { flex: 1 !important; }
#fmcg-wrap .fmcg-autor-hd-txt  { color: #fff !important; font-size: .9rem !important; font-weight: 600 !important; display: block !important; }

#fmcg-wrap .fmcg-autor-tag {
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.2) !important;
  color: rgba(255,255,255,.9) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#fmcg-wrap .fmcg-autor-tag.coautor {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.7) !important;
}

#fmcg-wrap .fmcg-autor-bd {
  padding: 20px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  background: var(--wh) !important;
}

/* ────────────────────────────────────────────────────────────
  11 SELECTOR N° AUTORES
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fmcg-nbts {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  background: rgba(15,42,82,.04) !important;
  border: 1.5px solid var(--brd) !important;
  border-radius: 10px !important;
  padding: 5px !important;
  width: fit-content !important;
}

#fmcg-wrap .fmcg-nbt {
  padding: 8px 18px !important;
  border-radius: 7px !important;
  border: none !important;
  background: transparent !important;
  color: var(--mu) !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  font-family: 'DM Sans', sans-serif !important;
  white-space: nowrap !important;
}

#fmcg-wrap .fmcg-nbt:hover { background: rgba(27,58,107,.08) !important; color: var(--nv2) !important; }
#fmcg-wrap .fmcg-nbt.sel   { background: var(--nv2) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(27,58,107,.3) !important; }

/* ────────────────────────────────────────────────────────────
  12 FILE DROP
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fmcg-drop {
  border: 2px dashed var(--brd) !important;
  border-radius: var(--rad) !important;
  padding: 40px 20px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
  background: #fafcff !important;
  position: relative !important;
}

#fmcg-wrap .fmcg-drop:hover,
#fmcg-wrap .fmcg-drop.over { border-color: var(--nv2) !important; background: rgba(27,58,107,.04) !important; }
#fmcg-wrap .fmcg-drop.has  { border-color: var(--tl)  !important; background: rgba(0,107,119,.04)  !important; }

#fmcg-wrap .fmcg-drop input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#fmcg-wrap .fmcg-drop-ico { font-size: 2.2rem !important; margin-bottom: 8px !important; }
#fmcg-wrap .fmcg-drop-lbl { font-size: .88rem !important; color: var(--mu) !important; line-height: 1.55 !important; }
#fmcg-wrap .fmcg-drop-lbl strong { color: var(--nv2) !important; }

#fmcg-wrap .fmcg-filesel     { display: none !important; align-items: center !important; gap: 10px !important; margin-top: 12px !important; padding: 10px 14px !important; background: rgba(0,107,119,.08) !important; border-radius: 7px !important; font-size: .85rem !important; color: var(--tl) !important; font-weight: 600 !important; }
#fmcg-wrap .fmcg-filesel.on  { display: flex !important; }
#fmcg-wrap .fmcg-frm         { margin-left: auto !important; cursor: pointer !important; background: none !important; border: none !important; color: var(--tl) !important; font-size: 1rem !important; opacity: .6 !important; transition: opacity var(--tr) !important; }
#fmcg-wrap .fmcg-frm:hover   { opacity: 1 !important; }

/* ────────────────────────────────────────────────────────────
  13 BOTÓN ENVIAR
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fmcg-sub {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 16px 24px !important;
  background: linear-gradient(135deg, var(--nv) 0%, var(--nv2) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rad) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(15,42,82,.3) !important;
  transition: transform var(--tr), box-shadow var(--tr) !important;
}

#fmcg-wrap .fmcg-sub:hover:not(:disabled) { transform: translateY(-2px) !important; box-shadow: 0 10px 26px rgba(15,42,82,.4) !important; }
#fmcg-wrap .fmcg-sub:disabled             { opacity: .65 !important; cursor: not-allowed !important; }

#fmcg-wrap .fmcg-spin { display: none !important; width: 18px !important; height: 18px !important; border: 2px solid rgba(255,255,255,.35) !important; border-top-color: #fff !important; border-radius: 50% !important; animation: fmcgSpin .7s linear infinite !important; }
@keyframes fmcgSpin { to { transform: rotate(360deg); } }

#fmcg-wrap .fmcg-sub.loading .fmcg-btxt { display: none !important; }
#fmcg-wrap .fmcg-sub.loading .fmcg-spin { display: block !important; }

#fmcg-wrap .fmcg-prog    { height: 4px !important; background: var(--brd) !important; border-radius: 2px !important; overflow: hidden !important; margin-top: 10px !important; display: none !important; }
#fmcg-wrap .fmcg-prog.on { display: block !important; }
#fmcg-wrap .fmcg-progb   { height: 100% !important; background: linear-gradient(90deg, var(--nv2), var(--tl)) !important; width: 0 !important; transition: width .3s !important; border-radius: 2px !important; }

/* ────────────────────────────────────────────────────────────
  14 PANEL DE ÉXITO
   ──────────────────────────────────────────────────────────── */
#fmcg-wrap .fmcg-ok    { display: none !important; text-align: center !important; padding: 52px 24px !important; }
#fmcg-wrap .fmcg-ok.on { display: block !important; }

#fmcg-wrap .fmcg-ok-ring {
  width: 80px !important; height: 80px !important; border-radius: 50% !important;
  background: linear-gradient(135deg, var(--tl), var(--nv2)) !important;
  color: #fff !important; font-size: 2rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 20px !important;
  box-shadow: 0 8px 28px rgba(0,107,119,.35) !important;
  animation: fmcgPop .5s cubic-bezier(.175,.885,.32,1.275) !important;
}
@keyframes fmcgPop {
  from { transform: scale(.3); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

#fmcg-wrap .fmcg-ok h3    { font-family: 'Cormorant Garamond', serif !important; font-size: 1.55rem !important; font-weight: 700 !important; color: var(--nv) !important; margin-bottom: 8px !important; }
#fmcg-wrap .fmcg-ok p     { font-size: .9rem !important; color: var(--mu) !important; max-width: 460px !important; margin: 0 auto 20px !important; line-height: 1.65 !important; }
#fmcg-wrap .fmcg-folio    { display: inline-block !important; background: rgba(15,42,82,.07) !important; color: var(--nv2) !important; font-weight: 700 !important; font-size: 1rem !important; padding: 10px 26px !important; border-radius: 50px !important; margin-bottom: 22px !important; }
#fmcg-wrap .fmcg-dl       { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 11px 22px !important; background: var(--tl) !important; color: #fff !important; border-radius: 7px !important; font-size: .88rem !important; font-weight: 600 !important; text-decoration: none !important; margin-bottom: 12px !important; }
#fmcg-wrap .fmcg-dl:hover { background: var(--tl2) !important; color: #fff !important; }
#fmcg-wrap .fmcg-newbtn   { display: inline-block !important; margin-top: 12px !important; padding: 10px 22px !important; border: 1.5px solid var(--nv2) !important; color: var(--nv2) !important; border-radius: 7px !important; font-size: .86rem !important; font-weight: 600 !important; cursor: pointer !important; background: none !important; font-family: 'DM Sans', sans-serif !important; transition: all var(--tr) !important; }
#fmcg-wrap .fmcg-newbtn:hover { background: var(--nv2) !important; color: #fff !important; }

/* ────────────────────────────────────────────────────────────
  15 TOAST
   ──────────────────────────────────────────────────────────── */
.fmcg-toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  padding: 14px 18px !important;
  border-radius: 9px !important;
  font-size: .86rem !important;
  font-weight: 500 !important;
  max-width: 360px !important;
  z-index: 999999 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.18) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  transform: translateY(100px) !important;
  opacity: 0 !important;
  transition: all .4s cubic-bezier(.175,.885,.32,1.275) !important;
  pointer-events: none !important;
  font-family: 'DM Sans', sans-serif !important;
}

.fmcg-toast.on  { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }
.fmcg-toast.ok  { background: #1a7a4a !important; color: #fff !important; }
.fmcg-toast.err { background: #c0392b !important; color: #fff !important; }

.fmcg-t-ic { font-size: 1.1rem !important; flex-shrink: 0 !important; }
.fmcg-t-b strong { display: block !important; }
.fmcg-t-b small  { opacity: .88 !important; font-size: .78em !important; }

/* ════════════════════════════════════════════════════════════
  16 RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Tablet 481–768px */
@media (max-width: 768px) {
  #fmcg-wrap .fmcg-hero   { padding: 60px 20px 70px !important; }
  #fmcg-wrap .fmcg-body   { padding: 0 20px !important; }
  #fmcg-wrap .fmcg-steps  { margin: 28px auto 22px !important; padding: 0 16px !important; }
  #fmcg-wrap .fg2          { gap: 14px !important; }
  #fmcg-wrap .fmcg-cb      { padding: 18px !important; }
  #fmcg-wrap .fmcg-ch      { padding: 14px 18px !important; }
  #fmcg-wrap .fmcg-autor-bd { padding: 16px !important; gap: 12px !important; }
  /* Layout en 1 columna */
  #fmcg-wrap .fg2,
  #fmcg-wrap .fmcg-autor-bd { grid-template-columns: 1fr !important;}
  #fmcg-wrap .fc2 {grid-column: span 1 !important;}
  /* Inputs normales */
  #fmcg-wrap input[type="text"],
  #fmcg-wrap input[type="email"],
  #fmcg-wrap input[type="number"] { height: 56px !important; padding: 0 14px !important; font-size: 15px !important;}
  /* 🔥 FIX SELECT (CLAVE) */
  #fmcg-wrap select {
    min-height: 56px !important;
    height: auto !important;
    padding: 14px 42px 14px 14px !important;
    line-height: 1.2 !important;
    font-size: 15px !important;
    box-sizing: border-box !important;

    background-position: right 14px center !important;
    background-size: 10px 6px !important;
  }
  /* Espaciado general */
  #fmcg-wrap .fmcg-autor-bd { padding: 14px !important; gap: 12px !important;}
  #fmcg-wrap .fmcg-cb {padding: 16px !important;}
  #fmcg-wrap .fmcg-drop {padding: 32px 16px !important;}
  #fmcg-wrap .fmcg-sub { padding: 14px 20px !important; font-size: .95rem !important;}
}

/* Móvil ≤480px — una columna */
@media (max-width: 480px) {
  #fmcg-wrap .fmcg-hero    { padding: 48px 16px 60px !important; }
  #fmcg-wrap .fmcg-hero::after { height: 26px !important; }
  #fmcg-wrap .fmcg-body    { padding: 0 12px !important; }
  #fmcg-wrap .fmcg-steps   { margin: 20px auto 16px !important; padding: 0 12px !important; }
  #fmcg-wrap .fmcg-stp-lbl { display: none !important; }
  #fmcg-wrap .fg2,
  #fmcg-wrap .fmcg-autor-bd { grid-template-columns: 1fr !important; }
  #fmcg-wrap .fc2           { grid-column: span 1 !important; }
  #fmcg-wrap .fmcg-cb       { padding: 14px !important; }
  #fmcg-wrap .fmcg-ch       { padding: 12px 14px !important; gap: 10px !important; }
  #fmcg-wrap .fmcg-ch-ic    { width: 32px !important; height: 32px !important; }
  #fmcg-wrap .fmcg-ch h3    { font-size: .95rem !important; }
  #fmcg-wrap .fmcg-autor-bd { padding: 12px !important; gap: 10px !important; }
  #fmcg-wrap .fmcg-drop     { padding: 28px 14px !important; }
  #fmcg-wrap .fmcg-sub      { padding: 14px 18px !important; font-size: .9rem !important; }
  #fmcg-wrap .fmcg-ok       { padding: 36px 16px !important; }
  .fmcg-toast { left: 12px !important; right: 12px !important; bottom: 12px !important; max-width: 100% !important; }
}
  #fmcg-wrap select {
    min-height: 56px !important;
    height: auto !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 14px !important;
    padding-right: 42px !important;
    line-height: 1.2 !important;
    font-size: 16px !important;
    background-position: right 14px center !important;
    background-size: 10px 6px !important;
  }
