/* ============================================================================
   business2.css · añadidos a la portada de RIIA Business

   Por qué existe
   --------------
   `styles.css` no se toca nunca. Igual que `estate2.css` en el lado de Estate,
   esta hoja recoge lo que se añade después, con su propio sello de caché. Si
   algo de aquí se rompe, se quita el <link> y la portada vuelve a ser la de
   antes sin tocar una línea del original.

   Qué hay dentro
   --------------
   1. El embudo de fugas del diagnóstico, que sustituye a las cinco barras de
      áreas. Reutiliza .scan__row, .scan__track y .scan__val para no perder la
      animación que ya mueve main.js: las barras siguen creciendo al entrar en
      pantalla y el barrido sigue pasando por encima.
   2. El resumen del caso Lumen Sur, donde antes estaba el mapa de
      oportunidades.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════
   1 · EL EMBUDO DE FUGAS
   La pregunta de la sección es «¿dónde se está perdiendo valor?». Cinco
   barras de áreas no la responden: dicen cuánto hay, no dónde se escapa.
   Un embudo sí. Cada fila muestra cuántas oportunidades siguen vivas, la
   parte magenta es lo que se perdió en ese paso, y el punto que late marca
   exactamente el lugar de la fuga.
   ══════════════════════════════════════════════════════════════════════ */

/* Una columna más que .scan__row: la de la pérdida. La primera columna va
   holgada para que «TIENE SEGUIMIENTO» quepa en una línea; si se parte, esa
   fila crece y el embudo pierde su ritmo de escalera. */
.fug__row{ grid-template-columns:minmax(166px,1fr) 3fr auto auto; }

/* El tramo perdido se ve. Antes era hueco gris; ahora es la fuga. */
.fug__row .scan__track{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.05) 0 calc(var(--p) * 1%),
      rgba(230,61,208,.22)  calc(var(--p) * 1%) 100%);
}

/* El punto donde se escapa, latiendo. */
.fug__row .scan__track::after{
  content:''; position:absolute; top:50%; left:calc(var(--p) * 1%);
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:var(--magenta); opacity:0;
}
html.js .fug__row.is-in .scan__track::after{
  animation:fugaLate 2.8s var(--ease) infinite;
  animation-delay:1.2s;
}
@keyframes fugaLate{
  0%   { opacity:0;  box-shadow:0 0 0 0   rgba(230,61,208,.55); }
  18%  { opacity:1;  box-shadow:0 0 0 0   rgba(230,61,208,.55); }
  70%  { opacity:.9; box-shadow:0 0 0 11px rgba(230,61,208,0); }
  100% { opacity:.9; box-shadow:0 0 0 0   rgba(230,61,208,0); }
}
/* Sin JS no hay animación, pero el punto tiene que verse igual. */
html:not(.js) .fug__row .scan__track::after{ opacity:.9; }

/* En la primera fila entran las cien: ahí todavía no se escapa nada. */
.fug__row--entra .scan__track::after{ display:none; }

/* Cuántas quedan vivas y cuántas se perdieron. */
.fug__row .scan__val{ min-width:34px; }
.fug__p{
  font-family:var(--f-mono); font-size:.68rem; color:var(--magenta);
  min-width:52px; text-align:right; white-space:nowrap;
}
.fug__row--entra .fug__p{ color:var(--soft); }

/* La fuga mayor se señala sola: es el hallazgo del diagnóstico. */
.fug__row--max{ position:relative; }
.fug__row--max .scan__name{
  color:var(--white);
  display:flex; flex-wrap:wrap; align-items:center; gap:5px; line-height:1.6;
}
.fug__row--max .fug__p{ font-weight:500; }
.fug__eti{
  display:inline-block; padding:.18rem .46rem; border-radius:5px;
  font-family:var(--f-mono); font-size:.52rem; letter-spacing:.12em;
  color:var(--ink); background:linear-gradient(135deg,var(--violet-hi),var(--magenta));
  vertical-align:middle;
}

/* El remate: la suma de todas las fugas, que es el argumento. */
.fug__suma{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem;
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
}
.fug__suma b{
  font-family:var(--f-display); font-weight:900; font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:1; letter-spacing:-.03em;
  background:linear-gradient(92deg,var(--violet-hi),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fug__suma span{ color:var(--soft); font-size:.95rem; }

@media (max-width:560px){
  .fug__row{ grid-template-columns:1fr auto; grid-template-areas:'nom perd' 'barra barra'; row-gap:7px; }
  .fug__row .scan__name{ grid-area:nom; }
  .fug__row .fug__p{ grid-area:perd; }
  .fug__row .scan__track{ grid-area:barra; }
  .fug__row .scan__val{ display:none; }   /* en el móvil manda la pérdida, no el resto */
}


/* ══════════════════════════════════════════════════════════════════════
   2 · EL RESUMEN DEL CASO
   Mismo patrón que el piloto Fuenzalida en el lado de Estate: las cifras
   grandes, un enlace discreto al caso completo y la nota de autorización.
   Quien quiera el detalle entra; quien no, sigue bajando.
   ══════════════════════════════════════════════════════════════════════ */
.casor{ padding:var(--sec) 0; background:var(--graphite); position:relative; }
.casor__head{ max-width:820px; }
.casor__head .h2{ font-size:clamp(2.1rem,5.6vw,4.2rem); }

.casor__ficha{
  display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; margin:18px 0 0;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft);
}
.casor__ficha b{ color:var(--soft); font-weight:500; }

/* Tres tarjetas bajo la grande. Con `auto-fit` el navegador abría cinco
   columnas y dejaba dos vacías a la derecha; fijando tres, el bloque queda
   cerrado y alineado con la tarjeta ancha de arriba. */
.casor__kpis{
  display:grid; gap:14px; margin-top:clamp(30px,5vh,52px);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:820px){
  .casor__kpis{ grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); }
}
.casor__kpi{
  position:relative; overflow:hidden; padding:1.5rem 1.4rem;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--glass),transparent);
}
.casor__kpi::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--violet),var(--magenta)); opacity:.75;
}
.casor__kpi--ancha{ grid-column:1/-1; }
.casor__n{
  display:block; font-family:var(--f-display); font-weight:900; line-height:.95;
  font-size:clamp(1.9rem,4.2vw,2.8rem); letter-spacing:-.025em;
  background:linear-gradient(92deg,var(--white),var(--violet-hi));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.casor__kpi--ancha .casor__n{ font-size:clamp(2.4rem,6.5vw,3.9rem); }
.casor__k{
  display:block; margin:.55rem 0 .65rem; font-family:var(--f-mono);
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet-hi);
}
.casor__kpi p{ margin:0; color:var(--soft); font-size:.92rem; line-height:1.55; }

/* El enlace es a propósito discreto: no compite con el botón del Sprint. */
.casor__link{ margin:clamp(24px,4vh,36px) 0 0; }
.casor__foot{
  display:flex; gap:.6rem; margin:16px 0 0; max-width:72ch;
  font-size:.8rem; line-height:1.6; color:var(--soft);
}
.casor__foot .dot{
  flex:none; width:6px; height:6px; margin-top:.5rem; border-radius:50%;
  background:var(--acc);
}

@media (prefers-reduced-motion: reduce){
  html.js .fug__row.is-in .scan__track::after{ animation:none; opacity:.9; }
}


/* ==========================================================================
   CAPACITACIONES EN IA  ·  .cap__
   La sección va entre #idea (fondo --ink) y #auditoria (degradado --ink →
   --graphite): se queda en --ink para que el degradado de abajo siga
   arrancando del mismo color y no aparezca un escalón. La separación la hace
   un filo de luz, no un cambio de fondo.
   El lenguaje de las tarjetas es el mismo de .casor__kpi, que ya está en esta
   página: borde fino, vidrio degradado y una barra violeta→magenta arriba.
   ========================================================================== */
.cap{
  padding:var(--sec) 0; background:var(--ink); position:relative;
  border-top:1px solid var(--line);
  scroll-margin-top:clamp(84px,12vh,112px);
}
/* Los destinos a los que saltan los enlaces nuevos: sin esto el encabezado
   queda debajo de la barra fija, que al subir no se esconde. */
#contacto, #sprint, #emprendedores{ scroll-margin-top:clamp(84px,12vh,112px); }
.cap::before{
  content:''; position:absolute; inset:0 0 auto; height:min(520px,60%);
  background:radial-gradient(90% 100% at 22% 0%,rgba(139,92,246,.1),transparent 70%);
  pointer-events:none;
}
.cap .lead{ max-width:52ch; }

/* ----------------------------- las tres tarjetas ----------------------------- */
.cap__grid{
  list-style:none; margin:clamp(34px,5.5vh,58px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px);
}
.cap__item{ display:grid; }

/* Toda la tarjeta es un enlace, así no hacen falta tres botones de texto. */
.cap__card{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto 1fr auto auto;
  gap:0 12px; align-content:start;
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(20px,2.2vw,26px);
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--glass),transparent);
  color:inherit; text-decoration:none;
  transition:border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.cap__card::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--violet),var(--magenta)); opacity:.75;
}
.cap__card:hover{
  border-color:var(--violet-hi); background-color:rgba(139,92,246,.055);
  transform:translateY(-3px);
}
.cap__card:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }

.cap__n{
  grid-column:1; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:500;
  color:var(--acc); line-height:1; letter-spacing:0;
}
.cap__niv{
  grid-column:2; align-self:center;
  font-size:.6rem; letter-spacing:.2em; color:var(--soft);
}
.cap__nom{
  grid-column:1 / -1; margin-top:16px;
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; line-height:1.1;
  font-size:clamp(1.15rem,1.7vw,1.45rem); color:var(--white);
}
.cap__para{
  grid-column:1 / -1; margin-top:9px;
  font-size:.6rem; letter-spacing:.14em; color:var(--soft);
}
.cap__pr{
  grid-column:1 / -1; margin-top:22px;
  font-size:.95rem; color:var(--soft);
}
.cap__pr b{
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.25rem,2vw,1.6rem);
  letter-spacing:-.03em; color:var(--white); display:inline-block;
}
.cap__pr small{ display:block; margin-top:2px; font-size:.68rem; color:var(--soft); letter-spacing:.04em; }
.cap__ir{
  grid-column:1 / -1; margin-top:16px;
  font-size:.62rem; letter-spacing:.18em; color:var(--violet-hi);
  display:flex; align-items:center; gap:7px;
}
.cap__ir i{ transition:transform .3s var(--ease); font-style:normal; }
.cap__card:hover .cap__ir i{ transform:translateX(4px); }

/* --------------------------- áreas, acciones y nota --------------------------- */
.cap__areas{
  margin-top:clamp(26px,4vh,40px);
  color:var(--soft); font-size:.95rem; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
}
.cap__areas .mono{ color:var(--soft); font-size:.62rem; letter-spacing:.2em; }
.cap__areas i{ color:var(--acc); font-style:normal; }

.cap__acc{
  margin-top:clamp(26px,4vh,38px);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
}
.cap__pdf{ font-size:.62rem; letter-spacing:.14em; }
.cap__nota{
  margin-top:18px; max-width:68ch;
  color:var(--soft); font-size:.8rem; line-height:1.6;
}

@media (max-width:760px){
  .cap__grid{ grid-template-columns:1fr; }
  .cap__acc .btn{ width:100%; }
  .cap__acc .btn--primary{ order:0; }
  .cap__pdf{ order:1; width:100%; }
  .cap__acc .btn--ghost{ order:2; }
  /* Las dos acciones quedan muy por encima de la barra fija del móvil, y
     después de la sección sigue #auditoria, así que hay scroll de sobra para
     leer la nota final: no hace falta relleno extra, que sólo abriría un
     hueco entre esta sección y la siguiente. */
}

@media (prefers-reduced-motion: reduce){
  .cap__card, .cap__ir i{ transition:none; }
  .cap__card:hover{ transform:none; }
}

/* ==========================================================================
   TRES RUTAS DE ENTRADA  ·  dentro de #escalera
   Van antes de la escalera 01/02/03, que sigue siendo la del servicio de
   implementación: Sprint, Continuidad y Transformación.
   ========================================================================== */
.cap__rutas{
  list-style:none; margin:clamp(34px,5vh,52px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px);
}
.cap__ruta{
  padding:clamp(18px,2vw,24px);
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--glass),transparent);
  display:flex; flex-direction:column; gap:9px;
}
.cap__ruta .cap__n{ grid-column:auto; font-size:1.1rem; color:var(--violet-hi); }
.cap__ruta h3{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--white);
}
.cap__ruta p{ color:var(--soft); font-size:.88rem; line-height:1.55; margin:0; flex:1; }
.cap__ruta a{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--violet-hi); display:inline-flex; align-items:center; gap:7px; min-height:24px;
}
.cap__ruta a:hover{ color:var(--white); }
.tag--sub{ margin-top:clamp(34px,5vh,52px); color:var(--soft)!important; }

@media (max-width:760px){
  .cap__rutas{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PREGUNTAS FRECUENTES  ·  .faq__
   details/summary nativo: se abre y se cierra con teclado sin JavaScript.
   Todas cerradas al cargar; sólo se ven las preguntas.
   ========================================================================== */
.faq{
  padding:var(--sec) 0; background:var(--ink-2);
  scroll-margin-top:clamp(84px,12vh,112px);
}
.faq__list{ margin-top:clamp(34px,5vh,56px); border-top:1px solid var(--line); max-width:900px; }
.faq__item{ border-bottom:1px solid var(--line); }

.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(17px,2vw,22px) 2px; cursor:pointer; list-style:none;
  font-family:var(--f-body); font-weight:600; font-size:clamp(.96rem,1.25vw,1.08rem);
  color:var(--white); line-height:1.4;
  transition:color .3s var(--ease);
  min-height:44px;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:''; }
.faq__q:hover{ color:var(--violet-hi); }
.faq__item:focus-within .faq__q{ color:var(--violet-hi); }
.faq__q:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:4px; }

/* El signo + que se vuelve − al abrir. Dos trazos, sin tipografía de iconos. */
.faq__ic{ position:relative; flex:none; width:16px; height:16px; }
.faq__ic::before,
.faq__ic::after{
  content:''; position:absolute; top:50%; left:0; width:100%; height:1.5px;
  background:var(--violet-hi); border-radius:2px;
  transition:transform .35s var(--ease);
}
.faq__ic::after{ transform:rotate(90deg); }
.faq__item[open] .faq__ic::after{ transform:rotate(0deg); }

.faq__a{ padding:0 2px clamp(20px,2.4vw,26px); max-width:72ch; }
.faq__a p{ color:var(--soft); font-size:.95rem; line-height:1.65; margin:0; }
.faq__a a{ color:var(--violet-hi); text-decoration:underline; text-underline-offset:3px; }
.faq__a a:hover{ color:var(--white); }

@media (prefers-reduced-motion: reduce){
  .faq__ic::before, .faq__ic::after, .faq__q{ transition:none; }
}

/* ==========================================================================
   EL MENÚ PASA DE OCHO A NUEVE ENTRADAS
   Se aprieta el carril y, en escritorios estrechos, se suelta el subtítulo de
   la marca —que ya desaparece bajo 900px— en lugar de esconder secciones.
   ========================================================================== */
@media (min-width:901px){
  .nav__menu{ gap:clamp(13px,1.5vw,24px); }
  .nav__menu a{ font-size:clamp(.75rem,.74vw,.84rem); white-space:nowrap; }
}
@media (min-width:901px) and (max-width:1180px){
  .brand__sub{ display:none; }
}

/* El enlace secundario del inicio hacia las capacitaciones. */
.hero__mas{ margin-top:18px; }
.hero__mas a{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet-hi); display:inline-flex; align-items:center; gap:8px; min-height:30px;
}
.hero__mas a:hover{ color:var(--white); }

/* ---------------- capacitación dentro del formulario de contacto ---------------- */
.cap__form{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.cap__form-tt{ color:var(--acc); font-size:.62rem; letter-spacing:.2em; margin-bottom:14px; }
.cap__form-grid input{ width:100%; }
/* styles.css estiliza .tstep input y .tstep textarea, pero no select: sin esto
   el desplegable sale con la caja blanca del sistema dentro de un formulario
   oscuro. Se le copia el mismo trazo inferior que a los demás campos. */
.cap__form-grid select{
  width:100%; padding:14px 34px 14px 0;
  background-color:transparent; border:0; border-bottom:1px solid var(--line-2);
  font-family:var(--f-body); font-size:1.05rem; color:var(--white); color-scheme:dark; cursor:pointer;
  appearance:none; -webkit-appearance:none; border-radius:0;
  transition:border-color .3s var(--ease);
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                   linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.cap__form-grid select:focus{ outline:none; border-bottom-color:var(--acc); }
.cap__form-grid select:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }
/* El desplegable nativo, para que no quede texto claro sobre fondo claro. */
.cap__form-grid option{ background:var(--graphite); color:var(--white); }