:root{
	--negro:#080808;
	--granate:#8B040C; /* COGAC */
	--rosita:#FEEBEC;  /* fondo */
	--blanco:#FFFFFF;
}

html,body{height:100%}
body{
	font-family:"Poppins",system-ui,Arial,Helvetica,sans-serif;
	color:var(--negro);
	background:var(--rosita);
	line-height:1.5;
}

header,footer{padding:15px;}

/* ---------------- HERO ---------------- */
.hero{
	position:relative;
	background:url("../img/COGAC_LandingMarca_Hero-Professionals.png") center/cover no-repeat;
	display:flex;align-items:flex-end;isolation:isolate;
}
.hero::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.48) 32%, rgba(0,0,0,.22) 56%, rgba(0,0,0,.35) 100%);
	z-index:0;
}
.brand-top{margin-bottom: 100px;}
.brand-top img{width:140px}

.hero-inner{position:relative;z-index:1;width:100%;padding:44px 15px;}
.lead-copy{
	color:#fff;margin:0 0 12px;
	font-weight:600;
	font-size:clamp(16px,1.9vw,20px);
	max-width:40ch;
}
.claim{
	color:#fff;text-transform:uppercase;font-weight:900;line-height:.92;letter-spacing:.5px;
	font-size:clamp(46px,7.8vw,88px);
	margin:0;
}

/* Tarjeta buscador (lado dcho) */
.finder{
	background:var(--granate);color:var(--blanco);
	padding:22px 20px;box-shadow:0 14px 36px rgba(0,0,0,.35);
	width:100%;max-width:420px;margin-left:auto;
}
.finder h5{margin:0 0 14px;font-weight:700}
.finder .form-label{font-size:.9rem;margin:.35rem 0 .25rem}
.finder .form-control{
	background:#fff;border:1px solid rgba(0,0,0,.08);color:var(--negro);
	height:46px;padding:.5rem .75rem;
}
.finder .form-control::placeholder{color:#777}
.finder .btn-find{
	display:block;width:100%;
	background:#fff;color:var(--granate);
	border:0;border-radius:999px;
	font-weight:800;line-height:1;padding:.9rem 1.2rem;margin-top:12px;
	box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.finder small{opacity:.9;display:block;margin-top:.55rem;font-size:.78rem}

/* Franja granate */
.strip{
	background:var(--granate);color:#fff;text-align:center;
	padding:40px 15px;font-size:23px;
}

/* ---------------- BLOQUE FOTO INTERMEDIO ---------------- */
.wide-wrap{padding:56px 0 32px}
.wide-photo{
	overflow:hidden;
	box-shadow:0 16px 36px rgba(0,0,0,.08);
}
.wide-photo img{display:block;width:100%;height:auto;object-fit:cover}

/* ---------------- SERVEIS (POR FILAS) ---------------- */
.services{padding-bottom:24px}
.services .row.equal{align-items:stretch} /* iguala altura en cada fila */

/* Caja granate (ocupa toda la altura de su columna) */
.tile{height:100%;display:flex;flex-direction:column}
.tile--granate .fill{
	background:var(--granate);color:#fff;
	height:100%;display:flex;align-items: flex-start;padding:18px;
	font-weight:600;letter-spacing:.6px;
	font-size:22px;
}

/* Título + lista con chevron */
.col-title{color:var(--granate);font-weight:800;margin:0 0 10px;font-size:1.22rem}
.service-li{position:relative;padding-left:26px;margin:0 0 18px;font-size:.98rem}
.service-li::before {
	background-image: url('../img/right_arrow.png');
	background-position: center center;
	background-size: contain;
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.service-li p{margin:.25rem 0 0}

.cta-center{
	display:inline-block;background:var(--granate);color:#fff;text-decoration:none;
	border-radius:999px;padding:.85rem 1.2rem;margin-top:8px;
}

/* ---------------- FOOTER VISUAL ---------------- */
.footer-hero{
	position:relative;
	background:url("../img/COGAC_LandingMarca_Footer-Pimes.png") center/cover no-repeat;
	min-height:420px;display:flex;align-items:flex-end
}
.footer-hero::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,.55) 100%);
}
.footer-inner{position:relative;z-index:1;width:100%;padding:36px 0 30px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.brand-bottom{width:90px}
.footer-right{color:#fff;text-align:right}
.footer-right h2{
	margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
	font-size:clamp(40px,7vw,76px);line-height:.92
}
.footer-link{
	display:inline-block;margin-top:10px;text-decoration:none;color:#fff;
	background:transparent;padding:.6rem 1rem
}
.footer-link:hover{text-decoration:none;opacity:.9}

.company_info{
	background-color: #FEEBECAD;
	width: fit-content;
  	padding: 10px 20px;
  	border-radius: 15px;
  	cursor: pointer;
}

ul#results_list {
    display: flex;
    gap: 20px;
}

.modal-content {
    max-width: 550px;
	padding: 20px;
    margin: auto;
}

.modal {
    background-color: rgba(0, 0, 0, 0.6);
}

.modal a{color:var(--granate);}

@media (max-width:991.98px){
	.hero{min-height:520px}
	.footer-grid{grid-template-columns:1fr}
	.footer-right{text-align:left}

	.brand-top{margin-bottom:50px;}
}