.flip-container {
	perspective: 1000px;
}
.flip-card {
	width: 800px;
	height: 450px;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.6s;
}
.flip-card .front, .flip-card .back {
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.flip-card .front {
	background-image: url('https://www.cpcengineering.com/assets/img/engineering-services/Compact-Solution_evolution.png'); /* Cambia esto a la ruta de tu imagen */
	background-size: cover;
}
.flip-card .back {
	background-color: #cccccc;
	color: white;
	display: block;
	padding: 20px;
	text-align: left;
	transform: rotateY(180deg);
}
.flip-container:hover .flip-card {
	transform: rotateY(180deg);
}

.image-container {
	position: relative;
	display: inline-block;
}
.fade-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	color: white;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 10px;
	border-radius: 5px;
}
.image-container:hover .fade-text {
	display: block;
	animation: fadeIn 1s;
}

.solution-box {
	font-family: "Roboto", Sans-serif;
	background-color: #e6f7ff;
	border-left: 5px solid #1a5f7a;
	padding: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.card {
	margin-bottom: 20px;
	border: 2px solid rgba(0, 0, 0, 0.2); /* Borde semitransparente */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}
.card img {
	height: 200px;
	object-fit: cover;
}

.rounded-header1 {
	font-size:20px;
	background-color: #a00202; /* Color de fondo */
	color: #fff;
	padding: 10px; /* Espaciado interno */
	margin-bottom: 10px; /* Espaciado inferior */
	width: 100%; /* Ocupa el ancho completo de la columna */
}

.rounded-header2 {
	font-size:20px;
	background-color: #A9A9A9; /* Color de fondo */
	padding: 10px; /* Espaciado interno */
	margin-bottom: 10px; /* Espaciado inferior */
	width: 100%; /* Ocupa el ancho completo de la columna */
}

.rounded-header3 {
	font-size:20px;
	background-color: #a00202; /* Color de fondo */
	color: #fff;
	padding: 10px; /* Espaciado interno */
	margin-bottom: 10px; /* Espaciado inferior */
	width: 100%; /* Ocupa el ancho completo de la columna */
}

.rounded-header4 {
	font-size:20px;
	background-color: #A9A9A9; /* Color de fondo */
	padding: 10px; /* Espaciado interno */
	margin-bottom: 10px; /* Espaciado inferior */
	width: 100%; /* Ocupa el ancho completo de la columna */
}

.rounded-header5 {
	font-size:20px;
	background-color: #a00202; /* Color de fondo */
	color: #fff;
	padding: 10px; /* Espaciado interno */
	margin-bottom: 10px; /* Espaciado inferior */
	width: 100%; /* Ocupa el ancho completo de la columna */
}

.list {
	position: relative;
}
.list h2 {
	color: #fff;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.list ul {
	position: relative;
}
.list ul li {
	position: relative;
	left: 0;
	color: #111;
	list-style: none;
	margin: 4px 0;
	border-left: 2px solid #a00202;
	transition: 0.5s;
	cursor: pointer;
}
.list ul li:hover {
	left: 10px;
}
.list ul li span {
	font-size:14px;
	position: relative;
	padding: 8px;
	padding-left: 12px;
	display: inline-block;
	z-index: 1;
	transition: 0.5s;
}
.list ul li:hover span {
	color: #eee;
}
.list ul li:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: #a00202;
	transform: scaleX(0);
	transform-origin: left;
	transition: 0.5s;
}
.list ul li:hover:before {
	transform: scaleX(1);
}

.navbar-area .dropdown-menu {
	min-width: 500px; /* Cambia según lo necesario */
	padding: 10px;    /* Para que los elementos no se vean apretados */
	border-radius: 0; /* Elimina bordes redondeados */
}

.navbar-area .dropdown-menu {
	transition: all 0.3s ease-in-out;
}

.navbar-area .dropdown-menu.show {
	max-height: 400px; /* Limita el crecimiento */
	overflow: hidden;  /* Oculta elementos fuera del área visible */
}

ul, ol {
	font-size:16px;
	font-family:"Roboto", Sans-serif;
}



h4 {
	line-height:2;
}
h5 {
	margin-bottom: 15px;
	font-size: 18px;
}
p {
	text-align:justify;
	font-size: 14px;
}	
ul, ol {
	font-size:14px;
	font-family:"Roboto", Sans-serif;
}
ul {
	line-height:1.8;
	font-family:Roboto, Sans serif;
}

.article-quote--techno {
	font-family: 'Roboto Mono', monospace;
	font-size: 1.2rem;
	border-left: 4px solid #a00202;
	padding-left: 20px;
	margin: 0 0 30px 0;
	color: #333;
	background: #f9f9f9;
}

.article-quote--cleanline {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.1rem;
	border-bottom: 2px solid #444;
	margin: 0 auto 40px auto;
	padding: 10px 20px;
	text-align: center;
	color: #222;
}

.article-quote--boldframe {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.3rem;
	background: #eeeeee;
	border: 2px solid #a00202;
	padding: 15px 25px;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
	margin: 0 0 30px 0;
}

.article-quote--leftbar {
	font-family: 'PT Sans', sans-serif;
	font-style: italic;
	font-size: 1.2rem;
	border-left: 6px solid #a00202;
	padding: 15px 20px;
	margin: 0 0 40px 0;
	background: #fafafa;
	color: #111;
}

.article-quote--engineering-block {
	font-family: 'Titillium Web', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1rem;
	color: #fff;
	background: #a00202;
	padding: 15px 25px;
	text-align: center;
	margin: 0 0 30px 0;
}

.article-quote--framework {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.15rem;
	background: #f2f2f2;
	border: 1px solid #d0d0d0;
	padding: 18px 30px;
	margin: 0 0 30px 0;
	color: #333;
	border-radius: 4px;
}

.article-quote--gridline {
	font-family: 'Lato', sans-serif;
	font-size: 1.1rem;
	padding: 20px;
	margin: 0 0 40px 0;
	border-top: 1px dashed #888;
	border-bottom: 1px dashed #888;
	color: #222;
	background: #fcfcfc;
}

.article-quote--blockdark {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.2rem;
	color: #ffffff;
	background: #1a1a1a;
	padding: 20px 25px;
	text-align: center;
	letter-spacing: 0.5px;
	margin: 0 0 30px 0;
}

.article-quote--modular {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	padding: 15px 20px;
	margin: 0 0 30px 0;
	border: 3px double #a00202;
	background: #fff;
	color: #111;
}

.article-quote--techplate {
	font-family: 'Share Tech Mono', monospace;
	font-size: 1.1rem;
	background: #e6e6e6;
	border-left: 4px solid #a00202;
	padding: 12px 20px;
	color: #2a2a2a;
	margin: 0 0 30px 0;
}

.article-section strong {
	font-size: 14px;
	font-weight: 700; /* mantiene la negrita */
}

.article-quote {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;                
	font-size: 1.6rem;
	color: #303030;                  
	background-color: #e0e0e0;       
	border-left: 8px solid #A00202;  
	border-right: 8px solid #A00202; 
	padding: 1.2rem 2rem;
	margin-bottom: 2.5rem;
	margin-left:50px;
	margin-right:50px;
	box-shadow: 0 6px 8px rgba(57, 73, 171, 0.2);
	border-radius: 6px;
	max-width: 820px;
	line-height: 1.4;
	text-align: center;
	font-style:italic;
}

h5.custom-arrow {
	position: relative;
	padding: 12px 32px 12px 50px;  /* espacio para flechas y aire */
	font-weight: 700;
	font-size: 1.3rem;
	color: #a00202;
	background: transparent;
	display: inline-block;
	cursor: pointer;
	transition: all 0.3s ease;
	clip-path: none;
}

/* Flechas más finas, duplicadas */
h5.custom-arrow::before {
	content: "➤➤";
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #a00202;
	font-size: 1.1rem;
	letter-spacing: -2px;
	transition: color 0.3s ease;
	user-select: none;
	pointer-events: none;
}

/* Efecto al pasar el ratón: fondo rojo con forma de flecha */
h5.custom-arrow:hover {
	color: white;
	background: #a00202;
	clip-path: polygon(
	0 0, 
	calc(100% - 15px) 0, 
	100% 50%, 
	calc(100% - 15px) 100%, 
	0 100%
	);
	padding-right: 36px; /* margen derecho para respirar */
}

/* Cambia color de las flechas */
h5.custom-arrow:hover::before {
	color: white;
}

.featured-list {
	border: 4px solid #b30000;
	padding-top:20px;
	padding-left: 30px;
	padding-right:50px;
	padding-bottom:10px;
	text-align: justify;
	margin-left:50px;
	margin-right:50px;
	background-image: url('https://www.cpcengineering.com/assets/img/Background-Featured.png'); /* Reemplaza con tu URL o ruta local */
	background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
	background-repeat: no-repeat; /* Evita que se repita la imagen */
	background-attachment: fixed; /* Hace que el fondo quede fijo al hacer scroll */
	background-position: center center; /* Centra la imagen */
}

/* En pantallas menores a 768px */
@media (max-width: 767.98px) {
	.featured-list {
		padding: 12px;
		margin-bottom: 20px;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		background-color: transparent;
	}
}

@media (max-width: 767.98px) {
	.featured-list ul{
		padding-left:10px;
	}
}

@media (max-width: 920px) {
	.article-quote {
		margin-left: 0;
		margin-right: 0;
		padding-left:10px;
		padding-right:10px;
		font-size:1.4rem;
	}
}

:root{
	/* Ajusta este rojo al de tu logotipo si lo deseas */
	--cpc-primary:#c13a2e;
	--cpc-text:#111;
	--cpc-muted:#6b7280;
	--cpc-bg:#ffffff;
	--cpc-border:#e5e7eb;
	--btn-radius:10px;
}

/* Contenedor fijo inferior */
#cookie-banner{
	position:fixed; left:0; right:0; bottom:0; z-index:9999;
	/* Importante: por defecto tu JS lo pone display:block/none */
}

/* Tarjeta */
.cpc-cookie-card{
	max-width:1100px; margin:100px auto;
	background:var(--cpc-bg); color:var(--cpc-text);
	border:1px solid var(--cpc-border); border-radius:14px;
	box-shadow:0 8px 30px rgba(0,0,0,.08);
	display:flex; gap:18px; align-items:center; padding:18px 16px;
}

/* Franja/acento rojo */
.cpc-cookie-accent{
	width:8px; align-self:stretch; background:var(--cpc-primary);
	border-radius:14px 0 0 14px;
	}
	
.cpc-cookie-body{ flex:1; min-width:0 }
.cpc-cookie-title{ font-weight:700; margin:0 0 6px 0 }
.cpc-cookie-text{ margin:0; color:var(--cpc-muted); font-size:.95rem }
.cpc-cookie-text a{ color:var(--cpc-primary); text-decoration:underline }

.cpc-cookie-actions{ display:flex; flex-wrap:wrap; gap:10px }
	
/* Botón aceptar (mismo ID para tu JS) */
#accept-cookies, #reject-cookies{
	border:1px solid var(--cpc-primary);
	background:var(--cpc-primary); color:#fff;
	padding:10px 14px; border-radius:var(--btn-radius);
	cursor:pointer; font-weight:600; line-height:1; transition:.15s all;
}
#accept-cookies:hover{ transform:translateY(-1px) }
#reject-cookies:hover{ transform:translateY(-1px) }

/* Responsive */
@media (max-width: 720px){
	.cpc-cookie-card{ flex-direction:column; align-items:stretch }
	.cpc-cookie-accent{ height:6px; width:auto; border-radius:14px 14px 0 0 }
	.cpc-cookie-actions{ justify-content:flex-start }
}