/* Estilos exclusivos de CONTACTO. */
body.contact-page { display:flex; flex-direction:column; height:auto; min-height:100dvh; background-attachment:fixed; background-size:cover; background-position:center center; }
.contact-page .contact-main { display:block; min-height:auto; width:min(1120px,84%); padding-block:44px; }
.contact-panel { --contact-text: #e0d6c7; position:relative; padding:28px 32px 48px; border:1px solid #b6a58b; border-radius:3px; background:rgba(7,16,25,.86); box-shadow:0 18px 50px rgba(0,0,0,.3); text-align:center; }
.contact-panel::before { content:""; position:absolute; inset:5px; border:1px solid var(--line); pointer-events:none; }
.contact-mascot { display:block; width:110px; height:140px; object-fit:contain; margin:0 auto 22px; animation:mascot-float 6s ease-in-out infinite; }
@keyframes mascot-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.contact-panel .eyebrow { justify-content:center; letter-spacing:1.4px; margin-bottom:14px; }
.contact-panel .eyebrow::after { content:""; width:27px; height:1px; background:var(--coral); }
.contact-introduction h1 { font-size:clamp(38px,4.5vw,64px); line-height:1.1; letter-spacing:-1px; }
.contact-intro { max-width:650px; margin:14px auto 26px; color:#e0d6c7; font-size:17px; line-height:1.35; font-weight: 400; }
.email-card { display:flex; align-items:center; justify-content:center; gap:24px; width:min(100%,650px); margin:0 auto 22px; padding:20px 24px; border:1px solid var(--line); border-radius:7px; background:rgba(7,16,25,.6); text-align:left; transition:background-color 200ms ease,border-color 200ms ease; }
.email-card:hover,.social-card[href]:hover { border-color:var(--coral); background-color:#111a23; }
.email-card svg { width:42px; height:42px; flex-shrink:0; stroke:var(--coral); stroke-width:1.6; fill:none; }
.email-card strong { display:block; font-size:clamp(19px,2vw,28px); overflow-wrap:anywhere; }
.email-card small,.social-card small { display:block; color:var(--muted); margin-top:5px; font-size:14px; line-height:1.4; }
.social-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.social-card { display:flex; align-items:center; gap:15px; min-width:0; padding:20px; text-align:left; border:1px solid var(--line); border-radius:7px; background:rgba(7,16,25,.65); transition:background-color 200ms ease,border-color 200ms ease; }
.social-card strong { font-size:18px; }
.social-icon { display:grid; place-items:center; color:white; flex:0 0 42px; height:42px; border-radius:10px; }
.social-icon svg { width:32px; height:32px; stroke:currentColor; stroke-width:1.7; fill:none; }
.youtube { background:#ff0000; border-radius:50%; }
.instagram { background:radial-gradient(circle at 25% 105%,#ffd36a 0%,#f15a37 35%,#bb268e 65%,#6b40bb 100%); }
.itchio { background:#fa5c5c; border-radius:7px; }
.steam { background:linear-gradient(145deg,#171a3d,#096591); border-radius:50%; }
.contact-rule { display:flex; align-items:center; gap:10px; margin-block:34px; height:8px; }
.contact-rule::before,.contact-rule::after { content:""; flex:1; height:1px; background:var(--line); }
.contact-rule span { width:8px; height:8px; border:1px solid #cfbfa4; transform:rotate(45deg); }
.contact-news h2 { font-size:clamp(26px,2.5vw,36px); line-height:1.25; max-width:none; letter-spacing:0; }
.contact-news > p:not(.eyebrow) { color:#e0d6c7; font-size:17px; line-height:1.35; font-weight: 400; margin:12px 0 26px; }
.subscribe-row { display:flex; align-items:stretch; gap:12px; max-width:790px; margin-inline:auto; }
.email-field { height:54px; display:flex; align-items:center; gap:18px; flex:1; min-width:0; border:1px solid var(--line); border-radius:3px 0 0 3px; background:rgba(7,16,25,.6); padding:0 20px; }
.email-field svg { width:24px; height:24px; flex-shrink:0; stroke:#aaa89e; stroke-width:1.5; fill:none; }
.email-field input { min-width:0; flex:1; width:0; padding:16px 0; background:transparent; color:var(--ivory); border:0; font:17px var(--serif); }
.subscribe-row .button { height:54px; flex-shrink:0; min-height:54px; padding:15px 30px; font-size:13px; cursor:default; }
.subscribe-row .button:hover { --button-start:#ff6b61; --button-end:#ff6b61; background-color:#ff6b61; border-color:#ff6b61; }
.email-field:focus-within { outline:2px solid var(--ivory); outline-offset:3px; }
.email-field input:focus { outline:none; }
@media(max-width:1000px) { .social-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) {
 body.contact-page { background-attachment:scroll; background-size:auto 100dvh; background-position:center top; }
 .contact-page .contact-main { width:94%; padding-block:24px; }
 .contact-panel { padding:26px 18px 32px; }
 .contact-mascot { width:90px; height:112px; }
 .contact-intro,.contact-news > p:not(.eyebrow) { font-size:16px; }
 .email-card { gap:12px; padding:18px 12px; }
 .email-card svg { width:28px; height:28px; }
 .email-card strong { font-size:18px; }
 .social-card { padding:16px 12px; gap:10px; }
 .social-icon { flex-basis:32px; height:32px; }
 .social-icon svg { width:26px; height:26px; }
 .social-card strong { font-size:16px; }
 .social-card small { font-size:12px; }
 .subscribe-row { flex-direction:column; gap:10px; }
 .email-field { border-radius:3px; }
}
@media(max-width:360px) { .social-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .contact-mascot { animation:none; } }

/* Estado discreto del envío; no cambia el campo ni las dimensiones del botón. */
#subscription-status { max-width:790px; margin:12px auto 0; font-size:14px; line-height:1.5; color:var(--muted); }
#subscription-status[data-state="success"] { color:var(--ivory); }
#subscription-status[data-state="error"] { color:var(--coral); }
#subscription-form[aria-busy="true"] button { cursor:wait; }