/*
 * NA Core — tipografia de «Criadores» y «Distribucion».
 * Modulo: na-core/includes/ux/na-paginas-canal.php (ahi esta el porque de todo).
 *
 * RAIZ: `body.na-canal #main-content`. Los dos trozos hacen falta.
 *   - `body.na-canal`  la clase la pone el modulo resolviendo la pagina POR SLUG,
 *                      no por ID (los ID no son estables entre entornos).
 *   - `#main-content`  acota al contenido. Comprobado el 7-sep-2026: contiene los
 *                      cuatro `animated-headline` y NO contiene el header, el
 *                      footer ni la barra superior de «Envios gratis». Sin el, cada
 *                      regla de aqui repintaria tambien la cabecera y el pie, que
 *                      son correctos y compartidos con el resto del sitio.
 * El `id` ademas nos pone por encima de los `.elementor-NNNN .elementor-element...`
 * (0-3-0) que Elementor sirve DESPUES de esta hoja: sin el, a igual especificidad
 * ganaria el y no se aplicaria nada.
 *
 * NO HAY NI UNA DECLARACION DE COLOR en todo el fichero, a proposito: los fondos de
 * estas dos paginas son negro y verde corporativo y los colores estan puestos widget
 * a widget (y a veces en `<span style>` dentro del HTML del editor). Ver la cabecera
 * del modulo.
 */

/* ------------------------------------------------------------------ *
 * CAPA 1 — Las tres familias intrusas vuelven al sistema del sitio.
 *
 * Fredoka va AUTOALOJADA y su nombre de familia real es `Fredoka One` (asi lo
 * declara includes/theme/na-tipografia.php y asi lo devuelve getComputedStyle).
 * No lo cambies por `Fredoka` a secas: no existe esa familia y cae al respaldo.
 * ------------------------------------------------------------------ */

/*
 * Los `animated-headline` venian en Montserrat 43px. Son los cuatro titulares
 * grandes: «Inscribete y recibe Asesoria Profesional», «Impulsa tu Negocio con
 * Nosotros», «Puedes Inscribirte Aqui y Ahora» y «¿Por que elegir a Nutricion
 * Animal?». El widget parte el titular en dos nodos (el texto fijo y la palabra
 * animada), por eso se cubren los tres selectores: el contenedor y las dos piezas.
 *
 * `font-weight: 400` NO es un descuido: Fredoka One se sirve en un unico peso. Al
 * pedirle 600/700 (como venia) el navegador lo FINGE engordando los trazos, y en una
 * tipografia redonda como esta se nota mucho y se cierran los contraformas.
 */
body.na-canal #main-content .elementor-widget-animated-headline .elementor-headline,
body.na-canal #main-content .elementor-widget-animated-headline .elementor-headline-plain-text,
body.na-canal #main-content .elementor-widget-animated-headline .elementor-headline-dynamic-text {
	font-family: "Fredoka One", sans-serif;
	font-weight: 400;
}

body.na-canal #main-content .elementor-widget-animated-headline .elementor-headline {
	/*
	 * 43px fijos se comian el ancho en movil. `clamp` da 28px en telefono y 40 en
	 * escritorio sin necesidad de un ajuste por punto de ruptura en Elementor.
	 */
	font-size: clamp( 28px, 4.2vw, 40px );
	line-height: 1.22;
}

/*
 * La lista de requisitos de Criadores venia en EB Garamond: una serif de libro, a
 * 14px, en medio de una pagina sin ninguna otra serif. Y la de beneficios de
 * Distribucion en Roboto Flex a 22px con 22.4px de linea — interlineado 1.02, las
 * lineas literalmente se tocaban.
 */
body.na-canal #main-content .elementor-widget-icon-list .elementor-icon-list-text {
	font-family: Nunito, sans-serif;
	font-size: 17px;
	line-height: 1.55;
}

/* ------------------------------------------------------------------ *
 * CAPA 2 — Encabezados: quitar el negrita fingido de Fredoka.
 * Ya estaban en Fredoka One, pero pidiendo 600/700 (ver arriba por que importa).
 * ------------------------------------------------------------------ */

body.na-canal #main-content h2,
body.na-canal #main-content h3,
body.na-canal #main-content h4,
body.na-canal #main-content h5,
body.na-canal #main-content .elementor-widget-heading .elementor-heading-title {
	font-family: "Fredoka One", sans-serif;
	font-weight: 400;
}

body.na-canal #main-content h2,
body.na-canal #main-content .elementor-widget-heading .elementor-heading-title {
	line-height: 1.22;
}

body.na-canal #main-content h3 {
	line-height: 1.28;
}

/*
 * Los `h5` de los tres contadores de Distribucion («Productos en», «Clientes que
 * nos eligen cada dia», «Manejamos descuentos hasta») venian a 19px de letra con
 * 47.5px de linea: interlineado 2.5. En un rotulo de dos lineas eso abre un hueco
 * mayor que el propio texto y desconecta el rotulo de su cifra.
 */
body.na-canal #main-content .elementor-widget-counter .elementor-counter-title {
	font-size: 17px;
	line-height: 1.3;
}

/* ------------------------------------------------------------------ *
 * CAPA 3 — Cuerpo de texto.
 * Estaba en Nunito, que es correcto, pero a 14px. Estas dos paginas son de venta
 * (B2B en Distribucion, requisitos de alta en Criadores): son parrafos que hay que
 * LEER, no pies de foto. 16px con 1.65 de linea es la medida del resto del sitio.
 * ------------------------------------------------------------------ */

body.na-canal #main-content .elementor-widget-text-editor,
body.na-canal #main-content .elementor-widget-text-editor p,
body.na-canal #main-content .elementor-widget-text-editor li {
	font-family: Nunito, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

/*
 * `p.lead` viene del HTML del editor (Criadores lo usa en los dos parrafos de
 * presentacion). Es el parrafo de entrada: se le da un punto mas, sin tocar color.
 */
body.na-canal #main-content .elementor-widget-text-editor p.lead {
	font-size: 17px;
	line-height: 1.6;
}

/*
 * Textos del acordeon y del formulario. Los `nested-accordion` de las dos paginas
 * heredaban el tamano del tema; las etiquetas del formulario se quedaban en 12-13px,
 * que en un formulario de alta con campos obligatorios es demasiado pequeno.
 */
body.na-canal #main-content .e-n-accordion-item-title,
body.na-canal #main-content .elementor-field-group > label {
	font-family: Nunito, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

body.na-canal #main-content .e-n-accordion-item-title {
	font-family: "Fredoka One", sans-serif;
	font-weight: 400;
	font-size: 17px;
}

/* ------------------------------------------------------------------ *
 * CAPA 4 — Rejilla de marcas de Distribucion.
 *
 * El bloque es el compartido `[na_marcas_home]`, que ya normaliza cada logo a una
 * caja identica con `object-fit: contain`. Lo que NO puede normalizar es cuanto
 * margen transparente trae cada PNG: el de Emeraid no tiene ninguno y llega al borde
 * de la caja, mientras el de Lafeber trae tanto que se queda diminuto en el centro.
 * Un acolchado interior comun le da a todos el mismo aire y empareja el peso optico.
 *
 * Va acotado a `body.na-canal` A PROPOSITO: el mismo componente pinta las marcas de
 * la portada, con otros siete logotipos y otras proporciones. Si esto se sube al CSS
 * del componente, se cambia tambien la portada sin querer.
 * ------------------------------------------------------------------ */

body.na-canal #main-content .na-marcas-home__caja {
	padding: 20px 24px;
	box-sizing: border-box;
}