/*
Theme Name: AXEL RE - Próximamente (axelre_prox)
Theme URI: https://axelre.com
Author: AXEL RE
Description: Tema Coming Soon con toggle dark/light, formulario con SweetAlert, captcha dinámico y guardado en tabla personalizada.
Version: 1.7.0
License: GPL-2.0+
Text Domain: axelre-prox
*/

:root{
  --red:#c41e1e; --grey:#7c7e7f;
  --bg:#0e0f12; --card:rgba(255,255,255,.08); --card-border:rgba(255,255,255,.12);
  --ink:#f5f6f7; --muted:#cbd5e1; --input-bg:#111317; --input-bd:#2b2f33; --shadow:rgba(0,0,0,.38);
}
[data-theme="light"]{
  --bg:#f6f7f9; --card:#fff; --card-border:rgba(0,0,0,.06); --ink:#2e2e2e; --muted:#667085; --input-bg:#fff; --input-bd:#d0d5dd; --shadow:rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins','Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  transition: background-color .45s ease, color .45s ease;
}

.top-bar{height:6px;background:linear-gradient(90deg, var(--red), var(--grey));transition: background .45s ease}

.hero{position:relative;min-height:calc(100vh - 6px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(820px 420px at 20% -10%, color-mix(in oklab, var(--red) 22%, transparent) , transparent 60%),
    radial-gradient(940px 520px at 120% 0%, color-mix(in oklab, var(--grey) 25%, transparent) , transparent 60%);
  opacity:.35;transition: opacity .45s ease, background .45s ease;
}

.container{position:relative;max-width:1140px;width:100%;padding:72px 28px 40px}

.panel{margin:0 auto;max-width:980px;background:var(--card);border:1px solid var(--card-border);border-radius:28px;padding:48px 36px 36px;backdrop-filter:blur(8px);box-shadow:0 24px 60px var(--shadow);
  opacity:0; transform: translateY(8px) scale(.995);
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease;}
body.loaded .panel{opacity:1; transform:none}

.logo{width:min(70vw, 820px);height:auto;display:block;margin:0 auto 6px;filter: drop-shadow(0 12px 28px rgba(0,0,0,.25))}

.kicker{display:inline-block;letter-spacing:.28em;font-weight:700;font-size:16px;text-transform:uppercase;color:var(--ink);
  background:transparent;border:1px solid var(--card-border);padding:9px 16px;border-radius:999px;margin-bottom:22px; margin-left:auto; margin-right:auto;
  transition: color .45s ease, border-color .45s ease;}

.title{font-family:'Montserrat','Poppins',sans-serif;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  font-size:clamp(28px, 4.1vw, 48px);color:var(--ink);margin:2px 0 6px;transition: color .45s ease;}

.subtitle{font-size:clamp(16px, 2.0vw, 22px);line-height:1.7;color:var(--muted);margin:0 auto;max-width:900px;transition: color .45s ease;}

.divider{margin:16px auto 0;width:140px;height:2px;background:linear-gradient(90deg, var(--red), var(--grey));
  border-radius:2px;opacity:.9;transition: opacity .45s ease;}

.footer{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:13px;color:var(--muted);padding:0 12px;transition: color .45s ease;}

/* Toggle oscuro/claro + hover */
.theme-toggle{position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:8px;z-index:5}
.switch{position:relative;width:56px;height:30px;background:var(--card);border:1px solid var(--card-border);
  border-radius:999px;cursor:pointer;transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; box-shadow:0 2px 8px var(--shadow)}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.15);transition:transform .25s ease, background-color .25s ease}
body[data-theme="dark"] .switch::after{transform:translateX(26px)}
.theme-toggle .switch:hover{border-color: color-mix(in oklab, var(--red) 40%, var(--card-border)); box-shadow:0 6px 18px rgba(196,30,30,.28)}
body[data-theme="light"] .switch:hover::after{transform: translateX(0) scale(1.04)}
body[data-theme="dark"] .switch:hover::after{transform: translateX(26px) scale(1.04)}

/* Formularios */
input, button, select, textarea{font-family: inherit; font-size: 1rem;}
.notify-section{margin-top:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;text-align:left}
.notify-title{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(20px, 3.2vw, 34px);margin:0 0 10px;transition: color .45s ease;}
.notify-desc{font-size:16px;color:var(--muted);max-width:560px;transition: color .45s ease;}
.notify-form{display:grid;grid-template-columns:1fr;gap:12px;justify-items:end}
.notify-form input{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--input-bd);background:var(--input-bg);
  color:var(--ink);outline:none;transition: background-color .35s ease, color .35s ease, border-color .35s ease;}
.notify-form input:focus{border-color: var(--red);}
.row-inline{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
.captcha small{opacity:.8}

/* Botón con hover elegante */
.btn{position:relative;overflow:hidden;padding:12px 18px;background:var(--red);color:#fff;border:none;border-radius:12px;font-weight:700;cursor:pointer;
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease, background-color .35s ease;
  box-shadow:0 8px 18px rgba(196,30,30,.18);}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(196,30,30,.30);filter:saturate(110%)}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px rgba(196,30,30,.22)}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));opacity:0;transition:opacity .25s}
.btn:hover::before{opacity:.6}

/* SweetAlert2 */
.swal2-container{backdrop-filter: blur(2px)}
[data-theme="dark"] .swal2-container{ background: rgba(0,0,0,.55) }
.swal2-popup.swal2-axelre{
  border-radius: 18px;
  padding: 28px 26px 24px;
  background: var(--card);
  border:1px solid var(--card-border);
  box-shadow: 0 18px 60px var(--shadow);
  color: var(--ink);
  font-family:'Poppins','Montserrat',sans-serif;
}
[data-theme="dark"] .swal2-popup.swal2-axelre{
  background:#161a1f;
  border-color: rgba(255,255,255,.06);
}
.swal2-title.swal2-axelre-title{
  font-family:'Montserrat','Poppins',sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 8px 0 6px;
  color: var(--ink);
}
.swal2-html-container.swal2-axelre-text{
  color: var(--muted);
  margin: 0 0 8px;
  font-size: 16px;
}
.swal2-actions .swal2-axelre-btn{
  min-width:120px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--red);
  color:#fff;
  border:none;
  font-weight:700;
  box-shadow: 0 8px 18px rgba(196,30,30,.18);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}
.swal2-actions .swal2-axelre-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(196,30,30,.30);
  filter: saturate(110%);
}
.swal2-actions .swal2-axelre-btn:active{
  transform:none;
  box-shadow:0 6px 14px rgba(196,30,30,.22);
}

@media (max-width: 900px){
  .notify-section{grid-template-columns:1fr;gap:18px}
  .notify-form{justify-items:stretch}
}
@media (prefers-reduced-motion: reduce){
  *{transition: none !important}
}