/*
Theme Name: Monitor SN Elementor Fixed
Theme URI: https://monitorsn.com/
Author: Adapted by ChatGPT
Description: Theme minimalista y compatible con Elementor (limpio e híbrido)
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monitor-sn
*/


:root{
  --msn-header-h: 72px;            /* valor de respaldo */
  --msn-overlay-gap: 16px;         /* margen alrededor del panel rojo */
  --msn-overlay-radius: 14px;
  --msn-red: rgba(190, 21, 34, 0.95);              /* rojo de la referencia */
}

*{box-sizing:border-box;margin:0;padding:0}
 html,body{height:100%;font-family:sora;background:#fff;overflow:hidden}
 
/* Header fijo arriba (visible todo el tiempo) */
.msn-header{
  position: sticky;
  top: 0;
  z-index: 1001;                   /* por encima del panel rojo */
}

.site-branding {
  display: flex;
  align-items: center;
}

.site-branding img {
  max-height: 50px;
  height: auto;
  width: 100%;
}

/* ====== Botón hamburguesa -> X ====== */
#msn-burger .msn-icon{
  display:inline-flex; flex-direction:column; gap:6px;
}
#msn-burger .msn-icon span{
  width:28px; height:2px; background:#333; display:block;
  transition: transform .25s ease, opacity .2s ease;
}
#msn-burger.open .msn-icon span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
#msn-burger.open .msn-icon span:nth-child(2){
  opacity:0;
}
#msn-burger.open .msn-icon span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* ====== OVERLAY (debajo del header) ====== */
.msn-overlay{
  position: fixed; inset: 0;
  z-index: 1000;                   /* debajo del header */
  pointer-events: none;            /* cerrado: no capta clics */
}
.msn-overlay.is-open{ pointer-events:auto; }

/* Panel rojo con bordes redondeados y márgenes */
.msn-overlay-panel{
  position: absolute;
  left: var(--msn-overlay-gap);
  right: var(--msn-overlay-gap);
  top: calc(var(--msn-header-h) + var(--msn-overlay-gap));
  height: calc(100vh - var(--msn-header-h) - (var(--msn-overlay-gap) * 2));
  background: var(--msn-red);
  color: #fff;
  border-radius: var(--msn-overlay-radius);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  display: none;                   /* oculto inicialmente */
}
.msn-overlay.is-open .msn-overlay-panel{
  display:block; opacity:1; transform: translateY(0);
}

/* Menú grande alineado a la izquierda */
.msn-menu ul{ margin:0; padding:0; }
.msn-menu li{ list-style:none; }
.msn-menu a{
  display:block;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  margin: .25rem 0;
  font-size: clamp(2rem, 5vw, 4.2rem); /* grande como el mockup */
}
.msn-menu a:hover{ opacity:.9; }

/* Footer del overlay */
.msn-privacy{ color:#fff; }
.msn-privacy:hover,
.msn-social a:hover{ opacity:.85; }
.msn-social a{ color:#fff; text-decoration:none; }

.border-bottom {
    border-bottom: none !important;
}

@media (min-width: 1400px) {
  .msn-header .container-xxl {
    max-width: 100% !important;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
  .msn-overlay-panel .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 85%;
    }
}


@media (max-width: 480px) {
.msn-overlay-panel {
    height: 85%;
    padding: 4rem 2rem;
    color: #fff;
    width: 90%;
}
	
	.site-branding  {    
    width: 95%;
	}
}


/* Overlay rojo
.msn-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #c8102e; 
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  overflow-y: auto;
}
 */
/* Cuando está activo */
.msn-overlay.active {
  display: block;
  opacity: 1;
}

/* Panel interior */
.msn-overlay-panel {
  height: 85%;
  padding: 4rem 2rem;
  color: #fff;
}

/* Menú principal */
.msn-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Estado inicial */
.msn-menu li {
  opacity: 0;
  transform: translateY(20px);
}

/* Cuando el overlay está activo, animar */
.msn-overlay.active .msn-menu li {
  animation: fadeUp 0.6s ease forwards;
}

/* Delays para cada item */
.msn-overlay.active .msn-menu li:nth-child(1) { animation-delay: 0.2s; }
.msn-overlay.active .msn-menu li:nth-child(2) { animation-delay: 0.4s; }
.msn-overlay.active .msn-menu li:nth-child(3) { animation-delay: 0.6s; }
.msn-overlay.active .msn-menu li:nth-child(4) { animation-delay: 0.8s; }
.msn-overlay.active .msn-menu li:nth-child(5) { animation-delay: 1s; }

.msn-menu li:nth-child(1) { animation-delay: 0.2s; }
.msn-menu li:nth-child(2) { animation-delay: 0.4s; }
.msn-menu li:nth-child(3) { animation-delay: 0.6s; }
.msn-menu li:nth-child(4) { animation-delay: 0.8s; }
.msn-menu li:nth-child(5) { animation-delay: 1s; }

.msn-menu a {
  font-size: 60px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.msn-menu a:hover {
  color: #000;
}

/* Footer dentro del overlay */
.msn-privacy {
  color: #fff;
}

.msn-social a {
  color: #fff;
  text-decoration: none;
}

/* Animación */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.justify-content-center {
    justify-content: center !important;
}

/* ===== MOBILE HEADER FIX ===== */
.desktop-only {
  display: inline-block;	
    
}
.mobile-only {
  display: none;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .nav-buttons {
    display: none !important; 
  }
	
	.msn-menu a {
  font-size: 39px;
	}
	.desktop-only{
	font-size: 11px;
    text-align: left;
    width: 100%;    
    text-wrap-mode: nowrap;
	}
	
  .mobile-only {
    display: block; /* se muestra en mobile */
    margin-top: 2rem;
    text-align: center;
  }
  
  /* Botón dentro del overlay estilizado */
  .msn-overlay .book-btn {
    display: inline-block;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
    border: 2px solid #fff;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s;
  }
  .msn-overlay .book-btn:hover {
    background: rgba(255,255,255,0.1);
  }
}

@media (max-width: 768px) {
  /* Logo más pequeño */
  .navbar-brand img {
    max-height: 36px; /* antes estaba más grande */
    height: auto;
  }

  /* Header compacto */
  .navbar {
    padding: 0.5rem 1rem; /* menos padding para dar aire */
    align-items: center;
  }

  /* Botón hamburguesa/X más abajo y alineado */
  .navbar-toggler {
    margin-top: 4px; /* baja un poco el ícono */
  }

  /* Botón "Book Strategic Advice" */
  .book-btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    white-space: nowrap; /* evita salto de línea */
  }

  /* Overlay alto corregido */
  .msn-overlay {
    height: 100vh; /* forzamos a que sea igual a viewport */
    min-height: 100vh;
  }
}


  /* Contenedor visible (viewport) */
  .viewport {
    width:100%;
    height:100vh;
    overflow:hidden;
    position:relative;
  }

  /* Track que se desplaza (flex) */
  .slider-track{
    display:flex;
    height:100%;
    /* aquí aplicamos la transición al track */
    transition: transform 0.6s cubic-bezier(.22,.9,.34,1);
    will-change: transform;
  }

  /* Cada slide ocupa 100vw (ancho del viewport) para que 1vw = 1 slide) */
  .slide{
    min-width:100vw;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:40px;
  }

  

  .slide h1{  margin-bottom:12px; }
  .slide p{  opacity:.85 }

  /* Botones inferiores (estilo redondos) */
  .nav-buttons{
    /*position:fixed;*/
   /* right:28%;*/
    bottom:28px;
    display:flex;
    gap:14px;
    z-index:50;
  }
  .nav-buttons button{
    width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
    background:#f4d1d1;color:#222;font-size:20px;box-shadow:0 6px 18px rgba(0,0,0,0.08);
  }

  /* Indicador (opcional) */
  .counter{
    position:fixed; left:28px; bottom:34px; color:#666; font-weight:600; z-index:50;
  }

  /* Responsive tweaks */
  @media (max-width:600px){
    .slide h1{ font-size:28px }
    /*.nav-buttons{ right:18px; bottom:18px }*/
	  
	/*.nav-buttons  {
    right: 4% !important;
    bottom: 13px !important;
	}*/
  }


@media (min-width:600px){
    .slide h1{ font-size:28px }
    /*.nav-buttons{ right:18px; bottom:18px }*/
	  
/*	.nav-buttons  {
        right: 21% ;
        bottom: 20px ;
}*/

 .nav-buttons2 {
    right: 28% !important;
    bottom: 28px !important;
  }
  
  .msn-overlay-panel {
    backdrop-filter: blur(15px) !important;
    opacity: 0.9 !important;
  }
  
  #msn-overlay {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px); /* empieza levemente abajo */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

#msn-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* en posición normal */
}

#msn-overlay.is-closing {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px); /* se va hacia arriba */
}


	/* Animaciones */
/*.anim-fall { animation: fallDown 0.8s cubic-bezier(.22,.9,.34,1) both; }*/
@keyframes fallDown {
  from {  transform: translateY(-120px); }
  to   {  transform: translateY(0); }
}


.anim-zoom { animation: zoomIn 0.8s cubic-bezier(.22,.9,.34,1) both; }
@keyframes zoomIn {
  from { transform: scale(.88); }
  to   { transform: scale(1); }
}

.anim-slideup { animation: slideUp 0.7s cubic-bezier(.22,.9,.34,1) both; }
@keyframes slideUp {
  from {  transform: translateY(60px); }
  to   { transform: translateY(0); }
}

.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }
.delay-600 { animation-delay: 0.6s; }
.delay-800 { animation-delay: 0.8s; }	

/* anim targets */
.msn-anim-target { will-change: transform, opacity; }

/* delays si quieres controlarlos por clase */
.delay-200 .msn-anim-target, .msn-anim-target.delay-200 { animation-delay: .2s; }
.delay-400 .msn-anim-target, .msn-anim-target.delay-400 { animation-delay: .4s; }
.delay-600 .msn-anim-target, .msn-anim-target.delay-600 { animation-delay: .6s; }

/* Animaciones: aplicadas al elemento que reciba la clase anim-* */
/*.msn-anim-target.anim-fall {
  animation: fallDown 0.8s cubic-bezier(.22,.9,.34,1) both;
}
@keyframes fallDown {
  from {  transform: translateY(-120px); }
  to   {  transform: translateY(0); }
}*/

.msn-anim-target.anim-fade {
  animation: fadeInQuick 0.6s ease both;
}

.msn-anim-target.anim-zoom {
  animation: zoomIn 0.8s cubic-bezier(.22,.9,.34,1) both;
}
@keyframes zoomIn {
  from {  transform: scale(.88); }
  to   {  transform: scale(1); }
}

.msn-anim-target.anim-slideup {
  animation: slideUp 0.7s cubic-bezier(.22,.9,.34,1) both;
}
@keyframes slideUp {
  from {  transform: translateY(60px); }
  to   {  transform: translateY(0); }
}

/* Ejemplo slide-left/right si los quieres también */
.msn-anim-target.anim-left {
  animation: fromLeft 0.7s cubic-bezier(.22,.9,.34,1) both;
}
@keyframes fromLeft {
  from {  transform: translateX(-80px); }
  to   {  transform: translateX(0); }
}
.msn-anim-target.anim-right {
  animation: fromRight 0.7s cubic-bezier(.22,.9,.34,1) both;
}
@keyframes fromRight {
  from {  transform: translateX(80px); }
  to   {  transform: translateX(0); }
}



/*******************************NUEVOS CSS********************************************/
/* contenedor de diseño base 1920x900 */
.viewport-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden; /* quita cualquier scroll */
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

/* marco de referencia con tamaño fijo de diseño */
.design-frame {
  width: 1920px !important;
  height: 900px !important;
  position: relative !important;
  transform-origin: top left !important;
  /* escala para que todo quepa sin scroll:
     toma la menor razón entre ancho y alto de la ventana */
  transform: scale(calc(min(100vw / 1920, 100vh / 900) * 0.80)) !important;
  /* centra el marco dentro del viewport */
  margin: 0 auto;
}

/* evita que el body genere scroll por tema o por barras móviles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ejemplos de posicionamiento interno */
.left-panel, .center-panel, .right-panel {
  position: absolute !important;
  box-sizing: border-box !important;
}

/* posiciones aproximadas según imagen */
.left-panel {
  left: 24px !important;
  top: 24px !important;
  width: 320px !important; /* ajusta según diseño */
}
.right-panel {
  right: 24px !important;
  top: 24px !important;
  width: 320px !important;
}
.center-panel {
  left: 420px !important;
  right: 420px !important;
  top: 50px !important;
  height: 760px !important;
  display:flex;
  flex-direction:column !important;
  align-items:center !important;
}

/* caja grande con gradiente (ej. 50+ rojo) */
.stat-box {
  width: 320px;
  height: 320px;
  border-radius:10px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* gradientes de ejemplo */
.stat-red { background: linear-gradient(#f36a6a,#b71b1b); color: #fff; }
.stat-orange { background: linear-gradient(#f4b183,#f09d4a); color:#fff; }
.stat-blue { background: linear-gradient(#b3e5fc,#0aa5e6); color:#fff; }
.stat-indigo { background: linear-gradient(#7986cb,#4756a3); color:#fff; }

/* botón estilo */
.playbook-btn {
  display:inline-block;
  padding:18px 32px;
  border-radius:36px;
  background:#c21b28;
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

/* flechas/paginación */
.pager {
  position:absolute;
  right: 380px;
  bottom: 60px;
}

/* persona en escala de grises y posicion absolute */
.hero-person {
  position:absolute;
  left: 60px;
  bottom: 40px;
  width: 420px; /* usar la imagen original en al menos 2x para calidad */
  filter:grayscale(1);
}

/* tipografías responsivas internas si quieres evitar blur */
.design-frame h1 { font-size: 84px; line-height:1; margin:0; }
.design-frame p { font-size:18px; }

.left-panel img,
.right-panel img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 10px !important;
}

/* opcional: evita selección accidental en botones en touchscreen */
.playbook-btn, .pager { -webkit-user-select:none; user-select:none; }