/* Compra de un pack de preventa (/preventa/{packId}).
   Teléfono: portada a sangre, fotógrafo y pasos, y debajo el formulario.
   Escritorio: la portada es la columna izquierda y queda fija. */

.pc { --pc-sub: #9898A8; }

/* ── Lado del evento ─────────────────────────────────────────────── */
.pc-aside { display: flex; flex-direction: column; gap: 2px; }

.pc-hero {
    position: relative; overflow: hidden; background: var(--charcoal);
    min-height: 272px; display: flex; flex-direction: column; justify-content: flex-end;
    border-left: 2px solid var(--accent);
}
.pc-hero__photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%;
}
/* El velo vive en el contenedor del texto: la foto puede llegar tarde y el
   título tiene que leerse desde el primer pixel. */
.pc-hero__inner {
    position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px;
    padding: 72px 16px 20px;
    background: linear-gradient(180deg, rgba(10,10,15,.05) 0%, rgba(10,10,15,.5) 40%, rgba(10,10,15,.96) 100%);
}
.pc-back {
    position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 12px; font-size: 14px; color: var(--white); text-decoration: none;
    background: rgba(10,10,15,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pc-back:hover { color: var(--white); background: rgba(10,10,15,.8); }
.pc-eyebrow, .pc-label {
    font-family: var(--font-display); font-weight: 700; font-size: 11px; line-height: 1;
    letter-spacing: .22em; text-transform: uppercase; color: var(--pc-sub);
}
.pc-eyebrow { color: var(--accent); }
.pc-label--ice { color: var(--ice-bright); }
.pc-hero__title {
    margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 44px;
    line-height: .9; letter-spacing: -.02em; text-transform: uppercase;
    overflow-wrap: anywhere;
}
.pc-hero__meta { margin: 0; font-size: 14px; font-weight: 400; color: #C4C4D0; }

.pc-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: var(--border);
}
.pc-avatar--ring { box-shadow: 0 0 0 2px var(--charcoal), 0 0 0 3px var(--ice); }
.pc-avatar--initials {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--pc-sub);
}

.pc-by { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--charcoal); }
.pc-by__text { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.pc-by__name {
    font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.1;
    overflow-wrap: anywhere;
}
.pc-by__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--pc-sub); }
.pc-by__link:hover { color: var(--white); }

.pc-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
}
.pc-steps li {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 12px;
    background: var(--charcoal); font-size: 13px; line-height: 1.3; color: var(--pc-sub);
    overflow-wrap: anywhere;
}
.pc-steps li span {
    font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--muted);
}
.pc-steps li.is-now { color: var(--white); font-weight: 400; }
.pc-steps li.is-now span { color: var(--accent); }

/* ── Formulario ──────────────────────────────────────────────────── */
.ps-identify { display: flex; justify-content: center; padding: 28px 16px 72px; }
.ps-identify__card { width: 100%; max-width: 460px; }

.pc-packs { margin-bottom: 28px; }
.pc-packs__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.pc-packs__after { font-size: 12px; color: var(--pc-sub); text-align: right; }
.pc-packs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 2px; }
.pc-pack {
    position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 108px;
    padding: 14px 12px 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border);
    color: var(--white); text-decoration: none;
}
.pc-pack:hover { color: var(--white); box-shadow: inset 0 0 0 1px #3a3a48; }
.pc-pack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-pack.is-on { background: #10201A; box-shadow: inset 0 0 0 2px var(--accent); }
.pc-pack__tag {
    position: absolute; top: 0; right: 0; padding: 4px 6px; background: var(--ice); color: var(--black);
    font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
}
.pc-pack__count {
    font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1;
    letter-spacing: -.01em; padding-top: 4px;
}
.pc-pack__price { font-family: var(--font-display); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.pc-pack__unit { font-size: 12px; color: var(--pc-sub); }

.ps-identify h2.pc-title {
    font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: .95;
    letter-spacing: -.02em; margin: 0 0 10px;
}
.ps-identify__lead { color: var(--pc-sub); font-size: 15px; line-height: 1.5; margin: 0 0 22px; }
.ps-identify__form { margin-top: 20px; }
.ps-identify__label {
    display: block; font-family: var(--font-display); font-weight: 700; font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--pc-sub); margin: 18px 0 8px;
}
.ps-identify__input {
    width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 0;
    border: 1px solid var(--border-light); background: rgba(0, 0, 0, .3);
    color: inherit; font-size: 16px; font-weight: 400;
}
.ps-identify__input:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-color: transparent; }
.ps-identify__input::placeholder { color: var(--muted); }
.ps-identify__input--code {
    font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: 14px; text-align: center;
}
.ps-identify__btn {
    width: 100%; min-height: 54px; margin-top: 18px; padding: 12px 16px; border: 0; border-radius: 0;
    font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .18em;
    text-transform: uppercase; cursor: pointer; background: var(--accent); color: var(--black);
}
.ps-identify__btn:hover { background: #2bd878; }
.ps-identify__btn:disabled { opacity: .6; cursor: default; }
.ps-identify__btn--ghost {
    background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--border-light);
}
.ps-identify__btn--ghost:hover { background: var(--panel); }
.ps-identify__form--email { margin-top: 0; }
.ps-identify__resend { margin-top: 14px; text-align: center; }
.ps-identify__link {
    background: none; border: 0; padding: 0; cursor: pointer; min-height: 44px;
    color: var(--pc-sub); font-size: 13px; text-decoration: underline;
}
.ps-identify__link:hover { color: var(--white); }
.ps-identify__hint { color: var(--pc-sub); font-size: 12px; margin: 8px 0 0; min-width: 0; overflow-wrap: anywhere; }
.ps-identify__alert {
    border-left: 2px solid var(--border-light); background: var(--charcoal);
    padding: 12px 14px; font-size: 13px; margin-bottom: 16px;
}
.ps-identify__alert--bad { border-left-color: #ff6b5f; background: #2c1614; color: #ff9a8f; }

.ps-identify__who {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 4px 4px 4px 14px; background: var(--charcoal); border-left: 2px solid var(--accent);
    font-size: 13px; color: var(--pc-sub); margin-bottom: 24px;
}
.ps-identify__who > span { min-width: 0; overflow-wrap: anywhere; }
.ps-identify__who .bi { color: var(--accent); }
.ps-identify__who strong { color: var(--white); font-weight: 400; }
.ps-identify__who form { margin: 0; }
.ps-identify__who .ps-identify__link { padding: 0 10px; }
.ps-identify__consent { display: flex; gap: 8px; font-size: 13px; color: var(--pc-sub); margin: 14px 0 0; }
.ps-identify__more { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.ps-identify__more summary { cursor: pointer; font-size: 14px; min-height: 44px; display: flex; align-items: center; }

.ps-identify__preview {
    background: var(--charcoal); border-left: 2px solid var(--ice);
    padding: 14px; margin: 18px 0; font-size: 14px;
}
.ps-identify__preview span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--pc-sub); margin-bottom: 8px; }
.ps-identify__preview strong {
    font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1;
    text-transform: uppercase; overflow-wrap: anywhere;
}
.ps-identify__preview .ps-identify__preview-bib {
    display: inline; font-family: var(--font-display); font-weight: 700; text-transform: none;
    letter-spacing: 0; font-size: 22px; color: var(--pc-sub); margin: 0;
}
.ps-identify__preview .ps-identify__preview-detail {
    font-family: var(--font-body); font-weight: 300; text-transform: none; letter-spacing: 0;
    font-size: 13px; margin: 6px 0 0; overflow-wrap: anywhere;
}
.ps-identify__preview .ps-identify__preview-detail:empty { display: none; }
.pc-preview-by {
    display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border);
}
.pc-preview-by .pc-avatar { width: 40px; height: 40px; }
.ps-identify__preview .pc-preview-by .pc-avatar--initials {
    display: inline-flex; margin: 0; font-size: 15px; letter-spacing: 0; color: var(--pc-sub);
}
.pc-preview-by p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--pc-sub); }
.pc-preview-by strong { font-family: inherit; font-size: inherit; font-weight: 400; text-transform: none; color: var(--white); }
.ps-identify__textarea { resize: vertical; min-height: 72px; line-height: 1.4; }
.ps-identify__optional { font-family: var(--font-body); font-weight: 300; text-transform: none; letter-spacing: 0; }
.ps-identify__field-error { color: #ff9a8f; font-size: 12px; margin: 6px 0 0; min-height: 1em; }

.pc-total {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
    padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--border);
}
.pc-total > div { display: flex; flex-direction: column; gap: 6px; }
.pc-total__sub { font-size: 13px; color: var(--pc-sub); }
.pc-total__amount {
    font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: .9;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ¿Para quién son las fotos? Tarjetas, no un desplegable: son pocas y se
   leen de un vistazo. En el teléfono caben dos por fila. */
.ps-for { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.ps-for__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.ps-for__opt {
    position: relative; display: flex; flex-direction: column; gap: 3px;
    padding: 14px 12px 14px 38px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border);
    cursor: pointer; min-width: 0; min-height: 72px; margin: 0;
}
.ps-for__opt input { position: absolute; left: 14px; top: 17px; margin: 0; accent-color: var(--accent); }
.ps-for__opt:has(input:checked) { background: #10201A; box-shadow: inset 0 0 0 2px var(--accent); }
.ps-for__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-for__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.1; overflow-wrap: anywhere; }
.ps-for__sub { font-size: 13px; color: var(--pc-sub); overflow-wrap: anywhere; }
.ps-for__warn {
    font-size: 13px; color: var(--pc-sub); border-left: 2px solid var(--accent);
    padding: 4px 0 4px 10px; margin: 8px 0 0;
}
.ps-for__where { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 4px; }
/* display:flex le ganaría al atributo hidden, que el JS usa para mostrarla. */
.ps-for__where[hidden] { display: none; }
/* Con un número impar de tarjetas, la última ocupa la fila entera. */
.ps-for__opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ps-for__notice:empty { display: none; }

/* ── Escritorio: dos columnas, el evento fijo a la izquierda ─────── */
@media (min-width: 992px) {
    .pc {
        display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2px;
        min-height: calc(100vh - 64px);
    }
    .pc-aside {
        position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px);
    }
    .pc-hero { flex-grow: 1; min-height: 0; }
    .pc-hero__inner {
        padding: 96px 48px 40px;
        background:
            linear-gradient(90deg, rgba(10,10,15,.9) 0%, rgba(10,10,15,.55) 60%, rgba(10,10,15,.2) 100%),
            linear-gradient(0deg, rgba(10,10,15,.95) 0%, rgba(10,10,15,0) 60%);
        flex-grow: 1; justify-content: flex-end;
    }
    .pc-back { top: 20px; left: 36px; }
    .pc-hero__title { font-size: clamp(56px, 6vw, 88px); line-height: .85; }
    .pc-hero__meta { font-size: 16px; }
    .pc-by { padding: 14px 48px; }
    .pc-avatar { width: 52px; height: 52px; }
    .pc-by__name { font-size: 24px; }
    .pc-steps li { padding: 16px 20px; font-size: 14px; }
    .pc-steps li:first-child { padding-left: 48px; }
    .pc-steps li span { font-size: 26px; }
    .ps-identify { background: var(--charcoal); padding: 56px 48px 72px; align-items: flex-start; }
    .ps-identify__card { max-width: 480px; }
}