/*
 * Megamenu de navegacion V2.
 *
 * Los valores vienen del artboard del diseno, que trabaja en px, con Manrope en tres pesos
 * -300, 500 y 800, los unicos que se cargan- y radio de 2 px en todo.
 *
 * Tres bloques: el panel de escritorio, la cabecera y el cajon movil. El panel se abre con :hover y
 * :focus-within y el cajon con :target, asi que funciona sin JavaScript; js/megamenu.js solo anade
 * la intencion de hover, el estado ARIA, el cierre con Escape, el resaltado cruzado y las flechas
 * del carrusel.
 *
 * La rejilla NO es de columnas iguales: cada panel tiene su reparto y se elige por el numero de
 * columnas (data-rmm-cols), no por el nombre del panel, para que renombrarlo no rompa nada. La
 * separacion entre columnas es padding mas un filete de 1 px, sin gap, como en el diseno.
 */

:root {
  --rmm-azul: #3812cf;
  --rmm-azul-borde: #2a0ea0;
  --rmm-turquesa: #70eed6;
  --rmm-claro: #f5f5f5;
  --rmm-gris: #545454;
  --rmm-t2: rgba(255, 255, 255, .6);
  --rmm-borde: rgba(255, 255, 255, .22);
  --rmm-borde-app: rgba(255, 255, 255, .25);
  --rmm-sep: rgba(255, 255, 255, .14);
  --rmm-radio: 2px;
}

/* ----------------------------------------------- Reset de estilos heredados
 *
 * css/custom.css da a todos los <a> de la navegacion un display:flex centrado y dos barras
 * decorativas en ::before/::after. Dentro del panel y del cajon eso no vale.
 */

#masthead .rmm-panel a::before,
#masthead .rmm-panel a::after,
.mmv a::before,
.mmv a::after {
  content: none;
  display: none;
}

/*
 * El selector lleva #masthead a proposito: `.main-navigation .menu a` de css/custom.css pesa (0,2,1)
 * y centraba el contenido de todo lo que hay dentro del panel. Tampoco se fija aqui el color: cada
 * pieza pone el suyo, y un `color: inherit` en este sitio se los comia a todos.
 */
#masthead .rmm-panel a {
  display: block;
  height: auto;
  justify-content: flex-start;
  text-align: left;
  text-decoration: none;
}

/*
 * El cajon movil se pinta fuera de la navegacion, asi que no le afecta el centrado que css/custom.css
 * impone ahi dentro y no necesita el reset de arriba. Tenerlo le ganaba por especificidad a sus
 * propias piezas y descentraba los botones del pie.
 */
.mmv a {
  text-decoration: none;
}

.rmm-panel ul,
.mmv ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rmm-panel li,
.mmv li {
  width: auto;
  list-style: none;
}

.rmm-panel,
.mmv {
  font-family: Manrope, Verdana, sans-serif;
  color: #ffffff;
}

/* --------------------------------------------------------- Panel: la caja */

@media (min-width: 60em) {

  /*
   * El panel se posiciona respecto al contenedor mw9 de la cabecera, no respecto al <li>, para que
   * ocupe el ancho del contenido. No se toca #masthead: Mhead le gestiona la posicion y le deja un
   * transform permanente.
   */
  #masthead .site-header-container {
    position: relative;
  }

  .main-navigation .menu > li.rmm-parent {
    position: static;
  }

  .rmm-panel {
    --rmm-pad: 80px;
    --rmm-col-sep: 32px;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: #000000;
    border-top: 1px solid var(--rmm-sep);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }

  /* El panel de cuatro columnas -Consultoria Zoho- va mas apretado. */
  .rmm-panel[data-rmm-cols="4"] {
    --rmm-pad: 48px;
    --rmm-col-sep: 28px;
  }

  .rmm-parent:hover > .rmm-panel,
  .rmm-parent:focus-within > .rmm-panel,
  .rmm-parent.is-open > .rmm-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: rmm-in .28s ease both;
  }

  @keyframes rmm-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  /* Cierre con Escape: hace falta mas peso que la regla de :hover, porque el raton sigue encima. */
  #masthead .main-navigation .menu > li.rmm-parent.is-cerrado > .rmm-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
  }

  /* Franja de claim */
  .rmm-band {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 4px var(--rmm-pad);
    box-sizing: border-box;
  }

  .rmm-band__dash {
    width: 40px;
    height: 4px;
    background: var(--rmm-azul);
    flex-shrink: 0;
  }

  /* Rejilla */
  .rmm-cols {
    display: grid;
    padding: 16px var(--rmm-pad) 32px;
    box-sizing: border-box;
  }

  .rmm-panel[data-rmm-cols="4"] .rmm-cols {
    grid-template-columns: 232px 452px minmax(0, .95fr) minmax(0, 1.05fr);
  }

  .rmm-panel[data-rmm-cols="3"] .rmm-cols {
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr) minmax(0, 1.12fr);
  }

  .rmm-panel[data-rmm-cols="2"] .rmm-cols {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  .rmm-cols > .rmm-col {
    padding-left: var(--rmm-col-sep);
    padding-right: var(--rmm-col-sep);
    border-right: 1px solid var(--rmm-sep);
  }

  .rmm-cols > .rmm-col:first-child {
    padding-left: 0;
  }

  .rmm-cols > .rmm-col:last-child {
    padding-right: 0;
    border-right: 0;
  }

  /*
   * Por debajo del ancho del diseno las dos columnas fijas del panel de Zoho -232 + 452- no caben.
   * Pasan a fraccionarias para que el panel no desborde. El diseno no cubre este caso.
   */
  @media (max-width: 85em) {
    .rmm-panel {
      --rmm-pad: 40px;
      --rmm-col-sep: 20px;
    }

    .rmm-panel[data-rmm-cols="4"] {
      --rmm-pad: 32px;
      --rmm-col-sep: 18px;
    }

    .rmm-panel[data-rmm-cols="4"] .rmm-cols {
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.1fr);
    }
  }

  /* Pie claro */
  .rmm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    min-height: 56px;
    padding: 8px var(--rmm-pad);
    box-sizing: border-box;
    background: var(--rmm-claro);
  }
}

/* ------------------------------------------------------- Panel: tipografia */

.rmm-band__claim {
  margin: 0;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #ffffff;
}

.rmm-band__sub {
  margin: 2px 0 0;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rmm-t2);
}

.rmm-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rmm-col__t {
  margin: 0 0 2px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.15;
  color: #ffffff;
}

.rmm-col__sub {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rmm-t2);
}

/* ------------------------------------------------------- Piezas compartidas */

/* El guion bajo de marca: oculto hasta el hover en apps y tiles, siempre visible en cons y sol. */
.rmm-us {
  opacity: 0;
  color: var(--rmm-turquesa);
  transition: opacity .2s;
}

.rmm-app:hover .rmm-us,
.rmm-app.is-hl .rmm-us,
.rmm-tile:hover .rmm-us {
  opacity: 1;
}

.rmm-cons .rmm-us,
.rmm-sol .rmm-us {
  opacity: 1;
  color: inherit;
}

/* La flecha de texto que usa el diseno, con su avance de 4 px al hover. */
.rmm-arr {
  display: inline-block;
  transition: transform .2s;
}

a:hover .rmm-arr {
  transform: translateX(4px);
}

.rmm-link {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rmm-turquesa);
}

.rmm-all {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  /*
   * Sin flex-shrink el boton se aplastaba: es un item de una columna flex y cedia altura cuando el
   * contenido apretaba. `auto` lo empuja al fondo; el margen de .rmm-cases da el hueco minimo.
   */
  flex: 0 0 48px;
  margin-top: auto;
  border: 2px solid #ffffff;
  border-radius: var(--rmm-radio);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}

.rmm-all:hover {
  background: #ffffff;
  color: #000000;
}

.rmm-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--rmm-azul);
}

.rmm-cta svg {
  transition: transform .2s;
}

.rmm-cta:hover svg {
  transform: translateX(4px);
}

.rmm-foot a {
  color: #000000;
  font-size: 13px;
  font-weight: 500;
}

.rmm-foot .rmm-cta {
  color: var(--rmm-azul);
}

.rmm-foot__l {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.rmm-foot__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--rmm-gris);
}

.rmm-foot__claim {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--rmm-gris);
}

/* Icono: SVG del tema como mascara, dashicon, o imagen. Un modificador por origen.
 *
 * WordPress encola dashicons.min.css DESPUES de la hoja del tema, asi que con una sola clase
 * .rmm-ico habia empates de especificidad -display, font-family- que los resolvia dashicons y
 * dejaban el glifo sin pintar. Con .rmm-ico.rmm-ico--dash, (0,2,0), gana siempre esta hoja.
 */
.rmm-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rmm-ico.rmm-ico--svg {
  background-color: currentColor;
  -webkit-mask: var(--rmm-ico) no-repeat center / contain;
  mask: var(--rmm-ico) no-repeat center / contain;
}

.rmm-ico.rmm-ico--dash {
  display: inline-flex;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-family: dashicons;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

img.rmm-ico {
  object-fit: contain;
}

/* ------------------------------------------- Columna de tarjetas: .rmm-cons */

.rmm-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rmm-cons {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: var(--rmm-radio);
  transition: transform .2s;
}

.rmm-cons:hover {
  transform: translateY(-2px);
}

.rmm-cons--azul {
  background: var(--rmm-azul);
  color: #ffffff;
}

.rmm-cons--blanca {
  background: #ffffff;
  color: #000000;
}

.rmm-cons__ico {
  width: 20px;
  height: 20px;
}

.rmm-cons__ico.rmm-ico--dash {
  font-size: 20px;
}

.rmm-cons__t {
  font-size: 16px;
  font-weight: 800;
}

.rmm-cons__d {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.rmm-cons--azul .rmm-cons__d {
  opacity: .85;
}

.rmm-cons--blanca .rmm-cons__d {
  color: var(--rmm-gris);
}

.rmm-cons__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.rmm-cons--blanca .rmm-cons__go {
  color: var(--rmm-azul);
}

/* ---------------------------------------------- Columna de tiles: .rmm-tile */

.rmm-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rmm-tiles--fila {
  grid-template-columns: minmax(0, 1fr);
}

.rmm-tile {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--rmm-borde);
  border-radius: var(--rmm-radio);
  color: #ffffff;
  transition: background .2s, border-color .2s, transform .2s;
}

.rmm-tile:hover {
  background: var(--rmm-azul);
  border-color: var(--rmm-azul);
  transform: translateY(-2px);
}

.rmm-tile__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: var(--rmm-radio);
  flex-shrink: 0;
  transition: background .2s, color .2s;
}

.rmm-tile:hover .rmm-tile__ico {
  background: #ffffff;
  color: var(--rmm-azul);
}

.rmm-tile__ico .rmm-ico {
  width: 22px;
  height: 22px;
  font-size: 22px;
}

.rmm-tile__txt {
  display: block;
  min-width: 0;
}

.rmm-tile__t {
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.rmm-tile__d {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}

.rmm-tile__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--rmm-turquesa);
  transition: color .2s;
}

.rmm-tile:hover .rmm-tile__go {
  color: #ffffff;
}

.rmm-tiles--fila .rmm-tile {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
}

.rmm-tiles--fila .rmm-tile__ico {
  margin-bottom: 0;
}

.rmm-tiles--fila .rmm-tile__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}

.rmm-tiles--fila .rmm-tile__d {
  margin-top: 0;
}

.rmm-tiles--fila .rmm-tile__go {
  margin-top: 0;
  margin-left: auto;
  padding-left: 16px;
  white-space: nowrap;
}

/* -------------------------------------------- Columna de apps: suites y rejilla */

.rmm-bundles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.rmm-bundle {
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--rmm-borde);
  border-radius: var(--rmm-radio);
  color: #ffffff;
  transition: background .2s, border-color .2s;
}

.rmm-bundle:hover {
  background: var(--rmm-azul);
  border-color: var(--rmm-azul);
}

.rmm-bundle__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rmm-bundle__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rmm-bundle__n {
  font-size: 14px;
  font-weight: 800;
}

.rmm-bundle__badge {
  padding: 2px 6px;
  background: var(--rmm-turquesa);
  border-radius: var(--rmm-radio);
  color: #000000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rmm-bundle__d {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .75);
}

.rmm-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
}

.rmm-app {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 7px 8px;
  border-radius: var(--rmm-radio);
  color: #ffffff;
  transition: opacity .25s;
}

.rmm-app__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--rmm-borde-app);
  border-radius: var(--rmm-radio);
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}

.rmm-app:hover .rmm-app__tile {
  background: var(--rmm-azul);
  border-color: var(--rmm-azul);
}

.rmm-app.is-hl .rmm-app__tile {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--rmm-azul);
}

.rmm-app.is-dim {
  opacity: .28;
}

.rmm-app__txt {
  min-width: 0;
}

.rmm-app__n {
  display: block;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.rmm-app__d {
  display: block;
  font-size: 12px;
  color: var(--rmm-t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------ Columna de soluciones */

.rmm-sols {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rmm-sol {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 16px 36px 16px 16px;
  border-radius: var(--rmm-radio);
  color: #ffffff;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .2s, opacity .25s, transform .2s;
}

.rmm-sol--1 { background: conic-gradient(from 90deg, #d14351, #3812cf, #d14351); }
.rmm-sol--2 { background: conic-gradient(from 90deg, #70eed6, #3812cf, #70eed6); }
.rmm-sol--3 { background: conic-gradient(from 90deg, #ede705, #3812cf, #ede705); }

.rmm-sol:hover {
  outline-color: #ffffff;
  transform: translateY(-2px);
}

.rmm-sol.is-off {
  opacity: .35;
}

.rmm-sol__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: var(--rmm-radio);
  flex-shrink: 0;
}

.rmm-sol__ico .rmm-ico {
  width: 22px;
  height: 22px;
  font-size: 22px;
}

.rmm-sol__txt {
  min-width: 0;
}

.rmm-sol__t {
  display: block;
  font-size: 16px;
  font-weight: 800;
}

.rmm-sol__d {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.rmm-sol__arrow {
  position: absolute;
  right: 14px;
  top: 14px;
  display: flex;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .2s, transform .2s;
}

.rmm-sol:hover .rmm-sol__arrow {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------- Columna de casos */

.rmm-cases {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.rmm-case {
  display: flex !important;
  align-items: stretch;
  height: 144px;
  flex-shrink: 0;
  border-radius: var(--rmm-radio);
  overflow: hidden;
  transition: opacity .15s ease-in;
}

.rmm-case:hover {
  opacity: .5;
}

.rmm-case__img {
  position: relative;
  display: block;
  overflow: hidden;
  flex: 0 0 110px;
  width: 110px;
  align-self: stretch;
}

/*
 * `max-width: none` y el alto al 100 % son necesarios: style.css declara `img { height:auto;
 * max-width:100% }`, y con eso la imagen se quedaba a su proporcion en lugar de llenar la fila.
 */
.rmm-case__img img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .45s ease;
}

.rmm-case:hover .rmm-case__img img {
  transform: scale(1.07);
}

.rmm-case__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rmm-case__txt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 14px 18px;
  box-sizing: border-box;
}

.rmm-case--claro .rmm-case__txt {
  background: var(--rmm-claro);
  color: #000000;
}

.rmm-case--azul .rmm-case__txt {
  background: var(--rmm-azul);
  color: #ffffff;
}

.rmm-case__cat {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rmm-case--claro .rmm-case__cat { color: var(--rmm-azul); }
.rmm-case--azul .rmm-case__cat  { color: var(--rmm-turquesa); }

.rmm-case__t {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rmm-case__m {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rmm-case--claro .rmm-case__m { color: var(--rmm-gris); }
.rmm-case--azul .rmm-case__m  { color: rgba(255, 255, 255, .85); }

.rmm-case__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.rmm-case--claro .rmm-case__go { color: var(--rmm-azul); }
.rmm-case--azul .rmm-case__go  { color: #ffffff; }

/* La tarjeta pendiente de publicar va con borde discontinuo y sin fondo, gane quien gane el tono. */
.rmm-case--proximo {
  border: 1px dashed rgba(255, 255, 255, .4);
}

.rmm-case--proximo .rmm-case__txt {
  background: transparent;
  color: #ffffff;
  align-items: center;
  text-align: center;
}

.rmm-case--proximo .rmm-case__cat { color: var(--rmm-turquesa); }
.rmm-case--proximo .rmm-case__m   { color: var(--rmm-t2); }

/* -------------------------------------------------------------- Overlay
 *
 * Se pinta en wp_footer, como hijo de <body>, porque Mhead deja a #masthead un transform
 * permanente y ahi dentro un position:fixed se referiria a la cabecera. Queda por debajo del
 * z-index 10 de la cabecera sticky: oscurece la pagina, no la cabecera ni el panel.
 */

.rmm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

@media (max-width: 59.99em) {
  .rmm-overlay {
    display: none;
  }
}

@media (min-width: 60em) {
  body:has(#masthead .rmm-parent:hover) .rmm-overlay,
  body:has(#masthead .rmm-parent:focus-within) .rmm-overlay,
  .rmm-abierto .rmm-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Con Escape se cierra el panel: el overlay tiene que irse con el. */
  body:has(#masthead .rmm-parent.is-cerrado) .rmm-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ------------------------------------------------------------- Cabecera
 *
 * Todo cuelga de :has(.rmm-parent), que solo existe cuando la V2 esta activa: asi la V1 que sirve
 * produccion no se ve afectada por ninguna de estas reglas.
 *
 * css/custom.css pinta en cada <a> del nav dos barras decorativas y las anima por `width`. Aqui se
 * apagan y se sustituyen por el subrayado del diseno: 4 px, azul, que entra con scaleX desde la
 * izquierda. El punto de home queda fuera, que en la V1 ya lleva las barras desactivadas.
 */

@media (min-width: 60em) {

  /*
   * No se toca el tamano de letra, el relleno ni la altura del item: el diseno los da para un
   * lienzo de 1440 px, y aqui encogian el menu y lo descolgaban del borde de la cabecera, que no
   * mide los 80 px del artboard. Se queda lo de la V1 -altura al 100 %, el `pa2` del span- y de
   * aqui sale solo el subrayado, el chevron y la atenuacion al hover.
   */
  #masthead .main-navigation:has(.rmm-parent) .menu > li > a {
    transition: opacity .15s ease-in;
  }

  #masthead .main-navigation:has(.rmm-parent) .menu > li > a:hover {
    opacity: .5;
  }

  #masthead .main-navigation:has(.rmm-parent) .menu > li.is-open > a {
    opacity: 1;
  }

  #masthead .main-navigation:has(.rmm-parent) .menu > li > a::before {
    content: none;
    display: none;
  }

  #masthead .main-navigation:has(.rmm-parent) .menu > li:not(.menu-item-home-dot) > a::after,
  #masthead .main-navigation:has(.rmm-parent) .menu > li:not(.menu-item-home-dot) > a:hover::after {
    content: "";
    display: block;
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: 0;
    top: auto;
    width: auto;
    height: 4px;
    background: var(--rmm-azul);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }

  #masthead .main-navigation:has(.rmm-parent) .menu > li.rmm-parent:hover > a::after,
  #masthead .main-navigation:has(.rmm-parent) .menu > li.rmm-parent:focus-within > a::after,
  #masthead .main-navigation:has(.rmm-parent) .menu > li.rmm-parent.is-open > a::after {
    transform: scaleX(1);
  }

  #masthead .main-navigation:has(.rmm-parent) .menu > li.rmm-parent.is-cerrado > a::after {
    transform: scaleX(0);
  }

  /*
   * El chevron, dibujado con dos bordes para no depender de una fuente de iconos.
   *
   * La rotacion va sobre el 65 % de la caja, no sobre su centro: de los 7x7 px solo se ven el borde
   * derecho y el inferior, cuyo centro de masa cae en (4,54 , 4,54) -el 65 %-. Girando sobre ese
   * punto la tinta se queda donde esta y el chevron no se mueve al abrirse; sobre el centro de la
   * caja se desplazaba ~2,5 px hacia arriba, que es lo que se veia descolgado.
   *
   * Y nada de compensar con translate: en un `transform` el translate posterior se aplica sobre los
   * ejes ya girados, asi que empujaba en diagonal.
   */
  #masthead .main-navigation .rmm-parent > a > span::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 4px;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform-origin: 65% 65%;
    transform: rotate(45deg);
    transition: transform .25s ease;
  }

  #masthead .main-navigation .rmm-parent.is-open > a > span::after {
    transform: rotate(225deg);
  }

  /* Telefono y boton Contactar */
  #masthead:has(.rmm-parent) #header-telephone {
    font-size: 14px;
    font-weight: 500;
    color: var(--rmm-azul);
  }

  #masthead:has(.rmm-parent) #header-contact {
    height: 48px;
    padding: 0 20px;
    background: var(--rmm-azul);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    border: 1px solid var(--rmm-azul-borde);
    border-radius: 2px 0 0 2px;
    transition: opacity .15s ease-in;
  }

  #masthead:has(.rmm-parent) #header-contact:hover {
    opacity: .8;
  }
}

/* ------------------------------------------------------------------- Movil */

.mmv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .65);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.mmv {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  background: #000000;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s ease;
}

/* Sin JavaScript lo abre el enlace MENU por :target; con JavaScript, la clase del <html>. */
.mmv:target,
.mmv-abierto .mmv {
  transform: none;
  visibility: visible;
}

.mmv:target + .mmv-overlay,
.mmv-abierto .mmv-overlay {
  opacity: 1;
  visibility: visible;
}

.mmv-abierto,
.mmv-abierto body {
  overflow: hidden;
}

.mmv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--rmm-sep);
  flex-shrink: 0;
}

.mmv__logo svg {
  height: 18px;
  width: auto;
  display: block;
}

.mmv__close {
  display: flex !important;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mmv__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mmv__search {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
}

.mmv__search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 12px;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--rmm-borde-app);
  border-radius: var(--rmm-radio);
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
}

.mmv__search button {
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--rmm-radio);
  background: var(--rmm-azul);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mmv__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--rmm-sep);
  cursor: pointer;
  list-style: none;
}

.mmv__sum::-webkit-details-marker {
  display: none;
}

.mmv__sec[open] .mmv__sum {
  box-shadow: inset 4px 0 0 var(--rmm-azul);
}

.mmv__sum-t {
  font-size: 17px;
  font-weight: 500;
}

/* El +/- del acordeon, con dos barras para no depender de una fuente de iconos. */
.mmv__sum-i {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mmv__sum-i::before,
.mmv__sum-i::after {
  content: "";
  position: absolute;
  background: #ffffff;
  transition: transform .2s ease, opacity .2s ease;
}

.mmv__sum-i::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.mmv__sum-i::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.mmv__sec[open] .mmv__sum-i::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

.mmv__body {
  display: grid;
  gap: 24px;
  padding: 8px 20px 28px;
  border-bottom: 1px solid var(--rmm-sep);
  animation: mmv-in .25s ease both;
}

@keyframes mmv-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.mmv__claim {
  margin: 0;
  padding: 4px 12px;
  border-left: 4px solid var(--rmm-azul);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Dentro del cajon las columnas se linealizan: titulo mas pequeno y sin subtitulo. */
.mmv .rmm-col {
  padding: 0;
  border: 0;
  gap: 10px;
}

.mmv .rmm-col__t {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
}

.mmv .rmm-col__sub {
  display: none;
}

/* Las apps pasan a chips de dos columnas, sin descripcion. */
.rmm-apps--movil {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rmm-apps--movil .rmm-app {
  height: 48px;
  padding: 0 12px;
  gap: 10px;
  box-sizing: border-box;
  border: 1px solid var(--rmm-borde-app);
  border-radius: var(--rmm-radio);
}

.rmm-apps--movil .rmm-app__tile {
  width: 20px;
  height: 20px;
  border: 0;
}

.rmm-apps--movil .rmm-app__d {
  display: none;
}

.rmm-apps--movil .rmm-app__n {
  overflow: hidden;
  text-overflow: ellipsis;
}

.rmm-apps--movil .rmm-us {
  display: none;
}

/* Los tiles pasan a filas. */
.rmm-tiles--movil {
  grid-template-columns: minmax(0, 1fr);
}

.rmm-tiles--movil .rmm-tile {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.rmm-tiles--movil .rmm-tile__ico {
  width: 40px;
  height: 40px;
  border-width: 1px;
  margin-bottom: 0;
}

.rmm-tiles--movil .rmm-tile__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.rmm-tiles--movil .rmm-tile__d {
  margin-top: 0;
}

.rmm-tiles--movil .rmm-tile__go {
  margin: 0 0 0 auto;
  padding-left: 8px;
  white-space: nowrap;
}

/* Carrusel de casos: desliza con scroll-snap, sin JavaScript. */
.rmm-cases--carrusel {
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.rmm-cases--carrusel::-webkit-scrollbar {
  display: none;
}

.rmm-cases--carrusel > * {
  flex: 0 0 280px;
  width: 280px;
  height: 292px;
  flex-direction: column;
  scroll-snap-align: start;
}

.rmm-cases--carrusel .rmm-case__img {
  flex: 0 0 140px;
  width: 100%;
  height: 140px;
  align-self: auto;
}

.rmm-cases--carrusel .rmm-case__txt {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  padding: 12px 16px;
}

.rmm-car-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.rmm-car-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.rmm-car-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: width .25s, background .25s, border-radius .25s;
}

.rmm-car-dot.is-on {
  width: 24px;
  border-radius: 4px;
  background: var(--rmm-turquesa);
}

.rmm-car-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: var(--rmm-radio);
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.rmm-car-btn[disabled] {
  opacity: .35;
  cursor: default;
}

.mmv__sec2-l {
  display: block;
}

.mmv__sec2-i > a {
  display: flex !important;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rmm-sep);
  font-size: 15px;
  color: rgba(255, 255, 255, .8);
}

.mmv__sec2-sub {
  padding-left: 20px !important;
}

.mmv__sec2-sub a {
  display: flex !important;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rmm-sep);
  font-size: 13px;
  color: var(--rmm-t2);
}

.mmv__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px 32px;
  flex-shrink: 0;
}

.mmv__cta,
.mmv__tel {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 56px;
  padding: 16px 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: var(--rmm-radio);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

.mmv__cta {
  background: var(--rmm-azul);
  color: #ffffff;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.mmv__tel {
  background: var(--rmm-claro);
  color: var(--rmm-azul);
}

/* El cajon es solo para movil; en escritorio manda el panel. */
@media (min-width: 60em) {
  .mmv,
  .mmv-overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rmm-panel,
  .rmm-parent:hover > .rmm-panel,
  .rmm-parent.is-open > .rmm-panel,
  .rmm-overlay,
  .mmv,
  .mmv-overlay,
  .mmv__body,
  .rmm-arr,
  .rmm-case__img img,
  .rmm-cons,
  .rmm-tile,
  .rmm-sol,
  .rmm-car-dot {
    animation: none !important;
    transition: none !important;
  }
}