/*
Theme Name: Zephyr Child
Template: Zephyr
Version: 1.0
Author:	UpSolution
Theme URI: http://zephyr.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* Menu hover underline: fill left-to-right instead of fade bottom-to-top */
.no-touch .w-nav.type_desktop .hover_underline .w-nav-anchor.level_1 .w-nav-title:after {
	bottom: -2px;
	opacity: 1;
	width: 0;
	transition: width .3s ease-out;
	}
.no-touch .w-nav.type_desktop .hover_underline .w-nav-item.level_1:hover .w-nav-title:after {
	width: 100%;
	}

/* Página activa: mismo subrayado que el hover, pero fijo */
.w-nav.type_desktop .hover_underline .w-nav-item.level_1.current-menu-item .w-nav-title:after,
.w-nav.type_desktop .hover_underline .w-nav-item.level_1.current-menu-ancestor .w-nav-title:after {
	width: 100%;
	}

/* Detalle de proyecto: layout de galería + "Sobre el proyecto" vía CSS Grid
   (en vez de dos vc_column separadas) para poder reordenar el contenido en
   mobile — WPBakery solo apila columnas completas en su orden de DOM, no
   permite intercalar el contenido de una columna dentro de otra. Con
   grid-template-areas cada sección elige su propia celda por breakpoint.
   Se identifica cada pieza por clase (no por nth-child): el tour
   virtual/video es opcional y cuando el proyecto no tiene ninguno de los
   dos, [dag_matterport] no genera ningún elemento — con nth-child eso
   corría el conteo y descuadraba todo lo que venía después. */
.dag-detail-layout > .vc_column-inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-areas:
		"gallery aside"
		"about aside"
		"ubicacion aside"
		"map aside"
		"matterport aside";
	column-gap: 2.5rem;
	row-gap: 0;
	}
.dag-detail-layout .dag-gallery { grid-area: gallery; }
.dag-detail-layout .dag-detail-about { grid-area: about; }
.dag-detail-layout .dag-detail-ubicacion { grid-area: ubicacion; }
.dag-detail-layout .dag-project-map { grid-area: map; }
.dag-detail-layout .dag-matterport-section { grid-area: matterport; }
.dag-detail-layout .dag-detail-aside {
	grid-area: aside;
	position: sticky;
	top: 8rem;
	align-self: start;
	}

/* Si el proyecto no tiene especificaciones técnicas cargadas todavía (ej.
   "En desarrollo" recién creado), [dag_project_specs] no genera la tarjeta
   ".dag-specs-card" y el wrapper "aside" queda vacío — sin esto, la
   columna lateral seguía reservando su ancho (1fr) y el contenido
   principal quedaba pegado a la izquierda con un hueco vacío a la
   derecha. Se detecta con :has() (mismo mecanismo que los colores de
   estado más arriba) y se pasa a una sola columna centrada al mismo
   ancho que ya tenía el contenido con barra lateral (720px), en vez de
   ocupar todo el ancho disponible. */
.dag-detail-layout > .vc_column-inner:not(:has(.dag-specs-card)) {
	grid-template-columns: 720px;
	justify-content: center;
	grid-template-areas:
		"gallery"
		"about"
		"ubicacion"
		"map"
		"matterport";
	}
.dag-detail-layout > .vc_column-inner:not(:has(.dag-specs-card)) .dag-detail-aside {
	display: none;
	}

/* Colores de estado por categoría de proyecto (Adjudicado / En desarrollo /
   En construcción / Entregado), aplicados en dos lugares que usan el
   elemento nativo [us_post_taxonomy] de us-core — que ya imprime
   "term-{id} term-{slug}" en cada término (confirmado en el HTML real):

   1) La card vertical del carrusel "Portafolio de Proyectos" (home y
      "Conoce otros proyectos"): su ítem viene de un Item Template de
      WPBakery que no es editable desde acá, y ese elemento trae su color
      compilado con !important (clase "usg_post_taxonomy_1"). Por eso el
      fondo necesita !important para ganarle, combinado con :has() para
      distinguir el estado sin tocar el builder. El texto no necesita
      !important: el <span class="term-*"> no tiene color propio, así que
      cualquier regla que lo apunte directo le gana a la herencia del
      !important del padre.

      El selector va prefijado con ".layout_224" (el wrapper real del Item
      Template, confirmado inspeccionando las reglas que matchean el badge
      en el navegador) porque WPBakery también compila su propio
      ".layout_224 .usg_post_taxonomy_1{...!important}" con la MISMA
      especificidad (0,2,0) que ".usg_post_taxonomy_1:has(...)" — con
      igual especificidad gana el que aparece después en el documento, y
      esa regla se imprime después de esta hoja, así que sin el prefijo
      el fondo se quedaba pegado en el naranjo original pese al texto ya
      mostrando el color correcto. Con el prefijo quedamos en (0,3,0),
      así que ganamos siempre sin importar el orden.
   2) El badge de estado sobre el título en la ficha de detalle de un
      proyecto (el_class="dag-status-badge" en la plantilla "Detalle
      Proyecto"): ahí sí se pudo sacar background-color/color del css= del
      shortcode, así que no compite con ningún !important.

   :has() tiene soporte estable en todos los navegadores modernos. */
.layout_224 .usg_post_taxonomy_1:has(.term-adjudicado)      { background: rgba(124, 58, 237, 0.12) !important; }
.layout_224 .usg_post_taxonomy_1:has(.term-en-desarrollo)   { background: rgba(37, 99, 235, 0.12) !important; }
.layout_224 .usg_post_taxonomy_1:has(.term-en-construccion) { background: rgba(217, 119, 6, 0.12) !important; }
.layout_224 .usg_post_taxonomy_1:has(.term-entregado)       { background: rgba(22, 163, 74, 0.12) !important; }

.dag-status-badge:has(.term-adjudicado)      { background-color: rgba(124, 58, 237, 0.12); color: #8b5cf6; }
.dag-status-badge:has(.term-en-desarrollo)   { background-color: rgba(37, 99, 235, 0.12); color: #3b82f6; }
.dag-status-badge:has(.term-en-construccion) { background-color: rgba(217, 119, 6, 0.12); color: #f59e0b; }
.dag-status-badge:has(.term-entregado)       { background-color: rgba(22, 163, 74, 0.12); color: #22c55e; }

.term-adjudicado      { color: #8b5cf6; }
.term-en-desarrollo   { color: #3b82f6; }
.term-en-construccion { color: #f59e0b; }
.term-entregado       { color: #22c55e; }

/* Footer: los links de páginas (Empresa/Contacto) cambian a color de marca al hover.
   Requiere !important porque cada <a> trae un color inline (style="color: ...")
   generado por el editor de texto, y un estilo inline le gana a cualquier
   regla de hoja de estilos aunque sea :hover. */
.l-footer a {
	transition: color .2s ease;
	}
.l-footer a:hover {
	color: var(--color-content-primary) !important;
	}

/* Noticias: las imágenes insertadas en el cuerpo del artículo (dentro de
   [us_post_content]) no tienen wrapper propio, así que heredaban la regla
   ".l-main .aligncenter { max-width: var(--site-content-width,1200px) }" del
   tema — más ancha que la columna de texto real (760px, definida en el
   us_vwrapper de la plantilla "Detalle Noticia"), por eso se desbordaban.
   Se excluye .wp-post-image para no tocar la imagen destacada ni las cards
   de "Noticias relacionadas" (esas ya tienen su propio ancho/radius). */
body.single-post .l-main img:not(.wp-post-image) {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	}

@media (max-width: 782px) {
	.dag-detail-layout > .vc_column-inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"gallery"
			"about"
			"aside"
			"ubicacion"
			"map"
			"matterport";
		}
	.dag-detail-layout .dag-detail-aside {
		position: static;
		}
	/* Anula el ancho fijo de 720px del centrado "sin barra lateral" — en
	   mobile ya es una sola columna fluida, no hace falta ni corresponde. */
	.dag-detail-layout > .vc_column-inner:not(:has(.dag-specs-card)) {
		grid-template-columns: 1fr;
		}
	}