/* ==========================================================================
   embudo.css — «Para tu negocio»: el flujo de un negocio como analítica viva
   (4-oct-2026). Un panel NOCHE dentro de la sección clara.
   --------------------------------------------------------------------------
   Solo roles de la piel (--fondo, --tinta, --linea…) y los dos colores de
   efecto (--efecto-luz = lima, --efecto-contraste = magenta). El color de cada
   fase es una mezcla sRGB de los dos: 0 % · 22 % · 55 % · 88 % de magenta
   (embudo.js usa la MISMA mezcla en el lienzo). Nunca texto lima sobre blanco:
   aquí el fondo es noche y el lima es luz o relleno con tinta encima.
   Escritorio e iPad horizontal (≥ 1100 px): horizontal, como un tablero.
   Debajo: vertical; cada fase es un bloque y la línea baja.
   ========================================================================== */

.embudo {
  --emb-hmax: 40;          /* medio ancho máximo de la franja en px (lo lee embudo.js) */
  --emb-carril: 22px;      /* margen lateral del mapa: por ahí regresa el ciclo */
  --emb-pista: 104px;      /* alto de la pista donde corre la franja (horizontal) */
  --emb-tinta-luz: var(--piel-sobre-luz, #0b0c0e);
  position: relative; isolation: isolate; overflow: hidden;
  margin: 20px 0 0; padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--linea); border-radius: 28px;
  background:
    radial-gradient(55% 60% at 14% 70%, color-mix(in srgb, var(--efecto-luz) 7%, transparent), transparent 70%),
    radial-gradient(45% 55% at 92% 78%, color-mix(in srgb, var(--efecto-contraste) 7%, transparent), transparent 70%),
    var(--fondo);
  color: var(--tinta);
  box-shadow: 0 50px 100px -60px rgb(0 0 0 / .6);
}
/* Cruces de registro (ef-registro) un poco más afuera: no tocan el texto. */
.embudo.ef-registro::after { inset: 8px; }
/* Retícula técnica (ef-reticula) que se desvanece hacia los bordes. */
.embudo__reticula {
  --ef-celda: 44px;
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  -webkit-mask-image: radial-gradient(110% 85% at 50% 55%, #000 25%, transparent 80%);
  mask-image: radial-gradient(110% 85% at 50% 55%, #000 25%, transparent 80%);
}
/* Filo de luz arriba: lima → magenta. */
.embudo__filo {
  position: absolute; left: 6%; right: 6%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--efecto-luz) 28%, var(--efecto-contraste) 72%, transparent);
  box-shadow: 0 0 22px 1px color-mix(in srgb, var(--efecto-luz) 35%, transparent);
  opacity: .8;
}

/* Cabeza del panel ------------------------------------------------------- */
.embudo__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }
.embudo__titulo { font: 500 14px/1.3 var(--fuente-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.embudo__estado {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px;
  border: 1px solid var(--linea); border-radius: var(--radio-pildora); background: rgb(255 255 255 / .03);
  font: 500 14px/1.2 var(--fuente-mono); color: var(--tinta);
}
.embudo__estado .ef-orbe { width: 9px; height: 9px; }

/* KPI -------------------------------------------------------------------- */
.embudo__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.embudo__kpi {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden;
  padding: 16px 18px 0; border: 1px solid var(--linea); border-radius: 18px;
}
.embudo__kpi:not(.ef-tarjeta-luz) { background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .012)); }
.embudo__kpi dt { font: 500 14px/1.25 var(--fuente-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave); }
.embudo__kpi dd { margin: 0; }
.embudo__kpi-cifra {
  display: block; font: 700 clamp(28px, 3.1vw, 44px)/1 var(--fuente-cifra); letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.embudo__kpi .ef-delta { position: absolute; top: 14px; right: 14px; font-size: 14px; line-height: 1.3; }
.embudo__kpi--luz { border-color: transparent; }
.embudo__kpi--luz dt { color: color-mix(in srgb, var(--emb-tinta-luz) 72%, transparent); }
.embudo .embudo__kpi--luz .ef-delta--sube { color: var(--emb-tinta-luz); background: rgb(11 12 14 / .08); padding: 0 .35em; border-radius: 4px; }
.embudo__chispa { display: block; width: calc(100% + 36px); height: 34px; margin: 4px -18px 0; overflow: visible; clip-path: inset(0 100% 0 0); transition: clip-path 1.7s var(--curva-salida) .2s; }
.embudo__chispa .l { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.embudo.is-visto .embudo__chispa { clip-path: inset(0 0 0 0); }

/* Mapa: la franja (SVG), los puntos de luz (lienzo) y las etapas (HTML) --- */
.embudo__mapa { position: relative; margin-top: 30px; padding: 0 var(--emb-carril) 54px; }
.embudo__trazo, .embudo__lienzo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.embudo__trazo { z-index: 0; overflow: visible; }
.embudo__lienzo { z-index: 1; }
.embudo__fases { position: relative; z-index: 2; display: grid; grid-template-columns: 2fr 3fr 3fr 3fr; }

/* La franja y el arco de regreso (los arma embudo.js) */
.embudo__resplandor { opacity: .5; }
.embudo__base { fill-opacity: .13; }
.embudo__foco { opacity: 0; transition: opacity .8s var(--curva-estandar); }
.embudo__foco.is-activa { opacity: .34; }
.embudo__nucleo { fill-opacity: .2; }
.embudo__borde { fill: none; stroke-width: 1; stroke-opacity: .45; }
.embudo__linea { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.embudo__arco { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 7; opacity: 0; transition: opacity .8s var(--curva-estandar); }
.embudo.is-revelado .embudo__arco { opacity: .5; }
.embudo .embudo__arco.is-viva { opacity: 1; stroke-dasharray: none; stroke-width: 1.8; }

/* Fase: color, nombre con soporte (como el tablero) y lo que construimos */
.embudo__fase { --c: var(--efecto-luz); position: relative; display: flex; flex-direction: column; min-width: 0; }
.embudo__fase[data-fase="1"] { --c: color-mix(in srgb, var(--efecto-luz), var(--efecto-contraste) 22%); }
.embudo__fase[data-fase="2"] { --c: color-mix(in srgb, var(--efecto-luz), var(--efecto-contraste) 55%); }
.embudo__fase[data-fase="3"] { --c: color-mix(in srgb, var(--efecto-luz), var(--efecto-contraste) 88%); }
.embudo__fase::before { /* el soporte: [—— FASE ——] con patitas */
  content: ""; position: absolute; left: 12px; right: 12px; top: 15px; height: 12px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-bottom: 0; border-radius: 6px 6px 0 0;
  transition: border-color .6s var(--curva-estandar), box-shadow .6s var(--curva-estandar);
}
.embudo__fase-nombre {
  position: relative; z-index: 1; align-self: center; display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px; padding: 7px 13px 7px 9px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 9%, var(--fondo));
  font: 700 15px/1 var(--fuente-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta);
  transition: background-color .6s var(--curva-estandar), color .6s var(--curva-estandar), border-color .6s var(--curva-estandar), box-shadow .6s var(--curva-estandar);
}
.embudo__fase-nombre span { font: 500 14px/1 var(--fuente-mono); letter-spacing: 0; color: var(--c); transition: color .6s var(--curva-estandar); }

.embudo__etapas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.embudo__etapa {
  position: relative; display: grid; grid-template-rows: auto var(--emb-pista) auto;
  justify-items: center; align-items: center; min-width: 0; text-align: center;
}
.embudo__cifra { font: 700 clamp(22px, 2.05vw, 28px)/1 var(--fuente-cifra); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.embudo__punto {
  position: relative; width: 14px; height: 14px; border-radius: 50%;
  background: var(--fondo); border: 2px solid var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent);
  transition: box-shadow .6s var(--curva-estandar), background-color .6s var(--curva-estandar);
}
.embudo__nombre { font: 500 14px/1.25 var(--fuente-texto); letter-spacing: -.01em; color: var(--tinta-suave); white-space: nowrap; transition: color .6s var(--curva-estandar); }
.embudo__barra { display: none; }

/* Pago: un pulso sutil y constante (el comercio respira) */
.embudo__etapa[data-momento="pago"] .embudo__punto::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c);
  animation: emb-pulso 2.6s var(--curva-salida) infinite;
}
@keyframes emb-pulso { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

.embudo__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 58px; padding: 0 6px; }
.embudo__chips li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px;
  border: 1px solid var(--linea); border-radius: var(--radio-pildora); background: rgb(255 255 255 / .03);
  font: 500 14px/1.2 var(--fuente-texto); color: var(--tinta-suave); white-space: nowrap;
  transition: border-color .6s var(--curva-estandar), color .6s var(--curva-estandar), background-color .6s var(--curva-estandar);
}
.embudo__chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }

/* «Lo que construimos en cada fase»: un divisor que embudo.js pone sobre los chips */
.embudo__construye {
  position: absolute; z-index: 2; left: var(--emb-carril); right: var(--emb-carril); top: var(--emb-y-construye, 0px);
  display: flex; align-items: center; gap: 14px; visibility: hidden;
  font: 500 14px/1 var(--fuente-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
}
.embudo__construye::before, .embudo__construye::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.embudo.is-medido .embudo__construye { visibility: visible; }

/* «↺ El ciclo se cierra», sentado en el arco de regreso */
.embudo__ciclo {
  position: absolute; z-index: 2; left: var(--emb-x-ciclo, 50%); top: var(--emb-y-ciclo, calc(100% - 26px));
  transform: translate(-50%, -50%); padding: 6px 13px; border-radius: var(--radio-pildora);
  border: 1px solid var(--linea); background: var(--fondo);
  font: 500 14px/1 var(--fuente-mono); letter-spacing: .04em; color: var(--tinta-suave); white-space: nowrap;
  transition: color .5s var(--curva-estandar), border-color .5s var(--curva-estandar), box-shadow .5s var(--curva-estandar);
}
.embudo__ciclo span { color: var(--efecto-luz); }
.embudo__ciclo.is-viva { color: var(--tinta); border-color: color-mix(in srgb, var(--efecto-luz) 60%, transparent); box-shadow: 0 0 24px -6px color-mix(in srgb, var(--efecto-luz) 70%, transparent); }

/* Fase encendida (la recorre el cometa, el cursor o, quieto, todas) */
.embudo__fase.is-activa::before { border-color: var(--c); box-shadow: 0 -6px 18px -10px var(--c); }
.embudo__fase.is-activa .embudo__fase-nombre { background: var(--c); border-color: var(--c); color: var(--emb-tinta-luz); box-shadow: 0 0 30px -6px var(--c); }
.embudo__fase.is-activa .embudo__fase-nombre span { color: color-mix(in srgb, var(--emb-tinta-luz) 70%, transparent); }
.embudo__fase.is-activa .embudo__punto { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent), 0 0 20px color-mix(in srgb, var(--c) 55%, transparent); }
.embudo__fase.is-activa .embudo__nombre { color: var(--tinta); }
.embudo__fase.is-activa .embudo__chips li { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--tinta); }

/* Monto que sube del pago */
.embudo__flota {
  position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; opacity: 0; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; background: var(--efecto-luz); color: var(--emb-tinta-luz);
  font: 700 15px/1 var(--fuente-cifra); font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--efecto-luz) 80%, transparent);
}

/* Cierre del panel ------------------------------------------------------- */
.embudo__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--linea);
}
.embudo__pie > p { max-width: 32ch; font: 600 clamp(18px, 1.7vw, 22px)/1.3 var(--fuente-display); letter-spacing: -.015em; text-wrap: balance; }
.embudo__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.embudo__acciones .boton--negro { box-shadow: 0 0 0 1px color-mix(in srgb, var(--efecto-luz) 40%, transparent), 0 14px 40px -14px color-mix(in srgb, var(--efecto-luz) 75%, transparent); }
.embudo__enlace {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--tinta); font-weight: 600; font-size: 16px;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, var(--efecto-luz) 65%, transparent);
}
@media (hover: hover) { .embudo__enlace:hover { text-decoration-color: var(--efecto-luz); } }

/* iPad horizontal y laptops chicas: más ancho para las 11 etapas */
@media (min-width: 1100px) and (max-width: 1299px) {
  .embudo { --emb-carril: 16px; padding: 22px 20px 24px; }
  .embudo__chips { gap: 5px; padding: 0 2px; }
  .embudo__chips li { gap: 6px; padding: 5px 9px 5px 8px; }
}

/* --------------------------------------------------------------------------
   iPad vertical, tabletas y celular: la línea BAJA; cada fase es un bloque
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .embudo { --emb-hmax: 13; --emb-carril: 30px; }
  .embudo__mapa { margin-top: 22px; padding: 26px var(--emb-carril) 58px 0; }
  .embudo__fases { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .embudo__fase {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start;
    padding: 14px 16px 16px 0; border: 1px solid var(--linea); border-radius: 18px; background: rgb(255 255 255 / .022);
    transition: border-color .6s var(--curva-estandar), background-color .6s var(--curva-estandar);
  }
  .embudo__fase::before { display: none; }
  .embudo__fase.is-activa { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 5%, transparent); }
  .embudo__fase-nombre { grid-column: 2; justify-self: start; margin: 0 0 6px; }
  .embudo__etapas { grid-column: 1 / -1; grid-auto-flow: row; grid-auto-columns: auto; }
  .embudo__etapa {
    grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    justify-items: start; text-align: left; padding: 9px 0 7px;
  }
  .embudo__punto { grid-column: 1; grid-row: 1; justify-self: center; }
  .embudo__nombre { grid-column: 2; grid-row: 1; font-size: 16px; color: var(--tinta); }
  .embudo__cifra { grid-column: 3; grid-row: 1; justify-self: end; font-size: 23px; }
  .embudo__barra {
    display: block; position: relative; grid-column: 2 / 4; grid-row: 2; justify-self: stretch;
    height: 3px; margin-top: 9px; border-radius: 3px; background: rgb(255 255 255 / .07); overflow: hidden;
  }
  .embudo__barra::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 100%); border-radius: inherit;
    background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, transparent));
    transform-origin: 0 50%; transition: transform 1.3s var(--curva-salida);
  }
  .embudo:not(.is-visto) .embudo__barra::after { transform: scaleX(0); }
  .embudo__chips { grid-column: 2; justify-content: flex-start; align-items: center; margin-top: 12px; padding: 0; }
  .embudo__chips::before { content: "Construimos"; flex-basis: 100%; margin-bottom: 2px; font: 500 14px/1.3 var(--fuente-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
  .embudo__construye { display: none; }
}
/* iPad vertical: lo que construimos va a la derecha de sus etapas */
@media (min-width: 700px) and (max-width: 1099px) {
  .embudo__fase { grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 0; }
  .embudo__fase-nombre { grid-column: 2 / -1; }
  .embudo__etapas { grid-column: 1 / 3; grid-row: 2; }
  .embudo__chips { grid-column: 3; grid-row: 2; align-self: center; margin: 0 0 0 22px; padding: 6px 0 6px 22px; border-left: 1px solid var(--linea); }
}
/* Celular */
@media (max-width: 699px) {
  .embudo { border-radius: 22px; padding: 22px 14px 20px; }
  .embudo.ef-registro::after { inset: 6px; }
  .embudo__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .embudo__kpi { padding: 13px 13px 0; border-radius: 14px; gap: 6px; }
  .embudo__kpi dt { letter-spacing: .02em; }
  .embudo__kpi-cifra { font-size: clamp(25px, 7.4vw, 32px); }
  .embudo__kpi .ef-delta { top: auto; bottom: 8px; right: 10px; }
  .embudo__chispa { width: calc(100% + 26px); margin: 2px -13px 0; height: 26px; }
  .embudo { --emb-carril: 22px; }
  .embudo__fases { gap: 10px; }
  .embudo__fase { grid-template-columns: 38px minmax(0, 1fr); padding: 12px 12px 14px 0; }
  .embudo__etapa { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 7px 0 5px; }
  .embudo__barra { margin-top: 7px; }
  .embudo__chips { gap: 5px; margin-top: 10px; }
  .embudo__chips li { gap: 6px; padding: 5px 9px 5px 8px; }
  .embudo__pie { margin-top: 2px; }
  .embudo__pie > p { font-size: 18px; }
  .embudo__acciones { width: 100%; }
  .embudo__acciones .boton { width: 100%; }
}

/* Movimiento reducido: quieto y legible (embudo.js dibuja el estado final) */
@media (prefers-reduced-motion: reduce) {
  .embudo *, .embudo *::before, .embudo *::after { animation: none !important; transition: none !important; }
}
[data-movimiento="reducido"] .embudo *, [data-movimiento="reducido"] .embudo *::before, [data-movimiento="reducido"] .embudo *::after { animation: none !important; transition: none !important; }