/* ============================================================
   I 60 di Miguel · Toscana 2026
   Póster de verano italiano · amarillo mantequilla + pop
   ============================================================ */

:root {
  /* Paleta póster de verano italiano */
  --butter: #ffe9a3;     /* amarillo mantequilla — fondo */
  --butter-2: #ffd86b;   /* amarillo sol */
  --cream: #fff6dc;
  --tomato: #e63946;     /* rojo vivo */
  --tomato-deep: #b52a36;
  --basil: #2e8b57;      /* verde hierba */
  --basil-deep: #1f6e42;
  --sky: #1e3a8a;        /* azul profundo */
  --grape: #6a1b8f;
  --peach: #ff8b5c;
  --ink: #1a1108;
  --ink-soft: #3a2818;
  --ink-faded: rgba(26, 17, 8, 0.55);

  --font-display: "Fraunces", "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body: "Fraunces", Georgia, serif;
  --font-hand: "Caveat", cursive;
  --font-mono: "IBM Plex Mono", monospace;

  --section-pad: clamp(72px, 10vw, 140px);
  --card-pad: clamp(24px, 3vw, 40px);
  --shadow-pop: 6px 6px 0 var(--ink);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--butter);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

body {
  background-image:
    radial-gradient(circle at 10% 8%, rgba(230,57,70,0.08), transparent 25%),
    radial-gradient(circle at 90% 30%, rgba(46,139,87,0.08), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(255,139,92,0.1), transparent 30%);
}

/* Cursor personalizado: un sol */
.sun-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.05s linear;
  mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tomato-deep);
  font-weight: 600;
}

.handwritten {
  font-family: var(--font-hand);
  color: var(--tomato-deep);
  transform: rotate(-2deg);
  display: inline-block;
}

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

section { position: relative; }
.section-pad { padding-block: var(--section-pad); }

/* ============================================================
   HERO — póster italiano
   ============================================================ */
.hero {
  min-height: 100vh;
  padding: 28px clamp(20px, 4vw, 56px) 48px;
  position: relative;
  overflow: hidden;
}

.hero-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 3px solid var(--ink);
}

.hero-flag {
  display: inline-flex;
  align-items: center;
  gap: 0;
  vertical-align: middle;
  margin: 0 12px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  height: 0.9em;
}
.hero-flag span {
  display: inline-block;
  width: 0.7em;
  height: 100%;
}
.hero-flag .f-g { background: #009e4f; }
.hero-flag .f-w { background: #ffffff; }
.hero-flag .f-r { background: #cf2e2e; }

.hero-main {
  padding-block: clamp(40px, 7vw, 80px);
  text-align: center;
  position: relative;
}
  padding-block: clamp(40px, 7vw, 80px);
  text-align: center;
  position: relative;
}

.hero-supra {
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--tomato-deep);
  margin-bottom: 32px;
  font-weight: 600;
}

.hero-title {
  font-size: clamp(72px, 16vw, 260px);
  line-height: 0.82;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-weight: 600;
}

.hero-title .sixty {
  display: inline-block;
  color: var(--tomato);
  font-size: 1.4em;
  line-height: 0.82;
  margin: 0 0.02em;
  transform: translateY(0.04em);
  text-shadow:
    6px 6px 0 var(--butter-2),
    12px 12px 0 var(--basil),
    18px 18px 0 var(--sky);
}

.hero-title .the {
  font-family: var(--font-hand);
  font-size: 0.3em;
  color: var(--basil-deep);
  font-style: normal;
  transform: translateY(-0.7em) rotate(-6deg);
  display: inline-block;
  margin-right: 0.05em;
  font-weight: 400;
}

.hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3vw, 36px);
  color: var(--ink-soft);
  max-width: 760px;
  margin: 32px auto 0;
  line-height: 1.25;
}

.hero-subtitle em {
  color: var(--tomato-deep);
  font-style: italic;
}

.hero-dates {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--ink);
  color: var(--butter);
  padding: 12px 28px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 36px;
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow-pop);
}

/* Stickers flotando en el hero */
.hero-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sticker {
  position: absolute;
  transform-origin: center;
  animation: bob 6s ease-in-out infinite;
}
.sticker-lg { width: 120px; height: 120px; }
.sticker-md { width: 84px; height: 84px; }
.sticker-sm { width: 60px; height: 60px; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 3deg)); }
}

/* Hero countdown simple en fila */
.hero-countdown {
  margin: 40px auto 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 3px solid var(--ink);
  background: var(--cream);
  box-shadow: var(--shadow-pop);
  transform: rotate(0.5deg);
}
.hero-countdown > div {
  padding: 16px 8px;
  border-right: 2px dashed var(--ink);
  text-align: center;
}
.hero-countdown > div:last-child { border-right: none; }
.hero-countdown .count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  font-weight: 600;
  color: var(--tomato-deep);
}
.hero-countdown .count-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-top: 6px;
}

/* ============================================================
   60 — contador grande animado
   ============================================================ */
.miguel60 {
  padding-block: var(--section-pad);
  text-align: center;
  background: var(--tomato);
  color: var(--butter);
  position: relative;
  overflow: hidden;
  margin-block: clamp(40px, 6vw, 80px);
}

.miguel60::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 30%, var(--butter-2) 0 60px, transparent 61px),
    radial-gradient(circle at 85% 70%, var(--basil) 0 80px, transparent 81px),
    radial-gradient(circle at 50% 20%, var(--sky) 0 40px, transparent 41px);
  opacity: 0.25;
  pointer-events: none;
}

.miguel60-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--butter);
  opacity: 0.85;
  position: relative;
}

.miguel60-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(180px, 34vw, 520px);
  line-height: 0.85;
  color: var(--butter);
  font-weight: 600;
  margin: 8px 0;
  text-shadow:
    10px 10px 0 var(--ink),
    20px 20px 0 var(--butter-2);
  position: relative;
}

.miguel60-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 30px);
  color: var(--butter);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.3;
  position: relative;
}

.miguel60-hand {
  font-family: var(--font-hand);
  font-size: clamp(40px, 5vw, 64px);
  color: var(--butter-2);
  display: inline-block;
  transform: rotate(-3deg);
  margin-top: 24px;
  position: relative;
}

/* ============================================================
   ROUTE — 4 ciudades con stickers
   ============================================================ */
.route-section {
  padding-block: var(--section-pad);
}

.route-title-wrap {
  text-align: center;
  margin-bottom: 56px;
}

.route-title {
  font-size: clamp(48px, 8vw, 104px);
  font-style: italic;
  line-height: 0.9;
  font-weight: 600;
}

.route-title .underline-marker {
  position: relative;
  display: inline-block;
}
.route-title .underline-marker::after {
  content: "";
  position: absolute;
  bottom: 0.05em;
  left: -0.05em;
  right: -0.05em;
  height: 0.3em;
  background: var(--butter-2);
  z-index: -1;
  transform: skewX(-8deg);
}

.cities-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
  position: relative;
}

.city-card {
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-pop);
  padding: 24px 20px 28px;
  position: relative;
  text-align: center;
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.3);
}
.city-card:nth-child(1) { transform: rotate(-2deg); }
.city-card:nth-child(2) { transform: rotate(1.5deg); margin-top: 24px; }
.city-card:nth-child(3) { transform: rotate(-1deg); margin-top: -16px; }
.city-card:nth-child(4) { transform: rotate(2deg); margin-top: 32px; }

.city-card:hover {
  transform: rotate(0) translateY(-6px) scale(1.04) !important;
}

.city-num {
  position: absolute;
  top: -20px;
  left: -16px;
  width: 56px;
  height: 56px;
  background: var(--tomato);
  color: var(--butter);
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 600;
  box-shadow: var(--shadow-pop);
}
.city-card:nth-child(1) .city-num { background: var(--tomato); }
.city-card:nth-child(2) .city-num { background: var(--butter-2); color: var(--ink); }
.city-card:nth-child(3) .city-num { background: var(--basil); }
.city-card:nth-child(4) .city-num { background: var(--sky); }

.city-sticker {
  width: 80px;
  height: 80px;
  margin: 16px auto 16px;
}

.city-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 10px;
}
.city-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.city-blurb {
  margin-top: 12px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 16px;
}

/* ============================================================
   DIARIO 8 días — compacto y divertido
   ============================================================ */
.diary {
  padding-block: var(--section-pad);
}

.diary-days {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.diary-day {
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-pop);
  padding: var(--card-pad);
  position: relative;
}
.diary-day:nth-child(3n+1) { background: var(--cream); }
.diary-day:nth-child(3n+2) { background: #fff0dc; }
.diary-day:nth-child(3n+3) { background: #e5f3e0; }
.diary-day.accent-red { background: #ffd8d8; }
.diary-day.accent-blue { background: #dbe5ff; }
.diary-day.accent-yellow { background: var(--butter-2); }

.diary-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--ink);
  gap: 12px;
}
.diary-day-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: var(--tomato-deep);
}
.diary-day-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.diary-day-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 8px;
}
.diary-day-where {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 14px;
}
.diary-day-body {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}
.diary-day-sticker {
  position: absolute;
  top: -18px;
  right: 16px;
  width: 64px;
  height: 64px;
  transform: rotate(10deg);
}
.diary-day-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.tag-pop {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--butter);
  border-radius: 99px;
}
.tag-pop.red { background: var(--tomato); }
.tag-pop.green { background: var(--basil); }
.tag-pop.yellow { background: var(--butter-2); color: var(--ink); }
.tag-pop.blue { background: var(--sky); }

/* ============================================================
   CLOSING
   ============================================================ */
.closing {
  text-align: center;
  padding-block: var(--section-pad);
  position: relative;
}

.closing-title {
  font-size: clamp(56px, 12vw, 200px);
  font-style: italic;
  line-height: 0.85;
  margin-bottom: 24px;
  font-weight: 600;
}
.closing-title .col-red { color: var(--tomato); }
.closing-title .col-green { color: var(--basil); }

.closing-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 40px;
}

.closing-signature {
  font-family: var(--font-hand);
  font-size: clamp(28px, 3vw, 42px);
  color: var(--tomato-deep);
  transform: rotate(-2deg);
  display: inline-block;
}

/* Footer */
.footer {
  padding: 32px 0 56px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faded);
  border-top: 2px dashed var(--ink);
}

/* ============================================================
   Reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.route-sub {
  font-family: var(--font-hand);
  font-size: clamp(28px, 3.5vw, 44px);
  color: var(--tomato-deep);
  transform: rotate(-1.5deg);
  display: inline-block;
  margin-top: 12px;
}

.diary-day-photo {
  margin: 14px 0 4px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1.2deg);
  background: var(--cream);
  padding: 6px 6px 10px;
  position: relative;
}
.diary-day-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.diary-day-photo .photo-caption {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--tomato-deep);
  text-align: center;
  margin-top: 4px;
  line-height: 1;
}

/* Responsive */
@media (max-width: 800px) {
  .cities-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .city-card:nth-child(n) { margin-top: 0; }
  .diary-days { grid-template-columns: 1fr; }
  .hero-countdown { grid-template-columns: repeat(2, 1fr); }
  .hero-countdown > div { border-right: none; border-bottom: 2px dashed var(--ink); }
  .hero-countdown > div:nth-child(odd) { border-right: 2px dashed var(--ink); }
  .hero-countdown > div:nth-last-child(-n+2) { border-bottom: none; }
  html, body { cursor: auto; }
  .sun-cursor { display: none; }
}