/* ==================================================================
   ADNIUS · Header · v6 MENU MOVIL NUEVO (27/09/2026)
   v6: el menu movil es otro (bloque 10): filas compactas con un
   boton + a la derecha, los subenlaces en dos columnas y el boton de
   agendar abajo. Lo arma header.js v4.
   v5 DESPLEGABLES QUE CIERRAN:
   v5: el desplegable de escritorio tambien se abre y se cierra con
   clic (.opened y .shut, los pone header.js v3), y su "View all" va
   en amarillo igual que en el movil. Va con header.js v3 y home.js v4.
   v4: menu con desplegables.
   v4: desplegables en la barra de escritorio (bloque 9) y acordeon
   en el menu movil (bloque 10). Los dos menus usan ahora el mismo
   menu de WordPress, Header EN. Header EN Mobile queda sin uso.
   Necesita header.js v2 y home.js v3.
   v3: aqui vive, UNA sola vez para todo el sitio, la regla que hace
   crecer la pagina en pantallas grandes (bloque final del archivo).
   v2: medidas en rem para que la barra, el menu y los botones fijos
   crezcan parejo en pantallas grandes (ver PANTALLAS-GRANDES.md).
   Hasta 1600px se ve exactamente igual. Se quedan en px las rayas
   de 1px y 2px, las pildoras de 999px, los breakpoints y los 32/46px
   de la barra de administrador de WordPress.
   ------------------------------------------------------------------
   Portado de adnius-home-v59.html, lineas 45 a 97 y 1444 a 1551.

   Carga en TODO el sitio, no solo en el inicio. Por eso nada cuelga
   de .adn-home, que solo existe alli. Todo cuelga de .adn-hdr.

   Orden del archivo:
     1 · Variables
     2 · Puente con Divi
     3 · La barra
     4 · Logo
     5 · Enlaces
     6 · Boton
     7 · Movil
     8 · Menu flotante
     9 · Desplegables de escritorio
    10 · Menu movil

   Sobre la clase "nav": Divi ya le pone esa misma clase al <ul> del
   menu por su cuenta. Para no pisar dos elementos distintos con un
   mismo selector, aqui no se usa .nav. Los enlaces se agarran por el
   <nav> real que Divi genera, que solo envuelve el menu de escritorio.
   ================================================================== */


/* ══════════════════ 1 · VARIABLES ══════════════════ */

/* Van en :root y no scopeadas a .adn-hdr porque las tres piezas del
   header quedan en niveles distintos del DOM y scoparlas seria
   repetir el bloque tres veces. Mismos valores del prototipo. */
:root{
  --black:#000;
  --white:#fff;
  --yellow:#ffc600;
  --orange:#ff7000;
  --green:#29d264;

  --display:'Hanken Grotesk',Helvetica,Arial,sans-serif;
  --body:'Inter',Helvetica,Arial,sans-serif;

  --pad:clamp(1.5rem,5vw,5rem);
}


/* ══════════════════ 2 · PUENTE CON DIVI ══════════════════ */

/* El prototipo pone el flex en .hdr, cuyos hijos son las tres piezas.
   En Divi hay dos envoltorios en el medio: seccion > row > column >
   modulos. Asi que el flex tiene que ir en la columna, que es la
   madre real de logo, menu y boton. */
.adn-hdr .et_pb_row{
  width:100%;max-width:none;margin:0;padding:0;
}
.adn-hdr .et_pb_column{
  width:100%;margin:0;padding:0;
  display:flex;flex-direction:row;
  align-items:center;justify-content:space-between;
  gap:1.5rem;
}
.adn-hdr .et_pb_module{margin:0}


/* ══════════════════ 3 · LA BARRA ══════════════════ */

/* Doble clase para ganarle al padding de fabrica de .et_pb_section
   sin tener que recurrir a !important. */
.adn-hdr.et_pb_section{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:1.4rem var(--pad);
  background:transparent;
  transition:transform .5s cubic-bezier(.16,1,.3,1),
             background .4s ease,
             backdrop-filter .4s ease;
}

/* .tucked la sube fuera de pantalla al bajar. .solid la despega del
   tope con fondo negro y desenfoque. Las dos las pone header.js. */
.adn-hdr.tucked{transform:translateY(-110%)}
.adn-hdr.solid{
  background:rgba(0,0,0,.72);
  /* El prefijo no esta en el prototipo pero Safari lo sigue
     necesitando. Es la misma propiedad, no cambia el diseno. */
  -webkit-backdrop-filter:blur(0.875rem);
  backdrop-filter:blur(0.875rem);
}


/* ══════════════════ 4 · LOGO ══════════════════ */

.adn-hdr .mark{line-height:0;flex:none}
.adn-hdr .mark .et_pb_image_wrap{display:block;line-height:0}
.adn-hdr .mark img{
  height:clamp(2.125rem,3.4vw,2.875rem);
  width:auto;max-width:none;
  display:block;
}


/* ══════════════════ 5 · ENLACES ══════════════════ */

/* Divi trae su propio hamburguesa y lo enciende bajo 980px, mientras
   esconde el menu de escritorio. Nuestro corte es a 900. Sin estas
   dos reglas, entre 901 y 980 no se veria ninguno de los dos. */
.adn-hdr .et_mobile_nav_menu{display:none}
@media (max-width:980px){
  .adn-hdr .et_pb_menu__menu{display:block}
}

.adn-hdr .et_pb_menu.et_pb_module,
.adn-hdr .et_pb_menu_inner_container,
.adn-hdr .et_pb_menu__wrap,
.adn-hdr .et_pb_menu__menu,
.adn-hdr .et-menu-nav{
  background:transparent;
  margin:0;padding:0;
  width:auto;max-width:none;
  border:0;
}

.adn-hdr .et-menu{
  display:flex;gap:2.1rem;
  margin:0;padding:0;list-style:none;
}
.adn-hdr .et-menu>li{
  margin:0;padding:0;
}
.adn-hdr .et-menu>li::before{display:none}

.adn-hdr nav a{
  font-family:var(--body);
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:300;
  text-decoration:none;
  color:rgba(255,255,255,.6);
  transition:color .3s ease;
}
.adn-hdr nav a:hover{color:var(--white)}


/* ══════════════════ 6 · BOTON ══════════════════ */

/* Divi pinta sus botones desde reglas colgadas de #page-container.
   Un id gana a cualquier cadena de clases, asi que la unica salida
   limpia es !important en las propiedades que Divi fija. */
.adn-hdr .et_pb_button_module_wrapper{
  margin:0;line-height:0;flex:none;
}

.adn-hdr .book{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-block;
  font-family:var(--display) !important;
  font-weight:600 !important;
  font-size:.8rem !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-decoration:none;
  padding:.78rem 1.5rem !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--yellow) !important;
  color:var(--black) !important;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.adn-hdr .book:hover{
  transform:translateY(-2px);
  box-shadow:0 0.625rem 2.125rem rgba(255,198,0,.32);
  padding:.78rem 1.5rem !important;
  background:var(--yellow) !important;
  color:var(--black) !important;
}

/* Divi usa el ::after del boton para su flecha, con una fuente de
   iconos. Aqui se le quita el contenido y se reusa para el destello
   del prototipo, que cruza el boton al pasar el mouse. */
.adn-hdr .book::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  margin:0 !important;
  width:auto !important;height:auto !important;
  font-size:0 !important;line-height:0 !important;
  opacity:1 !important;
  transform:none !important;
  z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.72) 50%,transparent 66%);
  background-size:260% 100%;
  background-position:150% 0;
  transition:background-position 1.1s cubic-bezier(.16,1,.3,1) !important;
}
.adn-hdr .book:hover::after{background-position:-60% 0}
.adn-hdr .book::before{display:none !important}


/* ══════════════════ 7 · MOVIL ══════════════════
   Bajo 900px la barra se queda solo con el logo. La navegacion pasa
   a la pildora flotante y al menu a pantalla completa, que viven en
   el bloque 8. */

@media (max-width:900px){
  .adn-hdr .et_pb_menu{display:none}
  .adn-hdr .et_pb_button_module_wrapper{display:none}
  .adn-hdr .et_pb_column{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .adn-hdr.et_pb_section{transition:none}
}

/* La barra de administrador empuja el body 32px, pero el header es
   fixed y se pega al tope de la ventana, no del body. Solo afecta a
   quien ha iniciado sesion; el visitante nunca ve esta regla. */
body.admin-bar .adn-hdr.et_pb_section{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .adn-hdr.et_pb_section{top:46px}
}

/* ══════════════════ 8 · MENU FLOTANTE ══════════════════
   Portado de adnius-home-v59.html, lineas 1444 a 1551.

   La seccion adn-mnav es solo un punto de montaje. header.js saca de
   ahi la pildora y el menu y los cuelga directo del body, por dos
   razones: el Row de Divi lleva z-index 4 y crea un contexto de
   apilado, asi que la capa quedaria por debajo de la barra aunque su
   z-index sea 75; y la barra usa transform al esconderse, que
   arrastraria cualquier elemento fijo que colgara de ella. */

.adn-mnav{display:none}


/* --- La pildora --- */

/* En escritorio manda la barra: se esconde al bajar y vuelve al
   subir. La pildora existe solo bajo 900px, donde la barra ya no
   muestra los enlaces. */
.mpill{display:none}

@media (max-width:900px){
  .mpill{
    position:fixed;
    top:clamp(1rem,2.5vw,2rem);
    right:clamp(1rem,2.5vw,2rem);
    z-index:80;
    display:flex;align-items:center;gap:.7rem;
    height:3.25rem;padding:0 1.2rem 0 1.4rem;
    border-radius:999px;
    background:rgba(12,12,12,.82);
    -webkit-backdrop-filter:blur(1rem);
    backdrop-filter:blur(1rem);
    border:1px solid rgba(255,255,255,.12);
    color:var(--white);cursor:pointer;
    font-family:var(--display);font-weight:600;font-size:.78rem;
    letter-spacing:.16em;text-transform:uppercase;
    opacity:0;transform:translateY(-0.875rem);pointer-events:none;
    transition:opacity .5s cubic-bezier(.16,1,.3,1),
               transform .5s cubic-bezier(.16,1,.3,1),
               border-color .4s ease,background .4s ease;
  }
}

/* Entre 783 y 900 la barra de administrador sigue fija y mide 32px.
   Por debajo de 783 se vuelve absoluta y se va con el scroll, asi
   que ahi no hace falta corregir nada. */
@media (min-width:783px) and (max-width:900px){
  body.admin-bar .mpill{top:calc(clamp(1rem,2.5vw,2rem) + 32px)}
}

.mpill.up{opacity:1;transform:none;pointer-events:auto}
.mpill:hover{border-color:rgba(255,198,0,.5);background:rgba(255,198,0,.08)}
.mpill:focus-visible{outline:2px solid var(--yellow);outline-offset:0.25rem}


/* --- Tres lineas que se vuelven X sin saltos --- */

.mbars{position:relative;width:1.25rem;height:0.75rem;flex:none}
.mbars i{
  position:absolute;left:0;right:0;height:0.0938rem;border-radius:2px;
  background:currentColor;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease,width .4s ease;
}
.mbars i:nth-child(1){top:0}
.mbars i:nth-child(2){top:0.325rem;width:70%}
.mbars i:nth-child(3){top:0.6562rem}
.mpill:hover .mbars i:nth-child(2){width:100%}

body.menu-open .mpill{border-color:rgba(255,198,0,.5);color:var(--yellow)}
body.menu-open .mbars i:nth-child(1){transform:translateY(0.325rem) rotate(45deg)}
body.menu-open .mbars i:nth-child(2){opacity:0}
body.menu-open .mbars i:nth-child(3){transform:translateY(-0.3312rem) rotate(-45deg)}

body.menu-open{overflow:hidden}


/* --- La capa a pantalla completa --- */

.mover{
  position:fixed;inset:0;z-index:75;
  background:rgba(0,0,0,.94);
  -webkit-backdrop-filter:blur(1.375rem);
  backdrop-filter:blur(1.375rem);
  display:grid;align-content:center;
  padding:6rem var(--pad) 3rem;
  opacity:0;pointer-events:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1);
}
.mover.on{opacity:1;pointer-events:auto}

/* Divi mete cuatro envoltorios entre el modulo y el <nav>, cada uno
   con fondo, ancho y relleno propios. Aqui se aplanan todos.

   El primer selector lleva la doble clase a proposito: Divi pinta el
   fondo del modulo con su clase numerada, del tipo
   et_pb_menu_1_tb_header, y un .et_pb_menu a secas pierde por
   especificidad. Sin esto el menu sale como un bloque blanco. */
.mover .et_pb_menu.et_pb_module,
.mover .et_pb_menu_inner_container,
.mover .et_pb_menu__wrap,
.mover .et_pb_menu__menu,
.mover .et-menu-nav{
  display:block;
  width:100%;max-width:none;
  margin:0;padding:0;
  background:transparent;
  border:0;
}
.mover .et_mobile_nav_menu{display:none}

.mover .et-menu{
  display:flex;flex-direction:column;gap:.1rem;
  max-width:93.75rem;width:100%;margin:0 auto;
  padding:0;list-style:none;
}
.mover .et-menu>li{margin:0;padding:0;width:100%}
.mover .et-menu>li::before{display:none}

.mover nav a{
  position:relative;display:block;width:fit-content;
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,7vw,4.6rem);
  line-height:1.12;letter-spacing:-.04em;
  padding:0;
  text-decoration:none;text-transform:none;
  color:rgba(255,255,255,.32);
  transform:translateY(1.625rem);opacity:0;
  transition:color .4s ease,transform .3s ease;
}

/* Todos los enlaces apuntan a la pagina actual, asi que WordPress les
   pone current-menu-item y Divi los pinta distinto. Aqui vuelven al
   mismo color que los demas. */
.mover .et-menu li.current-menu-item>a{color:rgba(255,255,255,.32)}

.mover.on nav a{
  transform:none;opacity:1;
  transition:color .4s ease,
             transform .8s cubic-bezier(.16,1,.3,1),
             opacity .7s ease;
}
.mover nav a:hover,
.mover .et-menu li.current-menu-item>a:hover{color:var(--white)}
.mover nav a:focus-visible{outline:2px solid var(--yellow);outline-offset:0.25rem}

.mover nav a::before{
  content:'';position:absolute;left:-.62em;top:50%;
  width:.42em;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.mover nav a:hover::before{transform:scaleX(1)}


/* --- El pie de la capa --- */

.mfoot{
  max-width:93.75rem;width:100%;
  margin:clamp(2.5rem,6vh,4rem) auto 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
  padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.1);
}
.mfoot a{
  font-family:var(--body);
  font-size:.82rem;letter-spacing:.1em;text-decoration:none;
  color:rgba(255,255,255,.55);
  transition:color .35s ease;
}
.mfoot a:hover{color:var(--yellow)}
.mfoot .set{display:flex;gap:1.6rem;flex-wrap:wrap}


@media (max-width:620px){
  .mpill{height:2.875rem;padding:0 1rem 0 1.15rem;font-size:.7rem;gap:.55rem}
  /* En un telefono bajo, siete enlaces grandes no caben de una */
  .mover{
    align-content:start;padding-top:6.5rem;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .mover nav a{font-size:clamp(1.7rem,8.5vw,2.6rem)}
}

@media (prefers-reduced-motion:reduce){
  .mover,.mover nav a,.mbars i{transition:none}
}

/* ══════════════════ ACCIONES FIJAS ══════════════════
   Portado de adnius-home-v59.html, lineas 1554 a 1594.

   Dos botones anclados abajo a la derecha: agendar y WhatsApp.
   Aparecen pasado el hero, porque antes competirian con el llamado
   principal, y se expanden con su etiqueta al pasar el mouse.

   Van en header.css y no en home.css porque el dock sale en TODO el
   sitio, igual que la cabecera. Cuelgan de .adn-dock. */

.adn-dock{
  position:fixed;right:clamp(1rem,2.5vw,2rem);z-index:65;
  /* Sin esto queda bajo la barra de gestos del iPhone */
  bottom:calc(clamp(1rem,2.5vw,2rem) + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;
  opacity:0;transform:translateY(1rem);pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.adn-dock.up{opacity:1;transform:none;pointer-events:auto}

.adn-dock a{
  display:flex;align-items:center;gap:0;
  height:3.5rem;padding:0 1rem;border-radius:999px;
  text-decoration:none;overflow:hidden;white-space:nowrap;
  background:rgba(12,12,12,.82);backdrop-filter:blur(1rem);
  border:1px solid rgba(255,255,255,.11);
  transition:gap .45s cubic-bezier(.16,1,.3,1),border-color .45s ease,background .45s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.adn-dock a:hover{transform:translateY(-2px)}

.adn-dock svg{width:1.5rem;height:1.5rem;flex:none;display:block}

/* La etiqueta crece desde cero al pasar el mouse. Con max-width y no
   con display, que no se puede animar. */
.adn-dock a .lbl{
  max-width:0;opacity:0;
  font-family:var(--display);font-weight:600;font-size:.86rem;
  letter-spacing:.02em;color:#fff;
  transition:max-width .45s cubic-bezier(.16,1,.3,1),opacity .35s ease;
}
.adn-dock a:hover .lbl,
.adn-dock a:focus-visible .lbl{max-width:11.875rem;opacity:1}
.adn-dock a:hover,
.adn-dock a:focus-visible{gap:0.6875rem}

.adn-dock .wa svg{fill:#29d264}
.adn-dock .wa:hover{border-color:rgba(41,210,100,.5);background:rgba(41,210,100,.1)}

.adn-dock .cal svg{fill:none;stroke:#ffc600;stroke-width:1.8}
.adn-dock .cal:hover{border-color:rgba(255,198,0,.5);background:rgba(255,198,0,.1)}

/* En telefono no hay hover, asi que la etiqueta sobra y el boton se
   vuelve un circulo. */
@media (max-width:620px){
  .adn-dock a .lbl{display:none}
  .adn-dock a{padding:0;width:3.25rem;height:3.25rem;justify-content:center}
}


/* ══════════════════ 9 · DESPLEGABLES DE ESCRITORIO ══════════════════
   Los grupos del menu (Services, Clients, Specialized, Promos, Work)
   son elementos padre en Header EN. Divi los pinta como li con un
   ul.sub-menu adentro y les pone su propio estilo: caja blanca, raya
   azul arriba, 240px de ancho y su flecha de fuente de iconos.

   Divi pinta el fondo y el color del desplegable desde reglas con su
   clase numerada y !important. Por eso aqui van con !important las
   propiedades que Divi fija; el resto no lo necesita.

   Se abre al pasar el mouse o al llegar con el teclado (focus-within).
   header.js le pone .shut al grupo despues de un clic, para que no se
   quede abierto encima de la pagina mientras baja al destino. */

.adn-hdr .et_pb_menu.et_pb_module,
.adn-hdr .et_pb_menu_inner_container,
.adn-hdr .et_pb_menu__wrap,
.adn-hdr .et_pb_menu__menu,
.adn-hdr .et-menu-nav{overflow:visible}

.adn-hdr .et-menu>li{position:relative}
.adn-hdr nav .et-menu>li>a{position:relative}

/* --- La flecha del grupo --- */

.adn-hdr nav .et-menu>li.menu-item-has-children>a{padding-right:1.05rem !important}
.adn-hdr nav .et-menu>li.menu-item-has-children>a::after{
  content:'' !important;
  font-family:inherit !important;
  font-size:inherit !important;
  position:absolute;right:.1rem;left:auto;top:50%;
  width:.34rem;height:.34rem;
  margin-top:-.28rem;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.adn-hdr nav .et-menu>li.menu-item-has-children:hover>a,
.adn-hdr nav .et-menu>li.menu-item-has-children:focus-within>a,
.adn-hdr nav .et-menu>li.menu-item-has-children.opened>a{color:var(--white)}
.adn-hdr nav .et-menu>li.menu-item-has-children:hover>a::after,
.adn-hdr nav .et-menu>li.menu-item-has-children:focus-within>a::after,
.adn-hdr nav .et-menu>li.menu-item-has-children.opened>a::after{
  transform:translateY(.14rem) rotate(225deg);
}

/* --- La caja --- */

.adn-hdr nav .et-menu>li>ul.sub-menu{
  position:absolute !important;
  top:100% !important;left:-1.1rem !important;right:auto !important;
  z-index:60;
  margin:1rem 0 0 !important;
  width:max-content !important;min-width:13.5rem;
  padding:.55rem !important;
  list-style:none;
  background:rgba(10,10,10,.95) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:.9rem;
  box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.45) !important;
  -webkit-backdrop-filter:blur(1rem);
  backdrop-filter:blur(1rem);
  opacity:0 !important;visibility:hidden !important;
  transform:translateY(.5rem) !important;
  animation:none !important;
  transition:opacity .3s ease,
             transform .45s cubic-bezier(.16,1,.3,1),
             visibility 0s linear .45s !important;
}

/* Puente invisible entre el enlace y la caja. Sin el, al bajar el
   mouse por el hueco de 1rem la caja se cierra antes de llegar. */
.adn-hdr nav .et-menu>li>ul.sub-menu::before{
  content:'';position:absolute;left:0;right:0;
  top:-1.05rem;height:1.05rem;
}

.adn-hdr nav .et-menu>li:hover>ul.sub-menu,
.adn-hdr nav .et-menu>li:focus-within>ul.sub-menu,
.adn-hdr nav .et-menu>li.opened>ul.sub-menu{
  opacity:1 !important;visibility:visible !important;
  transform:none !important;
  transition:opacity .3s ease,
             transform .45s cubic-bezier(.16,1,.3,1),
             visibility 0s !important;
}
.adn-hdr nav .et-menu>li.shut>ul.sub-menu{
  opacity:0 !important;visibility:hidden !important;
}
/* Cerrado con clic: la flecha vuelve a apuntar abajo */
.adn-hdr nav .et-menu>li.menu-item-has-children.shut>a::after{transform:rotate(45deg)}

/* Specialized tiene once servicios. En una sola columna la caja
   bajaria media pantalla, asi que desde nueve se parte en dos. */
.adn-hdr nav .et-menu>li>ul.sub-menu:has(>li:nth-child(9)){
  display:grid !important;
  grid-template-columns:repeat(2,auto);
  column-gap:.25rem;
}

/* --- Los enlaces de adentro --- */

.adn-hdr nav .sub-menu li{
  margin:0 !important;padding:0 !important;
  width:auto !important;list-style:none;
}
.adn-hdr nav .sub-menu li::before{display:none}

.adn-hdr nav .sub-menu a{
  display:block;width:auto !important;
  padding:.6rem .85rem !important;
  border-radius:.55rem;
  font-family:var(--body);
  font-size:.84rem;font-weight:400;line-height:1.3;
  letter-spacing:0;text-transform:none;
  white-space:nowrap;
  color:rgba(255,255,255,.62) !important;
  background:transparent !important;
  opacity:1 !important;
  transition:color .25s ease,background .25s ease;
}
.adn-hdr nav .sub-menu a:hover,
.adn-hdr nav .sub-menu a:focus-visible{
  color:var(--white) !important;
  background:rgba(255,255,255,.06) !important;
}
.adn-hdr nav .sub-menu a:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}

/* "View all" lo agrega header.js como primer enlace del grupo */
.adn-hdr nav .sub-menu .mall a{color:var(--yellow) !important}


/* ══════════════════ 10 · MENU MOVIL ══════════════════
   Desde header.js v4 la lista del menu movil la arma el JS, con el
   mismo menu de WordPress, y el modulo de Divi queda escondido. Asi
   ninguna regla de Divi (su flecha, su caja blanca, sus rellenos) se
   mete en el diseno.

   La capa sigue siendo de pantalla completa, pero la lista es
   compacta: filas con una linea entre ellas, el nombre a la izquierda
   y un boton + a la derecha. Al abrir un grupo sus enlaces salen en
   dos columnas. Abajo va el boton amarillo de agendar y el pie.

   Todo cuelga de .mover.built, que pone header.js al terminar de
   armar. Si el JS fallara, se ve el menu de Divi de siempre. */

.mover{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.mover.built{
  align-content:start;
  padding-top:clamp(5.5rem,14vh,7.5rem);
  padding-bottom:2.5rem;
}
.mover.built .mnav{display:none !important}

/* Una sola columna de lectura, centrada en tabletas */
.mover.built .mlist,
.mover.built .mcta,
.mover.built .mfoot{
  width:100%;max-width:40rem;
  margin-left:auto;margin-right:auto;
}

/* --- Las filas --- */

.mrow{
  border-top:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(1rem);
  transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.mlist>.mrow:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.mover.on .mrow{
  opacity:1;transform:none;
  transition:opacity .6s ease calc(var(--r,0) * .05s + .1s),
             transform .8s cubic-bezier(.16,1,.3,1) calc(var(--r,0) * .05s + .1s);
}

.mhead{
  display:flex;align-items:center;gap:.7rem;
  width:100%;box-sizing:border-box;
  margin:0;padding:1rem 0;
  background:none;border:0;border-radius:0;
  font:inherit;text-align:left;text-decoration:none;
  color:rgba(255,255,255,.88);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* La fila directa (Contact) es la propia .mrow, con su linea arriba */
.mdirect.mhead{border-top:1px solid rgba(255,255,255,.1)}

.mname{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,6.4vw,2.1rem);
  line-height:1.05;letter-spacing:-.035em;
  transition:color .35s ease;
}

/* Cuantos enlaces trae el grupo, chiquito y al lado del nombre */
.mcount{
  align-self:flex-start;margin-top:.2rem;margin-left:-.3rem;
  font-family:var(--body);font-size:.68rem;font-weight:400;
  letter-spacing:.06em;
  color:rgba(255,255,255,.35);
}

/* El circulo de la derecha: + en los grupos, flecha en los directos */
.mico{
  position:relative;flex:none;
  margin-left:auto;
  width:2.25rem;height:2.25rem;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.75);
  transition:transform .5s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,color .35s ease,background .35s ease;
}
.mplus::before,
.mplus::after{
  content:'';position:absolute;left:50%;top:50%;
  width:.75rem;height:1.5px;
  margin:-.75px 0 0 -.375rem;
  background:currentColor;border-radius:2px;
}
.mplus::after{transform:rotate(90deg)}
.mico svg{
  width:1rem;height:1rem;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Abierto: el + gira a x y todo pasa a amarillo */
.mgrp.open .mname{color:var(--yellow)}
.mgrp.open .mplus{
  transform:rotate(135deg);
  border-color:rgba(255,198,0,.55);
  color:var(--yellow);
}

.mhead:focus-visible{outline:2px solid var(--yellow);outline-offset:.25rem}
.mhead:active .mname{color:var(--white)}
.mdirect:hover .mico,
.mdirect:active .mico{border-color:rgba(255,198,0,.55);color:var(--yellow)}

/* --- El cuerpo que se abre --- */

.mbody{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1);
}
.mgrp.open .mbody{grid-template-rows:1fr}
.mclip{min-height:0;overflow:hidden}

.mlinks{
  list-style:none;
  margin:0;padding:0 0 1.1rem;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:1.25rem;
}
.mlinks li{margin:0;padding:0;list-style:none}
.mlinks li::before{display:none}

.mlinks a{
  display:block;
  padding:.55rem 0;
  font-family:var(--body);
  font-size:.95rem;font-weight:400;line-height:1.3;
  letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.66);
  text-decoration:none;
  opacity:0;transform:translateY(.4rem);
  transition:color .25s ease,opacity .2s ease,transform .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.mgrp.open .mlinks a{
  opacity:1;transform:none;
  transition:color .25s ease,
             opacity .4s ease calc(var(--i,0) * .025s + .12s),
             transform .55s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * .025s + .12s);
}
.mlinks a:hover,
.mlinks a:active{color:var(--white)}
.mlinks a:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* "View all" ocupa las dos columnas y va en amarillo */
.mlinks .mall{grid-column:1 / -1}
.mlinks .mall a{
  padding:.15rem 0 .65rem;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);
}

/* --- El boton de agendar --- */

.mcta{
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  height:3.25rem;margin-top:1.6rem;
  border-radius:999px;
  background:var(--yellow);color:var(--black);
  font-family:var(--display);font-weight:600;font-size:.92rem;
  text-decoration:none;
  opacity:0;transform:translateY(1rem);
  transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.mover.on .mcta{
  opacity:1;transform:none;
  transition:opacity .6s ease calc(var(--r,0) * .05s + .1s),
             transform .8s cubic-bezier(.16,1,.3,1) calc(var(--r,0) * .05s + .1s);
}
.mcta:focus-visible{outline:2px solid var(--white);outline-offset:.25rem}

/* El pie, pegado a la lista y no perdido al fondo */
.mover.built .mfoot{margin-top:1.8rem}

@media (prefers-reduced-motion:reduce){
  .adn-hdr nav .et-menu>li>ul.sub-menu,
  .mrow,.mover.on .mrow,
  .mcta,.mover.on .mcta,
  .mbody,.mico,
  .mlinks a,.mgrp.open .mlinks a{transition:none !important}
}


/* ══════════════════ PANTALLAS GRANDES · TODO CRECE PAREJO ══════════════════
   Decision de Jhoger, 27/09/2026: en un monitor de 27", una TV de 50"
   o mas, el sitio se ve igual que en la laptop, solo mas grande. El
   margen nunca se ve mas estrecho.

   Hasta 1600px de ancho no pasa nada. Desde ahi la raiz crece con la
   pantalla: 16px a 1600, 25.6px a 2560, 38.4px a 3840. Como todas las
   hojas del sitio van en rem, margenes, textos, tarjetas, iconos, la
   barra, el pie y los botones fijos crecen en la misma proporcion.

   VIVE AQUI Y SOLO AQUI porque header.css es la unica hoja que carga en
   TODO el sitio. Antes estaba en seo.css mientras se convertian las
   demas paginas; se quito de alli en seo.css v16.

   Si algun dia se monta una hoja nueva, sus medidas van en rem y no en
   px, o esa pagina se quedara chica en pantallas grandes. Las reglas
   completas estan en PANTALLAS-GRANDES.md, en el proyecto. */

@media (min-width:1601px){
  html{font-size:calc(100vw / 100)}
}