/* ============================================================
   mejoras.css  —  Capa de modernización (Hermanos Valdés)
   Se carga la ÚLTIMA. No reescribe nada existente: solo refina.
   Para revertir: quitar el <link> de mejoras.css en index.php.
   Fase 1: PÁGINA DE INICIO + botones/tipografía globales.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
	--hv-naranja:#e09227;
	--hv-naranja-osc:#c2761a;
	--hv-madera:#6b4a2b;
	--hv-carbon:#262321;
	--hv-crema:#f7f4ef;
	--hv-sombra:0 .5rem 1.5rem rgba(0,0,0,.12);
	--hv-sombra-fuerte:0 1rem 2.25rem rgba(0,0,0,.20);
}

/* ---------- Tipografía global ---------- */
body{
	font-family:'Inter',"Roboto Condensed",Arial,sans-serif;
	color:#3a3a3a;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.card-title,.empresa-h1{
	font-family:'Poppins','Inter',sans-serif;
	letter-spacing:.01em;
}

/* ---------- Botones de marca (global) ---------- */
.btn-warning{
	background:var(--hv-naranja);
	border:none;
	color:#fff !important;
	font-weight:600;
	letter-spacing:.02em;
	border-radius:2rem;
	padding:.6rem 1.4rem;
	box-shadow:0 .25rem .75rem rgba(224,146,39,.35);
	transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-warning:hover,.btn-warning:focus{
	background:var(--hv-naranja-osc);
	color:#fff !important;
	transform:translateY(-2px);
	box-shadow:0 .5rem 1.25rem rgba(224,146,39,.45);
}
.btn-warning.btn-sm{ padding:.4rem 1rem; font-size:.85rem; }
.text-warning{ color:var(--hv-naranja) !important; }

/* ---------- Títulos de sección ( h4 > ins ) ---------- */
h4 ins{
	text-decoration:none;
	position:relative;
	display:inline-block;
	font-weight:700;
	font-size:1.7rem;
	color:var(--hv-carbon);
	padding-bottom:.6rem;
}
h4 ins::after{
	content:"";
	position:absolute;
	left:50%; transform:translateX(-50%);
	bottom:0;
	width:3.2rem; height:.2rem;
	background:var(--hv-naranja);
	border-radius:2px;
}

/* ============================================================
   HERO / CARRUSEL DE INICIO
   ============================================================ */
#cabecera .carousel-item-img{
	background:var(--hv-carbon) !important;
}
/* la imagen de fondo va inline con size:contain → la forzamos a cover */
#cabecera .carousel-item-img img{
	background-size:cover !important;
	background-position:center !important;
	box-shadow:none !important;
}
/* velo degradado para que el texto se lea siempre */
#cabecera .carousel-item-img::after{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.55) 100%);
	pointer-events:none;
}
#cabecera .carousel-caption{
	bottom:12% !important;
	text-shadow:0 2px 12px rgba(0,0,0,.55);
	z-index:2;
}
#cabecera .carousel-caption h1{
	font-weight:700;
	font-size:2.8rem;
	margin-bottom:.4rem;
}
#cabecera .carousel-caption h5{
	font-weight:400;
	font-size:1.15rem;
	opacity:.95;
	margin-bottom:1.2rem;
}
.btn-circle{
	background:var(--hv-naranja);
	color:#fff;
	border-radius:2rem !important;
	padding:.55rem 1.4rem !important;
	height:auto !important;
	font-weight:600;
	box-shadow:0 .4rem 1rem rgba(0,0,0,.25);
	transition:transform .18s ease, background .18s ease;
}
.btn-circle:hover{ background:var(--hv-naranja-osc); transform:translateY(-2px); }
.btn-circle:hover i,.btn-circle i{ color:#fff; }
.carousel-control-prev,.carousel-control-next{ opacity:.6; transition:opacity .2s; }
.carousel-control-prev:hover,.carousel-control-next:hover{ opacity:1; }

/* ============================================================
   SECCIÓN "NUESTROS PRODUCTOS" (tarjetas)
   ============================================================ */
#productos + .bg-inverse,
.bg-inverse{ background:var(--hv-crema) !important; }

#productos.row{ margin-bottom:0 !important; }

.card{
	border:none;
	border-radius:.85rem;
	overflow:hidden;
	background:#fff;
	box-shadow:var(--hv-sombra);
	transition:transform .22s ease, box-shadow .22s ease;
	margin-bottom:1.5rem;
}
.card:hover{
	transform:translateY(-.4rem);
	box-shadow:var(--hv-sombra-fuerte);
}
.card .card-img-top{
	min-height:0;
	height:15rem;
	background-size:cover !important;
	background-position:center !important;
	transition:transform .4s ease;
}
.card:hover .card-img-top{ transform:scale(1.06); }
.card-block{ padding:1.1rem 1rem 1.3rem; }
.card-title{ font-size:1.25rem; font-weight:600; margin-bottom:.25rem; }
.card-title a{
	color:var(--hv-carbon) !important;
	text-decoration:none;
	transition:color .18s ease;
}
.card-title a:hover{ color:var(--hv-naranja) !important; }
.card-text{ color:#7a7368; font-size:.95rem; margin-bottom:0; }

/* ============================================================
   VALORACIÓN (banda de opiniones)
   ============================================================ */
.text-white{ color:#fff !important; }

/* ============================================================
   EMPRESA (presentación + galería de fotos)
   ============================================================ */
#empresa .empresa-h1{
	color:var(--hv-carbon) !important;
	font-weight:700;
	font-size:2rem;
	margin-bottom:1rem;
}
#empresa .figure-img{
	border-radius:.7rem;
	box-shadow:var(--hv-sombra);
	transition:transform .25s ease, box-shadow .25s ease;
	width:100%;
	object-fit:cover;
}
#empresa .figure-img:hover{
	transform:translateY(-.25rem);
	box-shadow:var(--hv-sombra-fuerte);
}
#empresa figcaption.figure-caption{ color:#8a8278; }
#empresa .figure-caption{ line-height:1.7; font-size:1rem; color:#4a4540; }

/* ---------- Botón "subir arriba" ---------- */
#toTop i{ color:var(--hv-naranja); }

/* ---------- Responsive ---------- */
@media (max-width:767px){
	#cabecera .carousel-caption h1{ font-size:1.7rem; }
	#cabecera .carousel-caption h5{ font-size:.95rem; }
	h4 ins{ font-size:1.35rem; }
	.card .card-img-top{ height:12rem; }
}