/* ============================================================
   Tuin — Planes Bento & Omakase (héroe del menú)
   CSS propio (el sitio es estático sin build; nada depende de
   Tailwind sin compilar). Acompaña a planes.js + index.html
   Paleta: #c7a3ff primario · #ffdbff lavanda · #def5ff cielo
   ============================================================ */

:root {
  --tp-primary: #c7a3ff;
  --tp-lavender: #ffdbff;
  --tp-sky: #def5ff;
  --tp-tertiary: #8050a0;
  --tp-ink: #1b1a1c;
  --tp-surface: #fefcff;
  --tp-chrome: linear-gradient(115deg, #e7d8ff 0%, #fff 22%, #c7a3ff 40%, #fff 58%, #b89bff 78%, #fff 100%);
}

/* ---------- Reveal base (entrada por scroll) ---------- */
.tp-reveal { opacity: 0; transform: translateY(34px); }
.tp-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

/* ============================================================
   TARJETA DE PLAN
   ============================================================ */
.tp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 2rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  will-change: transform;
}
.tp-card::after { /* borde luminoso sutil */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid rgba(255,255,255,.45); pointer-events: none; z-index: 4;
}

/* Bento — curado, calmado */
.tp-card--bento {
  background:
    radial-gradient(120% 90% at 15% 0%, #fff 0%, #fdf4ff 45%, #f3e8ff 100%);
  box-shadow: 0 30px 60px -24px rgba(199,163,255,.35);
}
/* Omakase — máxima expresión, más intenso */
.tp-card--omakase {
  color: #fff;
  background:
    radial-gradient(130% 110% at 80% -10%, #b98bff 0%, #8d5fd6 45%, #5a3a8f 100%);
  box-shadow: 0 40px 80px -22px rgba(128,80,160,.6);
}
.tp-card--omakase .tp-desc { color: rgba(255,255,255,.82); }
.tp-card--omakase .tp-price-unit { color: rgba(255,255,255,.7); }
.tp-card--omakase .tp-chip { background: rgba(255,255,255,.16); color: #fff; }
.tp-card--omakase .tp-meta { color: rgba(255,255,255,.78); }

/* glow animado de fondo (omakase) */
.tp-card--omakase::before {
  content: ""; position: absolute; z-index: 0; inset: -40% -20% auto auto;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,219,255,.55), transparent 65%);
  filter: blur(30px); animation: tp-drift 9s ease-in-out infinite;
}
@keyframes tp-drift {
  0%,100% { transform: translate(0,0) scale(1); opacity: .8; }
  50%     { transform: translate(-18px,22px) scale(1.12); opacity: 1; }
}

.tp-card > * { position: relative; z-index: 2; }

/* hover lift (se complementa con el tilt JS) */
@media (hover: hover) {
  .tp-card:hover { box-shadow: 0 48px 90px -20px rgba(128,80,160,.45); }
}

/* ---------- Badge ---------- */
.tp-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 999px;
  font: 700 .68rem/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.tp-badge--bento { background: var(--tp-sky); color: #18506b; }
.tp-badge--omakase {
  background: #fff; color: #5a3a8f;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: tp-pulse 2.4s ease-out infinite;
}
@keyframes tp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.tp-badge .tp-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Texto ---------- */
.tp-card h4 {
  font: 800 clamp(1.6rem,4vw,2.4rem)/1.05 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.02em; margin: 0 0 .75rem;
}
.tp-card--bento h4 { color: var(--tp-ink); }
.tp-desc { font-size: 1rem; line-height: 1.55; color: #50616b; margin: 0 0 1.5rem; max-width: 42ch; }

/* ---------- Meta (duración + chips de barra) ---------- */
.tp-meta {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 700 .8rem/1 'Plus Jakarta Sans', sans-serif; color: #50616b;
  margin-bottom: 1rem;
}
.tp-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.75rem; }
.tp-chip {
  opacity: 0; transform: translateY(8px);
  padding: .35rem .7rem; border-radius: 999px;
  background: #f2e8ff; color: #6b4aa0;
  font: 700 .72rem/1 'Plus Jakarta Sans', sans-serif;
}
.tp-chip.is-in { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }

/* ---------- Precio + CTA ---------- */
.tp-price { display: flex; align-items: baseline; gap: .4rem; margin-top: auto; }
.tp-price-num {
  font: 800 clamp(2.4rem,6vw,3.4rem)/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.03em;
}
.tp-card--bento .tp-price-num { color: var(--tp-tertiary); }
.tp-card--omakase .tp-price-num { color: #fff; }
.tp-price-unit { font-size: .9rem; font-weight: 600; color: #50616b; }

.tp-cta {
  margin-top: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.5rem; border-radius: 999px;
  font: 700 1rem/1 'Plus Jakarta Sans', sans-serif; text-decoration: none;
  transition: transform .25s ease, gap .25s ease, box-shadow .25s ease;
}
.tp-cta--bento { background: var(--tp-ink); color: #fff; }
.tp-cta--omakase { background: #fff; color: #5a3a8f; }
.tp-cta:hover { transform: translateY(-2px); gap: .8rem; box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); }
.tp-cta svg { width: 1.05rem; height: 1.05rem; }

/* ============================================================
   STAGE — las uñas + decoración animada
   ============================================================ */
.tp-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 1.4rem; margin-bottom: 1.5rem; overflow: hidden;
  background: #ecd7fa;
  box-shadow: inset 0 0 0 1px rgba(90,58,143,.08);
}
/* match each photo's own lavender so the rounded edge blends seamlessly */
.tp-card--bento .tp-stage { background: #ecd7fa; }
.tp-card--omakase .tp-stage { background: #eedbfc; }
.tp-stage svg, .tp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-stage img { object-fit: cover; }

/* superficie de cada uña (se pinta) */
.tp-nail-plate { transition: fill .6s ease; stroke: rgba(128,80,160,.16); stroke-width: 1; filter: drop-shadow(0 3px 4px rgba(128,80,160,.22)); }
.tp-card--omakase .tp-nail-plate { stroke: rgba(255,255,255,.35); }

/* barrido chrome sobre las uñas */
.tp-nail-shine {
  fill: url(#tpChrome);
  opacity: .0;
  mix-blend-mode: screen;
  animation: tp-shine 3.6s ease-in-out infinite;
}
@keyframes tp-shine {
  0%, 12% { opacity: 0; }
  45%     { opacity: .85; }
  78%,100%{ opacity: 0; }
}

/* charms que caen / orbitan */
.tp-charm { opacity: 0; transform-box: fill-box; transform-origin: center; }
.tp-charm.is-in { animation: tp-charm-in .6s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes tp-charm-in {
  0%   { opacity: 0; transform: translateY(-26px) scale(.4) rotate(-25deg); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.tp-charm-float { animation: tp-float 4s ease-in-out infinite; }
@keyframes tp-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }

/* caviar / perlas que estallan */
.tp-bead { opacity: 0; transform-box: fill-box; transform-origin: center; }
.tp-bead.is-in { animation: tp-bead-pop .5s ease-out forwards; }
@keyframes tp-bead-pop { 0%{ opacity:0; transform: scale(0);} 60%{opacity:1; transform: scale(1.25);} 100%{opacity:1; transform: scale(1);} }

/* sparkles */
.tp-spark { transform-box: fill-box; transform-origin: center; animation: tp-spark 2.4s ease-in-out infinite; }
.tp-spark:nth-of-type(2) { animation-delay: .8s; }
.tp-spark:nth-of-type(3) { animation-delay: 1.5s; }
@keyframes tp-spark { 0%,100%{ opacity:0; transform: scale(.3) rotate(0);} 50%{ opacity:1; transform: scale(1) rotate(45deg);} }

/* ============================================================
   CÓMO FUNCIONA — 3 pasos
   ============================================================ */
.tp-steps { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .tp-steps { grid-template-columns: repeat(3,1fr); } }
.tp-step {
  position: relative; padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  background: #fff; border-radius: 1.5rem;
  box-shadow: 0 20px 40px -28px rgba(199,163,255,.5);
}
.tp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--tp-lavender); color: #5a3a8f;
  font: 800 1rem/1 'Plus Jakarta Sans', sans-serif; margin-bottom: .9rem;
}
.tp-step h5 { font: 800 1.1rem/1.2 'Plus Jakarta Sans', sans-serif; color: var(--tp-ink); margin: 0 0 .35rem; }
.tp-step p { font-size: .92rem; line-height: 1.5; color: #50616b; margin: 0; }

/* ============================================================
   BARRA CREATIVA — swatches animados (foto-real lista para entrar)
   ============================================================ */
.tp-swatch {
  position: relative; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 6px 14px -8px rgba(128,80,160,.5);
  /* para sustituir por foto real: background-image:url(assets/swatches/xx.webp); background-size:cover */
}
.tp-swatch::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow: inset 0 4px 8px rgba(255,255,255,.6); }

/* chrome */
.tp-sw-chrome { background: var(--tp-chrome); background-size: 220% 220%; animation: tp-chrome-move 3.5s linear infinite; }
@keyframes tp-chrome-move { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
/* aurora / holo */
.tp-sw-aurora { background: linear-gradient(120deg,#ffd6f5,#c7a3ff,#a7f0ff,#d6ffe0,#ffd6f5); background-size: 300% 300%; animation: tp-aurora 6s ease infinite; }
@keyframes tp-aurora { 0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;} }
/* cat eye */
.tp-sw-cateye { background: radial-gradient(circle at 50% 50%, #6b4aa0, #2a1840); }
.tp-sw-cateye::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg,transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%); animation: tp-cateye 3s ease-in-out infinite; }
@keyframes tp-cateye { 0%,100%{ transform: translateX(-30%) rotate(8deg);} 50%{ transform: translateX(30%) rotate(8deg);} }
/* glitter */
.tp-sw-glitter { background: #c7a3ff; }
.tp-sw-glitter::before { content:""; position:absolute; inset:0; background-image: radial-gradient(#fff 1px, transparent 1.4px), radial-gradient(#ffd6f5 1px, transparent 1.4px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; animation: tp-glitter 1.4s steps(4) infinite; }
@keyframes tp-glitter { 0%,100%{ opacity:.6;} 50%{ opacity:1;} }
/* pigmento (bloom) */
.tp-sw-pigment { background: #ffdbff; }
.tp-sw-pigment::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 60%, #c7a3ff, transparent 60%); animation: tp-bloom 3s ease-in-out infinite; }
@keyframes tp-bloom { 0%,100%{ transform: scale(.5); opacity:.5;} 50%{ transform: scale(1.05); opacity:1;} }
/* caviar */
.tp-sw-caviar { background: #f2e8ff; }
.tp-sw-caviar::before { content:""; position:absolute; inset:0; background-image: radial-gradient(#8050a0 28%, transparent 30%); background-size: 7px 7px; }
/* relieve 3D */
.tp-sw-relief { background: radial-gradient(circle at 38% 32%, #fff, #c7a3ff 70%); }
.tp-sw-relief::before { content:""; position:absolute; inset: 26%; border-radius:50%; background: radial-gradient(circle at 38% 32%, #fff, #a07ad6); box-shadow: 0 4px 6px rgba(90,58,143,.5); animation: tp-relief 3s ease-in-out infinite; }
@keyframes tp-relief { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} }
/* charm */
.tp-sw-charm { background: linear-gradient(135deg,#ffe9a8,#ffd6f5); display:flex; align-items:center; justify-content:center; }
.tp-sw-charm::before { content:"★"; color:#fff; font-size:1.1rem; text-shadow: 0 2px 3px rgba(128,80,160,.4); animation: tp-spin 6s linear infinite; }
@keyframes tp-spin { to{ transform: rotate(360deg);} }

.tp-swatch-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
}

/* ============================================================
   ACCESIBILIDAD — respeta prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tp-reveal { opacity: 1 !important; transform: none !important; }
  .tp-chip, .tp-charm, .tp-bead { opacity: 1 !important; transform: none !important; }
  .tp-nail-shine, .tp-charm-float, .tp-spark, .tp-card--omakase::before,
  .tp-badge--omakase, .tp-sw-chrome, .tp-sw-aurora, .tp-sw-cateye::before,
  .tp-sw-glitter::before, .tp-sw-pigment::before, .tp-sw-relief::before,
  .tp-sw-charm::before { animation: none !important; }
}