/**
 * Campañas y novedades — NOVA
 *
 * RESPALDO. El CSS del sitio (Personalizar → CSS adicional, desde fuente/css.txt) ya
 * viste .mb__g, .mb__c, .mb__im, .mb__x y .mb__k, y es el que manda. Esta hoja solo
 * existe para que la rejilla se vea decente en un sitio sin esa hoja (salvo los dos
 * bloques que se nombran al final de este comentario).
 *
 * Tres reglas que la mantienen fuera del camino:
 *
 * 1. Todo cuelga de :where(.fcam), que no suma especificidad: cada regla pesa como
 *    mucho una clase (más una etiqueta en «a», «b», «u», «img» y «svg»). Así no
 *    alcanza a otros .mb__* ni a otros .lbl de la página, y no le gana a nada del sitio.
 *    La única que necesita la etiqueta para algo más que apuntar es la sombra de
 *    a.mb__c: está explicada donde se declara.
 * 2. Solo declara propiedades con EL MISMO valor que el sitio. Si por el orden de
 *    carga esta hoja sale después y empata, lo que se ve es idéntico. Por eso no hay
 *    transiciones ni el desplazamiento al pasar el ratón: esas las pone el sitio y
 *    aquí solo podrían pisarlas.
 * 3. Nada oculto: ni opacity:0 ni nada que dependa del JavaScript para verse.
 *
 * Los colores van con var(--x, valor) por si el sitio no define sus variables.
 *
 * Dos bloques se saltan las reglas 1 y 2 a propósito, y en ellos esta hoja SÍ manda:
 *
 * - «Una sola campaña vigente» (1.1.1). El sitio no tiene regla para una rejilla de una
 *   sola tarjeta: la dejaba a media anchura junto a un hueco. Esas reglas no cuelgan de
 *   :where(), pesan dos o tres clases y declaran valores distintos de los del sitio, para
 *   ganarle a «.mb__g» y a «a.mb__c» sin !important. Solo alcanzan a la rejilla con la
 *   clase .fcam--1, que el plugin pone únicamente cuando hay una tarjeta, y a esa tarjeta
 *   (hija directa) con su imagen y su texto: con dos o más tarjetas no se aplica nada y
 *   manda el sitio, como siempre.
 * - La ventana con el texto completo (1.1.0, al final de la hoja). El CSS del sitio no la
 *   viste, así que sus reglas pesan lo necesario para ganarle al reinicio del tema y a la
 *   hoja de Elementor.
 *
 * Cada uno está explicado en su sección.
 */

.fcam{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,28px);
}

:where(.fcam) .mb__c{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--ln,#D6DEE8);
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:var(--s1,0 1px 2px rgba(13,57,116,.06),0 5px 16px rgba(13,57,116,.07));
}

/*
 * La sombra de reposo, otra vez, para la tarjeta que es enlace. La hoja de Elementor
 * trae «.elementor a{box-shadow:none}» (una clase y una etiqueta), que le gana a
 * «.mb__c» del sitio y a la regla de arriba (una clase cada una) carguen en el orden que
 * carguen: dentro de una página de Elementor la tarjeta quedaba plana, solo con el borde.
 * Esta pesa lo mismo que la de Elementor y gana porque sale después (el widget la encola
 * detrás de la hoja de Elementor; el código corto la declara dependiente de ella).
 * «.mb__c:hover» del sitio (dos clases) sigue mandando al pasar el ratón.
 */
:where(.fcam) a.mb__c{
  box-shadow:var(--s1,0 1px 2px rgba(13,57,116,.06),0 5px 16px rgba(13,57,116,.07));
}

/* El foco tiene que verse: la tarjeta entera es un enlace que se alcanza con el tabulador */
:where(.fcam) .mb__c:focus-visible{
  /* Naranja oscuro, no el de marca: sobre el blanco de la tarjeta el de marca da 2,30:1
     y la norma pide 3:1. El halo blanco lo separa de lo que haya detrás. */
  outline:3px solid var(--nar-d,#9C5800);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(255,255,255,.95);
}

:where(.fcam) .mb__im{
  display:block;
  overflow:hidden;
  background:var(--sup2,#E9EFF7);
}
:where(.fcam) .mb__im img{
  width:100%;
  height:auto;
  display:block;
}

:where(.fcam) .mb__x{
  display:block;
  padding:clamp(20px,2.4vw,28px);
}

/* Sobre tarjeta blanca el naranja da 2,30 de contraste: la etiqueta va en naranja oscuro */
:where(.fcam) .lbl{
  display:block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--nar-d,#9C5800);
}

:where(.fcam) .mb__x b{
  display:block;
  color:var(--ink,#111111);
  font-size:clamp(19px,2.1vw,25px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.18;
  margin-top:10px;
}

:where(.fcam) .mb__x u{
  text-decoration:none;
  display:block;
  color:var(--txt,#4A4A4A);
  font-size:15px;
  margin-top:9px;
  line-height:1.5;
}

:where(.fcam) .mb__k{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  font-size:13.5px;
  font-weight:800;
  color:var(--azul,#185CB5);
}
/* Sin tamaño, un svg sin width ni height ocupa 300 × 150 px */
:where(.fcam) .mb__k svg{
  width:15px;
  height:15px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* «(se abre en una pestaña nueva)»: solo para lectores de pantalla */
.fcam__sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ── Teléfono: una columna, igual que el sitio ─────────────────────────── */
@media (max-width:680px){
  .fcam{grid-template-columns:1fr}
}

/* ── Una sola campaña vigente (1.1.1) ──────────────────────────────────────
 *
 * Con una sola tarjeta, la rejilla de dos columnas la dejaba a media anchura junto a un
 * hueco vacío. El plugin añade entonces .fcam--1 a la rejilla (con dos o más no la pone, y
 * nada de esto se aplica).
 *
 * Es la excepción a las reglas 1 y 2 de arriba: el sitio no tiene regla para este caso, así
 * que aquí sí se declaran valores distintos de los suyos, sin :where(). Cada regla pesa dos
 * clases o más para ganarle sin !important a «.mb__g» (una clase) y a «a.mb__c» (una clase
 * y una etiqueta) del sitio, carguen en el orden que carguen.
 *
 * La tarjeta ocupa toda la fila, pero tumbada: si solo se ensanchara, a 1380 px la imagen
 * mediría casi 1000 de alto. La imagen queda a la izquierda, del mismo ancho que la de una
 * tarjeta de la rejilla de dos (media fila menos medio hueco), entera y sin recortar, y el
 * texto a la derecha, centrado en vertical. En el teléfono la rejilla ya es de una columna y
 * la tarjeta es la de siempre.
 *
 * Cuando el texto es más alto que la imagen, la imagen queda centrada en vertical sobre el
 * fondo claro de su caja (--sup2), con una franja arriba y otra abajo. Con la campaña de hoy
 * (etiqueta, título y enlace) solo pasa entre 681 y unos 690 px: a 681, 229 px de texto
 * frente a 219 de imagen, franjas de 5 px. Con una línea de apoyo de dos renglones, las
 * franjas miden 43 px a 681, 18 a 700, 8 a 760 y desaparecen hacia los 800. Es a propósito:
 * - «cover» llenaría la caja recortando la pieza, y las piezas llevan texto y logotipo
 *   dentro;
 * - empezar la tarjeta tumbada más arriba (761 px) la quitaría de los teléfonos en
 *   horizontal: a 740 × 360 la tarjeta de pie mediría 654 px de alto, con una imagen de
 *   679 × 490 que no cabe en la pantalla, frente a 330 × 238 tumbada (lo mismo que cada
 *   tarjeta de la rejilla de dos). Medido con Chrome.
 */
.mb__g.fcam--1{grid-template-columns:1fr}
@media (min-width:681px){
  .fcam--1 > .mb__c{flex-direction:row}
  .fcam--1 > .mb__c > .mb__im{
    flex:0 0 calc((100% - clamp(18px,2.4vw,28px)) / 2);
    display:flex;
    align-items:center;
  }
  .fcam--1 > .mb__c > .mb__x{
    flex:1 1 0;
    min-width:0;
    align-self:center;
  }
}

/* ── Aviso del editor de Elementor (en el sitio público no se pinta) ───── */
.fcam-aviso{
  padding:18px 20px;
  border:2px dashed var(--ln,#D6DEE8);
  border-radius:14px;
  background:#fff;
  color:var(--txt,#4A4A4A);
  font-size:15px;
  line-height:1.5;
}

/* ══ Ventana con el texto completo (1.1.0) ═══════════════════════════════════
 *
 * Aquí la hoja NO es respaldo: el CSS del sitio no viste la ventana. Por eso todo
 * cuelga de .fcam__dlg (dos clases por regla) y los colores de los botones se repiten
 * con :focus:
 *
 * - El reinicio de Hello Elementor pinta los botones de rosa con «[type=button]» (una
 *   clase) y les cambia fondo y color con «[type=button]:hover» y «:focus» (dos). Dos
 *   clases le ganan en reposo; tres (:hover, :focus), en lo demás.
 * - La hoja de Elementor trae «.elementor img» y «.elementor a» (clase y etiqueta), y el
 *   kit de Elementor puede traer «.elementor-kit-N button:focus» (dos clases y etiqueta).
 * - La transición va escrita propiedad por propiedad: el reinicio pone «transition:all»
 *   en los botones, y el recuadro de foco entraba en ese «all».
 *
 * Cerrada, la oculta el propio navegador (dialog:not([open]) lleva display:none). Por
 * eso aquí nunca se escribe «display» en la ventana abierta: le ganaría a esa regla y la
 * ventana se vería siempre, abierta o no. La única excepción es la misma regla, repetida
 * con la clase: un navegador que no conoce <dialog> (Safari antes de la 15.4) no la trae
 * y pintaría todas las ventanas, con su texto y sus botones, debajo de la rejilla.
 *
 * Contraste: el botón de inscripción es naranja de marca con texto NEGRO (8,2:1). Blanco
 * sobre ese naranja da 2,30:1 y está prohibido en el sitio.
 */

.fcam__dlg{
  box-sizing:border-box;
  width:calc(100% - 32px);
  max-width:720px;
  max-height:88vh;
  margin:auto;
  padding:0;
  border:0;
  border-radius:22px;
  background:#fff;
  color:var(--txt,#4A4A4A);
  box-shadow:var(--s3,0 30px 70px rgba(13,57,116,.22));
  /* Se desplaza la ventana entera; la X y el pie se quedan fijos (sticky). La barra,
     fina y clara: en Windows la de siempre ocupa 15 px dentro de la tarjeta. */
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--ln,#D6DEE8) transparent;
  font-size:16px;
  line-height:1.6;
  text-align:left;
}
/* Cerrada, oculta también donde el navegador no conoce <dialog> (ver arriba) */
.fcam__dlg:not([open]){display:none}

/* El fondo. Con el color escrito: hasta hace poco las variables del sitio no llegaban a
   ::backdrop en todos los navegadores. Es el azul más oscuro del degradado del sitio. */
.fcam__dlg::backdrop{
  background:rgba(5,28,61,.74);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

/* ── La X: primera en el orden (es lo que enfoca el navegador al abrir) y fija arriba a
      la derecha. El margen negativo la sube encima de la imagen sin empujarla. ── */
.fcam__dlg .fcam__x{
  position:sticky;
  top:12px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:44px;
  height:44px;
  margin:12px 12px -56px auto;
  padding:0;
  border:0;
  border-radius:50%;
  font-size:0;
  line-height:0;
  box-shadow:0 2px 10px rgba(13,57,116,.22);
  cursor:pointer;
  transition:background-color .16s,color .16s;
}
.fcam__dlg .fcam__x,
.fcam__dlg .fcam__x:focus{
  background:#fff;
  color:var(--ink,#111111);
}
.fcam__dlg .fcam__x:hover{
  background:var(--azul-l,#E8F0FB);
  color:var(--azul-d,#0D3974);
}
.fcam__dlg .fcam__x svg{
  display:block;
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Sin imagen, la X ocupa su propia fila: encima del título lo taparía */
.fcam__dlg--sin-im .fcam__x{margin-bottom:0}

/* ── Imagen: la de la tarjeta, arriba y a todo lo ancho. Las esquinas de arriba las
      redondea la propia ventana. Con tope de alto, para que al abrir se vea texto. ──
 *
 * 1.1.1. La imagen se ve ENTERA (contain), nunca recortada. Las campañas de Fondecom son
 * piezas con el texto y el logotipo dentro de la imagen: con «cover» y el tope de alto, a
 * 1366 × 657 se perdía el 44 % de la pieza y las letras salían partidas a media línea.
 * Donde la pieza no llena el ancho, el fondo neutro de la caja rellena los lados.
 *
 * El tope sale del alto de la pantalla: lo que deja la ventana (88vh) después de reservar
 * 360 px para la etiqueta, el título, el primer párrafo y el pie con los botones. Así, al
 * abrir se lee el primer párrafo sin desplazarse (medido a 1366 × 657 con las dos campañas
 * reales). Nunca menos de 160 px (una pantalla muy baja) ni más de 400: con 400, la pieza
 * deja una franja a cada lado y la X cae sobre la franja, no sobre el logotipo. */
.fcam__dlg .fcam__dlg-im{
  display:block;
  /* El ancho va escrito: con «auto», Chrome pasa el tope de alto al ancho a través de
     aspect-ratio y la imagen salía de 491 px en una ventana de 720 (medido). */
  width:100%;
  aspect-ratio:880/634;
  max-height:400px;
  max-height:clamp(160px,calc(88vh - 360px),400px);
  overflow:hidden;
  background:var(--sup2,#E9EFF7);
}
.fcam__dlg .fcam__dlg-im img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:50% 50%;
  border-radius:0;
}

/* ── Textos ── */
.fcam__dlg .fcam__dlg-x{
  padding:clamp(22px,3.2vw,36px) clamp(20px,3.6vw,40px) 4px;
}
.fcam__dlg--sin-im .fcam__dlg-x{padding-top:4px}

/* Naranja oscuro, como en la tarjeta: el de marca sobre blanco da 2,30:1 */
.fcam__dlg .fcam__dlg-lbl{
  margin:0 0 10px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.2em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--nar-d,#9C5800);
}

.fcam__dlg .fcam__dlg-t{
  margin:0;
  font-family:inherit;
  font-size:clamp(24px,3.4vw,32px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
  color:var(--ink,#111111);
  text-wrap:balance;
}

.fcam__dlg .fcam__dlg-cuerpo{
  margin-top:16px;
  font-size:16px;
  line-height:1.6;
  color:var(--txt,#4A4A4A);
  overflow-wrap:break-word;
}
/* Lo que venga del editor clásico: párrafos, listas, subtítulos, negritas, enlaces */
.fcam__dlg .fcam__dlg-cuerpo p,
.fcam__dlg .fcam__dlg-cuerpo ul,
.fcam__dlg .fcam__dlg-cuerpo ol,
.fcam__dlg .fcam__dlg-cuerpo blockquote,
.fcam__dlg .fcam__dlg-cuerpo figure{
  margin:0 0 1em;
}
.fcam__dlg .fcam__dlg-cuerpo ul,
.fcam__dlg .fcam__dlg-cuerpo ol{
  padding-left:1.4em;
}
.fcam__dlg .fcam__dlg-cuerpo li{
  margin:0 0 .4em;
}
.fcam__dlg .fcam__dlg-cuerpo h4,
.fcam__dlg .fcam__dlg-cuerpo h5,
.fcam__dlg .fcam__dlg-cuerpo h6{
  margin:1.4em 0 .5em;
  font-family:inherit;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--ink,#111111);
}
.fcam__dlg .fcam__dlg-cuerpo strong,
.fcam__dlg .fcam__dlg-cuerpo b{
  font-weight:800;
  color:var(--ink,#111111);
}
.fcam__dlg .fcam__dlg-cuerpo blockquote{
  padding-left:16px;
  border-left:3px solid var(--ln,#D6DEE8);
}
.fcam__dlg .fcam__dlg-cuerpo a{
  color:var(--azul,#185CB5);
  text-decoration:underline;
  text-underline-offset:.16em;
}
.fcam__dlg .fcam__dlg-cuerpo a:hover{
  color:var(--azul-d,#0D3974);
}
.fcam__dlg .fcam__dlg-cuerpo img{
  height:auto;
  max-width:100%;
  border-radius:12px;
}
.fcam__dlg .fcam__dlg-cuerpo .aligncenter{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.fcam__dlg .fcam__dlg-cuerpo .alignleft{
  float:left;
  margin:.3em 1em .6em 0;
}
.fcam__dlg .fcam__dlg-cuerpo .alignright{
  float:right;
  margin:.3em 0 .6em 1em;
}
.fcam__dlg .fcam__dlg-cuerpo::after{
  content:"";
  display:table;
  clear:both;
}
.fcam__dlg .fcam__dlg-cuerpo > :first-child{margin-top:0}
.fcam__dlg .fcam__dlg-cuerpo > :last-child{margin-bottom:0}

/* ── Pie: fijo abajo, para que «Inscríbete aquí» se vea aunque el texto sea largo ── */
.fcam__dlg .fcam__dlg-pie{
  position:sticky;
  bottom:0;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
  padding:16px clamp(20px,3.6vw,40px) clamp(18px,2.6vw,28px);
  border-top:1px solid var(--ln,#D6DEE8);
  background:#fff;
}

.fcam__dlg .fcam__b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-sizing:border-box;
  min-height:var(--tap,48px);
  margin:0;
  padding:12px 24px;
  border-width:2px;
  border-style:solid;
  border-radius:100px;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:0;
  text-align:center;
  text-decoration:none;
  text-transform:none;
  white-space:normal;
  box-shadow:none;
  cursor:pointer;
  transition:background-color .16s,color .16s,border-color .16s,transform .16s;
}
.fcam__dlg .fcam__b svg{
  flex:0 0 auto;
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Inscribirse: naranja de marca y texto NEGRO */
.fcam__dlg .fcam__b--ins,
.fcam__dlg .fcam__b--ins:focus{
  background:var(--nar,#F59408);
  border-color:var(--nar,#F59408);
  color:var(--ink,#111111);
}
.fcam__dlg .fcam__b--ins:hover{
  background:#FFA62B;
  border-color:#FFA62B;
  color:var(--ink,#111111);
}

/* Cerrar: secundario, blanco con borde, como el botón de contorno del sitio */
.fcam__dlg .fcam__b--cerrar,
.fcam__dlg .fcam__b--cerrar:focus{
  background:#fff;
  border-color:var(--ln,#D6DEE8);
  color:var(--ink,#111111);
}
.fcam__dlg .fcam__b--cerrar:hover{
  background:#fff;
  border-color:var(--azul,#185CB5);
  color:var(--azul,#185CB5);
}

/* Recuadro de foco: el del sitio, naranja oscuro con halo blanco. En el sitio ya lo pone
   su regla general; esta es para cuando esa hoja no está. Va después de las de arriba,
   con el mismo peso o más, para ganarle a la sombra de la X y al box-shadow:none. */
.fcam__dlg .fcam__x:focus-visible,
.fcam__dlg .fcam__b:focus-visible,
.fcam__dlg .fcam__dlg-cuerpo a:focus-visible{
  outline:3px solid var(--nar-d,#9C5800);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(255,255,255,.95);
}

/* Entrada suave. Solo mueve, no desvanece: si la animación no avanzara (Chrome sin
   pantalla no pinta fotogramas), la ventana se sigue viendo, 14 px más abajo. */
@media (prefers-reduced-motion:no-preference){
  .fcam__dlg[open]{animation:fcam-entra .26s cubic-bezier(.22,.61,.36,1)}
  .fcam__dlg .fcam__b--ins:hover{transform:translateY(-2px)}
}
@keyframes fcam-entra{
  from{transform:translateY(14px)}
  to{transform:none}
}

/* ── Teléfono: casi toda la pantalla, con 12 px de margen alrededor ── */
@media (max-width:680px){
  .fcam__dlg{
    width:calc(100% - 24px);
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
  }
  .fcam__dlg .fcam__b{flex:1 1 auto}
}

/* Pantallas bajas (un teléfono en horizontal: 390 px de alto): la imagen cede antes que el
   texto. Con el mínimo de 160 px, el cuerpo de la campaña quedaba entero bajo el pie fijo y nada
   indicaba que había que desplazarse (revisión del 27/09/2026, 1.1.2). */
@media (max-height:480px){
  .fcam__dlg .fcam__dlg-im{max-height:28vh}
}