/* Cloudy Beauty · estilos de portada, productos y 404.
   Tokens tomados del catálogo de servicios (/servicios) para mantener la misma identidad. */
:root{
  --ink:#3f276a;
  --ink-2:#5b4784;
  --violet:#6d5592;
  --violet-deep:#4f3876;
  --brand:#7c4590;
  --btn-bg:rgba(251,238,249,.93);
  --btn-ink:#5a3a8e;
  --ease:cubic-bezier(.2,.75,.2,1);
  --gnav-h:44px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#5b2d86}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#fff;font-size:16px;line-height:1.5;background:#5b2d86;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:12px}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Escena (fondo de nubes de la tarjeta digital) ---------- */
.scene{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(48px + env(safe-area-inset-top)) 16px calc(26vh + env(safe-area-inset-bottom));
}
.scene-bg{position:absolute;inset:0;z-index:-2;background:url("/assets/img/hero.webp") center bottom/cover no-repeat}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(38,12,74,.28) 0%,rgba(66,28,108,.12) 50%,rgba(66,28,108,0) 80%)}
@media(min-aspect-ratio:4/5){.scene{padding-bottom:calc(20vh + env(safe-area-inset-bottom))}}

/* ---------- Navegación global (misma que en /servicios) ---------- */
.gnav{position:sticky;top:0;z-index:5;height:var(--gnav-h);background:rgba(249,237,244,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(109,85,146,.16)}
.gnav ul{list-style:none;display:flex;justify-content:center;height:100%;gap:clamp(4px,3vw,28px)}
.gnav a{display:flex;align-items:center;height:100%;padding:0 12px;font:600 .78rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);box-shadow:inset 0 -2px 0 transparent;transition:color .2s,box-shadow .2s}
.gnav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--violet)}
.gnav a:focus-visible{outline:3px solid #9b6ad0;outline-offset:-4px}
@media(hover:hover){.gnav a:not([aria-current]):hover{color:var(--ink);box-shadow:inset 0 -2px 0 rgba(109,85,146,.35)}}
.gnav + .scene{min-height:calc(100vh - var(--gnav-h));min-height:calc(100svh - var(--gnav-h))}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:.32em;font-family:"Cormorant Garamond",Domine,serif;font-weight:400;letter-spacing:.07em;line-height:1;white-space:nowrap;text-decoration:none;color:inherit}
.logo svg{width:.92em;height:auto;fill:currentColor}
.brand .logo{font-size:clamp(1.25rem,calc((100vw - 48px) / 10.5),3.8rem);text-shadow:0 2px 24px rgba(40,10,80,.35)}
.tagline{margin-top:1rem;font-family:Domine,serif;font-size:clamp(.66rem,2.6vw,.82rem);letter-spacing:.44em;text-transform:uppercase;padding-left:.44em;opacity:.95}

.lede{max-width:22em;margin:clamp(20px,3.4vh,30px) auto 0;font-family:Domine,serif;font-size:clamp(.95rem,3.9vw,1.06rem);line-height:1.65;opacity:.94;text-wrap:balance;text-shadow:0 1px 14px rgba(40,10,80,.45)}

/* ---------- Botones de catálogo (estilo tarjeta digital) ---------- */
.choices{display:flex;flex-direction:column;gap:16px;width:min(340px,100%);margin:clamp(30px,5.5vh,52px) auto 0;list-style:none}
.choice{
  display:flex;align-items:center;gap:18px;min-height:80px;padding:14px 22px;border-radius:18px;
  background:var(--btn-bg);color:var(--btn-ink);text-decoration:none;text-align:left;
  font-weight:600;font-size:1.02rem;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;
  box-shadow:0 14px 30px -16px rgba(40,10,80,.75);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.choice svg{width:48px;height:48px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.choice:active{transform:scale(.97)}
@media(hover:hover){.choice:hover{background:#fff;transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(40,10,80,.85)}}

/* ---------- Página de productos / 404 ---------- */
.panel{width:min(420px,100%);margin:clamp(34px,6vh,56px) auto 0}
.panel h1{font-family:Domine,serif;font-weight:500;text-transform:uppercase;font-size:clamp(1.3rem,6vw,1.9rem);line-height:1.35;letter-spacing:.14em;padding:.9rem .2rem;border-block:1px solid rgba(255,255,255,.75);display:inline-block}
.panel p{margin-top:1.3rem;font-family:Domine,serif;font-size:1.05rem;line-height:1.7;text-shadow:0 1px 14px rgba(40,10,80,.4)}
.actions{display:flex;flex-direction:column;gap:12px;width:min(340px,100%);margin:1.8rem auto 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:0 1.6rem;border-radius:999px;border:0;cursor:pointer;
  font:600 1rem/1.2 Inter,sans-serif;text-decoration:none;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.btn svg{width:1.25em;height:1.25em;fill:currentColor;flex:none}
.btn:active{transform:scale(.97)}
.btn-light{background:#fff;color:var(--violet-deep);box-shadow:0 12px 26px -14px rgba(30,10,60,.6)}
@media(hover:hover){.btn-light:hover{transform:translateY(-2px)}}

/* ---------- Destellos y entrada ---------- */
.sp{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 9px 2px rgba(255,255,255,.85);opacity:.15;animation:tw 3.6s ease-in-out infinite;pointer-events:none}
@keyframes tw{0%,100%{opacity:.1;transform:scale(.7)}50%{opacity:.95;transform:scale(1.25)}}
.rise{opacity:0;transform:translateY(14px);animation:rise 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}