/*
Theme Name: Decaterra 2026
Theme URI: http://decaterra.com/
Description: Theme refactored for Decaterra - WordPress 7.x, PHP 8.4/8.5 & Bootstrap 5.3.3
Author: Bumerang 180 / Decaterra
Version: 2026.0.0
Text Domain: decaterra
*/

/*
==========================================================================
PALETA DE COLORES
Beige:       #A8906A
Café:        #3D2211
Gris oscuro: #4D4D4D
Gris texto:  #656565
==========================================================================
*/

/* Google Fonts Unificado con display=swap */
@import url('https://fonts.googleapis.com/css2?family=Ovo&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700;1,900&display=swap');

/* Iconos */
@import url('styles/icomoon/style.css');

/* ------------------------------------------------------------------------
   1. ESTILOS GENERALES Y RESET
   ------------------------------------------------------------------------ */
body {
	color: #656565;
	font-family: 'Source Sans Pro', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.875rem; /* 14px */
	font-weight: 300;
	line-height: 1.5;
	background-color: #ffffff;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

a:active,
a:hover,
a:focus,
a:visited {
	color: inherit;
	text-decoration: none;
}

a.button,
.btn-decaterra {
	display: inline-block;
	color: #3D2211;
	font-weight: 700;
	margin: 1em 0.5em;
	padding: 7px 1.25em;
	letter-spacing: 1px;
	text-transform: uppercase;
	border: 3px solid #3D2211;
	border-radius: 6px;
	background-color: transparent;
	cursor: pointer;
}

a.button:hover,
.btn-decaterra:hover {
	color: #ffffff;
	background-color: #3D2211;
	border-color: #3D2211;
}

h1 {
	position: relative;
	color: #A8906A;
	font-size: 1.125rem; /* 18px */
	font-weight: 600;
	margin-bottom: 2em;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}

h1::after {
	position: absolute;
	font-family: 'icomoon', sans-serif;
	content: '\e900';
	width: 20%;
	left: 40%;
	bottom: -1.25em;
}

h1.project-title {
	color: #3D2211;
	font-size: 2.25rem; /* 36px */
	font-weight: 900;
	margin: 1em 0;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: left;
}

h1.project-title::after {
	content: none;
}

h2 {
	color: #3D2211;
	font-family: 'Ovo', Georgia, serif;
	font-size: 1.5rem; /* 24px */
	font-weight: 400;
	margin: 0;
	text-align: center;
}

h3 {
	position: relative;
	color: #A8906A;
	font-size: 1.125rem; /* 18px */
	font-weight: 600;
	margin: 1em 0;
	letter-spacing: 1px;
	text-transform: uppercase;
}

p {
	line-height: 1.4;
	text-align: center;
}

strong {
	color: #A8906A;
	font-weight: 400;
}

ul {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

select, 
textarea, 
.form-control {
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #ced4da;
}

/* Accesibilidad Bootstrap 5 */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ------------------------------------------------------------------------
   2. CABECERA Y FOOTER
   ------------------------------------------------------------------------ */
.site-header {
	width: 100%;
	padding: 0 3%;
	text-align: center;
}

.site-header img {
	max-width: 320px;
	margin-top: 1em;
	padding: 1em;
	height: auto;
}

.site-footer {
	color: #ffffff;
	padding: 0;
	text-align: center;
	background-color: #3D2211;
}

.site-footer img {
	margin-bottom: 1em;
	max-width: 280px;
	height: auto;
}

.site-footer p {
	margin-bottom: 0;
}

.site-footer .copyright {
	padding: 1.5em 4%;
	background-color: rgba(0, 0, 0, 0.5);
}

.site-footer .learn-more {
	padding: 1.5em 4%;
}

/* ------------------------------------------------------------------------
   3. FORMULARIOS DE CONTACTO (CF7)
   ------------------------------------------------------------------------ */
.contact-form-section label {
	font-weight: 300;
	width: 100%;
}

.contact-form-section input[type="text"],
.contact-form-section input[type="email"],
.contact-form-section textarea {
	width: 100%;
	margin: 0.5em 0 1em;
	border-radius: 0;
	border: 1px solid #cccccc;
	padding: 0.5em 1em;
}

.contact-form-section input[type="submit"],
.contact-form-section .btn {
	color: #3D2211;
	font-weight: 700;
	margin-top: 1em;
	padding: 7px 1.25em;
	letter-spacing: 1px;
	text-transform: uppercase;
	background-color: transparent;
	border: 3px solid #3D2211;
	border-radius: 6px;
	width: auto;
	transition: all 0.2s ease-in-out;
}

.contact-form-section input[type="submit"]:hover,
.contact-form-section .btn:hover {
	color: #ffffff;
	background-color: #3D2211;
}

/* ------------------------------------------------------------------------
   4. CONTENIDOS Y SECCIONES
   ------------------------------------------------------------------------ */
.content-section {
	padding: 0 4%;
	text-align: center;
}

.content-section.contact-form {
	padding: 3em 4%;
	background-color: rgba(0, 0, 0, 0.05);
}

.content-section img {
	max-width: 100%;
	height: auto;
	margin: 1em 0;
}

.content-contact p.email,
.content-contact p.telphone,
.content-contact p.ubication {
	margin-bottom: 0;
}

.content-contact p.email::before,
.content-contact p.telphone::before,
.content-contact p.ubication::before {
	font-family: 'icomoon', sans-serif;
	color: #3D2211;
	margin-right: 0.5em;
	vertical-align: middle;
}

.content-contact p.email::before {
	content: '\e901';
}

.content-contact p.telphone::before {
	content: '\e902';
}

.content-contact p.ubication::before {
	content: '\e903';
}

/* Lista de Desarrollos e Iconos */
.development h2 {
	color: #4D4D4D;
	font-size: 1.125rem;
}

.development img {
	border-top: 5px solid #A8906A;
}

.icons img {
	margin: 1em 0.5em;
}

.team {
	padding: 0;
	text-align: center;
}

.team img {
	display: inline-block;
	max-width: 90px;
	margin: 1em 0.5em 0.25em;
	border-radius: 50%;
}

/* Slideshow */
.slideshow-section {
	padding: 0;
	background-color: #ffffff;
}

.slideshow-section img {
	width: 100%;
	height: auto;
}

/* Imagen Superior (Héroe) */
.top-image {
	padding: 0;
	background: url('images/projects.jpg') center no-repeat;
	background-size: cover;
}

.top-image .filter {
	padding: 4em 4%;
	background-color: rgba(0, 0, 0, 0.5);
}

.top-image .filter h3,
.top-image .filter p {
	color: #ffffff;
	margin-bottom: 0.2em;
}

/* Proyectos */
.project-row {
	border-radius: 6px;
	overflow: hidden;
}

.project-image {
	position: relative;
	min-height: 300px;
}

.project-image .filter {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 0;
}

.project-logo {
	position: relative;
	z-index: 1;
	max-width: 180px;
}

/* ------------------------------------------------------------------------
   5. RESPONSIVE DESIGN & BOOTSTRAP 5 BREAKPOINTS
   ------------------------------------------------------------------------ */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.contact-form-section input[type="text"],
	.contact-form-section input[type="email"],
	.contact-form-section textarea {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}

	h1 {
		font-size: 1.25rem;
	}

	h1.project-title {
		font-size: 2.25rem;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.site-header img {
		max-width: 360px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}