/* ============================================================
   MUJERES AL VOLANTE · paleta extraída de mujeresalvolante.com
   Real: Hot Pink #FF0099 (19 hits primary), Orange #FB6328 accent,
   Pale Pink #F5E6E6 / #F9EBEB para fondos cálidos.
   Tipografía real: Oswald (display), Montserrat (body), Playfair Display (occasional).
   ============================================================ */
@import url("../_shared/micro-base.css");
@import url("../_shared/reveal.css");

:root {
  --mav-pink: #FF0099;        /* Hot pink primary, real */
  --mav-pink-deep: #D8007F;   /* hover */
  --mav-orange: #FB6328;      /* secundario warm, real */
  --mav-pale: #F5E6E6;        /* fondo cálido pink-beige, real */
  --mav-pale-2: #F9EBEB;
  --mav-dark: #3B4048;        /* gris azulado oscuro, real */
  --mav-mid: #666D70;
  --mav-soft: #FFF1F5;

  --brand-bg: var(--mav-pink);
  --brand-fg: #FFFFFF;
  --brand-primary: var(--mav-pink);
  --brand-accent: var(--mav-orange);
  --brand-section-bg: var(--mav-soft);
  --brand-section-fg: var(--mav-dark);
  --brand-card-bg: #FFFFFF;
  --brand-card-border: rgba(255, 0, 153, 0.14);

  /* Real Mujeres al Volante: Oswald display + Montserrat body */
  --font-display: 'Oswald', 'Montserrat', -apple-system, sans-serif;
  --font-sans: 'Montserrat', 'Lato', -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
}

:focus-visible { outline-color: var(--mav-pink); }

.btn-primary {
  background: var(--mav-pink);
  color: #FFF;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: var(--fs-sm);
  font-family: var(--font-display);
}
.btn-primary:hover { background: var(--mav-pink-deep); transform: translateY(-2px); }

.btn-ghost {
  border-color: rgba(255,255,255,0.6);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--mav-pink); color: var(--mav-pink); }

/* Display: Oswald condensado, mayúsculas con peso */
.m-hero__claim,
.m-concept__title,
.m-activations__intro h2,
.m-activation__title,
.m-final h2,
.m-events h2,
.mav-block h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}
.m-hero__claim {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.0;
}
.m-activation__num {
  font-family: var(--font-display);
  color: var(--mav-pink);
  font-weight: 600;
  font-size: var(--fs-2xl);
}

.m-hero__eyebrow {
  border-color: var(--mav-pink);
  color: #FFF;
  background: rgba(255, 0, 153, 0.7);
  font-weight: 600;
}

.m-attr { border-left-color: var(--mav-pink); background: #FFF; }
.m-attr__label { color: var(--mav-pink); font-weight: 700; text-transform: uppercase; font-family: var(--font-display); letter-spacing: 0.04em; }

.m-concept__eyebrow {
  color: var(--mav-pink);
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}

.m-events { background: var(--mav-pink); }
.m-events__date { color: #FFF; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.06em; }

.m-final__primary {
  background: var(--mav-pink);
  color: #FFF;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: var(--font-display);
}
.m-final__primary:hover { background: var(--mav-pink-deep); }
.m-final__secondary {
  border-color: var(--mav-pink);
  color: var(--mav-pink);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.m-final__secondary:hover { background: var(--mav-pink); color: #FFF; }

.m-activation__cta {
  border-color: var(--mav-pink);
  color: var(--mav-pink);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: var(--font-display);
}
.m-activation__cta:hover { background: var(--mav-pink); color: #FFF; }

/* Bloques específicos: testimonios, comunidad */
.mav-block { padding: var(--sp-9) 0; }
.mav-block--soft { background: #FFF; }
.mav-block--violet,
.mav-block--violet { background: var(--mav-pink); color: #FFF; }

.mav-block h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); max-width: 22ch; }
.mav-block__sub { color: rgba(255,255,255,0.92); margin-bottom: var(--sp-6); max-width: 56ch; font-family: var(--font-sans); }
.mav-block--soft .mav-block__sub { color: var(--mav-mid); }

/* Testimonios — usar Playfair como serif emocional para citas */
.mav-testimonials {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (min-width: 720px) { .mav-testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .mav-testimonials { grid-template-columns: repeat(3, 1fr); } }

.mav-testimonial {
  padding: var(--sp-5);
  background: var(--mav-pale);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--mav-pink);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.mav-testimonial blockquote {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--mav-dark);
  margin: 0;
  quotes: "“" "”";
  font-style: italic;
}
.mav-testimonial blockquote::before { content: open-quote; }
.mav-testimonial blockquote::after { content: close-quote; }
.mav-testimonial cite {
  font-style: normal;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mav-pink);
  font-weight: 700;
  font-family: var(--font-display);
}

/* Pipeline 3 etapas */
.mav-pipeline {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  margin-top: var(--sp-6);
  position: relative;
}
@media (min-width: 720px) { .mav-pipeline { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
.mav-pipeline__step {
  padding: var(--sp-5);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-md);
}
.mav-pipeline__num {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: #FFF;
  display: block;
  line-height: 1;
  margin-bottom: var(--sp-2);
  font-weight: 600;
}
.mav-pipeline__step h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mav-pipeline__step p { font-size: var(--fs-sm); color: rgba(255,255,255,0.9); line-height: 1.5; }