/* ==========================================================================
JAINOXMETAL SPA
STYLE.CSS
========================================================================== */

/* ==========================================================================
VARIABLES Y CONFIGURACIÓN GLOBAL
========================================================================== */

:root {
--primary-dark: #0b1f26;
--primary-color: #123742;


--accent-color: #00e676;
--accent-hover: #00c853;

--text-light: #f4f4f4;
--text-gray: #b0bec5;

--bg-card: #162f38;

--transition: all 0.3s ease;


}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
font-family: 'Inter', sans-serif;


background-color: var(--primary-dark);

color: var(--text-light);

line-height: 1.6;

overflow-x: hidden;


}

/* ==========================================================================
NAVEGACIÓN
========================================================================== */

header {
position: fixed;


top: 0;
left: 0;

width: 100%;

background-color: rgba(11, 31, 38, 0.95);

backdrop-filter: blur(10px);

z-index: 1000;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);


}

.nav-container {
width: 100%;


max-width: 1200px;

margin: 0 auto;

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 2rem;


}

.logo {
font-size: 1.5rem;


font-weight: 800;

color: var(--text-light);

text-decoration: none;

letter-spacing: 1px;


}

.logo span {
color: var(--accent-color);
}

.nav-links {
list-style: none;


display: flex;

align-items: center;

gap: 2rem;


}

.nav-links a {
text-decoration: none;


color: var(--text-light);

font-weight: 600;

font-size: 0.95rem;

transition: var(--transition);


}

.nav-links a:hover {
color: var(--accent-color);
}

.menu-toggle {
display: none;


font-size: 1.5rem;

cursor: pointer;

color: var(--text-light);


}

/* ==========================================================================
SECCIONES GENERALES
========================================================================== */

section {
width: 100%;


max-width: 1200px;

margin: 0 auto;

padding: 6rem 2rem;


}

/* ==========================================================================
HERO / INICIO
========================================================================== */

.hero {
width: 100%;


max-width: none;

min-height: 100vh;

margin: 0;

padding: 120px 20px 80px;

background:
    linear-gradient(
        rgba(11, 31, 38, 0.55),
        rgba(11, 31, 38, 0.78)
    ),
    url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1920&q=80');

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

display: flex;

align-items: center;

justify-content: center;

text-align: center;


}

.hero-content {
width: 100%;


max-width: 850px;

margin: 0 auto;


}

.hero-content h1 {
font-size: 3.5rem;


font-weight: 800;

margin-bottom: 1rem;

letter-spacing: -1px;

line-height: 1.15;


}

.hero-content h1 span {
color: var(--accent-color);
}

.hero-content p {
font-size: 1.25rem;


color: var(--text-gray);

margin-bottom: 2rem;

max-width: 700px;

margin-left: auto;

margin-right: auto;


}

.btn {
display: inline-block;


background-color: var(--accent-color);

color: var(--primary-dark);

padding: 0.8rem 2rem;

border-radius: 50px;

font-weight: 700;

text-decoration: none;

transition: var(--transition);

box-shadow:
    0 4px 15px rgba(0, 230, 118, 0.3);


}

.btn:hover {
background-color: var(--accent-hover);


transform: translateY(-2px);

box-shadow:
    0 8px 20px rgba(0, 230, 118, 0.4);


}

/* ==========================================================================
TÍTULOS DE SECCIÓN
========================================================================== */

.section-title {
text-align: center;


font-size: 2.5rem;

font-weight: 700;

margin-bottom: 1rem;


}

.section-subtitle {
text-align: center;


color: var(--text-gray);

margin-bottom: 4rem;

font-size: 1.1rem;


}

/* ==========================================================================
NOSOTROS
========================================================================== */

.about-grid {
display: grid;


grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;


}

.about-text h3 {
font-size: 1.8rem;


margin-bottom: 1rem;

color: var(--accent-color);


}

.about-text p {
color: var(--text-gray);


margin-bottom: 1.5rem;


}

.stats-box {
background: var(--bg-card);


padding: 2rem;

border-radius: 12px;

border-left: 4px solid var(--accent-color);

text-align: center;

box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.15);


}

.stats-box h2 {
font-size: 3rem;


color: var(--accent-color);

margin-bottom: 0.5rem;


}

.stats-box p {
color: var(--text-gray);
}

/* ==========================================================================
TRABAJOS Y MAQUINARIA
========================================================================== */

.features-grid {
display: grid;


grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

gap: 2rem;


}

.card {
background-color: var(--bg-card);


border-radius: 12px;

padding: 2rem;

transition: var(--transition);

border: 1px solid rgba(255, 255, 255, 0.05);

height: 100%;


}

.card:hover {
transform: translateY(-5px);


border-color: var(--accent-color);

box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.2);


}

.card i {
font-size: 2.5rem;


color: var(--accent-color);

margin-bottom: 1rem;


}

.card h3 {
font-size: 1.3rem;


margin-bottom: 0.8rem;


}

.card p,
.card ul {
color: var(--text-gray);


font-size: 0.95rem;


}

.card ul {
list-style-type: disc;


padding-left: 1.2rem;

margin-top: 0.5rem;


}

.card li {
margin-bottom: 0.4rem;
}

/* ==========================================================================
GALERÍA
========================================================================== */

.gallery-grid {
display: grid;


grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));

gap: 1.5rem;


}

.gallery-item {
position: relative;


border-radius: 10px;

overflow: hidden;

height: 250px;

cursor: pointer;

background: var(--bg-card);


}

.gallery-item img {
width: 100%;


height: 100%;

object-fit: cover;

display: block;

transition: var(--transition);


}

.gallery-item:hover img {
transform: scale(1.05);
}

.gallery-overlay {
position: absolute;


top: 0;
left: 0;

width: 100%;
height: 100%;

background:
    rgba(18, 55, 66, 0.7);

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

transition: var(--transition);


}

.gallery-item:hover .gallery-overlay {
opacity: 1;
}

.gallery-overlay i {
font-size: 2rem;


color: var(--accent-color);


}

/* ==========================================================================
LIGHTBOX
========================================================================== */

.lightbox {
display: none;


position: fixed;

z-index: 2000;

top: 0;
left: 0;

width: 100%;
height: 100%;

background-color:
    rgba(0, 0, 0, 0.92);

justify-content: center;

align-items: center;

flex-direction: column;

padding: 30px;


}

.lightbox.active {
display: flex;
}

.lightbox-content {
display: block;


max-width: 85%;

max-height: 80vh;

width: auto;

height: auto;

border-radius: 8px;

object-fit: contain;

box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.5);


}

.lightbox-close {
position: absolute;


top: 20px;
right: 30px;

font-size: 2.5rem;

color: #fff;

cursor: pointer;

transition: var(--transition);

z-index: 10;


}

.lightbox-close:hover {
color: var(--accent-color);


transform: scale(1.1);


}

.lightbox-nav {
position: absolute;


top: 50%;

transform: translateY(-50%);

width: 50px;
height: 50px;

font-size: 1.3rem;

color: white;

background:
    rgba(255, 255, 255, 0.1);

border: none;

padding: 1rem;

cursor: pointer;

border-radius: 50%;

transition: var(--transition);

display: flex;

align-items: center;

justify-content: center;

z-index: 10;


}

.lightbox-nav:hover {
background: var(--accent-color);


color: var(--primary-dark);


}

.lightbox-prev {
left: 30px;
}

.lightbox-next {
right: 30px;
}

/* ==========================================================================
CLIENTES
========================================================================== */

.clients-grid {
display: grid;


grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));

gap: 2rem;

text-align: center;


}

.client-badge {
background: var(--bg-card);


padding: 1.5rem;

border-radius: 8px;

font-weight: 600;

color: var(--text-gray);

border: 1px solid rgba(255, 255, 255, 0.05);

transition: var(--transition);


}

.client-badge:hover {
border-color: var(--accent-color);


color: var(--text-light);

transform: translateY(-3px);


}

/* ==========================================================================
CONTACTO
========================================================================== */

.contact-container {
display: grid;


grid-template-columns: 1fr 1fr;

gap: 3rem;

background: var(--bg-card);

padding: 3rem;

border-radius: 16px;


}

.contact-info h3 {
font-size: 1.8rem;


margin-bottom: 1.5rem;

color: var(--accent-color);


}

.contact-detail {
display: flex;


align-items: flex-start;

gap: 1rem;

margin-bottom: 1.5rem;

color: var(--text-gray);


}

.contact-detail i {
color: var(--accent-color);


font-size: 1.2rem;

margin-top: 4px;

min-width: 20px;


}

.contact-detail a {
color: var(--text-gray);


text-decoration: none;

transition: var(--transition);


}

.contact-detail a:hover {
color: var(--accent-color);
}

/* WhatsApp dentro de contacto */

.contact-detail .fa-whatsapp {
color: #25d366;
}

.contact-detail a[href*="wa.me"]:hover {
color: #25d366;
}

/* ==========================================================================
MAPA
========================================================================== */

.map-box {
width: 100%;


height: 100%;

min-height: 300px;

background: #222;

border-radius: 8px;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

border: 1px solid rgba(255, 255, 255, 0.1);


}

.map-box iframe {
width: 100%;


height: 100%;

min-height: 300px;

border: 0;


}

/* ==========================================================================
FOOTER
========================================================================== */

footer {
width: 100%;


background-color: #071318;

text-align: center;

padding: 2rem;

color: var(--text-gray);

border-top:
    1px solid rgba(255, 255, 255, 0.05);

font-size: 0.9rem;


}

footer a {
color: #cbd5e1;


text-decoration: none;

transition: var(--transition);


}

footer a:hover {
color: var(--accent-color);
}

/* ==========================================================================
WHATSAPP FLOTANTE
========================================================================== */

.whatsapp-float {
position: fixed;


left: 25px;

bottom: 25px;

width: 58px;

height: 58px;

display: flex;

align-items: center;

justify-content: center;

background: #25d366;

color: #ffffff;

border-radius: 50%;

font-size: 30px;

text-decoration: none;

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

z-index: 9999;

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;


}

.whatsapp-float:hover {
color: #ffffff;


transform:
    translateY(-4px) scale(1.05);

box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35);


}

.whatsapp-float i {
position: relative;


z-index: 2;


}

/* Pulso */

.whatsapp-float::before {
content: "";


position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

border: 2px solid #25d366;

animation:
    whatsappPulse 2s infinite;


}

@keyframes whatsappPulse {


0% {
    transform: scale(1);

    opacity: 0.7;
}

70% {
    transform: scale(1.35);

    opacity: 0;
}

100% {
    transform: scale(1.35);

    opacity: 0;
}


}

/* ==========================================================================
RESPONSIVE
========================================================================== */

@media (max-width: 900px) {


section {
    padding: 5rem 1.5rem;
}


.about-grid,
.contact-container {
    grid-template-columns: 1fr;
}


.about-grid {
    gap: 2rem;
}


.contact-container {
    padding: 2rem;
}


.hero {
    min-height: 700px;

    padding:
        120px 20px
        70px;
}


.hero-content h1 {
    font-size: 2.5rem;
}


.hero-content p {
    font-size: 1.1rem;
}


.nav-links {
    display: none;

    flex-direction: column;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background-color:
        var(--primary-dark);

    padding: 1.5rem;

    text-align: center;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);

    gap: 1.2rem;
}


.nav-links.active {
    display: flex;
}


.menu-toggle {
    display: block;
}


}

/* ==========================================================================
TABLETS
========================================================================== */

@media (max-width: 600px) {


section {
    padding:
        4rem 1rem;
}


.section-title {
    font-size: 2rem;
}


.section-subtitle {
    font-size: 1rem;

    margin-bottom: 2.5rem;
}


.hero {
    min-height: 650px;

    padding:
        110px 20px
        60px;

    background-position:
        center center;
}


.hero-content h1 {
    font-size: 2.2rem;

    line-height: 1.2;
}


.hero-content p {
    font-size: 1rem;

    line-height: 1.6;
}


.btn {
    padding:
        0.75rem 1.6rem;
}


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

    gap: 1rem;
}


.gallery-item {
    height: 180px;
}


.contact-container {
    padding: 1.5rem;
}


.contact-detail {
    gap: 0.8rem;
}


.map-box,
.map-box iframe {
    min-height: 280px;
}


.lightbox {
    padding: 20px;
}


.lightbox-content {
    max-width: 92%;

    max-height: 75vh;
}


.lightbox-close {
    top: 10px;

    right: 15px;

    font-size: 2rem;
}


.lightbox-nav {
    width: 42px;

    height: 42px;

    font-size: 1rem;
}


.lightbox-prev {
    left: 10px;
}


.lightbox-next {
    right: 10px;
}


.whatsapp-float {
    left: 18px;

    bottom: 18px;

    width: 54px;

    height: 54px;

    font-size: 28px;
}


}

/* ==========================================================================
MÓVILES PEQUEÑOS
========================================================================== */

@media (max-width: 400px) {


.logo {
    font-size: 1.25rem;
}


.hero {
    min-height: 620px;
}


.hero-content h1 {
    font-size: 1.9rem;
}


.hero-content p {
    font-size: 0.95rem;
}


.gallery-grid {
    grid-template-columns: 1fr;
}


.gallery-item {
    height: 230px;
}


.contact-container {
    padding: 1.2rem;
}


.whatsapp-float {
    left: 15px;

    bottom: 15px;

    width: 52px;

    height: 52px;

    font-size: 26px;
}


}