/* ============================================================
   Mi Mascota Club — Formulario de inscripción de negocios
   ------------------------------------------------------------
   Este archivo se carga SOLO en formulario-negocio-v3.html.
   Requiere css/mmc-ficha.css cargado antes (de ahí salen los
   colores de marca y el componente de la ficha).
   NO cargarlo en index.html: usa clases genéricas (.btn, .field,
   .step) que chocarían con css/styles.css.
   ============================================================ */

/* ============================================================
   Mi Mascota Club — Sistema visual del flujo de negocios
   Ficha pública + formulario de inscripción
   ------------------------------------------------------------
   TODOS los colores de marca están en :root.
   Cambia solo ese bloque y el resto se actualiza completo.
   ============================================================ */


* { box-sizing: border-box; }
[hidden] { display: none !important; }

body.mmc {
  margin: 0;
  font-family: var(--mmc-font-body);
  color: var(--mmc-ink);
  background: var(--mmc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titular condensado, como en la identidad actual del sitio */
.mmc-display {
  font-family: var(--mmc-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .95;
  margin: 0;
}

/* ============================================================
   FORMULARIO
   ============================================================ */

.form-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(0,0,0,.045), transparent 62%),
    var(--mmc-bg);
}

.form-top {
  position: sticky; top: 0; z-index: 40;
  padding: 16px clamp(18px, 5vw, 44px) 12px;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  border-bottom: 1px solid var(--mmc-line);
}
.form-top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; }
.form-top__brand { font-family: var(--mmc-font-display); font-weight: 900; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; }
.form-top__step  { font-size: 12px; color: var(--mmc-ink-3); font-variant-numeric: tabular-nums; }

.progress { max-width: 1180px; margin: 12px auto 0; height: 3px; background: var(--mmc-surface-2); border-radius: 3px; overflow: hidden; }
.progress__bar { height: 100%; width: 0%; background: var(--mmc-accent-2); border-radius: 3px; transition: width .5s var(--mmc-ease); }

.form-main { display: grid; place-items: start center; padding: clamp(28px, 6vh, 64px) clamp(18px, 5vw, 44px); }
.form-wrap { width: 100%; max-width: 760px; transition: max-width .45s var(--mmc-ease); }
/* El paso de preview necesita ancho real para mostrar el layout desktop */
.form-main:has(.step[data-step="8"].is-active) .form-wrap { max-width: 1040px; }

.step { display: none; }
.step.is-active { display: block; animation: stepIn .48s var(--mmc-ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step.is-active { animation: none; } }

.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mmc-ink-3); margin: 0 0 12px; }
.step h2 { font-family: var(--mmc-font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 5.4vw, 50px); line-height: .96; letter-spacing: -.02em; margin: 0 0 12px; }
.step p.lead { font-size: 16px; line-height: 1.55; color: var(--mmc-ink-2); margin: 0 0 30px; max-width: 56ch; }

.field { margin-bottom: 20px; }
.field > label, .field__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--mmc-ink); }
.field__hint { font-size: 12.5px; color: var(--mmc-ink-3); margin-top: 7px; line-height: 1.45; }
.field__err  { font-size: 12.5px; color: var(--mmc-err); margin-top: 7px; display: none; }
.field.has-error .field__err { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--mmc-err); }

.form-shell .input,
.form-shell input[type=text], .form-shell input[type=email], .form-shell input[type=tel],
.form-shell input[type=url], .form-shell input[type=number],
.form-shell select, .form-shell textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--mmc-ink);
  background: var(--mmc-surface);
  border: 1px solid var(--mmc-line-strong);
  border-radius: var(--mmc-r-sm);
  padding: 14px 16px;
  outline: none;
  transition: border-color .18s var(--mmc-ease), box-shadow .18s var(--mmc-ease), background .18s var(--mmc-ease);
}
.form-shell textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.form-shell select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238E8E93' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.form-shell .input:focus, .form-shell input:focus,
.form-shell select:focus, .form-shell textarea:focus {
  border-color: var(--mmc-accent-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mmc-accent-2) 26%, transparent);
}
.form-shell input::placeholder, .form-shell textarea::placeholder { color: var(--mmc-ink-3); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.prefix { display: flex; align-items: stretch; }
.prefix__tag {
  display: grid; place-items: center;
  padding: 0 14px;
  border: 1px solid var(--mmc-line-strong);
  border-right: 0;
  border-radius: var(--mmc-r-sm) 0 0 var(--mmc-r-sm);
  background: var(--mmc-surface-3);
  color: var(--mmc-ink-2);
  font-size: 15px;
  white-space: nowrap;
}
.prefix input { border-radius: 0 var(--mmc-r-sm) var(--mmc-r-sm) 0; }

/* Selección tipo tarjeta (beneficio, sí/no) */
.choices { display: grid; gap: 10px; }
.choices--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .choices--2 { grid-template-columns: 1fr; } }

.choice {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--mmc-line-strong);
  border-radius: var(--mmc-r-md);
  background: var(--mmc-surface);
  cursor: pointer;
  transition: border-color .18s var(--mmc-ease), background .18s var(--mmc-ease), transform .18s var(--mmc-ease);
}
.choice:hover { transform: translateY(-1px); border-color: var(--mmc-ink-3); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--mmc-line-strong); flex: none; display: grid; place-items: center; transition: all .18s var(--mmc-ease); }
.choice__dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--mmc-brand-ink); transform: scale(0); transition: transform .18s var(--mmc-ease); }
.choice input:checked ~ .choice__dot { border-color: var(--mmc-accent-2); background: var(--mmc-accent-2); }
.choice input:checked ~ .choice__dot::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--mmc-accent-2); background: color-mix(in srgb, var(--mmc-accent-2) 8%, var(--mmc-surface)); }
.choice__txt { font-size: 15px; font-weight: 500; }
.choice__txt small { display: block; font-weight: 400; font-size: 12.5px; color: var(--mmc-ink-3); margin-top: 2px; }

/* Cascada de beneficio: cada paso aparece al completar el anterior */
.cascade__step { margin-bottom: 18px; opacity: .4; pointer-events: none; transition: opacity .35s var(--mmc-ease); }
.cascade__step.is-open { opacity: 1; pointer-events: auto; }
.cascade__num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mmc-surface-2); color: var(--mmc-ink-2);
  font-size: 11px; font-weight: 700; margin-right: 8px;
}
.cascade__step.is-done .cascade__num { background: var(--mmc-accent-2); color: #fff; }

/* Subida de imágenes */
.drop {
  border: 1.5px dashed var(--mmc-line-strong);
  border-radius: var(--mmc-r-md);
  background: var(--mmc-surface-3);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .18s var(--mmc-ease);
  position: relative;
  overflow: hidden;
  min-height: 150px;
  display: grid; place-items: center;
}
.drop:hover, .drop.is-over { border-color: var(--mmc-accent-2); background: color-mix(in srgb, var(--mmc-accent-2) 8%, var(--mmc-surface-3)); }
.drop input[type=file] { display: none; }
.drop__ico { font-size: 22px; margin-bottom: 8px; }
.drop__t { font-size: 14px; font-weight: 600; }
.drop__s { font-size: 12.5px; color: var(--mmc-ink-3); margin-top: 4px; }
.drop img.preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop.has-file .drop__body { position: relative; z-index: 2; background: rgba(255,255,255,.9); border-radius: var(--mmc-r-pill); padding: 8px 16px; font-size: 12.5px; }
.drop--logo img.preview { object-fit: contain; background: #fff; padding: 14px; }

/* Navegación */
.nav {
  display: flex; gap: 12px; align-items: center;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--mmc-line);
}
.btn {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 15px 30px;
  border-radius: var(--mmc-r-pill);
  transition: transform .18s var(--mmc-ease), opacity .18s var(--mmc-ease), background .18s var(--mmc-ease);
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--mmc-brand); color: var(--mmc-brand-ink); }
.btn--ghost { background: transparent; color: var(--mmc-ink-2); padding-left: 6px; }
.btn--ghost:hover { color: var(--mmc-ink); }
.btn--block { width: 100%; justify-content: center; }
.nav .spacer { flex: 1; }

/* Bloque informativo / privacidad */
.note {
  display: flex; gap: 12px;
  background: var(--mmc-surface-3);
  border: 1px solid var(--mmc-line);
  border-radius: var(--mmc-r-md);
  padding: 16px 18px;
  font-size: 13.5px; line-height: 1.55; color: var(--mmc-ink-2);
  margin-bottom: 26px;
}
.note strong { color: var(--mmc-ink); font-weight: 600; }
.note__ico { flex: none; font-size: 16px; line-height: 1.3; }

/* Preview de la ficha dentro del formulario */
.preview-frame {
  border: 1px solid var(--mmc-line);
  border-radius: var(--mmc-r-xl);
  background: var(--mmc-surface);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--mmc-shadow-md);
  margin-bottom: 22px;
}
.preview-tabs { display: inline-flex; gap: 4px; background: var(--mmc-surface-2); padding: 4px; border-radius: var(--mmc-r-pill); margin-bottom: 16px; }
.preview-tab { appearance: none; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--mmc-ink-2); padding: 8px 18px; border-radius: var(--mmc-r-pill); cursor: pointer; transition: all .18s var(--mmc-ease); }
.preview-tab.is-active { background: var(--mmc-surface); color: var(--mmc-ink); box-shadow: var(--mmc-shadow-sm); }
.preview-stage { margin: 0 auto; transition: max-width .4s var(--mmc-ease); }
.preview-stage[data-view="mobile"] { max-width: 390px; }

/* Resumen de datos privados */
.summary { border: 1px solid var(--mmc-line); border-radius: var(--mmc-r-md); overflow: hidden; margin-bottom: 22px; }
.summary__row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 13px 18px; font-size: 13.5px; border-bottom: 1px solid var(--mmc-line); }
.summary__row:last-child { border-bottom: 0; }
.summary__row dt { color: var(--mmc-ink-3); margin: 0; }
.summary__row dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 560px) { .summary__row { grid-template-columns: 1fr; gap: 2px; } }

/* Pantalla final */
.done { text-align: center; padding: 40px 0; }
.done__mark { width: 76px; height: 76px; border-radius: 50%; background: var(--mmc-accent-2); color: var(--mmc-brand-ink); display: grid; place-items: center; margin: 0 auto 24px; font-size: 32px; animation: pop .5s var(--mmc-ease) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sin flechas en los inputs numéricos */
.form-shell input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.form-shell input[type=number]::-webkit-outer-spin-button,
.form-shell input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }