/* Epic English — home. Una carta que se abre al bajar. */

:root {
  --night: #0d0810;
  --paper: #f1e9d6;
  --ink: #2a1710;
  --ink-soft: #5a4033;
  --red-ink: #92102a;
  --seal-red: #b3152f;
  --on-night-soft: #d9c7c2;
  --wood: #2b1a12;
  --kraft: #dcc79a;
  --kraft-dark: #c9b080;
  --lining: #6d1020;
  --flap: clamp(84px, 14vh, 128px);
  --gold: #e4b53a;
  --gold-hi: #f1c95a;

  --display: "Almendra", "Palatino Linotype", Palatino, Georgia, serif;
  --code: "Metamorphous", "Palatino Linotype", Palatino, Georgia, serif;
  --text: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(14px, 4vw, 40px);
  --noise-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.24  0 0 0 0 0.12  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-color: #5a4a9a var(--night);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--night);
  background-image: linear-gradient(180deg, #080818 0%, #120c2a 38%, #1d1033 68%, #2a0f2a 100%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  min-height: 100vh;
}

/* El fondo: noche con el resplandor del fuego del dragón abajo y una bruma roja arriba */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 38% at 14% 22%, rgba(60, 150, 190, .28), transparent 70%),
    radial-gradient(ellipse 42% 40% at 88% 30%, rgba(190, 70, 150, .26), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 108%, rgba(255, 140, 60, .26), transparent 72%),
    radial-gradient(ellipse 120% 95% at 50% 45%, transparent 55%, rgba(2, 2, 12, .6) 100%);
}

.embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.letter, .foot { position: relative; z-index: 1; }

::selection { background: var(--gold); color: var(--ink); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--red-ink);
  outline-offset: 4px;
  border-radius: 4px;
  box-shadow: 0 0 0 7px rgba(255, 243, 210, .9);
}

.skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 60;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- La carta: un papel largo plegado en tramos ---------- */

.letter {
  overflow-x: clip;
  width: min(100% - 2 * var(--gutter), 780px);
  margin: clamp(16px, 3vh, 36px) auto 0;
}

.fold {
  position: relative;
  background-color: var(--paper);
  background-image: var(--noise-paper);
  color: var(--ink);
  padding-inline: clamp(24px, 6vw, 72px);
  box-shadow:
    inset 0 0 70px rgba(130, 84, 36, .16),
    0 30px 44px -24px rgba(0, 0, 0, .75);
}

/* Sombra del pliegue: se aclara a medida que el tramo se abre */
.fold::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(40, 22, 10, .55), rgba(40, 22, 10, .08) 55%, rgba(40, 22, 10, .3));
  opacity: var(--shade, 0);
  z-index: 2;
}

/* La línea del doblez entre tramos */
.fold::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(60, 36, 16, .35) 12%, rgba(60, 36, 16, .35) 88%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.fold {
  padding-block: clamp(40px, 7vw, 72px);
  transform-origin: 50% 0;
}

/* ---------- Escritorio: flyer arriba, sobre abierto debajo ---------- */

.desk {
  position: relative;
  padding: clamp(20px, 4vh, 44px) 0 clamp(120px, 17vh, 170px);
  display: flex;
  justify-content: center;
}

.flyer {
  position: relative;
  z-index: 5;
  width: min(94%, 660px);
  padding: clamp(28px, 5.4vw, 54px) clamp(24px, 5.4vw, 50px) clamp(26px, 4.4vw, 42px);
  background-color: #fbf7ec;
  background-image: var(--noise-paper);
  color: var(--ink);
  text-align: center;
  border-radius: 2px;
  transform: rotate(-3deg);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .35),
    0 6px 10px rgba(0, 0, 0, .3),
    0 26px 36px -12px rgba(0, 0, 0, .7);
}
/* Filete impreso del flyer */
.flyer::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(146, 16, 42, .55);
  border-radius: 1px;
  pointer-events: none;
}

.flyer__logo { width: 100%; margin-top: 6px; mix-blend-mode: multiply; }

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.4vw, 3.3rem);
  line-height: 1.06;
  margin: 22px 0 0;
  text-wrap: balance;
  color: var(--ink);
}

.flyer__lede {
  margin: 12px auto 0;
  max-width: 40ch;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.flyer .cta { margin-top: 24px; }

.flyer__social {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px dashed rgba(90, 64, 51, .5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-weight: 700;
  font-size: .98rem;
}
.flyer__social a { display: inline-flex; align-items: center; gap: 8px; color: var(--red-ink); text-decoration: none; }
.flyer__social a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.flyer__social svg { width: 22px; height: 22px; flex: none; }

/* El sobre ya abierto, asomando por debajo del flyer */
.postal {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;
  width: min(100%, 740px);
  height: min(320px, 48vw);
  margin-left: calc(min(100%, 740px) / -2 + 24px);
  transform: rotate(3.5deg);
  transform-origin: 50% 100%;
  border-radius: 3px 3px 5px 5px;
  background-color: var(--kraft);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 300' preserveAspectRatio='none'><path d='M0 300 L320 118 L640 300' fill='none' stroke='rgba(60,36,16,0.28)' stroke-width='2'/></svg>"),
    var(--noise-paper);
  background-size: 100% 100%, auto;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .4),
    0 22px 30px -12px rgba(0, 0, 0, .75);
}

/* ---------- La acción: único dorado pleno ---------- */

.cta {
  margin-top: clamp(16px, 3vh, 30px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "seal main" "seal sub";
  column-gap: 14px;
  align-items: center;
  text-align: left;
  min-height: 76px;
  padding: 10px 28px 10px 14px;
  background: var(--gold);
  color: #2a0710;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4), 0 16px 22px -8px rgba(60, 20, 0, .6);
  transition: transform .25s var(--ease-out), background-color .2s;
}
.cta:hover { background: var(--gold-hi); transform: translateY(-3px); }
.cta:active { transform: translateY(1px); }

.cta__seal {
  grid-area: seal;
  width: 42px;
  height: 42px;
  margin-left: 4px;
}
.cta__main { grid-area: main; font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.cta__sub { grid-area: sub; font-size: .98rem; font-weight: 500; color: #4a2a14; text-wrap: balance; }

.cta--big { padding-block: 14px; }
.cta--big .cta__seal { width: 48px; height: 48px; }
.cta--big .cta__main { font-size: 1.65rem; }

/* ---------- Tramos ---------- */

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin: 0;
  color: var(--red-ink);
  text-wrap: balance;
}

.fold p { margin: 14px 0 0; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }
.fold .lead { font-size: 1.22rem; color: var(--ink); }

/* El camino: una ruta con paradas */
.road {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  position: relative;
}
.road::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 28px;
  bottom: 40px;
  border-left: 3px dotted var(--red-ink);
  opacity: .55;
}
.road__stop + .road__stop { margin-top: 6px; }

.stop {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  padding: 14px 16px 14px 0;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color .2s;
}
.stop:hover { background: rgba(146, 16, 42, .07); }

.stop__code {
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: var(--code);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--red-ink);
  background: var(--paper);
  padding: 6px 4px;
}
.stop__name { display: block; font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--ink); }
.stop__desc { display: block; margin-top: 4px; color: var(--ink-soft); line-height: 1.4; max-width: 52ch; text-wrap: pretty; }
.stop__go {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--red-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Lo que tenés que saber */
.facts {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px clamp(24px, 5vw, 56px);
}
.facts article { border-top: 2px solid rgba(60, 36, 16, .25); padding-top: 14px; }
.facts h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--red-ink);
}
.fold .facts .big {
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--ink);
}
.facts p { margin-top: 8px; }

/* Cierre */
.fold--close { text-align: center; display: flex; flex-direction: column; align-items: center; border-radius: 0 0 4px 4px; padding-bottom: clamp(56px, 8vw, 88px); }
.fold--close .certs { margin: 0 0 36px; font-family: var(--display); font-style: italic; color: var(--ink-soft); max-width: 44ch; }
.fold--close h2 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 16ch; }
.fold--close p { max-width: 40ch; }
.fold--close .cta { margin-top: 28px; }
.fold--close .sign { margin-top: 36px; font-family: var(--display); font-style: italic; color: var(--ink-soft); }
.sign strong { font-style: normal; color: var(--ink); }

/* ---------- Pie ---------- */

.foot {
  margin-top: clamp(40px, 6vw, 72px);
  padding: 28px var(--gutter) 48px;
  text-align: center;
  color: var(--on-night-soft);
  font-size: 1rem;
}
.foot p { margin: 0; }
.foot p + p { margin-top: 6px; }
.foot strong { color: var(--paper); }

/* ---------- Barra fija ---------- */

.sticky-cta {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 22px 6px 12px;
  background: var(--gold);
  color: #2a0710;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .6);
  transform: translateY(160%);
  transition: transform .45s var(--ease-out);
}
.sticky-cta .cta__seal { width: 30px; height: 30px; margin: 0; }
.sticky-cta.is-on { transform: translateY(0); }

/* ---------- Pantallas chicas ---------- */

@media (max-width: 720px) {
  body { padding-bottom: 84px; font-size: 1.0625rem; }
  .facts { grid-template-columns: 1fr; }
  .sticky-cta { left: 12px; right: 12px; justify-content: center; }
  .cta { width: 100%; padding-right: 18px; }
  .cta__main { font-size: 1.25rem; }
  .road::before { left: 28px; }
  .stop { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .stop__code { font-size: 1.6rem; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .fold::before { opacity: 0 !important; }
  .cta, .sticky-cta, .stop { transition: none; }
}


/* La primera hoja asoma por debajo de la boca del sobre */
.fold--intro {
  position: relative;
  z-index: 4;
  margin-top: -64px;
}
.fold--intro::after { display: none; }