*{
    box-sizing: border-box;;
}

html{
    scroll-behavior: smooth;

}

h1{ font-size: 3.5em;}
h2{ font-size: 2.7em;}
h3{ font-size: 2em;}
p{ font-size: 1.25em;
text-align: justify;}
ul{ list-style: none;}
li{ font-size: 1em;}

    body{
    font-family: 'Roboto', sans-serif;
     margin: 0;
}

.text a {
    display: inline-block;
    font-size: 1em;
    background: #fff;
    padding: 10px 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    margin-top: 10px;
    color: #111;
    letter-spacing: 2px;
    transition: 0.2s;
}

.text a:hover{
    letter-spacing: 6px;
}

.explore-btn:hover{
    display: inline-block;
    padding: 10px 20px;
    background-color: #069be0;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.explore-btn:hover{
    background-color: #f3ef1b;

}

button {
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 10px;
    border: 2px solid #e8b86b;      /* Borde dorado */
    color: #181818;                  /* Texto oscuro */
    background-color: #e8b86b;       /* Fondo dorado claro */
    padding: 10px 28px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
}

button:hover {
    background-color: #d49a3a;       /* Dorado más intenso */
    color: #fff;                     /* Texto blanco al pasar el mouse */
    border-color: #d49a3a;
}

.container{
    max-width: 1400px;
    margin: auto;
}
.color-acento{ color: rgb(235, 175, 96);}


header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(24,24,24,0.45); /* Fondo oscuro semitransparente */
    padding: 10px 20px;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .menu-horizontal {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav .menu-horizontal li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 15px 20px;
    border-radius: 25px;
    transition: background-color 0.3s, color 0.3s;
}

nav .menu-horizontal li a:hover {
    background-color: #ff5722;
    color: #fff;
}

.logo-img {
    width: 120px;
    height: auto;
}

/* Oculta menú hamburguesa y texto responsive en escritorio */
.menu-icon,
.nombre-arcomex-responsive {
    display: none;
}



/* Menú horizontal glassmorphism solo en escritorio */
@media (min-width: 770px) {
    .menu-horizontal {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        list-style: none;
        margin: 0;
        padding: 0 32px;
        background: transparent;
        border-radius: 0 0 18px 18px;
        min-height: 56px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    }
    .menu-horizontal li {
        margin: 0;
    }
    .menu-horizontal a {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        padding: 10px 20px;
        border-radius: 25px;
        transition: background-color 0.3s, color 0.3s;
        font-size: 1em;
    }
    .menu-horizontal a:hover {
        background-color: #e8b86b;
        color: #181818;
    }
}

/* Menú hamburguesa y texto responsive solo en móvil */
@media (max-width: 769px) {
    .menu-horizontal {
        display: none;
    }
   
}

@media (min-width: 770px) {
    header .container {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    .logo-arcomex {
        flex: 0 0 auto;
        margin-right: 32px; /* Espacio entre logo y menú */
    }
    .menu-horizontal {
        flex: 1 1 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 18px;
        min-width: 0;
        overflow-x: auto;
    }
    .menu-horizontal li {
        white-space: nowrap;
    }
}

@media (min-width: 800px) {
    .menu-horizontal {
        justify-content: center;
        gap: 32px;           /* Espacio uniforme entre botones */
        flex: 1 1 0;
        min-width: 0;
        margin-left: 0;
    }
    .menu-horizontal li {
        white-space: nowrap; /* Evita que los botones se partan en dos líneas */
    }
}

header a:hover{
    color: blue;
}

header nav a:hover {
    background-color: #494848; /* Cambia el color de fondo al pasar el cursor */
    color: #ddd; /* Cambia el color del texto al pasar el cursor */
}


nav .menu-horizontal a {
    text-decoration: none; /* Quita el subrayado */
    color: #ffffff; /* Color del texto */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    transition: color 0.3s ease; /* Transición suave al pasar el mouse */
}

nav .menu-horizontal a:hover {
    color: #ff5722; /* Cambia el color al pasar el mouse */
}


@media (max-width: 769px) {
    nav .menu-horizontal {
        display: none; /* Oculta el menú */
    }
}



#hero {
    display: flex; /* Activa flexbox */
    flex-direction: column; /* Alinea los elementos verticalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
    text-align: center; /* Centra el texto */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    background-image: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
    ), url("imagenes/imginicio.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: white; /* Color del texto */
}
#hero h1{
    color: white;
}
#hero h1,
#hero p,
#hero a {
    margin: 0; /* Elimina márgenes */
    padding: 10px; /* Ajusta el espacio interno */
}

#somos-canteras .container {
    display: flex;
    flex-direction: row; /* Imagen a un lado del texto */
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 60px 12px;
    gap: 40px; /* Espacio entre imagen y texto */
}

#somos-canteras {
    background: #111;
    color: #fff;
    padding: 40px 0;
}

#somos-canteras h2,
#somos-canteras p,
#somos-canteras  {
    color: #fff;
}
.color-acento{ color: rgb(235, 175, 96);}

#nuestros-productos{
    background-color:rgb(30, 30, 30);
    color: white;
    text-align: center;
}

#nuestros-productos .container{
    padding: 150px 12px;

}

#nuestros-productos p{
    display: none;
}

#nuestros-productos h2{
    margin-top: 0;
    font-size: 3.2em;

}

#nuestros-productos .carta{
    background-size: cover;
    background-position:  center center;
    padding: 40px 0px;
    margin: 30px;
    border-radius: 35px;


}
.carta {
    padding: 5px;
    background-color: #ffe7af;
    outline: 10px solid rgb(250, 249, 193); /* Usar outline si prefieres que no afecte el tamaño del contenedor */
    background-size: 100% 150px;
    background-repeat: no-repeat;
    background-position-y: 0;
}




.carta:first-child{
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    )
    ,url("imagenes/imgproduc.jpg");
   

}

.carta:nth-child(2){
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    )
    ,url("imagenes/imgmarmoles.jpg");
    

}

.carta:nth-child(3){
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.5),
        rgba(0, 0, 0, 0.5)
    )
    ,url("imagenes/selladoresproduc.jpg");
    
}

#caracteristicas .container{
    text-align: center;
    padding: 200px 12px;

}

#caracteristicas li{
    margin: 16px 0px;
    font-weight: bold;
}

.footer {
    background-color: #000000; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    padding: 40px 20px;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    flex: 1;
    min-width: 250px;
}

.footer-section h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #c19a6b; /* Color acento */
}

.footer-section p, .footer-section a {
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    margin: 5px 0;
}

.footer-section a:hover {
    text-decoration: underline;
}

.iconos-redes {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.iconos-redes a img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.iconos-redes a img:hover {
    transform: scale(1.1);
}


.entregas-info {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.entregas-info img {
    width: 50px;
    height: 50px;
}

.footer-bottom {
    margin-top: 20px;
    border-top: 1px solid #444;
    padding-top: 10px;
    font-size: 0.9em;
    color: #aaa;
}

@media ( min-width: 720px){
    header{
        position: fixed;
        width: 100%;
    }
    header .container{
        flex-direction: row;
        justify-content: space-between;
    }

    header nav{
        flex-direction: row;
        padding-bottom: 0;
        padding-right: 20px;

    }

    #hero h1{
        font-size: 5em;

    }

    #somos-canteras .container{
        display: flex;

    }

    #somos-canteras .texto{
        width: 50%;
        max-width: 600px;
        text-align: initial;
        padding: 0px 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #somos-canteras .img-container{
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgb(0,0,0,0.5)
        ), url("imagenes/imgincio1.jpg");
        background-size: cover;
        background-position: center center;
        height: 600px;
        width: 400px;
    }

    #nuestros-productos .productos{
        display: flex;
        justify-content: center;
    }

    #nuestros-productos p{
        display: block;
        margin-bottom: 30px;
    }

    #nuestros-productos h3{
        margin-top: 0;
    }

    .carta:first-child{
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("imagenes/imgproduc.jpg");
       
    
    }
    
    .carta:nth-child(2){
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("imagenes/imgmarmoles.jpg");
        
    
    }
    
    .carta:nth-child(3){
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0, 0, 0, 0.5)
        )
        ,url("imagenes/selladoresproduc.jpg");
        
    }

    .carta {
        display: flex; /* Activa flexbox */
        flex-direction: column; /* Alinea los elementos verticalmente */
        justify-content: center; /* Centra los elementos verticalmente */
        align-items: center; /* Centra los elementos horizontalmente */
        text-align: center; /* Centra el texto */
        padding: 20px; /* Ajusta el espacio interno */
    }

}

.whatsapp-float {
    position: fixed;
    bottom: 10px; /* Separación desde la parte inferior */
    right: 10px; /* Separación desde la parte derecha */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    background-color: #25D366; /* Color de fondo de WhatsApp */
    color: rgb(15, 15, 17); /* Color del texto o ícono */
    width: 75px; /* Ancho del botón */
    height: 75px; /* Alto del botón (igual al ancho para hacerlo circular) */
    border-radius: 50%; /* Hace el botón completamente circular */
    box-shadow: 0 2px 10px rgb(0, 0, 0); /* Sombra para un efecto flotante */
    z-index: 1000; /* Asegura que esté encima de otros elementos */
    text-decoration: none; /* Quita el subrayado del enlace */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Transición suave */
    padding: 0; /* Elimina el padding para evitar que el botón se deforme */
}

.whatsapp-float svg {
    width: 30px; /* Tamaño del ícono */
    height: 30px;
    margin: 0; /* Elimina el margen para centrar el ícono */
}

.whatsapp-float:hover svg {
    transform: scale(1.2); /* Aumenta ligeramente el tamaño del ícono al pasar el ratón */
}
 
 
@media (max-width: 720px) {
    .whatsapp-float {
        width: 60px; /* Reduce el tamaño del botón */
        height: 60px; /* Mantiene el botón circular */
        bottom: 15px; /* Ajusta la posición inferior */
        right: 15px; /* Ajusta la posición derecha */
    }

    .whatsapp-float svg {
        width: 25px; /* Reduce el tamaño del ícono */
        height: 25px;
    }
}

@media (max-width: 480px) {
    .whatsapp-float {
        width: 50px; /* Reduce aún más el tamaño del botón */
        height: 50px; /* Mantiene el botón circular */
        bottom: 10px; /* Ajusta la posición inferior */
        right: 10px; /* Ajusta la posición derecha */
    }

    .whatsapp-float svg {
        width: 20px; /* Reduce aún más el tamaño del ícono */
        height: 20px;
    }
}

/* Estilo para el ícono del menú hamburguesa */
.menu-icon {
    border: 2px solid #e8b86b;      /* Borde dorado/acento */
    border-radius: 8px;
    background: rgba(255,255,255,0.12); /* Fondo claro semitransparente */
    padding: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}

.menu-icon span {
    display: block;
    width: 24px;
    height: 3px;
    background: #e8b86b; /* Mismo color que el borde */
    border-radius: 2px;
    transition: background 0.2s;
}
.nombre-arcomex-responsive {
    display: none;
    color: #fff;
    font-size: 0.95em;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0 12px;
    white-space: nowrap;
    align-self: center;
}

@media (max-width: 769px) {
    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .logo-arcomex {
        flex: 0 0 auto;
    }
    .nombre-arcomex-responsive {
        display: block;
        flex: 1 1 auto;
        text-align: center;
        color: #fff;
        font-size: 0.95em;
        font-weight: 400;
        letter-spacing: 1px;
        margin: 0;
        white-space: nowrap;
        position: relative;
        left: -35px; /* Ajusta este valor para centrar visualmente */
    }
    .menu-icon {
        flex: 0 0 auto;
    }
}

.menu-icon {
    display: none;
}

@media (max-width: 370px) {
    .menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/* Estilo para el menú desplegable */
.menu {
    display: none; /* Ocultar el menú por defecto */
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -250px; /* Ocultar fuera de la pantalla */
    height: 100%;
    width: 250px;
    background-color: #000000;
    padding: 20px;
    transition: right 0.3s ease; /* Transición suave */
    z-index: 999;
}

.menu.active {
    right: 0; /* Mostrar el menú cuando se haga clic */
}

.close-menu {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
    text-align: right;
    cursor: pointer;
    margin-bottom: 30px;
    align-self: flex-end;
}
.close-menu:hover {
    color: #ffffff; /* Mantiene el color original */
    background: none; /* Asegura que no haya fondo */
    cursor: pointer; /* Mantiene el cursor como puntero */
}


.menu li {
    margin: 20px 0;
}

.menu li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

.menu li a:hover {
    color: #ddd;
}

/* Mostrar el menú hamburguesa en pantallas pequeñas */
@media (max-width: 769px) {
    .menu-icon {
        display: flex;
    }

    .menu {
        display: flex; /* Asegura que el menú se muestre cuando se haga clic */
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -250px; /* Ocultar fuera de la pantalla */
        height: 100%;
        width: 250px;
        background-color: #000000;
        padding: 20px;
        transition: right 0.3s ease; /* Transición suave */
        z-index: 999;
    }

    .menu.active {
        right: 0; /* Mostrar el menú cuando se haga clic */
    }

    .menu li {
        margin: 20px 0;
    }
}

/* Estilo general para el logo */
.logo-img {
    width: 100px; /* Tamaño por defecto */
    height: auto;
    transition: width 0.3s ease; /* Transición suave al cambiar de tamaño */
    position: absolute; /* Posicionamiento absoluto */
    top: 10px; /* Espaciado desde la parte superior */
    left: 10px; /* Espaciado desde la parte izquierda */
    z-index: 1000; /* Asegura que esté encima de otros elementos */
}

/* Ajuste del logo en pantallas pequeñas */
@media (max-width: 769px) {
    .logo-img {
        width: 100px; /* Tamaño reducido para pantallas pequeñas */
        top: 5px; /* Ajusta el espaciado superior */
        left: 5px; /* Ajusta el espaciado izquierdo */
    }
}

@media (max-width: 480px) {
    .logo-img {
        width: 100px; /* Tamaño aún más pequeño para pantallas muy pequeñas */
        top: 5px; /* Ajusta el espaciado superior */
        left: 5px; /* Ajusta el espaciado izquierdo */
    }
}
.menu-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Espaciado debajo del logo */
}

.menu-logo-img {
    width: 150px; /* Tamaño del logo dentro del menú */
    height: auto;
    transition: width 0.3s ease; /* Transición suave al cambiar de tamaño */
}

/* Ajuste del logo en pantallas pequeñas */
@media (max-width: 480px) {
    .menu-logo-img {
        width: 150px; /* Tamaño reducido para pantallas pequeñas */
    }
}
.redes-sociales .redes-contenedor {
    display: flex;
    align-items: center; /* Alinea verticalmente el texto y los íconos */
    gap: 20px; /* Espaciado entre el texto y los íconos */
    justify-content: flex-start; /* Alinea los elementos a la izquierda */
}

.redes-sociales h3 {
    font-size: 1.5em; /* Tamaño del texto */
    color: #c19a6b; /* Color del texto */
    margin: 0; /* Elimina márgenes */
}

.iconos-redes {
    display: flex;
    gap: 15px; /* Espaciado entre los íconos */
}

.iconos-redes a img {
    width: 40px; /* Tamaño de los íconos */
    height: 40px;
    border-radius: 50%; /* Hace los íconos circulares */
    transition: transform 0.3s ease; /* Efecto suave al pasar el ratón */
}

.iconos-redes a img:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el ratón */
}

@media (min-width: 700px) {
    .carta {
        width: 400px; /* Ajusta el ancho de las cartas */
        height: 450px; /* Ajusta el alto de las cartas */
        background-size: cover; /* Asegura que la imagen de fondo ocupe todo el espacio */
        background-position: center; /* Centra la imagen de fondo */
    }
}


#caracteristicas li img {
    width: 48px;         /* Más grande */
    height: 48px;
    margin-right: 14px;
    vertical-align: middle;
    border-radius: 10px; /* Bordes más redondeados */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* Sombra más notoria */
    background: #fffbe8; /* Fondo suave para resaltar el ícono */
    padding: 6px;/* Espacio interno para que no se pegue al borde */
    transition: transform 0.2s;
}

#caracteristicas li img:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
#caracteristicas .container {
    padding: 30px 12px 20px 12px; /* Menos espacio arriba y abajo */
}

#videos-cortos .video-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 32px;
}
#videos-cortos .video-row video {
    width: 340px;
    height: 200px;
    border-radius: 12px;
    object-fit: cover;
    background: #000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
#videos-cortos .video-row > div {
    flex: 1;
    min-width: 220px;
    color: #fff;
    margin: 0 32px;
}
@media (max-width: 800px) {
    #videos-cortos .video-row,
    #videos-cortos .video-row:nth-child(2n) {
        flex-direction: column !important;
        text-align: center;
    }
    #videos-cortos .video-row > div {
        margin: 24px 0 0 0;
    }
    #videos-cortos .video-row video {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    #videos-cortos .video-row {
        flex-direction: column !important;
        align-items: stretch;
        text-align: center;
        margin-bottom: 24px;
    }
    #videos-cortos .video-row video {
        width: 95vw !important;      /* Un poco menos que el ancho total para dejar margen */
        max-width: 340px !important; /* Máximo 340px de ancho */
        height: 140px !important;    /* Más bajo para celulares */
        margin: 0 auto 12px auto;
        border-radius: 10px;
    }
    #videos-cortos .video-row > div {
        margin: 0 0 18px 0 !important;
        padding: 0 8px;
    }
    #videos-cortos h2 {
        font-size: 1.1rem !important;
        padding: 0 8px;
    }
    #videos-cortos .video-row h3 {
        font-size: 1rem;
    }
    #videos-cortos .video-row p {
        font-size: 0.95rem;
    }
}

@media (max-width: 900px) {
    #somos-canteras .container {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 24px;
    }
    #somos-canteras .texto {
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
}
@media (min-width: 720px) and (max-width: 900px) {
    #somos-canteras .container {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 24px;
        padding: 40px 8px;
    }
    #somos-canteras .img-container {
        width: 90vw !important;
        max-width: 350px !important;
        height: 250px !important;
        margin: 0 auto 18px auto;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
    }
    #somos-canteras .texto {
        max-width: 600px;
        width: 100%;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 8px;
    }
}


#caracteristicas .container {
    display: flex;
    justify-content: center;
}

#caracteristicas ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

#caracteristicas li {
    margin-bottom: 16px;
    text-align: center;
}