/* ZOESYSTEM MLM · funciones.css (M10)
   Bloque C: S07 Funciones, S08 Diferenciales, S09 Multipaís y S10 Seguridad. Se carga DESPUÉS de secciones.css y ANTES de
   animaciones.css. Mismas capas que el resto. Solo tokens de base.css; ningún color suelto.
   Estado final por defecto: sin JavaScript o con «reducir movimiento» todo se ve terminado. Los movimientos van en la capa
   «animaciones», solo con «no-preference», y parten del estado «revelar--pendiente» que pone revelar.js. */

@layer base, componentes, secciones, animaciones;

@layer secciones {

  /* ---------- Textos de cabecera comunes del bloque ---------- */
  .fn-intro, .mp__intro { margin: var(--e-4) 0 0; }
  .fn-intro { color: var(--ink-700); }
  .mp__intro { color: var(--on-dark); }

  /* ---------- S07 Funciones ---------- */
  .fn-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 640px) {
    .fn-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); }
  }
  /* Mosaico de 6 columnas: 2 tarjetas anchas y luego 6 de 2 columnas */
  @media (min-width: 1024px) {
    .fn-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .fn { grid-column: span 2; }
    .fn--ancha { grid-column: span 3; }
  }

  /* Las tarjetas no son enlaces: no reaccionan al puntero (UX-12) */
  .fn {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--e-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--mist-50);
    color: var(--ink-900);
  }
  .fn--oscura {
    border-color: var(--pine-900);
    background: var(--pine-900);
    color: var(--white);
    --foco: var(--foco-oscuro);
  }
  .fn__titulo { margin: 0 0 var(--e-2); }
  .fn__texto { margin: 0 0 var(--e-5); max-width: none; color: var(--ink-700); font-size: 15px; line-height: 1.5; }
  .fn--oscura .fn__texto { color: var(--on-dark); }

  /* Ilustración decorativa: 112 px de alto, abajo de la tarjeta */
  .fn__ilus { height: 112px; margin-top: auto; overflow: hidden; }
  .fn__ilus svg { display: block; width: 100%; max-width: 240px; height: auto; }

  /* 1 · Árbol de socios */
  .arbol__lineas { fill: none; stroke: var(--zoe-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .arbol__nodo { fill: var(--pine-700); }
  .arbol__raiz { fill: var(--zoe-700); }

  /* 2 · Barras de comisión (sobre oscuro: el dorado es «comisión ganada») */
  .fn-comis { display: grid; align-content: center; gap: var(--e-3); }
  .fn-comis__fila { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--e-2); }
  .fn-comis__rotulo { color: var(--on-dark); font-size: 13px; font-weight: 700; line-height: 1.3; }
  .fn-comis__pista { display: block; height: 10px; overflow: hidden; border-radius: var(--r-pill); background: var(--pine-800); }
  .fn-comis__relleno {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--coin-400);
    transform: scaleX(var(--v));
    transform-origin: left center;
  }
  .fn-comis__relleno--1 { --v: .9; }
  .fn-comis__relleno--2 { --v: .62; }
  .fn-comis__relleno--3 { --v: .45; }
  .fn-comis__relleno--4 { --v: .3; }

  /* 3 · Billetera */
  .fn-bill { display: flex; align-items: center; }
  .fn-bill__tarjeta {
    position: relative;
    display: grid;
    gap: var(--e-1);
    width: 100%;
    max-width: 240px;
    padding: var(--e-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
  }
  .fn-bill__rotulo { color: var(--ink-600); font-size: 13px; font-weight: 700; line-height: 1.4; }
  .fn-bill__monto { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
  .fn-bill__boton {
    justify-self: start;
    margin-top: var(--e-1);
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--zoe-700);
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
  }
  .fn-bill__monedas { position: absolute; top: var(--e-3); right: var(--e-3); display: flex; }
  .fn-bill__moneda { display: block; width: 18px; height: 18px; margin-left: -6px; border: 2px solid var(--white); border-radius: 50%; background: var(--coin-400); }

  /* 4 · Tienda: tres tarjetas de producto sin texto */
  .fn-tienda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); align-content: center; }
  .fn-prod { display: grid; gap: 6px; padding: var(--e-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); }
  .fn-prod__img { display: block; height: 52px; border-radius: 8px; background: var(--zoe-100); }
  .fn-prod:nth-child(2) .fn-prod__img { background: var(--zoe-200); }
  .fn-prod:nth-child(3) .fn-prod__img { background: var(--mist-200); }
  .fn-prod__linea { display: block; height: 8px; border-radius: var(--r-pill); background: var(--mist-200); }
  .fn-prod__linea--corta { width: 60%; }

  /* 5 · Monedas del multipaís */
  .fn-mon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); align-content: center; }
  .fn-mon__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 var(--e-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--white);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .fn-mon__simbolo { font-weight: 800; color: var(--ink-900); }
  .fn-mon__codigo { font-weight: 700; color: var(--ink-600); }

  /* 6 · Inventario: «Stock bajo» lleva texto y símbolo además del color */
  .fn-stock { display: grid; align-content: center; gap: var(--e-3); }
  .fn-stock__fila { display: grid; grid-template-columns: 56px minmax(0, 1fr) 84px; align-items: center; gap: var(--e-2); }
  .fn-stock__rotulo { color: var(--ink-700); font-size: 13px; font-weight: 700; line-height: 1.3; }
  .fn-stock__pista { display: block; height: 10px; overflow: hidden; border-radius: var(--r-pill); background: var(--mist-200); }
  .fn-stock__relleno {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--zoe-700);
    transform: scaleX(var(--v));
    transform-origin: left center;
  }
  .fn-stock__relleno--1 { --v: .85; }
  .fn-stock__relleno--2 { --v: .6; }
  .fn-stock__relleno--3 { --v: .18; background: var(--error-700); }
  .fn-stock__aviso { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--error-700); font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
  .fn-stock__aviso .icono { width: 14px; height: 14px; }

  /* 7 · Línea de tendencia */
  .tend__rejilla { fill: none; stroke: var(--line); stroke-width: 1; }
  .tend__area { fill: var(--zoe-100); }
  .tend__linea { fill: none; stroke: var(--zoe-700); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .tend__punto { fill: var(--zoe-700); }

  /* 8 · Oficina en el celular (el marco se recorta abajo, como si subiera) */
  .fn-cel { display: flex; align-items: flex-end; }
  .fn-cel__marco {
    width: 108px;
    height: 100%;
    padding: 6px 6px 0;
    border: 1.5px solid var(--pine-line);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--pine-950);
  }
  .fn-cel__pantalla { display: grid; align-content: start; gap: 6px; height: 100%; padding: 8px; border-radius: 14px 14px 0 0; background: var(--mist-50); }
  .fn-cel__cab { display: flex; align-items: center; gap: 6px; }
  .fn-cel__logo { display: block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--zoe-700); }
  .fn-cel__barra { display: block; height: 6px; flex: 1; border-radius: var(--r-pill); background: var(--mist-200); }
  .fn-cel__caja { display: block; height: 28px; border-radius: 8px; background: var(--pine-900); }
  .fn-cel__fila { display: block; height: 10px; border-radius: 5px; background: var(--mist-200); }
  .fn-cel__fila--corta { width: 70%; }

  /* Nota al pie: «Datos ficticios» + frase */
  .fn-nota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: var(--e-5) 0 0; max-width: none; color: var(--ink-600); font-size: 13px; line-height: 1.45; }

  /* ---------- S08 Diferenciales ---------- */
  .dif { overflow: hidden; }
  .dif > .contenedor { position: relative; z-index: var(--z-contenido); }
  /* Anillo de la marca: decorativo, grande y tenue; solo desde 900 px */
  .dif__anillo { display: none; }
  @media (min-width: 900px) {
    .dif__anillo {
      display: block;
      position: absolute;
      top: -40px;
      right: -120px;
      width: 520px;
      height: 520px;
      max-width: none;
      color: var(--zoe-200);
      opacity: .4;
      pointer-events: none;
    }
  }
  .dif__anillo path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }

  .dif__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 900px) {
    .dif__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
  }
  .dif__tarjeta {
    min-width: 0;
    padding: var(--e-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: var(--sombra-2);
  }
  @media (min-width: 900px) { .dif__tarjeta { padding: 28px; } }
  .dif__numero {
    display: block;
    margin-bottom: var(--e-4);
    color: var(--zoe-700);
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
  }
  .dif__titulo { margin: 0 0 var(--e-3); }
  .dif__texto { margin: 0; max-width: none; color: var(--ink-700); }
  .dif__enlace { margin: var(--e-6) 0 0; max-width: none; }
  .dif__enlace a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; font-weight: 800; }
  .dif__enlace .icono { width: 20px; height: 20px; }

  /* ---------- S09 Multipaís ---------- */
  .mp__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .mp__cabecera { margin-bottom: 0; }
  .mp__demo { min-width: 0; }
  @media (min-width: 900px) {
    .mp__rejilla {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas: "cab demo" "vin demo";
      grid-template-rows: auto 1fr;
      column-gap: var(--e-8);
      align-items: start;
    }
    .mp__cabecera { grid-area: cab; }
    .mp__demo { grid-area: demo; }
    .mp__vinetas { grid-area: vin; }
  }

  .mp__vinetas { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
  .mp__vinetas li { display: flex; align-items: flex-start; gap: var(--e-3); color: var(--on-dark); }
  .mp__vinetas .icono { width: 20px; height: 20px; margin-top: 3px; color: var(--zoe-200); }

  /* Sin JavaScript se ve este rótulo y el ejemplo de Bolivia; con JavaScript se oculta y aparece el selector */
  .mp__sinjs { margin: 0 0 var(--e-4); }

  /* Selector de país: 4 botones en una fila */
  .mp__selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); margin-bottom: var(--e-5); }
  .pais {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: var(--e-2) var(--e-1);
    border: 1.5px solid var(--borde-oscuro);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--white);
    -webkit-tap-highlight-color: transparent;
  }
  .pais__codigo { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.2; }
  .pais__nombre { color: var(--on-dark); font-size: 13px; font-weight: 600; line-height: 1.2; }
  @media (hover: hover) { .pais:hover { border-color: var(--zoe-200); } }
  .pais[aria-pressed="true"] { border-color: var(--zoe-200); background: var(--zoe-200); color: var(--ink-900); }
  .pais[aria-pressed="true"] .pais__nombre { color: var(--ink-900); font-weight: 800; }

  /* Recorrido vertical con línea de tiempo */
  .mp__pasos { margin: 0; padding: 0; list-style: none; }
  .mp__pasos .paso { position: relative; padding: 0 0 var(--e-4) 48px; }
  .mp__pasos .paso:last-child { padding-bottom: 0; }
  .mp__pasos .paso__num {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--zoe-200);
    border-radius: 50%;
    color: var(--zoe-200);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
  }
  .mp__pasos .paso__linea { position: absolute; top: 36px; bottom: 4px; left: 15px; width: 2px; background: var(--pine-line); transform-origin: top center; }
  .mp__pasos .paso__caja { padding: var(--e-4); border-radius: var(--r-md); background: var(--pine-800); }
  .mp__pasos .paso__titulo { margin: 0 0 var(--e-1); max-width: none; color: var(--on-dark); font-size: 15px; font-weight: 700; line-height: 1.35; }
  .mp__pasos .paso__monto {
    margin: 0;
    max-width: none;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(20px, 1.6vw + 14px, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
  }
  .mp__pasos .paso__nota { margin: var(--e-1) 0 0; max-width: none; color: var(--on-dark); font-size: 15px; line-height: 1.4; }
  /* Caja final blanca: la comisión llega a la patrocinadora */
  .mp__pasos .paso--final .paso__caja { background: var(--white); }
  .mp__pasos .paso--final .paso__titulo, .mp__pasos .paso--final .paso__nota { color: var(--ink-700); }
  .mp__pasos .paso--final .paso__monto { color: var(--ink-900); }

  .mp__nota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: var(--e-5) 0 0; max-width: none; color: var(--on-dark); font-size: 13px; line-height: 1.45; }
  .mp__nota-texto { margin: 0; max-width: 34em; }

  /* ---------- S10 Seguridad ---------- */
  .seg-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 480px) { .seg-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .seg-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); } }
  .seg {
    min-width: 0;
    padding: var(--e-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
  }
  .seg__icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--e-4);
    border-radius: var(--r-md);
    background: var(--zoe-100);
    color: var(--zoe-700);
  }
  .seg__titulo { margin: 0 0 var(--e-2); }
  .seg__texto { margin: 0; max-width: none; color: var(--ink-700); font-size: 15px; line-height: 1.5; }
}

@layer animaciones {

  @media (prefers-reduced-motion: no-preference) {

    /* Las ilustraciones se completan cuando su tarjeta se revela: parten del estado «pendiente» y pasan al final.
       Lo que ya está en pantalla al cargar no se marca como pendiente y se ve terminado. */

    /* 1 · Líneas del árbol (600 ms) */
    .arbol__lineas { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--curva-salida) calc(var(--retardo, 0ms) + 150ms); }
    .js .revelar--pendiente .arbol__lineas { stroke-dashoffset: 1; }
    .arbol__nodo, .arbol__raiz { transition: opacity var(--dur-3) var(--curva-salida) calc(var(--retardo, 0ms) + 450ms); }
    .js .revelar--pendiente .arbol__nodo, .js .revelar--pendiente .arbol__raiz { opacity: 0; }

    /* 2 y 6 · Barras que crecen, con 80 ms de separación (700 ms) */
    .fn-comis__relleno, .fn-stock__relleno { transition: transform var(--dur-4) var(--curva-salida) calc(var(--retardo, 0ms) + var(--i, 0) * 80ms + 150ms); }
    .js .revelar--pendiente .fn-comis__relleno, .js .revelar--pendiente .fn-stock__relleno { transform: scaleX(0); }
    .fn-comis__fila:nth-child(2), .fn-stock__fila:nth-child(2) { --i: 1; }
    .fn-comis__fila:nth-child(3), .fn-stock__fila:nth-child(3) { --i: 2; }
    .fn-comis__fila:nth-child(4) { --i: 3; }

    /* 3 · Monedas que aparecen una a una */
    .fn-bill__moneda { transition: opacity var(--dur-2) var(--curva-salida) calc(var(--retardo, 0ms) + var(--i, 0) * 120ms + 300ms), transform var(--dur-2) var(--curva-salida) calc(var(--retardo, 0ms) + var(--i, 0) * 120ms + 300ms); }
    .js .revelar--pendiente .fn-bill__moneda { opacity: 0; transform: scale(.5); }
    .fn-bill__moneda:nth-child(2) { --i: 1; }
    .fn-bill__moneda:nth-child(3) { --i: 2; }

    /* 4 · Productos de la tienda */
    .fn-prod { transition: opacity var(--dur-3) var(--curva-salida) calc(var(--retardo, 0ms) + var(--i, 0) * 100ms + 200ms), transform var(--dur-3) var(--curva-salida) calc(var(--retardo, 0ms) + var(--i, 0) * 100ms + 200ms); }
    .js .revelar--pendiente .fn-prod { opacity: 0; transform: translateY(8px); }
    .fn-prod:nth-child(2) { --i: 1; }
    .fn-prod:nth-child(3) { --i: 2; }

    /* 7 · Línea del reporte (700 ms) */
    .tend__linea { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-4) var(--curva-salida) calc(var(--retardo, 0ms) + 150ms); }
    .js .revelar--pendiente .tend__linea { stroke-dashoffset: 1; }
    .tend__area, .tend__punto { transition: opacity var(--dur-3) var(--curva-salida) calc(var(--retardo, 0ms) + 600ms); }
    .js .revelar--pendiente .tend__area, .js .revelar--pendiente .tend__punto { opacity: 0; }

    /* S08 · Anillo de la marca que se dibuja al entrar (700 ms) */
    .dif__anillo path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-4) var(--curva-salida) var(--retardo, 0ms); }
    .js .dif__anillo.revelar--pendiente path { stroke-dashoffset: 1; }

    /* S09 · Botones de país: el color cambia en 150 ms */
    .pais { transition: background-color var(--dur-1) var(--curva-estandar), border-color var(--dur-1) var(--curva-estandar), color var(--dur-1) var(--curva-estandar); }
  }
}