roi-theme/buscar-apus/menu.php

<?php /* menu.php — clon visual del header Thrive (desktop + móvil simple) */ ?>
<style>
  /* ---- Layout base ---- */
  #thrive-header-clone{position:relative; z-index:14; background:#fff;}
  .apu-container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0px;
    margin-top: 0px;
    padding-top: 30px;
}
  .bar-container{width:1000px; margin:0 auto; padding:9px 20px; margin-top: 0px;}
  /* ---- Menú ---- */
  .apu-menu{padding:10px 0;}
  .apu-menu ul{list-style:none; margin:0; padding:0;}
    /* Centrar elementos del menú */
    #thrive-header-clone .apu-root{ justify-content:center; }
    #thrive-header-clone .apu-root>li.push-right{ margin-left:0; }
  
  .apu-root{display:flex; align-items:center; flex-wrap:wrap;}
  .apu-root>li{position:relative; padding:2px 10px; margin:0 2px;}
  .apu-root>li.push-right{margin-left:auto;} /* “Accesar” a la derecha */
  .apu-root>li>a{
    display:flex; align-items:center; gap:8px;
    font-size:16px; font-weight:600; line-height:2;
    color:#373737; text-decoration:none; padding:6px 10px;
  }
  /*.apu-root>li>a:hover{color:#39a3d1;}*/
  /* caret SVG del mismo tamaño/margen que Thrive */
  .apu-caret{width:1em; height:1em; flex:0 0 auto; fill:currentColor;}

  /* ---- Submenús (idénticos a Thrive) ---- */
  .apu-sub{
    position:absolute; top:100%; left:0; display:none; visibility:visible;
    background:#fff; border:1px solid #b4b4b4; border-radius:3px;
    box-shadow:0 0 9px 1px rgba(0,0,0,.15);
    z-index:2000; padding:0; white-space:nowrap;
    max-height:70vh; overflow:auto;
  }
  .apu-sub.right{left:auto; right:0;}              /* para “Accesar” */
  .has-sub:hover>.apu-sub{display:block;}          /* abrir por hover en desktop */
  .apu-sub li{padding:0;}
  .apu-sub a{
    display:block; padding:2px 15px; line-height:2;
    color:#666; text-decoration:none;
  }
  .apu-sub a:hover{color:#363636; background:transparent;}

  /* ---- CTA naranja bajo el menú (look Thrive) ---- */
  .apu-cta-wrap{background:#fff; padding:0px;}
.apu-cta {
    display: block;
    text-align: center;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    padding: 6px;
    background-image: linear-gradient(#f5a000,#f5a000);
    box-shadow: 0 8px 12px rgba(0,0,0,.25);
    font-family: arial;
    font-size: 18px;
    min-height: 40px;
}

/* Icono blanco en la CTA */
.apu-cta { color:#fff !important; }
.apu-cta .tcb-icon{
  width:1em;
  height:1em;
  vertical-align:middle;
  margin-right:.4em;
  fill:currentColor;
  stroke:currentColor;
}

/* Menú ajustado al contenido (desktop) */
@media (min-width:768px){
  #thrive-header-clone .apu-container{
    max-width:none;
    width:max-content;
  }
}

  /* ---- Móvil: hamburguesa simple ---- */
  .apu-burger{display:none; cursor:pointer; font-size:33px; line-height:1;}
  @media (max-width:1023px){
    .apu-container{padding-left:40px; padding-right:30px;}
  }
  @media (max-width:767px){
    .apu-container{padding-left:20px; padding-right:10px;}
    .apu-burger{display:block;}
    .apu-root{display:none; width:100%;}
    .apu-root.open{display:block;}
    .apu-root>li{display:block; padding:0; margin:0;}
    .apu-root>li>a{padding:12px 15px;}
    .has-sub>.apu-sub{position:static; box-shadow:none; border:0; max-height:none;}
    .has-sub:hover>.apu-sub{display:block;}
    .apu-sub a{padding-left:30px;}
  }
.apu-cta svg.tcb-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: .4em;
  margin-top: -2px;
}
  
</style>

<style>
  /* ====== PATCH: compactar alto/ancho del menú ====== */
  :root{
    --apu-menu-fz: 15px;     /* antes 16px */
    --apu-menu-xpad: 6px;    /* padding horizontal del <a> (antes 10px) */
    --apu-menu-ypad: 4px;    /* padding vertical del <a> (antes 6px) */
    --apu-menu-gap: 6px;     /* espacio entre texto y caret (antes 8px) */
  }

  /* Menos “aire” arriba/abajo del bloque menú */
  #thrive-header-clone .apu-menu{ padding: 1px 0; }        /* antes 10px 0 */

  /* Top-level items más compactos */
  #thrive-header-clone .apu-root>li{
    padding: 0 1.5px;
    margin: 0 0px;
  }
  
#thrive-header-clone .apu-root>li>a {
    padding: var(--apu-menu-ypad) var(--apu-menu-xpad);
    line-height: 1.2;
    font-size: 16px;
    gap: var(--apu-menu-gap);
    white-space: nowrap;
    font-family: arial;
}

  /* Caret un pelín más pequeño */
  #thrive-header-clone .apu-caret{ width: 1em; height: 1em; }

  /* Ajustes finos cuando falta ancho en “desktop” estrecho */
  @media (max-width:1280px){
    #thrive-header-clone .apu-root>li>a{ font-size: 14.5px; }
  }
  @media (max-width:1120px){
    #thrive-header-clone .apu-root>li>a{ font-size: 14px; }
  }
</style>


<header id="thrive-header-clone">
  <div class="apu-container">
    <div class="apu-menu">
      <div class="apu-burger" onclick="this.nextElementSibling.classList.toggle('open')">☰</div>
      <ul class="apu-root">
        <li><a href="https://analisisdepreciosunitarios.com/">Home</a></li>
        <li><a href="/blog-temas-del-curso-analisis-de-precios-unitarios">Blog</a></li>
        
        <li class="has-sub">
          <a href="/buscar-apus">
            Buscador General de Precios Unitarios
            <!-- caret SVG igual al de Thrive -->
            <svg class="apu-caret" viewBox="0 0 320 512" aria-hidden="true">
              <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/>
            </svg>
          </a>
          <ul class="apu-sub">
            <li><a href="/buscar-apus-tabulador-de-precios-unitarios">Análisis de Precios Unitarios</a></li>
            <li><a href="/buscar-apus-ciudad-de-mexico-cdmx">Ciudad de México (CDMX)</a></li>
            <li><a href="/buscar-apus-petroleos-mexicanos-pemex">Petróleos Mexicanos (PEMEX)</a></li>
            <li><a href="/buscar-apus-precios-unitarios-sct">Secretaría de Comunicaciones y Transportes (SCT)</a></li>
            <li><a href="/buscar-apus-comision-federal-de-electricidad-cfe">Comisión Federal de Electricidad (CFE)</a></li>
            <li><a href="/buscar-apus-instituto-mexicano-del-seguro-social-imss">Instituto Mexicano del Seguro Social (IMSS)</a></li>
            <li><a href="/buscar-apus-comision-nacional-del-agua-conagua">Comisión Nacional del Agua (CONAGUA)</a></li>
            <li><a href="/buscar-apus-secretaria-de-educacion-publica-sep">Secretaría de Educación Pública (SEP)</a></li>
            <li><a href="/buscar-apus-trabajos-de-mantenimiento-industrial">Trabajos de mantenimiento industrial</a></li>
            <li><a href="/buscar-apus-acabados-instalaciones-electricas-hidraulicas-sanitarias-gas">Acabados, instalaciones eléctricas, hidráulicas, sanitarias y gas</a></li>
            <li><a href="/buscar-apus-aire-acondicionado">Aire acondicionado</a></li>
            <li><a href="/buscar-apus-casa-habitacion">Casa habitación</a></li>
            <li><a href="/buscar-apus-cimentaciones">Cimentaciones</a></li>
            <li><a href="/buscar-apus-construccion">Construcción</a></li>
            <li><a href="/buscar-apus-construccion-de-obras-de-edificacion">Construcción de obras de edificación</a></li>
            <li><a href="/buscar-apus-construcciones-residenciales">Construcciones residenciales</a></li>
            <li><a href="/buscar-apus-obra-civil">Obra civil</a></li>
            <li><a href="/buscar-apus-obra-de-albanileria">Obra de albañilería</a></li>
          </ul>
        </li>

        <li><a href="/buscar-apus-auxiliares-o-basicos">Auxiliares</a></li>
        <li><a href="/buscar-apus-costos-horarios-maquinaria-y-equipo-de-construccion">Costos Horarios</a></li>
        <li><a href="/buscar-apus-tablas-base-de-rendimientos-de-mano-de-obra">Rendimientos</a></li>

        <li class="has-sub">
          <a href="#">
            Calculadoras
            <svg class="apu-caret" viewBox="0 0 320 512" aria-hidden="true"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
          </a>
          <ul class="apu-sub">
            <li><a href="/calculadora-de-dosificacion-de-concreto">Dosificación de concreto</a></li>
          </ul>
        </li>

        <li class="has-sub push-right">
          <a href="#">
            Accesar
            <svg class="apu-caret" viewBox="0 0 320 512" aria-hidden="true"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
          </a>
          <ul class="apu-sub right">
            <li><a href="/wp-login.php">Iniciar sesión</a></li>
            <li><a href="/wp-admin/profile.php">Editar mis datos</a></li>
            <li><a href="/wp-login.php?action=lostpassword">Recuperar contraseña</a></li>
            <li><a href="https://www.facebook.com/groups/analisis.de.precios.unitarios.y.opus.pro" target="_blank" rel="noopener">Grupo privado de Facebook</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <!-- Franja CTA -->
<div class="apu-cta-wrap">
  <div class="bar-container">
    <a class="apu-cta" href="/suscripcion-vip">
      <svg class="tcb-icon" viewBox="0 0 448 512" data-id="icon-unlock-keyhole-solid" data-name="">
        <path d="M224 64c-44.2 0-80 35.8-80 80l0 48 240 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0 0-48C80 64.5 144.5 0 224 0c57.5 0 107 33.7 130.1 82.3c7.6 16 .8 35.1-15.2 42.6s-35.1 .8-42.6-15.2C283.4 82.6 255.9 64 224 64zm32 320c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0z"></path>
      </svg>
      Haz clic aquí conviértete en VIP y consulta más de 200,000 análisis. Sin restricciones.
    </a>
  </div>
</div>

</header>