/* =========================================================
   Tecreamos Child · estilos base
   Cortes responsivos (iguales a dominiohosting.cl):
     Pantalla grande  ≥ 1367 px
     Notebook         1025 – 1366 px
     Tablet           768 – 1024 px
     Celular          ≤ 767 px
     Celular pequeño  ≤ 380 px
   ========================================================= */

/* ---------- Fuentes locales (variables, solo latin) ---------- */
/* Las fuentes (@font-face) las carga inc/fonts.php desde wp-content/uploads/tc-fonts/ */

/* ---------- Variables ---------- */
:root {
	--tc-rojo: #D71920;
	--tc-rojo-hover: #B9151B;
	--tc-rojo-claro: #FFF4F5;
	--tc-navy: #141B34;
	--tc-texto: #4A5263;
	--tc-texto-suave: #2A3245;
	--tc-borde: #E3E7EE;
	--tc-gris-fondo: #F7F8FB;
	--tc-oscuro: #333333;
	--tc-oscuro-hover: #1F1F1F;
	--tc-naranjo: #FF8000;
	--tc-naranjo-hover: #E67300;
	--tc-verde: #1EBE5A;
	--tc-verde-hover: #19A84F;
	--tc-ancho: 1180px;
	--tc-radio: 12px;
	--tc-fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--tc-fuente-titulos: 'Lexend', 'Inter', system-ui, sans-serif;
}

/* ---------- Tipografía general ---------- */
body {
	font-family: var(--tc-fuente);
	color: var(--tc-navy);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--tc-fuente-titulos);
	color: var(--tc-navy);
	letter-spacing: -0.01em;
}
a { color: var(--tc-rojo); }
a:hover, a:focus { color: var(--tc-rojo-hover); }

.tc-wrap {
	max-width: var(--tc-ancho);
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
	width: 100%;
}

/* Kicker del banner (lo primero que lee el visitante) */
.tc-kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tc-rojo);
}
.tc-kicker::before {
	content: "";
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--tc-rojo);
}
/* Etiqueta sobre los títulos de sección */
.tc-eyebrow {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tc-rojo);
}

/* ---------- Bloques Grupo de WordPress ----------
   GeneratePress es un tema clásico: WordPress envuelve el contenido de cada
   bloque Grupo en un div interno (.wp-block-group__inner-container). Ese div
   rompería las grillas y filas de nuestras secciones, así que se vuelve
   "transparente" y se quitan los márgenes automáticos entre bloques. */
[class*="tc-"] > .wp-block-group__inner-container { display: contents; }
:is(.entry-content, .is-root-container) .wp-block-group[class*="tc-"] { margin-block: 0; }
:is(.entry-content, .is-root-container) [class*="tc-"] p[class*="tc-"],
:is(.entry-content, .is-root-container) [class*="tc-"] h1[class*="tc-"],
:is(.entry-content, .is-root-container) [class*="tc-"] h2[class*="tc-"],
:is(.entry-content, .is-root-container) [class*="tc-"] h3[class*="tc-"] { margin-block-start: 0; }

/* ---------- Íconos SVG en línea ---------- */
.tc-icon { flex: none; display: inline-block; vertical-align: middle; }

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */
.tc-topbar {
	background: var(--tc-gris-fondo);
	border-bottom: 1px solid #EAEDF3;
	color: var(--tc-texto-suave);
	font-size: 13px;
	line-height: 1.3;
}
.tc-topbar a { color: var(--tc-texto-suave); text-decoration: none; }
.tc-topbar a:hover, .tc-topbar a:focus { color: var(--tc-rojo); }

.tc-topbar__desktop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
}
.tc-topbar__group { display: flex; align-items: center; gap: 20px; }
.tc-topbar__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.tc-flag {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 13px;
	border-radius: 2px;
	overflow: hidden;
	background: linear-gradient(#ffffff 0 50%, var(--tc-rojo) 50% 100%);
	box-shadow: 0 0 0 1px var(--tc-borde);
}
.tc-flag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 8px;
	height: 6.5px;
	background: #0039A6;
}

.tc-topbar__clientes {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--tc-rojo);
	font-weight: 600;
	white-space: nowrap;
}
.tc-topbar .tc-topbar__clientes,
.tc-topbar .tc-topbar__clientes:hover,
.tc-topbar .tc-topbar__clientes:focus { color: #ffffff; }
.tc-topbar .tc-topbar__clientes:hover { background: var(--tc-rojo-hover); }

.tc-topbar__mobile { display: none; }

/* =========================================================
   CABECERA (GeneratePress)
   ========================================================= */
.site-header {
	background: #ffffff;
	border-bottom: 1px solid #EAEDF3;
	box-shadow: 0 2px 10px rgba(20, 27, 52, .04);
}
.site-header .inside-header {
	padding-top: 0;
	padding-bottom: 0;
	min-height: 76px;
	align-items: center;
}
.site-logo img, .site-header .header-image { max-width: 186px; height: auto; }

/* Menú principal */
.main-navigation,
.main-navigation ul ul { background: transparent; }

.main-navigation .main-nav ul li a {
	color: var(--tc-navy);
	font-size: 15px;
	font-weight: 500;
	line-height: 76px;
	padding-inline: 12px;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
	color: var(--tc-rojo);
	background: transparent;
}
/* Página actual: rojo con línea inferior */
.main-navigation .main-nav ul > li[class*="current-menu-"] > a:not([href*="#"]) {
	color: var(--tc-rojo);
	background: transparent;
	box-shadow: inset 0 -3px 0 var(--tc-rojo);
}

/* Enlaces a secciones (#contacto, #servicios-web) no se marcan como página actual */
.main-navigation .main-nav ul > li[class*="current-menu-"] > a[href*="#"] {
	color: var(--tc-navy);
	background: transparent;
	box-shadow: none;
}
.main-navigation .main-nav ul > li[class*="current-menu-"] > a[href*="#"]:hover { color: var(--tc-rojo); }

/* Submenús */
.main-navigation ul ul {
	background: #ffffff;
	border: 1px solid var(--tc-borde);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(20, 27, 52, .12);
	padding: 6px 0;
}
@media (min-width: 1025px) {
	.main-navigation ul ul { width: max-content; min-width: 220px; }
	.main-navigation ul ul li { width: 100%; }
	.main-navigation .main-nav ul ul li a { white-space: nowrap; }
}
.main-navigation .main-nav ul ul li a {
	line-height: 1.4;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--tc-navy);
	background: transparent;
	box-shadow: none;
}
/* Mismo nivel de prioridad que los colores del Personalizador de GeneratePress */
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	color: var(--tc-rojo);
	background: var(--tc-rojo-claro);
}

/* Íconos del menú (Font Awesome / Bootstrap Icons en el título de cada ítem) */
.main-navigation .menu-item > a { display: flex; align-items: center; gap: 8px; }
.main-navigation .main-nav i {
	display: inline-block;
	width: 24px;
	font-size: 17px;
	font-style: normal;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	color: inherit;
}
.main-navigation .main-nav i.fas { font-family: "Font Awesome 5 Free"; font-weight: 900; }
.main-navigation .main-nav i.far { font-family: "Font Awesome 5 Free"; font-weight: 400; }

/* Botón de menú en celular y tablet */
.main-navigation .menu-toggle {
	color: var(--tc-navy);
	background: #ffffff;
	border: 1px solid var(--tc-borde);
	border-radius: 10px;
	min-height: 44px;
	padding: 0 14px;
	line-height: 42px;
	font-weight: 600;
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus { color: var(--tc-rojo); background: #ffffff; }

/* Menú fijo al hacer scroll */
.main-navigation.navigation-stick,
.sticky-enabled .main-navigation.is_stuck { background: #ffffff; box-shadow: 0 4px 16px rgba(20, 27, 52, .08); }

/* Menú del lienzo (off-canvas) */
.slideout-navigation.main-navigation,
#generate-slideout-menu { background: #ffffff; }
.slideout-navigation.main-navigation .main-nav ul li a {
	color: var(--tc-navy);
	line-height: 1.4;
	padding: 12px 20px;
	font-size: 16px;
	box-shadow: none;
}
.slideout-navigation.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.slideout-navigation.main-navigation .main-nav ul li a:hover {
	color: var(--tc-rojo);
	background: var(--tc-rojo-claro);
}
.slideout-navigation.main-navigation ul ul { border: 0; box-shadow: none; width: auto; border-radius: 0; background: #ffffff; }
.slideout-navigation.main-navigation .main-nav ul ul li a { color: var(--tc-navy); background: transparent; padding-left: 32px; font-size: 15px; }
.slideout-navigation.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.slideout-navigation.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.slideout-navigation.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a,
.slideout-navigation.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	color: var(--tc-rojo);
	background: var(--tc-rojo-claro);
}
.slideout-navigation .slideout-exit,
.slideout-navigation button.slideout-exit { color: var(--tc-navy); }

/* =========================================================
   BOTONES (todos llevan flecha automáticamente)
   Uso: <a class="tc-btn tc-btn--rojo" href="#">Pedir cotización</a>
   Variantes: --rojo · --oscuro (#333, al lado del rojo) · --naranjo (siempre solo) · --whatsapp
   ========================================================= */
.tc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--tc-radio);
	font-family: var(--tc-fuente);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.tc-btn::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .15s ease;
}
.tc-btn:hover::after { transform: translateX(3px); }

.tc-btn.tc-btn--rojo,
.tc-btn.tc-btn--rojo:visited { background: linear-gradient(135deg, #E5262D 0%, var(--tc-rojo-hover) 100%); color: #ffffff; box-shadow: 0 8px 20px rgba(215, 25, 32, .28); }
.tc-btn.tc-btn--rojo:hover, .tc-btn.tc-btn--rojo:focus { background: var(--tc-rojo-hover); color: #ffffff; }

.tc-btn.tc-btn--oscuro,
.tc-btn.tc-btn--oscuro:visited { background: var(--tc-oscuro); color: #ffffff; }
.tc-btn.tc-btn--oscuro:hover, .tc-btn.tc-btn--oscuro:focus { background: var(--tc-oscuro-hover); color: #ffffff; }

.tc-btn.tc-btn--naranjo,
.tc-btn.tc-btn--naranjo:visited { background: var(--tc-naranjo); color: #ffffff; }
.tc-btn.tc-btn--naranjo:hover, .tc-btn.tc-btn--naranjo:focus { background: var(--tc-naranjo-hover); color: #ffffff; }

.tc-btn.tc-btn--whatsapp,
.tc-btn.tc-btn--whatsapp:visited { background: var(--tc-verde); color: #ffffff; box-shadow: 0 8px 20px rgba(30, 190, 90, .3); }
.tc-btn.tc-btn--whatsapp:hover, .tc-btn.tc-btn--whatsapp:focus { background: var(--tc-verde-hover); color: #ffffff; }

.tc-btn:focus-visible { outline: 3px solid var(--tc-navy); outline-offset: 3px; }

/* Grupo de botones lado a lado */
.tc-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.tc-btns--centro { justify-content: center; }

/* =========================================================
   PLUGINS QUE SE MANTIENEN (rescatado del CSS personalizado)
   ========================================================= */
/* Portfolio Filter Gallery (Trabajos realizados) */
.pfg-item-caption { background-color: #F2F2F2 !important; text-align: center; }
.pfg-grid--grid .pfg-item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: 1px solid var(--tc-borde);
	border-radius: 8px;
}
input.filtr_search { display: none; }


/* =========================================================
   CONVIVENCIA CON EL CSS PERSONALIZADO ANTIGUO
   Mientras haya páginas en Elementor, el CSS del Personalizador sigue activo.
   Estas reglas evitan que choque con el diseño nuevo. Cuando se vacíe el
   CSS personalizado (al final de la migración) se pueden quitar.
   ========================================================= */
body .site-header { box-shadow: 0 2px 10px rgba(20, 27, 52, .04); border-bottom: 1px solid #EAEDF3; }
body nav#sticky-navigation { box-shadow: 0 4px 16px rgba(20, 27, 52, .08); border-bottom: 0; }
.main-navigation button.menu-toggle {
	color: var(--tc-navy) !important;
	background-color: #ffffff !important;
}
/* Enlaces de las páginas nuevas en rojo (en las de Elementor se mantiene el naranjo antiguo) */
body:where(:not(.elementor-page)) .inside-article a { color: var(--tc-rojo); }
body:where(:not(.elementor-page)) .inside-article a:hover { color: var(--tc-rojo-hover); }

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* Notebook */
@media (max-width: 1366px) {
	.main-navigation .main-nav ul li a { padding-inline: 10px; }
}

/* Notebook pequeño */
@media (max-width: 1200px) {
	.main-navigation .main-nav ul li a { padding-inline: 8px; font-size: 14px; }
	.tc-topbar__group { gap: 14px; }
}

/* Tablet */
@media (max-width: 1024px) {
	.site-header .inside-header { min-height: 68px; }
	.main-navigation .main-nav ul li a { line-height: 1.4; }
}

/* Celular */
@media (max-width: 767px) {
	.tc-topbar__desktop { display: none; }
	.tc-topbar__mobile {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 6px 8px;
		text-align: center;
	}
	.tc-topbar__mobile a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 44px;
		font-size: 12px;
	}
	.tc-topbar__mobile .tc-icon { color: var(--tc-rojo); }
	.tc-kicker { font-size: 16px; }
	.tc-btns { flex-direction: column; align-items: stretch; }
}

/* Celular pequeño */
@media (max-width: 380px) {
	.tc-wrap { padding-inline: 16px; }
	.tc-topbar__mobile a { font-size: 11px; }
	.tc-btn { padding: 0 18px; font-size: 15px; }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.tc-btn, .tc-btn::after { transition: none; }
	.tc-btn:hover::after { transform: none; }
}