/* Este subdominio es exclusivo del portal — el header propio de Blocksy
   (id="header" class="ct-header") se oculta en cualquier página que use
   nuestro shortcode, para que no compita por el mismo espacio. */
#header.ct-header{ display:none !important; }

/* Header sólido en el flujo normal de la página (no position:fixed).
   Antes flotaba transparente sobre el hero, pero un contenedor de
   Stackable con transform rompe el comportamiento de "fixed" en varios
   navegadores/temas — así queda simple y siempre se ve bien, sin
   depender de la estructura de bloques por debajo. */
.site-header{
	position:relative; z-index:999;
	display:flex; align-items:center; justify-content:space-between;
	padding:12px clamp(20px,5vw,64px);
	background:var(--sp-bg-light);
	border-bottom:1px solid rgba(16,21,28,.08);
	box-shadow:0 2px 10px rgba(16,21,28,.05);
	font-family:'Inter', sans-serif;
}

.site-header .logo{
	font-family:'Fraunces', serif; font-size:1.4rem; font-weight:500;
	color:var(--sp-logo-green) !important; white-space:nowrap;
	text-decoration:none;
	display:inline-flex; align-items:center; gap:10px;
}
.site-header .logo-icon{ width:33px; height:auto; flex-shrink:0; }
.site-header .logo span{ color:var(--sp-logo-red) !important; }
.site-header .main-nav{ display:flex; align-items:center; gap:34px; }
.site-header .main-nav a{ font-size:.98rem; color:var(--sp-text-dark-dim) !important; text-decoration:none; transition:color .2s ease; }
.site-header .main-nav a:hover{ color:var(--sp-text-dark) !important; }
.site-header .main-nav a.is-active{
	color:var(--sp-text-dark) !important; font-weight:600;
	position:relative;
}
.site-header .main-nav a.is-active::after{
	content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
	background:var(--sp-logo-red);
}
.site-header .header-right{ display:flex; align-items:center; gap:18px; }
.site-header .publish-btn{
	font-size:.88rem; font-weight:600; color:#fff !important; background:var(--sp-accent-red);
	text-decoration:none; padding:9px 18px; border-radius:100px; white-space:nowrap;
	transition:background .2s ease;
}
.site-header .publish-btn:hover{ background:var(--sp-accent-red-hover); }

/* Menú desplegable (Recursos). El JS lo pasa a <body> y lo posiciona con position:fixed:
   así ningún contenedor del tema/Stackable (overflow, transform, z-index) lo tapa ni lo recorta. */
.site-header .nav-dd{ position:relative; display:inline-flex; align-items:center; }
.site-header .nav-dd-btn{
	background:none; border:none; padding:0; cursor:pointer; font:inherit; font-size:.98rem;
	color:var(--sp-text-dark-dim); display:inline-flex; align-items:center; gap:4px; transition:color .2s ease;
}
.site-header .nav-dd-btn:hover, .site-header .nav-dd.is-open .nav-dd-btn, .site-header .nav-dd-btn.is-active{ color:var(--sp-text-dark); }
.site-header .nav-dd-btn.is-active{ font-weight:600; }
.nav-dd-menu{ display:none; }
.nav-dd-menu.sp-dd-float{
	position:fixed; z-index:2147483000; width:max-content; min-width:150px; padding-top:6px;
	font-family:'Inter', sans-serif; font-size:14px; line-height:1.3; text-align:left;
}
.nav-dd-menu.sp-dd-float.is-open{ display:block; animation:spDdIn .14s ease-out; }
@keyframes spDdIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.nav-dd-menu .nav-dd-menu-in{
	background:#fff; border:1px solid rgba(16,21,28,.1); border-radius:10px; padding:5px;
	box-shadow:0 10px 26px rgba(16,21,28,.14);
}
/* px y !important a propósito: el menú vive en <body>, fuera del header, y el tema suele agrandar los enlaces. */
.nav-dd-menu a{
	display:block !important; padding:8px 14px !important; margin:0 !important; border-radius:7px; white-space:nowrap;
	font-size:14px !important; font-weight:500 !important; line-height:1.3 !important; text-align:left !important;
	text-decoration:none !important; color:#10151c !important;
}
.nav-dd-menu a:hover{ background:#f6f1e7; }
@media (prefers-reduced-motion:reduce){ .nav-dd-menu.sp-dd-float.is-open{ animation:none; } }

@media (max-width:900px){ .site-header .main-nav{ display:none; } }

.header-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:5px;
	width:34px; height:34px;
	background:transparent;
	border:none;
	cursor:pointer;
	padding:0;
}
.header-toggle span{
	display:block;
	width:100%;
	height:2px;
	background:var(--sp-text-dark);
	border-radius:2px;
	transition:transform .2s ease, opacity .2s ease;
}
.site-header.is-solid .header-toggle span{ background:var(--sp-text-dark); }
.header-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.header-toggle.is-open span:nth-child(2){ opacity:0; }
.header-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
	display:none;
	flex-direction:column;
	position:fixed;
	left:0; right:0;
	background:var(--sp-bg-light);
	padding:6px 20px 16px;
	box-shadow:0 12px 24px rgba(16,21,28,.12);
	z-index:99999;
}
.mobile-nav.is-open{ display:flex !important; }
.mobile-nav a{
	color:var(--sp-text-dark-dim) !important;
	text-decoration:none !important;
	display:block !important;
	padding:10px 4px !important;
	line-height:1.3 !important;
	font-size:.95rem !important;
	border-bottom:1px solid rgba(16,21,28,.08);
}
.mobile-nav a:last-of-type{ border-bottom:none; }
.mobile-nav a.is-active{ color:var(--sp-text-dark) !important; font-weight:600; }
.mobile-nav .mobile-nav-label{
	display:block; padding:12px 4px 4px; font-size:.72rem; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--sp-accent-red); border-top:1px solid rgba(16,21,28,.08);
}
.mobile-nav a.mobile-nav-sub{ padding:8px 4px 8px 16px !important; border-bottom:none !important; }
.mobile-nav a.mobile-nav-sub small{ color:var(--sp-text-dark-dim); font-size:.8rem; margin-left:6px; }
.mobile-nav a.mobile-nav-planes{ border-top:1px solid rgba(16,21,28,.08); }
.mobile-nav a.mobile-nav-publish{
	color:#fff !important;
	background:var(--sp-accent-red) !important;
	font-weight:600 !important;
	text-align:center !important;
	border-radius:100px !important;
	padding:12px 20px !important;
	margin-top:6px !important;
	border-bottom:none !important;
}
.mobile-nav a.mobile-nav-publish:active,
.mobile-nav a.mobile-nav-publish:hover{ background:var(--sp-accent-red-hover) !important; }

@media (max-width:900px){
	.header-toggle{ display:flex; }
	.site-header{ position:relative; }
	.header-right .publish-btn{ display:none; }
}
@media (min-width:901px){
	.mobile-nav{ display:none !important; }
}

/* v1.40.0 — Menú con 6 enlaces visibles (Blog a primera vista): se compacta en pantallas medianas */
@media (max-width:1240px){ .site-header .main-nav{ gap:22px; } .site-header .main-nav a{ font-size:.92rem; } }
@media (max-width:1060px){ .site-header .main-nav{ gap:15px; } .site-header .main-nav a{ font-size:.86rem; } }