.elementor-kit-5{--e-global-color-primary:#F59022;--e-global-color-secondary:#2888C8;--e-global-color-text:#47566B;--e-global-color-accent:#A9490D;--e-global-color-tintaalta:#0F1A29;--e-global-color-textobajo:#5E6B80;--e-global-color-panel0:#F3F6FA;--e-global-color-panel2:#E9EFF6;--e-global-color-naranjah:#D06018;--e-global-color-azultexto:#1A5E96;--e-global-color-anclaosc:#06080A;--e-global-color-panelosc:#111620;--e-global-color-tintaclara:#F4F7FA;--e-global-color-wasap:#17853F;--e-global-color-okverde:#15703F;--e-global-typography-primary-font-family:"Saira";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.05em;--e-global-typography-primary-letter-spacing:-0.5px;--e-global-typography-secondary-font-family:"Saira";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1.9px;color:#47566B;font-family:"Inter", Sans-serif;font-size:17px;font-weight:400;line-height:1.65em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#F59022;font-family:"Inter", Sans-serif;font-size:16px;font-weight:700;text-transform:none;color:#FFFFFF;border-radius:10px 10px 10px 10px;padding:15px 26px 15px 26px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 h1{font-family:"Saira", Sans-serif;font-weight:700;}.elementor-kit-5 h2{font-family:"Saira", Sans-serif;font-weight:700;}.elementor-kit-5 h3{font-family:"Saira", Sans-serif;font-weight:700;}.elementor-kit-5 h4{font-family:"Saira", Sans-serif;font-weight:700;}.elementor-kit-5 h5{font-family:"Saira", Sans-serif;font-weight:700;}.elementor-kit-5 h6{font-family:"Saira", Sans-serif;font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.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:1039px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================================
   PUNTO AUTORIZADO DE MARCAS — CSS global del kit de Elementor
   Se pega en: Elementor › Ajustes del sitio › CSS personalizado.
   Fuente de verdad de este archivo: assets/css/styles.css del sitio original.

   Regla de oro: aqui va SOLO lo que los controles visuales de Elementor no
   pueden expresar (velos, patrones, estados hover finos, numeracion trazada).
   Todo lo demas —colores, tipografias, espaciados, bordes— se configura en
   el widget para que el cliente pueda tocarlo sin escribir CSS.
   ========================================================================= */

/* ------------------------------------------------------------- TOKENS */
:root {
  --pam-naranja: #F59022;
  --pam-naranja-alto: #FFC46B;
  --pam-naranja-claro: #FFA940;
  --pam-naranja-hondo: #D06018;
  --pam-azul: #2888C8;
  --pam-azul-claro: #46A6E0;

  --pam-fondo: #FFFFFF;
  --pam-panel-0: #F3F6FA;
  --pam-panel-2: #E9EFF6;
  --pam-panel-3: #DCE4EE;

  --pam-tx-alto: #0F1A29;
  --pam-tx-medio: #47566B;
  --pam-tx-bajo: #5E6B80;

  --pam-acento-tx: #A9490D;
  --pam-azul-tx: #1A5E96;
  --pam-ok-tx: #15703F;
  --pam-alerta-tx: #8A5A06;

  --pam-linea: rgba(15, 26, 41, .11);
  --pam-linea-fuerte: rgba(15, 26, 41, .19);
  --pam-linea-naranja: rgba(245, 144, 34, .55);
  --pam-linea-azul: rgba(40, 136, 200, .42);
  --pam-rejilla: rgba(15, 26, 41, .045);
  --pam-velo: rgba(15, 26, 41, .045);

  --pam-r: 14px;
  --pam-r-sm: 10px;

  --pam-sombra-1: 0 1px 2px rgba(15, 26, 41, .05), 0 6px 16px -8px rgba(15, 26, 41, .16);
  --pam-sombra-2: 0 2px 6px rgba(15, 26, 41, .05), 0 20px 44px -20px rgba(15, 26, 41, .26);
  --pam-brillo-naranja: 0 0 0 1px rgba(245, 144, 34, .34), 0 10px 34px -10px rgba(245, 144, 34, .55);
}

/* ------------------------------------------------- AMBITO OSCURO
   Las dos anclas del diseno (CTA de cierre y pie) invierten los tokens.
   Cualquier componente que caiga dentro se adapta solo. */
.pam-oscuro {
  --pam-fondo: #06080A;
  --pam-panel-0: #0B0E12;
  --pam-panel-2: #171E29;
  --pam-tx-alto: #F4F7FA;
  --pam-tx-medio: #AEB9C6;
  --pam-tx-bajo: #8B98A9;
  --pam-acento-tx: var(--pam-naranja);
  --pam-azul-tx: var(--pam-azul-claro);
  --pam-ok-tx: #3FBF7F;
  --pam-alerta-tx: #F5B942;
  --pam-linea: rgba(255, 255, 255, .09);
  --pam-linea-fuerte: rgba(255, 255, 255, .16);
  --pam-linea-naranja: rgba(245, 144, 34, .38);
  --pam-linea-azul: rgba(40, 136, 200, .34);
  --pam-rejilla: rgba(255, 255, 255, .028);
  --pam-velo: rgba(255, 255, 255, .045);
  --pam-sombra-1: 0 2px 14px rgba(0, 0, 0, .5);
  --pam-sombra-2: 0 14px 44px rgba(0, 0, 0, .58);
}

/* ------------------------------------------------- ICONOS DE TRAZO
   Los iconos propios se dibujan con trazo, no con relleno: llevan
   fill="none" stroke="currentColor" en el propio archivo. Elementor
   fuerza fill al color del icono, lo que los convertiria en manchas
   solidas. Se respeta lo que declara cada SVG: los de trazo siguen
   sin relleno y los macizos (WhatsApp, redes) se rellenan igual. */
svg[fill="none"][stroke="currentColor"] {
  fill: none !important;
  stroke: currentColor !important;
}

/* Consecuencia del punto anterior en la LISTA DE ICONOS.
   El widget de icono pinta el color en el contenedor (.elementor-icon
   { color }), asi que el trazo lo hereda y el .elementor-kit-5 de color del panel
   funciona. La lista de iconos, en cambio, lo pinta en svg { fill }: en un
   icono de trazo ese valor no se ve, y el trazo acababa heredando el color
   de enlace del tema (un magenta que no esta en la paleta).
   Se fija el color en el contenedor del icono, por familia de lista, con
   los mismos tokens del sitio: cambiar el token en Ajustes del sitio
   retinta todas las listas a la vez. */
.elementor-widget.pam-chips .elementor-icon-list-icon,
.elementor-widget.pam-pie .elementor-icon-list-icon { color: var(--pam-acento-tx); }
.elementor-widget.pam-chequeo .elementor-icon-list-icon { color: var(--pam-ok-tx); }
.pam-respuesta .elementor-icon-list-icon { color: var(--pam-azul-tx); }
.pam-resumen .elementor-icon-list-icon { color: var(--pam-ok-tx); }
.pam-aviso .elementor-icon-list-icon { color: var(--pam-alerta-tx); }

/* Enlaces: el tema los pinta de magenta. El diseno original los deja
   heredar el color del texto y quita el subrayado; el color de cada
   enlace visible lo pone su propio widget. */
.elementor a { color: inherit; }

/* -------------------------------------------------------- BOTONES
   El tema pone los botones en versalitas; el diseno original no. */
.elementor-button,
.elementor-button-text { text-transform: none; }

/* Interlineado del boton. En el original .btn lo fija en 1.2 y de ahi sale
   la posicion vertical del texto junto al icono; en Elementor nacia en 1 y
   el texto quedaba medio pixel alto. */
.elementor-button { line-height: 1.2; }

/* El envoltorio del contenido del boton es una fila flex que Elementor deja
   en align-items:normal, es decir estirando. El icono mide 19 px de alto y
   estira la fila; el texto, cuya caja de linea mide 13,76, se queda pegado
   ARRIBA de esos 19 px y su altura de mayusculas acaba 4 px por encima del
   centro del icono. Se ve sobre todo en el boton Agendar de la cabecera.
   El original no tiene el problema porque .btn es un flex con
   align-items:center y el icono y el texto son hijos directos. */
.elementor-button-content-wrapper { align-items: center; }

/* ------------------------------------------------------------- HALO
   ----------------------------------------------------------------------
   NO usar pseudoelementos aqui. Los contenedores de Elementor ya usan
   ::before para su Superposicion de fondo, y ::after queda reservado en
   el heroe para el desvanecido vertical. Si esta decoracion ocupa uno de
   los dos, gana por orden de hoja y anula la superposicion: fue
   exactamente lo que dejo el heroe sin velo.

   Se pinta como capa de background-image sobre el elemento. Elementor
   controla el background-COLOR, asi que las dos cosas conviven. La
   contrapartida es que si el cliente pone una imagen de fondo a una
   seccion con esta clase, la imagen gana; para eso basta con quitarle la
   clase desde Avanzado > Clases CSS.

   LA REJILLA DE CUADROS SE RETIRO A PETICION DEL CLIENTE: endurecia
   demasiado el diseno. La clase .pam-rejilla sigue puesta en las 73
   secciones que la llevaban, porque marca cuales son banda gris -el
   fondo #F3F6FA y el filete de 1 px se configuran en el contenedor-,
   pero ya no pinta nada. Para recuperar el patron basta con devolver
   aqui esta regla:

     .pam-rejilla {
       background-image:
         linear-gradient(var(--pam-rejilla) 1px, transparent 1px),
         linear-gradient(90deg, var(--pam-rejilla) 1px, transparent 1px);
       background-size: 46px 46px;
       mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
     }

   Esos son los valores del diseno original -cuadro de 46 px y la rejilla
   desvaneciendose hacia abajo-, no los que tenia el sitio, que iba a
   78 px y sin desvanecer, y por eso se veia tan marcada.
   ---------------------------------------------------------------------- */
.pam-halo {
  background-image: radial-gradient(58% 42% at 62% 12%, rgba(245, 144, 34, .16), transparent 70%);
}

/* ------------------------------------------------------------- HEROE
   ----------------------------------------------------------------------
   OJO AL CAMBIAR ESTOS VALORES. En el sitio original habia DOS capas: la
   foto a opacidad .70 y encima un velo blanco en degradado. Elementor no
   separa esas dos capas: la imagen del pase de diapositivas va opaca y
   todo el trabajo lo hace la superposicion. Por eso los numeros de aqui
   NO son los del CSS original, sino su equivalente compuesto.

   Lo que hay que conservar es el PESO DE LA FOTO sobre el blanco:

     peso = opacidad_foto x (1 - velo)        <- original
     peso = 1 - velo                          <- Elementor

   Objetivo medido en el original (y con el que se verifico el contraste
   de todo el texto del heroe, minimo 6,2:1):

     escritorio   0,27 en el borde izquierdo  ->  0,60 en el derecho
     movil        0,29 arriba                 ->  0,42 abajo

   De ahi salen los valores de velo: 1 - 0,27 = 0,73 y 1 - 0,60 = 0,40.
   Si se cambian las fotografias por otras mas oscuras, hay que rehacer la
   medicion (ver docs/ENTREGA.md, seccion 16).
   ---------------------------------------------------------------------- */
.pam-heroe { position: relative; isolation: isolate; }

/* Orden de capas del heroe. Sin esto la superposicion queda DEBAJO de la
   fotografia y el velo no hace nada: el pase de diapositivas es un hijo
   con z-index 0 y el ::before de la superposicion nace con z-index auto,
   asi que la foto se pinta encima del velo. */
.pam-heroe > .elementor-background-slideshow { z-index: 0; }
.pam-heroe::before { z-index: 1; }
.pam-heroe > .e-con-inner { z-index: 3; }

/* Desvanecido vertical que ata el heroe al lienzo blanco. Elementor solo
   admite una superposicion, y esa ya la usa el velo direccional. */
.pam-heroe::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    #FFFFFF 0%,
    rgba(255, 255, 255, 0) 18%,
    rgba(255, 255, 255, 0) 70%,
    #FFFFFF 100%);
}
.pam-heroe > .e-con-inner { position: relative; z-index: 1; }

/* Movil y tableta: la columna de texto ocupa casi todo el ancho, asi que
   el velo direccional dejaria el texto de la derecha sobre foto casi
   limpia. Se cambia a vertical y mas cerrado. */
@media (max-width: 1039px) {
  /* OJO: en los contenedores la superposicion de fondo se pinta en el
     ::before del propio contenedor, NO en un hijo .elementor-background-overlay
     (eso es de las secciones antiguas). Apuntar al hijo no hace nada y el
     movil se queda con el velo direccional de escritorio, que deja el texto
     de la derecha sobre fotografia casi limpia. */
  .pam-heroe::before {
    background-image: linear-gradient(to bottom,
      rgba(255, 255, 255, .706) 0%,
      rgba(255, 255, 255, .66) 30%,
      rgba(255, 255, 255, .62) 60%,
      rgba(255, 255, 255, .58) 100%) !important;
  }
  .pam-heroe::after { background: none; }
}

/* ----------------------------------------------------------- ROTULOS
   El rotulo de seccion lleva una regla naranja de 22px antes del texto.
   Se hace con ::before sobre el widget de titulo para que el texto siga
   siendo un campo normal que el cliente edita. */
.pam-rotulo .elementor-heading-title {
  display: flex;
  align-items: center;
  /* 10 px, como el original: con 12 el rotulo del heroe se parte en dos
     lineas justo a 390 px de ancho. */
  gap: 10px;
}
.pam-rotulo .elementor-heading-title::before {
  content: '';
  width: 26px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--pam-naranja), transparent);
}
.pam-rotulo-azul .elementor-heading-title::before {
  background: linear-gradient(90deg, var(--pam-azul-claro, #46A6E0), transparent);
}

/* ----------------------------------------------------------- TARJETAS
   El borde se vuelve naranja y la tarjeta se eleva al pasar el cursor.
   Elementor da hover por widget, pero no cuando el disparador es el
   contenedor entero y el efecto viaja a los hijos. */
.pam-tarjeta {
  position: relative;
  box-shadow: var(--pam-sombra-1);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* Filete de luz en el borde superior. Aqui ::before si esta libre: la
   tarjeta no lleva superposicion de fondo, que es quien lo ocupa.
   width:auto y border:0 son imprescindibles. Elementor pinta la
   superposicion de los contenedores en .e-con::before y le declara
   width:max(100% + bordes, 100%) mas un borde de 1px con el color del
   contenedor. Al haber un width declarado el navegador ignora el "right",
   asi que el filete arrancaba a 18px y media el ancho entero de la caja:
   se salia 19px por el costado derecho. Ademas, con box-sizing:border-box
   ese borde se comia el 1px de alto y en lugar del degradado se pintaba
   una banda gris solida de 2px. */
.pam-tarjeta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  width: auto;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--pam-linea-fuerte), transparent);
}
.pam-tarjeta:hover {
  border-color: var(--pam-linea-naranja) !important;
  box-shadow: var(--pam-sombra-2);
  transform: translateY(-4px);
}
.pam-tarjeta:hover .pam-flecha .elementor-button-text::after { transform: translateX(4px); }
/* El envoltorio del widget de boton deja debajo del enlace una linea de
   texto propia (los 17 px del cuerpo). En el original el enlace vive dentro
   de un parrafo de .9rem y no sobra nada. */
.pam-flecha { line-height: 0; }
/* Flecha literal, no el escape CSS \2192: al guardar el CSS en la base de
   datos WordPress se come la barra invertida y sale el texto "2192". */
.pam-flecha .elementor-button-text::after {
  content: ' →';
  margin-left: 7px;
  display: inline-block;
  transition: transform .25s ease;
}
/* El enlace se pega al fondo de la tarjeta para que todas las de una fila
   alineen su pie, aunque el resumen tenga distinto numero de lineas.
   Elementor no expone margin-top:auto en el control de margen. */
.pam-tarjeta .pam-flecha { margin-top: auto; }
/* El relleno y el alto minimo van en el ENLACE, no en el envoltorio del
   widget: en la hoja original .enlace-pie es el propio <a> y mide 44 px de
   alto. Dejandolo en el envoltorio el area pulsable se queda en 15 px.
   El relleno lleva !important porque el control del widget escribe
   padding:0 con la misma especificidad y va despues en la hoja; y el
   enlace pasa a inline-flex porque en inline-block align-items no hace
   nada y el texto se quedaba pegado arriba de los 44 px. */
.pam-tarjeta .pam-flecha .elementor-button {
  display: inline-flex;
  align-items: center;
  padding-top: 14px !important;
  padding-bottom: 4px !important;
  min-height: 44px;
}

/* Placa de icono de la tarjeta: naranja translucido, esquina redondeada. */
.pam-placa-icono .elementor-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(245, 144, 34, .17), rgba(245, 144, 34, .04));
  border: 1px solid var(--pam-linea-naranja);
  border-radius: 12px;
  padding: 0;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.pam-tarjeta:hover .pam-placa-icono .elementor-icon { transform: scale(1.08) rotate(-4deg); }

/* -------------------------------------------------------------- CHIPS */
.pam-chips .elementor-icon-list-items { gap: 8px !important; flex-wrap: wrap; }
/* El relleno va en el enlace, no en el <li>: Elementor deja el <a> dentro
   del elemento de lista, asi que con el relleno fuera el area tocable se
   quedaba en los 22 px del texto en vez de los 38 px de la pastilla. */
.elementor-widget.pam-chips .elementor-icon-list-item > a { padding: 7px 13px; }
/* Cuando la pastilla no es enlace -las tres del heroe no lo son- no hay
   <a> donde poner el relleno y la pastilla se quedaba en 24 px de alto
   en vez de los 38 del original. */
.elementor-widget.pam-chips .elementor-icon-list-item:not(:has(> a)) { padding: 7px 13px; }
.elementor-widget.pam-chips .elementor-icon-list-item {
  border: 1px solid var(--pam-linea);
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: border-color .2s, color .2s, background .2s;
}
.elementor-widget.pam-chips .elementor-icon-list-item:hover {
  border-color: var(--pam-naranja);
  background: rgba(245, 144, 34, .1);
}
.pam-oscuro .elementor-widget.pam-chips .elementor-icon-list-item {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Las pastillas del heroe van sobre fotografia: el original les sube el
   borde de .11 a .16 y pinta el icono en tinta alta, no en naranja. */
.elementor-widget.pam-chips-heroe .elementor-icon-list-item { border-color: rgba(15, 26, 41, .16); }
.elementor-widget.pam-chips-heroe .elementor-icon-list-icon { color: var(--pam-tx-alto); }
/* Elementor separa icono y texto con 5 px fijos ADEMAS de la sangria del
   panel, asi que el hueco real salia a 12. En el heroe manda la sangria. */
.pam-heroe .elementor-widget .elementor-icon-list-icon + .elementor-icon-list-text { padding-inline-start: 0; }
/* Elementor reserva al icono 1,25 veces su tamano (ancho del contenedor y
   margen del SVG): casi 4 px de holgura que el original no tiene. */
.pam-heroe .elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon { width: auto; }
.pam-heroe .elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon svg { margin-right: 0; }

/* En el original la etiqueta de cada cifra es un <span> dentro de un div con
   el interlineado del cuerpo: su caja de linea mide 1,65 x 16 = 26,4 px, y
   la cifra deja 5 px por debajo. El contador de Elementor pinta la etiqueta
   como bloque propio, asi que hay que darle esas dos medidas. */
.pam-heroe .elementor-widget-counter .elementor-counter-number-wrapper { margin-bottom: 5px; }
.pam-heroe .elementor-widget-counter .elementor-counter-title { line-height: 26.4px; }
/* Pastilla de estado en verde (.chip--vivo del original). */
.elementor-widget.pam-chip-vivo .elementor-icon-list-item {
  background: rgba(63, 191, 127, .13);
  border-color: rgba(26, 127, 76, .38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.elementor-widget.pam-chip-vivo .elementor-icon-list-icon { color: var(--pam-ok-tx); }

/* -------------------------------------------------- PASOS NUMERADOS
   Numeros trazados, no rellenos: el contorno es lo que da el aire de
   plano tecnico. -webkit-text-stroke no tiene control en Elementor. */
.pam-paso-num .elementor-heading-title {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--pam-naranja);
  font-size: 44px;
  line-height: 1;
  letter-spacing: .02em;
}
.pam-paso { position: relative; }
/* Mismo cuidado que en .pam-tarjeta::before: sin width:auto Elementor deja
   el ancho en el 100% del contenedor y el hilo que une los pasos se pasaba
   62px de largo en vez de los 20px que asoman al siguiente paso. */
.pam-paso::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 62px;
  right: -20px;
  width: auto;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--pam-linea-naranja, rgba(245, 144, 34, .55)), transparent);
}
.pam-paso:last-child::before { display: none; }
@media (max-width: 1024px) { .pam-paso::before { display: none; } }

/* --------------------------------------------- BLOQUE RESPUESTA RAPIDA
   Formato pensado para que lo cite un buscador: fondo azul muy claro con
   barra azul a la izquierda. */
.pam-respuesta {
  border-left: 3px solid var(--pam-azul) !important;
  background: linear-gradient(90deg, rgba(40, 136, 200, .07), rgba(40, 136, 200, .02)) !important;
}
.pam-resumen {
  border-left: 3px solid var(--pam-ok-tx) !important;
  background: linear-gradient(90deg, rgba(21, 112, 63, .06), rgba(21, 112, 63, .02)) !important;
}
.pam-aviso {
  border-left: 3px solid var(--pam-naranja) !important;
  background: linear-gradient(90deg, rgba(245, 144, 34, .09), rgba(245, 144, 34, .03)) !important;
}

/* ------------------------------------------------------------- MARCAS
   Las placas de marca van en gris para que ninguna compita con el naranja
   de la pagina; recuperan color al pasar el cursor. */
.pam-marca img {
  filter: grayscale(1);
  opacity: .74;
  transition: filter .25s ease, opacity .25s ease;
}
.pam-marca:hover img { filter: grayscale(0); opacity: 1; }

/* Cinta de marcas: los logos vienen en lienzos de 300x112 con relaciones
   muy distintas. El carrusel los estira al ancho de la diapositiva y los
   recorta. Se limita la ALTURA y se deja el ancho libre, que es como se
   monta una tira de logotipos. */
.pam-cinta .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pam-cinta .swiper-slide img {
  max-height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* La cinta de marcas se detiene si el visitante prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .pam-cinta .swiper-wrapper { transition-duration: 0s !important; }
}

/* -------------------------------------------------------- ACORDEON FAQ */
.pam-faq .elementor-accordion-item {
  border: 1px solid var(--pam-linea) !important;
  border-radius: var(--pam-r-sm);
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--pam-panel-0);
}
.pam-faq .elementor-tab-title { transition: background .2s ease; }
.pam-faq .elementor-tab-title:hover { background: var(--pam-panel-2); }
.pam-faq .elementor-tab-title.elementor-active { background: var(--pam-panel-2); }

/* --------------------------------------------------------- FORMULARIO */
.pam-form .elementor-field-group .elementor-field {
  border: 1px solid var(--pam-linea) !important;
  border-radius: var(--pam-r-sm) !important;
  background: var(--pam-fondo) !important;
  color: var(--pam-tx-alto) !important;
  padding: 14px 16px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pam-form .elementor-field-group .elementor-field::placeholder { color: var(--pam-tx-bajo); opacity: 1; }
.pam-form .elementor-field-group .elementor-field:focus {
  border-color: var(--pam-naranja) !important;
  box-shadow: var(--pam-brillo-naranja);
  outline: none;
}
.pam-form .elementor-message { border-radius: var(--pam-r-sm); }

/* ------------------------------------------------------------ BOTONES
   El degradado de dos paradas no existe como control de boton en
   Elementor; el color plano si. Aqui solo el degradado y el brillo. */
.pam-btn-primario .elementor-button {
  background-image: linear-gradient(135deg, var(--pam-naranja-claro), var(--pam-naranja-hondo));
  box-shadow: 0 8px 26px -10px rgba(245, 144, 34, .8);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pam-btn-primario .elementor-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -10px rgba(245, 144, 34, .95);
}
/* Alto minimo del boton. En el original .btn mide 52 px de alto util y
   .btn--sm 42; el widget de Elementor no expone alto minimo.
   Va con inline-flex y centrado en los dos ejes, como el original: en
   inline-block el contenido se apoya arriba y los pixeles que sobran del
   alto minimo se van todos abajo. */
.pam-btn-primario .elementor-button,
.pam-btn-fantasma .elementor-button,
.pam-btn-wasap .elementor-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pam-btn-sm .elementor-button { min-height: 42px; }
/* En el original el icono del boton mide 19 px fijos; Elementor lo ata al
   tamano de letra y salia a 15. */
.pam-btn-primario .elementor-button-icon svg,
.pam-btn-fantasma .elementor-button-icon svg,
.pam-btn-wasap .elementor-button-icon svg { width: 19px; height: 19px; }
.pam-btn-wasap .elementor-button {
  background-image: linear-gradient(135deg, #17853F, #0B5F2C);
  box-shadow: 0 6px 20px -8px rgba(23, 133, 63, .6);
  transition: transform .2s ease, filter .2s ease;
}
.pam-btn-wasap .elementor-button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Una direccion de correo no ofrece puntos de corte, asi que en movil se
   sale del boton. En el sitio original el boton la recorta con
   overflow:hidden y se pierde parte de la direccion; aqui se permite
   partirla para que se lea entera sin empujar el ancho de la pagina. */
.elementor-widget-button .elementor-button { max-width: 100%; }
.pam-btn-fantasma .elementor-button-text,
.pam-btn-primario .elementor-button-text,
.pam-btn-wasap .elementor-button-text { overflow-wrap: anywhere; }

.pam-btn-fantasma .elementor-button {
  border: 1px solid var(--pam-linea-fuerte);
  background: transparent;
  color: var(--pam-tx-alto);
  transition: border-color .2s ease, background .2s ease;
}
.pam-btn-fantasma .elementor-button:hover {
  border-color: var(--pam-naranja);
  background: rgba(245, 144, 34, .1);
}

/* ------------------------------------------------------------ CABECERA */
.pam-cabecera {
  position: sticky;
  top: 0;
  z-index: 99;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--pam-linea);
}
.admin-bar .pam-cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .pam-cabecera { top: 46px; } }

/* El logo no debe encogerse: en una fila flex el envoltorio del widget de
   imagen cede todo su ancho al bloque de texto de al lado y desaparece. */
/* Cabecera: las tres columnas se reparten por CONTENIDO, no por porcentaje.
   Un contenedor de "ancho completo" de Elementor emite width:100%, y en una
   fila eso hace que las tres pidan el ancho entero a la vez: la del medio se
   quedaba en 0 px y el boton de la derecha se salia 128 px de la pantalla.
   Con width:auto cada una mide lo que ocupa, igual que el header original. */
.pam-cabecera > .e-con-inner > .e-con { width: auto; }
.pam-cabecera > .e-con-inner > .e-con:nth-child(2) { min-width: 0; }

.pam-logo { flex: 0 0 auto; }
/* 44 px en todos los anchos, como el original: no encoge en movil. */
.pam-logo img { height: 44px; width: auto; max-width: none; }

/* Boton hamburguesa. En el original .hamburguesa es una caja de 46x46 con
   velo, filete y esquina de 10. El widget de menu solo expone el tamano del
   ICONO: la caja nace en 33x33 -22 del icono mas .25em de relleno-, sin
   filete y con esquina de 3, y no da control ni de caja ni de color de
   filete. */
.pam-menu .elementor-menu-toggle {
  width: 46px;
  height: 46px;
  padding: 0;
  background-color: var(--pam-velo);
  border: 1px solid var(--pam-linea-fuerte);
  border-radius: 10px;
}

/* Por debajo de 1040 el menu se colapsa en la hamburguesa. En el original
   ese boton vive al final de la fila de la cabecera, a la derecha; aqui
   esta dentro del widget de menu, que es el hijo del MEDIO, y se quedaba
   plantado en mitad de la cabecera. Se manda al final con el orden. */
@media (max-width: 1039px) {
  .pam-cabecera-menu { order: 3; }
  /* Y el telefono viaja con el: en el original los dos van juntos al final
     de la fila, separados 10 px, no repartidos por la cabecera. */
  .pam-cabecera-acciones { margin-left: auto; }
  .pam-cabecera > .e-con-inner { gap: 10px; }
}

/* Barra de aviso superior. El original la pinta entera en tinta #180C02
   sobre el degradado naranja, el enlace incluido: en blanco daba 2,74:1. */
.pam-avisobarra a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* El enlace del menu activo lleva placa clara, no solo color. */
.pam-menu .elementor-nav-menu .current-menu-item > a,
.pam-menu .elementor-nav-menu .current-menu-ancestor > a {
  background: rgba(15, 26, 41, .075);
  border-radius: 8px;
}

/* --------------------------------------------------------------- PIE */
.pam-pie a { transition: color .2s ease; }
.pam-pie a:hover { color: var(--pam-naranja) !important; }
/* En el pie original cada dato de contacto es un enlace con 5 px de relleno
   arriba y abajo: 33 px de alto pulsable. La lista de iconos de Elementor no
   expone relleno por elemento, y el suyo nace en cero. */
.elementor-widget.pam-pie .elementor-icon-list-item > a { padding: 5px 0; }

/* ------------------------------------------------------- MAPA BOGOTA
   Unico bloque servido como HTML: el SVG de los limites oficiales de las
   20 localidades. Cada localidad es un enlace real a su pagina, asi que
   el mapa navega sin una sola linea de JavaScript. El resto de la pagina
   son widgets nativos.
   Reglas copiadas de assets/css/styles.css, seccion MAPA DE COBERTURA. */
.pam-mapa .mapa-lienzo { margin: 0; }

/* El lienzo mide 560x800 y va al ancho de su columna, con el mismo tope de
   alto del original (78vh). Dentro de esa caja el viewBox se ajusta solo y
   el dibujo queda centrado. */
.pam-mapa .mapa-lienzo svg {
  width: 100%;
  height: auto;
  max-height: 78vh;
  display: block;
  margin-inline: auto;
  /* overflow: hidden, NO visible.
     Usme y Ciudad Bolivar siguen hacia el sur en zona rural y sus poligonos
     se dibujan enteros; el encuadre del viewBox es justo lo que debe
     cortarlos (asi lo documenta src/lib/mapa.js). Con overflow visible ese
     recorte no se aplica y el contorno invade la seccion siguiente.
     El recuadro de Sumapaz va dentro del viewBox, asi que no se pierde. */
  overflow: hidden;
}
.pam-mapa .mapa-pie {
  margin-top: 10px;
  font-size: .74rem;
  color: var(--pam-tx-bajo);
  line-height: 1.5;
}

/* Poligonos de las localidades */
.pam-mapa .mapa-localidad path {
  fill: url(#mapaRelleno);
  stroke: rgba(15, 26, 41, .22);
  stroke-width: .9;
  stroke-linejoin: round;
  transition: fill .2s, stroke .2s;
  cursor: pointer;
}
.pam-mapa .mapa-localidad:hover path,
.pam-mapa .mapa-localidad:focus-visible path {
  fill: var(--pam-naranja);
  stroke: #FFFFFF;
  stroke-width: 1.6;
}
.pam-mapa .mapa-localidad:focus { outline: none; }
.pam-mapa .mapa-localidad--rural path { fill: #E4EAF2; }

.pam-mapa .mapa-num {
  font-family: Saira, sans-serif;
  font-size: 12px;
  font-weight: 700;
  fill: var(--pam-tx-medio);
  text-anchor: middle;
  pointer-events: none;
  transition: fill .2s;
}
.pam-mapa .mapa-localidad:hover + .mapa-num { fill: #140A02; }

.pam-mapa .mapa-brujula,
.pam-mapa .mapa-nota-sur,
.pam-mapa .mapa-inset-tx {
  font-family: Saira, sans-serif;
  fill: var(--pam-tx-bajo);
}
.pam-mapa .mapa-brujula { font-size: 12px; letter-spacing: .1em; }
.pam-mapa .mapa-nota-sur { font-size: 9.5px; letter-spacing: .06em; opacity: .8; }
.pam-mapa .mapa-inset-tx { font-size: 9px; letter-spacing: .12em; }
.pam-mapa .mapa-inset-tx--sm { font-size: 7.5px; opacity: .7; }
.pam-mapa .mapa-inset-caja {
  fill: var(--pam-velo);
  stroke: var(--pam-linea);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* ----------------------------------------------------- ACCESIBILIDAD */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pam-naranja);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pam-tarjeta, .pam-btn-primario .elementor-button, .pam-btn-wasap .elementor-button {
    transition: none;
  }
  .pam-tarjeta:hover { transform: none; }
}

/* ================================================== FICHAS DE SERVICIO
   Bloques que solo aparecen en las paginas de servicio y de cobertura.
   Aqui va unicamente lo que Elementor no puede expresar con controles. */

/* ------------------------------------------------------------ MIGA DE PAN
   Elementor separa los elementos en linea con un divisor vertical propio;
   el diseno original usa una barra inclinada, que no es un control. */
.pam-miga .elementor-icon-list-items { gap: 8px !important; flex-wrap: wrap; }
.pam-miga .elementor-icon-list-item:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  opacity: .55;
}
.pam-miga .elementor-icon-list-item > a { display: inline-block; padding-block: 5px; }
.pam-miga .elementor-icon-list-item > a:hover { color: var(--pam-acento-tx); }
.pam-miga .elementor-inline-item::after { border: 0 !important; }

/* -------------------------------------------------------------- SINTOMAS
   El borde izquierdo naranja es lo unico que distingue la caja; el control
   de borde de Elementor pinta los cuatro lados del mismo color. */
.pam-sintoma { border-left-color: var(--pam-naranja) !important; }
.pam-sintoma-ico .elementor-icon {
  background: rgba(245, 144, 34, .12);
  border-radius: 7px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.pam-sintoma-ico { display: flex; }

/* -------------------------------------------------------- LISTA CHEQUEO
   Dos columnas a partir de 560px. La lista de iconos de Elementor no tiene
   control de columnas, y partirla en dos widgets obligaria al cliente a
   reequilibrarla a mano cada vez que anada una linea. */
@media (min-width: 560px) {
  .pam-chequeo .elementor-icon-list-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
}
.pam-chequeo .elementor-icon-list-item { align-items: flex-start; }
.pam-chequeo .elementor-icon-list-icon { margin-top: 2px; }

/* ------------------------------------------------- NOTA INTERNA / AVISO
   Borde discontinuo: Elementor ofrece el estilo, pero no combinado con el
   fondo ambar y el color de texto de aviso en un solo control. */
.pam-nota {
  background: rgba(245, 185, 66, .14);
  border: 1px dashed rgba(190, 140, 20, .5);
}

/* ==================================================== PAGINA DE COBERTURA */

/* ----------------------------------------------------------- METRICAS
   Rejilla con separadores de 1px hechos con el hueco y el fondo, no con
   bordes: asi no se duplica la linea entre celdas. Elementor no tiene un
   control para eso. */
.pam-metricas {
  background: var(--pam-linea);
  border: 1px solid var(--pam-linea);
  border-radius: var(--pam-r);
  overflow: hidden;
  gap: 1px !important;
  padding: 0 !important;
}
.pam-metricas > .e-con {
  background: var(--pam-panel-0, #F3F6FA);
  padding: 16px 12px !important;
  text-align: center;
  align-items: center;
}
.pam-metricas .elementor-counter-number-wrapper { justify-content: center; }

/* -------------------------------------------------------------- TABLA
   El contenido va en un widget de Texto nativo, asi que el cliente edita
   las celdas en el editor visual. Lo que no expone Elementor es el estilo
   de la tabla, que se define aqui una vez para todo el sitio. */
.pam-tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--pam-linea);
  border-radius: var(--pam-r);
}
.pam-tabla { width: 100%; border-collapse: collapse; min-width: 460px; }
.pam-tabla thead th {
  background: var(--pam-panel-2, #E9EFF6);
  text-align: left;
  padding: 13px 16px;
  font-family: Saira, sans-serif;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pam-tx-medio);
  white-space: nowrap;
}
.pam-tabla tbody td {
  padding: 13px 16px;
  border-top: 1px solid var(--pam-linea);
  color: var(--pam-tx-medio);
  vertical-align: top;
}
.pam-tabla tbody tr:hover td { background: var(--pam-velo); }
.pam-tabla tbody td:first-child { color: var(--pam-tx-alto); font-weight: 600; white-space: nowrap; }
.pam-tabla tbody td:first-child a { display: inline-block; padding-block: 7px; color: var(--pam-acento-tx); }

/* ----------------------------------------------------------- BUSCADOR */
/* El recuadro, el alto y la tipografia se configuran en el widget. Aqui
   queda solo lo que no expone: el borde al enfocar y el texto guia. En el
   original el icono va dentro del campo, a la izquierda; el widget de
   Elementor lo saca a un boton a la derecha, asi que no hace falta
   reservar los 46 px de relleno izquierdo. */
.pam-buscador .elementor-search-form__container:focus-within {
  border-color: var(--pam-naranja) !important;
}
.pam-buscador input[type="search"] { outline: none; }
.pam-buscador input[type="search"]::placeholder { color: var(--pam-tx-bajo); }

/* Tarjeta que no se eleva: las de agrupacion por zona son un contenedor de
   pastillas, no un destino en si mismas. */
.pam-tarjeta-plana:hover { transform: none; }

/* ================================================= PAGINAS INSTITUCIONALES */

/* ------------------------------------------------------------- PROSA
   Texto largo (Nosotros y legales). El widget de Texto es nativo y el
   cliente lo edita como un documento; lo que Elementor no da es la medida
   de linea ni la vineta naranja. */
.pam-prosa { max-width: 72ch; }
.pam-prosa h2 {
  font-family: Saira, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 5.2vw, 2.7rem);
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--pam-tx-alto);
  margin: 1.6em 0 .5em;
}
.pam-prosa h2:first-child { margin-top: 0; }
.pam-prosa h3 {
  font-family: Saira, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.1;
  color: var(--pam-tx-alto);
  margin: 1.4em 0 .5em;
}
.pam-prosa ul { margin: 0 0 1em; padding-left: 0; list-style: none; }
.pam-prosa ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: var(--pam-tx-medio);
}
.pam-prosa ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pam-naranja);
}

/* --------------------------------------------------- TARJETA DE MARCA
   El logotipo va en una placa de alto fijo para que las 17 marcas queden
   opticamente al mismo tamano pese a sus proporciones distintas. */
.pam-marca-placa {
  height: 76px;
  padding: 14px 18px;
  border: 1px solid var(--pam-linea);
  border-radius: var(--pam-r-sm);
  background: var(--pam-panel-0);
  transition: background .25s, border-color .25s;
}
.pam-marca-placa img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .25s, opacity .25s;
}
.pam-tarjeta-marca:hover .pam-marca-placa {
  background: #FFFFFF;
  border-color: var(--pam-naranja);
}
.pam-tarjeta-marca:hover .pam-marca-placa img { filter: none; opacity: 1; }

/* --------------------------------------------- INDICE DEL MAPA DEL SITIO */
.pam-lista-mapa .elementor-icon-list-item > a {
  display: inline-block;
  padding-block: 7px;
}
.pam-lista-mapa .elementor-icon-list-item > a:hover { color: var(--pam-acento-tx); }

/* ------------------------------------------- DATOS DE EMPRESA (CONTACTO) */
.pam-datos .elementor-icon-list-item { align-items: flex-start; }
.pam-datos .elementor-icon-list-icon { margin-top: 3px; }
.pam-datos .elementor-icon-list-text { line-height: 1.5; }

/* Pastillas centradas (pagina 404). */
.pam-chips-centro .elementor-icon-list-items { justify-content: center; }

/* ====================================================== HEROE: DETALLES
   Lo que los controles de Elementor no alcanzan a expresar del heroe
   original. El resto (medidas, colores, tipografias) va en el widget. */

/* Barrido de escaneo del diagnosticador: evoca un instrumento de medida.
   Va en ::after porque Elementor ya usa ::before del contenedor para el
   velo de fondo. */
.pam-diagnostico::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pam-naranja), var(--pam-azul-claro), transparent);
  animation: pam-escaneo 3.6s ease-in-out infinite;
}
@keyframes pam-escaneo {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  12%, 88% { opacity: 1; }
  50% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pam-diagnostico::after { animation: none; opacity: .55; }
}

/* El rotulo del diagnosticador lleva el rayo en naranja sobre texto en
   tinta alta; la lista de iconos pinta el SVG con fill, que no se ve en
   un icono de trazo. */
.elementor-widget.pam-diag-titulo .elementor-icon-list-icon { color: var(--pam-acento-tx); }
.elementor-widget.pam-diag-titulo .elementor-icon-list-item { align-items: center; }

/* Barra de avance de tres tramos del diagnosticador. */
.pam-pasos-barra > .e-con { flex: 1; border-radius: 3px; }

/* El ritmo vertical del heroe lo llevan los margenes de cada widget, como
   en el original. Dos cosas que el panel no puede fijar:
   - el margen del titular es .38em, proporcional a un tamano fluido;
   - el parrafo del editor de texto no debe sumar su propio margen. */
.pam-heroe .elementor-widget-heading h1.elementor-heading-title { margin-bottom: .38em; }
.pam-heroe .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Botones de equipo del diagnosticador. Elementor da hover por widget,
   no cuando el disparador es el contenedor y el efecto viaja a los hijos. */
.pam-opcion { transition: border-color .2s, background-color .2s, transform .2s cubic-bezier(.2, .8, .3, 1); }
.pam-opcion .elementor-icon,
.pam-opcion .elementor-heading-title { transition: color .2s, transform .2s; }
.pam-opcion:hover {
  border-color: var(--pam-naranja) !important;
  background-color: rgba(245, 144, 34, .11) !important;
  transform: translateY(-2px);
}
.pam-opcion:hover .elementor-icon { color: var(--pam-acento-tx); transform: scale(1.1); }
.pam-opcion:hover .elementor-heading-title { color: var(--pam-tx-alto); }
/* El envoltorio del widget de icono suma el interlineado heredado debajo
   del SVG: la casilla media 92 px en vez de los 84 del original. */
.pam-opcion .elementor-icon-wrapper { line-height: 0; }

/* Dos cortes que el original hace a 480 y 560 px y que no coinciden con
   los puntos de ruptura del sitio (767 / 1039): se replican aqui para
   que la rejilla de equipos y la fila de botones cambien donde cambian
   en el diseno original. */
@media (min-width: 480px) and (max-width: 767px) {
  .pam-diag-opciones { --e-con-grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 560px) and (max-width: 767px) {
  .pam-heroe-acciones { --flex-direction: row !important; }
}

/* ================================================ DESPLEGABLES DEL MENU
   El diseno original abre un panel de dos columnas de 210 px, centrado
   bajo el rotulo, con un icono por servicio y el enlace al indice
   ocupando la fila completa. El widget Menu de Elementor solo sabe
   pintar una columna de texto: la rejilla, los iconos y la fila del
   indice se resuelven aqui. Tipografia, colores, relleno, borde y
   sombra siguen en los controles del widget, editables.

   Los iconos no se incrustan: se toman de la biblioteca de medios
   (/uploads/pam-iconos/) como mascara, de modo que el color lo pone el
   token del sitio y cambiar el archivo cambia tambien el menu.

   SmartMenus -el JS del widget- escribe display, top, left, margin y
   ancho en linea al abrir, asi que esas cinco medidas van con !important.
   Quien manda en abrir y cerrar sigue siendo el JS (marca aria-hidden),
   para que un panel visible no quede anunciado como oculto; :hover y
   :focus-within quedan de respaldo por si el JS no carga. */
@media (min-width: 1040px) {
  .pam-menu .elementor-nav-menu--main ul.sub-menu {
    grid-template-columns: repeat(2, 210px);
    gap: 4px;
    padding: 14px;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 640px !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%);
  }
  /* Puente invisible sobre el hueco de 10 px entre el rotulo y el panel:
     sin el, bajar el raton hacia el submenu lo cierra a medio camino. */
  .pam-menu .elementor-nav-menu--main ul.sub-menu::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -12px;
    height: 12px;
  }
  .pam-menu .elementor-nav-menu--main ul.sub-menu[aria-hidden="false"],
  .pam-menu .elementor-nav-menu--main li.menu-item-has-children:hover > ul.sub-menu,
  .pam-menu .elementor-nav-menu--main li.menu-item-has-children:focus-within > ul.sub-menu {
    display: grid !important;
  }
  /* La flecha del rotulo gira al abrir, como en el original. */
  .pam-menu .elementor-nav-menu--main li.menu-item-has-children > a .sub-arrow {
    transition: transform .2s;
  }
  .pam-menu .elementor-nav-menu--main li.menu-item-has-children:hover > a .sub-arrow,
  .pam-menu .elementor-nav-menu--main li.menu-item-has-children:focus-within > a .sub-arrow {
    transform: rotate(180deg);
  }

  .pam-menu .elementor-nav-menu--main ul.sub-menu > li { width: 210px; }
  .pam-menu .elementor-nav-menu--main ul.sub-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    /* Elementor redondea a 14 px las esquinas del primer y del ultimo
       elemento del desplegable, pensando en una sola columna. */
    border-radius: 9px !important;
    /* El grupo de tipografia del desplegable de Elementor no expone el
       interlineado, y sin el el elemento mide 40 px en vez de 43. */
    line-height: 1.65;
  }
  .pam-menu .elementor-nav-menu--main ul.sub-menu a::before {
    content: '';
    flex: none;
    width: 19px;
    height: 19px;
    background-color: var(--pam-acento-tx);
    -webkit-mask: center / 19px 19px no-repeat;
    mask: center / 19px 19px no-repeat;
  }

  /* El enlace al indice ocupa la fila completa, va sin icono y se separa
     del listado con una linea. */
  .pam-menu .elementor-nav-menu--main ul.sub-menu > li:last-child {
    grid-column: 1 / -1;
    width: auto;
    margin-top: 6px;
    border-top: 1px solid var(--pam-linea);
  }
  .pam-menu .elementor-nav-menu--main ul.sub-menu > li:last-child > a {
    color: var(--pam-acento-tx);
    font-weight: 600 !important;
    padding-top: 12px;
    border-radius: 0 0 9px 9px !important;
  }
  .pam-menu .elementor-nav-menu--main ul.sub-menu > li:last-child > a::before { display: none; }

  .pam-menu ul.sub-menu a[href*="/reparacion-de-neveras/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-nevera.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-nevera.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-lavadoras/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-lavadora.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-lavadora.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-secadoras/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-secadora.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-secadora.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-lavavajillas/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-lavavajillas.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-lavavajillas.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-estufas-y-hornos/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-estufa.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-estufa.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-hornos-microondas/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-microondas.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-microondas.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-aire-acondicionado/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-aire.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-aire.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-calentadores/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-calentador.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-calentador.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-televisores/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-tv.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-tv.svg"); }
  .pam-menu ul.sub-menu a[href*="/reparacion-de-campanas-extractoras/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-campana.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-campana.svg"); }
  .pam-menu ul.sub-menu a[href*="/cobertura/"]::before { -webkit-mask-image: url("/wp-content/uploads/pam-iconos/icono-pin.svg"); mask-image: url("/wp-content/uploads/pam-iconos/icono-pin.svg"); }
}

/* ============================================== PANEL LATERAL DEL MAPA
   En el original el lienzo y su panel van en una rejilla de dos columnas
   (.mapa-envoltorio: .9fr 1.1fr con 20 px de hueco). Los anchos de las dos
   columnas se configuran en el panel de Elementor; aqui va solo lo que sus
   controles no expresan. */

/* El original apila las dos columnas por debajo de 900 px, que no es
   ninguno de los tres puntos de corte del sitio (767 y 1039), asi que la
   regla va aqui en vez de en el control de ancho del contenedor. */
@media (max-width: 899px) {
  /* La propiedad va directa, no por variable: la variable que escribe el
     control del contenedor pesa mas que cualquier clase de esta hoja. */
  .pam-mapa-envoltorio.e-con { flex-direction: column; }
  .pam-mapa-envoltorio > .e-con { width: 100%; }
}

/* La sombra del original son DOS capas y el control de Elementor admite
   una sola. El panel se queda fijo mientras se recorre la leyenda. */
.pam-mapa-panel { box-shadow: var(--pam-sombra-1); }
@media (min-width: 900px) {
  .pam-mapa-panel { position: sticky; top: 96px; }
}

/* Rotulo con icono. El widget de titulo no admite icono, asi que este va en
   una lista de iconos de un solo elemento y la regla de color se dibuja
   sobre el <li>, igual que .pam-rotulo lo hace sobre el titulo. */
.pam-rotulo-lista .elementor-icon-list-item { align-items: center; }
.pam-rotulo-lista .elementor-icon-list-item::before {
  content: '';
  width: 26px;
  height: 2px;
  flex: none;
  margin-right: 10px;
  background: linear-gradient(90deg, var(--pam-naranja), transparent);
}
.pam-rotulo-lista.pam-rotulo-azul .elementor-icon-list-item::before {
  background: linear-gradient(90deg, var(--pam-azul-claro), transparent);
}
/* El hueco entre el icono y el texto son 10 px y nada mas. Elementor los
   escribe como relleno derecho del icono al usar el control de sangria, y
   ademas reserva un cuarto del tamano del icono como margen del SVG: eso
   ultimo es lo que sobra. La caja del icono, ademas, nace a un cuarto mas
   de ancho del que ocupa el dibujo. */
.elementor-widget.pam-rotulo-lista .elementor-icon-list-icon { width: auto; }
.elementor-widget.pam-rotulo-lista .elementor-icon-list-item .elementor-icon-list-icon svg {
  margin-inline-end: 0;
}

/* El original cierra el ultimo parrafo sin margen inferior (p:last-child).
   El tema del sitio no lo hace, asi que el widget de texto arrastra 1em de
   sobra por debajo. Se corrige dentro del panel; en el resto del sitio la
   diferencia sigue pendiente de revision. */
.pam-mapa-panel .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* La franja de cifras del panel es la misma rejilla de .pam-metricas, con
   la esquina y el relleno mas pequenos del original (.mapa-resumen). */
.pam-mapa-resumen { border-radius: var(--pam-r-sm); }
.pam-mapa-resumen > .e-con { padding: 13px 8px !important; }

/* Leyenda de las 20 localidades. El numero va al 75% de opacidad y el
   nombre se oscurece al pasar el cursor por la celda entera: dos efectos
   que Elementor aplica por widget, no desde el contenedor padre. */
.pam-leyenda > .e-con {
  transition: border-color .18s, background-color .18s;
}
.pam-leyenda > .e-con > .elementor-widget:first-child .elementor-heading-title {
  opacity: .75;
}
.pam-leyenda > .e-con:hover {
  border-color: var(--pam-naranja) !important;
  background-color: rgba(245, 144, 34, .1) !important;
}
.pam-leyenda > .e-con:hover > .elementor-widget:last-child .elementor-heading-title {
  color: var(--pam-tx-alto);
}

/* -------------------------------------------- LISTA DE LOCALIDADES
   Las 20 pastillas de la seccion de cobertura. No son tarjetas: no se
   elevan ni llevan sombra, se desplazan tres pixeles a la derecha. El
   numero va al 70% y con ancho minimo para que los nombres alineen. */
.pam-localidades > .e-con {
  transition: border-color .2s, background-color .2s, transform .2s;
}
.pam-localidades > .e-con > .elementor-widget:first-child .elementor-heading-title {
  opacity: .7;
  min-width: 18px;
}
.pam-localidades > .e-con:hover {
  border-color: var(--pam-naranja) !important;
  background-color: rgba(245, 144, 34, .08) !important;
  transform: translateX(3px);
}
.pam-localidades > .e-con:hover > .elementor-widget:last-child .elementor-heading-title {
  color: var(--pam-tx-alto);
}
/* Entre 560 y 899 px el original pone tres columnas; ninguno de esos dos
   anchos es punto de corte del sitio, asi que el tramo va aqui. Debajo de
   560 y desde 900 son dos, que si se configuran en el contenedor. */
@media (min-width: 560px) and (max-width: 899px) {
  .pam-localidades.e-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==================================================== FOTOGRAFIAS
   Cada foto va montada en una figura con proporcion fija, esquina
   redondeada, recorte, un velo de marca -vineta oscura abajo y tinte
   naranja desde el pie- y el texto del pie ESCRITO ENCIMA de la imagen.
   El widget de imagen de Elementor no expone ninguna de esas cosas; el
   color y la tipografia del pie si se configuran en el widget. */
.pam-foto figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--pam-r);
  background: #FFFFFF;
  border: 1px solid var(--pam-linea);
  /* En el original la figura conserva el margen que el navegador le da por
     defecto (16 px arriba y abajo, 40 a los lados), asi que la foto no
     llega a los bordes de su columna: 503 px dentro de una columna de 583.
     Es un descuido de la hoja original -en el mapa si escribe margin:0 en
     su figura- y Elementor ya reinicia ese margen, asi que la foto ocupa
     la columna entera. Si se prefiere el encogido, basta con volver a
     poner margin: 16px 40px con !important. */
  margin: 0;
}
.pam-foto-43 figure { aspect-ratio: 4 / 3; }
.pam-foto-1610 figure { aspect-ratio: 16 / 10; }
.pam-foto figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pam-foto figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 8, 10, .78), transparent 52%),
    radial-gradient(ellipse at 50% 120%, rgba(245, 144, 34, .14), transparent 62%);
}
.pam-foto figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 16px 18px;
}/* End custom CSS */