/* ==================================================

   TECNOMETAL - ESTILOS GENERALES

   ================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    font-family: Arial, Helvetica, sans-serif;

    background-color: #f2f2f2;

    color: #222;

    line-height: 1.6;

}

/* ==================================================

   ENCABEZADO

   ================================================== */

header {

    background-color: #171717;

    color: white;

    min-height: 75px;

    padding: 0 7%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

header h1 {

    font-size: 30px;

    letter-spacing: 1px;

}

/* ==================================================

   MENÚ

   ================================================== */

nav {

    display: flex;

    align-items: center;

    gap: 25px;

}

nav a {

    color: white;

    text-decoration: none;

    font-size: 16px;

    font-weight: bold;

    transition: 0.3s;

}

nav a:hover {

    color: #ff6b00;

}

/* ==================================================

   CONTENIDO GENERAL

   ================================================== */

main {

    min-height: calc(100vh - 145px);

}

.contenido {

    max-width: 1200px;

    margin: auto;

    padding: 70px 30px;

    text-align: center;

}

.contenido h2 {

    font-size: 40px;

    margin-bottom: 15px;

}

.contenido > p {

    max-width: 750px;

    margin: 0 auto 40px;

    font-size: 18px;

}

/* ==================================================

   PORTADA

   ================================================== */

.hero {

    min-height: calc(100vh - 145px);

    padding: 80px 10%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:

        linear-gradient(

            rgba(0, 0, 0, 0.65),

            rgba(0, 0, 0, 0.65)

        ),

        url("../img/metal.jpg");

    background-size: cover;

    background-position: center;

}

.hero h2 {

    color: white;

    font-size: 55px;

    margin-bottom: 20px;

}

.hero p {

    color: white;

    font-size: 21px;

    max-width: 700px;

    margin-bottom: 35px;

}

/* ==================================================

   BOTONES

   ================================================== */

.boton {

    display: inline-block;

    background-color: #ff6b00;

    color: #111;

    padding: 14px 30px;

    border-radius: 5px;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;

}

.boton:hover {

    background-color: #ff6b00;

    transform: translateY(-2px);

}

/* ==================================================

   PRODUCTOS

   ================================================== */

.productos {

    margin-top: 40px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}

.producto {

    background-color: white;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    padding-bottom: 25px;

    transition: 0.3s;

}

.producto:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}

/* IMAGEN DEL PRODUCTO */
.producto-imagen {
    width: 100%;
    height: 200px;
    background-color: #d8d8d8;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

.producto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.producto h3 {

    margin-top: 20px;

    font-size: 20px;

}

.precio {

    color: #ff6b00;

    font-size: 22px;

    font-weight: bold;

    margin: 10px 0 20px;

}

/* BOTÓN AGREGAR */

.agregar-carrito {

    border: none;

    background-color: #171717;

    color: white;

    padding: 12px 20px;

    border-radius: 5px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;

}

.agregar-carrito:hover {

    background-color: #ff6b00;

    color: #111;

}

/* ==================================================

   CARRITO

   ================================================== */

#lista-carrito {

    max-width: 850px;

    margin: 40px auto;

}

.producto-carrito {

    background-color: white;

    padding: 25px;

    margin-bottom: 15px;

    border-radius: 8px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);

}

.producto-carrito h3 {

    flex: 1;

    text-align: left;

}

.producto-carrito p {

    margin: 0;

}

.producto-carrito button {

    background-color: #c0392b;

    color: white;

    border: none;

    padding: 9px 14px;

    border-radius: 5px;

    cursor: pointer;

    font-weight: bold;

}

.producto-carrito button:hover {

    background-color: #a93226;

}

/* CARRITO VACÍO */

#carrito-vacio {

    margin-top: 40px;

}

#carrito-vacio p {

    font-size: 20px;

    margin-bottom: 25px;

}

/* RESUMEN */

#resumen-carrito {

    max-width: 850px;

    margin: 30px auto;

    background-color: white;

    padding: 30px;

    border-radius: 8px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);

}

#resumen-carrito h3 {

    font-size: 28px;

    margin-bottom: 20px;

}

#vaciar-carrito {

    background-color: #c0392b;

    color: white;

    border: none;

    padding: 12px 20px;

    border-radius: 5px;

    font-weight: bold;

    cursor: pointer;

    margin-right: 10px;

}

#vaciar-carrito:hover {

    background-color: #a93226;

}

/* ==================================================

   FORMULARIO

   ================================================== */

form {

    max-width: 650px;

    margin: 40px auto 0;

    background-color: white;

    padding: 35px;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    text-align: left;

}

form label {

    display: block;

    margin-bottom: 7px;

    font-weight: bold;

}

form input,

form textarea {

    width: 100%;

    padding: 12px;

    margin-bottom: 20px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-family: inherit;

    font-size: 15px;

}

form textarea {

    min-height: 150px;

    resize: vertical;

}

form input:focus,

form textarea:focus {

    outline: none;

    border-color: #ff6b00;

}

form button {

    background-color: #ff6b00;

    color: #111;

    border: none;

    padding: 13px 25px;

    border-radius: 5px;

    font-weight: bold;

    font-size: 15px;

    cursor: pointer;

    transition: 0.3s;

}

form button:hover {

    background-color: #ff6b00;

}

/* ==================================================

   PIE DE PÁGINA

   ================================================== */

footer {

    background-color: #171717;

    color: white;

    text-align: center;

    padding: 20px;

}

footer p {

    font-size: 14px;

}

/* ==================================================

   IDENTIDAD TECNOMETAL + PANTALLA DE CARGA

   ================================================== */

.pantalla-carga {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    transition:

        opacity .45s ease,

        visibility .45s ease;

}

.pantalla-carga.oculta {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

.carga-contenido {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

    animation: pulso-logo 1.35s ease-in-out infinite;

}

.logo-carga {

    width: min(240px, 64vw);

    max-height: 220px;

    object-fit: contain;

}

.marca-carga {

    text-align: center;

    font-size: 38px;

    font-weight: 800;

    line-height: 1;

}

.marca-carga small {

    display: block;

    margin-top: 10px;

    color: #8a8a8a;

    font-size: 10px;

    letter-spacing: 4px;

    font-weight: 700;

}

@keyframes pulso-logo {

    0% {

        transform: scale(.82);

        opacity: .55;

    }

    50% {

        transform: scale(1.08);

        opacity: 1;

    }

    100% {

        transform: scale(.9);

        opacity: .78;

    }

}

/* LOGO DEL ENCABEZADO */

.marca {

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    text-decoration: none;

    line-height: 1;

    padding: 8px 0;

}

.marca-nombre {

    font-size: 30px;

    font-weight: 800;

    letter-spacing: .5px;

}

.marca-tecno {

    color: #ff6b00;

}

.marca-metal {

    color: #b8b8b8;

}

.marca-subtitulo {

    color: #9c9c9c;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-top: 6px;

    display: block;

    text-align: center;

    width: 100%;

    padding-left: 10px;

    box-sizing: border-box;

}

/* HERO */

.hero-contenido {

    max-width: 820px;

}

.hero-etiqueta {

    color: #ff6b00 !important;

    font-size: 15px !important;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 10px !important;

}

.hero h2 {

    font-size: clamp(52px, 8vw, 88px);

    line-height: 1;

}

.hero-metal {

    color: #c5c5c5;

}

.hero-botones {

    display: flex;

    gap: 14px;

    justify-content: center;

    flex-wrap: wrap;

}

.boton-secundario {

    background: transparent;

    color: white;

    border: 2px solid #ff6b00;

}

.boton-secundario:hover {

    background: #ff6b00;

    color: #111;

}

/* ==================================================

   NOSOTROS / SERVICIOS

   ================================================== */

.nosotros-grid,

.servicios {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    margin-top: 35px;

}

.tarjeta-info,

.servicio {

    background: #fff;

    padding: 28px;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, .08);

    text-align: left;

    border-top: 4px solid #ff6b00;

}

.tarjeta-info h3,

.servicio h3 {

    margin-bottom: 10px;

}

.destacado-nosotros {

    margin-top: 38px !important;

    margin-bottom: 0 !important;

    font-weight: 700;

    color: #444;

}

/* ==================================================

   CONTACTO

   ================================================== */

.contacto-grid {

    display: grid;

    /*

       La zona de las tarjetas es un poco más ancha

       para que entren cómodamente dos por fila.

    */

    grid-template-columns: 1.15fr 1fr;

    gap: 28px;

    align-items: stretch;

    text-align: left;

}

/* CUATRO TARJETAS */

.contacto-datos {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

}

/* TARJETA INDIVIDUAL */

.contacto-card {

    background: white;

    padding: 22px;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, .08);

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}

.contacto-card h3 {

    margin-bottom: 7px;

}

.contacto-card p {

    margin-bottom: 12px;

    overflow-wrap: anywhere;

}

.contacto-card a:not(.boton) {

    color: #ff6b00;

    font-weight: 700;

    overflow-wrap: anywhere;

}

/* WHATSAPP */

.whatsapp {

    background: #25D366;

    color: #0d2515;

}

.whatsapp:hover {

    background: #20bd5a;

}

/* INSTAGRAM */

.instagram {

    background: #E1306C;

    color: white;

}

.instagram:hover {

    background: #C13584;

    color: white;

}

/* MAPA */

.mapa-contacto {

    min-height: 470px;

    overflow: hidden;

    border-radius: 12px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);

    background: #ddd;

}

.mapa-contacto iframe {

    width: 100%;

    height: 100%;

    min-height: 470px;

    border: 0;

    display: block;

}

/* FOOTER CONTACTO */

.footer-contacto {

    margin-top: 5px;

    color: #aaa;

    font-size: 12px;

}

/* ==================================================

   RESPONSIVE - TABLETS

   ================================================== */

@media (max-width: 1000px) {

    .productos {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 900px) {

    .nosotros-grid,

    .servicios {

        grid-template-columns: 1fr 1fr;

    }

    /*

       En pantallas más chicas el mapa baja

       debajo de los datos.

    */

    .contacto-grid {

        grid-template-columns: 1fr;

    }

    .mapa-contacto,

    .mapa-contacto iframe {

        min-height: 360px;

    }

}

/* ==================================================

   RESPONSIVE - CELULARES

   ================================================== */

@media (max-width: 768px) {

    header {

        padding: 20px;

        flex-direction: column;

        gap: 15px;

    }

    nav {

        gap: 15px;

        flex-wrap: wrap;

        justify-content: center;

    }

    nav a {

        font-size: 14px;

    }

    .hero {

        padding: 60px 20px;

    }

    .hero h2 {

        font-size: 38px;

    }

    .hero p {

        font-size: 18px;

    }

    .productos {

        grid-template-columns: 1fr;

    }

    .contenido {

        padding: 50px 20px;

    }

    .contenido h2 {

        font-size: 32px;

    }

    .producto-carrito {

        flex-direction: column;

        align-items: stretch;

        text-align: center;

    }

    .producto-carrito h3 {

        text-align: center;

    }

    form {

        padding: 25px;

    }

}

@media (max-width: 600px) {

    .marca {

        align-items: center;

    }

    .marca-nombre {

        font-size: 28px;

    }

    /*

       En celular WhatsApp, Instagram,

       correo y dirección van uno debajo del otro.

    */

    .contacto-datos {

        grid-template-columns: 1fr;

    }

    .nosotros-grid,

    .servicios {

        grid-template-columns: 1fr;

    }

    .hero h2 {

        font-size: 52px;

    }

    .marca-carga {

        font-size: 32px;

    }

}
/* ==================================================

   NUEVO CATÁLOGO DE PRODUCTOS

   ================================================== */

.productos-seccion {

    max-width: 1400px;

}

.productos-etiqueta {

    color: #ff6b00;

    font-size: 13px !important;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 5px !important;

}

/* ==================================================

   FILTROS DE PRODUCTOS

   ================================================== */

.filtros-productos {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 35px 0 45px;

}

.filtro {

    background: white;

    color: #222;

    border: 1px solid #d5d5d5;

    border-radius: 30px;

    padding: 11px 22px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: all .25s ease;

}

.filtro:hover {

    border-color: #ff6b00;

    color: #ff6b00;

    transform: translateY(-2px);

}

.filtro.activo {

    background: #ff6b00;

    border-color: #ff6b00;

    color: #111;

}

/* ==================================================

   CUADRÍCULA

   ================================================== */

.productos {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    align-items: stretch;

}

/* ==================================================

   TARJETA DEL PRODUCTO

   ================================================== */

.producto {

    position: relative;

    display: flex;

    flex-direction: column;

    padding-bottom: 25px;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        opacity .25s ease;

}

.producto.oculto {

    display: none;

}

/* ==================================================

   IMAGEN

   ================================================== */

.producto-imagen {

    position: relative;

    height: 240px;

    background: #eeeeee;

    cursor: pointer;

    overflow: hidden;

}

.producto-imagen img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 8px;

    transition: transform .4s ease;

}

/* AGRANDAR IMAGEN AL PASAR EL MOUSE */

.producto:hover .producto-imagen img {

    transform: scale(1.07);

}

/* TEXTO "VER DETALLES" */

.ver-detalles {

    position: absolute;

    left: 50%;

    bottom: 15px;

    transform: translate(-50%, 10px);

    background: rgba(23, 23, 23, .92);

    color: white;

    padding: 8px 15px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    opacity: 0;

    transition:

        opacity .3s ease,

        transform .3s ease;

}

.producto-imagen:hover .ver-detalles {

    opacity: 1;

    transform: translate(-50%, 0);

}

/* ==================================================

   INFORMACIÓN DEL PRODUCTO

   ================================================== */

.producto h3 {

    padding: 0 18px;

    line-height: 1.25;

    min-height: 50px;

}

.producto-descripcion {

    padding: 0 18px;

    color: #666;

    font-size: 14px;

    min-height: 45px;

    margin-top: 8px;

}

.producto .precio {

    margin-top: auto;

    padding-top: 10px;

}

/* ==================================================

   CONSULTAR PRECIO

   ================================================== */

.consultar-precio {

    color: #555;

    font-size: 18px;

}

.boton-consultar {

    margin: 0 18px;

    background: #25D366;

    color: #0d2515;

    font-size: 13px;

    padding: 12px 14px;

}

.boton-consultar:hover {

    background: #20bd5a;

}

/* ==================================================

   MODAL / GALERÍA DEL PRODUCTO

   ================================================== */

.modal-producto {

    position: fixed;

    inset: 0;

    z-index: 10000;

    background: rgba(0, 0, 0, .78);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:

        opacity .3s ease,

        visibility .3s ease;

}

/* CUANDO JAVASCRIPT LO ABRA */

.modal-producto.abierto {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

/* CAJA BLANCA */

.modal-producto-contenido {

    position: relative;

    width: min(1050px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    background: white;

    border-radius: 15px;

    padding: 35px;

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    gap: 35px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);

}

/* ==================================================

   BOTÓN CERRAR

   ================================================== */

.cerrar-modal-producto {

    position: absolute;

    right: 15px;

    top: 10px;

    width: 40px;

    height: 40px;

    border: none;

    background: transparent;

    color: #222;

    font-size: 34px;

    cursor: pointer;

    z-index: 5;

    transition: .2s;

}

.cerrar-modal-producto:hover {

    color: #ff6b00;

    transform: scale(1.1);

}

/* ==================================================

   GALERÍA

   ================================================== */

.galeria-producto {

    min-width: 0;

}

.galeria-principal {

    width: 100%;

    height: 440px;

    background: #f1f1f1;

    border-radius: 10px;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #777;

    text-align: center;

    padding: 15px;

}

.galeria-principal img,

.galeria-principal video {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

/* ==================================================

   MINIATURAS

   ================================================== */

.miniaturas-producto {

    display: flex;

    gap: 10px;

    margin-top: 12px;

    overflow-x: auto;

    padding-bottom: 5px;

}

.miniatura-producto {

    flex: 0 0 80px;

    width: 80px;

    height: 70px;

    border-radius: 7px;

    overflow: hidden;

    border: 2px solid transparent;

    cursor: pointer;

    background: #eee;

    transition: .2s;

}

.miniatura-producto:hover,

.miniatura-producto.activa {

    border-color: #ff6b00;

}

.miniatura-producto img,

.miniatura-producto video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

/* ==================================================

   INFORMACIÓN DENTRO DEL MODAL

   ================================================== */

.modal-producto-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: left;

    padding-right: 10px;

}

.modal-producto-info h2 {

    font-size: 30px;

    line-height: 1.2;

    margin-bottom: 15px;

}

.modal-producto-info > p:not(.precio) {

    color: #666;

    font-size: 16px;

    margin-bottom: 10px;

}

.modal-producto-info .precio {

    font-size: 28px;

    margin: 15px 0;

}

/* ==================================================

   TABLETS

   ================================================== */

@media (max-width: 1050px) {

    .productos {

        grid-template-columns: repeat(3, 1fr);

    }

}

/* ==================================================

   TABLETS CHICAS

   ================================================== */

@media (max-width: 850px) {

    .productos {

        grid-template-columns: repeat(2, 1fr);

    }

    .modal-producto-contenido {

        grid-template-columns: 1fr;

    }

    .galeria-principal {

        height: 360px;

    }

}

/* ==================================================

   CELULARES

   ================================================== */

@media (max-width: 600px) {

    .productos {

        grid-template-columns: 1fr;

    }

    .filtros-productos {

        gap: 7px;

        margin: 25px 0 35px;

    }

    .filtro {

        padding: 9px 15px;

        font-size: 13px;

    }

    .producto-imagen {

        height: 280px;

    }

    .ver-detalles {

        opacity: 1;

        transform: translate(-50%, 0);

    }

    .modal-producto {

        padding: 10px;

    }

    .modal-producto-contenido {

        padding: 45px 18px 25px;

        gap: 20px;

        max-height: 95vh;

    }

    .galeria-principal {

        height: 300px;

    }

    .modal-producto-info h2 {

        font-size: 24px;

    }

}
/* Ficha y navegación de la galería */
.modal-producto-info { min-width: 0; }
.modal-producto-info .detalle-etiqueta { color: #a94300; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.producto-caracteristicas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 18px 0; padding: 18px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.producto-caracteristicas dt { font-weight: 700; }
.producto-caracteristicas dd { margin: 0; color: #555; }
.galeria-controles { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.galeria-controles[hidden] { display: none; }
.galeria-controles button { border: 1px solid #ddd; border-radius: 8px; background: #fff; width: 44px; height: 44px; cursor: pointer; font-size: 22px; }
.galeria-controles button:hover { border-color: #ff6b00; }
.miniatura-producto { padding: 0; }
.abrir-producto:focus-visible, .modal-producto button:focus-visible { outline: 3px solid #ff6b00; outline-offset: 3px; }