/* ===================== Ingreso y registro ===================== */
.acceso { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.acceso-lado { display: none; }
.acceso-panel { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; padding: calc(1rem + env(safe-area-inset-top)) clamp(1.1rem, 5vw, 3rem) calc(1.4rem + env(safe-area-inset-bottom)); }
.acceso-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; }
.acceso-barra .marca { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.acceso-barra .marca img { width: 38px; height: 38px; }
.acceso-barra .marca b { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; }
.acceso-centro { display: grid; align-content: center; justify-items: center; padding: 1rem 0 2rem; }
.acceso-caja { width: 100%; max-width: 480px; display: grid; gap: 1.5rem; }
.acceso-caja > header { display: grid; gap: .6rem; }
.acceso-caja h1 { font-size: clamp(2rem, 6vw, 2.9rem); }
.acceso-caja header p:not(.rotulo) { color: var(--crema-2); }
.acceso-pie { text-align: center; font-size: .92rem; color: var(--crema-2); }
.acceso-pie a { color: var(--oro-claro); font-weight: 600; text-underline-offset: .25em; }
form.pila, .pila { display: grid; gap: 1.1rem; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Paso a paso */
.paso { animation: paso-entra .55s var(--suave); }
@keyframes paso-entra { from { opacity: 0; transform: translateX(22px); } }
.progreso { display: flex; gap: .45rem; align-items: center; }
.progreso i { height: 3px; flex: 1; border-radius: 3px; background: rgba(236, 212, 148, .2); position: relative; overflow: hidden; }
.progreso i::after { content: ''; position: absolute; inset: 0; background: var(--oro-claro); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--suave); }
.progreso i.hecho::after { transform: scaleX(1); }

/* Captcha */
.captcha { display: grid; gap: .5rem; }
.captcha-fila { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: stretch; }
.captcha-imagen { display: flex; align-items: center; justify-content: center; min-height: 72px; border-radius: var(--radio-s); background: rgba(10, 2, 4, .5); border: 1.5px dashed rgba(236, 212, 148, .35); overflow: hidden; }
.captcha-imagen img { width: 100%; max-width: 230px; height: 72px; object-fit: contain; }
.captcha-otro { width: 56px; border: 1.5px solid var(--linea); border-radius: var(--radio-s); background: transparent; color: var(--oro-claro); display: grid; place-items: center; transition: background-color .2s; }
.captcha-otro:hover { background: rgba(236, 212, 148, .1); }
.captcha-otro svg { width: 22px; height: 22px; transition: transform .6s var(--suave); }
.captcha-otro:active svg { transform: rotate(-270deg); }

/* Código OTP */
.otp input { text-align: center; font-family: var(--serif); font-size: 2.2rem !important; letter-spacing: .45em; padding-left: calc(1rem + .45em) !important; min-height: 76px !important; font-variant-numeric: tabular-nums; }
.reenviar { font-size: .93rem; color: var(--crema-2); }

/* Búsqueda en la lista */
.buscador { position: relative; }
/* Caja clara con letra concho de vino: lo que se escribe se lee sin esfuerzo */
.buscador input {
  width: 100%; min-height: 60px; padding: .7rem 1rem .7rem 3.1rem; font-size: 1.15rem; font-weight: 600;
  color: var(--vino-700); caret-color: var(--rubi); background: #fbf5e9;
  border: 1.5px solid var(--oro); border-radius: var(--radio-s); appearance: none; -webkit-appearance: none;
  transition: box-shadow .2s, background-color .2s;
}
.buscador input::placeholder { color: #8d6f72; font-weight: 400; opacity: 1; }
.buscador input:focus { outline: none; background: #fff; box-shadow: 0 0 0 4px rgba(201, 162, 75, .35); }
.buscador > svg { color: var(--rubi) !important; }
.buscador > svg { position: absolute; left: 1rem; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--oro-claro); pointer-events: none; }
.resultados { display: grid; gap: .55rem; min-height: 40px; }
.resultado {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; width: 100%; text-align: left;
  padding: .8rem 1rem; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--superficie); color: inherit;
  transition: transform .3s var(--suave), border-color .2s, background-color .2s; animation: paso-entra .4s var(--suave) backwards; animation-delay: calc(var(--i, 0) * 50ms);
}
button.resultado:hover { border-color: var(--oro-claro); background: rgba(236, 212, 148, .09); transform: translateX(5px); }
.resultado b { display: block; font-family: var(--serif); font-weight: 450; font-size: 1.16rem; line-height: 1.2; }
.resultado small { color: var(--crema-2); font-size: .86rem; }
.resultado > svg { width: 20px; height: 20px; color: var(--oro-claro); }
.resultado.tomado { opacity: .62; }
.vacio-busqueda { padding: 1rem 0; color: var(--crema-2); font-size: .97rem; }

.ficha { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 14px; background: rgba(236, 212, 148, .08); box-shadow: inset 0 0 0 1px rgba(236, 212, 148, .3); }
.ficha b { font-family: var(--serif); font-weight: 450; font-size: 1.2rem; line-height: 1.2; display: block; }
.ficha small { color: var(--crema-2); }

.foto-selector { display: flex; align-items: center; gap: 1rem; }
.foto-selector .avatar { --t: 72px; }
.foto-selector input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Requisitos de la contraseña */
.requisitos { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .85rem; color: var(--crema-2); }
.requisitos li { display: flex; align-items: center; gap: .35rem; transition: color .2s; }
.requisitos li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: all .25s var(--rebote); }
.requisitos li.ok { color: #8fe0b3; }
.requisitos li.ok::before { background: currentColor; transform: scale(1.2); }

/* Bienvenida: la medalla "sella" el registro */
.sello { display: grid; justify-items: center; text-align: center; gap: 1.2rem; padding: 1rem 0; }
.sello img { width: 170px; height: 170px; animation: sellar .9s var(--rebote) both; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
@keyframes sellar { 0% { transform: scale(2.4) rotate(-28deg); opacity: 0; } 55% { transform: scale(.92) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.sello .onda { position: absolute; width: 170px; height: 170px; border-radius: 50%; box-shadow: 0 0 0 2px var(--oro-claro); animation: onda 1.2s .45s var(--suave) both; pointer-events: none; }
@keyframes onda { from { transform: scale(.9); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.sello-marco { position: relative; display: grid; place-items: center; }
.sello h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
.sello p { color: var(--crema-2); max-width: 38ch; }

/* Panel lateral (escritorio) */
@media (min-width: 1000px) {
  .acceso { grid-template-columns: minmax(0, 1fr) minmax(480px, 44vw); }
  .acceso-lado {
    position: sticky; top: 0; height: 100dvh; display: grid; align-content: space-between; padding: 3rem; overflow: hidden;
    border-right: 1px solid rgba(236, 212, 148, .2);
  }
  .acceso-lado::before { content: ''; position: absolute; inset: 0; background: var(--foto) center / cover; filter: grayscale(1) contrast(1.1); opacity: .5; }
  .acceso-lado::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 6, 13, .55), rgba(36, 6, 13, .92)), #7a1026; mix-blend-mode: multiply; }
  .acceso-lado > * { position: relative; z-index: 1; }
  .acceso-lado img { width: 150px; height: 150px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); animation: mecer-lado 9s ease-in-out infinite; }
  @keyframes mecer-lado { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
  .acceso-lado blockquote { margin: 0; font-family: var(--serif); font-weight: 320; font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
  .acceso-lado blockquote em { color: var(--oro-claro); }
  .acceso-lado cite { display: block; margin-top: 1.2rem; font-family: var(--sans); font-style: normal; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-claro); }
}