/* Pueblos Rojos · app de recogida (piloto). Misma paleta y letra que la web y que la app de visita. */
@font-face { font-family: "Serif PR"; src: url("fuentes/serif-400.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Serif PR"; src: url("fuentes/serif-600.ttf"); font-weight: 600; font-display: swap; }

:root {
  --rodeno: #a13629; --rodeno-800: #853025; --rodeno-100: #fbe6e3; --rodeno-50: #fdf4f3;
  --hayedo: #4a6636; --pizarra: #2f3237; --cuarcita: #c8912f;
  --fondo: #faf6f2; --tarjeta: #fff; --tinta: #231f1c; --suave: #736a62; --linea: #e6ddd4;
  --serif: "Serif PR", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sombra: 0 1px 2px rgba(40,20,10,.06), 0 6px 18px rgba(40,20,10,.07);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--fondo); color: var(--tinta); font-family: var(--sans); }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
svg { width: 22px; height: 22px; flex: none; }
.pantalla { display: none; min-height: 100vh; }
.pantalla.activa { display: flex; flex-direction: column; }
@media (min-width: 700px) { .pantalla { max-width: 560px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,.06); } }

/* ---------- botones ---------- */
.boton { border: 0; border-radius: 14px; padding: 15px 20px; font-size: 16px; font-weight: 650; cursor: pointer; width: 100%; }
.boton.principal { background: var(--rodeno); color: #fff; box-shadow: 0 4px 14px rgba(161,54,41,.28); }
.boton.principal:active { background: var(--rodeno-800); }
.boton.grande { padding: 18px; font-size: 17px; }
.boton:disabled { opacity: .55; }
.enlace { background: none; border: 0; color: var(--rodeno); font-weight: 600; font-size: 15px; padding: 12px 0; cursor: pointer; text-decoration: none; display: inline-block; }

/* ---------- portada ---------- */
.portada { position: relative; flex: 1; min-height: 62vh; color: #fff; overflow: hidden; }
.portada-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,6,.6) 0%, rgba(20,10,6,.1) 35%, rgba(60,20,15,.92) 100%); }
.marca { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 22px; display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: .02em; }
.marca svg { width: 36px; height: 36px; }
.sin-red { position: absolute; top: calc(22px + env(safe-area-inset-top)); right: 18px; background: var(--cuarcita); color: var(--tinta); font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 99px; }
.portada-texto { position: absolute; left: 22px; right: 22px; bottom: 28px; }
.portada-texto h1 { font-family: var(--serif); font-weight: 600; font-size: 31px; line-height: 1.12; margin: 0 0 12px; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.portada-texto p { margin: 0; font-size: 16px; line-height: 1.45; opacity: .93; }
.portada-abajo { padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); background: var(--fondo); }
.promesa { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--suave); line-height: 1.4; margin: 14px 2px 0; }
.promesa svg { width: 16px; height: 16px; margin-top: 1px; color: var(--hayedo); }
.aviso-cola { background: #f5ecd6; color: #6b4d0f; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }

/* ---------- recorrido ---------- */
.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: rgba(250,246,242,.96); backdrop-filter: blur(8px); }
.atras { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--tarjeta); box-shadow: var(--sombra); display: grid; place-items: center; cursor: pointer; }
.progreso { flex: 1; height: 6px; border-radius: 3px; background: var(--linea); overflow: hidden; }
#progreso-barra { height: 100%; width: 25%; background: var(--rodeno); border-radius: 3px; transition: width .3s ease; }
.paso-num { font-size: 13px; color: var(--suave); font-weight: 600; min-width: 42px; text-align: right; }
form { flex: 1; padding: 6px 20px 20px; }
.paso { display: none; }
.paso.activo { display: block; animation: entra .25s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.paso h2 { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.15; margin: 10px 0 14px; }
.ayuda { margin: -4px 0 14px; color: var(--suave); font-size: 15px; line-height: 1.4; }

.buscador { display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: 14px; padding: 0 14px; color: var(--suave); }
.buscador:focus-within { border-color: var(--rodeno); }
.buscador input { flex: 1; border: 0; outline: 0; background: none; padding: 14px 0; font-size: 16px; color: var(--tinta); }
.lista-pueblos { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.pueblo { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; background: var(--tarjeta); border: 1.5px solid transparent; border-radius: 14px; box-shadow: var(--sombra); cursor: pointer; text-align: left; }
.pueblo img, .pueblo .sin-foto { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--rodeno-100); display: grid; place-items: center; }
.pueblo .sin-foto svg { width: 26px; height: 26px; }
.pueblo b { font-family: var(--serif); font-weight: 600; font-size: 17px; display: block; }
.pueblo small { color: var(--suave); font-size: 12.5px; }
.pueblo .marca-ok { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea); display: grid; place-items: center; color: #fff; }
.pueblo .marca-ok svg { width: 16px; height: 16px; opacity: 0; }
.pueblo.elegido { border-color: var(--rodeno); background: var(--rodeno-50); }
.pueblo.elegido .marca-ok { background: var(--rodeno); border-color: var(--rodeno); }
.pueblo.elegido .marca-ok svg { opacity: 1; }

.campo { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; font-weight: 650; font-size: 15px; }
.campo input, .campo textarea { font-weight: 400; font-size: 16px; padding: 13px 14px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--tarjeta); outline: 0; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--rodeno); }
.campo small { font-weight: 400; color: var(--suave); font-size: 13px; }
.opc { font-weight: 500; color: var(--suave); font-size: 13px; margin-left: 4px; }

.temas { display: flex; flex-wrap: wrap; gap: 8px; }
.temas label { cursor: pointer; }
.temas input { position: absolute; opacity: 0; pointer-events: none; }
.temas span { display: inline-block; padding: 9px 14px; border-radius: 99px; background: var(--tarjeta); border: 1.5px solid var(--linea); font-size: 14.5px; }
.temas input:checked + span { background: var(--rodeno); border-color: var(--rodeno); color: #fff; }
.temas input:focus-visible + span { outline: 2px solid var(--rodeno); outline-offset: 2px; }

.fotos { margin: 6px 0 0; }
.subir { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px dashed #d7c9bd; border-radius: 16px; background: var(--tarjeta); cursor: pointer; color: var(--rodeno); font-weight: 650; }
.subir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subir small { margin-left: auto; color: var(--suave); font-weight: 400; }
.miniaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.miniaturas img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }

.opciones-firma { display: flex; flex-direction: column; gap: 10px; }
.opciones-firma label { cursor: pointer; }
.opciones-firma input { position: absolute; opacity: 0; pointer-events: none; }
.opciones-firma span { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 48px; border-radius: 14px; background: var(--tarjeta); border: 1.5px solid var(--linea); position: relative; }
.opciones-firma span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid #cbbdb0; }
.opciones-firma input:checked + span { border-color: var(--rodeno); background: var(--rodeno-50); }
.opciones-firma input:checked + span::before { border: 6px solid var(--rodeno); }
.opciones-firma small { color: var(--suave); font-size: 13px; font-style: italic; }

.resumen { background: var(--tarjeta); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.resumen .fila { padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.resumen .fila:last-child { border-bottom: 0; }
.resumen .fila small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin-bottom: 3px; }
.resumen .fila p { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.resumen .fotos-mini { display: flex; gap: 6px; }
.resumen .fotos-mini img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.permisos { margin: 18px 0 10px; display: flex; flex-direction: column; gap: 10px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; cursor: pointer; background: var(--tarjeta); padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--linea); }
.casilla input { width: 22px; height: 22px; accent-color: var(--rodeno); flex: none; margin: 0; }
.privacidad { margin: 6px 0; font-size: 14px; color: var(--suave); }
.privacidad summary { cursor: pointer; color: var(--rodeno); font-weight: 600; padding: 8px 0; }
.privacidad p { line-height: 1.45; margin: 6px 0; }
.privacidad .piloto { font-size: 12px; color: #9b6a1c; }

.retirar-cuerpo { padding: 6px 20px 20px; }
.retirar-cuerpo .error { margin-top: 14px; }
.hecho { color: var(--hayedo); background: #e8efe1; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14.5px; margin: 14px 0 0; }
.error { color: #9b1c1c; background: #fbe9e7; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14.5px; margin: 10px 0 0; }
.pie-acciones { position: sticky; bottom: 0; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(250,246,242,0), var(--fondo) 30%); }

/* ---------- gracias ---------- */
.gracias { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 28px; }
.sello-grande { width: 120px; height: 120px; border-radius: 50%; background: var(--rodeno-50); border: 3px solid var(--rodeno); display: grid; place-items: center; margin-bottom: 18px; animation: sello .5s cubic-bezier(.2, 1.4, .4, 1); }
.sello-grande svg { width: 70px; height: 70px; }
@keyframes sello { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.gracias h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; margin: 0 0 10px; }
.gracias p { font-size: 17px; line-height: 1.5; color: var(--suave); margin: 0 0 26px; max-width: 380px; }

.codigo { background: var(--tarjeta); border: 1.5px dashed var(--rodeno); border-radius: 16px; padding: 14px 18px; margin: -8px 0 24px; max-width: 360px; }
.codigo small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.codigo b { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px; letter-spacing: .12em; color: var(--rodeno); margin: 4px 0; }
.codigo span { font-size: 13px; color: var(--suave); line-height: 1.4; }