/* EPIC ATLAS — promo.epicsurfaceflow.com
   Dark-luxury editorial, brand del libro: Playfair Display + Inter,
   negro cálido / marfil / dorado. */

:root{
  --ink:#0E0C09;
  --ink-2:#161210;
  --ivory:#F5EFE2;
  --ivory-dim:#CFC6B2;
  --muted:#A39B88;
  --gold:#D6B660;
  --gold-bright:#E6CE82;
  --serif:'Playfair Display',serif;
  --sans:'Inter',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  overflow-x:hidden;
}

/* ---------- collage ---------- */
.collage{
  position:fixed;inset:0;z-index:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:3px;
  background:var(--ink);
}
.tile{
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  animation:tileIn 1.4s cubic-bezier(.16,1,.3,1) forwards,
            drift 26s ease-in-out infinite alternate;
}
@keyframes tileIn{to{opacity:1;transform:scale(1)}}
@keyframes drift{
  from{background-position:48% 48%}
  to{background-position:52% 52%}
}
.t1{animation-delay:.05s,0s}  .t2{animation-delay:.15s,2s}
.t3{animation-delay:.25s,4s}  .t4{animation-delay:.35s,6s}
.t5{animation-delay:.45s,1s}  .t6{animation-delay:.55s,3s}
.t7{animation-delay:.65s,5s}  .t8{animation-delay:.75s,7s}
.t9{animation-delay:.85s,2s}  .t10{animation-delay:.95s,4s}
.t11{animation-delay:1.05s,6s}.t12{animation-delay:1.15s,8s}

.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(14,12,9,.38) 0%, rgba(14,12,9,.72) 62%, rgba(14,12,9,.9) 100%),
    linear-gradient(180deg, rgba(14,12,9,.55) 0%, rgba(14,12,9,.25) 30%, rgba(14,12,9,.6) 100%);
}

/* ---------- layout ---------- */
.stage{
  position:relative;z-index:2;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:48px 20px 24px;
}

.card{
  position:relative;
  width:min(640px,100%);
  min-width:0;max-width:100%;
  overflow-wrap:break-word;
  background:rgba(14,12,9,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:56px 48px 44px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  opacity:0;transform:translateY(18px);
  animation:cardIn 1s .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes cardIn{to{opacity:1;transform:none}}
.frame{
  position:absolute;inset:12px;
  border:1px solid rgba(214,182,96,.38);
  pointer-events:none;
}
.frame::after{
  content:"";position:absolute;inset:5px;
  border:1px solid rgba(214,182,96,.16);
}

/* ---------- type ---------- */
.eyebrow{
  font:600 11px/1 var(--sans);
  letter-spacing:.42em;
  color:var(--gold);
  margin-bottom:26px;
}
.logo{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(44px,8vw,64px);
  line-height:.95;
  letter-spacing:.02em;
  color:var(--ivory);
}
.logo .italic{font-style:italic;font-weight:500;color:var(--gold-bright)}
.sub{
  margin-top:12px;
  font:600 10.5px/1 var(--sans);
  letter-spacing:.4em;
  color:var(--ivory-dim);
}
.rule{
  width:64px;height:2px;background:var(--gold);
  margin:28px auto;
}
.headline{
  font-family:var(--serif);
  font-style:italic;font-weight:500;
  font-size:clamp(22px,4vw,29px);
  line-height:1.3;
  color:var(--ivory);
}
.copy{
  margin:16px auto 0;
  max-width:46ch;
  font-size:14.5px;line-height:1.75;
  color:var(--muted);
}

/* ---------- form ---------- */
.form{
  margin-top:30px;
  display:flex;gap:10px;
  justify-content:center;
}
.input{
  flex:1 1 auto;min-width:0;max-width:320px;
  background:rgba(245,239,226,.06);
  border:1px solid rgba(214,182,96,.4);
  color:var(--ivory);
  font:500 14px/1 var(--sans);
  padding:16px 18px;
  outline:none;
  transition:border-color .25s, background .25s;
}
.input::placeholder{color:#7C7263}
.input:focus{
  border-color:var(--gold-bright);
  background:rgba(245,239,226,.1);
}
.btn{
  flex:0 0 auto;
  background:var(--gold);
  color:#171310;
  border:none;cursor:pointer;
  font:600 12px/1 var(--sans);
  letter-spacing:.16em;
  padding:16px 22px;
  transition:background .25s, transform .15s;
}
.btn:hover{background:var(--gold-bright)}
.btn:active{transform:scale(.97)}
.form-msg{
  margin-top:12px;
  font-size:12.5px;color:#E08A6D;
}
.fine{
  margin-top:16px;
  font-size:11.5px;line-height:1.6;
  color:#7C7263;
}

/* ---------- stats + footer ---------- */
.stats{
  margin-top:30px;
  display:flex;gap:14px;justify-content:center;align-items:center;
  font:600 10.5px/1 var(--sans);
  letter-spacing:.28em;
  color:var(--gold);
  flex-wrap:wrap;
}
.stats i{color:rgba(214,182,96,.5);font-style:normal}

.foot{
  margin-top:26px;
  display:flex;gap:12px;align-items:center;
  font:500 11px/1 var(--sans);
  letter-spacing:.08em;
  color:#8d8471;
  opacity:0;animation:cardIn 1s 1.1s forwards;
}
.foot a{color:#b3a98f;text-decoration:none}
.foot a:hover{color:var(--gold-bright)}
.foot i{font-style:normal;color:#5c5546}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .collage{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr)}
  .card{padding:44px 22px 36px}
  .eyebrow{font-size:10px;letter-spacing:.28em}
  .sub{font-size:10px;letter-spacing:.26em}
  .headline{font-size:21px}
  .stats{gap:10px;font-size:10px;letter-spacing:.18em}
  .foot{flex-wrap:wrap;justify-content:center;text-align:center}
  .form{flex-direction:column;align-items:stretch}
  .input{max-width:none}
  .btn{padding:16px}
  .desk{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tile,.card,.foot{animation:none;opacity:1;transform:none}
}