/*
  css/styles.css
  Estilos separados para la landpage FIX
  Comentarios y secciones en español.
  Mobile-first: diseñados para pantallas pequeñas y se ajustan en breakpoints.
*/

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root{
  --accent: #ef6c00;
  --dark: #111;
  --muted: #f2f2f2;
  --card-bg: #ffffff;
  --container: 1100px;
  --font-stack: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Reset básico y tipografía */
*{box-sizing:border-box;
overflow: hidden;
overflow-y: auto;}
html,body{  scroll-behavior: smooth; width: 100%;height:100%;margin:0;color:var(--dark);font-family:var(--font-stack)}
a{
  color:inherit;
  text-decoration:none;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3em;
}

/* Asumiendo que tu archivo PNG se llama 'silueta-botella.png' */
/* activar navlinks */
.nav-link {
  font-size: .6rem;
  color: #ffffff; text-decoration: none; padding: 6px 8px; transition: all .2s;
}
.nav-link.active {background: var(--accent); color:#000; font-weight:700; border-bottom: 2px solid #000; }

/* .cta { padding: 6px 12px; border-radius: 6px; background: transparent; }
.cta.active { background: black; color: white; } */

/* estilo demo para secciones */
.panel { min-height: 80vh; padding: 40px; box-sizing: border-box; }
 

/*  ////////////////////////////////////////// */
:root{
    --cols: 12;
    --rows: 6;
    --gap: 1px;
    --transition: 900ms;
    --tile-border-radius: 0px;
  }
  /* contenedor con dos capas apiladas */
  .mosaic-container{
    pointer-events: none;
    position:fixed;
    overflow: hidden;
    width:100%;
    height:100vh;
    top: 0; left:0;
    z-index: -3;
  }

  /* cada layer ocupa todo y se apila */
  .layer{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
/*     gap: var(--gap); */
    pointer-events: none;
    border: solid 1px #000 ;
  }

  /* front visible por defecto, back oculto (transitions via opacity) */
  .layer.front{ z-index:1;    border: solid 1px #000 ; }
  .layer.back{
        border: solid 1px #000 ;
    z-index:2;
    opacity:0;
    transition: opacity var(--transition) ease;
  }
  .layer.back.visible{ opacity:1;     border: solid 1px #000 ;}


  /* control minimal */
  .controls{
    position: absolute;
    top: 16px;
    display:flex;
    pointer-events:auto;
  }
  .controls button{
    position: absolute;
    background: rgba(255,255,255,0.08);
    border: none;
    color: #fff;
    border-radius: 6px;
    cursor:pointer;
    backdrop-filter: blur(4px);
  }

 /*  ////////////////////////////////////////// */

.video-botella {
    width: 40%;
    height: 100%;
    object-fit:fill;
    
    /* --- ¡Propiedades clave para usar el PNG! --- */
    
    /* 1. Define la imagen PNG como la máscara */
    -webkit-mask-image: url('../assets/siluetaLlama.png'); /* Para compatibilidad con navegadores basados en WebKit */
    mask-image: url('../assets/siluetaLlama.png');
    
    /* 2. Asegura que la máscara se ajuste al tamaño del video sin repetirse */
    -webkit-mask-size: contain;
    mask-size: contain;
    
    /* 3. Asegura que la máscara no se repita */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    /* 4. Opcional: Centra la máscara */
    -webkit-mask-position: center;
    mask-position: center;
}
.video-container {
    /* Define el tamaño del "lienzo" donde se mostrará la botella */
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    background-color: transparent;
    overflow: hidden; /* Oculta cualquier cosa que se salga del contenedor */
}

/* Contenedor principal */
.site-wrap{width:100%;margin:0;z-index: 4;}

/* Estilos globales de tipografía */
h1, h2, h3, h4, h5, h6 {
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
}

p, body, div, span, li {
  font-family: "Inter", sans-serif;
}

h1, .lead{
    text-align: center;     /* Justifica el texto */
/*     text-align-last: left;   /* La última línea NO se justifica */
}
.lead{
    display: flex;
    flex-direction: column;
    justify-content: center; align-items: center;
}
/* Header */
title{
    height:100px;
}

header{
    position: fixed;
    z-index: 1000;
    width: min-content; height: min-content;
/*   border: 1px solid black; */
        top: 10px; left: 10px;
    display:flex;
    align-items:end;
    justify-content:space-between;
}
.brand{
    display:flex; flex-direction: column;
    padding-top: 200px; padding-bottom: 100px;
    top: 0; 
    width: 100%; height: 100vh;
/*     background-color: #e5e6e0; */
pointer-events: none;
z-index: 2; 
    justify-content: center;align-items: center;
    align-items:center;
}
small{
  font-size: .9rem;
  font-weight: 600;
height: auto;
overflow: hidden;
}
.brand img{
  margin-top: 10px; margin-bottom: 10px;
}

.logo{width:92px;height:auto}
.logoEsquina{
  cursor: pointer;
    top: 0;
    width:100px;height:50px;
      background-image: url("../assets/fixEsquina.png");
    background-size:contain; background-position: center;
}
/* Menú principal: NO se oculta en móviles. Se muestra como fila horizontal.
   Si quieres un menú tipo hamburguesa podemos implementarlo más adelante. */
nav{
    display:flex;
    gap:12px;
    align-items:center;
    background-color: #0b0b0b;
    width: 100%;
    padding-left: 10px;
}
nav a{font-weight:600;color:#f8f8f8}
/* .cta{background:var(--accent);color:#fff;padding:8px 12px;border-radius:4px;font-weight:600}
 */
.fuego{
    position: relative;
    width: 100px; height: 50px;
    transform: translate(-40px);
    background-image: url("../assets/llama.png");
    background-size:contain; background-position: bottom; background-repeat: no-repeat;
/*     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 0 15px 5px rgba(255,165,0,0.7); */
}
/* Hero */
.hero{
  background:linear-gradient(180deg,#efefef 0,#f8f8f8 100%);
  padding:0 0;border-radius:6px;
  display:flex;
  flex-direction:column; align-items:center;
  width: 100vw;
  text-align:center}
.hero .hero-logo{
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
  object-position: top center;
  z-index: 400;
  flex-shrink: 0;
}
.hero h1{margin:10px 0 6px;font-size:20px;letter-spacing:1px;}
.hero p.lead{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center; align-items: center;
  background-image: url(../assets/ocaciondeuso.jpg);
  background-size: cover; background-position: center center;
  background-repeat: no-repeat;
  /* 2. Propiedad clave: Mantiene la imagen fija respecto a la ventana de visualización */
    background-attachment: fixed;
    padding:10vw;
  margin:0;
  color:white;
  text-align: center;
  font-size:1.8rem;
  font-weight:700;
  font-style: italic;
  line-height: 1.4;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
#fixSomos{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100vw;
  align-items: stretch;
}
#somos{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:3vw;
  width: 100%;
  height: max-content;
}
#somos h1{
text-align: left; 
 /* text-align: justify; */

    text-align-last: left;   /* La última línea NO se justifica */
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
/*   font-style: italic; */
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 20px;
/*   text-transform: uppercase; */
}

#somos p{
  text-align: justify;
  text-align-last: left;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 1em;
}

/* Intro (imagen + texto) */
.intro{display:flex;flex-direction:column;gap:18px;padding:22px 0}
.intro .media{width:100%;height:220px;background:#ddd;border-radius:6px;overflow:hidden;display:block}
.intro .content{background:transparent}
.intro h2{margin:0 0 8px;font-size:18px}
.intro p{margin:0;color:#333;line-height:1.5}

/* Grid de productos */
.products{
  transition: all 0.3s ease;
  background-image: url("../assets/fondoRustico.jpg");
  background-size: cover; background-position: center center;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;padding:4vh 5%;
}

.section-header {
  margin-bottom: 3vh;
  text-align: center;
  display: flex;
  justify-content: center;
  grid-column: 1 / -1;
  width: 100%;
}

.section-header h2 {
  margin: 0 0 16px 0;
  font-family: "Work Sans", sans-serif;
  font-weight: 800;
  font-size: 2.2em;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 2px;
  color: var(--dark);
  border-bottom: 3px solid var(--dark);
  padding-bottom: 12px;
  display: inline-block;
}

.section-header h2 .accent-text {
  color: var(--accent);
}
.card{
  transition: all 0.3s ease;
  background:var(--card-bg);
  padding:16px;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  display:flex;gap:16px;
  align-items:center}
.card img{width:168px;height:168px;object-fit:contain;flex-shrink:0}
.card .meta{flex:1}
.card .meta h3{
    font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  margin:0;font-size:26px}
.card .meta p{
   font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin:6px 0 0;
  font-size:16px;
  color:#666
}
.card:hover{
  border-bottom: solid 10px var(--accent);
  box-shadow:7px 4px 3px rgba(255, 126, 21, 0.3);
  transform:translateY(-6px) scale(1.05);
  transition:all 0.35s ease}

  .icons {
    width: 100%;
    height: 30px;
        background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    margin-top: 10px;
  }
 #icons1{background-image: url('../assets/iconos-14.png');}
 #icons2{background-image: url('../assets/iconos-15.png');}
 #icons3{background-image: url('../assets/iconos-15.png');}
 #icons4{background-image: url('../assets/iconos-15.png');}
 #icons5{background-image: url('../assets/iconos-16.png');}
 #icons6{background-image: url('../assets/iconos-17.png');}
/* Banner promocional */
.promo{
    width: 100vw; height: 80vw;
    background-color: white;
  background-image: url("../assets/promo.jpg");
    background-size: contain;

  background-position: center center; /* centrar la imagen */
  background-repeat: no-repeat;
}
/* .promo .promo-cans{display:flex;gap:12px;align-items:flex-end} */
/* .promo .promo-cans img{width:100vw;height:35%} */
/* .promo h2{margin:0;font-size:20px} */
/* .promo .offer{font-size:28px;font-weight:800} */

/* Logo partner */
.partner{
      width: 100vw; height: 50vw;
  background-image: url("../assets/partner.jpg");
    background-size: contain;
  background-position: center center; /* centrar la imagen */
  background-repeat: no-repeat;
}

/* Sección de contacto */
.contact{
  padding:10vw;
  height: auto;
  background-image: url("../assets/fondoRustico.jpg");
  background-size: contain;display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact h3{
  margin: 16px 0 12px 0;
  justify-content: center;
  text-align: center;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 1.8em;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 1px;
  color: var(--dark);
}

.contact > p {
    text-align: center;
  justify-content: center;
  font-size: 1.1em;
  color: #555;
  margin: 0 0 24px 0;
}
form.contact-form{
  display: flex;
  flex-direction: column;
  /* display:grid;
  grid-template-columns:1fr; */
  gap:10px
}
input[type="text"],input[type="email"],textarea{width:100%;padding:10px;border-radius:4px;border:1px solid #ddd;background:#fff}
button[type=submit]{
  cursor: pointer;
  width: 100%;
  background:var(--dark);
  color:#fff;
  padding:10px;
  border-bottom-left-radius:14px;border-bottom-right-radius:14px;
  border:0;font-weight:700;
  transition: all 0.3s ease;
}
button[type=submit]:hover{
  background-color: var(--accent);
}
/* Footer */
footer{
background-color: #0b0b0b;
    padding:18px 0;
    text-align:center;
    color:#777;
    font-size:13px
}

/* Ajustes para tablet/desktop */
@media(min-width:720px){
  header{padding:0 0}
/*   .site-wrap{padding:0 18px} */
  .hero{padding:0 0;
  display: flex;flex-direction: column;
align-items: center;}
  .hero .hero-logo{width:40vw}
  #somos{
    width: 40vw;
  padding:4vw;
  display: flex;
  justify-content: center;
  align-items: center;
}.nav-link {
  font-size: 1.2rem;
  color: #ffffff; text-decoration: none; padding: 6px 8px; transition: all .2s;
}
  .intro{flex-direction:row;gap:24px}
  .intro .media{width:48%;height:320px}
  .intro .content{width:52%}
  .section-header h2 {
    font-size: 2.6em;
  }
  .products{grid-template-columns:repeat(2,1fr)}
  .card img{width:220px;height:220px}
  .promo{align-items:center; height: 80vh;}
/*   .promo .promo-cans img{width:100vw} */
  form.contact-form{
  display: flex;
  flex-direction: row;
/*     grid-template-columns:1fr 1fr */
  }
  form.contact-form textarea{grid-column:1 / -1}

  #fixSomos{
    flex-direction: row;
    justify-content: center;
  }
  .hero .hero-logo{
    width: 30%;
    max-height: none;
    height: 100%;
  }
  #somos{
    width: 40vw;
  }

}

@media(min-width:1100px){
  .products{grid-template-columns:repeat(2,1fr); padding:20vh 15vw;}
  .intro .media{height:420px}
}