/**
 * NA Core — rediseño de la página «Distribución» (T-635). Lo encola
 * includes/ux/na-distribuidora.php solo cuando el rediseño está activo.
 *
 * Sistema de forma: bloques 20px, campos 12px, botones y opciones en píldora.
 * Un acento (verde de botón #28600A); el amarillo solo en la filigrana y en las cifras.
 * Las reglas que pelean con el kit de Elementor (`.elementor-kit-369 button|input…`,
 * 0-1-1) suben a `body .na-dist …`.
 */

.na-dist {
	--nd-verde: var( --e-global-color-na28600a, #28600A );
	--nd-verde-osc: #1f4c08;
	--nd-acento: var( --e-global-color-vamtam_accent_1, #8dbd2f );
	--nd-tinta: var( --e-global-color-vamtam_accent_2, #002842 );
	--nd-texto: var( --e-global-color-vamtam_accent_3, #59606D );
	--nd-borde: var( --e-global-color-vamtam_accent_7, #E6E6E6 );
	--nd-superficie: var( --e-global-color-vamtam_accent_8, #F5F5F5 );
	--nd-amarillo: #ffd100;
	--nd-menta: #f2f7ea;
	--nd-radio: 20px;
	--nd-radio-campo: 12px;
	--nd-titulo: 'Fredoka', 'Nunito', sans-serif;

	color: var( --nd-texto );
	font-family: 'Nunito', sans-serif;
	font-size: 17px;
	line-height: 1.65;
	overflow-x: clip;
}
.na-dist *, .na-dist *::before, .na-dist *::after { box-sizing: border-box; }

.na-dist-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.na-dist-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Tipografía ---------- */
.na-dist h1, .na-dist h2, .na-dist h3 { font-family: var( --nd-titulo ); color: var( --nd-tinta ); margin: 0; letter-spacing: -.01em; }
.na-dist-eyebrow { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var( --nd-verde ); }
.na-dist .na-dist-h2 { font-size: clamp( 28px, 3.2vw, 40px ); line-height: 1.15; font-weight: 600; margin-bottom: 24px; max-width: 22ch; }
.na-dist .na-dist-h2--centro { text-align: center; margin-left: auto; margin-right: auto; max-width: 24ch; margin-bottom: 56px; }
.na-dist-p { margin: 0 0 18px; max-width: 60ch; }
.na-dist-p strong { color: var( --nd-tinta ); font-weight: 800; }
.na-dist-p--fuerte { color: var( --nd-tinta ); font-weight: 700; font-size: 19px; margin-bottom: 0; }

.na-dist-sec { padding: 96px 0; }
.na-dist-sec--suave { background: var( --nd-superficie ); }

/* ---------- Botones ---------- */
body .na-dist a.na-dist-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 14px 30px; border-radius: 999px; white-space: nowrap;
	font-family: var( --nd-titulo ); font-size: 17px; font-weight: 600; text-decoration: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
body .na-dist a.na-dist-btn:active { transform: scale( .98 ); }
body .na-dist a.na-dist-btn--primario { background: var( --nd-verde ); color: #fff; }
body .na-dist a.na-dist-btn--primario:hover { background: var( --nd-verde-osc ); }
body .na-dist a.na-dist-btn--secundario { background: transparent; color: var( --nd-tinta ); box-shadow: inset 0 0 0 1.5px #c9cfd6; }
body .na-dist a.na-dist-btn--secundario:hover { box-shadow: inset 0 0 0 1.5px var( --nd-tinta ); }
body .na-dist a.na-dist-btn:focus-visible { outline: 3px solid var( --nd-acento ); outline-offset: 3px; }

/* ---------- Portada ---------- */
.na-dist-hero { padding: 64px 0 80px; background: var( --nd-menta ); }
.na-dist-hero__grid { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); gap: 56px; align-items: center; }
.na-dist .na-dist-hero__titulo { font-size: clamp( 36px, 4vw, 54px ); line-height: 1.05; font-weight: 600; margin-bottom: 20px; }
.na-dist-hero__titulo span { color: var( --nd-verde ); }
.na-dist-hero__lead { font-size: 19px; max-width: 30em; margin: 0 0 32px; }
.na-dist-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.na-dist-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var( --nd-radio ); box-shadow: 0 24px 48px -28px rgba(31, 76, 8, .55); }

/* ---------- Cifras ---------- */
.na-dist-cifras { background: var( --nd-verde ); color: #fff; padding: 56px 0; }
.na-dist-cifras__grid { display: grid; grid-template-columns: minmax( 0, .8fr ) minmax( 0, 2fr ); gap: 48px; align-items: center; }
.na-dist .na-dist-cifras__titulo { color: #fff; font-size: clamp( 24px, 2.4vw, 30px ); line-height: 1.2; font-weight: 500; }
.na-dist-cifras__lista { display: grid; grid-template-columns: repeat( 3, 1fr ); margin: 0; }
.na-dist-cifra { display: flex; flex-direction: column-reverse; padding: 4px 0 4px 28px; border-left: 1px solid rgba(255, 255, 255, .25); }
.na-dist-cifra dd { margin: 0; font-family: var( --nd-titulo ); font-weight: 600; font-size: clamp( 44px, 5vw, 64px ); line-height: 1; color: var( --nd-amarillo ); font-variant-numeric: tabular-nums; }
.na-dist-cifra dt { margin-top: 8px; font-weight: 700; font-size: 15px; line-height: 1.35; color: #fff; max-width: 16ch; }

/* ---------- Para quién ---------- */
.na-dist-publico__grid { display: grid; grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr ); gap: 80px; align-items: end; }
.na-dist-publico__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var( --nd-borde ); }
.na-dist-publico__lista li {
	display: flex; align-items: center; gap: 16px; margin: 0; padding: 20px 4px;
	border-bottom: 1px solid var( --nd-borde );
	font-family: var( --nd-titulo ); font-size: 21px; font-weight: 500; color: var( --nd-tinta );
}
.na-dist-publico__lista .na-dist-ico { width: 28px; height: 28px; color: var( --nd-verde ); }

/* ---------- Beneficios (bento 2 + 3) ---------- */
.na-dist-benef { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat( 6, 1fr ); gap: 16px; }
.na-dist-benef__item {
	grid-column: span 2; margin: 0; padding: 32px; border-radius: var( --nd-radio );
	background: #fff; border: 1px solid var( --nd-borde );
	display: flex; flex-direction: column;
}
.na-dist-benef__item:nth-child( 1 ), .na-dist-benef__item:nth-child( 2 ) { grid-column: span 3; min-height: 240px; }
.na-dist-benef__item:nth-child( 1 ) { background: var( --nd-tinta ); border-color: var( --nd-tinta ); }
.na-dist-benef__item:nth-child( 1 ) .na-dist-benef__t { color: #fff; }
.na-dist-benef__item:nth-child( 1 ) .na-dist-benef__d { color: #c6d3de; }
.na-dist-benef__item:nth-child( 1 ) .na-dist-ico { color: var( --nd-amarillo ); }
.na-dist-benef__item:nth-child( 2 ) { background: var( --nd-menta ); border-color: #dfeccd; }
.na-dist-benef__item .na-dist-ico { width: 32px; height: 32px; color: var( --nd-verde ); margin-bottom: auto; }
.na-dist .na-dist-benef__t { font-size: 21px; font-weight: 600; line-height: 1.2; margin: 28px 0 8px; }
.na-dist-benef__item:nth-child( -n+2 ) .na-dist-benef__t { font-size: 26px; }
.na-dist-benef__d { margin: 0; font-size: 16px; max-width: 42ch; }

/* ---------- Registro ---------- */
.na-dist-registro { padding: 96px 0; background: var( --nd-verde ); color: #e6f1d8; scroll-margin-top: 90px; }
.na-dist-registro__grid { display: grid; grid-template-columns: minmax( 0, .8fr ) minmax( 0, 1.2fr ); gap: 64px; align-items: start; }
.na-dist-registro__info { position: sticky; top: 140px; }
.na-dist .na-dist-registro__t { color: #fff; font-size: clamp( 30px, 3.4vw, 44px ); line-height: 1.1; font-weight: 600; margin-bottom: 16px; }
.na-dist-registro__info > p { font-size: 18px; margin: 0 0 36px; max-width: 34ch; }
.na-dist-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 20px; }
.na-dist-pasos li { counter-increment: paso; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; margin: 0; font-size: 16px; line-height: 1.5; }
.na-dist-pasos li::before { content: counter( paso ); grid-row: span 2; font-family: var( --nd-titulo ); font-weight: 600; font-size: 28px; line-height: 1; color: var( --nd-amarillo ); }
.na-dist-pasos strong { display: block; color: #fff; font-weight: 800; }

.na-dist-registro__form { background: #fff; border-radius: var( --nd-radio ); padding: 40px; }

/* Formulario de Elementor Pro, sin los estilos de widget de la página. */
body .na-dist .na-dist-form .elementor-widget-form { width: 100%; max-width: none; }
body .na-dist .na-dist-form .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; margin: 0 -9px; }
body .na-dist .na-dist-form .elementor-field-group { padding: 0 9px; margin: 0 0 20px; }
body .na-dist .na-dist-form .elementor-field-label {
	display: block; margin-bottom: 7px; font-size: 14px; font-weight: 800; color: var( --nd-tinta ); font-family: 'Nunito', sans-serif;
}
body .na-dist .na-dist-form .elementor-mark-required .elementor-field-label::after { color: #b3261e; }
body .na-dist .na-dist-form input.elementor-field,
body .na-dist .na-dist-form textarea.elementor-field,
body .na-dist .na-dist-form .elementor-select-wrapper select {
	width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var( --nd-radio-campo );
	border: 1.5px solid #d5dad0 !important; background: #fff !important; color: var( --nd-tinta ) !important;
	font-family: 'Nunito', sans-serif; font-size: 16px; box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
body .na-dist .na-dist-form .elementor-field::placeholder { color: #7b8189; }
body .na-dist .na-dist-form .elementor-select-wrapper select { padding-right: 40px; appearance: none; -webkit-appearance: none; }
body .na-dist .na-dist-form .elementor-select-wrapper::before { color: var( --nd-tinta ); right: 14px; }
body .na-dist .na-dist-form textarea.elementor-field { min-height: 96px; resize: vertical; }
body .na-dist .na-dist-form input.elementor-field:focus,
body .na-dist .na-dist-form textarea.elementor-field:focus,
body .na-dist .na-dist-form .elementor-select-wrapper select:focus {
	outline: none; border-color: var( --nd-verde ) !important; box-shadow: 0 0 0 3px rgba(40, 96, 10, .18);
}
body .na-dist .na-dist-form input[type="file"].elementor-field { padding: 9px; min-height: 0; cursor: pointer; border-style: dashed !important; }
body .na-dist .na-dist-form input[type="file"]::file-selector-button {
	margin-right: 12px; padding: 8px 16px; border: 0; border-radius: 999px;
	background: var( --nd-menta ); color: var( --nd-verde ); font-family: 'Nunito', sans-serif; font-weight: 800; cursor: pointer;
}
body .na-dist .na-dist-form .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 8px; }
body .na-dist .na-dist-form .elementor-field-subgroup .elementor-field-option { margin: 0; position: relative; }
body .na-dist .na-dist-form .elementor-field-option label {
	display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
	border: 1.5px solid #d5dad0; font-weight: 700; font-size: 15px; color: var( --nd-tinta ); cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}
body .na-dist .na-dist-form .elementor-field-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body .na-dist .na-dist-form .elementor-field-option input:checked + label { border-color: var( --nd-verde ); background: var( --nd-verde ); color: #fff; }
body .na-dist .na-dist-form .elementor-field-option input:focus-visible + label { outline: 3px solid var( --nd-acento ); outline-offset: 2px; }
body .na-dist .na-dist-form .elementor-field-option label:hover { border-color: var( --nd-verde ); }
body .na-dist .na-dist-form .elementor-field-type-submit { margin-top: 8px; margin-bottom: 0; }
body .na-dist .na-dist-form button.elementor-button {
	width: 100%; min-height: 56px; border: 0; border-radius: 999px; cursor: pointer;
	background: var( --nd-verde ); color: #fff; font-family: var( --nd-titulo ); font-size: 18px; font-weight: 600;
	transition: background-color .2s ease, transform .15s ease;
}
body .na-dist .na-dist-form button.elementor-button:hover { background: var( --nd-verde-osc ); }
body .na-dist .na-dist-form button.elementor-button:active { transform: scale( .98 ); }
body .na-dist .na-dist-form button.elementor-button:focus-visible { outline: 3px solid var( --nd-acento ); outline-offset: 3px; }
body .na-dist .na-dist-form .elementor-message { margin-top: 14px; font-weight: 700; }

/* ---------- Marcas ---------- */
.na-dist-marcas .na-dist-h2 { max-width: none; margin-bottom: 36px; }

/* ---------- Entrada al hacer scroll (mejora progresiva: sin JS todo está visible) ---------- */
.na-dist-js .na-dist-rev { opacity: 0; translate: 0 16px; transition: opacity .7s cubic-bezier(.16, 1, .3, 1), translate .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc( var( --d, 0 ) * 70ms ); }
.na-dist-js .na-dist-rev.is-visible { opacity: 1; translate: 0 0; }
@media ( prefers-reduced-motion: reduce ) {
	.na-dist-js .na-dist-rev { opacity: 1; translate: none; transition: none; }
	.na-dist *, .na-dist a { transition: none !important; }
}

/* ---------- Tablet ---------- */
@media ( max-width: 1024px ) {
	.na-dist-sec, .na-dist-registro { padding: 72px 0; }
	.na-dist-hero { padding: 48px 0 64px; }
	.na-dist-hero__grid, .na-dist-publico__grid, .na-dist-registro__grid, .na-dist-cifras__grid { grid-template-columns: minmax( 0, 1fr ); gap: 40px; }
	.na-dist-hero__visual { max-width: 680px; }
	.na-dist-registro__info { position: static; }
	.na-dist-benef__item, .na-dist-benef__item:nth-child( 1 ), .na-dist-benef__item:nth-child( 2 ) { grid-column: span 3; min-height: 0; }
	.na-dist-benef__item:nth-child( 5 ) { grid-column: span 6; }
}

/* ---------- Móvil ---------- */
@media ( max-width: 640px ) {
	.na-dist { font-size: 16px; }
	.na-dist-wrap { padding: 0 16px; }
	.na-dist-sec, .na-dist-registro { padding: 56px 0; }
	.na-dist-hero { padding: 32px 0 48px; }
	.na-dist-hero__lead { font-size: 17px; margin-bottom: 24px; }
	.na-dist-ctas { flex-direction: column; }
	body .na-dist a.na-dist-btn { width: 100%; }
	.na-dist-cifras { padding: 44px 0; }
	.na-dist-cifras__grid { gap: 24px; }
	.na-dist-cifras__lista { grid-template-columns: 1fr; gap: 20px; }
	.na-dist-cifra { padding-left: 18px; }
	.na-dist-publico__lista li { font-size: 18px; padding: 16px 2px; }
	.na-dist .na-dist-h2--centro { margin-bottom: 32px; }
	.na-dist-benef { grid-template-columns: 1fr; gap: 12px; }
	.na-dist-benef__item, .na-dist-benef__item:nth-child( n ) { grid-column: auto; padding: 24px; }
	.na-dist-benef__item:nth-child( -n+2 ) .na-dist-benef__t { font-size: 22px; }
	.na-dist .na-dist-benef__t { margin-top: 20px; }
	.na-dist-registro__form { padding: 24px 18px; }
	body .na-dist .na-dist-form .elementor-field-group.elementor-col-50 { width: 100%; }
}