@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



nav {
  width: 100%;
  max-width: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body{
    font-family: Arial, Helvetica, sans-serif;
	overflow-x: hidden;
}

/* NAVBAR */
.logo img{
    height:100px;        /* Controla el tamaño del logo */
    width:auto;         /* Mantiene proporción */
    display:block;
	transition:0.5s ease; /* Animación suave */
}
nav{
    position:fixed;
    top:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 50px;
	flex: wrap;

    /* 👇 EFECTO VIDRIO */
 
    backdrop-filter: blur(10px);      /* Difumina lo que está detrás */
    -webkit-backdrop-filter: blur(10px); /* Compatibilidad Safari */

	background:rgba(195,33,39,0.9);
	backdrop-filter: blur(5px);
    border-bottom:1px solid rgba(255,255,255,0.2);
    transition:0.3s ease;
    z-index:1000;
}
h1{
	margin-bottom: 20px;
	  font-size:clamp(2.5rem,5vw,4rem);
	text-align: left;
	Color:#401810;
	width: 60%;

	margin-bottom: 40px;
}
nav h2{
    color:white;
}

nav ul{
    list-style:none;
    display:flex;
    gap:30px;
}

nav a{
    text-decoration:none;
    color:white;
    padding:8px 15px;
    border-radius:6px;
    transition:0.3s ease;
}

.icon-whatsapp i{
	
     align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;

	
}
.icon-whatsapp{
    position: relative;
    top: -6px;
}


nav a:hover{
    background:rgba(255,255,255,0.2);
}
nav.scrolled{
    background:rgba(195,33,39, 0.9);
    backdrop-filter: blur(15px);
    box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

/* 👇 Cambio de fondo al pasar el mouse */
nav:hover{
		background:rgba(195,33,39, 0.8);
}
nav a:hover{
  	background:#000000;
    color:White;
	border-radius: 20px;
	
}
nav a.active{
    border-bottom:1px solid #fff;
}
/* HERO SOLO PARA INDEX */
.hero{
    height:100vh;
    background:url("Imagenes/Portada-1.png") center/cover;
    display:flex;
	box-sizing: border-box;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
	margin-top:px;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}

.Principal{
	
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

.seccion1 {
  display: flex;
  background:url("Imagenes/Fondo-sec2.png") center/cover;
  min-height: 70vh; 
  color: white;
}
.seccion2 {
  display: flex;
  min-height: 100vh;
  background-color:#ca2126;
  color: white;
}
.contenedor {
  width: 90%;
  max-width: 1200px; /* límite profesional */
  margin: 0 auto; /* centra horizontalmente */
  display: grid;
  grid-template-columns: 1fr  1fr;
  gap: 40px; /* espacio entre columnas */
  align-items: center;
}

.columna {
  flex: 1; /* Divide en 2 partes iguales */
  padding: 60px;
}
.columna.derecha{

	  border-radius: 30px;
	 
}

.columna.izquierda {
  display: flex;
  justify-content: center;
  align-items: center;
}

.columna.izquierda img {
  max-width: 80%;   /* Nunca ocupa más del 80% de la columna */
  height: auto;     /* Mantiene proporción */
	border-radius: 52px;
}
h2.subtitulos{
	margin-bottom: 20px;
	font-size:clamp(2.2rem, 2vw, 1rem);
	color:#FFFFFF;
	font-family: "Arial Black", Arial, sans-serif;
	
	
}

p.textos1{
	font-size: clamp(1.5rem, 2.5vw, 1.3rem);
	color:#FFFFFF;
	text-align: justify;
    text-justify: inter-word;
}




/* ESTILO PARA LAS OTRAS PÁGINAS */
.page{
    padding:100px 50px;
    text-align:center;
}

/* BOTÓN */
.cta{
    background:#cc3333 ;
    padding:12px 30px;
    border-radius:30px;
    color:white;
    text-decoration:none;
    display: block;
  	width: fit-content;
  	margin: 20px 0 0 0;
	font-family: "Arial Black"
}

.cta:hover{
	background: rgba(204,51,51,0.83);
	transition:0.4s ease;
}

/* TARJETAS */
.service-grid{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.card{
    background:#f4f4f4;
    padding:30px;
    border-radius:10px;
}

/* Animación inicial */
body{
    opacity:0;
    transition:opacity 0.6s ease-in;
}



.eslogan{
	color:#401810;
	font-size: 150%;
	text-align: left;
	width: 65%;
 
    text-justify: inter-word;
	
}



/* Botón hamburguesa */
.menu-toggle{
 
    display:none;
    font-size:30px;
    color:white;
    cursor:pointer;
    padding:10px;
}           /* 👈 Color del icono */


.menu-toggle:hover{
    background:#edcbbc;     /* 👈 Color al pasar el mouse */
}
.close-menu{
    position:absolute;
    top:20px;
    right:30px;
    font-size:35px;
    color:white;
    cursor:pointer;
}


.close-menu{
    display: none;
}

nav ul.show .close-menu{
    display: block;
}



.Banner2 {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:60px 20px;
}



.Banner2 img {
    width:90%;
    max-width:1200px;
    height:auto;
  


}

.Banner2 .cta2{
	background:#cc3333;
	text-align: center;
    padding:12px 30px;
    border-radius:30px;
    color:white;
    text-decoration:none;
    margin-top:25px;
	font-family: "Arial Black"
}

.cta2:hover{
	background: rgba(204,51,51,0.83);
	transition:0.4s ease;
}


.promocion{
    width: 100%;
    overflow: hidden;
}

.promocion img{
    display: block;
    width: 100%;
    height: auto;
}

/*FOOTER*/
.footer-contenedor {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 80px;
}
.footer {
  color:#401810;
  padding: 60px 0 20px;
 background: #EFCEB6;
}

.footer-contenedor img {
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
  display: block;
}


.footer-col h3,
.footer-col h4 {
  margin-bottom: 20px;
	color:#401810; 
	
}

.footer-col p,
.footer-col a {
  color: #401810;
  text-decoration: none;
  line-height: 1.8;
}

.footer-col a:hover {
  color: #401810;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  border-top: 1px solid #333;
  padding-top: 20px;
  font-size: 14px;
  color: #401810;
}
/*    */


.whatsapp-footer{
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    
}

.whatsapp-footer .fa-circle{
     transform: translate(-10%, 5%);
    font-size: 22px;
}

.whatsapp-footer .whatsapp-logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-80%, -50%);
    color: white;
    font-size: 12px;
}


/* Responsive */


/* ---------- TABLET ---------- */
@media (max-width:1024px){

  .Principal{
    padding:0 40px;
  }

  h1{
    width:70%;
    font-size:clamp(2.5rem,5vw,4rem);
  }



  .contenedor{
    gap:30px;
  }

  .columna{
    padding:30px;
  }
	 .footer-contenedor {
        width: 92%;
        gap: 30px;
		  margin:0 auto 25px auto;
    }


}


/* ---------- MOBILE ---------- */
@media(max-width:900px){
	.eslogan{
	color:#401810;
	font-size: 160%;
	}
 
	
	.columna.izquierda {
    display: flex;
        justify-content: center;
        align-items: center;
}

.columna.izquierda img {
    display: block;
        margin: 0 auto;
}
	
	.hero{
    min-height:100svh;
    background-position:center;
    padding-top:120px;
  }

  .Principal{
    padding:0 25px;
  }
	
	
/* ---------- HAMBURGUESA ---------- */
	
  
    .menu-toggle{
        display:block;
    }

    nav ul{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:30px;

        position:fixed;
        top:0;
        right:0;

        width:90%;
        height:100vh;

        background: rgba(53,11,12,0.89);

        /* Oculto fuera de pantalla */
        transform:translateX(100%);

        transition:transform 0.4s ease-in-out;

        z-index:999;
    }

    nav ul.show{
        transform:translateX(0);
    }

 nav ul li{
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

nav ul li a{
    display: block;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    text-decoration: none;
    color: white;
}
	nav ul li a:hover,
nav ul li a:active{
    background: rgba(255,255,255,0.1);
}
	
/* ------------------- */
	
  .contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

 h1{
    width:100%;
    font-size:clamp(3.2rem,2vw,1rem);
    line-height:1.1;
    text-align:left;
  }

  .eslogan{
    width:90%;
    font-size:1.6rem;
    line-height:1.7;
    text-align:left;
  }

  .cta{
    margin-top:30px;
  }

  .contenedor{
    grid-template-columns:1fr;
    gap:30px;
    padding:60px 0;
  }

  .columna{
    padding:10px;
  }

  .columna.izquierda{
    justify-content:flex-start;
  }

  .columna.izquierda img{
    max-width:60%;
  }



.servicios-contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}
	
	 h2.subtitulos{
    width:100%;
    font-size:clamp(2rem,7vw,3rem);
    text-align:left;
  }

  p.textos1{
    font-size:1.6rem;
    line-height:1.8;
    text-align:left;
  }

  .Banner2{
    padding:40px 20px;
  }

  .Banner2 img{
    width:100%;
    border-radius:20px;
  }

   /* ===== FOOTER ===== */

   
  .footer-contenedor {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 40px;
    row-gap: 30px;
    padding: 0 20px;
  }
	
	

  /* Logo y descripción */
  .footer-col:first-child {
    grid-column: 1 / -1;
    text-align: center;
  }

  /* Contacto */
  .footer-col:nth-child(2) {
    border-right: 3px solid rgba(64, 24, 16, 0.25);
    padding-right: 20px;
  }

  /* Enlaces */
  .footer-col:nth-child(3) {
    padding-left: 5px;
  }
		

}


@media (max-width:480px){

	.hero{
	background:url("Imagenes/Inicio-responsive.png") center;
	}
	  .logo{
        width: auto;
        height: auto;
    }

    .logo img{
        width: auto;
        max-width: 200px;
        height: auto;
        object-fit: contain;
        display: block;
    }
	
	.logo{
    flex-shrink: 0;
}
  .Principal{
    padding:0 18px;
  }

  h1{
    font-size:clamp(2.5rem,5vw,2.8rem);
    width:100%;
  }

  .eslogan{
    width:100%;
    font-size:1.4rem;
	  
  }

  .cta,
  .cta2{
    width:fit-content;
  }

  .columna.izquierda img{
    max-width:75%;
  }

  h2.subtitulos{
    font-size:27px;
  }

  p.textos1{
    font-size:1.2rem;
	    
  }
	
		
  .footer-contenedor {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0;
    padding: 0 20px;
  }

  .footer-col {
    width: 100%;
    max-width: 350px;
    padding: 20px 0;
  }

  /* La primera sección sigue ocupando todo */
  .footer-col:first-child {
    grid-column: auto;
    border-bottom: 1px solid rgba(64, 24, 16, 0.25);
  }

  /* Contacto */
  .footer-col:nth-child(2) {
    border-right: none;
    border-bottom: 1px solid rgba(64, 24, 16, 0.25);
    padding-right: 0;
  }

  /* Enlaces */
  .footer-col:nth-child(3) {
    padding-left: 0;
  }
	
.whatsapp-footer .fa-circle{
     transform: translate(-15%, 5%);
    font-size: 22px;
}

}