@font-face{font-family:Liberator;src:url(../fonts/Liberator-Heavy.otf);font-weight:900}
@font-face{font-family:"Roboto Condensed";src:url(../fonts/RobotoCondensed-VariableFont_wght.ttf);font-weight:100 900}

/* 1rem = 10px del diseño de 1440x900; js/app.js recalcula el tamaño según la pantalla */
html{font-size:min(.6944vw,1.1111vh)}
:root{--red:#b8143c;--red-d:#9a1032;--cream:#fefdf9;--ink:#3a1519;--line:#dcc9d0;--muted:#8d7a7f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;overscroll-behavior:none}
body{font-family:"Roboto Condensed",system-ui,sans-serif;font-size:2.2rem;color:var(--ink);user-select:none;-webkit-user-select:none}
input{user-select:text;-webkit-user-select:text}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}

.view{position:fixed;inset:0;display:none}
.view.active{display:block}
#view-admin.active{animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes enter-up{from{opacity:0;transform:translateY(2.4rem)}to{opacity:1;transform:none}}
@keyframes enter-side{from{opacity:0;transform:translateX(-3.2rem)}to{opacity:1;transform:none}}
@keyframes enter-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}

/* Contenido de inicio, registro y gracias: entra al mostrar cada pantalla */
#view-home.active .logo{animation:enter-up .7s cubic-bezier(.16,1,.3,1) both}
#view-home.active .frase{animation:enter-up .75s cubic-bezier(.16,1,.3,1) .12s both}
#view-home.active .btn{animation:enter-up .75s cubic-bezier(.16,1,.3,1) .24s both}
#view-form.active .side-top .logo{animation:enter-up .65s cubic-bezier(.16,1,.3,1) both}
#view-form.active .side-top .frase{animation:enter-up .7s cubic-bezier(.16,1,.3,1) .1s both}
#view-form.active .side-img{animation:fade .8s ease .12s both}
#view-form.active .form-wrap h1{animation:enter-up .65s cubic-bezier(.16,1,.3,1) .06s both}
#view-form.active .form-wrap .lead{animation:enter-up .65s cubic-bezier(.16,1,.3,1) .14s both}
#view-form.active #form>:nth-child(1){animation:enter-up .65s cubic-bezier(.16,1,.3,1) .22s both}
#view-form.active #form>:nth-child(2){animation:enter-up .65s cubic-bezier(.16,1,.3,1) .3s both}
#view-form.active #form>:nth-child(3){animation:enter-up .65s cubic-bezier(.16,1,.3,1) .38s both}
#view-form.active #form>:nth-child(4){animation:enter-up .65s cubic-bezier(.16,1,.3,1) .46s both}
#view-form.active #form>:nth-child(5){animation:enter-up .65s cubic-bezier(.16,1,.3,1) .54s both}
#view-thanks.active .cow{animation:enter-side .9s cubic-bezier(.16,1,.3,1) both}
#view-thanks.active .check-circle{animation:enter-pop .6s cubic-bezier(.16,1,.3,1) .1s both}
#view-thanks.active h1{animation:enter-up .7s cubic-bezier(.16,1,.3,1) .2s both}
#view-thanks.active p{animation:enter-up .7s cubic-bezier(.16,1,.3,1) .3s both}
#view-thanks.active .btn{animation:enter-up .7s cubic-bezier(.16,1,.3,1) .4s both}
@media (prefers-reduced-motion:reduce){
  #view-home.active .logo,#view-home.active .frase,#view-home.active .btn,
  #view-form.active .side-top .logo,#view-form.active .side-top .frase,#view-form.active .side-img,
  #view-form.active .form-wrap h1,#view-form.active .form-wrap .lead,#view-form.active #form>*,
  #view-thanks.active .cow,#view-thanks.active .check-circle,#view-thanks.active h1,
  #view-thanks.active p,#view-thanks.active .btn{animation:none}
}

/* Botones */
.btn{display:flex;align-items:center;justify-content:space-between;border:0;border-radius:1.2rem;height:7.6rem;padding:0 2.8rem;font-family:Liberator,sans-serif;font-weight:900;font-size:2.4rem;text-transform:uppercase;letter-spacing:.02em}
.btn .arrow{width:3.2rem;height:3.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-white{background:#fff;color:var(--red)}
.btn-red{background:var(--red);color:#fff}
.btn-red:active{background:var(--red-d)}
.btn-line{background:transparent;color:var(--red);border:.2rem solid var(--red)}
.btn.small{height:5.2rem;font-size:1.9rem;padding:0 2.6rem;gap:1.6rem;justify-content:center}
.btn:disabled{opacity:.6}

/* 1. Inicio */
#view-home{background:#8a4a1a url(../img/bg1.jpg) center/cover}
.home-inner{position:absolute;inset:5rem 0 6.9rem 8rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
#view-home .logo{width:16.7rem;margin-left:-.6rem}
#view-home .frase{width:49rem;margin:5.5rem 0 0 -.6rem}
#view-home .btn{width:36rem}

/* 2. Formulario */
#view-form.active{display:grid;grid-template-columns:1fr 2fr;background:var(--cream)}
.side{display:flex;flex-direction:column;min-height:0}
.side-top{flex:0 0 77.2%;background:#000;padding:5.2rem 0 0 6.5rem}
.side-top .logo{width:15.6rem}
.side-top .frase{width:33.5rem;margin:8.7rem 0 0 -.1rem}
.side-img{flex:1;background:url(../img/bg1.jpg) center 45%/cover}
.form-wrap{display:flex;flex-direction:column;padding:7.4rem 10.4rem 5.4rem 7.8rem;overflow-y:auto;min-height:0}
h1,h2{font-family:Liberator,sans-serif;font-weight:900;color:var(--red);margin:0;text-transform:uppercase}
.form-wrap h1{font-size:6.4rem;line-height:1.1}
.lead{margin:2.6rem 0 4.6rem;font-size:2.4rem;color:var(--ink)}
#form{display:flex;flex-direction:column;flex:1}
.field{margin-bottom:3.4rem;position:relative}
.field label{display:block;font-size:2.2rem;line-height:2.6rem;margin-bottom:1.2rem}
.field input:not([type=checkbox]){display:block;width:100%;height:7.8rem;padding:0 2.2rem;font:400 2.2rem "Roboto Condensed",sans-serif;color:var(--ink);background:#fff;border:.2rem solid var(--line);border-radius:1rem;outline:none}
.field input::placeholder{color:#a8969b}
.field input:focus{border-color:var(--red)}
.field.bad input:not([type=checkbox]){border-color:#d4204a;background:#fff8f9}
.err{display:none;position:absolute;left:.4rem;bottom:-2.7rem;font-size:1.8rem;color:#c8143f}
.field.bad .err{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem}
.field.terms{display:flex;align-items:center;gap:1.6rem;margin-top:0}
.terms-text{font-size:2.2rem}
.terms-text a{color:var(--red);text-decoration:none;border-bottom:.2rem solid #e5a0b2;padding-bottom:.1rem}
.check{position:relative;display:block;width:3.2rem;height:3.2rem;margin:0}
.check input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0}
.check .box{display:grid;place-items:center;width:100%;height:100%;border:.2rem solid var(--red);border-radius:.6rem;background:#fff}
.check .box svg{width:2.4rem;height:2.4rem;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.check input:checked+.box{background:var(--red)}
.check input:checked+.box svg{opacity:1}
.field.terms.bad .box{border-color:#d4204a;box-shadow:0 0 0 .3rem #f6c8d3}
.field.terms .err{left:5rem;bottom:-2.6rem}
.actions{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:2rem}
.back{background:none;border:0;color:var(--muted);font-size:2.2rem;padding:1.6rem 1.6rem 1.6rem 0}
.back span{margin-right:.4rem}
#btn-submit{width:34.6rem;height:7.8rem}

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(36,8,14,.58);display:grid;place-items:center;z-index:50;animation:fade .2s ease}
.modal{position:relative;width:84rem;max-width:94vw;min-height:65.8rem;max-height:92vh;background:var(--cream);border-radius:2.4rem;padding:5rem 5rem 4rem;display:flex;flex-direction:column}
.modal h2{font-size:4.2rem;line-height:1.2}
.modal .x{position:absolute;top:3.6rem;right:3.6rem;width:4.4rem;height:4.4rem;background:none;border:0;padding:.8rem;color:var(--red)}
.modal .x svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.terms-body{flex:1;overflow-y:auto;margin:6.6rem 0 2.4rem;padding-right:9rem;font-size:2.2rem;line-height:3.8rem;color:#7a5f65;white-space:pre-line;user-select:text}
.terms-body .t{display:block;font-size:2.4rem;line-height:3rem;color:var(--ink);margin-bottom:1.6rem}
.modal>.btn{align-self:flex-end;width:27.2rem;height:7.4rem}
.modal.pin{width:52rem;min-height:0;gap:1.4rem}
.modal.pin .lead{margin:0}
.modal.pin input{height:7.4rem;font-size:4rem;letter-spacing:1rem;text-align:center;border:.2rem solid var(--line);border-radius:1rem;outline:none;background:#fff}
.modal.pin input:focus{border-color:var(--red)}
.modal.pin .err{position:static;display:block;min-height:2.4rem}
.row{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.modal.pin .row{justify-content:flex-end;margin-top:1rem}

/* 3. Gracias */
#view-thanks{background:var(--red);overflow:hidden}
#view-thanks .cow{position:absolute;max-width:none;width:239.8rem;left:-168.7rem;top:3.1rem}
.thanks-body{position:absolute;left:42.4%;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;color:#fff}
.check-circle{margin-top:16.8rem;width:20rem;height:20rem;border-radius:50%;background:#fff;display:grid;place-items:center}
.check-circle svg{width:11rem;height:11rem;fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.thanks-body h1{color:#fff;font-size:12.6rem;line-height:1;margin-top:5.6rem;letter-spacing:.01em}
.thanks-body p{margin:-.4rem 0 0;font-size:3.6rem;font-weight:300}
.thanks-body .btn{position:absolute;bottom:5.6rem;width:41.2rem;height:7.6rem;font-size:2.2rem}

/* 4. Administrador */
#view-admin{background:var(--cream);overflow-y:auto}
.adm-top{display:flex;align-items:center;gap:2.4rem;background:#000;padding:1.6rem 4rem;position:sticky;top:0;z-index:5}
.adm-top img{height:6rem}
.adm-top h1{color:#fff;font-size:3.4rem;flex:1}
.adm-body{max-width:130rem;margin:0 auto;padding:3.2rem 4rem 6rem}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:2.4rem}
.tile{background:var(--red);color:#fff;border-radius:1.6rem;padding:2rem 2.6rem}
.tile b{display:block;font:900 5.6rem/1 Liberator,sans-serif}
.tile span{font-size:2rem;opacity:.9}
.panel{background:#fff;border:.2rem solid var(--line);border-radius:1.6rem;padding:2.6rem;margin-bottom:2.4rem}
.panel h2{font-size:2.8rem;margin-bottom:1.6rem}
.panel .field{margin-bottom:2rem}
.panel .field input:not([type=checkbox]){height:6rem;font-size:2rem}
.panel .field label{font-size:2rem}
.muted{color:var(--muted);margin:0 0 1.6rem}
.search{width:100%;height:5.6rem;padding:0 2rem;font:400 2rem "Roboto Condensed";border:.2rem solid var(--line);border-radius:1rem;outline:none;margin-bottom:1.6rem}
.table-wrap{max-height:60rem;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:2rem}
th,td{text-align:left;padding:1.2rem 1.4rem;border-bottom:.1rem solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:1.7rem;position:sticky;top:0;background:#fff}
.st{font-weight:600}.st.pending{color:#b86b00}.st.synced{color:#1c7a3a}.st.error{color:#c8143f}

#toast{position:fixed;left:50%;bottom:4rem;transform:translateX(-50%);background:#2a0d12;color:#fff;padding:1.6rem 3rem;border-radius:1.2rem;font-size:2.2rem;z-index:99;max-width:90vw}