/*
Theme Name: Secobol
Theme URI: https://secobol.com
Author: Secobol
Description: Tema personalizado para Secobol, replicando el diseño original del sitio en Wix.
Version: 1.0
Text Domain: secobol
*/

:root{
  --azul-oscuro:#0b2545;
  --azul-secobol:#123a6b;
  --rojo-secobol:#c8202f;
  --gris-claro:#f4f6f8;
  --gris-texto:#4a4a4a;
  --blanco:#ffffff;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
  color:var(--gris-texto);
  line-height:1.6;
  background:var(--blanco);
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- HEADER ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  max-width:1180px;
  margin:0 auto;
  position:relative;
}

.site-logo img{ max-height:56px; }

.main-nav ul{
  display:flex;
  gap:28px;
  align-items:center;
}

.main-nav a{
  font-size:15px;
  font-weight:600;
  color:var(--azul-oscuro);
  transition:color .2s;
}

.main-nav a:hover{ color:var(--rojo-secobol); }

.main-nav li.menu-item-has-children{ position:relative; }

.main-nav li.menu-item-has-children > ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--blanco);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  padding:10px 0;
  min-width:220px;
  z-index:20;
}

.main-nav li.menu-item-has-children:hover > ul{ display:block; }

.main-nav li.menu-item-has-children > ul li a{
  display:block;
  padding:10px 18px;
  font-weight:500;
}

.lang-switcher{
  display:inline-flex;
  gap:10px;
  margin-left:16px;
  padding-left:16px;
  border-left:1px solid #ddd;
}
.lang-switcher ul{ display:flex; gap:10px; }
.lang-switcher a{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--azul-oscuro);
  opacity:.6;
}
.lang-switcher li.lang-item-current a{ opacity:1; color:var(--rojo-secobol); }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  font-size:26px;
  cursor:pointer;
  color:var(--azul-oscuro);
}

@media (max-width:900px){
  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--blanco);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    padding:16px 24px;
  }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:14px; }
  .nav-toggle{ display:block; }
}

/* ---------- HERO ---------- */
.hero{
  display:flex;
  align-items:center;
  gap:48px;
  padding:60px 24px;
  max-width:1180px;
  margin:0 auto;
  flex-wrap:wrap;
}

.hero .hero-text{ flex:1 1 420px; }
.hero .hero-image{ flex:1 1 420px; }

.hero h4{
  color:var(--rojo-secobol);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:15px;
  margin-bottom:10px;
}

.hero p{ font-size:16px; margin-bottom:18px; }

.btn{
  display:inline-block;
  background:var(--rojo-secobol);
  color:var(--blanco);
  padding:12px 28px;
  border-radius:4px;
  font-weight:600;
  font-size:14px;
  transition:background .2s;
}
.btn:hover{ background:var(--azul-oscuro); }

/* ---------- STATS ---------- */
.stats-bar{
  background:var(--azul-oscuro);
  color:var(--blanco);
  padding:40px 24px;
}
.stats-bar .container{
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:24px;
  text-align:center;
}
.stat-item h3{ font-size:36px; margin:0 0 6px; color:var(--blanco); }
.stat-item p{ margin:0; font-size:14px; opacity:.85; }

/* ---------- SECTION GENERIC ---------- */
.section{ padding:70px 24px; }
.section.alt{ background:var(--gris-claro); }
.section h2{
  text-align:center;
  font-size:30px;
  color:var(--azul-oscuro);
  margin-bottom:16px;
}
.section .lead{
  max-width:760px;
  margin:0 auto 40px;
  text-align:center;
  font-size:16px;
}

/* ---------- BRAND GRID / LOGOS ---------- */
.brand-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
  align-items:center;
}
.brand-grid img{
  max-height:80px;
  width:auto;
  filter:grayscale(0%);
}

/* ---------- CARDS (fortalezas / servicios) ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:32px;
}
.card{
  background:var(--blanco);
  border-radius:8px;
  padding:28px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  text-align:center;
}
.card img{ margin:0 auto 16px; max-height:70px; }
.card h3{ color:var(--azul-oscuro); margin-bottom:10px; font-size:19px; }

/* ---------- CONTACT ---------- */
.contact-section{
  display:flex;
  gap:48px;
  flex-wrap:wrap;
}
.contact-section .contact-info{ flex:1 1 320px; }
.contact-section .contact-form{ flex:1 1 420px; }

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid #ccc;
  border-radius:4px;
  font-family:inherit;
  font-size:14px;
}
.contact-form button{
  background:var(--rojo-secobol);
  color:var(--blanco);
  border:none;
  padding:12px 30px;
  border-radius:4px;
  font-weight:600;
  cursor:pointer;
}
.contact-form button:hover{ background:var(--azul-oscuro); }
.form-success{ color:green; font-weight:600; margin-top:10px; }

/* ---------- FOOTER ---------- */
.site-footer{
  background:var(--azul-oscuro);
  color:var(--blanco);
  padding:50px 24px 24px;
}
.site-footer h5{
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:14px;
  margin-bottom:16px;
  opacity:.8;
}
.site-footer p, .site-footer a{ font-size:14px; color:#dfe6ee; }
.site-footer a:hover{ color:var(--blanco); }
.footer-bottom{
  text-align:center;
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:13px;
  opacity:.7;
}