/* =====================================================================
   ArtísticoStudios · flujo de reserva y confirmación
   (usa los colores definidos en sitio.css)
   ===================================================================== */

.reserva { padding: 32px 0 80px; }
.reserva__contenedor { max-width: 720px; }
.reserva__titulo { font-size: clamp(2.4rem, 10vw, 3.6rem); margin-bottom: .4em; }

/* ---------- Avisos ---------- */
.aviso {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: var(--radio-chico);
    background: var(--crema);
    border: 1px solid var(--linea);
}
.aviso--error { background: #FDEDEA; border-color: rgba(242, 92, 74, .35); color: #8E2B1F; }
.aviso a { font-weight: 600; }

/* ---------- Barra de progreso ---------- */
.progreso {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin: 0 0 28px;
    padding: 0;
    isolation: isolate;
}
.progreso__paso { display: grid; gap: 6px; justify-items: center; text-align: center; position: relative; }
.progreso__paso::before { /* línea entre pasos */
    content: "";
    position: absolute;
    top: 15px; right: 50%;
    width: calc(100% + 6px);
    height: 2px;
    background: var(--linea);
    z-index: -1;
}
.progreso__paso:first-child::before { display: none; }
.progreso__numero {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--fondo);
    border: 1.5px solid var(--linea);
    font-size: .85rem;
    font-weight: 700;
    color: var(--texto-suave);
    transition: background-color .3s, border-color .3s, color .3s;
}
.progreso__nombre { font-size: .72rem; font-weight: 600; color: var(--texto-suave); }

.progreso__paso.hecho::before,
.progreso__paso.actual::before { background: var(--cobre); }
.progreso__paso.hecho .progreso__numero { background: var(--pizarra); border-color: var(--pizarra); color: #fff; }
.progreso__paso.actual .progreso__numero { background: var(--degradado); border-color: transparent; color: var(--texto); }
.progreso__paso.actual .progreso__nombre { color: var(--texto); }

/* ---------- Pasos ---------- */
.formulario-reserva { margin: 0; }

.paso-reserva { border: 0; margin: 0; padding: 0; min-width: 0; }
.paso-reserva[hidden] { display: none; }
.paso-reserva:not([hidden]) { animation: entrarPaso .35s ease; }
@keyframes entrarPaso { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.paso-reserva__titulo {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 18px;
    font-family: var(--serif);
    font-size: clamp(1.8rem, 7vw, 2.3rem);
    font-weight: 600;
    line-height: 1.15;
}
.paso-reserva__titulo:focus { outline: none; }

.paso-reserva__grupo {
    margin: 18px 0 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cobre-oscuro);
}
.paso-reserva__texto { color: var(--texto-suave); }
.paso-reserva__nota { margin: 22px 0 0; font-size: .92rem; color: var(--texto-suave); }

.paso-reserva__acciones {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--linea);
}
.paso-reserva__acciones .boton--grande { flex: 1; max-width: 320px; margin-left: auto; }
.paso-reserva__acciones [data-anterior] { min-height: 54px; }

.boton[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- Tarjetas seleccionables (paquete y pago) ---------- */
.opciones-paquete, .opciones-pago { display: grid; gap: 10px; }

.opcion-paquete, .opcion-pago { display: block; cursor: pointer; }
.opcion-paquete input, .opcion-pago input { position: absolute; opacity: 0; pointer-events: none; }

.opcion-paquete__caja, .opcion-pago__caja {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 16px 52px 16px 18px;
    background: var(--tarjeta);
    border: 1.5px solid var(--linea);
    border-radius: var(--radio-chico);
    transition: border-color .2s, box-shadow .2s;
}
.opcion-paquete:hover .opcion-paquete__caja,
.opcion-pago:hover .opcion-pago__caja { border-color: rgba(212, 144, 58, .6); }

.opcion-paquete input:checked + .opcion-paquete__caja,
.opcion-pago input:checked + .opcion-pago__caja {
    border-color: var(--cobre);
    box-shadow: 0 0 0 3px rgba(212, 144, 58, .18);
}
.opcion-paquete input:focus-visible + .opcion-paquete__caja,
.opcion-pago input:focus-visible + .opcion-pago__caja { outline: 2px solid var(--turquesa); outline-offset: 2px; }

.opcion-paquete__nombre { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.opcion-paquete__precio { font-weight: 700; color: var(--pizarra); }
.opcion-paquete__detalle { font-size: .85rem; color: var(--texto-suave); }

.opcion-paquete__marca, .opcion-pago__caja::after {
    position: absolute;
    top: 16px; right: 16px;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--linea);
    color: transparent;
}
.opcion-paquete__marca .icono { width: 14px; height: 14px; stroke-width: 3; }
.opcion-paquete input:checked + .opcion-paquete__caja .opcion-paquete__marca { background: var(--cobre); border-color: var(--cobre); color: #fff; }

.opcion-pago__caja::after { content: ""; }
.opcion-pago input:checked + .opcion-pago__caja::after { border: 7px solid var(--cobre); }
.opcion-pago__titulo { font-weight: 700; }
.opcion-pago__texto { font-size: .9rem; color: var(--texto-suave); }

/* Paquete elegido (pasos 2 en adelante) */
.paquete-elegido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: var(--crema);
    border-radius: var(--radio-chico);
    font-size: .92rem;
}
.paquete-elegido button {
    border: 0;
    background: none;
    padding: 6px 0;
    font: 600 .88rem var(--sans);
    color: var(--pizarra);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Calendario ---------- */
.calendario {
    padding: 16px 12px 14px;
    background: var(--tarjeta);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
}
.calendario__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendario__mes { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.calendario__flecha {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1.5px solid var(--linea);
    border-radius: 50%;
    background: none;
    color: var(--texto);
    cursor: pointer;
}
.calendario__flecha:disabled { opacity: .3; cursor: default; }
.icono--izquierda { transform: rotate(180deg); }

.calendario__semana, .calendario__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario__semana span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--texto-suave); padding: 6px 0; }

.calendario__dias { min-height: 250px; }
.calendario__dias.cargando { opacity: .45; pointer-events: none; }

.dia {
    aspect-ratio: 1;
    width: 100%;
    max-width: 48px;
    justify-self: center;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    font: 600 .95rem var(--sans);
    color: var(--texto);
}
button.dia { cursor: pointer; background: rgba(46, 155, 181, .1); color: var(--pizarra); }
button.dia:hover { background: rgba(46, 155, 181, .22); }
button.dia[aria-pressed="true"] { background: var(--pizarra); color: #fff; }
.dia--lleno { color: rgba(30, 42, 48, .3); text-decoration: line-through; font-weight: 500; }
.dia--hoy { box-shadow: inset 0 0 0 1.5px var(--cobre); }

.calendario__leyenda { display: flex; gap: 18px; justify-content: center; margin-top: 12px; font-size: .8rem; color: var(--texto-suave); }
.calendario__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto--libre { background: rgba(46, 155, 181, .45); }
.punto--lleno { background: rgba(30, 42, 48, .15); }

/* ---------- Horas ---------- */
.horas { margin-top: 22px; }
.horas__titulo { font-weight: 700; margin-bottom: 10px; }
.horas__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hora {
    min-height: 46px;
    border: 1.5px solid var(--linea);
    border-radius: var(--radio-chico);
    background: var(--tarjeta);
    font: 600 .92rem var(--sans);
    color: var(--texto);
    cursor: pointer;
}
.hora:hover { border-color: var(--cobre); }
.hora[aria-checked="true"] { background: var(--pizarra); border-color: var(--pizarra); color: #fff; }
.horas__vacio { grid-column: 1 / -1; color: var(--texto-suave); margin: 0; }

/* ---------- Campos ---------- */
.campo { margin-bottom: 18px; }
.campo label:not(.subir) { display: block; margin-bottom: 6px; font-weight: 600; font-size: .95rem; }
.campo__opcional { font-weight: 400; color: var(--texto-suave); }

.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1.5px solid var(--linea);
    border-radius: var(--radio-chico);
    background: var(--tarjeta);
    font: 400 1rem var(--sans); /* 16px: evita que el iPhone haga zoom */
    color: var(--texto);
    transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--turquesa);
    box-shadow: 0 0 0 3px rgba(46, 155, 181, .18);
}
.campo [aria-invalid="true"] { border-color: var(--coral); }

.campo__grupo { display: flex; }
.campo__prefijo {
    display: grid;
    place-items: center;
    padding: 0 14px;
    border: 1.5px solid var(--linea);
    border-right: 0;
    border-radius: var(--radio-chico) 0 0 var(--radio-chico);
    background: var(--crema);
    font-weight: 600;
    color: var(--texto-suave);
}
.campo__grupo input { border-radius: 0 var(--radio-chico) var(--radio-chico) 0 !important; }

.campo__ayuda { margin: 6px 0 0; font-size: .85rem; color: var(--texto-suave); }
.campo__error { margin: 6px 0 0; font-size: .88rem; font-weight: 600; color: #B83A2A; }
.campo__error:empty { display: none; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Resumen ---------- */
.resumen { margin: 0 0 18px; display: grid; gap: 0; }
.resumen div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.resumen dt { color: var(--texto-suave); font-size: .9rem; }
.resumen dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.totales { padding: 18px; background: var(--crema); border-radius: var(--radio); display: grid; gap: 10px; }
.totales__fila { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.totales__fila strong { font-size: 1.1rem; }
.totales__fila--anticipo { padding-top: 10px; border-top: 1px dashed rgba(168, 90, 56, .35); }
.totales__fila--anticipo strong { font-family: var(--serif); font-size: 1.8rem; color: var(--cobre-oscuro); }
.totales__fila--suave { font-size: .9rem; color: var(--texto-suave); }

/* ---------- Pago ---------- */
.panel-pago { margin-top: 18px; padding: 18px; border-radius: var(--radio); background: var(--crema); }
.panel-pago[hidden] { display: none; }
.panel-pago > p { margin-bottom: 12px; }

.cuentas { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.cuenta { padding: 14px 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-chico); }
.cuenta p { margin: 0; }
.cuenta__banco { font-weight: 700; }
.cuenta__dato { font-size: .88rem; color: var(--texto-suave); }
.cuenta__numero { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cuenta__numero span { font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.boton-copiar {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--pizarra);
    border-radius: 999px;
    background: none;
    font: 600 .85rem var(--sans);
    color: var(--pizarra);
    cursor: pointer;
}
.boton-copiar.copiado { background: var(--pizarra); color: #fff; }

.subir {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 22px 16px;
    border: 2px dashed rgba(47, 85, 102, .3);
    border-radius: var(--radio-chico);
    background: var(--tarjeta);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s;
}
.subir:hover, .subir:focus-within { border-color: var(--turquesa); }
.subir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subir__texto { font-weight: 700; color: var(--pizarra); overflow-wrap: anywhere; }
.subir__ayuda { font-size: .82rem; color: var(--texto-suave); }
.subir.con-archivo { border-style: solid; border-color: var(--turquesa); }

/* ---------- Confirmación ---------- */
.confirmacion { padding: 40px 0 80px; text-align: center; }
.confirmacion__contenedor { max-width: 640px; }
.confirmacion__icono {
    display: grid;
    place-items: center;
    width: 72px; height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--degradado);
    color: var(--texto);
}
.confirmacion__icono .icono { width: 34px; height: 34px; stroke-width: 2.4; }
.confirmacion__titulo { font-size: clamp(2.2rem, 9vw, 3.2rem); }
.confirmacion__codigo {
    display: inline-block;
    margin: 6px 0 22px;
    padding: 10px 22px;
    border: 1.5px dashed var(--cobre);
    border-radius: var(--radio-chico);
    font: 700 1.6rem/1.2 var(--sans);
    letter-spacing: .08em;
    color: var(--cobre-oscuro);
}
.confirmacion__estado {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: var(--radio-chico);
    background: #FFF4E0;
    border: 1px solid rgba(253, 185, 74, .6);
    text-align: left;
}
.confirmacion .resumen, .confirmacion .totales { text-align: left; }
.confirmacion .acciones { margin-top: 28px; justify-content: center; }

/* ---------- Pantallas más grandes ---------- */
@media (min-width: 700px) {
    .reserva { padding: 56px 0 104px; }
    .progreso__nombre { font-size: .82rem; }
    .opciones-paquete { grid-template-columns: repeat(2, 1fr); }
    .opciones-pago { grid-template-columns: repeat(2, 1fr); }
    .calendario { padding: 22px 24px 18px; }
    .dia { font-size: 1rem; }
    .horas__lista { grid-template-columns: repeat(4, 1fr); }
    .resumen div { grid-template-columns: 160px 1fr; }
}