/* ======================
   Reset / Normalización
   ====================== */
*,
*::before,
*::after {
  box-sizing: border-box; /* layout predecible */
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ======================
   Variables (tema)
   ====================== */
:root{
  /* Colores */
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-primary: #024393; /* azul */
  --color-secondary:#DE264A;
  --color-primary-600: #1e40af;
  --color-muted: #6b7280;
  --color-success: #16a34a;
  --color-danger:  #ef4444;

  /* Tipografía */
  --font-sans: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Espaciados */
  --container-max: 1320px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
}

img{
    width:100%;
}

/* ======================
   Base (tipografía + cuerpo)
   ====================== */
html { font-size: 16px;   scroll-behavior: smooth;} 
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: #111827;
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #0f172a;
}
h1{
  font-size: 3.5rem;
  line-height: 4.5rem;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
}


/* Paragraphs */
p { margin-bottom: 1rem; color: var(--color-muted); }

figure{display: flex; align-items: center;}

/* ======================
   Layout helpers
   ====================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.container-fluid{
    width: 100%;
    margin: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Grid simple */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.col {
  flex: 1 1 0%;
  min-width: 0;
}

/* Flex helpers */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Botones */
.btn{display: flex; gap: 10px; background-color: var(--color-secondary);padding: 12px 24px;color:white;border-radius: 50px; transition: transform 1s;}
.btn__container{display: flex;}
.btn:hover{background: #eb4e6d; transform: scale(1.1);}


/* ======================
   Navbar
   ====================== */
.nav__top{padding-bottom: 20px; padding-top: 20px;}
.nav__togger{font-size: .8rem; margin-bottom: -20px; color: #024393;}
.nav__contact{gap: 3rem;}

.nav__main{background-color: var(--color-primary);padding: 10px 0px 10px 0px; color: white;}
.nav__menu{gap: 40px; display: flex;list-style: none;}
.nav__menu .nav__item{font-weight: 500;}

.nav__phone{color: white; font-size: 24px; margin-top: -10px;}

.menu__open-img{display: none; cursor: pointer;}
.menu__close-img{display: none; cursor: pointer; position: absolute; top: 20px; right: 20px;}
/* ======================
   Header
   ====================== */
.banner__container{display: flex; gap: 0px;}
.banner__bg{height: 600px; display: flex; justify-content: center; align-items: center;}
.banner__bg_one{padding: 20px 20px; width: 65%;background-image: url("/assets/img/bn-bg-1.jpg");background-repeat: no-repeat;background-size: cover;background-position: center;}
.banner__bg_one h1{color: white;}
.banner__bg_one p{color: white; font-size: 1.5rem;margin-bottom: 50px;}
.banner__bg_one h1 span{background-color: var(--color-primary); border-radius: 20px;padding: 0px 10px 5px 10px;}
.banner__bg_two{width: 35%;background-image: url("/assets/img/bn-bg-2.jpg");background-repeat: no-repeat;background-size: cover;background-position: center;}
.banner__bg_two h2{color: white; text-align: center;font-size: 2rem;line-height:2.5rem ;margin-bottom: 10px;}
.banner__bg_two p{color: white;font-size: 1.4rem;}
.banner__bg_two .btn__container{display: flex;}
.banner__bg_two .btn{margin: auto;}

.post_one{background-color: var(--color-secondary);padding: 10px 0px 10px 0px;}
.post_one h3, a{color: white;}

/* ======================
   Productos
   ====================== */

.products__container{padding: 100px 0px 100px 0px;}
.products__list{display: grid; grid-template-columns: 1fr 1fr 1fr; gap:20px; margin-top: 50px;}
.products__list img{margin: auto;}

.post__one, .post__two{color:white;height: 250px; border-radius: 20px; display: flex; flex-direction: column  ; padding: 30px; justify-content: space-between;}
.post__one h3, .post__two h3{color: white; font-size: 2rem; line-height: 2rem;}
.post__one span, .post__two span{margin-bottom: 20px;}
.post__one{background-image: url("/assets/img/bn-1.jpg"); background-position: center; background-size: cover;}
.post__two{background-image: url("/assets/img/bn-2.jpg"); background-position: center; background-size: cover;}

.banner__post{display: flex;}
.banner__post-one, .banner__post-two{height: 550px; width: 50%;}
.banner__post-one{display: flex; justify-content: center; align-items: end; background-image: url("/assets/img/bp.jpg"); background-position: center; background-repeat: no-repeat;background-size: cover;}
.banner__post-two{background-color: var(--color-primary); display: flex; align-items: start; justify-content:  center; flex-direction: column; padding: 5% 5%; }
.banner__post-two h2{font-size: 40px; color: white; line-height: 50px; margin-bottom: 20px;}
.span__mark{background-color: var(--color-secondary); width: 200px; display: flex; justify-content: center;align-items: center;height: 200px;}
.span__mark span{text-align: center; font-size: 1.5rem; line-height: 2rem;}
/* ======================
   Clientes
   ====================== */

.title__container{margin: auto;}
.title__item{text-align: center;margin-bottom: 20px; font-size: 3rem;}
.clientes__container{ padding: 100px 0px 0px 0px;}
.logos__clientes{display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 50px; gap:60px}
.logos__clientes img{margin: auto;}


.bg__post{padding-right:50px; display: flex; justify-content: end;align-items: center; background-image: url("/assets/img/bn_2.jpg"); border-radius: 5px; background-position: center; background-repeat: no-repeat; background-size: cover; height: 300px; width: 100%;}
.bg__post-content{display: flex; flex-direction: column; align-items: end;}
.bg__post-content h2{font-size: 3rem; line-height: 2.8rem; text-align: end;}
.bg__post-content h3{font-size: 1.8rem; margin-bottom: 20px; text-align: end;}


.mobiliario__container{padding: 100px 0px 100px 0px; background-color: #F5F5F5;}
.mobiliario__img{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 50px;}
.mobiliario__img img{margin: auto;}
.mobiliario__list{text-align: center; margin-top: 50px;}

.bg__post-one{text-align: center; background-image: url("/assets/img/bn-bg-3.jpg"); height: 400px;width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 100px; display: flex; justify-content: center; align-items: center;}
.bg__post-one h3{color: white;font-size: 1.7rem;}
.bg__post-one h2{color: white; font-size: 2.8rem; line-height: 2.8rem; margin-bottom: 20px;}
.btn__center{margin: auto;}

.contacto__container{background-color: var(--color-secondary);}
.contacto__form{display: flex; flex-direction: column; padding: 70px 70px;}
.contacto__form h3{color: white; font-size: 2.8rem; line-height: 2.5rem; margin-bottom: 50px;}
.contacto__form input{ width: 100%; height: 50px; margin: 10px auto; padding: 5px 15px; border-radius: 10px; border: none; background-color: #ffffff85;}
.contacto__form input:focus,.contacto__form textarea:focus { border-color: #007bff; background-color: #f0f8ff; outline: none;}
.contacto__form input::placeholder,.contacto__form textarea::placeholder{color: white;}
.contacto__form input:focus::placeholder, .contacto__form textarea:focus::placeholder{color: transparent;}
.contacto__form textarea{width: 100%; padding: 15px 15px; height: 200px; background-color: #ffffff85; margin-top: 20px; border: none; border-radius: 10px;}
.btnSubmit{background-color: var(--color-primary); color: white; padding: 20px 40px; width: 100%;border: none; border-radius: 50px; cursor: pointer;}

.footer__container{background-color: var(--color-primary); padding: 100px 0px;}
.footer__container h3, p , li, span{color: white;}
.footer__container h3{font-size: 1.3rem;}
.footer__container p , li{font-size: 1rem; font-weight: 300;}
.footer__container li{margin: 7px auto; list-style: none;}
.footer__container span{font-size:2rem;}
.footer__logo{width: 30%;}
.footer__logo img{margin-bottom: 30px;}
.open{display: flex !important;}

.whatsapp{position: fixed; right: 20px; bottom: 100px; z-index: 20;}
.gracias{text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100vh;align-items: center;}
/* ======================
   Responsive (breakpoints)
   ====================== */

@media (max-width: 1380px) {
  .products__list{grid-template-columns: repeat(2, 1fr);}
  .mobiliario__img{grid-template-columns: repeat(2, 1fr);}
  .logos__clientes{grid-template-columns: repeat(3, 1fr) ;}
}

@media (max-width: 1024px) {
  .nav__contact{display: none;}
  .banner__container{flex-direction: column;}
  .banner__bg{width: 100%;}
  .products__list{grid-template-columns: 1fr;}
  .mobiliario__img{grid-template-columns: 1fr;}
  .banner__post{flex-direction: column;}
  .banner__post-one, .banner__post-two{width: 100%;}
}


@media (max-width: 768px) {
  .nav__menu{display: none; padding-top: 100px; align-items: center; flex-direction: column; color: var(--color-primary); position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; background-color: rgb(255, 255, 255);}
  .nav__menu .nav__item{color: var(--color-primary);}
  .menu__close-img{display: block;}
  .menu__open-img{display: block;}
  .row { flex-direction: column; }
  .container { padding-left: .75rem; padding-right: .75rem; }
  .logos__clientes{grid-template-columns: repeat(2, 1fr) ;}
  .title__container img{display: none;}
}