/* =========================================================
   Producciones Vásquez — Liquid Glass Linktree
   Palette: dusk-purple, sunset-orange/gold, quetzal-green/coral
   ========================================================= */

:root{
  --dusk-deep:      #1b1230;
  --dusk-purple:    #3a2350;
  --sunset-orange:  #e8763b;
  --sunset-gold:    #f6b942;
  --coral:          #d6483a;
  --quetzal-green:  #2f9e6e;
  --sand:           #f7ead2;

  --glass-bg:       rgba(255,255,255,0.10);
  --glass-bg-soft:  rgba(255,255,255,0.06);
  --glass-border:   rgba(255,255,255,0.35);
  --glass-highlight: rgba(255,255,255,0.55);
  --text-main:      #fbf3e4;
  --text-dim:       rgba(251,243,228,0.72);

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-pill: 999px;

  --shadow-glass: 0 8px 32px rgba(20,10,35,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--text-main);
  background: var(--dusk-deep);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------------- Ambient sky background ---------------- */
.sky{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.sky__gradient{
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 45% at 74% 18%, rgba(246,185,66,0.55), transparent 60%),
    linear-gradient(180deg, #24163d 0%, #4a2a52 28%, #c85a3b 62%, #f0a24a 82%, #f6c869 100%);
  background-size: 140% 140%;
  animation: driftGradient 26s ease-in-out infinite alternate;
}

@keyframes driftGradient{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 30% 15%; }
}

.sun{
  position:absolute;
  top: 8%;
  right: 12%;
  width: clamp(120px, 22vw, 260px);
  height: clamp(120px, 22vw, 260px);
  border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #fff3cf, var(--sunset-gold) 55%, var(--sunset-orange) 100%);
  box-shadow: 0 0 90px 30px rgba(246,185,66,0.45);
  animation: sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 90px 30px rgba(246,185,66,0.45); }
  50%{ transform: scale(1.045); box-shadow: 0 0 120px 46px rgba(246,185,66,0.6); }
}

.haze{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(27,18,48,0.55) 100%);
  mix-blend-mode: multiply;
  pointer-events:none;
}

.mountains{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height: 34vh;
  opacity: 0.85;
}

.cloud{
  position:absolute;
  background: rgba(255,255,255,0.65);
  border-radius: 999px;
  filter: blur(1px);
  opacity: 0.55;
}
.cloud::before, .cloud::after{
  content:"";
  position:absolute;
  background: inherit;
  border-radius: inherit;
}
.cloud--a{ width:150px; height:42px; top:14%; left:-20%; animation: driftCloud 48s linear infinite; }
.cloud--a::before{ width:70px; height:70px; top:-32px; left:14px; }
.cloud--a::after{ width:50px; height:50px; top:-20px; left:78px; }

.cloud--b{ width:110px; height:32px; top:26%; left:-30%; animation: driftCloud 62s linear infinite; animation-delay: -18s; opacity:0.4; }
.cloud--b::before{ width:52px; height:52px; top:-22px; left:10px; }
.cloud--b::after{ width:38px; height:38px; top:-14px; left:56px; }

.cloud--c{ width:90px; height:26px; top:9%; left:-40%; animation: driftCloud 55s linear infinite; animation-delay: -32s; opacity:0.35; }
.cloud--c::before{ width:40px; height:40px; top:-18px; left:8px; }
.cloud--c::after{ width:30px; height:30px; top:-10px; left:46px; }

@keyframes driftCloud{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(160vw); }
}

.saguaro{
  position:absolute;
  bottom: 0;
  width: 34px;
  height: 26vh;
  background: linear-gradient(180deg, #2f5b46, #1f3f32);
  border-radius: 16px 16px 4px 4px;
  opacity: 0.9;
}
.saguaro::before, .saguaro::after{
  content:"";
  position:absolute;
  width: 26px;
  height: 70px;
  background: inherit;
  border-radius: 14px;
}
.saguaro--left{ left: 4%; height: 22vh; }
.saguaro--left::before{ left: -22px; bottom: 40%; transform: rotate(0deg); border-radius: 14px 14px 14px 4px;}
.saguaro--left::after{ left: -22px; bottom: 40%; height:24px; width:24px; border-radius: 50% 50% 0 0; top:-24px; }
.saguaro--right{ right: 6%; height: 17vh; display:none; }

@media (min-width: 720px){
  .saguaro--right{ display:block; }
}

#dust{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* ---------------- Layout ---------------- */
.wrap{
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 20px 60px;
  display:flex;
  flex-direction: column;
  gap: 18px;
}

[data-reveal]{
  opacity:0;
  transform: translateY(18px);
  animation: reveal 0.8s var(--ease) forwards;
}
.hero{ animation-delay: .05s; }
.bio{ animation-delay: .2s; }
.services{ animation-delay: .32s; }
.links{ animation-delay: .44s; }
.footer{ animation-delay: .6s; }

@keyframes reveal{
  to{ opacity:1; transform: translateY(0); }
}

/* ---------------- Hero ---------------- */
.hero{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding-top: 4px;
}

.live-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 8px;
  box-shadow: var(--shadow-glass);
}
.live-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(214,72,58,0.7);
  animation: pulseDot 1.6s ease-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(214,72,58,0.55); }
  70%{ box-shadow: 0 0 0 8px rgba(214,72,58,0); }
  100%{ box-shadow: 0 0 0 0 rgba(214,72,58,0); }
}
.live-chip__time{
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  font-weight: 600;
}

.avatar-ring{
  position:relative;
  width: 128px; height:128px;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(140deg, var(--sunset-gold), var(--coral) 55%, var(--quetzal-green));
  box-shadow: 0 10px 30px rgba(20,10,35,0.45);
  animation: floatY 6s ease-in-out infinite;
}
.avatar{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  border: 3px solid rgba(27,18,48,0.85);
  display:block;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

.brand{
  margin: 6px 0 0;
  line-height: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.brand__eyebrow{
  font-family:"Fraunces", serif;
  font-style: italic;
  font-weight:500;
  font-size: 1.05rem;
  color: var(--sunset-gold);
  letter-spacing: 0.01em;
}
.brand__name{
  font-family:"Fraunces", serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #fff6e2, var(--sunset-gold) 55%, var(--coral));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}

.tagline{
  margin: 4px 0 0;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-main);
}

.locale{
  margin:2px 0 0;
  font-size: 0.86rem;
  color: var(--text-dim);
  max-width: 320px;
}
.locale__pin{ margin-right:2px; }

/* ---------------- Glass card base ---------------- */
.card, .services, .glass-btn, .footer{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--shadow-glass);
}

.bio{
  padding: 22px 24px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-main);
}
.bio strong{ color: var(--sunset-gold); font-weight: 700; }

/* ---------------- Services chips ---------------- */
.services{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  justify-content:center;
  background: var(--glass-bg-soft);
}
.chip{
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------- Links ---------------- */
.links{
  display:flex;
  flex-direction:column;
  gap: 14px;
  background: transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  padding:0;
}

.glass-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px 20px;
  text-decoration:none;
  color: var(--text-main);
  overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.glass-btn:hover{
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 40px rgba(20,10,35,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.glass-btn:active{ transform: translateY(-1px) scale(0.99); }

.glass-btn::before{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
  pointer-events:none;
}
.glass-btn:hover::before{ left: 130%; }

.glass-btn__icon{
  width: 40px; height:40px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background: rgba(255,255,255,0.14);
}
.glass-btn__icon svg{ width:20px; height:20px; color: var(--text-main); }

.glass-btn__label{
  font-weight: 700;
  font-size: 1rem;
  flex:1;
}
.glass-btn__arrow{
  opacity:0.6;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.glass-btn:hover .glass-btn__arrow{ transform: translate(3px,-3px); opacity:1; }

.glass-btn--whatsapp .glass-btn__icon{ background: rgba(58,187,120,0.28); color:#8beab0; }
.glass-btn--whatsapp:hover{ background: rgba(58,187,120,0.16); }

.glass-btn--facebook .glass-btn__icon{ background: rgba(85,140,230,0.28); color:#a9c6ff; }
.glass-btn--facebook:hover{ background: rgba(85,140,230,0.16); }

.glass-btn--instagram .glass-btn__icon{ background: linear-gradient(135deg, rgba(240,148,51,0.35), rgba(214,72,58,0.35), rgba(148,72,214,0.35)); color:#ffd9b0; }
.glass-btn--instagram:hover{ background: rgba(214,72,58,0.16); }

/* ---------------- Footer ---------------- */
.footer{
  margin-top: 6px;
  padding: 20px;
  text-align:center;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--glass-bg-soft);
}
.footer p{ margin: 2px 0; }
.footer__quetzal{
  font-size: 1.4rem;
  animation: floatY 5s ease-in-out infinite;
  margin-bottom: 4px;
}
.footer__fine{ opacity:0.7; }

/* ---------------- Responsive tweaks ---------------- */
@media (max-width: 380px){
  .wrap{ padding: 36px 14px 48px; }
  .brand__name{ font-size: 2.5rem; }
  .glass-btn{ padding: 14px 16px; }
}

/* Focus visibility for keyboard users */
a:focus-visible, .glass-btn:focus-visible{
  outline: 2px solid var(--sunset-gold);
  outline-offset: 3px;
}