/* ================================================================
   SILMAR ANGELS — elevate.css
   Capa estética premium. Carga DESPUÉS de style.css, refine.css y mobile.css.
   Aire, jerarquía, tarjetas con presencia, divisores decorativos.
   ================================================================ */

:root{
  --e-cream:  #FBF7EC;
  --e-cream2: #F4EAD0;
  --e-ink:    #3A2E1F;
  --e-ink-s:  #6B5A40;
  --e-gold:   #C9A84C;
  --e-gold-d: #8A6E1F;
  --e-gold-l: #E8CE7A;
  --e-violet: #8b5cf6;
  --e-amber:  #f59e0b;
  --e-emerald:#10b981;
  --e-sky:    #3aa7c9;
}

/* ─── Fondo global con grano sutil y nebulosa dorada ─── */
body{
  background:
    radial-gradient(900px 520px at 90% -8%, rgba(232,206,122,.28), transparent 60%),
    radial-gradient(1100px 600px at -10% 18%, rgba(243,231,201,.45), transparent 65%),
    radial-gradient(700px 400px at 50% 110%, rgba(201,168,76,.10), transparent 60%),
    var(--e-cream) !important;
}

/* ─── Aire entre secciones ─── */
.services, .about, .planes, .testimonios, .contacto, .blog-section, .galeria-section{
  padding: 5.5rem 0;
  position: relative;
}
@media (max-width: 768px){
  .services, .about, .planes, .testimonios, .contacto{
    padding: 3.25rem 0 !important;
  }
}

/* Separador decorativo entre secciones */
.services::before,
.planes::before,
.testimonios::before,
.contacto::before{
  content: "✦";
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--e-cream);
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 50%;
  color: var(--e-gold-d);
  font-size: 1rem;
  letter-spacing: .1em;
  box-shadow: 0 6px 18px rgba(201,168,76,.18);
}

/* ─── Tipografía de cabeceras ─── */
.section-label{
  display: inline-block;
  letter-spacing: .32em !important;
  font-size: .72rem !important;
  color: var(--e-gold-d) !important;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 99px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  margin-bottom: 1rem;
}
.section-title{
  font-size: clamp(1.85rem, 4.5vw, 3rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  color: var(--e-ink) !important;
  margin: .35rem 0 .8rem;
}
.section-subtitle{
  max-width: 620px;
  margin: 0 auto !important;
  color: var(--e-ink-s) !important;
  font-size: clamp(.98rem, 1.6vw, 1.1rem) !important;
  line-height: 1.7 !important;
  font-style: italic;
}

/* Filo decorativo bajo el título */
.text-center.reveal > .section-title + .section-subtitle::before{
  content: "";
  display: block;
  width: 56px; height: 1px;
  margin: 1rem auto 1.25rem;
  background: linear-gradient(90deg, transparent, var(--e-gold), transparent);
}

/* ─── Filtro de servicios ─── */
.srv-filter-tabs{
  margin: 2.5rem 0 2.75rem !important;
  gap: .6rem !important;
}
.srv-tab{
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(201,168,76,.28) !important;
  border-radius: 99px !important;
  padding: .55rem 1.15rem !important;
  font-size: .82rem !important;
  color: var(--e-ink-s) !important;
  backdrop-filter: blur(4px);
  transition: all .25s ease;
}
.srv-tab:hover{
  border-color: var(--e-gold) !important;
  color: var(--e-gold-d) !important;
  background: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201,168,76,.15);
}
.srv-tab.active{
  background: linear-gradient(135deg, var(--e-ink), #2a2114) !important;
  border-color: var(--e-ink) !important;
  color: var(--e-gold-l) !important;
  letter-spacing: .04em;
  box-shadow: 0 6px 18px rgba(58,46,31,.25);
}

/* ─── GRID de servicios con MÁS aire ─── */
.srv-all-grid{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.75rem !important;
}

/* ─── Tarjetas de servicio: presencia real ─── */
.srv-card{
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  border: 1px solid rgba(201,168,76,.22) !important;
  border-radius: 18px !important;
  padding: 2rem 1.6rem 1.5rem !important;
  gap: .85rem !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 24px -12px rgba(58,46,31,.18),
    0 2px 6px rgba(201,168,76,.08) !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .25s !important;
}
/* barra superior según categoría */
.srv-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, var(--e-gold-l), var(--e-gold));
  opacity:.85;
}
.srv-card[data-cat="lecturas"]::before  { background: linear-gradient(90deg, #c4b5fd, var(--e-violet)); }
.srv-card[data-cat="terapias"]::before  { background: linear-gradient(90deg, #fcd34d, var(--e-amber)); }
.srv-card[data-cat="desarrollo"]::before{ background: linear-gradient(90deg, #6ee7b7, var(--e-emerald)); }
.srv-card[data-cat="formacion"]::before { background: linear-gradient(90deg, #7dd3fc, var(--e-sky)); }

/* halo decorativo en esquina */
.srv-card::after{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width: 140px; height: 140px;
  background: radial-gradient(closest-side, rgba(201,168,76,.18), transparent 70%);
  z-index: -1;
  transition: transform .5s ease;
}
.srv-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(201,168,76,.5) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 48px -18px rgba(58,46,31,.28),
    0 8px 18px rgba(201,168,76,.18) !important;
}
.srv-card:hover::after{ transform: scale(1.4); }

/* Ícono: medallón circular */
.srv-icon{
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff8e1, #fde9b0);
  border: 1px solid rgba(201,168,76,.35);
  box-shadow: 0 4px 12px rgba(201,168,76,.18), inset 0 1px 0 rgba(255,255,255,.8);
  font-size: 1.7rem !important;
  margin-bottom: .25rem;
}
.srv-card[data-cat="lecturas"] .srv-icon { background: linear-gradient(135deg,#f5f3ff,#ddd6fe); border-color: rgba(139,92,246,.3);}
.srv-card[data-cat="terapias"] .srv-icon { background: linear-gradient(135deg,#fffbeb,#fde68a); border-color: rgba(245,158,11,.3);}
.srv-card[data-cat="desarrollo"] .srv-icon{ background: linear-gradient(135deg,#ecfdf5,#a7f3d0); border-color: rgba(16,185,129,.3);}
.srv-card[data-cat="formacion"] .srv-icon{ background: linear-gradient(135deg,#f0f9ff,#bae6fd); border-color: rgba(58,167,201,.3);}

/* Punto de categoría reposicionado y más visible */
.srv-cat-dot{
  width: 10px !important; height: 10px !important;
  top: 14px !important; right: 14px !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 4px currentColor;
  opacity: .9;
}

.srv-card h4{
  font-size: 1.05rem !important;
  letter-spacing: .01em !important;
  color: var(--e-ink) !important;
  line-height: 1.35 !important;
}
.srv-card p{
  font-size: .92rem !important;
  line-height: 1.7 !important;
  color: var(--e-ink-s) !important;
}
.srv-btn{
  margin-top: .6rem !important;
  padding: .55rem .95rem !important;
  border: 1px solid rgba(201,168,76,.4) !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.7);
  color: var(--e-gold-d) !important;
  font-size: .78rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  width: fit-content;
  transition: all .25s;
}
.srv-btn:hover{
  background: var(--e-ink) !important;
  border-color: var(--e-ink) !important;
  color: var(--e-gold-l) !important;
  transform: translateX(3px);
}

/* Tarjeta destacada */
.srv-card-featured, .srv-card:has(.srv-highlight-badge){
  background: linear-gradient(180deg,#fffef8 0%, #fdf3cf 100%) !important;
  border-color: var(--e-gold) !important;
}
.srv-highlight-badge{
  background: linear-gradient(90deg, var(--e-ink), #2a2114) !important;
  color: var(--e-gold-l) !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
  padding: .35rem .8rem !important;
  border-radius: 99px !important;
}

/* ─── HERO refinement ─── */
.hero{ padding: 6rem 0 4rem; }
@media (max-width:768px){ .hero{ padding: 4rem 0 2.5rem; } }
.hero h1, .hero-title{
  letter-spacing: -0.015em;
  line-height: 1.08;
}

/* ─── MOBILE refinements ─── */
@media (max-width: 768px){
  .srv-all-grid{
    grid-template-columns: 1fr !important;
    gap: 1.1rem !important;
  }
  .srv-card{
    padding: 1.5rem 1.25rem 1.25rem !important;
    border-radius: 16px !important;
  }
  .srv-icon{ width: 48px; height: 48px; font-size: 1.4rem !important; }
  .srv-card h4{ font-size: 1rem !important; }
  .srv-card p{ font-size: .9rem !important; }

  /* Tabs en móvil: scroll horizontal */
  .srv-filter-tabs{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start !important;
    padding: .25rem .75rem .75rem;
    margin: 1.5rem -.75rem 1.75rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .srv-filter-tabs::-webkit-scrollbar{ display: none; }
  .srv-tab{ flex: 0 0 auto; }

  .section-label{ font-size: .65rem !important; padding: .3rem .7rem; }
  .section-title{ font-size: 1.7rem !important; }
  .section-subtitle{ font-size: .92rem !important; padding: 0 .5rem; }

  /* separador decorativo más pequeño en móvil */
  .services::before, .planes::before, .testimonios::before, .contacto::before{
    width: 36px; height: 36px; font-size: .85rem;
  }
}

/* ─── Pequeños toques globales ─── */
img{ border-radius: 10px; }
.btn, button.btn, a.btn{ letter-spacing: .06em; }

/* ════════════════════════════════════════════════════════════════
   FIX PACK v2: Login/Registro, "Cómo comenzar", WhatsApp
   ════════════════════════════════════════════════════════════════ */

/* ── Inputs con icono: ocultar emoji feo, usar línea limpia ── */
.input-icon{ display:none !important; }
.form-input-icon{
  padding: .85rem 1rem !important;
  background: #fff !important;
  border: 1.5px solid rgba(201,168,76,.28) !important;
  border-radius: 12px !important;
  font-size: .95rem !important;
  color: var(--e-ink) !important;
  box-shadow: 0 1px 2px rgba(58,46,31,.04);
  transition: border-color .2s, box-shadow .2s;
}
.form-input-icon:focus{
  border-color: var(--e-gold) !important;
  box-shadow: 0 0 0 4px rgba(201,168,76,.18) !important;
  background:#fff !important;
}
.form-input-icon::placeholder{ color:#b8a98a; font-style: italic; }

/* Toggle de password (ojo) */
.password-toggle, .pw-toggle, [class*="toggle-password"]{
  color: var(--e-gold-d) !important;
  opacity: .7;
}

/* Etiquetas claras */
.form-group label, .form-label{
  font-family: var(--font-cinzel, serif);
  font-size: .78rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--e-ink) !important;
  margin-bottom: .5rem !important;
  display:block;
}

/* Botón principal de auth */
.btn-auth-submit{
  background: linear-gradient(135deg, var(--e-ink) 0%, #2a2114 100%) !important;
  color: var(--e-gold-l) !important;
  border-radius: 99px !important;
  padding: 1rem 1.25rem !important;
  letter-spacing: .12em !important;
  box-shadow: 0 10px 28px rgba(58,46,31,.28) !important;
  font-size: .9rem !important;
}
.btn-auth-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(58,46,31,.36) !important;
}

/* Card de form */
.form-card{
  padding: 1.75rem 1.5rem !important;
  border-radius: 20px !important;
  background:#fff !important;
  border: 1px solid rgba(201,168,76,.2) !important;
  box-shadow: 0 12px 40px -16px rgba(58,46,31,.18) !important;
}
@media (min-width:768px){
  .form-card{ padding: 2.5rem !important; }
}

.auth-header h1{
  font-size: clamp(1.5rem, 5vw, 2rem) !important;
  letter-spacing: -.01em;
}
.auth-header p{ color: var(--e-ink-s) !important; }

/* ── "Cómo comenzar" — pasos como tarjetas con borde dorado ── */
.pasos-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  align-items: stretch;
  margin-top: 2.5rem;
}
.paso-connector{
  display:none !important; /* feo en móvil, redundante en desktop */
}
.paso-card{
  position: relative;
  background: linear-gradient(180deg,#ffffff 0%, #fdf6e3 100%) !important;
  border: 1px solid rgba(201,168,76,.28) !important;
  border-radius: 18px !important;
  padding: 2.5rem 1.5rem 1.5rem !important;
  text-align: center;
  box-shadow: 0 8px 24px -14px rgba(58,46,31,.18);
  transition: transform .35s, box-shadow .35s;
  overflow: visible;
}
.paso-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -16px rgba(58,46,31,.28);
}
.paso-numero{
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--e-ink), #2a2114);
  color: var(--e-gold-l) !important;
  font-family: var(--font-cinzel, serif);
  font-size: .85rem !important;
  letter-spacing: .08em;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(58,46,31,.3);
  border: 2px solid var(--e-cream);
}
.paso-icon{
  font-size: 2.2rem !important;
  margin: .25rem 0 .75rem !important;
  line-height: 1;
}
.paso-card h4{
  font-family: var(--font-cinzel, serif);
  font-size: 1rem !important;
  letter-spacing: .02em;
  color: var(--e-ink) !important;
  margin: 0 0 .6rem !important;
  line-height: 1.35;
}
.paso-card p{
  font-size: .9rem !important;
  color: var(--e-ink-s) !important;
  line-height: 1.65 !important;
  margin: 0 0 1rem !important;
}
.paso-btn{
  display: inline-block;
  padding: .55rem 1.1rem !important;
  border: 1px solid rgba(201,168,76,.45) !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.7);
  color: var(--e-gold-d) !important;
  font-size: .75rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .25s;
}
.paso-btn:hover{
  background: var(--e-ink);
  border-color: var(--e-ink) !important;
  color: var(--e-gold-l) !important;
}

@media (max-width: 768px){
  .pasos-grid{
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-top: 2rem;
  }
  .paso-card{ padding: 2.25rem 1.25rem 1.25rem !important; }
}

/* ── WhatsApp flotante: por encima de la bottom-nav ── */
.wa-float, .whatsapp-float{
  z-index: 1100 !important;
}
@media (max-width: 768px){
  .wa-float, .whatsapp-float{
    bottom: calc(var(--bottom-nav-h, 60px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }
}