/* ===== Variables (blanco + naranja) */
:root{
  --rf-bg: #ffffff;
  --rf-card: #fff;
  --rf-text: #1e1e1e;
  --rf-muted: #6b7280;
  --rf-border: #ececec;
  --rf-orange: #ff8200;
  --rf-orange-2: #ffb256;
  --rf-focus: #ff9a2e33;
}

/* ===== Layout */
.rf-wrap{ background: var(--rf-bg); padding: clamp(28px,4vw,56px) 16px; display:grid; place-items:center; }
.rf-card{
  width: min(760px, 100%);
  background: var(--rf-card);
  border: 1px solid var(--rf-border);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  overflow: hidden;
}

/* ===== Header */
.rf-head{ padding: 20px 20px 0 20px; }
.rf-head h3{
  margin: 0 0 10px; font-weight: 900; letter-spacing: .2px;
  color: var(--rf-orange);
  font-size: clamp(1.15rem,2.2vw,1.35rem);
}
.rf-hint{ color: var(--rf-muted); display:inline-block; margin: 6px 0 14px; }
.rf-progress{ height: 6px; background: #f7f7f7; border-radius: 999px; overflow: hidden; }
.rf-progress-bar{
  height: 100%;
  background: linear-gradient(90deg, var(--rf-orange), var(--rf-orange-2));
  width: 0%; transition: width .25s ease;
}

/* ===== Secciones */
.rf-section{ margin: 18px 20px 10px; font-weight: 800; color: var(--rf-text); }

/* ===== Grid */
.rf-form{ padding: 0 20px 20px; }
.rf-grid{ display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .rf-grid{ grid-template-columns: 1fr 1fr; } }
.rf-field{ position:relative; display:grid; }

/* ===== Campos con label flotante */
.rf-control{
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 12px 14px;
}
/* Label flotante se alinea con el nuevo padding */
.rf-field span{
  left: 20px;             /* antes 12px */
}

.rf-field:has(.rf-control:focus) .rf-control{ border-color: var(--rf-orange); box-shadow: 0 0 0 6px var(--rf-focus); }
.rf-field:has(.rf-control:focus) span,
.rf-control:not(:placeholder-shown) + span,
.rf-control:valid + span{
  top:-9px; font-size:.75rem; color: var(--rf-orange);
  border:1px solid #ffe2c7;
}

/* select */
.rf-select select{ appearance:none; background-image:
  linear-gradient(45deg, transparent 50%, #8a8a8a 50%),
  linear-gradient(135deg, #8a8a8a 50%, transparent 50%);
  background-position: calc(100% - 22px) 19px, calc(100% - 16px) 19px;
  background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; }

/* ===== Checks */
.rf-checks{ margin: 12px 20px 0; display:grid; gap:8px; color: var(--rf-muted); }
.rf-checks input{ accent-color: var(--rf-orange); }

/* ===== Mensajes */
.rf-msg{ min-height: 20px; margin: 8px 20px 0; color:#b91c1c; font-size:.92rem; }

/* ===== CTA */
.rf-cta{
  margin: 14px 20px 22px; width: calc(100% - 40px);
  background: linear-gradient(90deg, var(--rf-orange), var(--rf-orange-2));
  color:#fff; font-weight:900; border:none; border-radius:12px;
  padding: 14px 18px; cursor:pointer;
  box-shadow: 0 10px 24px rgba(255,130,0,.28);
  transition: transform .15s ease, filter .15s ease, opacity .2s ease;
}
.rf-cta:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.rf-cta:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* CTA secundario */
.rf-cta.rf-cta-sec{
  background: transparent; color: var(--rf-orange);
  border: 2px solid var(--rf-orange);
}

/* ===== Éxito */
.rf-success{ text-align:center; padding: 24px; }
.rf-success-badge{
  width:56px; height:56px; margin: 8px auto 10px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-weight:900;
  background: linear-gradient(90deg, var(--rf-orange), var(--rf-orange-2));
  box-shadow: 0 10px 24px rgba(255,130,0,.28);
}

/* ===== Helpers */
.rf-hp{ position:absolute; left:-9999px; width:1px; height:1px; }

/* ===== Ajustes para que los inputs no se salgan del card ===== */

/* Más padding lateral dentro de la tarjeta */
.rf-head, .rf-form{
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 480px){
  .rf-head, .rf-form{ padding-left: 20px; padding-right: 20px; }
}

/* Evita desbordes en layout de 2 columnas */
.rf-grid{ grid-template-columns: minmax(0,1fr); }
@media (min-width:768px){
  .rf-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap:14px; }
}

/* Inputs un poco más compactos */
.rf-control{ padding:12px 14px; }

/* Focus ring hacia adentro (no rebasa el borde del card) */
.rf-field:has(.rf-control:focus) .rf-control{
  box-shadow: inset 0 0 0 3px var(--rf-focus);
  border-color: var(--rf-orange);
}

/* Select ocupa toda la fila en desktop (evita “salto” de borde) */
@media (min-width:768px){
  .rf-grid .rf-field.rf-select{ grid-column: 1 / -1; }
}


/* ===== Card refinado estilo premium ===== */
.rf-card {
  max-width: 640px;         /* ancho máximo */
  margin: 40px auto;        /* centrado con aire arriba/abajo */
  border-radius: 20px;      
  background: #fff;         /* fondo limpio */
  box-shadow: 0 8px 28px rgba(0,0,0,0.08); /* sombra suave */
  overflow: hidden;
  border: 1px solid #f0f0f0; /* contorno ligero */
}

/* Cabezal */
.rf-head {
  padding: 28px 32px 10px 32px;
}

/* Formulario */
.rf-form {
  padding: 0 32px 32px 32px;
}

/* Grid mejorado */
.rf-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 768px) {
  .rf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  /* Select ocupa ancho completo */
  .rf-grid .rf-field.rf-select {
    grid-column: 1 / -1;
  }
}

/* Inputs */
.rf-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 15px;
  box-sizing: border-box;     /* <-- asegura que no se salga del contenedor */
  transition: all 0.25s ease;
}

/* Focus elegante */
.rf-field:has(.rf-control:focus) .rf-control {
  border-color: var(--rf-orange);
  box-shadow: 0 0 0 3px rgba(255,130,0,0.25); /* glow más suave */
  outline: none;
}

/* Botón */
.rf-submit {
  margin-top: 24px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--rf-orange);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}
.rf-submit:hover {
  background: #e57400;
  transform: translateY(-2px);
}

/* Cada campo lleva aire lateral propio */
.rf-field{
  padding-left: 10px;     /* colchón izquierdo */
  padding-right: 10px;    /* colchón derecho */
}

/* ====== Layout de dos columnas (form left + info right) ====== */
.rf-two{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  padding: 0 16px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 992px){
  .rf-two{
    grid-template-columns: minmax(0, 1fr) 420px; /* izquierda flexible, derecha fija */
    gap: 28px;
    padding-inline: 24px;
  }
}
.rf-col{
  flex: 1;                    /* Para que tome el mismo ancho que el panel */
  min-width: 320px;
}
/* ====== Panel derecho ====== */
.rf-aside{
  flex-basis: 420px;           /* Panel derecho con un ancho fijo */
  flex-grow: 0;                /* No crecer más allá del ancho dado */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.rf-aside-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 22px;
  height: 100%;
  max-height: 400px; /* Evita que el panel crezca demasiado */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .rf-aside-card {
    height: auto;  /* El panel se adapta en dispositivos pequeños */
    max-height: unset;
  }
}

.rf-aside-brand{
  font-weight: 900;
  font-size: 28px;
  letter-spacing: .5px;
  color: #3a3a3a;
  margin-bottom: 6px;
}
.rf-aside-copy{
  color: #6b7280;
  margin: 0 0 10px;
  line-height: 1.35;
}
.rf-aside-amount{
  color: var(--rf-orange);
  font-weight: 900;
  font-size: 28px;
  margin: 6px 0 14px;
}

/* Pasos */
.rf-steps{
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.rf-steps li{
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  color: #3f3f46;
  font-weight: 600;
}
.rf-ico{
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 2px solid #c7cbd1; border-radius: 50%;
  color: #707782;
}
.rf-ico svg{ width: 16px; height: 16px; fill: currentColor; }
.rf-ico-ok{
  border-color: var(--rf-orange);
  color: var(--rf-orange);
}


/* === Offset para bajar el panel derecho === */
:root{ --rf-aside-offset: 36px; }   /* ajusta 24–56px a tu gusto */

@media (min-width: 992px){
  .rf-aside-card{
    margin-top: var(--rf-aside-offset); /* baja el panel inicialmente */
    position: sticky;
    top: calc(var(--rf-aside-offset) + 8px); /* mantiene misma separación al hacer scroll */
  }
}

/* En móvil, sin offset */
@media (max-width: 991.98px){
  .rf-aside-card{ margin-top: 0; top: auto; position: static; }
}

/* Asegura que el formulario quede encima del panel derecho para recibir clics */
.rf-two{ position: relative; }
.rf-col{ position: relative; z-index: 2; }      /* form arriba */
.rf-aside{ position: relative; z-index: 1; }

/* Si aún tapa, desactiva clics sobre el contenedor de la derecha, pero no en su tarjeta */
@media (min-width: 992px){
  .rf-aside{ pointer-events: none; }
  .rf-aside-card{ pointer-events: auto; }       /* la tarjeta sí es clickeable */
}