/* ==========================================================================
   UV-Life · Landing "Quiénes somos"
   Hoja de estilos autocontenida para child theme de Basel.
   TODOS los selectores están encapsulados bajo .uvl-landing para evitar
   colisiones con el tema principal u otros plugins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens del sistema gráfico UV-Life
   -------------------------------------------------------------------------- */
.uvl-landing{
  --uvl-ink:#1b1436;
  --uvl-muted:#6b6488;
  --uvl-line:#e9e4f6;
  --uvl-violet:#7c4dff;
  --uvl-violet-d:#5f2fe0;
  --uvl-violet-l:#a78bfa;
  --uvl-lav:#c9b6ff;
  --uvl-aqua:#22b8d6;
  --uvl-aqua-d:#128aa6;
  --uvl-bg:#ffffff;
  --uvl-soft:#f7f5ff;
  --uvl-dark:#150d2e;
  --uvl-rad:16px;
  --uvl-shadow:0 20px 44px -22px rgba(60,30,140,.45);

  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--uvl-ink);
  background:var(--uvl-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* --------------------------------------------------------------------------
   2. Reset acotado (solo dentro del contenedor)
   -------------------------------------------------------------------------- */
.uvl-landing *,
.uvl-landing *::before,
.uvl-landing *::after{box-sizing:border-box}

.uvl-landing h1,
.uvl-landing h2,
.uvl-landing h3,
.uvl-landing p,
.uvl-landing figure,
.uvl-landing blockquote{margin:0;padding:0}

.uvl-landing img{max-width:100%;height:auto;display:block}
.uvl-landing a{text-decoration:none;color:var(--uvl-violet-d)}

.uvl-landing h1,
.uvl-landing h2,
.uvl-landing h3{letter-spacing:-.02em;line-height:1.15;font-weight:700}

/* --------------------------------------------------------------------------
   3. Layout base
   -------------------------------------------------------------------------- */
.uvl-landing .uvl-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.uvl-landing .uvl-sec{padding:74px 0}

.uvl-landing .uvl-sec-head{max-width:760px;margin:0 auto 40px;text-align:center}
.uvl-landing .uvl-sec-head h2{font-size:clamp(1.7rem,3vw,2.35rem);margin-bottom:12px}
.uvl-landing .uvl-sec-head p{color:var(--uvl-muted);font-size:1.05rem}

.uvl-landing .uvl-eyebrow{
  display:block;width:max-content;margin:0 auto 16px;
  font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--uvl-violet-d);background:#efeaff;
  padding:6px 14px;border-radius:100px;
}

.uvl-landing .uvl-gradtext{
  background:linear-gradient(100deg,#c9b6ff 0%,#a78bfa 40%,#7c4dff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* --------------------------------------------------------------------------
   4. Grilla principal: texto + tarjeta de fundador
   -------------------------------------------------------------------------- */
.uvl-landing .uvl-about-grid{
  display:grid;grid-template-columns:1.35fr 1fr;gap:26px;
  align-items:stretch;margin-top:8px;
}

.uvl-landing .uvl-about-lead{
  background:#fff;
  border:1px solid var(--uvl-line);
  border-radius:var(--uvl-rad);
  box-shadow:0 8px 22px -16px rgba(60,30,140,.3);
  padding:32px;
  display:flex;flex-direction:column;
}
.uvl-landing .uvl-about-lead p{
  font-size:1.02rem;color:var(--uvl-ink);line-height:1.75;margin-bottom:16px;
}
.uvl-landing .uvl-about-lead p:last-of-type{margin-bottom:0}
.uvl-landing .uvl-about-lead p.uvl-intro{
  font-size:1.08rem;border-left:3px solid var(--uvl-violet);padding-left:18px;
}
.uvl-landing .uvl-about-lead b,
.uvl-landing .uvl-about-lead strong{color:var(--uvl-violet-d);font-weight:700}

/* --------------------------------------------------------------------------
   5. Cifras
   -------------------------------------------------------------------------- */
.uvl-landing .uvl-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:24px;
  border:1px solid var(--uvl-line);border-radius:14px;overflow:hidden;
  background:var(--uvl-soft);
}
.uvl-landing .uvl-stat{padding:18px 16px;border-right:1px solid var(--uvl-line)}
.uvl-landing .uvl-stat:last-child{border-right:0}
.uvl-landing .uvl-stat b{
  display:block;font-size:1.7rem;font-weight:800;color:var(--uvl-violet-d);
  line-height:1;margin-bottom:6px;
}
.uvl-landing .uvl-stat span{
  display:block;font-size:.8rem;color:var(--uvl-muted);line-height:1.4;
}

/* --------------------------------------------------------------------------
   6. Tarjeta del fundador
   -------------------------------------------------------------------------- */
.uvl-landing .uvl-founder{
  position:relative;overflow:hidden;
  background:radial-gradient(140% 140% at 20% 0%,#3a2470 0%,#231a56 55%,#150d2e 100%);
  border-radius:var(--uvl-rad);padding:30px 26px;color:#fff;
  display:flex;flex-direction:column;
  box-shadow:var(--uvl-shadow);
}
.uvl-landing .uvl-founder::after{
  content:"";position:absolute;bottom:-90px;right:-70px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(167,139,250,.35) 0%,rgba(167,139,250,0) 70%);
  pointer-events:none;
}
.uvl-landing .uvl-founder-photo{
  position:relative;width:96px;height:96px;border-radius:50%;
  object-fit:cover;border:3px solid rgba(255,255,255,.85);margin-bottom:16px;
}
.uvl-landing .uvl-founder-name{
  position:relative;font-size:1.15rem;font-weight:700;margin-bottom:2px;
}
.uvl-landing .uvl-founder-role{
  position:relative;font-size:.82rem;color:var(--uvl-lav);font-weight:500;margin-bottom:16px;
}
.uvl-landing .uvl-founder-quote{
  position:relative;font-size:.94rem;line-height:1.7;color:#e6ddfa;margin-bottom:22px;
  font-style:normal;
}
.uvl-landing .uvl-founder-quote cite{display:none}

.uvl-landing .uvl-btn-li{
  position:relative;width:max-content;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:10px 18px;border-radius:100px;
  font-size:.88rem;font-weight:600;
  transition:background .2s ease,color .2s ease;
}
.uvl-landing .uvl-btn-li:hover,
.uvl-landing .uvl-btn-li:focus{background:#fff;color:var(--uvl-violet-d)}
.uvl-landing .uvl-btn-li svg{width:15px;height:15px;fill:currentColor;flex:none}

/* --------------------------------------------------------------------------
   7. Clientes
   -------------------------------------------------------------------------- */
.uvl-landing .uvl-clients{
  margin-top:44px;padding-top:36px;border-top:1px solid var(--uvl-line);
}
.uvl-landing .uvl-clients-label{
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--uvl-muted);text-align:center;margin-bottom:22px;
}
.uvl-landing .uvl-clients-list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  list-style:none;margin:0;padding:0;
}
.uvl-landing .uvl-clients-list li{
  font-weight:700;font-size:.94rem;color:var(--uvl-ink);
  background:var(--uvl-soft);border:1px solid var(--uvl-line);
  border-radius:12px;padding:13px 22px;
}
.uvl-landing .uvl-clients-note{
  text-align:center;font-size:.85rem;color:var(--uvl-muted);margin-top:20px;
}

/* --------------------------------------------------------------------------
   8. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.uvl-landing .uvl-faq{background:var(--uvl-soft)}
.uvl-landing .uvl-faq-list{max-width:840px;margin:0 auto;display:grid;gap:12px}
.uvl-landing .uvl-faq-item{
  border:1px solid var(--uvl-line);border-radius:14px;background:#fff;overflow:hidden;
}
.uvl-landing .uvl-faq-item summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-weight:600;font-size:1rem;color:var(--uvl-ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.uvl-landing .uvl-faq-item summary::-webkit-details-marker{display:none}
.uvl-landing .uvl-faq-item summary::after{
  content:"+";font-size:1.5rem;line-height:1;color:var(--uvl-violet-d);flex:none;
}
.uvl-landing .uvl-faq-item[open] summary::after{content:"\2013"}
.uvl-landing .uvl-faq-answer{
  padding:0 22px 20px;color:var(--uvl-muted);font-size:.96rem;line-height:1.62;
}

/* --------------------------------------------------------------------------
   9. Llamado a la acción
   -------------------------------------------------------------------------- */
.uvl-landing .uvl-cta-box{
  background:radial-gradient(900px 500px at 50% 0%,#3a2470 0%,#231a56 55%,#150d2e 100%);
  border-radius:32px;color:#fff;text-align:center;padding:66px 40px;
}
.uvl-landing .uvl-cta-box .uvl-eyebrow{
  background:rgba(255,255,255,.14);color:#dccdff;
}
.uvl-landing .uvl-cta-box h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:12px}
.uvl-landing .uvl-cta-box p{color:#d3caf0;max-width:42em;margin:0 auto 26px;font-size:1.06rem}

.uvl-landing .uvl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:.96rem;padding:13px 24px;border-radius:100px;
  border:0;cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.uvl-landing .uvl-btn-primary{
  background:var(--uvl-violet);color:#fff;
  box-shadow:0 12px 26px -12px rgba(124,77,255,.7);
}
.uvl-landing .uvl-btn-primary:hover,
.uvl-landing .uvl-btn-primary:focus{background:var(--uvl-violet-d);transform:translateY(-2px)}

/* --------------------------------------------------------------------------
   10. Accesibilidad
   -------------------------------------------------------------------------- */
.uvl-landing a:focus-visible,
.uvl-landing summary:focus-visible{
  outline:3px solid var(--uvl-violet-l);outline-offset:3px;border-radius:6px;
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .uvl-landing .uvl-about-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .uvl-landing .uvl-sec{padding:52px 0}
  .uvl-landing .uvl-about-lead{padding:24px}
  .uvl-landing .uvl-stats{grid-template-columns:1fr}
  .uvl-landing .uvl-stat{border-right:0;border-bottom:1px solid var(--uvl-line)}
  .uvl-landing .uvl-stat:last-child{border-bottom:0}
  .uvl-landing .uvl-cta-box{padding:48px 22px;border-radius:24px}
}

/* --------------------------------------------------------------------------
   12. Preferencias de movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .uvl-landing *{transition:none !important;animation:none !important}
}