/* ============================================================
   Nube de Madera · Landing "Estamos tallando algo bonito"
   Estética: taller cálido artesanal — cielo pastel + madera
   Dirección: BrandDirector (marca) + UXEngineer (experiencia)
   ============================================================ */

:root {
  /* Cielo pastel */
  --peach:  #fbe9e0;
  --rose:   #f8dce6;
  --lilac:  #e8dff1;
  --mint:   #dcefe3;
  --sky:    #dcebf7;
  --cream:  #fcf7f1;

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

  /* Tinta */
  --ink:      #3a4a63;   /* texto principal — azul tinta cálido */
  --ink-blue: #2d4a7c;   /* titular hero — azul tinta saturado */
  --ink-soft: #6b7993;
  --ink-mute: #6e7c8c;   /* CTA microcopy — oscurecido para AA */

  /* Marcas (solo se encienden en hover) */
  --c-email:     #9c6b34;
  --c-whatsapp:  #25b563;
  --c-instagram: #e1306c;
  --c-tiktok:    #1c1c22;

  /* UI */
  --glass:        rgba(255, 255, 255, .64);
  --glass-strong: rgba(255, 255, 255, .84);
  --stroke:       rgba(255, 255, 255, .78);
  --shadow-sm: 0 4px 14px rgba(120, 95, 120, .12);
  --shadow-md: 0 14px 34px rgba(120, 95, 120, .16);
  --shadow-lg: 0 26px 60px rgba(110, 85, 115, .22);
  --shadow-wood: 0 12px 26px rgba(110, 68, 32, .18);
  --r-card: 26px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);

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

* { 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.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* Selección coloreada de marca */
::selection { background: color-mix(in srgb, var(--rose) 65%, white); color: var(--wood-4); }

/* Scrollbar a juego (desktop) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(var(--rose), var(--lilac));
    border: 2px solid var(--cream);
  }
  html { scrollbar-color: var(--lilac) transparent; }
}

/* ─────────────  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(70px);
  opacity: .5;
  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: .32; }
.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;
}

/* ─────────────  Polvo de luz 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: .6;
  animation: twinkle 5s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes twinkle {
  0%, 100% { transform: translateY(0) scale(1); opacity: .2; }
  50%      { transform: translateY(-12px) scale(1.4); opacity: .7; }
}

/* ─────────────  Layout  ───────────── */
.page {
  width: min(100% - 2.4rem, 1080px);
  margin-inline: auto;
  padding:
    max(clamp(2.4rem, 6vw, 5.5rem), env(safe-area-inset-top))
    env(safe-area-inset-right)
    max(clamp(2rem, 5vw, 3.5rem), env(safe-area-inset-bottom))
    env(safe-area-inset-left);
}

/* Animación de entrada escalonada */
.hero > *, .links, .preview, .closing {
  animation: rise .8s var(--ease-out) backwards;
}
.brand        { animation-delay: .05s; }
.hero__kicker { animation-delay: .14s; }
.hero__title  { animation-delay: .2s; }
.hero__sub    { animation-delay: .32s; }
.links        { animation-delay: .42s; }
.preview      { animation-delay: .56s; }
.closing      { animation-delay: .68s; }

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

/* ─────────────  HERO  ───────────── */
.hero { text-align: center; max-width: 720px; margin-inline: auto; }

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  position: relative;
  width: clamp(190px, 40vw, 280px);
  /* La sombra cae sobre el logo Y su halo crema, como una sola pieza */
  filter: drop-shadow(0 14px 24px rgba(110, 68, 32, .16));
  transform-origin: top center;
  animation: sway 7s ease-in-out infinite;
}
.brand__mark img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* Difumina el borde cuadrado del JPG hacia el halo crema del mismo color:
     el recuadro desaparece y el grabado queda flotando sobre la nube crema. */
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%,
    #000 60%, rgba(0, 0, 0, .55) 78%, transparent 97%);
          mask-image: radial-gradient(closest-side at 50% 50%,
    #000 60%, rgba(0, 0, 0, .55) 78%, transparent 97%);
}
/* Halo crema: usa EXACTAMENTE el color de fondo del logo (#f7ece1) en el
   centro y se desvanece hacia el cielo pastel. Como el crema del halo y el
   del logo son el mismo, la unión es invisible (sin costura ni recuadro). */
.brand__halo {
  position: absolute;
  inset: -26% -22% -30%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side at 50% 46%,
    #f7ece1 0%,
    #f7ece1 40%,
    rgba(247, 236, 225, .85) 58%,
    rgba(247, 236, 225, .45) 74%,
    rgba(247, 236, 225, 0) 100%);
}
@keyframes sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}
.brand:hover .brand__mark { animation-play-state: paused; transform: translateY(-3px) rotate(-.8deg); transition: transform .4s var(--ease-out); }

.brand__tag {
  font-family: var(--font-hand);
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  color: var(--wood-2);
  opacity: .9;
  margin-top: -.2rem;
}

.hero__kicker {
  display: inline-block;
  margin: clamp(1.2rem, 3.5vw, 1.8rem) auto 0;
  padding: .35rem 1rem;
  font-size: clamp(.7rem, 1.8vw, .8rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wood-2);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

.hero__title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.6rem, 3vw, 1.4rem);
  margin: clamp(.9rem, 2.5vw, 1.3rem) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink-blue);
}
.hero__deco {
  flex: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  color: var(--wood-2);
  opacity: .7;
}
.hero__deco--l { transform: rotate(-12deg); }
.hero__deco--r { transform: scaleX(-1) rotate(-12deg); }

.hero__sub {
  margin: clamp(1rem, 3vw, 1.5rem) auto 0;
  max-width: 38ch;
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  color: var(--ink-soft);
}

/* ─────────────  Pill de sección  ───────────── */
.section-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: clamp(2.8rem, 7vw, 4.2rem) auto .7rem;
  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), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.section-pill__icon { color: var(--wood-2); }
.section-note {
  margin: 0 auto clamp(1.4rem, 4vw, 2rem);
  max-width: 40ch;
  font-size: clamp(.92rem, 2.1vw, 1.02rem);
  font-style: italic;
  color: var(--ink-soft);
}
.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: 900px) {
  .links__grid   { grid-template-columns: repeat(4, 1fr); }
  .preview__grid { grid-template-columns: repeat(3, 1fr); max-width: none; gap: clamp(1.2rem, 3vw, 2rem); }
}

/* Stagger interno de las tarjetas de contacto */
.links__grid > li { animation: rise .7s var(--ease-out) backwards; }
.links__grid > li:nth-child(1) { animation-delay: .48s; }
.links__grid > li:nth-child(2) { animation-delay: .54s; }
.links__grid > li:nth-child(3) { animation-delay: .6s; }
.links__grid > li:nth-child(4) { animation-delay: .66s; }

.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), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  overflow: hidden;
  transition: transform .35s var(--ease-out), 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;
  transition: height .35s var(--ease-out), opacity .35s ease;
}
/* 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);
}
.card:hover::before, .card:focus-visible::before { height: 5px; opacity: 1; }
.card:hover::after, .card:focus-visible::after { opacity: .12; bottom: -32%; }
.card:active { transform: translateY(-2px) scale(.985); }

.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 var(--ease-out);
}
.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(.78rem, 1.9vw, .85rem);
  color: var(--ink-mute);
}

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

.polaroid {
  position: relative;
  margin: 0;
  padding: 12px 12px 0;
  background: var(--cream);
  border-radius: 14px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
/* Pinza de madera */
.polaroid__peg {
  position: absolute;
  top: -7px; left: 50%;
  width: 9px; height: 18px;
  transform: translateX(-50%);
  background: linear-gradient(var(--wood-1), var(--wood-3));
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(74, 44, 20, .35);
  z-index: 3;
}

.preview__art {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #efe7da;
}
.preview__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.preview__item:hover .preview__art img,
.preview__item:focus-within .preview__art img { transform: scale(1.04); }

.polaroid figcaption {
  padding: .8rem .2rem 1.1rem;
  font-size: clamp(.82rem, 2vw, .9rem);
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Rotaciones alternas + apilado en móvil */
.preview__item { animation: rise-tilt .8s var(--ease-out) backwards; }
.preview__item:nth-child(1) { --rot: -1.5deg; animation-delay: .6s; }
.preview__item:nth-child(2) { --rot: 1.5deg;  animation-delay: .68s; margin-top: -10px; }
.preview__item:nth-child(3) { --rot: -1deg;   animation-delay: .76s; margin-top: -10px; }
.preview__item .polaroid { transform: rotate(var(--rot)); }
.preview__item:hover .polaroid,
.preview__item:focus-within .polaroid {
  transform: rotate(0) translateY(-8px) scale(1.03);
  box-shadow: var(--shadow-lg);
}
@keyframes rise-tilt {
  from { opacity: 0; transform: translateY(20px) rotate(4deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* Desktop: abanico de escaparate, sin solape vertical */
@media (min-width: 900px) {
  .preview__item { margin-top: 0; }
  .preview__item:nth-child(1) { --rot: -2deg; }
  .preview__item:nth-child(2) { --rot: 1.5deg; }
  .preview__item:nth-child(3) { --rot: -1.5deg; }
  .preview__item:nth-child(2) .polaroid { transform: rotate(var(--rot)) scale(1.04); z-index: 2; }
}

.preview__more {
  margin: clamp(1.6rem, 4vw, 2.2rem) 0 0;
  font-style: italic;
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
  color: var(--ink-soft);
}

/* ─────────────  Cierre  ───────────── */
.closing {
  text-align: center;
  margin-top: clamp(3rem, 8vw, 4.8rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  background: linear-gradient(180deg, transparent, rgba(252, 247, 241, .6));
}
.closing__thanks {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.2rem);
  color: var(--wood-3);
  position: relative;
  display: inline-block;
  line-height: 1.1;
}
/* Subrayado dibujado a mano */
.closing__thanks::after {
  content: "";
  position: absolute;
  left: 4%; right: 4%; bottom: -.12em;
  height: 8px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8' viewBox='0 0 200 8'%3E%3Cpath d='M2 5 C40 1 70 7 100 4 S160 1 198 4' fill='none' stroke='%23e6a3b8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .8;
}
.closing__heart {
  display: block;
  margin: .9rem 0 .6rem;
  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__line { margin: 0 auto 1.6rem; max-width: 34ch; font-size: clamp(.92rem, 2.1vw, 1.02rem); color: var(--ink-soft); }

.closing__social {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 1.6rem;
}
.closing__chip {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-soft);
  border-radius: 14px;
  transition: transform .3s var(--ease-out), color .3s ease, background .3s ease;
}
.closing__chip svg { width: 22px; height: 22px; }
.closing__chip:hover, .closing__chip:focus-visible { transform: translateY(-3px); background: var(--glass-strong); }
.closing__chip:nth-child(1):hover { color: var(--c-email); }
.closing__chip:nth-child(2):hover { color: var(--c-whatsapp); }
.closing__chip:nth-child(3):hover { color: var(--c-instagram); }
.closing__chip:nth-child(4):hover { color: var(--c-tiktok); }

.closing__legal { margin: 0; font-size: clamp(.74rem, 1.8vw, .85rem); color: var(--ink-mute); }

/* ─────────────  Focus ring de marca (a11y)  ───────────── */
a:focus-visible, .card:focus-visible {
  outline: 2px solid var(--c-email);
  outline-offset: 3px;
  border-radius: 14px;
}
.card:focus-visible { border-radius: var(--r-card); }

/* ─────────────  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;
  }
  .preview__item .polaroid { transform: rotate(var(--rot)); }
}

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