:root{
      --brand:#ff620e; --brand2:#ffb899;
      --ink:#0b0c0e; --muted:#6b7280;
      --line:#e8e8ec; --paper:#ffffff;
      --radius:16px; --shadow:0 14px 36px rgba(0,0,0,.14);
      --maxw:1000px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#fff;color:var(--ink)}
    [hidden]{display:none!important}

    /* ===== CONTENEDOR ===== */
    .fx-wrap{max-width:var(--maxw); margin: 24px auto}

    /* ===== CARD layout ===== */
    .fx-card{
      margin: 0 auto 48px; background:var(--paper);
      border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden;
    }
    .fx-card-head{
      padding: clamp(18px, 4vw, 28px) clamp(18px, 4vw, 28px) 0;
      display:grid; gap:6px
    }
    .fx-eyebrow{
      display:inline-flex; gap:8px; align-items:center;
      background:#fff; border:1px solid var(--line); border-radius:999px;
      padding:6px 10px; font-size:12px; font-weight:800; color:#374151; width:max-content
    }
    .fx-title.in-card{margin:0; font-size:clamp(26px,5vw,36px); font-weight:900; line-height:1.06; color:#ff620e}
    .fx-sub.in-card{margin:0 0 10px; color:#374151; font-size:clamp(14px,2.4vw,16px)}

    .fx-body{display:grid; gap:0; grid-template-columns: 1.1fr .9fr; padding: 0 clamp(18px,4vw,28px) clamp(18px,4vw,28px)}
    @media (max-width: 900px){ .fx-body{grid-template-columns:1fr} }

    /* ===== FORM ===== */
    .fx-form{padding: 12px 0 0; display:grid; gap:16px}
    .fx-row{display:grid; gap:16px; grid-template-columns:1fr 1fr}
    @media (max-width: 720px){ .fx-row{grid-template-columns:1fr} }
    .fx-field{display:grid; gap:8px}
    .fx-label{font-size:13px; font-weight:800; color:#374151}
    .fx-input, .fx-textarea{
      width:100%; border:1px solid var(--line); border-radius:12px; background:#fff;
      padding:14px; font-size:15px; color:var(--ink); outline:0; transition:.2s;
    }
    .fx-input:hover, .fx-textarea:hover{background:#fafafa}
    .fx-input:focus, .fx-textarea:focus{
      border-color:#ffb899; box-shadow:0 0 0 6px #ffb89933; transform: translateY(-1px);
    }
    .fx-textarea{min-height:110px; resize:vertical}

    /* Segmentado Si/No */
    .fx-seg{display:inline-grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#fff; width:max-content}
    .fx-seg input{display:none}
    .fx-seg label{padding:10px 18px; cursor:pointer; font-weight:800; color:#374151; user-select:none}
    .fx-seg input:checked + label{background:linear-gradient(135deg, var(--brand), #ff7a00); color:#0b0c0e}

    /* ===== ASIDE con imagen ===== */
    .fx-aside{padding: 12px 0 0  clamp(0px, 2vw, 12px); border-left:1px dashed #d9dbe1; display:grid; gap:14px; align-content:start}
    @media (max-width: 900px){ .fx-aside{border-left:none; border-top:1px dashed #d9dbe1; padding-left:0; margin-top:12px} }
    .fx-illu{
      border-radius:16px; overflow:hidden; border:1px solid var(--line);
      aspect-ratio: 4 / 3; background:#f6f7f9;
    }
    .fx-illu img{width:99%; height:100%; object-fit:cover; display:block}
    .fx-badge{display:inline-flex; gap:8px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:12px}
    .fx-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
    .fx-kpi{border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; background:#fff}
    .fx-kpi .big{font-weight:900; font-size:22px}
    .fx-kpi .small{color:var(--muted); font-size:12px}

    /* ===== Términos ===== */
    .fx-terms{border:1px dashed #e5e7eb; border-radius:12px; padding:12px}
    .fx-check{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.35}
    .fx-check input[type=checkbox]{transform:translateY(2px) scale(1.15); accent-color: var(--brand)}
    .fx-check a{color:#0b5cab; text-decoration:underline; text-underline-offset:2px}

    /* ===== Botón ===== */
    .fx-btn{
      align-items: center;
      gap: 10px;
      background: linear-gradient(180deg, #ff620e, #ff620e);
      color:#fff;
      border:none;
      border-radius:14px;
      padding:14px 22px;
      font-weight:900;
      letter-spacing:.3px;
      cursor:pointer;
      box-shadow:0 12px 24px rgba(255,98,14,.35);
     transition: .2s;
    }
    .fx-btn:hover{transform: translateY(-1px); filter:brightness(1.03)}


    .fx-err{color:#e11d48; font-size:13px; margin-top:4px}

    /* Helpers usados en la vista de confirmación */
.fx-body.fx-body-single{ display:grid; gap:16px; grid-template-columns:1fr }
.fx-cta{ display:flex; gap:12px; margin-top:12px }
.fx-btn-dark{ background:#111827; color:#fff; box-shadow:0 12px 24px rgba(17,24,39,.25) }
.fx-btn-dark:hover{ transform:translateY(-1px); filter:brightness(1.03) }
.fx-img-contain{ width:100%; height:auto; object-fit:contain; display:block }
/* ===== Confirmación: imagen ajustada y centrada ===== */
.fx-body.fx-body-single{
  display:grid;
  gap:16px;
  justify-items:center;
  padding: clamp(12px, 3vw, 24px);
}

.fx-body.fx-body-single .fx-illu{
  width:min(380px, 40%);
  border-radius:16px;
  border:1px solid var(--line);
  background:#f6f7f9;
  box-shadow:var(--shadow);
}

.fx-img-contain{
  width:100%;
  height:auto;
  max-height:48vh;         /* <- límite de alto en desktop */
  object-fit:contain;
  display:block;
}

@media (max-width:640px){
  .fx-img-contain{ max-height:38vh; } /* <- más compacta en móvil */
}

/* Botón centrado en confirmación */
.fx-cta{ display:flex; gap:12px; margin-top:12px; justify-content:center; }

/* ===== Estados de error (campo) ===== */
.fx-field.invalid .fx-input,
.fx-field.invalid .fx-textarea{
  border-color:#e11d48;
  box-shadow:0 0 0 6px rgba(225,29,72,.15);
}
.fx-field.invalid .fx-label{ color:#b91c1c; }
.fx-err{ color:#e11d48; font-size:12px; margin-top:4px; min-height:1em; }

/* ===== Estado de error (T&C) ===== */
.fx-check.invalid{
  outline:2px solid rgba(225,29,72,.35);
  outline-offset:4px;
  border-radius:10px;
}