/* =========================================================================
   AGENCY CAMO — Sistema visual de marca para Divi
   "Infiltrarse para transformar"
   ========================================================================= */

:root{
	--cc-black: #0b0b0b;
	--cc-black-2: #141410;
	--cc-panel: #1a1a15;
	--cc-olive: #4a4a34;
	--cc-olive-dark: #33321f;
	--cc-tan: #a29a72;
	--cc-yellow: #f2c230;
	--cc-yellow-dark: #d9a91a;
	--cc-cream: #efe9dd;
	--cc-green-line: #4a7a55;
	--cc-white: #ffffff;
	--cc-gray: #a8a8a0;
	--cc-gray-dark: #6f6f68;

	--font-display: 'Luckiest Guy', cursive;
	--font-heading: 'Anton', 'Arial Narrow', sans-serif;
	--font-body: 'Inter', Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   Base / reset ligero
   ------------------------------------------------------------------------- */
body{
	background-color: var(--cc-black) !important;
	font-family: var(--font-body);
	color: var(--cc-white);
}
h1, h2, h3, h4, h5, h6{
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cc-white);
	line-height: 1.08;
}
p{ font-family: var(--font-body); }
::selection{ background: var(--cc-yellow); color: #000; }
a{ transition: color .2s ease, background-color .2s ease, transform .2s ease; }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
#main-header,
#top-header{
	background-color: var(--cc-black) !important;
	border-bottom: 3px solid #000;
}
#main-header .logo_container img{
	max-height: 46px;
	width: auto;
}
#top-menu-nav,
#top-menu{
	display: flex;
	align-items: center;
}
#top-menu > li > a{
	font-family: var(--font-heading);
	text-transform: uppercase;
	color: var(--cc-white) !important;
	font-size: 15px;
	letter-spacing: 0.5px;
}
#top-menu > li > a:hover{ color: var(--cc-yellow) !important; }
#et-top-navigation .et-cart-info,
#et-top-navigation nav > ul > li > a{ color: var(--cc-white); }
.mobile_menu_bar:before{ color: var(--cc-white) !important; }
.et_mobile_menu{
	background: var(--cc-black-2) !important;
	border-top: 2px solid var(--cc-yellow);
}
.et_mobile_menu li a{ color: var(--cc-white) !important; font-family: var(--font-heading); text-transform: uppercase; }

/* Logo de texto de respaldo (si no se sube imagen de logo en el Customizer) */
.cc-logo-text{
	font-family: var(--font-display);
	font-size: 30px;
	color: var(--cc-black);
	-webkit-text-stroke: 3px var(--cc-white);
	paint-order: stroke fill;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   Fondos de sección reutilizables
   ------------------------------------------------------------------------- */
.cc-camo-bg{
	position: relative;
	background-color: var(--cc-black) !important;
	isolation: isolate;
}
.cc-camo-bg::before{
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--camo-dark-url);
	background-size: 340px 340px;
	background-repeat: repeat;
	opacity: 0.55;
	z-index: 0;
	pointer-events: none;
}
.cc-camo-bg > *{ position: relative; z-index: 1; }

.cc-olive-bg{
	position: relative;
	background-color: var(--cc-olive) !important;
	isolation: isolate;
}
.cc-olive-bg::before{
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--camo-olive-url);
	background-size: 340px 340px;
	background-repeat: repeat;
	opacity: 0.9;
	z-index: 0;
	pointer-events: none;
}
.cc-olive-bg > *{ position: relative; z-index: 1; }

.cc-black-bg{ background-color: var(--cc-black) !important; }
.cc-panel-bg{ background-color: var(--cc-panel) !important; }

.cc-cream-bg{
	background-color: var(--cc-cream) !important;
}
.cc-cream-bg h1, .cc-cream-bg h2, .cc-cream-bg h3,
.cc-cream-bg p, .cc-cream-bg li{ color: #17170f !important; }

/* -------------------------------------------------------------------------
   Tipografía de marca / utilidades de texto
   ------------------------------------------------------------------------- */
.cc-eyebrow{
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--cc-yellow);
	text-transform: uppercase;
	margin-bottom: 10px;
}
.cc-h1{
	font-family: var(--font-heading);
	font-size: 58px;
	text-transform: uppercase;
	color: var(--cc-white);
}
.cc-h2{
	font-family: var(--font-heading);
	font-size: 42px;
	text-transform: uppercase;
	color: var(--cc-white);
}
.cc-h3{
	font-family: var(--font-heading);
	font-size: 26px;
	text-transform: uppercase;
	color: var(--cc-white);
}
.cc-lead{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: #e7e7e2;
}
.cc-highlight{ color: var(--cc-yellow); }
.cc-divider{
	display: block;
	width: 70px;
	height: 4px;
	background: var(--cc-yellow);
	margin: 18px 0 24px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Botones (override et_pb_button)
   ------------------------------------------------------------------------- */
.cc-btn .et_pb_button,
a.cc-btn{
	background-color: var(--cc-yellow) !important;
	color: #0b0b0b !important;
	font-family: var(--font-heading) !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 40px !important;
	border: none !important;
	padding: 14px 30px !important;
	font-size: 14px !important;
	box-shadow: none !important;
}
.cc-btn .et_pb_button:hover,
a.cc-btn:hover{
	background-color: var(--cc-white) !important;
	color: #0b0b0b !important;
	transform: translateY(-2px);
}
.cc-btn-outline .et_pb_button{
	background-color: transparent !important;
	color: var(--cc-white) !important;
	border: 2px solid var(--cc-white) !important;
	border-radius: 40px !important;
	font-family: var(--font-heading) !important;
	text-transform: uppercase;
	padding: 12px 28px !important;
}
.cc-btn-outline .et_pb_button:hover{
	background-color: var(--cc-white) !important;
	color: #0b0b0b !important;
}

/* -------------------------------------------------------------------------
   Hero (portada)
   ------------------------------------------------------------------------- */
.cc-hero{
	min-height: 92vh;
	display: flex;
	align-items: center;
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}
.cc-hero .cc-h1{ font-size: 64px; }
.cc-hero .cc-lead{ font-size: 20px; }
.cc-scroll-hint{
	font-family: var(--font-heading);
	color: var(--cc-gray);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Tarjetas de servicios
   ------------------------------------------------------------------------- */
.cc-service-card{
	background: var(--cc-panel);
	border: 1px solid #2a2a22;
	border-radius: 14px;
	padding: 30px 24px;
	height: 100%;
	transition: border-color .2s ease, transform .2s ease;
}
.cc-service-card:hover{
	border-color: var(--cc-yellow);
	transform: translateY(-4px);
}
.cc-service-card h4,
.cc-service-card .et_pb_module_header{
	font-family: var(--font-heading);
	text-transform: uppercase;
	color: var(--cc-white) !important;
	font-size: 18px;
	margin-bottom: 8px;
}
.cc-service-card p{ color: var(--cc-gray); font-size: 14px; }
.cc-service-card .et_pb_image_wrap img{ max-width: 42px; margin-bottom: 14px; }

/* -------------------------------------------------------------------------
   Casos de éxito
   ------------------------------------------------------------------------- */
.cc-case-card{
	background: var(--cc-panel);
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #2a2a22;
	height: 100%;
}
.cc-case-card .et_pb_image_wrap img{ border-radius: 0; }
.cc-case-card .et_pb_text_inner,
.cc-case-card .et_pb_text{ padding: 20px 22px; }
.cc-case-card h4{ font-family: var(--font-heading); font-size: 18px; color: var(--cc-yellow); }
.cc-case-card p{ color: var(--cc-gray); font-size: 14px; margin: 0; }
.cc-case-number{
	font-family: var(--font-heading);
	color: var(--cc-yellow);
	font-size: 40px;
	opacity: .5;
}

/* -------------------------------------------------------------------------
   Proceso (4 pasos)
   ------------------------------------------------------------------------- */
.cc-process-step{ text-align: center; padding: 10px 14px; }
.cc-process-step .cc-case-number{ display:block; margin-bottom: 6px; }
.cc-process-step h4{
	font-family: var(--font-heading);
	color: var(--cc-white);
	font-size: 17px;
	margin: 10px 0 8px;
}
.cc-process-step p{ color: var(--cc-gray); font-size: 14px; }

/* -------------------------------------------------------------------------
   Diferencial (tabla comparativa)
   ------------------------------------------------------------------------- */
.cc-compare-card{
	border-radius: 14px;
	padding: 34px 30px;
	height: 100%;
}
.cc-compare-card.cc-them{
	background: var(--cc-cream);
}
.cc-compare-card.cc-us{
	background: var(--cc-black-2);
	border: 2px solid var(--cc-yellow);
}
.cc-compare-card h4{
	font-family: var(--font-heading);
	font-size: 18px;
	margin-bottom: 18px;
}
.cc-compare-card.cc-them h4{ color: #17170f; }
.cc-compare-card.cc-us h4{ color: var(--cc-yellow); }
ul.cc-list-cross, ul.cc-list-check{
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.cc-list-cross li, ul.cc-list-check li{
	position: relative;
	padding-left: 30px;
	margin-bottom: 14px;
	font-size: 15px;
	line-height: 1.4;
}
ul.cc-list-cross li{ color: #3b3b30; }
ul.cc-list-cross li::before{
	content: "\2715";
	position: absolute;
	left: 0;
	top: 0;
	color: #b23c2f;
	font-weight: 800;
}
ul.cc-list-check li{ color: #e7e7e2; }
ul.cc-list-check li::before{
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cc-yellow);
	font-weight: 800;
}

/* -------------------------------------------------------------------------
   Impacto en números (counters)
   ------------------------------------------------------------------------- */
.cc-stat-block{ text-align: center; }
.cc-stat-block .cc-counter-number{
	display: block;
	font-family: var(--font-heading);
	color: var(--cc-yellow);
	font-size: 52px;
	line-height: 1;
	margin-bottom: 8px;
}
.cc-stat-block .cc-counter-label{
	display: block;
	font-family: var(--font-body);
	color: var(--cc-gray);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.cc-stat-block .et_pb_counter_amount,
.cc-stat-block .percent,
.cc-stat-block .percent-value{
	font-family: var(--font-heading) !important;
	color: var(--cc-yellow) !important;
	font-size: 52px !important;
}
.cc-stat-block .et_pb_number_counter_title,
.cc-stat-block .et_pb_module_header{
	font-family: var(--font-body) !important;
	color: var(--cc-gray) !important;
	font-size: 14px !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.cc-stat-block .et_pb_counter_container_top,
.cc-stat-block .et_pb_counter_container{ background-color: transparent !important; }
.cc-stat-block .et_pb_counter_amount span:before{ background-color: var(--cc-yellow) !important; }

/* -------------------------------------------------------------------------
   Clientes (logos)
   ------------------------------------------------------------------------- */
.cc-client-logo{
	text-align: center;
	font-family: var(--font-heading);
	font-size: 20px;
	color: var(--cc-gray);
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: .75;
	filter: grayscale(1);
	transition: opacity .2s ease, color .2s ease;
}
.cc-client-logo:hover{ opacity: 1; color: var(--cc-white); }

/* -------------------------------------------------------------------------
   Equipo
   ------------------------------------------------------------------------- */
.cc-team-card{ text-align: center; }
.cc-team-avatar{
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: var(--cc-panel);
	border: 3px solid var(--cc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	font-family: var(--font-heading);
	font-size: 34px;
	color: var(--cc-yellow);
}
.cc-team-card h4{
	font-family: var(--font-heading);
	font-size: 16px;
	color: var(--cc-white);
	margin: 0;
}
.cc-team-card p{ color: var(--cc-gray); font-size: 13px; margin: 2px 0 0; }

/* -------------------------------------------------------------------------
   Blog / insights preview cards
   ------------------------------------------------------------------------- */
.cc-blog-card{
	background: var(--cc-panel);
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #2a2a22;
	height: 100%;
}
.cc-blog-card .et_pb_text{ padding: 18px 20px; }
.cc-blog-tag{
	display: inline-block;
	background: var(--cc-yellow);
	color: #0b0b0b;
	font-family: var(--font-heading);
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 20px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.cc-blog-card h4{ font-size: 17px; color: var(--cc-white); font-family: var(--font-heading); }
.cc-blog-card a.cc-read-more{
	color: var(--cc-yellow);
	font-family: var(--font-heading);
	font-size: 13px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Formulario de contacto
   ------------------------------------------------------------------------- */
.cc-form .et_pb_contact_form_container,
.cc-form.et_pb_contact_form_container{ max-width: 100%; }
.cc-form input[type="text"],
.cc-form input[type="email"],
.cc-form input[type="tel"],
.cc-form textarea,
.cc-form .input{
	background: transparent !important;
	border: 2px solid var(--cc-green-line) !important;
	border-radius: 8px !important;
	color: var(--cc-white) !important;
	font-family: var(--font-body) !important;
	padding: 14px 16px !important;
}
.cc-form ::placeholder{ color: #9db79f !important; opacity: 1; }
.cc-form .et_pb_contact_submit,
.cc-form button[type="submit"]{
	background-color: var(--cc-yellow) !important;
	color: #0b0b0b !important;
	font-family: var(--font-heading) !important;
	text-transform: uppercase;
	border-radius: 40px !important;
	border: none !important;
	padding: 14px 34px !important;
}
.cc-form .et_pb_contact_field_error{
	border-color: #c0392b !important;
}

/* -------------------------------------------------------------------------
   Portafolio de proyectos (módulo Divi Portfolio, CPT project)
   ------------------------------------------------------------------------- */
.cc-portfolio .et_pb_portfolio_item{
	background: var(--cc-panel);
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #2a2a22;
}
.cc-portfolio .et_pb_portfolio_image{ margin-bottom: 0 !important; }
.cc-portfolio h2, .cc-portfolio h3,
.cc-portfolio .entry-title{
	font-family: var(--font-heading) !important;
	color: var(--cc-white) !important;
	font-size: 17px !important;
	padding: 16px 18px 4px;
	text-transform: uppercase;
}
.cc-portfolio .post-meta,
.cc-portfolio p.post-meta{
	color: var(--cc-yellow) !important;
	padding: 0 18px 16px;
	font-size: 12px;
	text-transform: uppercase;
}
.cc-portfolio .et_overlay:before{ color: var(--cc-yellow) !important; }

/* Página single de un proyecto */
.cc-project-hero{ min-height: 50vh; display:flex; align-items:center; }
.single-project .cc-camo-bg h1{ font-family: var(--font-heading); }

/* -------------------------------------------------------------------------
   CTA de contacto (banda inferior tipo "Investiguemos tu terreno")
   ------------------------------------------------------------------------- */
.cc-cta-band{ padding: 90px 0 !important; }
.cc-cta-band .cc-h2{ font-size: 40px; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
#main-footer{
	position: relative;
	background-color: var(--cc-black-2) !important;
	isolation: isolate;
}
#main-footer::before{
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--camo-dark-url);
	background-size: 340px 340px;
	background-repeat: repeat;
	opacity: 0.35;
	z-index: 0;
	pointer-events: none;
}
#main-footer .container{ position: relative; z-index: 1; }
.footer-widget h4{
	font-family: var(--font-heading);
	color: var(--cc-yellow) !important;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0.5px;
}
.footer-widget li, .footer-widget p, .footer-widget a{
	color: #cfcfc7 !important;
	font-family: var(--font-body);
	font-size: 14px;
}
.footer-widget a:hover{ color: var(--cc-yellow) !important; }
#footer-bottom{ background-color: #000000 !important; position: relative; z-index: 1; }
#footer-info, #footer-bottom p{ color: #7a7a72 !important; font-size: 13px; }
.et-social-icons a .et-social-icon:before{ color: var(--cc-white) !important; }
.et-social-icons a:hover .et-social-icon:before{ color: var(--cc-yellow) !important; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 980px){
	.cc-h1{ font-size: 40px; }
	.cc-hero .cc-h1{ font-size: 40px; }
	.cc-h2{ font-size: 30px; }
	.cc-hero{ min-height: auto; padding-top: 40px !important; padding-bottom: 50px !important; }
	.cc-cta-band .cc-h2{ font-size: 28px; }
}