/* =========================================
   VARIABLES GLOBALES
   Paleta, radios, sombras y transiciones
========================================= */
:root{
	--primary:#C1121F;
	--primary-dark:#9f0f19;
	--dark:#0B0B0B;
	--light:#FFFFFF;
	--text:#1A1A1A;
	--text-soft:#555555;
	--gray:#9CA3AF;
	--border:#1F2933;

	--radius:18px;
	--radius-sm:14px;
	--radius-pill:999px;

	--transition:.35s ease;
	--hover-transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;

	--card-bg:#E5E7EB;
	--card-bg-soft:#F3F4F6;
	--card-border:#D1D5DB;
	--card-shadow:0 8px 20px rgba(0,0,0,.04);
	--card-shadow-hover:0 18px 35px rgba(193,18,31,.12);
	--card-border-hover:rgba(193,18,31,.45);

	--container-max:1300px;
	--section-max-text:800px;
}

/* =========================================
   RESET / BASE
========================================= */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html,
body{
	width:100%;
	overflow-x:hidden;
	scroll-behavior:smooth;
}

body{
	font-family:'Poppins',sans-serif;
	background:var(--light);
	color:var(--text);
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

img{
	max-width:100%;
	display:block;
}

section{
	scroll-margin-top:45px;
}

/* =========================================
   CONTENEDORES GENERALES
========================================= */
.container{
	width:100%;
	max-width:var(--container-max);
	margin:0 auto;
	padding:0 40px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.section{
	padding:45px 80px 100px;
	text-align:center;
}

.section h2{
	display:inline-block;
	position:relative;
	font-size:clamp(28px,5vw,40px);
	line-height:1.2;
	margin-bottom:20px;
	color:#000;
}

.section h2::after{
	content:"";
	display:block;
	width:60%;
	height:4px;
	margin:12px auto 0;
	background:var(--primary);
	border-radius:10px;
}

.section p{
	max-width:var(--section-max-text);
	margin:0 auto 15px;
	color:var(--text-soft);
}

/* =========================================
   HEADER / NAVEGACIÓN
========================================= */
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:18px 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:rgba(11,11,11,.96);
	backdrop-filter:blur(12px);
	border-bottom:1px solid #1f1f1f;
	z-index:1000;
}

.logo{
	display:flex;
	align-items:center;
	gap:14px;
	margin-left:24px;
	text-decoration:none;
	color:inherit;
}

.logo img{
	height:50px;
	margin-left:20px;
}

.logo-text{
	display:flex;
	align-items:center;
	gap:10px;
	line-height:1;
}

.logo-text strong{
	color:#fff;
	font-size:28px;
	font-weight:700;
	letter-spacing:.5px;
}

.logo-text span{
	color:#C5C5C5;
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:.4px;
	white-space:nowrap;
}

.nav{
	display:flex;
	gap:35px;
}

.nav a{
	position:relative;
	color:#fff;
	text-decoration:none;
	font-size:14px;
	font-weight:500;
	transition:.3s;
}

.nav a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-8px;
	width:0;
	height:3px;
	background:var(--primary);
	transition:.3s;
}

.nav a:hover::after,
.nav a.active::after{
	width:100%;
}

.menu-toggle{
	display:none;
	background:none;
	border:none;
	color:#fff;
	font-size:28px;
	cursor:pointer;
}

/* =========================================
   HERO PRINCIPAL
========================================= */
.hero{
	position:relative;
	min-height:100svh;
	padding:120px 20px 60px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:
		linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
		url('../img/tallerhero.jpg') center/cover no-repeat;
}

.hero-content{
	max-width:920px;
	margin:0 auto;
}

.hero h1{
	color:#fff;
	font-size:clamp(32px,6vw,52px);
	line-height:1.12;
	font-weight:700;
	margin-bottom:18px;
}

.hero-badge{
	display:inline-block;
	margin-bottom:22px;
	padding:8px 18px;
	border:1px solid rgba(255,255,255,.25);
	border-radius:var(--radius-pill);
	background:rgba(255,255,255,.08);
	color:#fff;
	font-size:14px;
	font-weight:600;
	letter-spacing:.3px;
	backdrop-filter:blur(6px);
}

.hero-sub{
	max-width:760px;
	margin:0 auto 30px;
	font-size:18px;
	line-height:1.8;
	color:#E5E7EB;
}

.hero-highlights{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:12px;
	margin:0 0 32px;
}

.hero-highlights span{
	display:inline-block;
	padding:10px 16px;
	border-radius:var(--radius-pill);
	background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.18);
	color:#fff;
	font-size:14px;
	font-weight:500;
	backdrop-filter:blur(6px);
}

.hero-buttons{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:18px;
}

.hero-microcopy{
	margin-top:20px;
}

.hero-microcopy p{
	margin:0;
	color:rgba(255,255,255,.88);
	font-size:14px;
	line-height:1.7;
}

/* =========================================
   BOTONES
========================================= */
.btn-csa,
.btn-outline,
.btn-outline-dark{
	display:inline-block;
	padding:15px 45px;
	border-radius:50px;
	font-weight:700;
	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:1px;
	transition:var(--transition);
}

.btn-csa{
	background:var(--primary);
	border:2px solid var(--primary);
	color:#fff;
}

.btn-csa:hover{
	background:#000;
	border:2px solid var(--primary);
	color:#fff;
}

.btn-outline{
	background:transparent;
	border:2px solid #fff;
	color:#fff;
}

.btn-outline:hover{
	background:#fff;
	color:#000;
}

.btn-outline-dark{
	background:transparent;
	border:2px solid var(--dark);
	color:var(--dark);
}

.btn-outline-dark:hover{
	background:var(--dark);
	color:#fff;
}

/* =========================================
   FRANJA DE CONFIANZA
========================================= */
.trust-strip{
	padding:26px 20px;
	background:#121212;
	border-top:1px solid rgba(255,255,255,.08);
	border-bottom:1px solid rgba(255,255,255,.08);
}

.trust-strip-grid{
	max-width:1200px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:18px;
}

.trust-strip-item{
	padding:18px 14px;
	border:1px solid rgba(255,255,255,.08);
	border-radius:18px;
	background:rgba(255,255,255,.03);
	text-align:center;
}

.trust-strip-item strong{
	display:block;
	margin-bottom:6px;
	color:#fff;
	font-size:18px;
	line-height:1.2;
}

.trust-strip-item span{
	color:rgba(255,255,255,.74);
	font-size:14px;
	line-height:1.45;
}

/* =========================================
   INTRODUCCIONES DE SECCIÓN
========================================= */
.nosotros-intro,
.ubicacion-intro,
.contacto-intro,
.process-intro,
.reviews-intro,
.servicios-intro{
	max-width:760px;
	margin:0 auto 30px;
	font-size:16px;
	line-height:1.75;
	color:var(--text-soft);
}

/* =========================================
   TARJETAS BASE
   Base compartida para cards generales
========================================= */
.card,
.card-servicio,
.nosotros-item,
.process-card,
.nosotros-card,
.contacto-card,
.servicios-cta{
	background:var(--card-bg);
	border:1px solid var(--card-border);
	border-radius:var(--radius);
	box-shadow:var(--card-shadow);
}

.card,
.card-servicio{
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	min-height:260px;
	padding:38px 30px;
	text-align:center;
	color:#000;
	will-change:transform;
	transition:var(--hover-transition);
}

.card-servicio{
	cursor:pointer;
}

.card:hover,
.card-servicio:hover{
	transform:translateY(-8px);
	border-color:var(--card-border-hover);
	box-shadow:var(--card-shadow-hover);
}

.card-servicio:active{
	transform:scale(.97);
	box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.card h3,
.card-servicio h3{
	font-size:22px;
	line-height:1.3;
	margin-bottom:14px;
	font-weight:600;
	min-height:68px;
}

.card p,
.card-servicio p{
	margin:0;
	font-size:15px;
	line-height:1.65;
}

/* =========================================
   SOBRE NOSOTROS
========================================= */
.nosotros-card,
.contacto-card{
	max-width:800px;
	margin:0 auto 30px;
	padding:32px 28px;
	text-align:center;
}

.nosotros-card{
	max-width:900px;
	margin-bottom:35px;
}

.nosotros-card p{
	max-width:800px;
	margin:0 auto 16px;
	color:#000;
	line-height:1.75;
}

.nosotros-card p:last-child{
	margin-bottom:0;
}

.nosotros-highlights{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:25px;
	margin-top:10px;
}

.nosotros-item{
	padding:28px 22px;
	text-align:center;
	transition:var(--hover-transition);
}

.nosotros-item:hover{
	transform:translateY(-8px);
	border-color:var(--card-border-hover);
	box-shadow:var(--card-shadow-hover);
}

.nosotros-item h3,
.trust .card h3,
.testimonials .card h3{
	display:table;
	position:relative;
	margin:0 auto 14px;
	padding-bottom:10px;
	color:var(--primary);
}

.nosotros-item h3::after,
.trust .card h3::after,
.testimonials .card h3::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:3px;
	background:var(--primary);
	border-radius:2px;
}

.nosotros-item p{
	margin:0;
	font-size:15px;
	line-height:1.65;
	color:#000;
}

/* =========================================
   GRIDS GENERALES
========================================= */
.services-container,
.testimonials{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:35px;
	margin-top:60px;
}

/* =========================================
   SECCIÓN "¿POR QUÉ ELEGIRNOS?"
========================================= */
.trust .card p,
.testimonials .card p,
.testimonials .card small{
	color:#000;
}

/* =========================================
   ANIMACIÓN DE APARICIÓN
========================================= */
.reveal-card{
	opacity:0;
	transform:translateY(40px);
	transition:
		opacity .7s ease,
		transform .28s ease,
		box-shadow .28s ease,
		border-color .28s ease;
}

.reveal-card.active{
	opacity:1;
	transform:translateY(0);
}

.reveal-card.active:hover{
	transform:translateY(-8px);
}

/* =========================================
   SERVICIOS
========================================= */
.services-container-enhanced{
	margin-top:45px;
}

#servicios .card-servicio{
	min-height:auto;
	padding:26px 24px 24px;
	text-align:left;
	background:linear-gradient(180deg,#f3f4f6 0%,#e5e7eb 100%);
}

#servicios .card-servicio .card-content{
	display:flex;
	flex-direction:column;
	height:100%;
}

.service-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	margin-bottom:18px;
}

.service-tag{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:7px 12px;
	border-radius:var(--radius-pill);
	background:rgba(193,18,31,.1);
	border:1px solid rgba(193,18,31,.15);
	color:var(--primary);
	font-size:12px;
	font-weight:700;
	letter-spacing:.3px;
	text-transform:uppercase;
}

.service-icon{
	flex-shrink:0;
	width:52px;
	height:52px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:16px;
	background:#fff;
	border:1px solid rgba(193,18,31,.12);
	box-shadow:0 8px 18px rgba(0,0,0,.05);
	color:var(--primary);
	font-size:20px;
}

#servicios .card-servicio h3{
	min-height:auto;
	margin:0 0 12px;
	padding-bottom:0;
	display:block;
	text-align:left;
	color:var(--primary);
}

#servicios .card-servicio h3::after{
	display:none;
}

.service-lead{
	margin:0 0 16px !important;
	font-size:15px;
	line-height:1.7;
	color:#222;
}

.service-points{
	list-style:none;
	display:grid;
	gap:10px;
	margin:0 0 22px;
	padding:0;
}

.service-points li{
	position:relative;
	padding-left:22px;
	font-size:14px;
	line-height:1.55;
	color:#444;
}

.service-points li::before{
	content:"";
	position:absolute;
	left:0;
	top:8px;
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--primary);
}

.service-link{
	margin-top:auto;
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-size:14px;
	font-weight:700;
	color:var(--primary);
}

#servicios .card-servicio .service-link i{
	transition:transform .18s ease;
}

#servicios .card-servicio:hover .service-link i{
	transform:translateX(4px);
}

/* =========================================
   CTA DE SERVICIOS
========================================= */
.servicios-cta{
	max-width:860px;
	margin:40px auto 0;
	padding:32px 28px;
	color:#000;
	text-align:center;
	transition:var(--hover-transition);
}

.servicios-cta:hover{
	transform:translateY(-8px);
	border-color:var(--card-border-hover);
	box-shadow:var(--card-shadow-hover);
}

.servicios-cta h3{
	margin:0 0 12px;
	font-size:26px;
	line-height:1.25;
	color:#000;
}

.servicios-cta p{
	margin:0 0 22px;
	color:var(--text-soft);
	line-height:1.7;
}

/* =========================================
   PROCESO
========================================= */
.process-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:26px;
	margin-top:46px;
}

.process-card{
	position:relative;
	padding:34px 24px 26px;
	text-align:left;
	transition:var(--hover-transition);
}

.process-card:hover{
	transform:translateY(-8px);
	border-color:var(--card-border-hover);
	box-shadow:var(--card-shadow-hover);
}

.process-number{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	margin-bottom:18px;
	border-radius:50%;
	background:var(--primary);
	color:#fff;
	font-weight:700;
}

.process-card h3{
	margin:0 0 12px;
	font-size:22px;
	line-height:1.3;
	color:var(--primary);
}

.process-card p{
	margin:0;
	font-size:15px;
	line-height:1.7;
	color:#000;
}

/* =========================================
   TESTIMONIOS
========================================= */
.stars{
	margin:0 0 12px;
	color:#F4C430;
	font-size:20px;
}

.reviews-button{
	margin:40px 0 0;
	text-align:center;
}

/* =========================================
   UBICACIÓN
========================================= */
#ubicacion{
	display:flex;
	flex-direction:column;
	align-items:center;
}

#ubicacion h2{
	display:block;
	margin-bottom:20px;
}

iframe{
	width:100%;
	max-width:1000px;
	height:350px;
	border:1px solid var(--border);
	border-radius:20px;
}

.ubicacion-botones,
.contacto-botones{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:18px;
}

.ubicacion-botones{
	margin-top:30px;
}

/* =========================================
   CONTACTO
========================================= */
.contacto-card p{
	margin-bottom:14px;
	color:#000;
}

.contacto-card p:last-child{
	margin-bottom:0;
}

.contacto-card a{
	color:var(--primary);
	text-decoration:none;
	font-weight:600;
}

.contacto-card a:hover{
	text-decoration:underline;
}

/* =========================================
   FOOTER
========================================= */
footer{
	padding:40px 20px;
	background:#0f0f0f;
	border-top:1px solid #1f1f1f;
	color:#aaa;
	text-align:center;
	font-size:14px;
	letter-spacing:1px;
}

.image-credit{
	font-size:12px;
	line-height:1.5;
	opacity:.6;
}

.image-credit a{
	color:#aaa;
	text-decoration:none;
	transition:.3s;
}

.image-credit a:hover{
	color:var(--primary);
}

/* =========================================
   WHATSAPP FLOTANTE
========================================= */
.whatsapp-float{
	position:fixed;
	right:25px;
	bottom:25px;
	width:65px;
	height:65px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#25D366;
	color:#fff;
	border-radius:50%;
	font-size:30px;
	text-decoration:none;
	box-shadow:0 15px 40px rgba(0,0,0,.3);
	transition:var(--transition);
	z-index:1200;
}

.whatsapp-float:hover{
	transform:scale(1.1);
}

/* =========================================
   MODAL DE GALERÍA
========================================= */
.modal{
	position:fixed;
	inset:0;
	z-index:9999;
	display:none;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(0,0,0,.92);
}

.modal-box{
	position:relative;
	width:min(1100px, 100%);
	max-height:90vh;
	padding:28px 20px 20px;
	overflow-y:auto;
}

.modal-titulo{
	margin:0 0 22px;
	text-align:center;
	color:#fff;
	font-size:clamp(24px,4vw,32px);
	font-weight:700;
	line-height:1.2;
}

.modal-contenido{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:25px;
	max-width:900px;
	margin:0 auto;
}

.modal-contenido img{
	width:260px;
	max-width:100%;
	height:auto;
	object-fit:cover;
	border-radius:20px;
	transition:var(--transition);
}

.modal-contenido img:hover{
	transform:scale(1.05);
}

.cerrar{
	position:absolute;
	top:0;
	right:0;
	background:none;
	border:none;
	color:#fff;
	font-size:45px;
	cursor:pointer;
	line-height:1;
}

/* =========================================
   ACCESIBILIDAD
========================================= */
.menu-toggle:focus-visible,
.nav a:focus-visible,
.btn-csa:focus-visible,
.btn-outline:focus-visible,
.btn-outline-dark:focus-visible,
.cerrar:focus-visible,
.whatsapp-float:focus-visible,
.card-servicio:focus-visible{
	outline:2px solid var(--primary);
	outline-offset:4px;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width:1024px){
	.section{
		padding:55px 30px 90px;
	}

	.hero-sub{
		padding:0 10px;
	}
}

@media (max-width:900px){
	.trust-strip-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:768px){
	.nav{
		position:absolute;
		top:100%;
		right:0;
		width:100%;
		display:none;
		flex-direction:column;
		align-items:center;
		padding:25px 0;
		background:var(--dark);
		border-top:1px solid #1F1F1F;
	}

	.nav.active{
		display:flex;
	}

	.menu-toggle{
		display:block;
	}

	.container{
		padding-inline:20px;
	}

	.section{
		padding:50px 40px 85px;
	}

	.logo{
		margin-left:0;
		gap:10px;
	}

	.logo-text{
		gap:8px;
	}
}

@media (max-width:600px){
	header{
		padding:14px 0;
	}

	.logo{
		margin-left:0;
		gap:10px;
	}

	.logo img{
		height:42px;
		margin-left:0;
	}

	.logo-text{
		gap:6px;
	}

	.logo-text strong{
		font-size:22px;
	}

	.logo-text span{
		font-size:11px;
		letter-spacing:.2px;
	}

	.hero{
		padding:110px 15px 40px;
	}

	.hero-badge{
		padding:7px 14px;
		font-size:12px;
	}

	.hero-sub{
		font-size:15px;
	}

	.hero-highlights{
		flex-direction:column;
		align-items:center;
		gap:10px;
	}

	.hero-highlights span,
	.hero-buttons a,
	.contacto-botones a,
	.ubicacion-botones a{
		width:100%;
		max-width:320px;
		text-align:center;
	}

	.hero-buttons{
		flex-direction:column;
		width:100%;
		margin-top:30px;
	}

	.hero-buttons a{
		margin:auto;
	}

	.trust-strip-grid{
		grid-template-columns:1fr;
	}

	.section{
		padding:45px 18px 80px;
	}

	.card,
	.card-servicio{
		padding:30px 22px;
	}

	#servicios .card-servicio{
		padding:22px 20px;
	}

	.service-top{
		align-items:flex-start;
	}

	.service-icon{
		width:46px;
		height:46px;
		font-size:18px;
		border-radius:14px;
	}

	.servicios-cta{
		padding:28px 20px;
	}

	.servicios-cta h3{
		font-size:22px;
	}

	.process-card{
		padding:28px 20px;
	}

	iframe{
		height:280px;
	}

	.whatsapp-float{
		right:18px;
		bottom:18px;
		width:55px;
		height:55px;
		font-size:26px;
	}

	.contacto-card,
	.nosotros-card{
		padding:28px 20px;
	}

	.contacto-botones,
	.ubicacion-botones{
		flex-direction:column;
		align-items:center;
	}

	.nosotros-item{
		padding:24px 18px;
	}

	.nosotros-item h3{
		font-size:18px;
	}

	.modal-box{
		padding:22px 10px 14px;
	}

	.modal-titulo{
		margin-bottom:18px;
		font-size:24px;
	}

	.modal-contenido img{
		width:90%;
		max-width:320px;
	}
}