.elementor-3855 .elementor-element.elementor-element-39c1323{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3855 .elementor-element.elementor-element-37174ff{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3855 .elementor-element.elementor-element-5413227{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3855 .elementor-element.elementor-element-b22a2e8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3855 .elementor-element.elementor-element-909c99d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-e2094b5 */<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CCTP – Header</title>

<style>
  /* ===== Base / variables ===== */
  .cctp{
    --bg:#0f1a2b;
    --ink:#000000 !important; /* ← Texto negro */
    --brand:#00d1b2;
    --radius:18px;
  }
  .cctp, .cctp *{ box-sizing:border-box }
  .cctp{ font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }

  /* ===== Header ===== */
  .cctp .minihead {
    position: sticky; top: 0; z-index: 50;
    background: #f7f7f7;
    border-bottom: 1px solid rgba(0,0,0,.08);
    backdrop-filter: blur(6px);
  }
  .cctp .minihead .bar {
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | nav | burger */
    align-items: center;
    gap: 18px;
    padding: 12px 20px;
    max-width: 1200px; margin: auto;
  }
  .cctp .minihead .brand{display:flex; align-items:center; gap:12px}
  .cctp .minihead .brand img{height:84px; width:auto}

  .cctp .minihead nav { display:flex; justify-content:center; gap:14px; }
  .cctp .minihead nav a { 
    padding:8px 12px; 
    border-radius:12px; 
    color:var(--ink); /* ← negro */
    font-weight:600; 
    text-decoration:none; 
  }
  .cctp .minihead nav a:not(.btn):hover { background:rgba(0,0,0,.08); }

  .cctp .btn{
    display:inline-flex; 
    align-items:center; 
    gap:.6rem; 
    padding:14px 18px; 
    border-radius:14px; 
    font-weight:700; 
    transition:.2s; 
    text-decoration:none;
  }
  .cctp .btn-primary{
    background:var(--brand); 
    color:#fff; /* botón blanco sobre verde */
    box-shadow:0 10px 30px rgba(0,209,178,.25)
  }
  .cctp .btn-primary:hover{transform:none}

  /* ===== Burger ===== */
  .cctp .burger{
    display:none;
    width:44px; height:44px; border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    background:#ffffff;
    justify-content:center; align-items:center;
    cursor:pointer;
  }
  .cctp .burger:focus{outline:2px solid rgba(0,0,0,.25); outline-offset:2px}
  .cctp .burger i{
    position:relative; width:20px; height:2px; background:#000; display:block; /* líneas negras */
  }
  .cctp .burger i::before,
  .cctp .burger i::after{
    content:""; position:absolute; left:0; width:20px; height:2px; background:#000; transition:.2s;
  }
  .cctp .burger i::before{top:-6px}
  .cctp .burger i::after{top:6px}
  .cctp .burger[aria-expanded="true"] i{background:transparent}
  .cctp .burger[aria-expanded="true"] i::before{top:0; transform:rotate(45deg)}
  .cctp .burger[aria-expanded="true"] i::after{top:0; transform:rotate(-45deg)}

  /* ===== Overlay FULL al abrir menú (móvil) ===== */
  @media (max-width:860px){
    .cctp .minihead .brand img{height:64px}
    .cctp .minihead nav{ display:none; }     /* oculto por defecto en móvil */
    .cctp .burger{ display:inline-flex; }    /* mostrar burger */

    .cctp .minihead nav.open{
      position: fixed;
      left: 0; top: 0;
      width: 100vw;
      height: 100dvh;
      min-height: 100vh;
      z-index: 2147483647;
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 16px;
      padding: 24px 20px;
      background: rgba(255,255,255,0.95); /* fondo blanco translúcido */
      backdrop-filter: blur(4px);
    }
    .cctp .minihead nav.open a,
    .cctp .minihead nav.open .btn{
      display:block;
      width:min(420px, 90%);
      margin:0 auto;
      box-sizing:border-box;
      padding:16px 14px !important;
      border-radius:14px;
      text-align:center;
      color:#000; /* negro en menú abierto */
    }
    .cctp .minihead nav.open a:not(.btn-primary){
      background:rgba(0,0,0,.06);
    }
    .cctp .minihead nav.open .btn-primary{
      background:var(--brand);
      color:#fff;
      box-shadow:0 10px 30px rgba(0,209,178,.25);
    }
    .cctp .burger[aria-expanded="true"]{
      position:fixed; top:14px; right:14px; z-index:2147483647;
    }
    html.menu-open, body.menu-open{ overflow:hidden; height:100dvh; }
  }

  /* Evitar scroll horizontal */
  html, body, .cctp{ overflow-x:hidden; }
</style>
</head>
<body>
<div class="cctp">

  <!-- ===== Header/Menu ===== -->
  <header class="minihead" id="site-head">
    <div class="bar">
      <div class="brand">
        <img src="https://cctp.cl/wp-content/uploads/2025/08/Camara.png" alt="CCTP">
      </div>

      <nav id="mainnav">
        <a href="#inicio">Inicio</a>
        <a href="/nosotros">Nosotros</a>
        <a href="/noticias">Noticias</a>
        <a href="/contacto">Contacto</a>
        <a class="btn btn-primary" href="/unete">Únete</a>
      </nav>

      <button class="burger" id="burger" aria-label="Abrir menú" aria-controls="mainnav" aria-expanded="false">
        <i></i>
      </button>
    </div>
  </header>

</div>

<script>
  // Toggle hamburger + bloqueo de scroll
  (function(){
    const burger = document.getElementById('burger');
    const nav = document.getElementById('mainnav');
    if(!burger || !nav) return;

    burger.addEventListener('click', ()=>{
      const open = burger.getAttribute('aria-expanded') === 'true';
      burger.setAttribute('aria-expanded', String(!open));
      nav.classList.toggle('open', !open);
      document.documentElement.classList.toggle('menu-open', !open);
      document.body.classList.toggle('menu-open', !open);
    });

    // Cerrar si pasa a desktop
    window.addEventListener('resize', ()=>{
      if (window.innerWidth > 860 && nav.classList.contains('open')){
        nav.classList.remove('open');
        burger.setAttribute('aria-expanded','false');
        document.documentElement.classList.remove('menu-open');
        document.body.classList.remove('menu-open');
      }
    });
  })();
</script>
</body>
</html>/* End custom CSS */