/* Negro, rojo, blanco y café. Cambia los colores aquí. */
:root{
  --black:#000; --panel:#120c09; --text:#f6f1ec; --muted:#b9a592;
  --coffee:#3b2416; --mocha:#8a5a3b; --latte:#d9b48c; --line:#2b1d15; --edge:#4a3226;
  --red:#e01b2d; --red-l:#ff5a67;
  --display:"Bodoni Moda","Didot",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --tag:"Barlow Condensed","Arial Narrow",sans-serif;
}
:lang(ja){--display:"Noto Serif JP",serif;--sans:"Noto Sans JP",sans-serif;--tag:"Noto Sans JP",sans-serif}

*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;color:var(--text);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red-l);outline-offset:3px}
.w{max-width:74rem;margin:0 auto;padding-inline:1.75rem}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0}
a{color:inherit}

/* Botones: paralelogramos inclinados */
button,input,textarea,select{font:inherit}
button{font:italic 700 1rem var(--tag);text-transform:uppercase;letter-spacing:.04em;color:var(--text);background:var(--line);border:0;padding:.55rem 1.4rem;cursor:pointer;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);transition:background .2s,color .2s}
button:hover{background:var(--text);color:#000}
button[aria-pressed="true"],button.go{background:var(--red);color:#fff}
button.go:hover{background:#fff;color:#000}
button:disabled{opacity:.6;cursor:default}button:disabled:hover{background:var(--red);color:#fff}

input,textarea,select{width:100%;color:var(--text);background:#0b0705;border:1px solid var(--edge);border-radius:0;padding:.6rem .75rem;margin:0 0 .75rem}
input:focus,textarea:focus,select:focus{outline:2px solid var(--red);outline-offset:0}
select option{background:var(--panel)}
label{display:block;font:600 .85rem var(--sans);color:var(--muted);margin-bottom:.25rem}
.hp{position:absolute;left:-9999px}.state{color:var(--muted)}.err{color:var(--red-l)}

dialog{width:min(30rem,92vw);max-height:92vh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--edge);border-left:6px solid var(--red);border-radius:0;padding:1.75rem}
dialog::backdrop{background:rgba(0,0,0,.82)}

/* Fondo animado: puntos de semitono, franjas diagonales y rombos */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{position:absolute;display:block}
.bg .dots{inset:-30%;background:radial-gradient(circle,rgba(224,27,45,.3) 1.6px,transparent 2.2px) 0 0/24px 24px;transform:rotate(-14deg);animation:drift 50s linear infinite;-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000);mask-image:linear-gradient(100deg,transparent 30%,#000)}
.bg .s1,.bg .s2{left:-20vw;width:90vw}
.bg .s1{top:12vh;height:14vh;background:var(--red);opacity:.16;animation:sweep 16s ease-in-out infinite alternate}
.bg .s2{top:68vh;height:6vh;background:#fff;opacity:.07;animation:sweep 22s ease-in-out -8s infinite alternate-reverse}
.bg .d{width:2.2rem;height:2.2rem;border:2px solid var(--red);opacity:.5;transform:rotate(45deg);animation:float 9s ease-in-out infinite}
.bg .d1{left:8vw;top:30vh}.bg .d2{right:10vw;top:55vh;width:1.2rem;height:1.2rem;animation-delay:-3s}.bg .d3{left:46vw;top:85vh;animation-delay:-6s}
@keyframes drift{to{background-position:240px 240px}}
@keyframes sweep{from{transform:translateX(-12vw) skewX(-28deg)}to{transform:translateX(18vw) skewX(-28deg)}}
@keyframes float{50%{transform:translateY(-2rem) rotate(225deg)}}
@keyframes rise{from{opacity:0;transform:translateY(1.5rem)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}