@charset "UTF-8";
/* ============================================================
   doc-a-doc.css -- v1.0.0
   Pagina /doc-a-doc/. Namespace: --dd-*
   ASCII puro (el server sirve text/css sin charset header).

   Tono: editorial claro tipo indice de biblioteca -- distinto del navy
   full-bleed de Doc a Pac a proposito (mismo azul = Comunidad, pero
   publicos opuestos: medico cliente vs. paciente).

   REGLA DE COLOR: --dd-blue para acentos/texto (da ~5:1 sobre blanco, no
   necesita variante -ink como el teal). Nunca teal en esta pagina.
   ============================================================ */

:root{
  --dd-bg:#FFFFFF;
  --dd-bg-soft:#F8F9FC;
  --dd-ink:#0D1117;
  --dd-ink-soft:rgba(13,17,23,.72);
  --dd-ink-muted:rgba(13,17,23,.62);
  --dd-line:rgba(13,17,23,.12);
  --dd-blue:#3B72AD;
  --dd-navy:#0d1a2e;
  --dd-navy-soft:#152a47;
  --dd-display:"Bricolage Grotesque", Georgia, serif;
  --dd-body:"Figtree", system-ui, -apple-system, sans-serif;
  --dd-max:1280px;
  --dd-gutter:clamp(20px, 5vw, 80px);
}

.dd{ background:var(--dd-bg); color:var(--dd-ink); font-family:var(--dd-body); line-height:1.65 }
.dd *{ box-sizing:border-box }
.dd-shell{ max-width:var(--dd-max); margin:0 auto; padding:0 var(--dd-gutter) }
.dd :focus-visible{ outline:2px solid var(--dd-blue); outline-offset:3px; border-radius:4px }

/* -- Hero --------------------------------------------------------- */
.dd-hero{ padding:clamp(48px,9vh,96px) 0 clamp(32px,5vh,56px); background:linear-gradient(180deg,#fbfcfe,#fff) }
.dd-eyebrow{ margin:0 0 12px; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--dd-blue) }
.dd-title{
  font-family:var(--dd-display); font-weight:500;
  font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.1; letter-spacing:-.025em;
  margin:0 0 16px; max-width:20ch;
}
.dd-lead{ font-size:1.05rem; line-height:1.65; color:var(--dd-ink-soft); max-width:56ch; margin:0 0 24px }
.dd-stats{
  display:flex; flex-wrap:wrap; gap:24px; padding:18px 0;
  border-top:1px solid var(--dd-line); border-bottom:1px solid var(--dd-line);
  font-size:.85rem; color:var(--dd-ink-muted);
}
.dd-stats strong{ color:var(--dd-ink); font-size:1rem }
.dd-stats-open strong{ color:#00806E }
.dd-stats-locked strong{ color:var(--dd-blue) }

/* -- Secciones ------------------------------------------------------ */
.dd-section{ padding:clamp(44px,7vh,80px) 0 }
.dd-section--locked{ background:radial-gradient(circle at 100% 0%, rgba(59,114,173,.06), var(--dd-bg-soft) 65%) }
.dd-section-label{
  margin:0 0 6px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.dd-section-label--open{ color:#00806E }
.dd-section-label--locked{ color:var(--dd-blue) }
.dd-section-desc{ margin:0 0 24px; font-size:.92rem; color:var(--dd-ink-muted) }

.dd-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }

.dd-card{
  display:block; border:1px solid var(--dd-line); border-radius:12px; padding:22px;
  background:var(--dd-bg); text-decoration:none; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.dd-card:hover{ border-color:var(--dd-blue); box-shadow:0 10px 24px -18px rgba(59,114,173,.5) }
.dd-card-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px }
.dd-card-icon{ color:var(--dd-blue); display:inline-flex }
.dd-card-n{ font-family:var(--dd-display); font-size:1.3rem; color:#c7cede; line-height:1 }
.dd-card-title{ font-family:var(--dd-display); font-size:1.02rem; font-weight:600; margin:0 0 8px; line-height:1.3 }
.dd-card-meta{ font-size:.8rem; color:var(--dd-ink-muted) }

.dd-card--locked{ background:var(--dd-bg); position:relative; overflow:hidden }
.dd-card-badge{
  background:rgba(59,114,173,.1); color:var(--dd-blue); padding:4px 10px; border-radius:999px;
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.dd-card-lock{ color:var(--dd-blue) }
.dd-card-n--locked{ display:block; margin-bottom:12px }
.dd-card-teaser{
  margin:0; font-size:.82rem; color:var(--dd-ink-muted);
  filter:blur(3px); user-select:none; pointer-events:none;
}

/* -- Bloque de desbloqueo -------------------------------------------- */
.dd-unlock{
  margin-top:24px; padding:clamp(24px,4vw,36px); border-radius:16px;
  background:linear-gradient(135deg,var(--dd-navy),var(--dd-navy-soft));
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  color:#fff;
}
.dd-unlock-title{ margin:0 0 6px; font-size:1rem; font-weight:600 }
.dd-unlock-sub{ margin:0; font-size:.85rem; color:rgba(255,255,255,.65) }
.dd-unlock-cta{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:12px 24px; border-radius:999px; background:#fff; color:var(--dd-navy);
  font-weight:700; font-size:.92rem; text-decoration:none; white-space:nowrap;
  transition:transform .2s ease;
}
.dd-unlock-cta:hover{ transform:translateY(-1px) }

@media (max-width: 760px){
  .dd-grid{ grid-template-columns:1fr }
  .dd-unlock{ flex-direction:column; align-items:flex-start }
}

@media (prefers-reduced-motion: reduce){
  .dd-card, .dd-unlock-cta{ transition:none }
}

/* -- Pieza individual ------------------------------------------------ */
.dd-piece{ padding:clamp(48px,8vh,88px) 0 clamp(64px,10vh,110px) }
.dd-piece-kicker{ display:flex; align-items:center; gap:10px; margin-bottom:18px }
.dd-piece-title{
  font-family:var(--dd-display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15; letter-spacing:-.02em;
  margin:0 0 24px; max-width:24ch;
}
.dd-piece-teaser{
  font-size:1rem; color:var(--dd-ink-muted); max-width:60ch; margin:0 0 28px;
  filter:blur(3px); user-select:none; pointer-events:none;
}
.dd-piece-body{ font-size:1.02rem; color:var(--dd-ink-soft); max-width:68ch }
.dd-piece-body p{ margin:0 0 18px }
.dd-piece-body h2{ font-family:var(--dd-display); font-size:1.4rem; color:var(--dd-ink); margin:32px 0 12px }
.dd-unlock--piece{ max-width:68ch }
.dd-piece-back{ margin-top:40px }
.dd-piece-back a{ color:var(--dd-blue); text-decoration:none; font-weight:600; font-size:.92rem }
.dd-piece-back a:hover{ text-decoration:underline }