/* ============================================================
   LUDMILA ESTUDIO — Diseño Champagne & Noir
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --gold:        #B8924A;   /* champagne dorado */
  --gold-lt:     #D4B27A;   /* champagne claro */
  --gold-pale:   #F0E2C8;   /* champagne pálido */
  --noir:        #0D0906;   /* negro cálido (hero, footer) */
  --noir-mid:    #1E140A;   /* marrón oscuro (secciones dark) */
  --marron:      #4A3020;   /* marrón medio */
  --crema:       #FAF7F2;   /* fondo general */
  --crema-mid:   #F2EAD8;   /* sección alternada */
  --blanco:      #FFFFFF;
  --texto:       #2A1F14;   /* texto oscuro */
  --texto-mid:   #5C4A35;   /* texto secundario */
  --texto-muted: #8C7A65;   /* texto suave */

  /* Aliases para templates anteriores */
  --champagne:      var(--gold);
  --champagne-lt:   var(--gold-lt);
  --champagne-pale: var(--gold-pale);
  --espresso:       var(--noir);
  --espresso-mid:   var(--marron);
  --warm-cream:     var(--crema);
  --warm-gray:      var(--texto-muted);
  --card-white:     var(--blanco);
  --color-primary:  var(--gold);
  --color-accent:   var(--marron);
  --color-bg:       var(--crema);
  --color-muted:    var(--texto-muted);

  --font-title: 'Cormorant Garamond', Georgia, serif;
  --font-body:  'DM Sans', system-ui, sans-serif;

  --radio: 10px;
  --sombra: 0 4px 24px rgba(13,9,6,0.08);
  --sombra-hover: 0 16px 48px rgba(13,9,6,0.16);
  --trans: all 0.28s ease;
}

/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--crema);
  color: var(--texto);
  line-height: 1.75;
  font-size: 15px;
}

h1,h2,h3,h4,h5 {
  font-family: var(--font-title);
  color: var(--texto);
  line-height: 1.2;
  font-weight: 600;
}

a { color: var(--gold); transition: var(--trans); }

img { max-width: 100%; }

/* ── Utility ────────────────────────────────────────────────── */
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }

/* Separador ornamental */
.sep {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 2rem 0;
}
.sep::before, .sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,146,74,0.4), transparent);
}
.sep-diamond {
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  margin: 0 20px;
  flex-shrink: 0;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar-ludmila {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(184,146,74,0.18);
  padding: 0.6rem 0;
  box-shadow: 0 1px 20px rgba(13,9,6,0.06);
}

.brand-name {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texto) !important;
  letter-spacing: 0.3px;
}
.brand-name:hover { color: var(--gold) !important; }

.nav-link-custom {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--texto-mid) !important;
  padding: 0.5rem 0.9rem !important;
  position: relative;
  transition: var(--trans);
}
.nav-link-custom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0.9rem; right: 0.9rem;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-link-custom:hover { color: var(--gold) !important; }
.nav-link-custom:hover::after { transform: scaleX(1); }

/* ── Botones ────────────────────────────────────────────────── */
.btn-primary-gold {
  background: var(--gold);
  color: #fff;
  border: 2px solid var(--gold);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 0.6rem 1.8rem;
  transition: var(--trans);
}
.btn-primary-gold:hover, .btn-primary-gold:focus {
  background: var(--noir);
  border-color: var(--noir);
  color: #fff;
  box-shadow: 0 6px 20px rgba(13,9,6,0.25);
  transform: translateY(-2px);
}

.btn-outline-accent {
  background: transparent;
  color: var(--marron);
  border: 1.5px solid var(--marron);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  border-radius: 50px;
  padding: 0.45rem 1.2rem;
  transition: var(--trans);
}
.btn-outline-accent:hover {
  background: var(--marron);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.6);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 0.6rem 1.8rem;
  transition: var(--trans);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* ── Encabezados de sección ─────────────────────────────────── */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 0.95rem;
  color: var(--texto-muted);
  max-width: 520px;
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.8;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--noir);
}

/* Gradiente de fondo — sin dependencia de imágenes externas */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 70% 30%, rgba(90,55,20,0.7) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(60,35,12,0.5) 0%, transparent 60%);
  z-index: 0;
}

/* Glow dorado superior derecho */
.hero-section::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  top: -180px; right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,146,74,0.12) 0%, transparent 65%);
  z-index: 0;
}

/* Elemento decorativo inferior izquierdo */
.hero-glow-left {
  position: absolute;
  width: 400px; height: 400px;
  bottom: -100px; left: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,146,74,0.08) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 2rem 1.5rem;
  max-width: 780px;
  margin: 0 auto;
  animation: fadeUp 1s ease both;
}

.hero-rule {
  width: 50px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 1.8rem;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--gold-lt);
  margin-bottom: 1.2rem;
}

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-title em {
  font-style: italic;
  color: var(--gold-lt);
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  margin-bottom: 2.8rem;
  line-height: 1.8;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ── Cards de servicio ──────────────────────────────────────── */
.service-card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 2.2rem 1.75rem;
  box-shadow: var(--sombra);
  border: 1px solid rgba(184,146,74,0.1);
  border-top: 3px solid transparent;
  transition: var(--trans);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.service-card:hover {
  border-top-color: var(--gold);
  transform: translateY(-7px);
  box-shadow: var(--sombra-hover);
}

.service-icon {
  width: 52px; height: 52px;
  background: var(--gold-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--gold);
  margin-bottom: 1.25rem;
  transition: var(--trans);
  flex-shrink: 0;
}

.service-card:hover .service-icon {
  background: var(--gold);
  color: #fff;
}

.service-name {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 0.6rem;
}

.service-desc {
  font-size: 0.88rem;
  color: var(--texto-muted);
  font-weight: 300;
  line-height: 1.7;
  flex-grow: 1;
}

.service-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  margin-top: 0.75rem;
}

/* ── Por qué elegirnos ──────────────────────────────────────── */
.why-section { background: var(--noir-mid); }

.why-card {
  padding: 2.5rem 1.75rem;
  border-radius: var(--radio);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,146,74,0.15);
  transition: var(--trans);
  text-align: center;
}
.why-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(184,146,74,0.4);
  transform: translateY(-4px);
}

.why-icon {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.why-title {
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0.6rem;
}

.why-text {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  margin: 0;
}

/* ── Franja CTA ─────────────────────────────────────────────── */
.cta-strip { background: var(--crema-mid); }

/* ── Divisor ornamental ─────────────────────────────────────── */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}
.divider-ornament::before,
.divider-ornament::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
}
.divider-ornament::before {
  background: linear-gradient(90deg, transparent, rgba(184,146,74,0.4));
}
.divider-ornament::after {
  background: linear-gradient(90deg, rgba(184,146,74,0.4), transparent);
}
.divider-ornament-diamond {
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  margin: 0 16px;
  flex-shrink: 0;
}

/* ── Formularios ────────────────────────────────────────────── */
.form-control, .form-select {
  border: 1.5px solid rgba(184,146,74,0.3);
  border-radius: 8px;
  background: var(--blanco);
  font-family: var(--font-body);
  color: var(--texto);
  padding: 0.65rem 0.9rem;
  transition: var(--trans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,146,74,0.15);
  outline: none;
}
.form-control::placeholder { color: var(--texto-muted); font-weight: 300; }
.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--texto-mid);
  margin-bottom: 0.4rem;
}

/* ── Auth (Login / Registro) ────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
}

.auth-left {
  background: var(--noir);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 3rem;
}

/* Círculo decorativo borde dorado */
.auth-left::before {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(184,146,74,0.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.auth-left::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(184,146,74,0.25);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Glow de fondo */
.auth-left-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(90,55,20,0.5) 0%, transparent 70%);
  z-index: 0;
}

.auth-left-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.auth-brand {
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.auth-tagline {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.auth-gold-line {
  width: 40px; height: 1px;
  background: var(--gold);
  margin: 0 auto;
}

.auth-right {
  background: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  flex: 1;
}

.auth-form-box {
  width: 100%;
  max-width: 400px;
}

/* ── Cards citas (mis_citas) ────────────────────────────────── */
.cita-card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 1.6rem;
  border: 1px solid rgba(184,146,74,0.12);
  border-left: 4px solid var(--gold-pale);
  transition: var(--trans);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}
.cita-card:hover {
  box-shadow: var(--sombra-hover);
  transform: translateY(-3px);
}
.cita-aceptada { border-left-color: var(--gold); }
.cita-pendiente { border-left-color: #D4894A; }

.badge-estado {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.85rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.badge-aceptado { background: rgba(184,146,74,0.12); color: var(--marron); }
.badge-pendiente { background: rgba(212,137,74,0.1); color: #7A3E10; }

.cita-servicio {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texto);
}
.cita-fecha-hora {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.85rem; color: var(--texto-muted);
}
.cita-nota {
  font-size: 0.85rem;
  color: var(--marron);
  background: var(--gold-pale);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}
.cita-acciones { margin-top: auto; padding-top: 0.75rem; }
.cita-no-editable { font-size: 0.75rem; color: var(--texto-muted); margin: 0.5rem 0 0; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer-ludmila {
  background: var(--noir);
  color: rgba(255,255,255,0.55);
}
.footer-brand {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
}
.footer-heading {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.35);
}
.footer-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
}
.footer-link { color: var(--gold); text-decoration: none; }
.footer-link:hover { color: var(--gold-lt); }
.footer-divider { border-color: rgba(255,255,255,0.07); margin: 0; }
.footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.28); }

/* ── Tablas ─────────────────────────────────────────────────── */
.table th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--marron);
  background: var(--gold-pale);
  border-color: rgba(184,146,74,0.15);
  padding: 0.75rem 1rem;
}
.table td {
  border-color: rgba(184,146,74,0.08);
  padding: 0.9rem 1rem;
  color: var(--texto-mid);
  font-size: 0.9rem;
}
.table > :not(caption) > * > * { background: transparent; }

/* ── Alertas ────────────────────────────────────────────────── */
.alert-success  { background:#d1e7dd; border-color:#a3cfbb; color:#0a3622; }
.alert-danger   { background:#f8d7da; border-color:#f1aeb5; color:#58151c; }
.alert-warning  { background:#fff3cd; border-color:#ffe69c; color:#664d03; }

/* ── Badges Bootstrap ───────────────────────────────────────── */
.badge {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35em 0.8em;
  border-radius: 50px;
}

/* ── Cards genéricas ────────────────────────────────────────── */
.card { border-radius: var(--radio); }

/* ── Flatpickr ──────────────────────────────────────────────── */
.flatpickr-calendar {
  box-shadow: 0 12px 40px rgba(13,9,6,0.16);
  border-radius: 12px;
  border: 1px solid rgba(184,146,74,0.15);
  font-family: var(--font-body);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}
.flatpickr-day:hover:not(.disabled) { background: var(--gold-pale); }
.flatpickr-day.today { border-bottom: 2px solid var(--gold) !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(0,0,0,0.2) !important;
  text-decoration: line-through;
}
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--texto) !important;
  fill: var(--texto) !important;
}
.flatpickr-weekday { color: var(--gold) !important; font-weight: 600; }

/* ── Animaciones ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .auth-left { min-height: 220px; padding: 2.5rem; }
  .auth-left::before { width: 220px; height: 220px; }
  .auth-left::after  { width: 150px; height: 150px; }
}

@media (max-width: 767px) {
  .hero-title    { font-size: 2.4rem; }
  .hero-actions  { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 260px; }
  .py-6          { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .section-title { font-size: 2rem; }
}

@media (max-width: 575px) {
  .hero-title  { font-size: 2rem; }
  .auth-right  { padding: 2rem 1.25rem; }
}