.ramo-form {
  --ramo-cream: #F7F3EA;
  --ramo-olive: #3F4A34;
  --ramo-light-olive: #5C6B4B;
  --ramo-clay: #A6875F;
  --ramo-ink: #2A2822;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  color: var(--ramo-ink);
  font-family: "Jost", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.ramo-form, .ramo-form * { box-sizing: border-box; }
.ramo-steps, .ramo-summary { min-width: 0; }
.ramo-step { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.ramo-legend {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
}
.ramo-number {
  display: inline-block;
  margin-right: 10px;
  color: var(--ramo-light-olive);
  font-family: "Jost", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.ramo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ramo-options-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ramo-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.ramo-radio { position: absolute; top: 16px; left: 12px; width: 16px; height: 16px; margin: 0; accent-color: var(--ramo-olive); }
.ramo-option-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 100%;
  min-height: 64px;
  padding: 12px 10px 12px 38px;
  border: 1px solid #B9B8A9;
  border-radius: 4px;
  background: #FFFDFA;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.ramo-option-label { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.ramo-option-note { color: #565A4C; font-size: 12px; }
.ramo-radio:checked + .ramo-option-body { border-color: var(--ramo-olive); background: #EAEBDD; }
.ramo-radio:focus-visible + .ramo-option-body { outline: 2px solid var(--ramo-olive); outline-offset: 3px; }
.ramo-swatches { display: flex; gap: 4px; padding-bottom: 3px; }
.ramo-swatch { width: 16px; height: 16px; border: 1px solid rgb(42 40 34 / 20%); border-radius: 50%; }
.ramo-control {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid #B9B8A9;
  border-radius: 4px;
  background: #FFFDFA;
  color: var(--ramo-ink);
  font: inherit;
  font-size: 16px;
  color-scheme: light;
}
.ramo-control:focus-visible, .ramo-submit:focus-visible { outline: 2px solid var(--ramo-olive); outline-offset: 3px; }
.ramo-control[aria-invalid="true"] { border-color: #904530; }
.ramo-textarea { resize: vertical; }
.ramo-textarea::placeholder { color: #68685C; opacity: 1; }
.ramo-counter { margin: 5px 0 0; text-align: right; font-size: 12px; color: #565A4C; }
.ramo-help { margin: 10px 0; color: #565A4C; font-size: 13px; line-height: 1.6; }
.ramo-date-label { display: block; margin: 18px 0 8px; font-size: 15px; }
.ramo-warning { margin: 8px 0 0; font-size: 14px; color: #904530; }
.ramo-warning:empty { display: none; }
.ramo-summary { padding: clamp(18px, 2.5vw, 32px); border: 1px solid #CEC9B9; border-radius: 4px; background: var(--ramo-cream); }
.ramo-eyebrow { margin: 0 0 5px; color: var(--ramo-light-olive); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; }
.ramo-title { margin: 0; color: var(--ramo-olive); font-family: "Cormorant Garamond", serif; font-size: 36px; font-weight: 500; line-height: 1.15; }
.ramo-illustration { display: block; width: 100%; height: auto; max-width: 300px; margin: 8px auto 0; }
.ramo-bouquet { transform: scale(var(--ramo-scale, 0.82)); transform-origin: 150px 220px; transition: transform 220ms ease; }
.ramo-flower { stroke: rgb(63 74 52 / 24%); stroke-width: 0.8; }
.ramo-flower-one { fill: var(--ramo-color-1, #EEEADD); }
.ramo-flower-two { fill: var(--ramo-color-2, #D4DAC7); }
.ramo-flower-three { fill: var(--ramo-color-3, #718064); }
.ramo-caption { margin: 8px 0 0; color: #565A4C; font-size: 12px; line-height: 1.5; }
.ramo-details { margin: 22px 0 0; }
.ramo-detail { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #DCD7C9; font-size: 14px; }
.ramo-detail dt { color: #565A4C; }
.ramo-detail dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; white-space: pre-wrap; }
.ramo-price { margin: 22px 0 4px; font-family: "Cormorant Garamond", serif; font-size: 36px; line-height: 1.15; color: var(--ramo-olive); }
.ramo-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; margin-top: 20px; padding: 13px 16px; border: 1px solid var(--ramo-olive); border-radius: 4px; background: var(--ramo-olive); color: var(--ramo-cream); font: inherit; font-size: 15px; cursor: pointer; }
@media (hover: hover) {
  .ramo-option:hover .ramo-option-body { border-color: var(--ramo-light-olive); }
  .ramo-submit:hover { background: var(--ramo-light-olive); }
}
@media (max-width: 800px) {
  .ramo-form { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 420px) {
  .ramo-options-three { grid-template-columns: minmax(0, 1fr); }
  .ramo-option-body { padding-left: 34px; padding-right: 8px; }
  .ramo-radio { left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ramo-option-body, .ramo-bouquet { transition: none; }
}

/* Resumen fijo al bajar por el formulario (solo escritorio) */
@media (min-width: 900px) { .ramo-summary { position: sticky; top: 96px; align-self: start; } }