.elementor-503 .elementor-element.elementor-element-3400df68{--display:flex;--min-height:10vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--align-items:center;--gap:5% 5%;--row-gap:5%;--column-gap:5%;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#000000;--border-color:#000000;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-503 .elementor-element.elementor-element-3400df68:not(.elementor-motion-effects-element-type-background), .elementor-503 .elementor-element.elementor-element-3400df68 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-503 .elementor-element.elementor-element-3b7b9f0b{width:var( --container-widget-width, 31% );max-width:31%;margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;--container-widget-width:31%;--container-widget-flex-grow:0;text-align:center;}.elementor-503 .elementor-element.elementor-element-3b7b9f0b.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-503 .elementor-element.elementor-element-3b7b9f0b img{width:100%;max-width:100%;height:70px;opacity:1;transition-duration:1.5s;border-style:none;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-menu-toggle{margin:0 auto;background-color:rgba(255, 255, 255, 0);border-width:0px;border-radius:0px;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main .elementor-item{color:#6B7280;fill:#6B7280;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main .elementor-item:hover,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main .elementor-item:focus{color:#000000;fill:#000000;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#000000;}.elementor-503 .elementor-element.elementor-element-5c898edd{--e-nav-menu-horizontal-menu-item-margin:calc( 25px / 2 );--nav-menu-icon-size:15px;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:25px;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a, .elementor-503 .elementor-element.elementor-element-5c898edd .elementor-menu-toggle{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown{background-color:#F2EFEC00;border-style:none;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a:hover,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a:focus,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a.highlighted,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-menu-toggle:hover,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-menu-toggle:focus{color:#000000;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a:hover,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a:focus,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a.highlighted{background-color:#F2EFEC;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a.elementor-item-active{color:#000000;background-color:#F2EFEC;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown .elementor-item, .elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown li:not(:last-child){border-style:none;border-bottom-width:0px;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:-7px !important;}.elementor-503 .elementor-element.elementor-element-5c898edd div.elementor-menu-toggle{color:var( --e-global-color-secondary );}.elementor-503 .elementor-element.elementor-element-5c898edd div.elementor-menu-toggle svg{fill:var( --e-global-color-secondary );}.elementor-503 .elementor-element.elementor-element-5c898edd div.elementor-menu-toggle:hover, .elementor-503 .elementor-element.elementor-element-5c898edd div.elementor-menu-toggle:focus{color:#ACA298;}.elementor-503 .elementor-element.elementor-element-5c898edd div.elementor-menu-toggle:hover svg, .elementor-503 .elementor-element.elementor-element-5c898edd div.elementor-menu-toggle:focus svg{fill:#ACA298;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown .elementor-item, .elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown a{padding-top:20px;padding-bottom:20px;}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:29px !important;}}@media(max-width:767px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-503 .elementor-element.elementor-element-3b7b9f0b{width:var( --container-widget-width, 40% );max-width:40%;--container-widget-width:40%;--container-widget-flex-grow:0;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown .elementor-item, .elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-503 .elementor-element.elementor-element-5c898edd .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:16px !important;}}/* Start custom CSS for container, class: .elementor-element-3400df68 */<!-- CABECERA MODERNA -->
<header class="header">
  <div class="container">
    <div class="logo">
      <img src="https://tusitio.com/wp-content/uploads/logo.png" alt="Logo Hole Design">
    </div>

    <div class="menu-toggle" id="mobile-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>

    <nav class="nav" id="navbar">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/proyectos">Proyectos</a></li>
        <li><a href="/sobre-mi">Sobre mí</a></li>
        <li><a href="/contacto">Contacto</a></li>
      </ul>
    </nav>
  </div>
</header>


/* ======== ESTILOS DE CABECERA ======== */
.header {
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 48px;
  width: auto;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav a:hover {
  color: #888;
}

/* ======== MENÚ HAMBURGUESA ======== */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 6px;
}

.bar {
  height: 3px;
  width: 25px;
  background-color: #1a1a1a;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .nav {
    position: absolute;
    top: 70px;
    right: 0;
    background: #fff;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .nav.open {
    max-height: 300px;
  }

  .nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 0;
  }
}

/* Animación de barras al abrir */
.menu-toggle.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}



// ======== FUNCIONALIDAD DEL MENÚ ========
const menu = document.getElementById('mobile-menu');
const navbar = document.getElementById('navbar');

menu.addEventListener('click', () =&gt; {
  menu.classList.toggle('open');
  navbar.classList.toggle('open');
});/* End custom CSS */