/* ============================================
   ANDREA FRAGOZO — EN CONSTRUCCIÓN
   Premium "Coming Soon" Medical Page
   Palette: Medical Teal + Gold
   Fonts: Figtree + Noto Sans
   ============================================ */

:root {
  --primary:        #0B6E7F;
  --primary-dark:   #064E5A;
  --primary-light:  #0891B2;
  --accent:         #CA8A04;
  --accent-light:   rgba(202,138,4,.10);
  --bg:             #F0FDFA;
  --bg-glass:       rgba(255,255,255,.72);
  --text:           #134E4A;
  --text-muted:     #5F7A77;
  --white:          #ffffff;
  --border:         rgba(11,110,127,.08);
  --shadow:         0 8px 32px rgba(11,110,127,.10);
  --radius:         16px;
  --radius-sm:      10px;
  --radius-full:    999px;
  --transition:     all .35s cubic-bezier(.25,.8,.25,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Noto Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

h1,h2,h3{
  font-family:'Figtree',sans-serif;
  font-weight:700;
  line-height:1.2;
  color:var(--primary-dark);
}

/* ---------- Animated BG orbs ---------- */
body::before,
body::after{
  content:'';
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
body::before{
  top:-10%;left:-5%;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(8,145,178,.07),transparent 70%);
  animation:drift 12s ease-in-out infinite alternate;
}
body::after{
  bottom:-10%;right:-5%;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(202,138,4,.05),transparent 70%);
  animation:drift 10s ease-in-out infinite alternate-reverse;
}

/* ==========================================
   MAIN WRAPPER — full viewport centering
   ========================================== */
.page-wrapper{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ==========================================
   HERO "EN CONSTRUCCIÓN"
   ========================================== */
.hero{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 1.5rem;
}

.hero-card{
  background:var(--bg-glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:24px;
  box-shadow:
    0 24px 64px rgba(11,110,127,.08),
    inset 0 0 0 1px rgba(255,255,255,.5);
  max-width:560px;
  width:100%;
  padding:3.5rem 2.5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(30px);
  animation:fadeUp .9s .2s ease forwards;
}

/* Top accent line */
.hero-card::before{
  content:'';
  position:absolute;
  top:0;left:10%;right:10%;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--primary-light),var(--accent),var(--primary-light),transparent);
  border-radius:3px 3px 0 0;
}

/* --- Profile --- */
.profile-frame{
  position:relative;
  width:180px;height:180px;
  margin:0 auto 2rem;
}

.profile-frame::before{
  content:'';
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:conic-gradient(from 180deg,var(--primary-light),var(--accent),var(--primary-light));
  animation:rotate 8s linear infinite;
  opacity:.55;
}

.profile-img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--white);
  position:relative;
  z-index:2;
  box-shadow:0 12px 30px rgba(11,110,127,.15);
}

/* --- Text --- */
.hero-name{
  font-size:clamp(1.8rem,5vw,2.4rem);
  margin-bottom:.3rem;
}

.hero-name span{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-specialty{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent-light);
  color:var(--accent);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  padding:.4rem 1rem;
  border-radius:var(--radius-full);
  margin-bottom:2rem;
  border:1px solid rgba(202,138,4,.15);
}

/* --- Loading Section --- */
.loading-section{
  background:rgba(255,255,255,.5);
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:1.8rem 2rem;
  margin-bottom:2rem;
  position:relative;
  overflow:hidden;
}

.loading-icon{
  font-size:1.6rem;
  margin-bottom:.75rem;
  animation:pulse 2s ease-in-out infinite;
}

.loading-title{
  font-family:'Figtree',sans-serif;
  font-size:1rem;
  font-weight:600;
  color:var(--primary-dark);
  margin-bottom:.4rem;
}

.loading-sub{
  font-size:.85rem;
  color:var(--text-muted);
  margin-bottom:1.5rem;
}

.progress-track{
  width:100%;
  background:rgba(11,110,127,.06);
  border-radius:20px;
  height:10px;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.04);
}

.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--primary-dark),var(--primary-light),var(--accent));
  border-radius:20px;
  transition:width 3s cubic-bezier(.2,.8,.2,1);
  position:relative;
}

.progress-fill::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shimmer 2s infinite;
}

.progress-meta{
  display:flex;
  justify-content:space-between;
  margin-top:.6rem;
  font-size:.75rem;
  color:var(--text-muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.8px;
}

/* --- Instagram link --- */
.ig-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.7rem 1.4rem;
  border-radius:var(--radius-full);
  border:1.5px solid var(--border);
  font-weight:500;
  font-size:.9rem;
  color:var(--primary);
  background:var(--white);
  transition:var(--transition);
  margin-bottom:0;
}

.ig-link:hover{
  border-color:var(--primary-light);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(8,145,178,.12);
}

.ig-link svg{width:18px;height:18px}

/* ==========================================
   BOOKING SECTION
   ========================================== */
.booking{
  background:var(--white);
  border-top:1px solid var(--border);
  padding:3rem 1.5rem;
}

.booking-inner{
  max-width:520px;
  margin:0 auto;
  text-align:center;
}

.booking-inner h2{
  font-size:1.4rem;
  margin-bottom:.4rem;
}

.booking-inner>p{
  font-size:.88rem;
  color:var(--text-muted);
  margin-bottom:2rem;
}

.form-group{
  margin-bottom:1rem;
  text-align:left;
}

.form-group label{
  display:block;
  font-size:.8rem;
  font-weight:600;
  margin-bottom:.35rem;
  color:var(--text);
}

.form-group input{
  width:100%;
  padding:.7rem 1rem;
  border:1.5px solid rgba(11,110,127,.12);
  border-radius:var(--radius-sm);
  font-family:'Noto Sans',sans-serif;
  font-size:.9rem;
  background:var(--bg);
  color:var(--text);
  transition:all .2s ease;
  outline:none;
}

.form-group input:focus{
  border-color:var(--primary-light);
  box-shadow:0 0 0 3px rgba(8,145,178,.1);
  background:var(--white);
}

.btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  font-weight:600;
  font-size:.95rem;
  padding:.9rem 1.8rem;
  border-radius:var(--radius-full);
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:var(--white);
  box-shadow:0 6px 20px rgba(8,145,178,.25);
  transition:var(--transition);
  margin-top:.5rem;
}

.btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(8,145,178,.35);
}

.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}

.btn-submit svg{width:18px;height:18px}

#formStatus{
  margin-top:1rem;
  padding:.7rem 1rem;
  border-radius:var(--radius-sm);
  font-size:.85rem;
  display:none;
  text-align:center;
}
#formStatus.success{display:block;background:rgba(34,197,94,.1);color:#15803d}
#formStatus.error{display:block;background:rgba(239,68,68,.1);color:#dc2626}

/* ==========================================
   CERTIFICATIONS FOOTER
   ========================================== */
.cert-footer{
  background:var(--bg);
  border-top:1px solid var(--border);
  padding:2rem 1.5rem 1.2rem;
  text-align:center;
}

.cert-label{
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:1rem;
}

.cert-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}

.cert-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  opacity:.55;
  transition:var(--transition);
}

.cert-badge:hover{opacity:.85}

.cert-badge img{
  height:50px;
  width:auto;
  object-fit:contain;
  filter:grayscale(30%);
}

.cert-badge span{
  font-size:.62rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-muted);
}

/* --- Bottom copyright --- */
.footer-copy{
  text-align:center;
  padding:.8rem 1rem;
  font-size:.7rem;
  color:var(--text-muted);
  opacity:.6;
  background:var(--bg);
}

/* ==========================================
   KEYFRAMES
   ========================================== */
@keyframes fadeUp{
  to{opacity:1;transform:translateY(0)}
}
@keyframes rotate{
  to{transform:rotate(360deg)}
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}
@keyframes drift{
  to{transform:translate(30px,20px)}
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media(max-width:600px){
  .hero{padding:2rem 1rem}
  .hero-card{
    padding:2.5rem 1.5rem;
    border-radius:18px;
  }
  .profile-frame{width:150px;height:150px}
  .loading-section{padding:1.4rem 1.2rem}
  .booking{padding:2.5rem 1rem}
  .cert-logos{gap:1.5rem}
  .cert-badge img{height:40px}
}