/*
Theme Name: Attornix Child
Theme URI: http://cmsmasters.net/attornix-child/
Author: cmsmasters
Author URI: http://cmsmasters.net/
Description: Attornix Child Theme
Template: attornix
Version: 1.0.0
License:
License URI:
Text Domain: attornix-child
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/


/* ==========================================================================
   ARCHITECTURAL DESIGN SYSTEM
   
   Principios:
   - Geometria limpia: esquinas rectas, sin border-radius
   - Espacios generosos: el vacio comunica
   - Acento #fff555 usado como linea, nunca como fondo
   - Sin saltos ni movimientos: solo cambios de opacidad y color
   - Tipografia con jerarquia fuerte
   ========================================================================== */


/* ==========================================================================
   0. FUNDAMENTOS
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   1. HEADER - barra limpia, geometrica
   ========================================================================== */

.header_mid .mid_nav_wrap {
	padding-left: 16% !important;
}

#header {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.cmsmasters_header_button {
	color: #ffffff !important;
	border-radius: 0 !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	font-size: 12px !important;
}

#navigation > li > a {
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 13px !important;
}

#navigation .sub-menu {
	border-radius: 0 !important;
	border-top: 2px solid #fff555;
}


/* ==========================================================================
   2. HEADINGS - jerarquia tipografica fuerte
   ========================================================================== */

.cmsmasters_heading {
	letter-spacing: -0.02em;
}

.cmsmasters_heading_divider {
	background: #fff555 !important;
	height: 3px !important;
	width: 50px !important;
}


/* ==========================================================================
   3. COUNTERS / STATS - numeros con peso
   ========================================================================== */

.cmsmasters_counter .cmsmasters_counter_counter_wrap {
	font-weight: 800;
	letter-spacing: -0.03em;
}

.cmsmasters_counter .cmsmasters_counter_title {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px !important;
	font-weight: 600;
	opacity: 0.7;
}


/* ==========================================================================
   4. ICON BOXES / SERVICIOS - tarjetas arquitectonicas
   ========================================================================== */

.cmsmasters_icon_box {
	border-radius: 0 !important;
	border: 1px solid rgba(0, 0, 0, 0.06);
	position: relative;
	transition: border-color 0.3s ease;
}

.cmsmasters_icon_box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 0;
	background: #fff555;
	transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmsmasters_icon_box:hover {
	border-color: rgba(0, 0, 0, 0.12);
}

.cmsmasters_icon_box:hover::before {
	height: 100%;
}

.cmsmasters_icon_box .icon_box_heading {
	letter-spacing: -0.01em;
}

.cmsmasters_icon_box .cmsmasters_icon_box_icon {
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.cmsmasters_icon_box:hover .cmsmasters_icon_box_icon {
	opacity: 1;
}


/* ==========================================================================
   5. TESTIMONIOS - citas con acento vertical
   ========================================================================== */

.cmsmasters_quotes_slider .cmsmasters_quote {
	border-radius: 0 !important;
}

.cmsmasters_quote_inner {
	border-radius: 0 !important;
	position: relative;
}

.cmsmasters_quote_content {
	font-style: italic;
	line-height: 1.85;
	font-size: 16px;
	position: relative;
	padding-left: 20px;
	border-left: 3px solid #fff555;
}

.cmsmasters_quote_inner:hover > .cmsmasters_quote_content {
	color: #ffffff !important;
}

.cmsmasters_quote_header h5,
.cmsmasters_quote_title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px !important;
}

.cmsmasters_quote_subtitle {
	opacity: 0.6;
	font-size: 12px !important;
	letter-spacing: 0.02em;
}

.cmsmasters_quotes_slider .owl-buttons div {
	border-radius: 0 !important;
}


/* ==========================================================================
   6. BLOG / POSTS - tarjetas con bordes limpios
   ========================================================================== */

.cmsmasters_post_default {
	border-radius: 0 !important;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cmsmasters_post_default:hover {
	border-color: rgba(0, 0, 0, 0.12);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.cmsmasters_post_default .cmsmasters_post_cont {
	border-radius: 0 !important;
}

.cmsmasters_post_default .cmsmasters_post_img {
	border-radius: 0 !important;
	overflow: hidden;
}

.cmsmasters_post_default .cmsmasters_post_img img {
	transition: transform 0.6s ease;
}

.cmsmasters_post_default:hover .cmsmasters_post_img img {
	transform: scale(1.03);
}

.cmsmasters_post_category a {
	color: #ffffff !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
	font-weight: 700;
}

.cmsmasters_post_read_more {
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px !important;
	font-weight: 700 !important;
}


/* ==========================================================================
   7. CLIENTS / LOGOS
   ========================================================================== */

.cmsmasters_clients_slider img,
.cmsmasters_clients_grid img {
	filter: grayscale(100%);
	opacity: 0.5;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.cmsmasters_clients_slider img:hover,
.cmsmasters_clients_grid img:hover,
.cmsmasters_clients_slider .cmsmasters_clients_item:hover img,
.cmsmasters_clients_grid .cmsmasters_clients_item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}


/* ==========================================================================
   8. BOTONES - rectangulares, uppercase, precisos
   ========================================================================== */

.cmsmasters_button {
	border-radius: 0 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	font-weight: 700 !important;
	font-size: 12px !important;
}

.cmsmasters_button:hover,
input[type=submit]:hover,
.cmsmasters_post_read_more:hover {
	color: #ffffff !important;
}

input[type=submit] {
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}


/* ==========================================================================
   9. FORMULARIOS - lineas limpias
   ========================================================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.cmsmasters_contact_form input[type="text"],
.cmsmasters_contact_form input[type="email"],
.cmsmasters_contact_form textarea {
	border-radius: 0 !important;
	border: none !important;
	border-bottom: 1px solid #e1e1e1 !important;
	padding: 14px 0 !important;
	background: transparent !important;
	transition: border-color 0.3s ease !important;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.cmsmasters_contact_form input:focus,
.cmsmasters_contact_form textarea:focus {
	border-bottom-color: #222222 !important;
	outline: none !important;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	opacity: 0.5;
}


/* ==========================================================================
   10. DIVIDERS / SEPARADORES
   ========================================================================== */

.cmsmasters_divider {
	opacity: 0.15;
}


/* ==========================================================================
   11. PAGE HEADING / BREADCRUMBS
   ========================================================================== */

.headline {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.headline .entry-title {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cmsmasters_breadcrumbs {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
}


/* ==========================================================================
   12. WHATSAPP CTA BAR - integrada debajo del hero
   ========================================================================== */

.wa-bar {
	background: #111418;
	padding: 0;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.wa-bar__inner {
	max-width: 100%;
	margin: 0;
	padding: 42px 8%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.wa-bar__accent {
	width: 3px;
	min-height: 50px;
	align-self: stretch;
	background: #fff555;
	flex-shrink: 0;
}

.wa-bar__content {
	flex: 1;
}

.wa-bar__title {
	color: #ffffff;
	font-family: 'Source Serif Pro', serif;
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 4px 0;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.wa-bar__text {
	color: rgba(255, 255, 255, 0.4);
	font-family: 'Nunito Sans', sans-serif;
	font-size: 13px;
	margin: 0;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wa-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	color: #ffffff !important;
	padding: 14px 40px;
	border-radius: 0;
	text-decoration: none !important;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.25);
	flex-shrink: 0;
	transition: background 0.3s ease, border-color 0.3s ease !important;
}

.wa-bar__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.6);
	color: #ffffff !important;
	text-decoration: none !important;
}

.wa-bar__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.7;
}


/* ==========================================================================
   13. FOOTER - oscuro, espaciado, con acento
   ========================================================================== */

.footer {
	position: relative;
}

.footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 8%;
	width: 50px;
	height: 3px;
	background: #fff555;
}

.footer_copyright {
	font-size: 12px;
	opacity: 0.5;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.footer_nav a {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	font-weight: 600;
}

.web_dev {
	font-size: 11px;
	opacity: 0.35;
	margin-top: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}


/* ==========================================================================
   14. SCROLL TO TOP
   ========================================================================== */

#slide_top {
	border-radius: 0 !important;
	width: 44px !important;
	height: 44px !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
}


/* ==========================================================================
   15. SELECTION COLOR
   ========================================================================== */

::selection {
	background: #fff555;
	color: #111418;
}

::-moz-selection {
	background: #fff555;
	color: #111418;
}


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media only screen and (max-width: 600px) {
	.service_heading h2 {
		font-size: 26px !important;
		line-height: 32px !important;
	}

	.wa-bar__inner {
		flex-direction: column;
		text-align: center;
		gap: 20px;
		padding: 30px 20px;
	}

	.wa-bar__accent {
		width: 30px;
		min-height: 3px;
		height: 3px;
		align-self: center;
	}

	.wa-bar__link {
		width: 100%;
		justify-content: center;
	}

	.wa-bar__title {
		font-size: 18px;
	}

	.cmsmasters_quote_content {
		padding-left: 15px;
	}
}

@media only screen and (min-width: 600px) {
	.cmsmasters_icon_box {
		height: 200px;
	}
}

@media only screen and (max-width: 768px) {
	.header_mid .mid_nav_wrap {
		padding-left: 0 !important;
	}
}

@media only screen and (max-width: 992px) {
	.web_dev {
		text-align: center;
	}

	.wa-bar__inner {
		padding: 32px 5%;
		gap: 24px;
	}
}

@media only screen and (min-width: 992px) {
	.cmsmasters_icon_box {
		height: 150px;
	}
}

@media only screen and (max-width: 1440px) {
	.header_mid .mid_nav_wrap {
		padding-left: 8% !important;
	}
}

.sgr-infotext {
	display: none !important;
}