/* ==========================================================================
   BASE · Paleta (variables), reset, tipografía y componentes compartidos por TODAS las páginas
   ========================================================================== */

/* ==========================================================================
   PALETA DE COLORES Y VARIABLES GLOBALES  ·  Identidad Verónica Sánchez
   Fondos:  Lino #E8DFDA · Crema #F5F0ED · Blanco cálido #FDFCFB · Arena #DFD3CC
   Vinos:   Tinta #3B2A27 · Medio #5A4140 · Acento #7B4A4F · Burdeos #8C5A5E
   Apoyo:   Gris topo #6E625F · Rosa grisáceo #917E7B · Rosa polvo #C9AFA9 · Rosa niebla #EFE2DE
   Oros:    Apagado #B9A179 · Viejo #967F53  (solo trazo fino y decoración, nunca texto)
   Reglas:  un único vino para acciones (#7B4A4F) · tarjetas sobre crema · oro solo en filetes
   ========================================================================== */

:root {
  /* Fondos */
  --bg-main: #E8DFDA;          /* Lino: fondo principal */
  --bg-card: #F5F0ED;          /* Crema: tarjetas y bloques destacados */
  --bg-warm: #FDFCFB;          /* Blanco cálido: formularios / texto sobre vino */
  --bg-subtle: #EFE2DE;        /* Rosa niebla: franjas, avisos */
  --bg-dark-accent: #3B2A27;   /* Vino tinta: bloques oscuros */

  /* Texto */
  --primary-dark: #3B2A27;     /* Vino tinta: titulares y texto principal */
  --text-dark: #3B2A27;
  --text-heading-soft: #5A4140;/* Vino medio: subtítulos y logo */
  --text-muted: #6E625F;       /* Gris topo: cuerpo de texto */

  /* Acciones (un solo vino) */
  --accent-wine: #7B4A4F;      /* Vino acento: botones y enlaces */
  --accent-wine-hover: #8C5A5E;/* Burdeos: hover de botones */

  /* Oros: SOLO trazo fino y decoración */
  --accent-gold: #B9A179;      /* Oro apagado */
  --accent-gold-hover: #967F53;/* Oro viejo */

  --accent-green: #25D366;     /* WhatsApp (color de marca) */

  /* Bordes */
  --border-light: #C9AFA9;     /* Rosa polvo: bordes de tarjeta, filetes */
  --border-soft: #DFD3CC;      /* Arena: separadores */
  --border-gold: rgba(185, 161, 121, 0.55);
  --rose-dust: #C9AFA9;

  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --shadow-soft: 0 8px 24px rgba(59, 42, 39, 0.07);
  --shadow-hover: 0 12px 32px rgba(59, 42, 39, 0.13);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-dark);
  font-family: var(--font-body);
  line-height: 1.6;
  scroll-behavior: smooth;
}

a {
  color: var(--accent-wine);
  text-decoration: none;
  transition: all 0.3s ease;
}

html {
  scroll-behavior: smooth;
  /* Espaciado superior para que el menú superior fijo no tape los títulos al desplazarse */
  scroll-padding-top: 90px; 
}

.badge-sub {
  color: var(--accent-wine);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.btn-profile-primary {
  background-color: var(--accent-wine);
  color: #FDFCFB !important;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.25s ease;
}

.btn-profile-primary:hover {
  background-color: var(--accent-wine-hover);
}

.btn-profile-secondary {
  background-color: transparent;
  border: 1.5px solid var(--accent-wine);
  color: var(--accent-wine) !important;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.25s ease;
}

.btn-profile-secondary:hover {
  background-color: var(--accent-wine-hover);
  color: #FDFCFB !important;
}

.section-header {
  text-align: center;
  margin-bottom: 35px;
}

.section-header h2 {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1rem;
}

.badge-sub-light {
  color: var(--rose-dust);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}

@keyframes profileMoreIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

html { scroll-padding-top: 90px; }