/* ============================
   Altitud 100K — Métricas (CSS)
   ============================ */

:root{
  --bg:#02183D;
  --ink:#fff;
  --muted:#9fb3d1;
  --brand:#F21651;
  --brand-2:#F9921C;
  --teal:#2efad9;
  --pink:#ff3b74;
  --orange:#ffb347;
  --surface:#0b1430;
  --outline:#ffffff22;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}

/* --- helpers --- */
.wrap{max-width:1140px; margin:0 auto; padding:0 20px}
.center{text-align:center}
.muted{color:var(--muted)}
.mt-1{margin-top:12px}

/* --- topbar (ligero) --- */
.topbar{position:sticky; top:0; z-index:20; background:linear-gradient(180deg,#020a1dcc,#020a1d99 70%,transparent); border-bottom:1px solid var(--outline); backdrop-filter:blur(6px)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.brand-logo{width:36px; height:36px; object-fit:contain}
.brand-text{font-weight:900; letter-spacing:1px}
.brand-text span{color:var(--brand)}
.mainnav{display:flex; gap:18px; align-items:center}
.mainnav a{color:#fff; opacity:.9; text-decoration:none; text-transform:uppercase; letter-spacing:.06em}
.mainnav a:hover{opacity:1; color:var(--brand)}
.btn{
  display:inline-block; background:var(--brand); color:#fff; padding:12px 16px;
  border-radius:12px; text-decoration:none; font-weight:800; border:1px solid transparent;
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.ghost{background:transparent; color:#fff; border-color:#ffffff55}
.btn.small{padding:8px 12px}

/* --- hero --- */
#metrics-hero{
  position:relative;
  overflow:hidden;
  padding:92px 0 38px;
  border-bottom:1px solid var(--outline);
  isolation:isolate;
}

/* grid de fondo */
#metrics-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 600px at 18% 28%, rgba(2,24,61,.85), rgba(2,24,61,.45) 60%, rgba(2,24,61,.25) 100%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  pointer-events:none;
}
#metrics-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
}

/* copy */
.overline{color:#9fb3d1; letter-spacing:.1em; text-transform:uppercase; font-weight:800; margin:0 0 10px}
h1{
  margin:0 0 10px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.05;
  font-size:clamp(32px, 6vw, 72px);
}
.lead{max-width:860px; color:var(--muted); margin:8px 0 16px}

/* --- línea y marcadores --- */
.line-wrap{position:relative; height:170px; margin-top:10px}
#lineTopSpacer{height:40px}
#metrics-line{position:absolute; left:0; right:0; top:8px; width:100%; height:160px; overflow:visible}

#ml-path{fill:none; stroke:#7fb1ff33; stroke-width:8; stroke-linecap:round}

.marker .halo{fill:#2efad91c}
.marker .dot{fill:#2efad9}
.marker .mk-label{
  fill:#cfe2ff; font-size:12px; font-weight:900; letter-spacing:.06em;
  text-anchor:middle; transform: translateY(-34px);
}

#probe .probe-core{fill:var(--teal)}
#probe .probe-glow{fill:transparent; stroke:var(--teal); stroke-width:3; opacity:.9; filter:drop-shadow(0 0 10px var(--teal))}

/* --- KPI cards --- */
.kpi-grid{
  position:relative; z-index:1;
  display:grid; gap:18px; grid-template-columns: repeat(3, 1fr);
  align-items:stretch; margin-top:18px;
}
.kpi-card{
  background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--radius); padding:18px; box-shadow:0 8px 24px #00000040;
}
.kpi-card h3{margin:10px 0 6px}
.kpi-desc{color:var(--muted); margin:0}

.kpi-donut{position:relative; width:160px; height:160px; margin:4px auto 0}
.donut{width:160px; height:160px; display:block}
.track{fill:none; stroke:#ffffff18; stroke-width:12}
.arc{fill:none; stroke-linecap:round; stroke-width:12; transform: rotate(-90deg); transform-origin: center}
.arc-csat{stroke:#29d3b6}
.arc-nps{stroke:#ff3b74}
.arc-trans{stroke:#ffb347}

.kpi-num{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:900; font-size:38px; text-shadow:0 2px 8px #00000070;
}
.kpi-num small{font-size:18px; opacity:.9; margin-left:2px}

/* CTA y secciones genéricas */
.cta-row{display:flex; gap:12px; margin-top:16px}
.section{padding:56px 0}
.section.alt{background:#ffffff08; border-top:1px solid var(--outline); border-bottom:1px solid var(--outline)}
.grid-2{display:grid; gap:24px; grid-template-columns:1.1fr .9fr}
.panel{background:var(--surface); border:1px solid var(--outline); border-radius:16px; padding:18px}
.check{margin:8px 0 0; padding-left:18px}
.check li{margin:6px 0}

/* footer */
.foot{border-top:1px solid var(--outline); padding:20px 0; color:var(--muted)}
.foot-flex{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-nav{display:flex; gap:14px}
.foot-nav a{color:var(--muted); text-decoration:none}
.foot-nav a:hover{color:#fff}
.foot-copy{display:flex; align-items:center; gap:0; color: var(--muted); opacity:.92}
.foot-copy .sig{margin-left:12px; padding-left:12px; border-left:1px dashed var(--outline); opacity:.85; white-space:nowrap}
.foot-copy .sig a{color:inherit; text-decoration:none; border-bottom:1px dotted currentColor}
.foot-copy .sig a:hover{color: var(--ink); border-bottom-color: transparent}

/* --- Responsive --- */
@media (max-width: 980px){
  .kpi-grid{grid-template-columns:1fr}
  .line-wrap{height:160px}
  #metrics-line{top:0; height:150px}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .topbar .wrap{height:56px}
  .mainnav a{display:none}
  .mainnav .btn.small{display:inline-block}
  .cta-row{flex-direction:column; align-items:flex-start}
  .btn, .btn.ghost{width:100%; text-align:center}
}


/* Corregir títulos difuminados */
#metrics-hero h1 {
  text-shadow: none !important;
  color: #fff; /* blanco puro */
}


/* ===== FIX: título nítido, sin difuminado ===== */
#metrics-hero h1,
#metricsHero h1,
.metrics-hero h1 {
  color: #fff !important;              /* blanco puro */
  text-shadow: none !important;        /* sin sombra */
  filter: none !important;             /* sin filtros */
  opacity: 1 !important;               /* 100% opaco */
  mix-blend-mode: normal !important;   /* sin mezcla rara */
  text-rendering: geometricPrecision;  /* render nítido */
  -webkit-font-smoothing: antialiased; /* suavizado correcto */
  position: relative;
  z-index: 5;                          /* por encima de la línea */
}

/* Asegura que la línea/overlay nunca tape el título */
#metrics-hero .track-layer,
#metricsHero .track-layer,
.metrics-hero .track-layer,
#metrics-hero .path,
#metricsHero .path,
.metrics-hero .path {
  z-index: 1 !important;
}

#metrics-hero .kpi-row,
#metricsHero .kpi-row,
.metrics-hero .kpi-row {
  position: relative;
  z-index: 2;
}




/* --- Referencias: estilo de links (solo en la sección #metodologia) --- */
#metodologia .check{
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}
#metodologia .check li{ margin: 8px 0; }

#metodologia .check a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--outline);
  color: #eaf2ff;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

/* pequeño marcador a la izquierda */
#metodologia .check a::before{
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff 0 12%, transparent 13%) , var(--brand);
  box-shadow: 0 0 6px rgba(242,22,81,.45) inset;
  opacity: .95;
}

/* icono de enlace externo */
#metodologia .check a::after{
  content: "↗";
  font-size: 12px;
  margin-left: auto;
  opacity: .75;
}

#metodologia .check a:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  border-color: #ffffff44;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

#metodologia .check a:visited{ color: #eaf2ff; }
#metodologia .check a:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}




/* --- Indicador "Pincha para conocer más" en los enlaces de referencias --- */
#metodologia .check a{
  position: relative;
  flex-direction: column;   /* texto arriba + microcopy abajo */
  align-items: flex-start;
  gap: 6px;
  font-weight: 500;
}

#metodologia .check a span{
  display: block;
  font-size: 13px;
  color: var(--muted);
  opacity: 0.85;
  font-style: italic;
  transition: color .2s ease, opacity .2s ease;
}

/* inserta el microcopy automáticamente */
#metodologia .check a::after{
  content: "Pincha para conocer más";
  font-size: 12px;
  color: var(--muted);
  opacity: 0.75;
  font-style: italic;
  margin-top: 2px;
  align-self: flex-start;
  transition: color .2s ease, opacity .2s ease;
}

/* hover mejora el microcopy */
#metodologia .check a:hover::after{
  color: var(--brand);
  opacity: 1;
}



/* ==== Metodología: versión compacta y sin panel lateral ==== */
#metodologia .wrap{ max-width:980px }
#metodologia h2{ margin:0 0 6px }
#metodologia .note{ margin:2px 0 6px; font-size:14px }
#metodologia .refs-hint{
  margin:4px 0 14px; font-size:13px; opacity:.85;
}
#metodologia .refs-hint .hint-arrow{ font-weight:900 }

/* Lista de referencias compacta y clickeable */
#metodologia .refs-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:12px;
}
#metodologia .refs-list a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:#0f1a3b; border:1px solid var(--outline);
  border-radius:14px; color:#e7eeff; text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  position:relative;
}
#metodologia .refs-list a::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 6px rgba(242,22,81,.18);
}
#metodologia .refs-list a::after{
  content:"↗"; margin-left:auto; opacity:.6;
  transform: translateX(-2px); transition: opacity .15s ease, transform .15s ease;
}
#metodologia .refs-list a:hover{
  background:#151e42; border-color:#ffffff3a; transform:translateY(-1px);
}
#metodologia .refs-list a:hover::after{
  opacity:1; transform:translateX(0);
}

/* Elimina el microcopy anterior y cualquier panel heredado */
#metodologia .check a::after{ content:none !important; }
#metodologia .check a{ flex-direction:row !important; }
#metodologia .panel{ display:none !important; }



/* ====== Referencias por secciones ====== */
.refs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:22px;
  margin-top:16px;
}
.ref-group h3{
  margin:0 0 10px;
  font-weight:900;
  letter-spacing:.2px;
}
.refs-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }

.ref-pill{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  border-radius:12px;
  background: #0f193a;
  border:1px solid var(--outline);
  color:#e7eeff; text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  position:relative;
}
.ref-pill::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(242,22,81,.16);
  flex:none;
}
.ref-pill::after{
  content:"↗";
  margin-left:auto; opacity:.7;
}
.ref-pill:hover{
  transform: translateY(-1px);
  border-color:#ffffff33;
  background:#122049;
  text-decoration:none;
}

/* mobile */
@media (max-width: 980px){
  .refs-grid{ grid-template-columns:1fr }
}



/* ====== Referencias – layout ordenado y futuro-proof ====== */

/* Contenedor de grupos: 2 columnas, orden preservado y alineación arriba */
.refs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;                 /* separación consistente */
  align-items: start;        /* las tarjetas no se estiran */
  grid-auto-flow: row;       /* respeta el orden en DOM */
  margin-top: 18px;
}

/* Cada grupo como tarjeta (misma caja = sensación de orden) */
.ref-group{
  background: #0b1430;                /* surface */
  border: 1px solid var(--outline);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* Título del grupo: tipografía y ritmo vertical */
.ref-group h3{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.25;
}

/* Lista de papers dentro del grupo: una columna, mismo gap */
.refs-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Pastillas (links): ancho completo y altura mínima */
.ref-pill{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #0f193a;               /* un poco más oscuro para jerarquía */
  border: 1px solid var(--outline);
  color: #e7eeff;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  position: relative;
}

/* Punto + halo al inicio (consistente entre items) */
.ref-pill::before{
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(242,22,81,.16);
  flex: none;
}

/* Flecha de “se abre en nueva pestaña” alineada a la derecha */
.ref-pill::after{
  content: "↗";
  margin-left: auto;
  opacity: .7;
}

/* Hover sutil y consistente */
.ref-pill:hover{
  transform: translateY(-1px);
  border-color: #ffffff33;
  background: #122049;
  text-decoration: none;
}

/* RESPONSIVE: 1 columna en mobile, 3 columnas en muy ancho (opcional) */
@media (max-width: 980px){
  .refs-grid{ grid-template-columns: 1fr; }
}
@media (min-width: 1280px){
  /* si quieres 3 columnas en escritorio grande, descomenta: */
  /* .refs-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } */
}