/* =============================================================================
   AERIAL DREAMS · by Vanessa Guzmán — THEME.CSS  ·  EL LOOK
   Estética: femenina / romántica / celestial con un guiño Cirque. Crema cálido,
   rosa empolvado y malva, oro suave, luna y estrellas. Serif elegante (Cormorant)
   + script (Parisienne) + sans aireada (Jost). Página de ARTISTA de tela aérea.
   base.css trae la estructura; acá vive el 100% del look. No se toca base.css.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&family=Parisienne&display=swap');

:root {
  /* — TIPOGRAFÍA — */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-script:  'Parisienne', 'Segoe Script', cursive;
  --font-body:    'Jost', system-ui, -apple-system, sans-serif;

  /* — PALETA (femenina / celestial) — */
  --color-ink:        #5E3D49;   /* malva profundo: texto + footer + paneles oscuros */
  --color-bg:         #FCF6F3;   /* crema exacto del logo */
  --color-bg-alt:     #F6E9E5;   /* blush aireado (familia del logo) */
  --color-muted:      #A07F88;   /* malva apagado (texto secundario) */
  --color-rule:       #EEDCE0;   /* líneas rosadas suaves */
  --color-accent:     #C2899A;   /* rosa empolvado (marca) */
  --color-on-accent:  #FFFFFF;
  --color-on-dark:    #FBF1EC;   /* crema sobre el malva */
  --color-gold:       #C9A24B;   /* oro celestial (estrellas, detalles) */

  --radius: 8px;
  --maxw:   1180px;
}

::selection { background: var(--color-accent); color: #fff; }
body { letter-spacing: 0.01em; }

/* ---- NAV + WORDMARK (CSS, recrea la inspiración) ---- */
.nav { background: color-mix(in srgb, var(--color-bg) 88%, transparent); }
.nav__links a { color: var(--color-ink); font-family: var(--font-body); font-weight: 400; }
.nav__links a:hover { color: var(--color-accent); }

.brand { display: inline-flex; flex-direction: column; line-height: 1; gap: 3px; }
.brand__main { display: flex; align-items: baseline; gap: 8px; }
.brand__serif { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.26em; font-size: 19px; color: var(--color-ink); }
.brand__script { font-family: var(--font-script); font-size: 30px; color: var(--color-accent); line-height: 0.8; }
.brand__by { font-family: var(--font-script); font-size: 17px; color: var(--color-muted); text-align: center; margin-top: 1px; }
.footer .brand__serif { color: var(--color-on-dark); }
.footer .brand__script { color: #E7B7C3; }
.footer .brand__by { color: color-mix(in srgb, var(--color-on-dark) 75%, transparent); }

/* ---- HERO: crema con resplandor + estrellas (badge protagonista) ---- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(194,137,154,0.18), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, rgba(244,230,225,0.9), var(--color-bg) 70%);
}
.hero__content { padding-top: 64px; padding-bottom: 84px; }
.hero__badge { width: clamp(240px, 34vw, 380px); height: auto; margin: 0 auto 22px; filter: drop-shadow(0 18px 40px rgba(90,58,71,0.12)); }
.hero__tag { font-family: var(--font-body); font-weight: 400; text-transform: uppercase; letter-spacing: 0.34em; font-size: 12px; color: var(--color-muted); margin: 0 0 30px; }
/* estrellitas celestiales (guiño Cirque) */
.hero::before, .hero::after {
  content: '✦'; position: absolute; color: var(--color-gold); opacity: 0.55;
  font-size: 18px; animation: twinkle 4.5s ease-in-out infinite;
}
.hero::before { top: 22%; left: 16%; font-size: 22px; }
.hero::after  { top: 32%; right: 18%; animation-delay: -2s; }
@keyframes twinkle { 0%,100% { opacity: 0.25; transform: scale(0.9); } 50% { opacity: 0.8; transform: scale(1.1); } }

/* ---- SECCIONES ---- */
.section-label { color: var(--color-accent); border-bottom-color: var(--color-accent); letter-spacing: 0.34em; }
.section-title { font-weight: 500; color: var(--color-ink); }
.section-title em { font-family: var(--font-script); font-style: normal; color: var(--color-accent); font-size: 1.25em; }
.section-subtitle { color: var(--color-muted); }

/* ---- EN ESCENA (cards) ---- */
.section--alt .feature-card,
.feature-card {
  background: #FFFDFC; border: 1px solid var(--color-rule); border-top: 2px solid var(--color-accent);
  box-shadow: 0 14px 36px rgba(90,58,71,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(90,58,71,0.12); }
.feature-card__icon { font-family: var(--font-script); font-size: 30px; color: var(--color-accent); }
.feature-card__title { color: var(--color-ink); font-weight: 500; }

/* ---- SOBRE ---- */
.about__photo {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(194,137,154,0.28), transparent 65%),
    linear-gradient(160deg, #F4E1E4, #ECD3D8);
  border: 1px solid var(--color-rule);
}
.about__lead { color: var(--color-ink); font-size: 25px; }
.about__list strong { color: var(--color-ink); }
.about__quote-block { background: var(--color-ink); }
.about__quote-block blockquote { color: var(--color-on-dark); }
.about__quote-block cite { color: #E7B7C3; }

/* ---- GALERÍA ---- */
.gallery__item {
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(201,162,75,0.18), transparent 60%),
    linear-gradient(160deg, #F3E0E3, #E9D0D6);
  border: 1px solid var(--color-rule);
}

/* ---- FORM ---- */
.form--card { background: #FFFDFC; box-shadow: 0 14px 36px rgba(90,58,71,0.06); }

/* ---- BOTONES ---- */
.btn { border-radius: 999px; letter-spacing: 0.18em; }
.btn--primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn--primary:hover:not(:disabled) { background: #B0738A; border-color: #B0738A; color: #fff; }
.btn--ghost { color: var(--color-ink); border-color: var(--color-ink); }
.btn--ghost:hover:not(:disabled) { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }

/* ---- footer ---- */
.footer__role { color: #E7B7C3; }

/* ---- accesibilidad ---- */
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } }

/* ---- responsive del look ---- */
@media (max-width: 640px) {
  .hero__badge { width: clamp(220px, 70vw, 300px); }
  .hero::before { left: 6%; } .hero::after { right: 6%; }
  .brand__serif { font-size: 16px; letter-spacing: 0.2em; }
  .brand__script { font-size: 26px; }
}