/* ═══ CARTA ═══ */
.ct-hero { position:relative; min-height:65vh; overflow:hidden; display:flex; align-items:center; padding-top:var(--nav-h); }
.ct-sunset { position:absolute; inset:0; background:linear-gradient(180deg,#ff8040 0%,#ffb060 25%,#ffd080 50%,#ffe8a0 75%,#c8d890 100%); }
.ct-birds { position:absolute; top:15%; left:0; right:0; z-index:3; pointer-events:none; }
.ct-birds-svg { width:100%; height:100px; }
.ct-hero-content { position:relative; z-index:10; padding:4rem 2rem 12rem 5%; max-width:560px; }
.ct-kicker { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(80,30,10,.6); margin-bottom:.8rem; }
.ct-title { font-family:var(--serif); font-size:clamp(2.8rem,7vw,5rem); font-weight:300; line-height:1.05; color:#2a1010; margin-bottom:1rem; }
.ct-title em { color:#8b3030; font-weight:400; }
.ct-grass { position:absolute; bottom:0; left:0; right:0; height:160px; background:linear-gradient(180deg,transparent 0%,#4a8c40 55%,#2d5a27 100%); clip-path:ellipse(60% 70% at 50% 100%); z-index:2; }

/* Envelope */
.ct-letter-section { padding:7rem 0; background:var(--paper); }
.ct-envelope-wrap { display:flex; flex-direction:column; align-items:center; gap:2rem; margin-bottom:4rem; }
.ct-envelope {
  width:320px; height:220px; position:relative;
  cursor:pointer; transition:transform .4s var(--ease);
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.15));
}
.ct-envelope:hover { transform:translateY(-6px) rotate(1deg); }
.ct-env-body {
  position:absolute; inset:0;
  background:linear-gradient(160deg,#fdf5e8 0%,#f5ead8 100%);
  border-radius:8px; border:1.5px solid #e8d8c0;
  overflow:hidden;
}
.ct-env-back {
  position:absolute; inset:0;
  background:linear-gradient(160deg,#f8edd5 0%,#ede0c8 100%);
  border-radius:8px;
}
.ct-env-flap {
  position:absolute; top:0; left:0; right:0; height:120px;
  background:linear-gradient(160deg,#f0e0c0 0%,#e8d4b0 100%);
  clip-path:polygon(0 0, 50% 65%, 100% 0);
  border-bottom:1.5px solid #d8c8a0;
}
.ct-env-pocket {
  position:absolute; bottom:0; left:0; right:0; height:140px;
  background:linear-gradient(0deg,#f5ead8 0%,transparent 100%);
  clip-path:polygon(0 100%, 50% 35%, 100% 100%);
}
.ct-env-deco { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) translateY(10px); }

.ct-open-btn {
  padding:.85rem 2.5rem;
  background:var(--forest); color:white;
  border:none; border-radius:50px;
  font-family:var(--serif); font-size:1rem; font-style:italic;
  cursor:pointer; transition:background .3s ease,transform .3s var(--ease);
  box-shadow:0 6px 24px rgba(45,90,39,.3);
}
.ct-open-btn:hover { background:#1a3a1a; transform:translateY(-3px); }

/* Carta */
.ct-letter { max-width:680px; margin:0 auto; }
.ct-letter.hidden { display:none; }
.ct-letter-inner {
  background:white;
  border-radius:16px;
  border:1.5px solid #e8d8c0;
  padding:3.5rem 4rem;
  box-shadow:0 8px 40px rgba(0,0,0,.1);
  position:relative;
}
.ct-letter-inner::before {
  content:'';
  position:absolute; left:80px; top:0; bottom:0;
  width:1px; background:rgba(180,140,100,.2);
}
.ct-letter-header { display:flex; align-items:center; gap:1rem; margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:1px solid #e8d8c0; }
.ct-letter-date { font-size:.78rem; letter-spacing:.1em; color:#a09070; font-family:var(--serif); font-style:italic; }
.ct-saludo { font-family:var(--serif); font-size:1.3rem; font-style:italic; color:var(--ink); margin-bottom:1.5rem; }
.ct-para { font-family:var(--serif); font-size:1.05rem; line-height:1.85; color:#3a3020; margin-bottom:1.4rem; }
.ct-highlight { margin:2rem 0; padding:1.5rem 2rem; background:rgba(106,184,160,.08); border-left:3px solid var(--teal); border-radius:0 12px 12px 0; }
.ct-highlight.pink { background:rgba(249,198,208,.15); border-left-color:#f9c6d0; }
.ct-highlight p { font-family:var(--serif); font-size:1.1rem; font-style:italic; color:var(--ink); line-height:1.7; }
.ct-flower-deco { text-align:center; font-size:1.5rem; margin:1.5rem 0; letter-spacing:1rem; }

/* Contador dentro de la carta */
.ct-counter-block { margin:2.5rem 0; text-align:center; padding:2rem; background:linear-gradient(135deg,#f0f8ee,#e8f4e0); border-radius:16px; border:1px solid #d4e8c0; }
.ct-counter-label { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:1rem; }
.ct-counter-nums { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
.ct-cnum { display:flex; flex-direction:column; align-items:center; }
.ct-cnum span { font-family:var(--serif); font-size:2.5rem; font-weight:600; color:var(--forest); line-height:1; }
.ct-cnum small { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute); margin-top:.2rem; }
.ct-cdot { font-family:var(--serif); font-size:2rem; color:var(--ink-mute); opacity:.4; }
.ct-counter-sub { font-family:var(--serif); font-size:.9rem; font-style:italic; color:var(--ink-soft); margin-top:1rem; }

.ct-firma { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid #e8d8c0; }
.ct-firma p { font-family:var(--serif); font-size:1rem; color:var(--ink-soft); line-height:2; }
.ct-firma-name { font-size:1.6rem; font-style:italic; color:#8b3030; }
.ct-firma-jp { font-family:var(--jp); font-size:.9rem; color:var(--teal); letter-spacing:.15em; margin-top:.5rem; }
.ct-firma-trad { font-size:.82rem; color:var(--ink-mute); }
.ct-postdata { margin-top:2rem; padding:1.2rem 1.5rem; background:#fdf8f0; border-radius:10px; border:1px dashed #e8d8c0; }
.ct-postdata p { font-family:var(--serif); font-size:.9rem; color:var(--ink-soft); line-height:1.7; font-style:italic; }

/* Sección final */
.ct-final { position:relative; min-height:100vh; overflow:hidden; display:flex; align-items:center; padding:6rem 0; }
.ct-final-sky { position:absolute; inset:0; background:linear-gradient(160deg,#c8e8f0 0%,#d8eee0 40%,#b8d8a0 80%,#8ab870 100%); }
.ct-final-content { position:relative; z-index:10; display:grid; grid-template-columns:auto 1fr; gap:5rem; align-items:center; }
.ct-final-spirit svg { filter:drop-shadow(0 12px 40px rgba(44,62,45,.2)); animation:totoroBig 5s ease-in-out infinite; }
@keyframes totoroBig { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-20px) rotate(2deg)} }
.ct-final-title { font-family:var(--serif); font-size:clamp(2.4rem,5vw,4rem); font-weight:300; color:var(--ink); line-height:1.1; margin-bottom:2.5rem; }
.ct-final-title em { color:var(--teal); font-weight:400; }
.ct-big-counter { margin-bottom:.8rem; }
.ct-big-num { font-family:var(--serif); font-size:clamp(4rem,10vw,8rem); font-weight:300; color:var(--forest); line-height:1; }
.ct-big-label { font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.2rem; }
.ct-small-counters { font-family:var(--serif); font-size:1.1rem; color:var(--ink-soft); font-style:italic; margin-bottom:1rem; }
.ct-small-counters span { font-weight:600; color:var(--ink); }
.ct-final-sub { font-family:var(--serif); font-size:1rem; color:var(--ink-mute); font-style:italic; margin-bottom:2rem; }
.ct-final-jp { display:flex; gap:2rem; }
.ct-final-jp p { font-family:var(--jp); font-size:1.4rem; color:var(--teal); letter-spacing:.1em; }

/* Back links */
.ct-back { padding:5rem 0; background:var(--forest); text-align:center; }
.ct-back-label { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(200,240,200,.5); margin-bottom:1.5rem; }
.ct-back-links { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.ct-back-links a { padding:.6rem 1.4rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.75); font-family:var(--serif); font-size:.9rem; border-radius:50px; transition:background .2s,transform .2s; }
.ct-back-links a:hover { background:rgba(255,255,255,.18); transform:translateY(-2px); }

@media(max-width:900px){
  .ct-final-content { grid-template-columns:1fr; text-align:center; }
  .ct-final-spirit { display:flex; justify-content:center; }
  .ct-final-jp { justify-content:center; }
  .ct-letter-inner { padding:2rem 1.5rem; }
  .ct-letter-inner::before { display:none; }
}
@media(max-width:600px){
  .ct-envelope { width:260px; height:180px; }
  .ct-big-num { font-size:4rem; }
}

/* ═══ TE AMO ═══ */
.carta-te-amo {
  padding:8rem 2rem 10rem;
  background:linear-gradient(180deg,#0a0a14 0%,#12101e 100%);
  text-align:center;
  position:relative; overflow:hidden;
}
.carta-te-amo::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 60%, rgba(232,122,138,.12) 0%, transparent 65%);
}
.carta-te-amo-text {
  font-family:var(--serif);
  font-size:clamp(5rem,18vw,12rem);
  font-weight:300;
  color:white;
  line-height:1;
  letter-spacing:-.02em;
  margin:0 0 1.5rem;
  position:relative; z-index:2;
  animation:teAmoGlow 3s ease-in-out infinite;
}
@keyframes teAmoGlow {
  0%,100% { text-shadow:0 0 60px rgba(232,122,138,.3), 0 0 120px rgba(232,122,138,.1); }
  50%      { text-shadow:0 0 80px rgba(232,122,138,.55), 0 0 160px rgba(232,122,138,.2); }
}
.carta-te-amo-sub {
  display:block;
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.4em;
  color:rgba(255,255,255,.35);
  position:relative; z-index:2;
  text-transform:uppercase;
}