/*
 * Afiliados (afiliados.php): las cifras de la cabecera, para quién (las pegatinas de css/paginas.css, .vb-stk), por qué,
 * las comisiones por plan con su color, la calculadora y los pasos. Pedido de Adiel, 2026-10-11.
 */
.af-cta { justify-content: center; margin-top: var(--s-5); }
/* La franja de cifras de la cabecera, como pegatinas: blancas, contorno de tinta y sombra de color (estilo 2 de diez,
   elegido por Adiel el 2026-10-11). */
.af-stats { list-style: none; display: grid; gap: 22px; max-width: 880px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 0; }
@media (min-width: 700px) { .af-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.af-stats li { display: grid; gap: 2px; padding: 18px 20px; text-align: center; background: #fff; border: 2.5px solid #081B21; border-radius: 16px; box-shadow: 6px 6px 0 #56CCE6; }
.af-stats li:nth-child(2) { box-shadow: 6px 6px 0 #8B6BFF; transform: rotate(-1deg); }
.af-stats li:nth-child(3) { box-shadow: 6px 6px 0 #46C98C; transform: rotate(.8deg); }
.af-stats b { font: 600 clamp(26px, 2.6vw, 34px)/1.1 var(--f-head); color: #081B21; }
.af-stats span { color: rgba(8, 27, 33, 0.7); font-size: var(--t-sm); text-wrap: balance; }

/* Para quién: seis pegatinas, de tres en tres */
@media (min-width: 1100px) { .af-who.vb-stk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.af-who.vb-stk { max-width: 1120px; margin-inline: auto; }
.af-who li:nth-child(5) { box-shadow: 6px 6px 0 var(--tone-a); transform: rotate(.6deg); }
.af-who li:nth-child(6) { box-shadow: 6px 6px 0 var(--tone-b); transform: rotate(-.6deg); }

/* Por qué merece la pena: las cinco razones en una franja, con una barra de color arriba de cada una (versión 6 de diez,
   elegida por Adiel el 2026-10-11). En pantallas más estrechas, en rejilla. */
.af-why { list-style: none; display: grid; gap: 22px clamp(24px, 4vw, 56px); max-width: 1200px; margin: 0 auto; padding: 0; }
@media (min-width: 760px) { .af-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .af-why { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } .af-why li + li { border-left: 1px solid rgba(255, 255, 255, 0.08); } }
.af-why li { display: grid; align-content: start; gap: 6px; padding: 22px clamp(14px, 1.6vw, 22px) 0; border-top: 3px solid var(--tone-a); }
.af-why li:nth-child(2) { border-top-color: var(--tone-b); }
.af-why li:nth-child(3) { border-top-color: #3D7BFF; }
.af-why li:nth-child(4) { border-top-color: #46C98C; }
.af-why li:nth-child(5) { border-top-color: #FFBF00; }
.af-why b { font: 600 var(--t-lg) var(--f-head); color: #fff; }
.af-why span { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.55; }


/* Las comisiones, con el color de cada plan (los de css/planes.css) */
.af-plans { list-style: none; display: grid; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 0; }
@media (min-width: 700px) { .af-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .af-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
[data-plan="essential"] { --a1: #eef1f5; --a2: #a0b4ff; }
[data-plan="pro"] { --a1: #56cce6; --a2: #a8f06b; }
[data-plan="studio"] { --a1: #a35cff; --a2: #ff4fae; }
[data-plan="agency"] { --a1: #ffb347; --a2: #ff6f91; }
.af-plans li { display: grid; gap: 6px; padding: 22px 20px; border-radius: 22px; color: #081B21; background: linear-gradient(120deg, var(--a1), var(--a2)); }
.af-plan-name { font: 600 var(--t-lg) var(--f-head); }
.af-plan-amount { display: flex; align-items: baseline; gap: 6px; font: 600 clamp(36px, 3.4vw, 46px)/1 var(--f-head); }
.af-plan-amount small { font: 500 var(--t-sm) var(--f-body); color: rgba(8, 27, 33, 0.7); }
.af-plan-total { font-size: var(--t-sm); color: rgba(8, 27, 33, 0.75); }
.af-note { text-align: center; margin-top: var(--s-5); }

/* La calculadora */
.af-calc { display: grid; gap: clamp(24px, 3vw, 40px); max-width: 1120px; margin: 0 auto; padding: clamp(20px, 3vw, 36px); border-radius: 28px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
@media (min-width: 960px) { .af-calc { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; } }
.af-inputs { display: grid; gap: 22px; }
.af-range { display: grid; gap: 8px; }
.af-range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: #D5DEE2; font-size: var(--t-sm); font-weight: 600; }
.af-range-head output { font: 600 var(--t-lg) var(--f-head); color: #fff; font-variant-numeric: tabular-nums; }
.af-range input[type="range"] { width: 100%; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); accent-color: var(--c-celeste); cursor: pointer; }
.af-hint { color: var(--c-muted); font-size: var(--t-xs); line-height: 1.5; }
.af-mix { display: grid; gap: 12px; margin: 0; padding: 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); }
.af-mix legend { padding: 0 6px; color: #D5DEE2; font-size: var(--t-sm); font-weight: 600; }
.af-mix legend small { color: var(--c-muted); font-weight: 500; }
.af-mix-row input[type="range"] { accent-color: var(--a2); }
.af-mix-row .af-range-head span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: linear-gradient(120deg, var(--a1), var(--a2)); }
.af-mixbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.af-mixbar i { flex: 0 1 0; min-width: 0; background: linear-gradient(120deg, var(--a1), var(--a2)); transition: flex-grow .2s ease; }

.af-result { display: grid; gap: 20px; }
.af-avg { margin: 0; color: var(--c-muted); font-size: var(--t-md); }
.af-avg b { color: #fff; }
.af-years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); align-items: end; height: 300px; }
.af-year { display: grid; grid-template-rows: 1fr auto auto; gap: 6px; height: 100%; text-align: center; }
.af-bar { display: flex; align-items: flex-end; height: 100%; }
.af-bar i { display: block; width: 100%; height: calc(var(--p, 0) * 100%); min-height: 6px; border-radius: 14px 14px 6px 6px; transition: height .35s cubic-bezier(.2, .7, .2, 1);
	background: linear-gradient(180deg, #a8f06b, #56cce6); box-shadow: 0 10px 30px rgba(86, 204, 230, 0.25); }
.af-year[data-year="2"] .af-bar i { background: linear-gradient(180deg, #ff4fae, #a35cff); box-shadow: 0 10px 30px rgba(163, 92, 255, 0.25); }
.af-year[data-year="3"] .af-bar i { background: linear-gradient(180deg, #ff6f91, #ffb347); box-shadow: 0 10px 30px rgba(255, 179, 71, 0.22); }
.af-year b { font: 600 clamp(20px, 2.2vw, 28px)/1.1 var(--f-head); color: #fff; font-variant-numeric: tabular-nums; }
.af-year span { color: var(--c-muted); font-size: var(--t-sm); }
.af-sum { display: grid; gap: 10px; margin: 0; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); }
@media (min-width: 640px) { .af-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.af-sum div { display: grid; gap: 2px; }
.af-sum dt { color: var(--c-muted); font-size: var(--t-xs); }
.af-sum dd { margin: 0; font: 600 var(--t-lg) var(--f-head); color: #fff; font-variant-numeric: tabular-nums; }
.af-sum div:first-child dd { color: var(--c-celeste); }
.af-explain { margin: 0; color: var(--c-muted); font-size: var(--t-xs); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .af-bar i, .af-mixbar i { transition: none; } }

/* ---------- La calculadora, como pegatina: blanca, contorno de tinta y sombra celeste, todo en tinta (versión 2 de
   diez, elegida por Adiel el 2026-10-11; data-variant="2" en afiliados.php). Las barras de cada año toman su
   proporción de --p (js/afiliados.js). ---------- */
.af-calc[data-variant="2"] { background: #fff; border: 2.5px solid #081B21; border-radius: 22px; box-shadow: 8px 8px 0 #56CCE6; }
.af-calc[data-variant="2"] .af-range-head, .af-calc[data-variant="2"] .af-mix legend { color: rgba(8, 27, 33, 0.8); }
.af-calc[data-variant="2"] .af-range-head output, .af-calc[data-variant="2"] .af-avg b, .af-calc[data-variant="2"] .af-year b, .af-calc[data-variant="2"] .af-sum dd { color: #081B21; }
.af-calc[data-variant="2"] .af-hint, .af-calc[data-variant="2"] .af-avg, .af-calc[data-variant="2"] .af-year span, .af-calc[data-variant="2"] .af-sum dt,
.af-calc[data-variant="2"] .af-explain, .af-calc[data-variant="2"] .af-mix legend small { color: rgba(8, 27, 33, 0.62); }
.af-calc[data-variant="2"] .af-mix { border: 2px solid rgba(8, 27, 33, 0.12); }
.af-calc[data-variant="2"] .af-range input[type="range"] { background: rgba(8, 27, 33, 0.12); accent-color: #08718B; }
.af-calc[data-variant="2"] .af-sum { background: #EEF7FA; }
.af-calc[data-variant="2"] .af-sum div:first-child dd { color: #08718B; }
.af-calc[data-variant="2"] .af-bar i { border: 2px solid #081B21; box-shadow: 4px 4px 0 #081B21; }


/* Cómo funciona: cuatro tarjetas con un dibujo arriba («el recorrido del dinero», estilo 10 de diez, elegido por Adiel el
   2026-10-11). El dibujo quieto (.af-art) se cambia por la animación de cada paso cuando existe (js/afiliados-pasos.js). */
.af-steps { list-style: none; display: grid; gap: 18px; max-width: 1120px; margin: 0 auto; padding: 0; }
@media (min-width: 700px) { .af-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .af-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.af-steps > li { position: relative; display: grid; align-content: start; gap: 8px; padding: 0 0 20px; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.af-steps > li > b { padding: 0 18px; font: 600 var(--t-lg) var(--f-head); color: #fff; }
.af-steps > li > span:not(.af-art) { padding: 0 18px; color: var(--c-muted); font-size: var(--t-sm); line-height: 1.55; }
.af-art { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 110px; margin-bottom: 8px; overflow: hidden; background: linear-gradient(135deg, rgba(86, 204, 230, 0.22), rgba(139, 107, 255, 0.2)); }
.af-art.is-anim { display: block; }
.af-art-link { font: 600 12px var(--f-body); }
.af-art-link i { font-style: normal; color: rgba(255, 255, 255, 0.6); }
.af-art-link b { padding: 4px 8px; border-radius: 8px; background: #fff; color: #081B21; }
.af-art-share i { width: 26px; height: 26px; border-radius: 50%; background: #F1A7C7; border: 2px solid #081B21; }
.af-art-share i:nth-child(2) { background: #BFE492; }
.af-art-share i:nth-child(3) { background: #56CCE6; }
.af-art-share i:nth-child(4) { background: #FFBF00; }
.af-art-share i:nth-child(5) { background: #8B6BFF; }
.af-art-pay b { padding: 6px 10px; border-radius: 10px; background: #fff; color: #081B21; font: 700 13px var(--f-head); box-shadow: 3px 3px 0 #46C98C; }
.af-art-pay b:nth-child(2) { transform: translateY(-10px); }
.af-art-pay b:nth-child(3) { transform: translateY(-20px); }
.af-art-bar { flex-direction: column; gap: 8px; }
.af-art-bar i { position: relative; width: 70%; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.af-art-bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #56CCE6, #a8f06b); }
.af-art-bar b { color: #fff; font: 700 var(--t-md) var(--f-head); }

/* La calculadora, dentro de «Lo que cobras por cada persona» (Adiel, 2026-10-11) */
.af-calc-intro { margin: clamp(40px, 5vw, 64px) auto 18px; text-align: center; color: var(--c-ink); font: 600 var(--t-lg) var(--f-head); }
.af-calc { scroll-margin-top: 90px; }
.af-who strong { color: #081B21; font-weight: 700; }

/* Cabecera (pedido de Adiel, 2026-10-11): la etiqueta sin fondo, con su degradado en el texto; y «Quiero ser afiliado»
   con sombra celeste y un brillo que se desliza de izquierda a derecha (el mismo destello del botón de la portada). */
.af-head .chapter-kicker { padding: 0; border-radius: 0; background: linear-gradient(90deg, var(--tone-a), var(--tone-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: var(--t-sm); }
.af-cta .btn.primary { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 14px 34px -8px rgba(86, 204, 230, 0.7), 0 0 0 1px rgba(86, 204, 230, 0.35); }
.af-cta .btn.primary::after {
	content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: -1; pointer-events: none;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
	transform: translateX(-130%) skewX(-18deg);
	animation: btn-shine 3.2s cubic-bezier(0.45, 0, 0.25, 1) 1s infinite;
}
@media (prefers-reduced-motion: reduce) { .af-cta .btn.primary::after { animation: none; opacity: 0; } }

/* «Quiero ser afiliado»: un enlace con sesión y otro sin ella (afiliados.php); se ve el que toca. */
.con-sesion-btn { display: none !important; }
.con-sesion .sin-sesion { display: none !important; }
.con-sesion .con-sesion-btn { display: inline-flex !important; }