/* =========================================================
   PALETA E IDENTIDAD
   ========================================================= */
:root{
  --azul-claro:#91C4F2; --azul-polvo:#8CA0D7; --lila:#9D79BC;
  --purpura:#A14DA0; --magenta-osc:#7E1F86;

  --bg-1:#f5f3fa; --bg-2:#ece8f7; --bg-3:#eae6f6;

  --superficie:#ffffff; --superficie-soft:#fbfaff;

  --borde:#e7e4f0; --sombra:rgba(9,12,22,.10); --sombra-2:rgba(9,12,22,.16);
  --primario:#7E1F86; --secundario:#8CA0D7;

  --link:#7E1F86; --link-hover:#A14DA0;

  --texto:#4a4660; --texto-sec:#6b6780; /* versión clara por defecto */
  --texto-claro:#fafbff;
}

.justificar{
  text-align: justify;
  text-justify: inter-word;   /* mejor separación */
  hyphens: auto;              /* guiones automáticos cuando aplique */
}
.justificar p{ margin-bottom: .6rem; }


/* ====== SOBRE: hero suave + tipografía animada ====== */
.sobre-hero{
  margin: .25rem 0 1.25rem;
  height: 200px; border-radius: 22px;
  background:
    radial-gradient(800px 360px at 12% 10%, rgba(161,77,160,.18), transparent 60%),
    radial-gradient(700px 340px at 85% 35%, rgba(145,196,242,.16), transparent 60%),
    linear-gradient(135deg, rgba(126,31,134,.18), rgba(157,121,188,.14));
  position: relative; overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(17,12,46,.10);
}
.sobre-hero::before,.sobre-hero::after{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(420px 220px at 30% 30%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(380px 200px at 70% 60%, rgba(255,255,255,.16), transparent 60%);
  mix-blend-mode: screen; animation: floatGlow 14s ease-in-out infinite alternate;
}
@keyframes floatGlow { from{ transform:translateY(-2%) rotate(0deg) } to{ transform:translateY(2%) rotate(6deg) } }

/* Separador ondulado */
.wave-sep{ margin: 1.2rem 0 0.6rem; }
.wave-sep svg{ width:100%; height:60px; display:block; }
.wave-sep path{
  fill: rgba(157,121,188,.12);         /* tono lila suave */
}

/* Títulos con subrayado animado (no cambia el texto) */
main h1, main h2{
  position:relative; display:inline-block; padding-bottom:.15rem;
}
main h1::after, main h2::after{
  content:""; position:absolute; left:0; bottom:-2px; height:6px; width:100%;
  background: linear-gradient(90deg, rgba(161,77,160,.45), rgba(145,196,242,.45));
  border-radius: 6px; transform: scaleX(.25); transform-origin: left;
  transition: transform .35s ease;
}
main h1:hover::after, main h2:hover::after{ transform: scaleX(1); }

/* Primer párrafo con drop-cap sutil (solo el primero con .justificar) */
.justificar:first-of-type::first-letter{
  float:left; font-family: "Source Serif 4", ui-serif, Georgia, serif;
  font-size: 3.2rem; line-height: .9; padding: .12rem .4rem .1rem 0;
  color:#5a3b73; opacity:.9;
}

/* Listas más “vivas” dentro de .justificar (sin cambiar texto) */
.justificar ul{ list-style: none; padding-left: 0; margin-left: 0; }
.justificar ul li{
  position: relative; padding-left: 1.4rem; margin:.35rem 0;
}
.justificar ul li::before{
  content:"✔"; position:absolute; left:0; top:.1rem; font-size:.9rem;
  color:#7E1F86; opacity:.85;
}

/* Botón/pill existente: suaviza un poco para esta página */
.person-links .pill{
  background: linear-gradient(180deg, var(--superficie, #fff), var(--superficie-soft, #fbfaff));
  border:1px solid rgba(0,0,0,.08);
}

/* Modo oscuro coherente */
:root[data-bs-theme="dark"] .sobre-hero{
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
:root[data-bs-theme="dark"] .wave-sep path{ fill: rgba(161,77,160,.22); }

/* Caja CTA */
.cta-form{
  margin: 1.25rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(180deg,#ffffff, #fbf9ff);
  border: 1px solid #ece7ff;                   /* lila muy suave */
  box-shadow: 0 10px 28px rgba(48, 39, 120, .08);
}

/* Botón principal (lila elegante) */
.btn-cta{
  --btn-start: #8b5cf6;    /* lila */
  --btn-end:   #a78bfa;    /* lila claro */
  --btn-text:  #ffffff;

  display: inline-block;
  padding: .78rem 1.15rem;
  border-radius: 14px;
  font-weight: 650;
  text-decoration: none;
  color: var(--btn-text);
  background: linear-gradient(135deg, var(--btn-start), var(--btn-end));
  border: 1px solid rgba(139, 92, 246, .35);
  box-shadow:
    0 8px 22px rgba(139, 92, 246, .35),
    inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Hover: un poco más brillante y “flotado” */
.btn-cta:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(139, 92, 246, .42),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Active: feedback táctil */
.btn-cta:active{
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow:
    0 6px 16px rgba(139, 92, 246, .30),
    inset 0 2px 6px rgba(0,0,0,.08);
}

/* Focus accesible */
.btn-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 6px rgba(139, 92, 246, .55),
    0 10px 24px rgba(139, 92, 246, .35);
}

/* Variante “ghost” opcional (por si la quieres en links secundarios) */
.btn-cta.ghost{
  color: #6d28d9;
  background: transparent;
  border: 1px solid #d9ccff;
  box-shadow: none;
}
.btn-cta.ghost:hover{
  background: rgba(139,92,246,.08);
  box-shadow: 0 6px 16px rgba(139,92,246,.15);
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .cta-form{
    background: linear-gradient(180deg,#0f1115,#0b0d12);
    border-color: #2a2350;
    box-shadow: 0 12px 26px rgba(0,0,0,.45);
  }
  .btn-cta{
    --btn-start: #7c3aed;   /* lila profundo */
    --btn-end:   #a78bfa;
    border-color: rgba(167,139,250,.5);
    box-shadow:
      0 8px 22px rgba(167,139,250,.35),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .btn-cta:focus-visible{
    box-shadow:
      0 0 0 3px #0f1115,
      0 0 0 6px rgba(167,139,250,.7),
      0 10px 24px rgba(167,139,250,.35);
  }
}

/* Reduce motion si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .btn-cta{ transition: none; }
}