/*
Theme Name: Meytam Stream
Theme URI: https://meytam.com.pe/Meytam-Stream
Author: Meytam
Author URI: https://meytam.com.pe
Description: Tema con diseño de maqueta y SMTP por PHPMailer
Version: 3.0
Text Domain: meytam-stream
*/

:root { --green:#27ae60; --red:#e74c3c; --light:#f8f8f8; --text:#333; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--light);display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.site-content{flex:1}

/* ===== HEADER base (por si faltaba) ===== */
.site-header{
  background: linear-gradient(90deg, #e74c3c, #27ae60);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  color:#fff;
  position: relative;
  z-index: 1000;
}
.header-inner{
  max-width:1200px; 
  margin:0 auto;
  padding:.6rem 1rem; display:flex; 
  align-items:center; gap:1rem;
  min-height:64px;
}

.site-branding img{
    height:56px;
    width:auto}
    
.main-nav{ margin-left:auto; } /* en desktop, men��� a la derecha */
.primary-menu{ display:flex; gap:1.2rem; align-items:center; margin:0; padding:0; list-style:none; }
.primary-menu a{ color:#000; font-weight:600; text-decoration:none; padding:.4rem .2rem; transition:color .2s; }
.primary-menu a:hover{ color:#f1c40f; }

/* Bot���n hamburguesa */
.nav-toggle{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; margin-left:auto; }
.nav-toggle .bar{ display:block; width:24px; height:2px; background:#000; margin:5px 0; transition:transform .25s, opacity .25s; }
.nav-toggle.is-open .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2){ opacity:0; }
.nav-toggle.is-open .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===== M���VIL: off-canvas desde la derecha ===== */
@media (max-width: 768px){
  .nav-toggle{ display:block; }        /* mostrar hamburguesa en m���vil */
  .main-nav{ position: static; }

  /* Men��� como panel lateral derecho */
  #primary-menu{
    display:block; margin:0; padding:0; list-style:none;
    position: fixed;
    top: 64px;               /* altura del header */
    right: 0;
    width: 80vw;
    max-width: 360px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    background: #fff;
    box-shadow: -6px 0 18px rgba(0,0,0,.25);
    transform: translateX(100%);   /* oculto a la derecha */
    transition: transform .3s ease;
    z-index: 1200;
  }
  #primary-menu li{ border-bottom: 1px solid rgba(0,0,0,.06); }
  #primary-menu a{
    display:block;
    padding: .95rem 1rem;
    color: #111;
  }

  /* Abierto */
  body.mobile-open #primary-menu{
    transform: translateX(0);
  }

  /* Backdrop oscurecido al abrir */
  body.mobile-open::after{
    content:"";
    position: fixed; inset:0;
    background: rgba(0,0,0,.35);
    z-index: 1100;
  }
}

/* Footer base */
.site-footer{background:linear-gradient(90deg,var(--red),var(--green));color:#fff;text-align:center;padding:1rem 1rem 0}