/* ============================================
   DOKA Distribuidora y Comercializadora
   Hoja de estilos compartida
   ============================================ */

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:'Segoe UI',Arial,sans-serif;
	scroll-behavior:smooth;
}

:root{
	--azul:#0058a5;
	--azul2:#0079c2;
	--azul-oscuro:#022b52;
	--naranja:#f58220;
	--naranja2:#ff9d00;
	--gris:#555;
	--gris-claro:#8a94a3;
	--claro:#f5f7fa;
}

html{ scroll-padding-top:100px; }

body{
	background:#fff;
	color:#333;
	line-height:1.6;
	overflow-x:hidden;
}

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

a{ color:inherit; }

ul{ list-style:none; }

/* ---------- Header / Nav ---------- */

header{
	position:fixed;
	width:100%;
	top:0;
	left:0;
	background:white;
	box-shadow:0 5px 15px rgba(0,0,0,.1);
	z-index:1000;
}

.nav{
	width:90%;
	max-width:1300px;
	margin:auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:4px 8px;
}

.logo img{ height:100px; }

.menu{
	display:flex;
	align-items:center;
	gap:32px;
}

.menu a{
	text-decoration:none;
	color:var(--gris);
	font-weight:600;
	font-size:15px;
	position:relative;
	padding:6px 0;
	transition:.3s;
}

.menu a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	height:3px;
	width:0;
	background:linear-gradient(45deg,var(--naranja),var(--naranja2));
	border-radius:3px;
	transition:.3s;
}

.menu a:hover{ color:var(--azul); }
.menu a:hover::after{ width:100%; }

.menu a.activo{ color:var(--azul); }
.menu a.activo::after{ width:100%; }

.nav-derecha{
	display:flex;
	align-items:center;
	gap:20px;
}

.btn{
	background:linear-gradient(45deg,var(--naranja),var(--naranja2));
	color:white;
	padding:12px 26px;
	border-radius:30px;
	text-decoration:none;
	font-weight:bold;
	transition:.3s;
	display:inline-block;
	border:none;
	cursor:pointer;
	font-size:15px;
	box-shadow:0 8px 18px rgba(245,130,32,.3);
}

.btn:hover{ transform:scale(1.05); }

.btn-azul{
	background:linear-gradient(45deg,var(--azul),var(--azul2));
	box-shadow:0 8px 18px rgba(0,88,165,.3);
}

.btn-outline{
	background:transparent;
	color:var(--azul);
	border:2px solid var(--azul);
	box-shadow:none;
}

.btn-outline:hover{
	background:var(--azul);
	color:white;
}

.hamburguesa{
	display:none;
	flex-direction:column;
	gap:5px;
	cursor:pointer;
	background:none;
	border:none;
}

.hamburguesa span{
	width:28px;
	height:3px;
	background:var(--azul);
	border-radius:3px;
	transition:.3s;
}

/* ---------- Hero genérico (páginas internas) ---------- */

.hero-interno{
	margin-top:88px;
	padding:70px 10% 60px;
	background:linear-gradient(120deg,var(--azul) 0%,var(--azul2) 100%);
	color:white;
	text-align:center;
}

.hero-interno h1{
	font-size:44px;
	margin-bottom:15px;
}

.hero-interno p{
	font-size:18px;
	opacity:.92;
	max-width:700px;
	margin:auto;
}

.migas{
	margin-top:14px;
	font-size:14px;
	opacity:.85;
}

.migas a{ text-decoration:none; color:white; }
.migas a:hover{ text-decoration:underline; }

/* ---------- Hero de inicio ---------- */

.hero{
	margin-top:88px;
	padding:90px 10%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:40px;
	flex-wrap:wrap;
	background:linear-gradient(180deg,#ffffff 0%,var(--claro) 100%);
	position:relative;
	overflow:hidden;
}

.hero-text{
	flex:1;
	min-width:320px;
	position:relative;
	z-index:2;
}

.hero .etiqueta{
	display:inline-block;
	background:#eaf3fb;
	color:var(--azul);
	font-weight:700;
	font-size:13px;
	letter-spacing:.5px;
	padding:8px 18px;
	border-radius:30px;
	margin-bottom:20px;
}

.hero h1{
	font-size:52px;
	color:var(--azul);
	margin-bottom:20px;
	line-height:1.15;
}

.hero span{ color:var(--naranja); }

.hero p{
	font-size:19px;
	margin-bottom:30px;
	color:#555;
	max-width:520px;
}

.hero-botones{
	display:flex;
	gap:18px;
	flex-wrap:wrap;
}

.hero-img{
	flex:1;
	min-width:300px;
	display:flex;
	justify-content:center;
	position:relative;
	z-index:2;
}

.hero-img-wrap{
	background:linear-gradient(135deg,var(--azul),var(--azul2));
	border-radius:30px;
	padding:50px;
	box-shadow:0 30px 60px rgba(0,88,165,.25);
}

.hero-img-wrap img{
	width:340px;
	max-width:100%;
	filter:drop-shadow(0 15px 25px rgba(0,0,0,.25));
}

/* ---------- Secciones generales ---------- */

section{ padding:90px 10%; }

.seccion-alt{ background:var(--claro); }

.titulo{
	text-align:center;
	margin-bottom:55px;
}

.titulo .etiqueta{
	display:inline-block;
	background:#fef1e6;
	color:var(--naranja);
	font-weight:700;
	font-size:13px;
	letter-spacing:.5px;
	padding:7px 18px;
	border-radius:30px;
	margin-bottom:15px;
}

.titulo h2{
	font-size:40px;
	color:var(--azul);
}

.titulo p{
	color:gray;
	max-width:650px;
	margin:14px auto 0;
	font-size:17px;
}

/* ---------- Cards de servicios ---------- */

.cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:30px;
}

.card{
	background:linear-gradient(135deg,#ffffff,#eef6fb);
	padding:35px;
	border-radius:20px;
	box-shadow:0 10px 25px rgba(0,0,0,.08);
	transition:.4s;
	border-bottom:6px solid transparent;
}

.card:hover{
	transform:translateY(-10px);
	border-bottom:6px solid var(--naranja);
}

.card h3{
	color:var(--azul);
	margin-bottom:12px;
	font-size:20px;
}

.card p{ color:#555; font-size:15.5px; }

.icon{
	font-size:50px;
	margin-bottom:15px;
}

.card .etiqueta-nueva{
	display:inline-block;
	background:linear-gradient(45deg,var(--naranja),var(--naranja2));
	color:white;
	font-size:11px;
	font-weight:700;
	padding:4px 12px;
	border-radius:20px;
	margin-bottom:14px;
	letter-spacing:.3px;
}

.card ul{ margin-top:12px; }

.card ul li{
	font-size:14.5px;
	color:#555;
	padding:4px 0 4px 22px;
	position:relative;
}

.card ul li::before{
	content:"✔";
	position:absolute;
	left:0;
	color:var(--naranja);
	font-weight:bold;
	font-size:12px;
}

.card a.ver-mas{
	display:inline-block;
	margin-top:16px;
	color:var(--azul);
	font-weight:700;
	text-decoration:none;
	font-size:14.5px;
}

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

/* ---------- Stats ---------- */

.stats{
	background:linear-gradient(90deg,var(--azul),var(--azul2));
	color:white;
}

.stats-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	text-align:center;
	gap:30px;
}

.numero{
	font-size:52px;
	font-weight:bold;
	color:#fff;
}

/* ---------- Proceso ---------- */

.proceso{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:25px;
}

.step{
	background:var(--claro);
	padding:32px 26px;
	border-radius:20px;
	text-align:center;
	position:relative;
}

.step span{
	display:inline-block;
	width:50px;
	height:50px;
	line-height:50px;
	border-radius:50%;
	background:var(--naranja);
	color:white;
	font-weight:bold;
	margin-bottom:20px;
}

.step h3{ color:var(--azul); margin-bottom:10px; }
.step p{ color:#555; font-size:15px; }

/* ---------- Cobertura mini bloque en inicio ---------- */

.cobertura-mini{
	background:#f8fafc;
}

/* ---------- Grid de dos columnas genérico ---------- */

.dos-col{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:50px;
	align-items:center;
}

.dos-col img{ border-radius:24px; box-shadow:0 20px 40px rgba(0,0,0,.12); }

.dos-col h2{ color:var(--azul); font-size:34px; margin-bottom:18px; }
.dos-col p{ color:#555; margin-bottom:16px; font-size:16.5px; }

.lista-check li{
	position:relative;
	padding:6px 0 6px 30px;
	color:#444;
}

.lista-check li::before{
	content:"✔";
	position:absolute;
	left:0;
	top:6px;
	width:22px;
	height:22px;
	background:var(--naranja);
	color:white;
	border-radius:50%;
	font-size:12px;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* ---------- Valores / iconos circulares ---------- */

.valores-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	gap:28px;
}

.valor{
	text-align:center;
	padding:30px 20px;
}

.valor .icon{
	width:80px;
	height:80px;
	margin:0 auto 18px;
	border-radius:50%;
	background:linear-gradient(135deg,var(--azul),var(--azul2));
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:34px;
	color:white;
}

.valor h3{ color:var(--azul); margin-bottom:8px; font-size:18px; }
.valor p{ color:#555; font-size:15px; }

/* ---------- Timeline / historia ---------- */

.timeline{
	max-width:800px;
	margin:auto;
	position:relative;
	padding-left:40px;
	border-left:3px solid #e0e8f0;
}

.timeline-item{
	position:relative;
	padding-bottom:40px;
}

.timeline-item:last-child{ padding-bottom:0; }

.timeline-item::before{
	content:"";
	position:absolute;
	left:-49px;
	top:2px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:var(--naranja);
	border:4px solid #fff;
	box-shadow:0 0 0 3px var(--naranja);
}

.timeline-item h4{ color:var(--azul); font-size:19px; margin-bottom:6px; }
.timeline-item p{ color:#555; font-size:15px; }

/* ---------- Cobertura: mapa / regiones ---------- */

.regiones-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:26px;
}

.region-card{
	background:white;
	border-radius:18px;
	padding:28px;
	box-shadow:0 10px 25px rgba(0,0,0,.06);
	border-top:5px solid var(--azul);
}

.region-card h3{ color:var(--azul); margin-bottom:10px; }
.region-card p{ color:#555; font-size:15px; margin-bottom:10px; }
.region-card span{
	display:inline-block;
	background:#eaf3fb;
	color:var(--azul);
	font-size:12.5px;
	font-weight:700;
	padding:4px 12px;
	border-radius:20px;
}

.mapa-wrap{
	background:linear-gradient(135deg,var(--azul),var(--azul2));
	border-radius:24px;
	padding:40px;
	text-align:center;
	color:white;
}

.mapa-wrap img{
	max-width:420px;
	margin:0 auto 20px;
	filter:drop-shadow(0 15px 25px rgba(0,0,0,.3));
}

/* ---------- Contacto ---------- */

.contacto{
	display:grid;
	grid-template-columns:1.1fr 1fr;
	gap:40px;
}

.info{
	background:white;
	padding:35px;
	border-radius:20px;
	box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.info h3{ color:var(--azul); margin-bottom:20px; }

.info-item{
	display:flex;
	gap:16px;
	margin-bottom:20px;
}

.info-item .icon{
	font-size:26px;
	margin:0;
	flex-shrink:0;
}

.info-item h4{ color:var(--azul); font-size:15.5px; margin-bottom:3px; }
.info-item p{ color:#555; font-size:15px; }

.form{
	background:white;
	padding:35px;
	border-radius:20px;
	box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.form h3{ color:var(--azul); margin-bottom:20px; }

.campo{ margin-bottom:18px; }

.campo label{
	display:block;
	font-size:14px;
	font-weight:600;
	color:var(--gris);
	margin-bottom:6px;
}

.campo input,.campo select,.campo textarea{
	width:100%;
	padding:13px 15px;
	border:1.5px solid #e0e6ec;
	border-radius:10px;
	font-size:15px;
	color:#333;
	background:var(--claro);
	transition:.3s;
}

.campo input:focus,.campo select:focus,.campo textarea:focus{
	outline:none;
	border-color:var(--azul2);
	background:white;
}

.campo textarea{ resize:vertical; min-height:110px; }

.form button{ width:100%; }

.aviso-form{
	font-size:13px;
	color:#888;
	margin-top:12px;
	text-align:center;
}

/* ---------- CTA final ---------- */

.cta-final{
	background:linear-gradient(120deg,var(--azul-oscuro),var(--azul));
	color:white;
	text-align:center;
	border-radius:0;
}

.cta-final h2{ font-size:36px; margin-bottom:16px; }
.cta-final p{ font-size:18px; opacity:.9; margin-bottom:28px; max-width:600px; margin-left:auto; margin-right:auto; }
.cta-final .hero-botones{ justify-content:center; }

/* ---------- Footer ---------- */

footer{
	background:var(--azul-oscuro);
	color:white;
	padding:70px 10% 25px;
}

.footer-grid{
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr 1.2fr;
	gap:40px;
	padding-bottom:40px;
	border-bottom:1px solid rgba(255,255,255,.12);
}

.footer-logo{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px;
}

.footer-logo img{
	height:46px;
	background:white;
	padding:6px;
	border-radius:10px;
}

.footer-col h4{
	color:white;
	font-size:16px;
	margin-bottom:18px;
}

.footer-col p{ color:#b8c6d9; font-size:14.5px; }

.footer-col ul li{ margin-bottom:10px; }

.footer-col ul li a{
	color:#b8c6d9;
	text-decoration:none;
	font-size:14.5px;
	transition:.2s;
}

.footer-col ul li a:hover{ color:var(--naranja2); }

.footer-redes{
	display:flex;
	gap:12px;
	margin-top:18px;
}

.footer-redes a{
	width:40px;
	height:40px;
	border-radius:50%;
	background:rgba(255,255,255,.1);
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	color:white;
	transition:.3s;
}

.footer-redes a:hover{ background:var(--naranja); }

.footer-bottom{
	padding-top:22px;
	text-align:center;
	font-size:13.5px;
	color:#8ea3c0;
}

/* ---------- WhatsApp flotante ---------- */

.whatsapp{
	position:fixed;
	right:24px;
	bottom:24px;
	width:62px;
	height:62px;
	background:#25D366;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:30px;
	text-decoration:none;
	color:white;
	box-shadow:0 10px 20px rgba(0,0,0,.3);
	z-index:900;
	transition:.3s;
}

.whatsapp:hover{ transform:scale(1.08); }

/* ---------- Animaciones ---------- */

.animar{
	opacity:0;
	transform:translateY(50px);
	transition:0.5s;
}

.animar.visible{
	opacity:1;
	transform:translateY(0);
}

/* ---------- Responsive ---------- */

@media(max-width:950px){

	.dos-col{ grid-template-columns:1fr; }
	.footer-grid{ grid-template-columns:1fr 1fr; }
	.contacto{ grid-template-columns:1fr; }
}

@media(max-width:850px){

	.menu{
		position:fixed;
		top:82px;
		left:0;
		width:100%;
		background:white;
		flex-direction:column;
		align-items:flex-start;
		gap:0;
		padding:10px 8%;
		box-shadow:0 15px 20px rgba(0,0,0,.08);
		max-height:0;
		overflow:hidden;
		transition:.4s;
	}

	.menu.abierto{ max-height:500px; padding:18px 8%; }

	.menu a{ width:100%; padding:14px 0; border-bottom:1px solid #eee; }

	.hamburguesa{ display:flex; }

	.nav-derecha .btn{ display:none; }

	.hero{ text-align:center; }
	.hero p{ margin-left:auto; margin-right:auto; }
	.hero-botones{ justify-content:center; }

	.hero h1{ font-size:38px; }
	.hero-interno h1{ font-size:32px; }

	.titulo h2{ font-size:32px; }

	.footer-grid{ grid-template-columns:1fr; gap:32px; }
}

@media(max-width:480px){
	section{ padding:70px 6%; }
	.hero{ padding:70px 6%; }
	.hero-interno{ padding:60px 6% 45px; }
}