/*
Theme Name:  Diana Lizbeth
Theme URI:   https://www.dianalizbeth.com
Author:      Gasiem
Description: Tema integrado con Elementor — mismo diseño que el sitio principal.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:     Privado
Text Domain: dli
*/

/* ============================================================
   Diana Lizbeth — Sistema de diseño (espejo de main.css Vue)
   ============================================================ */
:root {
  --lila-50:  #F7F3FC;
  --lila-100: #EFE7F8;
  --lila-200: #DECBF0;
  --lila-300: #C9B0E6;
  --lila-400: #B196D6;
  --lila-500: #9B79C9;
  --lila-600: #835FB3;

  --azul-300: #9CB2E8;
  --azul-400: #6E8FD8;
  --azul-500: #4F6FC4;
  --azul-600: #3B57A8;

  --bg:        #FBFAFE;
  --surface:   #FFFFFF;
  --ink:       #2B2840;
  --ink-soft:  #5C5873;
  --muted:     #8B879C;
  --line:      #ECE7F4;

  --grad-hero:  linear-gradient(135deg, #EFE7F8 0%, #E4ECFB 100%);
  --grad-brand: linear-gradient(120deg, var(--lila-500) 0%, var(--azul-500) 100%);

  --header-bg:    rgba(251, 250, 254, .82);
  --glass:        rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .6);
  --footer-bg:    #211F33;

  --shadow-sm: 0 2px 8px rgba(91,79,140,.06);
  --shadow-md: 0 10px 30px rgba(91,79,140,.10);
  --shadow-lg: 0 24px 60px rgba(91,79,140,.16);

  --radius:    14px;
  --radius-lg: 24px;
  --maxw:      1160px;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  color-scheme: light;
}

html[data-theme="dark"] {
  --lila-50:  #211C2E;
  --lila-100: #2A2440;
  --lila-200: #3A3158;
  --lila-300: #5A4C82;
  --lila-400: #9F86CF;
  --lila-500: #B79EE0;
  --lila-600: #C9B5EC;
  --azul-300: #3A4E80;
  --azul-400: #7E9CE0;
  --azul-500: #93ADE8;
  --azul-600: #AFC2EF;
  --bg:        #141220;
  --surface:   #1E1B2C;
  --ink:       #F1EEF8;
  --ink-soft:  #BFB9D2;
  --muted:     #8E89A4;
  --line:      #322C46;
  --grad-hero: linear-gradient(135deg, #241E38 0%, #1A2138 100%);
  --grad-brand: linear-gradient(120deg, #9B79C9 0%, #5F84D6 100%);
  --header-bg:    rgba(20,18,32,.82);
  --glass:        rgba(30,27,44,.72);
  --glass-border: rgba(255,255,255,.08);
  --footer-bg:    #100E1A;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 10px 30px rgba(0,0,0,.40);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1rem; color: var(--ink-soft); }
a  { color: var(--azul-600); text-decoration: none; transition: color .2s; }
a:hover { color: var(--lila-600); }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section       { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--alt  { background: var(--lila-50); }

.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lila-600); margin-bottom: .8rem;
}
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head--center { margin-inline: auto; text-align: center; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { color: #fff; box-shadow: var(--shadow-lg); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { color: var(--lila-600); border-color: var(--lila-300); }

/* Tarjetas */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Grids */
.grid   { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .section { padding: 56px 0; } }

.chip {
  display: inline-block; padding: .3rem .8rem; border-radius: 999px;
  background: var(--lila-100); color: var(--lila-600);
  font-size: .8rem; font-weight: 600;
}

:focus-visible { outline: 3px solid var(--lila-300); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }