@charset "UTF-8";
/* ============================================================
   quince-puntos.css -- v3.18.0
   Pagina /15-puntos/ -- "Marketing de Salud, los 15 Puntos"
   Namespace: --qp-*
   ASCII puro (regla del proyecto: el server sirve text/css sin charset).

   Relacion con protocolo-doc.css: mismo sistema (Bricolage + Figtree, light
   premium, acento teal) pero registro distinto a proposito.
     /protocolo-doc/ = documento operativo -> rail sticky + secciones largas
     /15-puntos/     = manifiesto de criterio -> ledger vertical, mas aire,
                       numeracion grande, sin rail.
   Asi las dos paginas se sienten hermanas sin parecer la misma plantilla.

   REGLA DE COLOR (master sec. 10): --qp-teal para fills, bordes e iconos;
   --qp-teal-ink para TEXTO chico sobre fondo claro (#00BFA5 da 2.33:1 y no
   pasa WCAG AA; #00806E da 4.87:1 sobre blanco).
   ============================================================ */

:root{
  --qp-bg:#F8F9FC;
  --qp-bg-dark:#040609;
  --qp-white:#FFFFFF;
  --qp-ink:#0D1117;
  --qp-ink-soft:rgba(13,17,23,.72);
  --qp-ink-muted:rgba(13,17,23,.62);
  --qp-line:rgba(13,17,23,.10);
  --qp-line-soft:rgba(13,17,23,.06);
  --qp-teal:#00BFA5;
  --qp-teal-ink:#00806E;
  --qp-teal-soft:rgba(0,191,165,.12);
  --qp-white-soft:rgba(255,255,255,.72);
  --qp-white-muted:rgba(255,255,255,.50);
  --qp-display:"Bricolage Grotesque", Georgia, serif;
  --qp-body:"Figtree", system-ui, -apple-system, sans-serif;
  --qp-max:1080px;
  --qp-gutter:clamp(20px, 5vw, 80px);
}

.qp{
  background:var(--qp-bg);
  color:var(--qp-ink);
  font-family:var(--qp-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.qp *{ box-sizing:border-box }

/* Subpaginas internas: 1080px (el home y el chrome van a 1280). */
.qp-shell{
  max-width:var(--qp-max);
  margin:0 auto;
  padding-left:var(--qp-gutter);
  padding-right:var(--qp-gutter);
}

.qp :focus-visible{ outline:2px solid var(--qp-teal); outline-offset:3px; border-radius:4px }

/* -- Hero ----------------------------------------------------- */
.qp-hero{
  padding-top:clamp(80px, 14vh, 140px);
  padding-bottom:clamp(56px, 9vh, 96px);
  border-bottom:1px solid var(--qp-line);
}
.qp-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:1px solid var(--qp-teal);
  color:var(--qp-teal-ink);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.20em;
  text-transform:uppercase;
  border-radius:999px;
  margin-bottom:32px;
}
.qp-hero-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;background:var(--qp-teal);
}
.qp-hero-title{
  font-family:var(--qp-display);
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  line-height:1.04;
  letter-spacing:-0.025em;
  font-weight:500;
  margin:0 0 24px;
  max-width:20ch;
  text-wrap:balance;
}
.qp-hero-sub{
  font-family:var(--qp-display);
  font-size:clamp(1.25rem, 2.2vw, 1.65rem);
  line-height:1.3;
  font-weight:400;
  font-style:italic;
  color:var(--qp-ink-soft);
  margin:0 0 32px;
  max-width:32ch;
}
.qp-hero-lead{
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--qp-ink-soft);
  max-width:64ch;
  margin:0;
  text-wrap:pretty;
}
.qp-hero-lead em{
  font-style:normal;
  font-weight:700;
  color:var(--qp-ink);
}

/* -- Ledger de los 15 puntos ---------------------------------- */
.qp-body{
  padding-top:clamp(56px, 9vh, 88px);
  padding-bottom:clamp(72px, 11vh, 120px);
}
.qp-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* Fila: numero a la izquierda, cuerpo a la derecha. En mobile el numero
   pasa arriba (ver breakpoint). */
.qp-item{
  display:grid;
  grid-template-columns:clamp(72px, 9vw, 116px) minmax(0, 1fr);
  gap:clamp(16px, 3vw, 40px);
  align-items:start;
  padding:clamp(26px, 4vh, 40px) 0;
  border-bottom:1px solid var(--qp-line-soft);
  scroll-margin-top:100px;
  transition:border-color .3s ease;
}
.qp-item:first-child{ border-top:1px solid var(--qp-line-soft) }
.qp-item:hover{ border-bottom-color:var(--qp-line) }

.qp-item-n{
  font-family:var(--qp-display);
  font-size:clamp(2rem, 4.6vw, 3.4rem);
  font-weight:300;
  line-height:.9;
  letter-spacing:-.03em;
  color:var(--qp-teal-ink);
  /* Alineacion optica con la primera linea del titulo. */
  padding-top:.08em;
  font-variant-numeric:tabular-nums;
}

.qp-item-t{
  font-family:var(--qp-display);
  font-size:clamp(1.35rem, 2.6vw, 1.95rem);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:500;
  color:var(--qp-ink);
  margin:0 0 12px;
  text-wrap:balance;
}

/* El enunciado del principio -- texto del cliente, es la linea que manda. */
.qp-item-p{
  font-family:var(--qp-display);
  font-size:clamp(1rem, 1.5vw, 1.15rem);
  line-height:1.45;
  font-weight:400;
  color:var(--qp-ink);
  margin:0 0 12px;
  padding-left:16px;
  border-left:2px solid var(--qp-teal);
  max-width:52ch;
}

/* Desarrollo -- copy de apoyo, jerarquia claramente inferior. */
.qp-item-d{
  font-size:.98rem;
  line-height:1.65;
  color:var(--qp-ink-muted);
  margin:0;
  max-width:60ch;
  text-wrap:pretty;
}

/* Banda de respiro cada 5 puntos. Decorativa: no reagrupa ni renumera. */
.qp-band{
  display:flex;
  align-items:center;
  gap:18px;
  padding:clamp(18px, 3vh, 30px) 0;
}
.qp-band-line{
  flex:1;
  height:1px;
  background:var(--qp-line);
}
.qp-band-range{
  font-family:var(--qp-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--qp-ink-muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* -- Pull-quote (banda oscura) -------------------------------- */
.qp-quote{
  background:var(--qp-bg-dark);
  color:var(--qp-white-soft);
  padding-top:clamp(80px, 13vh, 140px);
  padding-bottom:clamp(80px, 13vh, 140px);
  position:relative;
  overflow:hidden;
}
.qp-quote::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,191,165,.10) 0%, transparent 62%);
  pointer-events:none;
}
.qp-quote-inner{ position:relative; z-index:1; text-align:center }
.qp-quote-eyebrow{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--qp-teal);
  margin:0 0 22px;
}
.qp-quote-text{
  font-family:var(--qp-display);
  font-size:clamp(1.75rem, 4.4vw, 3.1rem);
  line-height:1.15;
  letter-spacing:-.025em;
  font-weight:500;
  color:#fff;
  margin:0 auto;
  max-width:20ch;
  text-wrap:balance;
}

/* -- Cierre --------------------------------------------------- */
.qp-cta{
  padding-top:clamp(72px, 11vh, 120px);
  padding-bottom:clamp(96px, 14vh, 160px);
  text-align:center;
}
.qp-cta-bridge{
  font-family:var(--qp-display);
  font-size:clamp(1.4rem, 3vw, 2.15rem);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:500;
  color:var(--qp-ink);
  margin:0 auto 16px;
  max-width:26ch;
  text-wrap:balance;
}
.qp-cta-lead{
  font-size:1.02rem;
  line-height:1.7;
  color:var(--qp-ink-soft);
  margin:0 auto 36px;
  max-width:56ch;
  text-wrap:pretty;
}
.qp-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  align-items:center;
}
.qp-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:17px 32px;
  background:var(--qp-teal);
  color:var(--qp-bg-dark);
  font-family:var(--qp-body);
  font-weight:700;
  font-size:.98rem;
  text-decoration:none;
  border-radius:999px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.qp-cta-btn svg{ width:18px;height:18px }
.qp-cta-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 38px -16px rgba(0,191,165,.6);
}
.qp-cta-alt{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:17px 4px;
  color:var(--qp-ink);
  font-family:var(--qp-body);
  font-weight:600;
  font-size:.98rem;
  text-decoration:none;
  border-bottom:2px solid var(--qp-teal);
  transition:color .25s ease;
}
.qp-cta-alt:hover{ color:var(--qp-teal-ink) }

/* -- Tablet / mobile ------------------------------------------ */
@media (max-width: 860px){
  .qp-item{
    grid-template-columns:1fr;
    gap:10px;
  }
  .qp-item-n{
    font-size:1.6rem;
    padding-top:0;
  }
  .qp-item-t{ margin-bottom:10px }
  .qp-item-p{ padding-left:14px }
}

@media (max-width: 480px){
  .qp-hero{ padding-top:80px; padding-bottom:48px }
  .qp-hero-eyebrow{ margin-bottom:24px }
  .qp-hero-sub{ margin-bottom:24px }
  .qp-hero-title{ font-size:2.25rem }
  .qp-cta-actions{ flex-direction:column; align-items:stretch }
  .qp-cta-btn{ justify-content:center }
  .qp-cta-alt{ justify-content:center }
}

/* -- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .qp-item,
  .qp-cta-btn,
  .qp-cta-alt{ transition:none }
  .qp-cta-btn:hover{ transform:none }
}