/*
Theme Name: AnGlo Child
Theme URI: https://angloremodelaciones.cl
Description: Tema hijo de Astra para AnGlo Remodelaciones. Todo el codigo custom del sitio vive aqui - nunca en el tema padre.
Author: Doryan - doryanads.com
Author URI: https://doryanads.com
Template: astra
Version: 2.0.0
Text Domain: anglo-child
*/

/* ==========================================================================
   DESIGN SYSTEM ANGLO - Identidad visual oficial (manual de marca 2026-07)
   Azul profundo #0D2340 | Dorado #D4AF37 | Blanco | Gris claro #F2F2F2
   Tipografia: Montserrat (titulos 700/800, textos 400)
   ========================================================================== */

:root {
	--ag-navy: #0D2340;
	--ag-navy-2: #14315A;      /* navy claro para gradientes */
	--ag-navy-deep: #081627;   /* navy profundo: footer / hero */
	--ag-gold: #D4AF37;
	--ag-gold-dark: #8C6E14;   /* dorado oscuro accesible sobre blanco */
	--ag-gold-light: #E9CE7A;  /* dorado claro sobre navy */
	--ag-gray: #F2F2F2;
	--ag-ink: #26313F;         /* texto principal */
	--ag-slate: #55606E;       /* texto secundario */
	--ag-line: #E4E8EE;
	--ag-wsp: #25D366;
	--ag-font: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

	/* Paleta global de Astra alineada a la marca.
	   OJO: color-4 NO se toca - Astra lo usa como fondo del contenido
	   (pintarlo navy dejo el sitio entero oscuro, error 2026-07-14). */
	--ast-global-color-0: var(--ag-gold);
	--ast-global-color-1: var(--ag-gold-dark);
	--ast-global-color-2: var(--ag-navy);
	--ast-global-color-3: var(--ag-ink);
}

/* Fondo del contenido siempre blanco (determinista, no depende de la paleta) */
.site-content,
.ast-plain-container .site-content {
	background-color: #ffffff !important;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px; /* anclas de Zonas de Cobertura bajo el header sticky */
}

body {
	font-family: var(--ag-font) !important;
	color: var(--ag-ink);
	font-size: 17px;
	line-height: 1.75;
	overflow-x: hidden; /* requerido por el hero full-bleed */
	background: #ffffff;
}

::selection {
	background: var(--ag-gold);
	color: var(--ag-navy);
}

h1, h2, h3, h4, h5, h6,
.site-title, .entry-title {
	font-family: var(--ag-font) !important;
	color: var(--ag-navy);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

/* ==========================================================================
   HEADER - barra navy con acentos dorados (referencia del manual)
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 6px 24px rgba(8, 22, 39, 0.35);
}

body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-header-break-point .main-header-bar-navigation {
	background: linear-gradient(180deg, var(--ag-navy) 0%, var(--ag-navy-deep) 100%) !important;
}

/* Linea dorada bajo el header */
.ast-primary-header-bar {
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(90deg, transparent, var(--ag-gold) 30%, var(--ag-gold) 70%, transparent) 1;
}

/* Titulo del sitio: blanco + icono de techo dorado (motivo del logo) */
.site-title a,
.site-title a:hover,
.site-title a:focus {
	color: #ffffff !important;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.site-title a::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 18px;
	margin-right: 10px;
	vertical-align: baseline;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 26'%3E%3Cpath d='M3 23 L24 5 L45 23' fill='none' stroke='%23D4AF37' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='35' y='7' width='4.5' height='8' rx='1' fill='%23D4AF37'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
}

/* Menu principal */
.ast-builder-menu .main-header-menu .menu-item .menu-link {
	color: #D9E2EE !important;
	font-family: var(--ag-font) !important;
	font-weight: 600;
	font-size: 0.95rem;
	position: relative;
	transition: color 0.2s ease;
}

.ast-builder-menu .main-header-menu .menu-item .menu-link:hover,
.ast-builder-menu .main-header-menu .menu-item.current-menu-item .menu-link,
.ast-builder-menu .main-header-menu .menu-item.current_page_item .menu-link {
	color: var(--ag-gold) !important;
	background: transparent;
}

/* Subrayado dorado animado (solo desktop) */
@media (min-width: 922px) {
	.ast-builder-menu .main-header-menu > .menu-item > .menu-link::after {
		content: "";
		position: absolute;
		left: 1em;
		right: 100%;
		bottom: 8px;
		height: 2px;
		background: var(--ag-gold);
		transition: right 0.25s ease;
	}
	.ast-builder-menu .main-header-menu > .menu-item > .menu-link:hover::after,
	.ast-builder-menu .main-header-menu > .menu-item.current-menu-item > .menu-link::after {
		right: 1em;
	}
}

/* Submenu (dropdown Servicios a futuro) */
.ast-builder-menu .main-header-menu .sub-menu {
	background: var(--ag-navy-deep) !important;
	border-top: 2px solid var(--ag-gold);
	box-shadow: 0 14px 30px rgba(8, 22, 39, 0.4);
}
.ast-builder-menu .main-header-menu .sub-menu .menu-link {
	color: #D9E2EE !important;
}

/* Menu mobile: panel navy, separadores sutiles, toggle blanco */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.ast-mobile-menu-trigger-minimal {
	color: #ffffff !important;
	background: transparent !important;
}

.ast-header-break-point .main-header-menu .menu-item {
	border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.ast-header-break-point .main-header-menu .menu-link {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* Panel mobile desplegado (Astra HFB usa .ast-mobile-header-content,
   que por defecto es blanco): navy profundo + links claros.
   OJO: Astra ademas pinta el ul.main-header-menu BLANCO via CSS dinamico
   en breakpoint - se vuelve transparente para que se vea el navy */
.ast-header-break-point .main-header-menu,
.ast-mobile-header-content .main-header-menu,
.ast-header-break-point .main-header-menu .menu-item,
.ast-header-break-point .main-header-menu .menu-link {
	background: transparent !important;
}

.ast-mobile-header-content,
.ast-header-break-point .ast-mobile-header-content,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .ast-mobile-popup-header {
	background: var(--ag-navy-deep) !important;
}

.ast-mobile-header-content .menu-link,
.ast-mobile-header-content .menu-item > a,
.ast-mobile-header-content a,
.ast-mobile-popup-content .menu-link {
	color: #D9E2EE !important;
	font-weight: 600;
}

.ast-mobile-header-content .menu-item.current-menu-item > .menu-link,
.ast-mobile-header-content .menu-link:hover,
.ast-mobile-popup-content .menu-item.current-menu-item > .menu-link {
	color: var(--ag-gold) !important;
}

.ast-mobile-header-content .menu-item,
.ast-mobile-popup-content .menu-item {
	border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
}

/* ==========================================================================
   HERO - banda navy full-bleed generada por ag_hero_wrap() en todas las paginas
   ========================================================================== */

/* Full-bleed real. La especificidad y los !important son necesarios:
   Astra aplica `.entry-content[data-ast-blocks-layout] > *` con max-width
   y margenes auto que ganan sobre una clase simple (error 2026-07-14). */
.entry-content > .ag-hero,
.ag-hero {
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	background:
		radial-gradient(900px 420px at 82% -10%, rgba(212, 175, 55, 0.16), transparent 62%),
		radial-gradient(700px 380px at 8% 110%, rgba(20, 49, 90, 0.85), transparent 65%),
		linear-gradient(165deg, var(--ag-navy) 0%, var(--ag-navy-deep) 100%);
	padding: clamp(3.2rem, 6.5vw, 5.2rem) 24px clamp(3.4rem, 6.5vw, 5.4rem);
	margin-bottom: clamp(2.6rem, 5vw, 4rem);
	border-bottom: 3px solid var(--ag-gold);
	text-align: center;
}

.ag-hero-inner {
	max-width: 920px;
	margin: 0 auto;
}

/* Ornamento dorado del manual: diamante sobre el titulo */
.ag-hero-inner > h1::before {
	content: "\25C6";
	display: block;
	color: var(--ag-gold);
	font-size: 0.85rem;
	letter-spacing: 0;
	margin-bottom: 18px;
	text-shadow: 0 0 18px rgba(212, 175, 55, 0.55);
}

.ag-hero h1 {
	color: #ffffff;
	font-size: clamp(1.85rem, 4.2vw, 2.85rem);
	font-weight: 800;
	line-height: 1.18;
	margin: 0 auto;
	max-width: 880px;
}

/* Barra dorada bajo el titulo */
.ag-hero-inner > h1::after {
	content: "";
	display: block;
	width: 86px;
	height: 3px;
	margin: 26px auto 0;
	background: linear-gradient(90deg, transparent, var(--ag-gold), transparent);
	border-radius: 2px;
}

.ag-hero p {
	color: #C7D3E4;
	font-size: clamp(1rem, 1.6vw, 1.13rem);
	line-height: 1.8;
	max-width: 780px;
	margin: 1.6rem auto 0;
}

.ag-hero p strong { color: var(--ag-gold-light); font-weight: 700; }

.ag-hero a { color: var(--ag-gold-light); text-decoration-color: rgba(212, 175, 55, 0.6); }
.ag-hero a:hover { color: #ffffff; }

.ag-hero .ag-cta-wrap { margin: 2.2rem auto 0; }

/* ==========================================================================
   CONTENIDO - medida editorial premium y jerarquia tipografica
   ========================================================================== */

.entry-content > *:not(.ag-hero) {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.entry-content > .alignwide { max-width: 1100px; }
.entry-content > .alignfull { max-width: none; }

.entry-content h1 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.entry-content h2 {
	font-size: clamp(1.42rem, 3vw, 1.85rem);
	margin-top: 2.7em;
	margin-bottom: 0.8em;
}

/* Regla dorada corta sobre cada H2 (fuera del hero) */
.entry-content > h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--ag-gold);
	margin-bottom: 16px;
}

.entry-content h3 {
	font-size: 1.22rem;
	font-weight: 700;
	margin-top: 2em;
}

.entry-content p {
	margin-bottom: 1.25em;
}

.entry-content strong { color: var(--ag-navy); }

.entry-content a {
	color: var(--ag-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--ag-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.18s ease;
}

.entry-content a:hover { color: var(--ag-gold-dark); }

/* Listas: vinetas de diamante dorado */
.entry-content ul.wp-block-list {
	padding-left: 1.35em;
}
.entry-content ul.wp-block-list > li {
	margin-bottom: 0.7em;
	padding-left: 0.35em;
}
.entry-content ul.wp-block-list > li::marker {
	content: "\25C6  ";
	color: var(--ag-gold);
	font-size: 0.72em;
}

/* Listas ordenadas: pasos con numero en circulo navy/dorado */
.entry-content ol.wp-block-list {
	list-style: none;
	counter-reset: ag-paso;
	padding-left: 0;
}
.entry-content ol.wp-block-list > li {
	counter-increment: ag-paso;
	position: relative;
	padding-left: 52px;
	margin-bottom: 1.15em;
}
.entry-content ol.wp-block-list > li::before {
	content: counter(ag-paso);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ag-navy);
	color: var(--ag-gold);
	font-weight: 700;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(13, 35, 64, 0.25);
}

/* Citas y separadores */
.entry-content blockquote {
	border-left: 3px solid var(--ag-gold);
	background: var(--ag-gray);
	padding: 20px 26px;
	border-radius: 0 10px 10px 0;
	font-style: italic;
	color: var(--ag-navy);
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: none;
	height: 2px;
	max-width: 140px;
	margin: 3em auto;
	background: linear-gradient(90deg, transparent, var(--ag-gold), transparent);
}

/* Imagenes de contenido (portafolio futuro) */
.entry-content img {
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(13, 35, 64, 0.16);
}

/* ==========================================================================
   COMPONENTES ANGLO
   ========================================================================== */

/* Caja de la visita tecnica: tarjeta navy premium con acento dorado */
.ag-caja-visita {
	background:
		radial-gradient(520px 240px at 88% -20%, rgba(212, 175, 55, 0.18), transparent 60%),
		linear-gradient(150deg, var(--ag-navy) 0%, var(--ag-navy-deep) 100%);
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-top: 3px solid var(--ag-gold);
	border-left: none;
	border-radius: 14px;
	padding: 28px 32px;
	margin: 2.2em auto;
	color: #E8EEF6;
	box-shadow: 0 16px 38px rgba(8, 22, 39, 0.28);
}

.ag-caja-visita p { color: #E8EEF6; margin-bottom: 0; }
.ag-caja-visita p + p { margin-top: 1em; }
.ag-caja-visita strong { color: var(--ag-gold-light); }
.ag-caja-visita a { color: var(--ag-gold-light); }
.ag-caja-visita a:hover { color: #ffffff; }

/* Nota de alcance (lo que NO hacemos): bloque gris claro con borde dorado */
.ag-nota-alcance {
	background: var(--ag-gray);
	border-left: 3px solid var(--ag-gold);
	padding: 20px 26px;
	border-radius: 0 10px 10px 0;
	font-size: 0.98rem;
	margin: 2em auto;
	color: var(--ag-ink);
}

.ag-nota-alcance strong { color: var(--ag-navy); }

/* Galeria de portafolio: grid mixto de proyectos con tags de servicio y comuna */
.ag-portafolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
	margin: 2.2em 0;
}

.ag-portafolio-card {
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ag-line);
	box-shadow: 0 6px 18px rgba(13, 35, 64, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ag-portafolio-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(13, 35, 64, 0.14);
}

.ag-portafolio-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ag-portafolio-tags {
	padding: 12px 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ag-portafolio-tag {
	font-size: 0.78rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.ag-portafolio-tag.ag-tag-servicio {
	background: var(--ag-navy);
	color: #fff;
}

.ag-portafolio-tag.ag-tag-comuna {
	background: var(--ag-gray);
	color: var(--ag-navy);
	border: 1px solid var(--ag-line);
}

/* Boton WhatsApp: verde oficial (regla del proyecto), acabado premium */
.ag-cta-wrap {
	margin: 2em 0;
	text-align: center;
}

.ag-btn-wsp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	background: linear-gradient(180deg, #29D96C 0%, #1DB954 100%);
	color: #ffffff !important;
	font-family: var(--ag-font);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: 0.01em;
	padding: 16px 34px;
	border-radius: 12px;
	text-decoration: none !important;
	min-height: 54px;
	line-height: 1.3;
	box-shadow: 0 8px 22px rgba(29, 185, 84, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ag-btn-wsp::before {
	content: "";
	flex: none;
	width: 21px;
	height: 21px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16 2.9C8.8 2.9 2.9 8.8 2.9 16c0 2.3.6 4.6 1.8 6.6L2.8 29.2l6.8-1.8c1.9 1.1 4.1 1.6 6.4 1.6 7.2 0 13.1-5.9 13.1-13.1S23.2 2.9 16 2.9zm0 23.9c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1 1.1-3.9-.3-.4c-1.1-1.8-1.7-3.8-1.7-5.9C5.1 10 10 5.1 16 5.1S26.9 10 26.9 16 22 26.8 16 26.8zm6-8.1c-.3-.2-1.9-1-2.2-1.1-.3-.1-.5-.2-.8.2-.2.3-.9 1.1-1 1.3-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.6.1-.2.1-.4 0-.6-.1-.2-.8-1.8-1-2.5-.3-.6-.5-.5-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8s1.2 3.2 1.4 3.5c.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2-.8 2.2-1.6.3-.8.3-1.5.2-1.6-.1-.2-.3-.3-.6-.4z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.ag-btn-wsp:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(29, 185, 84, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

/* Boton dorado (CTAs secundarios: ver proyectos, mas informacion) */
.ag-btn-oro {
	display: inline-block;
	background: linear-gradient(180deg, #E0BE4E 0%, var(--ag-gold) 100%);
	color: var(--ag-navy) !important;
	font-family: var(--ag-font);
	font-weight: 700;
	font-size: 1rem;
	padding: 15px 32px;
	border-radius: 12px;
	text-decoration: none !important;
	min-height: 52px;
	box-shadow: 0 8px 22px rgba(212, 175, 55, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ag-btn-oro:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(212, 175, 55, 0.5);
	color: var(--ag-navy);
}

/* Botones nativos de Gutenberg alineados a la marca */
.entry-content .wp-block-button__link {
	background: var(--ag-gold);
	color: var(--ag-navy);
	font-weight: 700;
	border-radius: 12px;
}

/* ==========================================================================
   FOOTER - navy profundo con linea dorada superior
   ========================================================================== */

.site-footer,
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
	background: var(--ag-navy-deep) !important;
	border-top: none;
}

.site-footer {
	border-top: 3px solid var(--ag-gold);
}

.site-footer,
.site-footer .ast-footer-copyright,
.site-footer p {
	color: #ADBACB;
	font-family: var(--ag-font) !important;
	font-size: 0.92rem;
}

.site-footer a { color: var(--ag-gold-light); }
.site-footer a:hover { color: #ffffff; }

/* ==========================================================================
   MOBILE - ajustes finos (publico llega desde TikTok/Instagram)
   ========================================================================== */

@media (max-width: 921px) {
	body { font-size: 16.5px; }

	.ag-hero {
		padding-left: 20px;
		padding-right: 20px;
	}

	.entry-content ol.wp-block-list > li { padding-left: 46px; }
	.entry-content ol.wp-block-list > li::before { width: 31px; height: 31px; font-size: 0.88rem; }

	.ag-caja-visita { padding: 24px 22px; }

	.ag-btn-wsp {
		width: 100%;
		max-width: 420px;
		font-size: 1rem;
		padding: 16px 22px;
	}
}