@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
/* Tokens compartidos con landing (style.css): gold #d6b56a, navy #07131f */
:root
{
    --navy:#07131f;
    --petrol:#0d3544;
    --gold:#d6b56a;
    --gold-dark:#80642e;
    --ink:#18232b;
    --muted:#68747d;
    --line:#dfe4e7;
    --paper:#f6f8f8
}

*
{
    box-sizing:border-box
}

html
{
    scroll-behavior:smooth
}

body
{
    margin:0;
    background:#02090f;
    color:#f0ece1;
    font-family:"DM Sans",Arial,sans-serif
}

a
{
    text-decoration:none;
    color:inherit
}

button,input,select
{
    font:inherit
}

button
{
    color:inherit
}

.hidden
{
    display:none!important
}

.site-header
{
    height:78px;
    background:var(--navy);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(18px,5vw,70px);
    border-bottom:1px solid #2d4350
}

.brand
{
    display:flex;
    gap:11px;
    align-items:center
}

.mark
{
    color:#e1c27a;
    font-size:24px
}

.brand-logo
{
    height:40px;
    width:auto;
    max-width:52px;
    object-fit:contain;
    display:block
}

.brand b
{
    display:block;
    font:700 14px "Libre Baskerville",serif
}

.brand small
{
    display:block;
    color:#b9c6ce;
    font-size:10px;
    letter-spacing:.08em;
    margin-top:3px
}

.site-header nav
{
    display:flex;
    gap:24px;
    font-size:13px;
    color:#cbd4d9
}

.site-header nav a
{
    padding:29px 0;
    border-bottom:2px solid transparent
}

.site-header nav a.active
{
    color:#fff;
    border-color:var(--gold)
}

.hero
{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:linear-gradient(120deg,var(--navy),var(--petrol));
    color:#fff;
    padding:48px clamp(20px,7vw,105px)
}

.hero>*{position:relative;z-index:1}

.hero-turnos::before
{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:min(50%,680px);
    background:url("../assets/rezado/rezado-01.jpg") center 42%/cover no-repeat;
    opacity:.4;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 42%);
    pointer-events:none;
    z-index:0
}

/* Login compacto sobre foto (cristal oscuro, sin bloque blanco) */
.access-shell
{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    width:min(1180px,calc(100% - 40px));
    margin:0 auto 45px;
    padding:48px clamp(20px,4vw,48px) 56px;
    border-radius:9px;
    background:
      linear-gradient(180deg, rgba(4,17,26,.22), rgba(4,17,26,.35)),
      url("../assets/rezado/rezado-13.jpg") center 45%/cover no-repeat,
      linear-gradient(120deg,var(--navy),var(--petrol));
}
.access-overlay
{
    position:relative;
    z-index:1;
    background:rgba(4,17,26,.22);
    border:1px solid rgba(214,181,106,.25);
    border-radius:12px;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    box-shadow:0 18px 48px rgba(0,0,0,.28);
    padding:28px;
    color:#fff;
}
.access-overlay .center h2{color:#fff}
.access-overlay .center p{color:#c9d4d9}
.access-overlay .choices button
{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.22);
    border-radius:7px;
    padding:18px;
    color:#fff;
    text-align:left;
    cursor:pointer;
}
.access-overlay .choices button:hover
{
    border-color:var(--gold);
    transform:translateY(-2px);
}
.access-overlay .choices span{color:#c9d4d9}

.hero h1
{
    font:700 clamp(34px,5vw,56px)/1.08 "Libre Baskerville",serif;
    margin:10px 0
}

.hero p
{
    color:#c9d4d9;
    margin:0;
    max-width:650px
}

.hero small,.heading>small,.access small,.account-head small,.cart small,.paygrid small
{
    font-size:10px;
    letter-spacing:.18em;
    color:var(--gold);
    font-weight:700
}

.shell
{
    width:min(1180px,calc(100% - 40px));
    margin:45px auto
}

.card
{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:9px;
    box-shadow:0 14px 42px #07131f12
}

.access
{
    padding:45px
}

.center
{
    text-align:center
}

.center h2,.account-head h2,.heading h2
{
    font:700 27px "Libre Baskerville",serif;
    margin:8px 0
}

/* Tinta oscura dentro de tarjetas blancas (el body es oscuro) */
.card .center h2,.card .heading h2,.card .cart-title h3,
.card .tile b,.card .total,.card .total b,
.card .request b,.card .request strong,
.card .pay b,.card .bank p,.card .upload,
.card .summary-person,.card .summary-person b,
.card .line,.card .summary-total,.card .summary-total b,
.card .constancia,.card .constancia h3,
.card .constancia-grid strong,.card td
{
    color:var(--ink)
}

.center p,.heading p
{
    color:var(--muted);
    line-height:1.7
}

.choices
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    max-width:700px;
    margin:30px auto 0
}

.choices button
{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:7px;
    padding:25px;
    text-align:left;
    cursor:pointer
}

.choices button:hover
{
    border-color:var(--gold);
    transform:translateY(-2px)
}

.choices i
{
    display:block;
    color:var(--gold);
    font-size:24px;
    font-style:normal;
    margin-bottom:20px
}

.choices b,.choices span
{
    display:block
}

.choices span
{
    font-size:11px;
    color:var(--muted);
    margin-top:6px
}

.account-head
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:20px
}

.account-head>div
{
    min-width:0
}

.account-actions
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-bottom:22px
}

.tile
{
    border:1px solid var(--line);
    background:#fff;
    border-radius:7px;
    padding:22px;
    text-align:left;
    cursor:pointer
}

.tile.primary
{
    background:var(--navy);
    color:#fff
}

.tile small
{
    color:var(--gold);
    font-weight:700
}

.tile b
{
    display:block;
    font:700 19px "Libre Baskerville",serif;
    margin:8px 0;
    color:var(--navy)
}

.tile.primary b
{
    color:#fff
}

.tile span
{
    font-size:11px;
    color:var(--muted)
}

.tile.primary span
{
    color:#bcc9cf
}

.workspace
{
    display:grid;
    grid-template-columns:minmax(0,1fr) 520px;
    gap:20px
}

.form
{
    padding:28px;
    margin-top:20px
}

.form label
{
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:17px
}

.form select
{
    display:block;
    width:100%;
    height:46px;
    margin-top:7px;
    border:1px solid var(--line);
    border-radius:5px;
    background:#fff;
    color:var(--ink);
    padding:0 10px
}

.gold
{
    width:100%;
    height:46px;
    border:0;
    border-radius:5px;
    background:var(--gold);
    color:var(--navy);
    font-weight:700;
    cursor:pointer
}

.help
{
    font-size:10px;
    line-height:1.65;
    color:var(--muted)
}

.cart
{
    padding:25px;
    height:max-content
}

.cart-title
{
    display:flex;
    justify-content:space-between
}

.cart-title h3
{
    font:700 21px "Libre Baskerville",serif;
    margin:7px 0
}

.cart-title em
{
    font-style:normal;
    background:var(--gold);
    color:var(--navy);
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:800
}

.table-wrap
{
    overflow:auto;
    margin-top:20px
}

table
{
    width:100%;
    border-collapse:collapse;
    font-size:11px
}

th
{
    text-align:left;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#7b858b;
    border-bottom:1px solid var(--line);
    padding:10px 7px
}

td
{
    padding:12px 7px;
    border-bottom:1px solid #edf0f1;
    vertical-align:top
}

td small
{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-top:3px
}

.empty
{
    text-align:center;
    color:var(--muted);
    padding:30px
}

.remove
{
    border:0;
    border-radius:50%;
    background:#f3eeee;
    color:#933b3b;
    width:25px;
    height:25px;
    cursor:pointer
}

.total
{
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:16px;
    margin-top:15px
}

.total b
{
    font-size:19px
}

.dark,.ghost
{
    border-radius:5px;
    font-weight:700;
    cursor:pointer
}

.dark
{
    border:0;
    background:var(--navy);
    color:#fff;
    padding:13px 18px;
    min-height:44px
}

.dark:disabled
{
    opacity:.4
}

.cart>.dark
{
    width:100%;
    margin-top:18px
}

.ghost
{
    background:transparent;
    border:1px solid #ccd4d8;
    padding:9px 14px
}

.full
{
    padding:28px
}

.request
{
    border:1px solid var(--line);
    padding:15px;
    border-radius:7px;
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:20px;
    align-items:center;
    margin-top:9px
}

.request strong,.request small
{
    display:block
}

.request small
{
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}

.request-deadline
{
    color:#80642e!important;
    font-weight:700
}

.modal .upload
{
    margin-top:10px
}

.request-btn
{
    margin-top:8px;
    padding:6px 10px;
    font-size:10px;
    white-space:nowrap
}

.paygrid
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.paygrid>.full
{
    padding:28px
}

.pay
{
    display:flex;
    gap:10px;
    border:1px solid var(--line);
    padding:15px;
    border-radius:6px;
    margin:10px 0;
    cursor:pointer
}

.pay b,.pay small
{
    display:block
}

.pay small
{
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}

.paydetail
{
    margin-top:15px
}

.pay-group
{
    border:0;
    margin:0;
    padding:0;
    display:grid;
    gap:2px
}

.pay-group legend
{
    font-size:10px;
    letter-spacing:.18em;
    color:var(--gold);
    font-weight:700;
    text-transform:uppercase;
    padding:0
}

.vh
{
    position:absolute!important;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap
}

.bank,.notice
{
    background:#f3f5f5;
    border-left:3px solid var(--gold);
    padding:17px;
    font-size:12px
}

.bank p
{
    margin:9px 0
}

.upload
{
    display:block;
    border:1px dashed #b9c3c8;
    border-radius:6px;
    padding:16px;
    margin-top:12px;
    font-weight:700;
    font-size:11px
}

.upload input
{
    display:block;
    margin-top:9px
}

.upload small
{
    display:block!important;
    margin-top:7px
}

.actions
{
    display:flex;
    justify-content:flex-end;
    gap:9px;
    margin-top:22px
}

.asbutton
{
    display:inline-block
}

.overlay
{
    position:fixed;
    inset:0;
    background:#030b11bb;
    z-index:20;
    display:grid;
    place-items:center;
    padding:20px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
}

.modal
{
    position:relative;
    background:#fff;
    color:var(--ink);
    width:min(500px,100%);
    max-height:min(92dvh,100%);
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:auto;
    padding:32px;
    border-radius:9px;
    box-shadow:0 30px 80px #0005
}

.close
{
    position:absolute;
    right:13px;
    top:10px;
    border:0;
    background:transparent;
    font-size:25px;
    color:#667
}

.modal h2
{
    font:700 27px "Libre Baskerville",serif
}

.modal form label
{
    display:block;
    font-size:11px;
    font-weight:700;
    margin:14px 0
}

.modal input
{
    width:100%;
    height:43px;
    margin-top:6px;
    border:1px solid var(--line);
    border-radius:5px;
    padding:0 10px;
    color:var(--ink);
    background:#fff
}

.modal input::placeholder,.form select:invalid{color:#8a979e}

.pass-toggle
{
    background:#f3f5f5;
    color:var(--ink)
}

.modal form .dark
{
    width:100%;
    margin-top:8px
}

.modal .help
{
    margin-top:16px
}

.ok
{
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#e7f0e8;
    color:#3c6b44;
    font-size:26px
}

.summary
{
    padding-top:5px
}

.summary-person
{
    background:#f3f5f5;
    padding:14px;
    border-radius:5px
}

.summary-person b,.summary-person span
{
    display:block
}

.summary-person span
{
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}

.line
{
    display:flex;
    justify-content:space-between;
    padding:13px 0;
    border-bottom:1px solid #edf0f1
}

.line small
{
    display:block!important;
    font-size:9px!important;
    color:var(--muted)!important;
    margin-top:3px
}

.summary-total
{
    display:flex;
    justify-content:space-between;
    padding-top:15px;
    margin-top:3px
}

.summary-total b
{
    font-size:19px
}

@media(max-width:900px)
{
    .workspace,.paygrid
    {
        grid-template-columns:1fr
    }
    .site-header
    {
        height:auto;
        min-height:78px;
        flex-wrap:wrap;
        gap:10px;
        padding-top:12px;
        padding-bottom:12px
    }
    .site-header nav
    {
        gap:16px;
        font-size:12px
    }
    .site-header nav a
    {
        padding:10px 0
    }
}

/* ---------------- MOVIMIENTO ---------------- */

[data-reveal]
{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)
}

[data-reveal].visible
{
    opacity:1;
    transform:translateY(0)
}

.stats [data-reveal]:nth-child(2) { transition-delay:.06s }
.stats [data-reveal]:nth-child(3) { transition-delay:.12s }
.stats [data-reveal]:nth-child(4) { transition-delay:.18s }
.stats [data-reveal]:nth-child(5) { transition-delay:.24s }
.account-actions [data-reveal]:nth-child(2) { transition-delay:.08s }

.site-header nav a,
.card,
.acard,
.stats article,
.tile,
.choices button,
.pay,
.request,
.table-btn,
.dark,
.ghost,
.gold
{
    transition:background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease
}

.card:hover,
.acard:hover,
.stats article:hover
{
    border-color:rgba(214,181,106,.32);
    box-shadow:0 12px 34px #0000004d
}

.tile:hover,
.pay:hover,
.request:hover
{
    border-color:rgba(214,181,106,.45)
}

.dark:not(:disabled):hover,
.gold:not(:disabled):hover,
.ghost:hover
{
    transform:translateY(-1px)
}

@keyframes overlayIn
{
    from { opacity:0 }
    to { opacity:1 }
}

@keyframes modalIn
{
    from { opacity:0; transform:translateY(14px) scale(.985) }
    to { opacity:1; transform:translateY(0) scale(1) }
}

.overlay:not(.hidden)
{
    animation:overlayIn .2s ease both
}

.overlay:not(.hidden) .modal
{
    animation:modalIn .3s cubic-bezier(.2,.8,.2,1) both
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible
{
    outline:2px solid var(--gold);
    outline-offset:2px
}

@media(prefers-reduced-motion:reduce)
{
    *
    {
        transition:none!important;
        animation:none!important
    }
    html
    {
        scroll-behavior:auto
    }
    [data-reveal]
    {
        opacity:1!important;
        transform:none!important
    }
    .choices button:hover,
    .access-overlay .choices button:hover,
    .dark:not(:disabled):hover,
    .gold:not(:disabled):hover,
    .ghost:hover
    {
        transform:none
    }
}

@media(max-width:650px)
{
    .choices,.account-actions
    {
        grid-template-columns:1fr
    }
    .account-head
    {
        flex-direction:column;
        align-items:flex-start;
        gap:12px
    }
    .account-head .ghost
    {
        width:100%
    }
    .hero-turnos::before
    {
        width:68%;
        opacity:.26;
        -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);
        mask-image:linear-gradient(90deg,transparent 0%,#000 55%)
    }
    .shell
    {
        width:calc(100% - 24px)
    }
    .access-shell
    {
        width:calc(100% - 24px);
        padding:32px 16px 40px;
    }
    .access-overlay{padding:20px}
    .access,.full,.form,.cart,.paygrid>.full
    {
        padding:21px
    }
    .request
    {
        grid-template-columns:1fr
    }
    .hero
    {
        padding:55px 20px
    }
}

/* Auth nombre/apellido + responsive móvil */
.account-sub
{
    color:#aebcc1;
    font-size:12px;
    margin:6px 0 0
}

.form-error
{
    background:#f6e5e5;
    color:#893b3b;
    font-size:12px;
    font-weight:600;
    border-radius:5px;
    padding:10px 12px;
    margin:0 0 6px
}

.pass-wrap
{
    display:flex;
    gap:8px;
    align-items:center
}

.pass-wrap input
{
    flex:1
}

.pass-toggle
{
    border:1px solid var(--line);
    background:#f3f5f5;
    border-radius:5px;
    padding:0 12px;
    height:43px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap
}

.modal input,.form select,.filters input,.filters select
{
    min-height:48px
}

#confirm
{
    min-height:52px;
    font-size:14px
}

/* Constancia + QR (pago en efectivo / boleta y transferencia) */
.modal.wide
{
    width:min(560px,100%)
}

.constancia
{
    border:1px dashed #b9c3c8;
    border-radius:8px;
    padding:20px;
    margin:16px 0;
    background:#fbfcfc
}

.constancia h3
{
    font-size:22px;
    letter-spacing:.04em;
    margin:6px 0 12px;
    word-break:break-all
}

.constancia img
{
    display:block;
    margin:0 auto;
    border:1px solid var(--line);
    border-radius:6px;
    background:#fff;
    padding:8px
}

.qr-id
{
    font-size:11px;
    color:var(--muted);
    text-align:center;
    max-width:340px;
    margin:10px auto 0;
    line-height:1.6
}

.constancia-grid
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
    text-align:left
}

.constancia-grid div
{
    background:#f3f5f5;
    border-radius:5px;
    padding:10px 12px
}

.constancia-grid span
{
    display:block;
    font-size:9px;
    letter-spacing:.12em;
    color:var(--muted);
    text-transform:uppercase
}

.constancia-grid strong
{
    display:block;
    font-size:13px;
    margin-top:4px
}

@media(max-width:650px)
{
    .constancia-grid
    {
        grid-template-columns:1fr
    }
    .overlay
    {
        padding:12px;
        align-items:flex-end
    }
    .modal
    {
        width:100%;
        padding:24px 20px
    }
    #confirm
    {
        position:sticky;
        bottom:0
    }
}

@media print
{
    @page
    {
        size:letter;
        margin:12mm
    }
    body
    {
        background:#fff!important
    }
    /* Solo se imprime la constancia: una página, un QR. */
    body>:not(.overlay)
    {
        display:none!important
    }
    .overlay
    {
        position:static!important;
        display:block!important;
        background:none!important;
        padding:0!important;
        overflow:visible!important
    }
    .overlay.hidden
    {
        display:none!important
    }
    .overlay .modal
    {
        box-shadow:none!important;
        width:100%!important;
        max-width:100%!important;
        max-height:none!important;
        overflow:visible!important;
        padding:0!important
    }
    .overlay .modal>:not(#constancia)
    {
        display:none!important
    }
    #constancia .actions
    {
        display:none!important
    }
    #constanciaPrint
    {
        border:2px solid #000;
        margin:0;
        break-inside:avoid;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact
    }
    .constancia img
    {
        width:180px;
        height:180px
    }
}

/* Enlace de "olvidé mi contraseña" */
.forgot-link
{
    display:inline-block;
    margin-top:14px;
    color:var(--gold);
    font-size:12px;
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    letter-spacing:.02em
}

.forgot-link:hover
{
    text-decoration:underline
}