@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body, html {

      margin: 0;
      padding: 0;
      font-family: 'Noto Serif', serif;
       font-weight: 300;      
	     font-size: 14px;
	     background: #E8D9C9;
	     color: #F2E8DA;
      overflow-x: hidden;
    }

/* ----------------------------- NAVBAR --------------------------- */
 
.navbar {
  
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  padding: 0 20px;
  z-index: 10;
    background: linear-gradient(
    to bottom,
    rgba(31, 30, 30, 0.50) 0%,
    rgba(0,0,0,0.25) 50%,
    rgba(0,0,0,0.05) 100%
  );
}

   /*-------------- LOGO ------------*/
.logo img {
  height: 36px;  
  margin-right: 18px; 
}

/* ----------------------- HAMBURGER MENU -------------------------------- */

.hamburguer {
  width: 28px;
  height: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 
}

    .hamburguer span {
      display: block;
      height: 2px;
      background: white;
      border-radius: 2px;
    }
    

/* ---------------------- MENU FOLD-OUT -------------------------------- */
    .side-menu {
      position: fixed;
      top: 0;
      left: -300px;
      width: 300px;
      height: 100%;
      background: #060d0a;
      color: white;
      padding: 40px 30px;
      box-sizing: border-box;
      transition: 0.4s;
      z-index: 20;
    }
  
    .side-menu.open {
      left: 0;
    }

    .side-menu a {
      font-family: 'Philosopher', sans-serif ;
      font-weight: 400;    
      color: white;
      text-decoration: none;
      font-size: 1.5rem;
      display: block;
      margin: 18px 0;
    }

    .close-btn {
      font-size: 25px;
      cursor: pointer;
      display: block;
      margin-bottom: 20px;
    }

/* -------------------------- HERO SECTION ------------------------------- */
   .hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ---------------------- FONDO DIFUMINADO AL ABRIR MENÚ ------------------------*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); 
  background: rgba(255,255,255,0.3); 
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  z-index: 15; 
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ---------------------------- SLIDER ----------------------------------- */
.slider-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; 
}
.slider {
  display: flex;
  height: 100%;
}

.slide {
  width: 100%;
  height: 100%;
   flex-shrink: 0;
  object-fit: cover;
}

/* -------------------------- FLECHA DERECHA -------------------------------- */
.arrow-right {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 55px;
  font-weight: 300;
  color: white;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 8px;
  transition: 0.3s ease;
}

.arrow-right:hover {
  color: black;
}

/* ---------------------------- HERO TEXTO ----------------------------------- */
.hero-text {
  position: absolute;
  bottom: 40px;
  left: 40px;
  color: white;
  font-size: 1.4rem;
  z-index: 10;
  font-family: 'Noto Serif', serif;
}  
/* --------------------------  SEPARADORES  ------------------------------------------*/
.separador-negro {
  width: 100%;
  height: 15px;   
  background: #000;
}

.separador-negro-proyectos{
    width: 100%;
  height: 75px;  
  background: #000;
}


 /* ---------------------SECTIONS PROYECTOS,CARPINTERIA, MADERAS ---------------------- */
    .sections {
      display: flex;
      width: 100%;
      height: 100vh;
    }

    .section {
      flex: 1;
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
     
    }

    .section::after {
      content: "";
      position: absolute;
      top:0; left:0;
      width:100%; height:100%;
      background: rgba(0,0,0,0.3);
    }

.section a {
  position: absolute;
  text-decoration: none;
  text-align: center;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -10%);
  color: white;        
  z-index: 3;
  font-size: 20px;
  font-weight: 100;
}


/* --------------------------- SECTION TRAYECTORIA --------------------------- */
.trayectoria {
    background: #000;
    padding: 80px 20px;
    color: white;
    text-align: center;
    font-family: 'Noto Serif', serif;
}

.trayectoria-content {
    max-width: 900px;
    margin: auto;
    line-height: 1.7;
    font-size: 1rem;
}

.trayectoria strong {
    font-weight: bold;
    letter-spacing: 1px;
}
/* ----------------------------- RESPONSIVE HOME ------------------------------ */
/* 🔧 FIX PARA MOVILES Y TABLETS */
@media (max-width: 1024px) {
  .sections {
    height: auto !important;       
    flex-direction: column;       
  }

  .section {
    height: 40vh;                  
    min-height: 250px;            
  }

  .section a {
    font-size: 1.3rem;
    top: 30px;
  }
}

/*------------------... 📱 CELULARES (pantallas chicas) -----------------------*/
@media (max-width: 768px) {

  .navbar {
    height: 60px;
    padding: 0 15px;
  }

  .logo img {
    height: 32px;   
    margin-right: 14px;
  }

  .hamburguer {
    width: 26px;
    height: 20px;
  }

  .hamburguer span {
    height: 2px;
  }

  /* Texto del hero más pequeño y mejor alineado */
  .hero-text {
    font-size: 1.2rem;
    bottom: 28px;
    left: 22px;
  }

  /* Secciones una debajo de otra */
  .sections {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .section {
    height: 36vh;
    font-size: 220px;
  }

  .side-menu {
    width: 240px; /* menú más angosto en celular */
    left: -240px;
  }
  .section a{
    font-size: 1.2rem;
  }
}

/* 📱📲 CELULARES MUY PEQUEÑOS (iPhone SE, Android chicos) */
@media (max-width: 480px) {

  .logo img {
    height: 28px;
  }

  .hamburguer {
    width: 24px;
    height: 18px;
  }

  .hero-text {
    font-size: 1.2rem;
    bottom: 20px;
    left: 18px;
  }

  .section {
    font-size: 1.2rem;
  }
}

/* 💻📺 PANTALLAS GRANDES */
@media (min-width: 1400px) {

  .hero-text {
    font-size: 1.4rem;
    left: 60px;
    bottom: 60px;
  }

  .section {
    font-size: 1.4rem;
  }
}
/* -------------------------------- WHATSAPP BUTTON--------------------------- */
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background-color: rgb(189, 121, 55);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  width: 65px;
  height: 65px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #1ebe57;
}
/* ----------------------------- FOOTER AND ISOTIPO --------------------------- */
.footer {
    background: #E8D9C9;
    padding: 60px 20px 20px 20px;
    font-family: 'Noto Serif', serif;
    font-weight: 400;
    color: #000;
}

.footer-container {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 55px;
    align-items: flex-start;
    left: 20px;
}
.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;   /* CENTRA todo dentro de cada columna */
    text-align: center;    /* Texto centrado */
}
/*---------------- Columna 1 -------------------------*/
.footer-logo {
  margin-top: 25px;
    width: 200px;
    margin-bottom: 10px;
    
}

.footer-text {
    font-size: 14px;
    line-height: 1.3;
}

/*---------------- Columna 2 ---------------------*/
.footer-title {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.footer-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 17px;
}

.footer-info i {
    font-size: 20px;
}
/* ESTILO PARA ENLACES DEL FOOTER */
.footer-info a {
    color: #000;            /* Texto negro */
    text-decoration: none;  /* Sin subrayado */
    font-size: 17px;        /* Misma medida que tu info */
    transition: 0.3s;
}

.footer-info a:hover {
    color: #5c4a3f;         /* Tono café suave (armoniza con tu diseño) */
    text-decoration: none;
}
/*--------------- Columna 3 ------------------*/
.footer-social {
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-social a i {
    font-size: 28px;
    color: #000;
    transition: 0.3s;
}

.footer-social a i:hover {
    transform: scale(1.2);
}

/*------------------- COPYRIGHT ------------------------*/
.footer-copy {
    text-align: center;
    margin-top: 40px;
    padding-top: 15px;
    font-size: 16px;
}

/* ---------------------------- ESTILOS PARA ISOTIPO -------------------------------- */
.isotipo-section {
    background-color: #000000; 
    padding: 30px 20px; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}

.isotipo-content {
    max-width: 1400px; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 15px; 
}

.isotipo-img {
    width: 1150px;
    height: auto;
}
/*  ===========================  RESPONSIVE FOOTER AND ISOTIPO  =========================== */

/* Tablets (máx. 992px) */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        text-align: center;
    }

    .footer-social {
        margin-left: 0;
        align-items: center;
    }

    .footer-logo {
        width: 180px;
    }
    .isotipo-img {
        width: 80%;     
        max-width: 1000px;
    }

    .isotipo-section {
        padding: 25px 20px;
    }
}

/* Celulares medianos (máx. 768px) */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-col {
        align-items: center;
        text-align: center;
    }

    .footer-logo {
        width: 160px;
        margin-top: 5px;
    }

    .footer-title {
        font-size: 18px;
    }

    .footer-info {
        font-size: 16px;
    }

    .footer-info a {
        font-size: 16px;
    }

    .footer-social a i {
        font-size: 26px;
    }

    .footer-social {
        margin-left: 0;
        flex-direction: row;
        gap: 25px;
    }
    .isotipo-img {
        width: 90%;
        max-width: 800px;
    }

    .isotipo-section {
        padding: 20px 15px;
    }
}

/* Celulares pequeños (máx. 480px) */
@media (max-width: 480px) {

    .footer {
        padding: 50px 15px 20px 15px;
    }

    .footer-logo {
        width: 140px;
    }

    .footer-info {
        flex-direction: column;
        gap: 5px;
    }

    .footer-info i {
        font-size: 18px;
    }

    .footer-info a {
        font-size: 15px;
    }

    .footer-text {
        font-size: 14px;
    }

    .footer-social a i {
        font-size: 24px;
    }

    .footer-copy {
        font-size: 14px;
    }
     .isotipo-img {
        width: 100%;
        max-width: 500px;   
    }

    .isotipo-section {
        padding: 18px 10px;
    }
}
/* ---------------------------- STYLES FOR PROJECT VIEWS -------------------------------- */
.separador-negro-proyectos{
    width: 100%;
  height: 75px;   
  background: #000;
}

.btn-descargar {
    display: block;
    color: #000;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    text-decoration: none;
    margin-top: 16px;
    
}
/* ---------------------------- GALERIA -------------------------------- */
.galeria-proyectos {
    width: 100%;
    max-width: 1900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 columnas base */
    gap: 10px;
    padding: 20px 0;
}

.item-proyecto img {
    width: 100%;
    height: 640px; 
    object-fit: cover;
    border-radius: 6px;
}
.item-proyecto.corto img {
    height: 640px; /* AJUSTA este valor a tu gusto */
    object-fit: cover;
    width: 60%;
    border-radius: 8px;
}
/* IMÁGENES NORMALES: 6 columnas cada una */
.item-proyecto {
    grid-column: span 6;
}

/* IMÁGENES ANCHAS (un poco más grandes): 7 columnas */
.item-proyecto.ancha {
    grid-column: span 7 !important;
}

/* La imagen que va al lado toma 5 columnas */
.item-proyecto.compacta {
    grid-column: span 5 !important;
}
/* La fila de 3 imágenes debe ocupar TODAS las columnas y comportarse como un bloque independiente */
.fila-3 {
    grid-column: 1 / -1;   /* Ocupa toda la fila del grid */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Imágenes más bajitas SOLO dentro del grupo fila-3 */
.fila-3 img {
    width: 100%;
    height: 640px;  /* Ajusta la altura a lo que te guste */
    object-fit: cover;
    border-radius: 6px;
}
.fila-3 .item-proyecto {
    flex: none !important;     /* Cancela tu flex anterior */
    grid-column: span 1 !important; /* Las mantiene como 3 columnas */
}
/* ---------------------------- STYLES FOR CARPINTERIA VIEWS -------------------------------- */
.titulo-seccion {
    width: 100%;
    text-align: center;
    background-color: #b87436; 
    color: white;
    padding: 18px 0;
    font-size: 26px;
    font-weight: 300;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* La fila de 3 imágenes debe ocupar TODAS las columnas y comportarse como un bloque independiente */
.fila-4 {
    grid-column: 1 / -1;   
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Imágenes más bajitas SOLO dentro del grupo fila-3 */
.fila-4 img {
    width: 100%;
    height: 640px;  /* Ajusta la altura a lo que te guste */
    object-fit: cover;
    border-radius: 6px;
}
.fila-4 .item-proyecto {
    flex: none !important;     /* Cancela tu flex anterior */
    grid-column: span 1 !important; /* Las mantiene como 3 columnas */
}
/* ---------------------------- RESPONSIVE PROYECTOS -------------------------------- */

/* 📌 TABLETS (pantallas medianas) */
@media (max-width: 1024px) {

    .galeria-proyectos {
        grid-template-columns: repeat(8, 1fr); /* 8 columnas */
        gap: 10px;
        padding: 18px 0;
    }

    .item-proyecto {
        grid-column: span 4;
    }

    .item-proyecto.ancha {
        grid-column: span 5 !important;
    }

    .item-proyecto.compacta {
        grid-column: span 3 !important;
    }

    .item-proyecto img,
    .fila-3 img,
    .fila-4 img {
        height: 420px; /* Más compactas en tablet */
    }

    .fila-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .fila-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* 📱 CELULARES */
@media (max-width: 768px) {

    .galeria-proyectos {
        grid-template-columns: repeat(6, 1fr); /* 6 columnas base */
        padding: 14px 0;
        gap: 8px;
    }

    .item-proyecto {
        grid-column: span 6; /* Cada imagen ocupa toda la fila */
    }

    .item-proyecto.ancha,
    .item-proyecto.compacta {
        grid-column: span 6 !important;
    }

    .item-proyecto img,
    .fila-3 img,
    .fila-4 img {
        height: 320px; /* Ideal para móvil */
    }

    /* Fila de 3 ⇒ pasamos a 2 columnas */
    .fila-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Fila de 4 ⇒ pasamos a 2 columnas */
    .fila-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .titulo-seccion {
        font-size: 22px;
        padding: 14px 0;
    }
}


/* 📱📲 CELULARES MUY PEQUEÑOS */
@media (max-width: 480px) {

    .galeria-proyectos {
        grid-template-columns: repeat(4, 1fr); /* 4 columnas */
        gap: 8px;
    }

    .item-proyecto {
        grid-column: span 4;
    }

    .item-proyecto img,
    .fila-3 img,
    .fila-4 img {
        height: 250px; /* Más delgadas para pantallas pequeñas */
    }

    /* Fila de 3 ⇒ 1 columna */
    .fila-3 {
        grid-template-columns: repeat(1, 1fr);
    }

    /* Fila de 4 ⇒ 1 columna */
    .fila-4 {
        grid-template-columns: repeat(1, 1fr);
    }

    .titulo-seccion {
        font-size: 20px;
        padding: 12px 0;
    }

    .btn-descargar {
        font-size: 16px;
    }
}

/* ---------------------------- STYLES FOR MADERAS VIEWS -------------------------------- */

/* Sección completa con imagen de fondo */
.maderas-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    background-image: url("../img/melifluo.jpg ");/* <-- tu imagen */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Capa semitransparente opcional */
.maderas-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35); /* oscurece la imagen */
}

/* Contenido centrado */
.maderas-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding: 25px;
}

/* Título grande */
.titulo-maderas {
    font-size: 62px;
    font-weight: 500;
    color: white;
    margin-bottom: 20px;
}

/* Texto pequeño y centrado */
.descripcion-maderas {
    font-size: 17px;
    font-weight: 300;
    color: white;
    line-height: 2.2;
}

/* Botón centrado */
.btn-descargar-maderas {
    display: block;
    width: fit-content;
    margin: 25px auto 0;
    padding: 12px 28px;
    background: black;
    color: white;
    font-size: 18px;
    font-weight: 400;
    border-radius: 4px;
    text-decoration: none;
}

/* Asegurarse de que el título esté centrado y tenga el estilo de las imágenes */
.contenido-section {
    max-width: 100%;
    margin: 80px auto;
    padding: 0 20px;
    background-color: #ffffff;
}

.contenido-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 5px;
    margin-bottom: 50px;

    color: #000000;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    width: 100%;
}

.contenido-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas como en la imagen */
    gap: 20px;
    text-align: center;
}

.contenido-grid .item {
    font-size: 1rem;
    font-weight: 400;
    padding: 10px 5px;
    color: #161616; /* Color del texto normal */
    text-decoration: none;
    transition: color 0.3s;
}

.contenido-grid .item:hover {
    color: #a0a0a0; /* Color al pasar el ratón */
}

/* ------------------ MADERAS CARDS -----------------*/
.background-section{
  background-color: white;
 
}

.detalle-madera-section {
    max-width: 1200px;
    margin: 50px auto 100px auto; /* Más espacio abajo para el footer o la siguiente sección */
    padding: 0 20px;

    
}
/* Encabezado y títulos */
.detalle-madera-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 30px;
    gap: 40px;
}

.madera-title {
    font-size: 3.5rem; /* Ajusta el tamaño según tu diseño */
    font-weight: 300;
    color: #000000;
    margin: 0;
}

.madera-info p {
    margin: 0;
    font-size: 1.3rem;
    color: #000000; /* Color gris suave */
    line-height: 1.2;
    margin-bottom: 5px;
}

/* Contenido principal (Imagen y Especificaciones) */
.detalle-madera-content {
    display: flex;
    
    gap: 50px;
    flex-wrap: wrap; /* Permite que los elementos se apilen en móviles */
}

/* Columna de la imagen */
.madera-visual {
    position: relative;
    flex-basis: 0 0 320px; /* Ancho fijo para la imagen */
    display: inline-block;
    overflow: hidden;
 
}

.madera-image {
    width: 100%;
    height: auto;
    display: block;
}
.etiqueta-maciza {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    font-size: 0.8rem;  
    font-weight: bold;
    z-index: 10;
}
/* Columna de especificaciones */
.madera-specs {
    flex-grow: 1;
    min-width: 400px; /* Mínimo para mantener la cuadrícula */
    max-width: 650px;
}
.spec-group {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para etiquetas y valores */
    gap: 5px 30px; /* Espacio vertical y horizontal */
    padding: 15px 0;
}

.spec-separator {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0;
}

.spec-label {
    font-weight: bold;
    font-size: 0.9rem;
    color: #333;
    /* Aplicar a la primera fila del grid para las etiquetas principales */
    grid-column: span 1; 
}

/* Alineación de las etiquetas principales con el formato de la imagen */
.spec-group > .spec-label:nth-child(1) {
    grid-column: 1 / 2;
}
.spec-group > .spec-label:nth-child(2) {
    grid-column: 2 / 3;
}

.spec-value {
    font-size: 0.9rem;
    color: #141212;
}

/* Estilo para los puntos (dots) */
.spec-value span {
    font-size: 1.5rem; /* Hace los puntos más grandes y visibles */
    font-weight: bold;
    letter-spacing: -3px; /* Junta los puntos */
    vertical-align: middle;
    display: inline-block;
    color: #333; /* Color de los puntos */
}

.dot-radio {
    width: 10px;
    height: 10px;
    border: 1px solid #333;
    border-radius: 50%;
    margin-right: 15px; /* Espacio antes del siguiente texto */
    display: inline-block;
    vertical-align: middle;
}

.dot-radio.active {
    background-color: #333;
}

/* Estilos específicos para la sección de Acabado/Tono */
.acabo-plagas-group .spec-value:nth-child(3) { /* Fila de Natural/Color */
    grid-column: 1 / 2;
}           
.acabo-plagas-group .spec-value:nth-child(4) { /* Fila de N/A */
    grid-column: 2 / 3;
}
.acabo-plagas-group .spec-value:nth-child(5) { /* Fila de Entintado */
    grid-column: 1 / 2;
}
.separador-blanco{
    width: 100%;
  height: 75px;   
  background: #ffffff;
} 


/* Columna de especificaciones */

/* --- MEDIA QUERIES --- */

/* ---------------------------- RESPONSIVE MADERAS -------------------------------- */

/* 📌 TABLETS (pantallas medianas) */
@media (max-width: 1024px) {

    .maderas-hero {
        height: 60vh;
        background-position: center;
    }

    .titulo-maderas {
        font-size: 48px;
    }

    .descripcion-maderas {
        font-size: 16px;
        line-height: 1.8;
    }

    .contenido-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .detalle-madera-header {
        gap: 20px;
    }

    .madera-title {
        font-size: 2.8rem;
    }

    .madera-info p {
        font-size: 1.1rem;
    }

    .detalle-madera-content {
        gap: 30px;
    }

    .madera-specs {
        min-width: 300px;
        max-width: 100%;
    }
}

/* 📱 CELULARES */
@media (max-width: 768px) {

    .maderas-hero {
        height: 50vh; /* Más compacto */
        padding: 0 15px;
    }

    .maderas-content {
        padding: 15px;
    }

    .titulo-maderas {
        font-size: 34px;
        line-height: 1.1;
    }

    .descripcion-maderas {
        font-size: 15px;
        line-height: 1.6;
    }

    .btn-descargar-maderas {
        font-size: 16px;
        padding: 10px 22px;
    }

    .contenido-section {
        margin: 50px auto;
        padding: 0 15px;
    }

    .contenido-title {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }

    /* GRID: de 4 columnas a 2 columnas */
    .contenido-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .item {
        font-size: 0.95rem;
    }

    /* CARDS PRINCIPALES */
    .detalle-madera-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .madera-title {
        font-size: 2.4rem;
    }

    .madera-info p {
        font-size: 1rem;
    }

    .detalle-madera-content {
        flex-direction: column;
        gap: 25px;
    }

    .madera-visual {
        width: 100%;
        flex-basis: auto;
    }

    .madera-specs {
        min-width: 100%;
    }

    .spec-group {
        grid-template-columns: 1fr 1fr;
        gap: 8px 20px;
    }
}

/* 📱📲 CELULARES MUY PEQUEÑOS (<=480px) */
@media (max-width: 480px) {

    .maderas-hero {
        height: 42vh;
    }

    .titulo-maderas {
        font-size: 26px;
    }

    .descripcion-maderas {
        font-size: 14px;
    }

    .contenido-title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }

    /* GRID: de 4 → 2 → ahora 1 sola columna */
    .contenido-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .detalle-madera-content {
        gap: 20px;
    }

    .madera-title {
        font-size: 1.9rem;
    }

    .madera-info p {
        font-size: 0.95rem;
    }

    .spec-group {
        grid-template-columns: 1fr; /* TODO EN UNA SOLA COLUMNA */
    }

    .spec-label,
    .spec-value {
        font-size: 0.9rem;
    }

    .spec-value span {
        font-size: 1.2rem;
        letter-spacing: -2px;
    }

    .dot-radio {
        width: 8px;
        height: 8px;
        margin-right: 10px;
    }
}

/* ----------------------- SECTION CONTACTO ----------------------- */

.contact-hero {
    position: relative;
    width: 100%;
    height: 45vh;
    background-image: url("../img/contacto.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
}

.titulo-contact {
    position: relative;
    z-index: 2;
    font-size: 50px;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

/* ------------------ SECCIÓN FORM ------------------ */
.contact-section {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

/* Título */
.main-title {
    font-size: 32px;
    font-weight: 400;
    color: #000;
    margin-bottom: 25px;
}

/* 2 COLUMNAS */
.contact-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
}

/* FORMULARIO */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

label {
    font-size: 14px;
    color: #444;
}

input, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    font-size: 16px;
    background: white;
    box-sizing: border-box;
}

textarea {
    resize: none;
    height: 150px;
}

/* CAPTCHA REAL */
.captcha-real {
    margin: 10px 0;
}

/* Botón */
.submit-button {
    background: #96572d;
    color: white;
    border: none;
    padding: 14px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    width: 100%;
}

/* COLUMNA DERECHA */
.contact-info-box {
  
    padding: 25px;
  
}

.contact-info-box h3 {
    color: #000;
    margin-bottom: 15px;
}

.contact-info-box p {
    color: #000;
    margin-bottom: 15px;
}

.contact-info-box a {
    text-decoration: none;
    color: #222;
    font-weight: bold;
}

/* RESPONSIVE */
@media(max-width: 850px) {
    .contact-columns {
        grid-template-columns: 1fr;
    }
}
/* ----------------------- SECTION NOSOTROS----------------------- */
 .row{
      display: flex;
      width: 100%;
      margin: 0;       /* SIN MARGEN */
      padding: 0;      /* SIN PADDING */
      gap: 0;          /* SIN ESPACIO ENTRE COLUMNA */
    }

    .content{
      font-family: 'Philosopher', sans-serif ;
      
      flex: 1 1 50%;
       margin-top: 100px;
      padding: 40px;   /* si quieres que quede MÁS PEGADO, pon 0 */
      box-sizing: border-box;
    }

    .media{
      flex: 1 1 50%;
      margin: 0;
      padding: 0;
    }

    .media img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      margin: 0;
      padding: 0;
      border-radius: 0; /* por si quieres bordes rectos tocando */
    }

    .title{
      margin: 0 0 16px 0;

      font-weight: 400;
      color: #000;
      font-size: 34px;
    }

    .desc{
     
      margin: 0;
      font-weight: 300;
      color: #000;
      font-size: 19px;
      line-height: 1.8;
    }

    .row.reverse{
      flex-direction: row-reverse;
    }

    @media (max-width: 800px){
      .row{
        flex-direction: column;
      }
      .content{
        padding: 20px;
      }
    }