/* CASOCERO — Bono regalo (6 nov 2026): /regalo/ y la pestaña «Lo quiero para regalar» de /el-ultimo-telon/.
   Se apoya en reservas.css (pasos, botones de personas, casillas) y en su tema oscuro. */

/* Pestañas «Reservar fecha» / «Lo quiero para regalar» */
.modo-reserva { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 var(--space-8); border: 1px solid var(--no-line-strong, #DCD4C2); border-radius: 8px; overflow: hidden; }
.modo-reserva button { appearance: none; border: 0; background: transparent; color: var(--no-text, #2A2A33); font: inherit; font-weight: 600; padding: 14px 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, color .15s; }
.modo-reserva button + button { border-left: 1px solid var(--no-line-strong, #DCD4C2); }
.modo-reserva button:hover { background: rgba(201, 162, 39, .08); }
.modo-reserva button[aria-selected="true"] { background: var(--color-evidence); color: #0F0F12; }
.modo-reserva svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { .modo-reserva button { font-size: .92rem; padding: 12px 8px; } }

/* Formulario */
.regalo-intro { margin: 0 0 var(--space-6); }
.regalo-intro h2 { margin-bottom: var(--space-2); }
.regalo-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px; margin-top: var(--space-5);
  border: 1px solid var(--no-line, #DCD4C2); border-radius: 8px; background: var(--no-surface, #FBF8F1); }
.regalo-total strong { font-family: var(--font-display, Georgia, serif); font-size: 1.6rem; color: var(--color-evidence); }
.regalo-total span { font-size: var(--fs-sm); color: var(--no-muted, #6B6B72); }
.regalo-pack { border: 2px solid var(--color-crime, #9F1F1F); border-radius: 8px; padding: 14px 16px; margin: 0 0 var(--space-6); background: rgba(159, 31, 31, .10); }
.regalo-pack p { margin: 0; font-size: var(--fs-sm); }
.regalo-pack strong { color: var(--no-text-strong, #0F0F12); }
.regalo-envio { border-left: 3px solid var(--color-evidence); padding: 4px 0 4px 16px; margin: 0 0 var(--space-6); }
.regalo-envio .form-row { margin-top: var(--space-3); }
.paso textarea#rg-mensaje { min-height: 96px; }
.regalo-cuenta { float: right; font-size: var(--fs-xs); color: var(--no-muted, #6B6B72); }
.nota-regalo { background: rgba(201, 162, 39, .12); border-left: 3px solid var(--color-evidence); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-6); font-size: var(--fs-sm); }
body.tema-oscuro .paso input[type="date"] { color-scheme: dark; }

/* Cómo funciona (landing) */
.regalo-pasos { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); counter-reset: rp; }
.regalo-pasos li { counter-increment: rp; border: 1px solid var(--no-line, #DCD4C2); border-radius: 8px; padding: 18px 16px 16px; background: var(--no-surface, #FBF8F1); font-size: var(--fs-sm); }
.regalo-pasos li::before { content: counter(rp); display: block; font-family: var(--font-display, Georgia, serif); font-size: 1.8rem; line-height: 1; color: var(--color-evidence); margin-bottom: 8px; }
.regalo-pasos strong { display: block; color: var(--no-text-strong, #0F0F12); margin-bottom: 4px; }
@media (max-width: 760px) { .regalo-pasos { grid-template-columns: 1fr 1fr; } }

/* Gracias */
.regalo-hecho { border: 1px solid var(--color-evidence); border-radius: 10px; padding: 26px 24px; background: var(--no-surface, #FBF8F1); text-align: center; }
.regalo-hecho .regalo-codigo { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: .06em; color: var(--color-evidence); margin: 8px 0 4px; word-break: break-all; }
.regalo-hecho .btn { margin: 6px 4px 0; }
.regalo-espera { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--no-line-strong, #DCD4C2); border-top-color: var(--color-evidence); border-radius: 50%; animation: rg-gira 1s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes rg-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .regalo-espera { animation: none; } }