.elementor-kit-7{--e-global-color-primary:#363A36;--e-global-color-secondary:#ECEBE9;--e-global-color-text:#363A36;--e-global-color-accent:#F87C56;--e-global-color-nilo_amarillo:#DBE442;--e-global-color-nilo_rosa:#F4A6D7;--e-global-color-nilo_violeta:#8094DD;--e-global-color-nilo_cafe:#AD7C59;--e-global-color-nilo_grisfrio:#D9D9D6;--e-global-color-nilo_blanco:#FFFFFF;--e-global-typography-primary-font-family:"Google Sans Flex";--e-global-typography-primary-font-size:72px;font-weight:400;font-stretch:100%;--e-global-typography-primary-line-height:1.125em;--e-global-typography-secondary-font-family:"Google Sans Flex";--e-global-typography-secondary-font-size:30px;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.235em;--e-global-typography-secondary-letter-spacing:1.8px;--e-global-typography-text-font-family:"Google Sans Flex";--e-global-typography-text-font-size:27px;--e-global-typography-text-line-height:1.4em;--e-global-typography-accent-font-family:"Google Sans Flex";--e-global-typography-accent-font-size:33px;--e-global-typography-accent-line-height:1.4em;--e-global-typography-nilo_banda-font-family:"Google Sans Flex";--e-global-typography-nilo_banda-font-size:25px;--e-global-typography-nilo_banda-text-transform:uppercase;--e-global-typography-nilo_banda-line-height:1.235em;--e-global-typography-nilo_banda-letter-spacing:2px;--e-global-typography-nilo_nav-font-family:"Google Sans Flex";--e-global-typography-nilo_nav-font-size:26px;--e-global-typography-nilo_nav-line-height:1.1em;--e-global-typography-nilo_footer-font-family:"Google Sans Flex";--e-global-typography-nilo_footer-font-size:20px;--e-global-typography-nilo_footer-text-transform:uppercase;--e-global-typography-nilo_footer-line-height:1.235em;--e-global-typography-nilo_footer-letter-spacing:1.5px;--e-global-typography-nilo_mini-font-family:"Google Sans Flex";--e-global-typography-nilo_mini-font-size:15px;--e-global-typography-nilo_mini-text-transform:uppercase;--e-global-typography-nilo_mini-line-height:1.5em;--e-global-typography-nilo_mini-letter-spacing:1.5px;color:#363A36;font-family:"Google Sans Flex", Sans-serif;font-size:27px;line-height:1.4em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#363A36;font-family:"Google Sans Flex", Sans-serif;font-weight:400;font-stretch:100%;line-height:1.4em;}.elementor-kit-7 a:hover{color:#AD7C59;font-family:"Google Sans Flex", Sans-serif;font-weight:400;font-stretch:100%;line-height:1.4em;}.elementor-kit-7 h1{font-family:"Google Sans Flex", Sans-serif;font-size:72px;font-weight:400;font-stretch:120%;line-height:1.125em;}.elementor-kit-7 h2{font-family:"Google Sans Flex", Sans-serif;font-size:48px;font-weight:400;font-stretch:120%;line-height:1.125em;}.elementor-kit-7 h3{font-family:"Google Sans Flex", Sans-serif;font-size:33px;font-weight:400;font-stretch:100%;line-height:1.4em;}.elementor-kit-7 h4{font-family:"Google Sans Flex", Sans-serif;font-size:30px;font-weight:400;font-stretch:151%;text-transform:uppercase;line-height:1.235em;letter-spacing:1.8px;}.elementor-kit-7 h5{font-family:"Google Sans Flex", Sans-serif;font-size:25px;font-weight:400;font-stretch:151%;text-transform:uppercase;line-height:1.235em;letter-spacing:2px;}.elementor-kit-7 h6{font-family:"Google Sans Flex", Sans-serif;font-size:20px;font-weight:400;font-stretch:151%;text-transform:uppercase;line-height:1.235em;letter-spacing:1.5px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-primary-font-size:54px;--e-global-typography-secondary-font-size:26px;--e-global-typography-text-font-size:22px;--e-global-typography-accent-font-size:28px;--e-global-typography-nilo_banda-font-size:20px;--e-global-typography-nilo_nav-font-size:20px;--e-global-typography-nilo_footer-font-size:18px;--e-global-typography-nilo_mini-font-size:14px;font-size:22px;}.elementor-kit-7 h1{font-size:54px;}.elementor-kit-7 h2{font-size:38px;}.elementor-kit-7 h3{font-size:26px;}.elementor-kit-7 h4{font-size:24px;}.elementor-kit-7 h5{font-size:20px;}.elementor-kit-7 h6{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:38px;--e-global-typography-secondary-font-size:21px;--e-global-typography-text-font-size:18px;--e-global-typography-accent-font-size:22px;--e-global-typography-nilo_banda-font-size:16px;--e-global-typography-nilo_nav-font-size:18px;--e-global-typography-nilo_footer-font-size:16px;--e-global-typography-nilo_mini-font-size:13px;font-size:18px;}.elementor-kit-7 h1{font-size:38px;}.elementor-kit-7 h2{font-size:30px;}.elementor-kit-7 h3{font-size:21px;}.elementor-kit-7 h4{font-size:20px;}.elementor-kit-7 h5{font-size:16px;}.elementor-kit-7 h6{font-size:13px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============ Seteos Google Sans Flex (manual de marca) ============
   Titulares  : anchura 120, grosor 400
   Cuerpo     : anchura 100, grosor 400
   Mayúsculas : anchura 151, grosor 400, GRADE 100
   Elementor no expone el eje GRAD, por eso va en font-variation-settings.
   Ojo: font-variation-settings anula font-weight y font-stretch; hay que repetir wght y wdth. */
body, p, h3, .elementor-nav-menu .elementor-item{ font-variation-settings:'wght' 400,'wdth' 100,'GRAD' 0; }
h1, h2{ font-variation-settings:'wght' 400,'wdth' 120,'GRAD' 0; }
h4, h5, h6, .nilo-mayus, .nilo-mayus *{ font-variation-settings:'wght' 400,'wdth' 151,'GRAD' 100; }

/* ============ Carruseles de Historias y Voces ============
   El control de ancho de Elementor no se aplica a estos contenedores, así que la columna
   del título se fija aquí. El riel ocupa el resto. */
.e-con:has(> div > .elementor-widget-loop-carousel){ flex-wrap:nowrap !important; }
.e-con:has(> div > .elementor-widget-loop-carousel) > div:first-child{
  flex:0 0 317px !important; width:317px !important; max-width:317px !important;
}
.e-con:has(> div > .elementor-widget-loop-carousel) > div:nth-child(2){ flex:1 1 auto !important; }
/* El riel ocupa todo el ancho disponible (así se arrastra desde cualquier tarjeta) y cada
   tarjeta mide 565px, como el diseño. El número decimal de tarjetas por vista lo resuelve el
   script de la cabecera poniendo el swiper en modo 'auto'. La sección recorta el sobrante. */
.elementor-widget-loop-carousel .swiper{ overflow:visible !important; }
.elementor-widget-loop-carousel .swiper-slide{ width:565px !important; }
/* Flechas: abajo a la izquierda, alineadas con el título */
.elementor-widget-loop-carousel .elementor-swiper-button{
  top:auto !important; bottom:0 !important; transform:none !important; right:auto !important;
}
.elementor-widget-loop-carousel .elementor-swiper-button-prev{ left:-317px !important; }
.elementor-widget-loop-carousel .elementor-swiper-button-next{ left:-278px !important; }
.elementor-widget-loop-carousel .swiper-button-disabled{ opacity:.3; }
.elementor-widget-loop-carousel .swiper{ cursor:grab; }
.elementor-widget-loop-carousel .swiper:active{ cursor:grabbing; }

@media(max-width:1024px){
  .elementor-widget-loop-carousel .swiper-slide{ width:420px !important; }
  .e-con:has(> div > .elementor-widget-loop-carousel) > div:first-child{
    flex:0 0 240px !important; width:240px !important; max-width:240px !important; }
  .elementor-widget-loop-carousel .elementor-swiper-button-prev{ left:-240px !important; }
  .elementor-widget-loop-carousel .elementor-swiper-button-next{ left:-201px !important; }
}
@media(max-width:767px){
  .elementor-widget-loop-carousel .swiper-slide{ width:300px !important; }
  .e-con:has(> div > .elementor-widget-loop-carousel){ flex-wrap:wrap !important; }
  .e-con:has(> div > .elementor-widget-loop-carousel) > div:first-child{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important; }
  .elementor-widget-loop-carousel .elementor-swiper-button-prev{ left:0 !important; bottom:-42px !important; }
  .elementor-widget-loop-carousel .elementor-swiper-button-next{ left:39px !important; bottom:-42px !important; }
}

/* ============ Tarjetas del carrusel ============
   El alto de la tarjeta, el recorte de la foto y el color de fondo NO se definen aquí:
   salen de los ajustes del propio widget de imagen destacada, y Elementor genera su regla
   (.elementor-94 … img { height:390px; object-fit:cover }). Se hace así para que la tarjeta
   siga bien aunque esta hoja de estilos no llegue al navegador por caché.
   Aquí solo va lo que el widget no puede hacer: las formas del hover.
   Sin transiciones: el cambio es inmediato. */
.nilo-card{ position:relative; overflow:hidden; align-self:stretch; }
/* El <a> que envuelve la foto es inline-block por defecto: se encoge al tamaño natural de la
   imagen y deja franjas del color de la tarjeta a los lados. Hay que forzarlo a bloque. */
.nilo-card .elementor-widget-container,
.nilo-card figure{ display:block; margin:0; line-height:0; }
.nilo-card a{ display:block !important; width:100% !important; margin:0; line-height:0; }
.nilo-card img{ display:block; }

/* HISTORIAS · violeta, triángulo diagonal inferior izquierdo */
.nilo-card--historia:hover img{ clip-path:polygon(0 0, 100% 0, 100% 100%); }

/* VOCES · naranjo, recorte circular centrado en el rostro.
   Las fotos van recortadas a la proporción de la tarjeta (565:745) con el rostro
   a la altura correcta, por eso no hace falta object-position. */
.nilo-card--voz:hover img{ clip-path:circle(34% at 50% 45%); }

/* ============ Alianzas: marquesina continua ============
   Movimiento lento y constante para que los nombres se lean. El riel lleva las marcas
   duplicadas y se desplaza -50%, con lo que el bucle es imperceptible.
   Se detiene al pasar el mouse y se desactiva si el sistema pide menos movimiento. */
#nilo-alianzas{ overflow:hidden; }
#nilo-alianzas-track{
  width:max-content !important; max-width:none !important;
  animation:nilo-marquesina 55s linear infinite;
}
#nilo-alianzas:hover #nilo-alianzas-track{ animation-play-state:paused; }
@keyframes nilo-marquesina{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ #nilo-alianzas-track{ animation:none; } }

/* ============ Protección contra desbordes horizontales ============
   Textos largos sin espacios (correos, URLs) empujaban la página entera en móvil
   y dejaban una franja blanca a la derecha. */
@media(max-width:767px){
  /* Solo los textos que de verdad no tienen dónde cortar: correos y URLs.
     Aplicarlo a todos los títulos partía palabras del lema del logotipo. */
  a[href^="mailto:"], a[href^="http"]{ overflow-wrap:anywhere; }
}

/* ============ Tarjetas de los archivos (Historias y Voces) ============
   Una sola plantilla de tarjeta: el color de la banda lo decide la categoría de la entrada.
   Así, al crear una categoría nueva basta con añadir su color aquí. */
.nilo-arch-foto{ margin:0 !important; }
/* El <a> que envuelve la foto es inline-block por defecto y se encoge: hay que forzarlo a bloque
   (mismo caso que en las tarjetas de la Home). */
.nilo-arch-foto a{ display:block !important; width:100% !important; line-height:0; }
.nilo-arch-foto .elementor-widget-container{ display:block; line-height:0; }
.nilo-arch-foto img{ display:block; width:100%; }
.nilo-arch-titulo a{ color:inherit; }
/* El ⊕ del diseño es un círculo de trazo fino. Font Awesome gratis solo trae la versión
   sólida, así que se dibuja con un SVG propio de fondo. */
.nilo-arch-mas{ flex:0 0 auto; }
.nilo-arch-mas .elementor-icon{
  display:block; width:30px; height:30px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%20fill%3D'none'%20stroke%3D'%23363A36'%20stroke-width%3D'1.6'%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'13.5'%2F%3E%3Cpath%20d%3D'M16%209.5v13M9.5%2016h13'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.nilo-arch-mas svg, .nilo-arch-mas i{ display:none !important; }

/* Paginación del archivo: las flechas van arriba a la derecha, como en el diseño */
#nilo-grilla-archivo{ position:relative; }
#nilo-grilla-archivo .elementor-pagination{
  position:absolute; top:-88px; right:36px; margin:0;
  display:flex; gap:18px; font-size:30px;
}
#nilo-grilla-archivo .elementor-pagination a,
#nilo-grilla-archivo .elementor-pagination span{ color:#363A36; }
@media(max-width:767px){
  #nilo-grilla-archivo .elementor-pagination{ position:static; margin-top:28px; }
}

/* La banda es el contenedor hermano de la foto dentro de la tarjeta */
.e-loop-item .nilo-arch-foto + .e-con{ background-color:#D9D9D6; }
.e-loop-item.category-historias .nilo-arch-foto + .e-con{ background-color:#8094DD; }
.e-loop-item.category-voces     .nilo-arch-foto + .e-con{ background-color:#F87C56; }

/* ============ Franjas degradadas bajo la cabecera ============
   El PDF usa dos: violeta en artículos, Somos, Alianzas y Círculo Nilo; oliva→naranjo en los
   archivos de Historias y Voces. Los colores están muestreados del PDF original: en el paquete
   venían como una captura de muestras, no como un asset. Aquí van en CSS, pesan cero. */
#nilo-franja{
  background:linear-gradient(90deg,
    #B096B0 0%, #726481 8%, #013936 17%, #034C62 25%, #486090 33%,
    #7876BE 42%, #A88BEC 50%, #BB96FF 58%, #9582DB 67%, #6871B0 75%,
    #345C80 83%, #024453 92%, #0A3F4E 100%);
}
#nilo-franja-archivo{
  background:linear-gradient(90deg,
    #ABA789 0%, #645C1C 10%, #675B1F 20%, #978769 30%, #B4752B 40%,
    #C76603 50%, #C76600 60%, #BD6C01 70%, #9E8662 80%, #6D6029 90%, #57511A 100%);
}
/* Destacado dentro de un artículo */
.nilo-destacado{ margin:48px 0; padding:0; border:0; border-top:1px solid #D9D9D6; border-bottom:1px solid #D9D9D6; }
.nilo-destacado p{ font-size:33px; line-height:1.4; margin:28px 0; }
@media(max-width:1024px){ .nilo-destacado p{ font-size:28px; } }
@media(max-width:767px){ .nilo-destacado p{ font-size:22px; } .nilo-destacado{ margin:32px 0; } }

/* Artículo: el titular y las preguntas van subrayados, no en negrita (pg. 8-9 del mockup),
   y la respuesta arranca en la línea siguiente, sin espacio de párrafo. */
.elementor-widget-theme-post-content p > strong:only-child{
  font-weight:400;
  font-variation-settings:'wght' 400,'wdth' 100,'GRAD' 0;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
#nilo-cuerpo p:has(> strong:only-child){ margin-bottom:0; } /* gana al #nilo-cuerpo p de la plantilla 204 */

/* Páginas legales: columna angosta y cuerpo más chico que el del medio */
.nilo-legal p{ margin:0 0 1.2em; }
.nilo-legal p:last-child{ margin-bottom:0; }
.nilo-legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.nilo-legal strong{ font-variation-settings:'wght' 700,'wdth' 100,'GRAD' 0; }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Google Sans Flex';
	font-display: auto;
	src: url('https://somosnilo.cl/wp-content/uploads/2026/09/GoogleSansFlex-wght-wdth-GRAD.ttf') format('truetype');
}
/* End Custom Fonts CSS */