/*
Theme Name: DmasC Child Theme
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* Barra de scroll vertical siempre reservada: sin esto, una página más corta que la
   ventana no la muestra y el contenido ocupa esos ~15px extra, mientras que una página
   más alta sí la muestra y "pierde" ese ancho — al navegar entre páginas de distinta
   altura (o según van cargando las imágenes y la página crece), todo el contenido
   salta a la derecha y vuelve según aparece o desaparece la barra. */
html {
	overflow-y: scroll;
}

/* Menú: el subrayado de la sección actual (definido en el CSS personalizado de Porto)
   también en sus subniveles. La clase "active" la añade inc/menu.php. */
.main-menu.mega-menu > li.active > a::after {
	right: 16px;
}

/* Menú móvil: mismo subrayado que a.current (CSS personalizado de Porto) en la sección
   activa de los subniveles. Porto solo pone "current" a la página exacta. */
.mobile-menu.accordion-menu > li.active > a {
	text-decoration: underline !important;
	text-decoration-color: #23201B !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 6px !important;
}
/* Porto pone text-transform:capitalize al menú móvil, que mayuscula cada
   palabra ("Arquitectura De Lujo") — en español solo debe ir en mayúscula
   la primera letra de la frase, no cada palabra. */
.mobile-menu.accordion-menu > li > a {
	text-transform: none !important;
}

/* Bloque del CTA + iconos al final del panel móvil: gris claro (#f7f6f3) de
   serie, probado en vivo contra blanco y fondo oscuro — blanco es más
   coherente con el resto del panel, que ya es blanco. */
.dmasc-panel-action {
	background: #fff !important;
}
/* Al tocar (:active) o tener foco, el navegador pone su azul de enlace por
   defecto si no se cubre explícitamente ese estado, no solo el normal. */
.dmasc-panel-action a:link,
.dmasc-panel-action a:visited,
.dmasc-panel-action a:hover,
.dmasc-panel-action a:active,
.dmasc-panel-action a:focus {
	color: #23201b !important;
}

/* Legibilidad del H1/subtítulo de la home sobre el vídeo de cabecera: el
   subtítulo (.titulo-secundario) era gris y sin sombra, se perdía contra el
   vídeo — ahora blanco con sombra, igual que el H1. Además, un velo oscuro
   detrás de todo el texto para que no dependa de lo claro/oscuro que esté
   cada fotograma del vídeo. Probado en vivo (demo ?hero=a|b|c|d), se eligió
   la opción combinada (subtítulo + velo). */
.titulo-secundario,
.titulo-secundario * {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 2px 12px rgba(0, 0, 0, .45) !important;
}
.section-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .25);
	pointer-events: none;
}

/* .titulo-principal-negro: igual que .titulo-principal (CSS personalizado de Porto)
   pero en negro y sin sombra, para h1 sobre fondo claro (sin imagen ni vídeo detrás). */
.titulo-principal-negro {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.titulo-principal-negro h1,
.titulo-principal-negro h1 span {
	font-family: 'Manrope', sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(36px, 24px + 3vw, 72px) !important;
	line-height: 1.05 !important;
	color: #23201B !important;
	text-shadow: none !important;
}
@media (max-width: 600px) {
	.titulo-principal-negro h1,
	.titulo-principal-negro h1 span {
		font-size: 2.625rem !important;
		line-height: 1.05 !important;
	}
}

/* .titulo-complementario h2 (CSS personalizado de Porto): en móvil, con
   títulos de dos líneas (p. ej. "Mucho más que un estudio de arquitectura en
   Madrid"), el interlineado de 40px por defecto se ve excesivo — mismo
   criterio que ya usa .titulo-principal-negro arriba. */
@media (max-width: 767px) {
	.titulo-complementario h2,
	.titulo-complementario h2 span {
		line-height: 1.05 !important;
	}
}

/* Interletrado del menú y de los títulos .titulo-complementario: Porto lo
   deja muy negativo (-1.39px), se veía apelmazado. Probado en vivo con
   varios valores (demo ?letras=), -0.6px fue el elegido. */
#header .main-menu > li > a,
.mobile-menu.accordion-menu > li > a,
.titulo-complementario h2,
.titulo-complementario h2 span {
	letter-spacing: -.6px !important;
}

/* Columna #infoinicial: en escritorio el texto empieza en la misma línea que el logo y
   las migas (80 px). El CSS personalizado de Porto la dejaba en 70 px; en tablet (30 px)
   y móvil (20 px) ya coincidía. */
@media (min-width: 992px) {
	#infoinicial > .wpb_wrapper {
		padding-left: 80px !important;
	}
}

/* Cabecera siempre fija, sin el salto del "sticky" de Porto.
   Porto la deja en su sitio y, al hacer scroll, la pasa a position:fixed por JS (la
   cabecera se movía unos píxeles antes de engancharse y aparecía una sombra de golpe).
   Aquí es sticky desde el principio con CSS; los cambios de clase de Porto se anulan. */
.page-wrapper {
	overflow: clip !important; /* "hidden" impedía que sticky funcionara; clip recorta igual */
}
.header-wrapper {
	position: sticky;
	top: 0;
	z-index: 1030;
}
.admin-bar .header-wrapper {
	top: var(--wp-admin--admin-bar--height, 0px);
}
@media (max-width: 600px) {
	.admin-bar .header-wrapper { top: 0; } /* la barra de admin no es fija en móvil */
}
#header.sticky-header {
	height: auto !important;
}
/* En el estado "sticky" de Porto el menú conserva exactamente su aspecto normal: mismas
   márgenes negativas de fila estirada (CSS personalizado de Porto: -30 px / -20 px), mismo
   ancho y sin desplazamiento lateral (Porto lo movía 260 px con el menú móvil abierto).
   Con "html body" delante porque el CSS personalizado de Porto que pone esas márgenes a 0
   se imprime en la página, después de esta hoja. */
html body #header.sticky-header .header-main.sticky {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	/* Ancho = contenedor + las dos márgenes negativas (no 100vw: dependía del ancho del
	   scroll y dejaba una franja a la derecha). */
	width: calc(100% + 60px) !important;
	max-width: none !important;
	margin-left: -30px !important;
	margin-right: -30px !important;
	box-shadow: none !important;
	transition: none !important;
}
/* El ancho de la fila estirada lo calcula Porto con 100vw (+ JS) y se queda 15 px corto:
   queda una franja a la derecha de la cabecera por la que se ve la página. Se fija al ancho
   del contenedor más las dos márgenes negativas, tanto en reposo como en "sticky". */
html body .header-builder-p .vc_row-flex.header-main {
	width: calc(100% + 60px) !important;
	max-width: none !important;
}
@media (max-width: 991px) {
	html body .header-builder-p .vc_row-flex.header-main,
	html body #header.sticky-header .header-main.sticky {
		width: calc(100% + 40px) !important;
		margin-left: -20px !important;
		margin-right: -20px !important;
	}
}
/* Porto quita en "sticky" las márgenes del botón del menú móvil (8 px en el header
   builder) y la cabecera encogía de 55 a 48 px. */
html body #header.sticky-header .mobile-toggle {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* ===== Cabecera en móvil y tablet (≤ 991 px) =====
   El logo lo centraba Porto en toda la pantalla (position:absolute), así que se montaba
   sobre "¿Te llamamos?". Aquí entra en el flujo: hamburguesa | logo | CTA, y el logo se
   centra en el hueco que queda entre la hamburguesa y el CTA. */
@media (max-width: 991px) {
	#header .header-main .vc_column-inner {
		align-items: center;
		justify-content: flex-start !important;
	}
	/* El icono de la hamburguesa (el botón tiene 13 px de relleno) queda a 20 px del
	   borde, en línea con las migas y los textos; el CTA termina a 20 px por la derecha. */
	#header .header-main .mobile-toggle {
		order: 1;
		flex: none;
		margin: 8px 0 8px 7px !important;
	}
	/* Márgenes automáticos: el logo se centra en el hueco entre hamburguesa y CTA. */
	#header .header-main .logo {
		order: 2;
		flex: none;
		position: static !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		margin: 0 auto !important;
	}
	#header .header-main .vc_btn3-container.vc_btn3-right {
		order: 3;
		flex: none;
		margin: 0 !important;
	}
}

/* ===== Menú móvil: el panel se abre sobre la página, sin desplazarla =====
   Porto movía toda la página 260 px (html.panel-opened .page-wrapper { left: 260px }).
   Ahora la página se queda quieta, se oscurece detrás del panel y un toque fuera lo
   cierra (inc/cabecera.php). */
html.panel-opened .page-wrapper,
html.panel-opened #header.sticky-header .header-main.sticky {
	left: 0 !important;
}
html::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9000; /* el panel está en 9001 y su botón de cerrar en 9999 */
	background: rgba(20, 20, 20, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	pointer-events: none;
}
html.panel-opened::after {
	opacity: 1;
	visibility: visible;
}
html.panel-opened .side-nav-panel-close {
	color: #fff;
}
html.panel-opened .side-nav-panel-close svg line {
	stroke: #fff;
}

/* Tablet (768–991 px): el contenedor tiene 30 px de margen lateral, pero el CSS
   personalizado de Porto estira la cabecera con -20 px a partir de 991 px hacia abajo,
   así que quedaba desplazada 10 px (y provocaba 10 px de scroll horizontal). */
@media (min-width: 768px) and (max-width: 991px) {
	html body .header-builder-p .vc_row-flex.header-main,
	html body #header.sticky-header .header-main.sticky {
		width: calc(100% + 60px) !important;
		margin-left: -30px !important;
		margin-right: -30px !important;
	}
	/* En tablet la línea de migas y textos está a 30 px: icono y CTA también. */
	#header .header-main .mobile-toggle {
		margin-left: 17px !important;
	}
	#header .header-main .vc_btn3-container.vc_btn3-right {
		margin-right: 10px !important;
	}
}

/* DEMO temporal color del logo de la cabecera: ?logo=negro (#000) | ?logo=oscuro (#23201B) */
body.dmasc-logo-negro #header .logo img {
	filter: brightness(0);
}
body.dmasc-logo-oscuro #header .logo img {
	content: url("images/demo-logo-23201b.png");
}

/* Menú del ordenador entre 992 y 1365 px: con la letra a 22 px y 16 px de margen por
   lado, los siete elementos solo caben en una línea a partir de 1366 px; por debajo,
   «Blog» y «Contacto» bajaban a una segunda fila y «¿Te llamamos?» se partía en dos.
   La letra baja en proporción al ancho (22 → 16 px) y los elementos se juntan: el margen del <li>
   (5 px en Porto) baja hasta -4 px por lado. El relleno del enlace NO se toca:
   el subrayado de Porto (::after) se calcula con ese relleno de 16 px, también el de
   los elementos inactivos, que lo tienen a ancho 0 hasta el hover. */
@media (min-width: 992px) and (max-width: 1365px) {
	#header .main-menu > li {
		margin-left: calc(-4px + 9 * (100vw - 992px) / 373) !important;
		margin-right: calc(-4px + 9 * (100vw - 992px) / 373) !important;
	}
	#header .main-menu > li > a {
		font-size: calc(16px + 6 * (100vw - 992px) / 373) !important;
	}
	#header .vc_btn3-container a.hero-btn {
		font-size: calc(16px + 6 * (100vw - 992px) / 373) !important;
		white-space: nowrap;
	}
}