/* ============================================================
   Nube de Madera · Landing "En construcción"
   Estética: calidez artesanal soñadora — cielo pastel + madera
   ============================================================ */

:root {
  /* Pasteles del cielo */
  --peach:  #fcdcc8;
  --rose:   #f6c9d4;
  --lilac:  #d9d2f0;
  --mint:   #c9ecdf;
  --sky:    #cfe5f4;
  --cream:  #fdf6ef;

  /* Madera (acento cálido) */
  --wood-1: #caa06a;
  --wood-2: #9c6b34;
  --wood-3: #6e4420;
  --wood-4: #4a2c14;

  /* Tinta */
  --ink:      #2b3a4a;
  --ink-soft: #5a6675;
  --ink-mute: #8794a3;

  /* Marcas */
  --c-email:     #8a6fd6;
  --c-whatsapp:  #2bb673;
  --c-instagram: #d6428a;
  --c-tiktok:    #1c1c22;

  /* UI */
  --glass:        rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .82);
  --stroke:       rgba(255, 255, 255, .75);
  --shadow-sm: 0 4px 14px rgba(120, 100, 130, .12);
  --shadow-md: 0 14px 34px rgba(120, 95, 120, .16);
  --shadow-lg: 0 26px 60px rgba(110, 85, 115, .22);
  --r-card: 26px;
  --r-pill: 999px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────  FONDO: cielo pastel orgánico  ───────────── */
.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 12% 6%,  var(--peach) 0%, transparent 42%),
    radial-gradient(120% 90% at 92% 14%, var(--lilac) 0%, transparent 46%),
    radial-gradient(120% 100% at 88% 92%, var(--sky) 0%, transparent 50%),
    radial-gradient(120% 100% at 8% 88%, var(--mint) 0%, transparent 48%),
    linear-gradient(160deg, #fdeee4 0%, #f7eef6 50%, #eef4fb 100%);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  animation: drift 22s ease-in-out infinite;
}
.blob--peach { width: 42vw; height: 42vw; top: -8vw;  left: -6vw;  background: var(--peach);  animation-delay: 0s; }
.blob--lilac { width: 38vw; height: 38vw; top: 6vw;   right: -8vw; background: var(--lilac);  animation-delay: -5s; }
.blob--mint  { width: 36vw; height: 36vw; bottom: 4vw; left: -10vw; background: var(--mint);  animation-delay: -11s; }
.blob--rose  { width: 30vw; height: 30vw; top: 38%;   left: 30%;   background: var(--rose);   animation-delay: -8s; opacity: .35; }
.blob--sky   { width: 40vw; height: 40vw; bottom: -10vw; right: -6vw; background: var(--sky); animation-delay: -14s; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3vw, 4vw) scale(1.08); }
  66%      { transform: translate(-2vw, -3vw) scale(.96); }
}

/* Grano sutil para textura artesanal */
.grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .04;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ─────────────  Confeti flotante  ───────────── */
.sparkles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.dot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: linear-gradient(var(--rose), var(--lilac));
  opacity: .7;
  animation: twinkle 5s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes twinkle {
  0%, 100% { transform: translateY(0) scale(1); opacity: .25; }
  50%      { transform: translateY(-12px) scale(1.4); opacity: .8; }
}

/* ─────────────  Layout  ───────────── */
.page {
  width: min(100% - 2.4rem, 1080px);
  margin-inline: auto;
  padding: clamp(2.4rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}

/* Animación de entrada escalonada */
.hero, .links, .preview, .closing { opacity: 1; }
body.is-ready .reveal,
.hero > *, .links, .preview, .closing {
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) backwards;
}
.brand        { animation-delay: .05s; }
.hero__title  { animation-delay: .18s; }
.hero__sub    { animation-delay: .3s; }
.links        { animation-delay: .4s; }
.preview      { animation-delay: .55s; }
.closing      { animation-delay: .68s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────  HERO  ───────────── */
.hero { text-align: center; }

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}
.brand__mark {
  width: clamp(72px, 14vw, 104px);
  filter: drop-shadow(0 8px 16px rgba(110, 68, 32, .28));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.brand__mark svg { width: 100%; height: auto; display: block; }
.brand:hover .brand__mark { transform: translateY(-4px) rotate(-2deg); }

.brand__name { line-height: 1; }
.brand__line1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  letter-spacing: .01em;
  color: var(--wood-3);
}
.brand__line1 em {
  font-style: italic;
  font-weight: 400;
  font-size: .72em;
  color: var(--ink-soft);
}

.hero__title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.6rem, 3vw, 1.4rem);
  margin: clamp(1.4rem, 4vw, 2.2rem) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 11vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--ink);
}
.hero__deco {
  flex: none;
  width: clamp(20px, 5vw, 42px);
  height: clamp(20px, 5vw, 42px);
  background:
    linear-gradient(currentColor, currentColor) center/100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) center/3px 100% no-repeat;
  color: var(--rose);
  opacity: .8;
  mask: radial-gradient(circle at center, transparent 30%, #000 31%);
  -webkit-mask: radial-gradient(circle at center, transparent 30%, #000 31%);
}
.hero__deco--l { transform: rotate(-18deg); }
.hero__deco--r { color: var(--c-email); transform: rotate(18deg); }

.hero__sub {
  margin: clamp(1rem, 3vw, 1.6rem) auto 0;
  max-width: 30ch;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--ink-soft);
}

/* ─────────────  Pill de sección  ───────────── */
.section-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: clamp(2.6rem, 7vw, 4rem) auto clamp(1.4rem, 4vw, 2rem);
  padding: .7rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  color: var(--ink);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.section-pill > span:first-child { color: var(--wood-2); }
.links, .preview { text-align: center; }

/* ─────────────  Tarjetas de enlace  ───────────── */
.links__grid,
.preview__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.9rem, 2.4vw, 1.4rem);
}
.links__grid { grid-template-columns: repeat(2, 1fr); }
.preview__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }

@media (min-width: 720px) {
  .links__grid   { grid-template-columns: repeat(4, 1fr); }
  .preview__grid { grid-template-columns: repeat(3, 1fr); max-width: none; }
}

.card {
  --accent: var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  height: 100%;
  padding: clamp(1.3rem, 3vw, 1.7rem) 1rem clamp(1.2rem, 3vw, 1.5rem);
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1),
              box-shadow .35s ease, border-color .35s ease;
}
/* Brillo de acento superior */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent);
  opacity: .85;
}
/* Halo de color al fondo de la tarjeta */
.card::after {
  content: "";
  position: absolute;
  width: 130%;
  height: 60%;
  left: -15%;
  bottom: -40%;
  background: radial-gradient(closest-side, var(--accent), transparent);
  opacity: 0;
  transition: opacity .4s ease, bottom .4s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 40%, white);
  outline: none;
}
.card:hover::after, .card:focus-visible::after { opacity: .12; bottom: -32%; }

.card--email     { --accent: var(--c-email); }
.card--whatsapp  { --accent: var(--c-whatsapp); }
.card--instagram { --accent: var(--c-instagram); }
.card--tiktok    { --accent: var(--c-tiktok); }

.card__icon {
  display: grid;
  place-items: center;
  width: clamp(54px, 11vw, 64px);
  height: clamp(54px, 11vw, 64px);
  margin-bottom: .4rem;
  border-radius: 20px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, white);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.card__icon svg { width: 56%; height: 56%; }
.card:hover .card__icon { transform: scale(1.08) rotate(-4deg); }

.card--instagram .card__icon {
  color: #fff;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
}
.card--whatsapp .card__icon  { color: #fff; background: linear-gradient(140deg, #56d77f, #25b563); }
.card--tiktok .card__icon    { color: #fff; background: var(--c-tiktok); }

.card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
}
.card__value {
  font-weight: 700;
  font-size: clamp(.82rem, 2vw, .95rem);
  color: var(--accent);
  word-break: break-word;
}
.card--tiktok .card__value { color: var(--ink); }
.card__cta {
  margin-top: .15rem;
  font-size: clamp(.74rem, 1.8vw, .82rem);
  color: var(--ink-mute);
}

/* ─────────────  Galería de productos  ───────────── */
.section-pill--soft { color: var(--ink); }

.preview__item figure { margin: 0; }
.preview__art {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.preview__item:hover .preview__art { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow-lg); }
.preview__item--blue  .preview__art { background: linear-gradient(150deg, #d4e7f5, #bcd6ee); }
.preview__item--lilac .preview__art { background: linear-gradient(150deg, #e4def5, #cfc6ee); }
.preview__item--amber .preview__art { background: linear-gradient(150deg, #f7c98a, #ef9d4e); }

.preview__item figcaption {
  margin-top: .8rem;
  font-size: clamp(.82rem, 2vw, .92rem);
  color: var(--ink-soft);
}

/* Producto 1: rodaja de tronco */
.slice {
  width: 74%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  padding: 1rem;
  color: var(--wood-4);
  background:
    repeating-radial-gradient(circle at 50% 50%, #e8c89a 0 5px, #ddb87f 5px 10px),
    #e8c89a;
  border: 6px solid #c79a63;
  box-shadow: inset 0 0 22px rgba(110, 68, 32, .35);
}
.slice__quote { margin: 0; font-size: clamp(.5rem, 1.7vw, .62rem); font-style: italic; line-height: 1.3; }
.slice__names { margin: .35em 0 .1em; font-family: var(--font-display); font-weight: 700; font-size: clamp(.7rem, 2.2vw, .92rem); }
.slice__date  { margin: 0; font-size: clamp(.5rem, 1.6vw, .62rem); letter-spacing: .04em; }
.slice__sprig { display: block; margin-top: .3em; color: var(--wood-2); }

/* Producto 2: posavasos cuadrado */
.coaster {
  width: 76%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 14px;
  color: #f3e2cb;
  background: linear-gradient(160deg, #9c6b3c, #74471f);
  border: 5px solid #5e3817;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .35);
}
.coaster__crest { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,.3)); }
.coaster__name {
  margin: .2em 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: clamp(.9rem, 3vw, 1.3rem);
}

/* Producto 3: llavero colgante */
.tag {
  position: relative;
  width: 56%;
  aspect-ratio: 5 / 7;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 10px;
  color: #5e3817;
  background: linear-gradient(160deg, #e7c294, #d2a366);
  border: 3px solid #b78649;
  box-shadow: 0 8px 18px rgba(94, 56, 23, .4), inset 0 0 16px rgba(94, 56, 23, .25);
  margin-top: 14px;
}
.tag__ring {
  position: absolute;
  top: -16px; left: 50%;
  width: 16px; height: 22px;
  transform: translateX(-50%);
  border: 3px solid #9aa0a6;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.tag p { margin: 0; line-height: 1.05; }
.tag__l1 { font-size: clamp(.45rem, 1.5vw, .6rem); }
.tag__l2 { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1rem, 4vw, 1.5rem); }
.tag__l3 { font-size: clamp(.5rem, 1.7vw, .68rem); }
.tag__l3 em { font-style: italic; }
.tag__l4 { font-weight: 800; font-size: clamp(.55rem, 1.8vw, .72rem); letter-spacing: .03em; }
.tag__l5 { font-family: var(--font-display); font-style: italic; font-size: clamp(.6rem, 2vw, .82rem); margin-top: .25em; }

/* ─────────────  Cierre  ───────────── */
.closing { text-align: center; margin-top: clamp(2.8rem, 8vw, 4.5rem); }
.closing__thanks {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  color: var(--wood-3);
  position: relative;
  display: inline-block;
}
.closing__thanks::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -.18em;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--rose), var(--c-email));
  opacity: .55;
}
.closing__heart {
  display: block;
  margin: .8rem 0 1.4rem;
  font-size: 1.4rem;
  color: var(--rose);
  animation: beat 2.4s ease-in-out infinite;
}
@keyframes beat { 0%,100%{transform:scale(1);} 15%{transform:scale(1.25);} 30%{transform:scale(1);} }
.closing__legal { margin: 0; font-size: clamp(.74rem, 1.8vw, .85rem); color: var(--ink-mute); }

/* ─────────────  Accesibilidad / preferencias  ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 360px) {
  .links__grid { grid-template-columns: 1fr; }
}