/* ============================================
   extras.css — i18n, projects with images, about, contact
   Complements style.css (no breaking changes)
   ============================================ */

/* === LANGUAGE SWITCHER === */
.lang-switch { position:relative; display:flex; align-items:center; }
.lang-current {
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; font-size:11px; font-weight:600;
  font-family:var(--font-title); color:var(--text-light);
  cursor:pointer; border-radius:var(--radius); transition:var(--transition);
  white-space:nowrap;
}
.lang-current:hover { color:var(--primary); }
.lang-current svg { width:12px; height:12px; }
.lang-dropdown {
  position:absolute; top:100%; left:0;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 5px 25px rgba(0,0,0,.12);
  min-width:180px; padding:4px 0;
  opacity:0; pointer-events:none; transform:translateY(-5px);
  transition:opacity .2s,transform .2s; z-index:1100;
}
.lang-dropdown.open { opacity:1; pointer-events:all; transform:translateY(0); }
.lang-dropdown a {
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  font-size:13px; color:var(--text); transition:var(--transition); cursor:pointer;
}
.lang-dropdown a:hover, .lang-dropdown a.active { background:var(--bg-light); color:var(--primary); }
.lang-dropdown a .flag { font-size:1.1rem; width:20px; text-align:center; }

/* === CERT GRID (home) === */
.cert-grid {
  display:flex; justify-content:center; align-items:flex-start;
  gap:40px; flex-wrap:wrap; padding:40px 0;
}
.cert-item { text-align:center; padding:15px 25px; max-width:160px; }
.cert-icon {
  font-size:32px; font-weight:700; color:var(--primary);
  margin-bottom:8px; line-height:1;
}
.cert-title {
  font-family:var(--font-title); font-size:12px; font-weight:600;
  color:var(--text); margin-bottom:4px;
}
.cert-desc { font-size:11px; color:var(--text-lighter); }

/* === FEATURED CARDS (home) === */
.home-featured { padding:60px 0; }
.home-featured .section-title {
  font-family:var(--font-title); font-size:28px; font-weight:700;
  text-align:center; text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:8px; color:var(--text);
}
.section-subtitle {
  text-align:center; color:var(--primary); font-size:14px;
  font-family:var(--font-title); font-weight:600; margin-bottom:40px;
}
.featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.feat-card {
  text-align:center; cursor:pointer; padding:20px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  transition:var(--transition);
}
.feat-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.feat-card .pic {
  aspect-ratio:1; background:var(--bg-light); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.feat-card .pic svg { width:50%; height:50%; opacity:.7; transition:var(--transition); }
.feat-card:hover .pic svg { opacity:1; transform:scale(1.05); }
.feat-card .name {
  font-family:var(--font-title); font-size:13px; font-weight:600;
  color:var(--text); line-height:1.4;
}
@media (max-width:768px) {
  .featured-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
}
@media (max-width:480px) {
  .featured-grid { grid-template-columns:repeat(3,1fr); gap:6px; max-width:none; margin:0; }
}

/* === HOME ABOUT === */
.home-about { padding:50px 0; background:var(--bg-light); }
.home-about .section-title {
  font-family:var(--font-title); font-size:28px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:25px; color:var(--text);
}
.home-about p {
  font-size:15px; color:var(--text-light); line-height:1.8;
}
.btn-more {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:25px; padding:12px 28px;
  background:var(--primary); color:#fff;
  border-radius:var(--radius); font-family:var(--font-title);
  font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.02em; transition:var(--transition);
  text-decoration:none;
}
.btn-more:hover { background:var(--accent); color:var(--text); }

.btn-send {
  padding:10px 20px; background:var(--primary); color:#fff;
  border:none; border-radius:var(--radius);
  font-family:var(--font-title); font-size:12px; font-weight:600;
  text-transform:uppercase; cursor:pointer; transition:var(--transition);
}
.btn-send:hover { background:var(--accent); color:var(--text); }

/* === PROJECT CARD WITH IMAGE === */
.project-card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; transition:var(--transition);
}
.project-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.proj-img {
  aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--bg-light);
}
.proj-img img {
  width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block;
}
.project-card:hover .proj-img img { transform:scale(1.05); }
.proj-info { padding:18px 20px 20px; }
.proj-type {
  font-family:var(--font-title); font-size:10px; font-weight:600;
  color:var(--primary); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;
}
.proj-name {
  font-family:var(--font-title); font-size:15px; font-weight:600; line-height:1.4; color:var(--text);
}
.proj-loc { font-size:11px; color:var(--text-lighter); margin-top:4px; }

.img-loading {
  display:flex; align-items:center; justify-content:center;
  position:absolute; inset:0; background:var(--bg-light);
}
.img-loading::after {
  content:''; width:24px; height:24px;
  border:2px solid var(--border); border-top-color:var(--primary);
  border-radius:50%; animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding-bottom:60px; }
@media (max-width:1000px) { .projects-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .projects-grid { grid-template-columns:1fr; } }

.projects-page .page-title,
.contact-page .page-title {
  font-family:var(--font-title); font-size:28px; font-weight:700;
  text-transform:uppercase; text-align:center; margin:80px 0 20px; color:var(--text);
}
.page-subtitle { text-align:center; color:var(--text-light); margin-bottom:50px; font-size:14px; }

/* === ABOUT PAGE === */
.about-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:40px 0; }
.about-stat { text-align:center; padding:20px; background:var(--bg-light); border-radius:var(--radius); }
.about-stat-num {
  font-family:var(--font-title); font-size:28px; font-weight:700; color:var(--primary);
}
.about-stat-label { font-size:12px; color:var(--text-lighter); margin-top:5px; text-transform:uppercase; letter-spacing:.03em; }

.about-cert-list { display:flex; gap:15px 30px; flex-wrap:wrap; }
.about-cert-list span {
  font-family:var(--font-title); font-size:13px; font-weight:600;
  color:var(--text); padding:8px 16px; background:var(--bg-light);
  border-radius:var(--radius); white-space:nowrap;
}

.partner-badges { display:flex; flex-wrap:wrap; gap:10px; }
.partner-badge {
  display:inline-flex; padding:8px 16px; background:#fff; border:1px solid var(--border);
  border-radius:30px; font-size:12px; color:var(--text-light); transition:var(--transition);
}
.partner-badge:hover { border-color:var(--primary); color:var(--primary); }

@media (max-width:768px) { .about-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .about-grid { grid-template-columns:1fr; } }

/* === CONTACT PAGE === */
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:50px; max-width:1100px; margin:0 auto; padding-bottom:80px; }
.contact-info h4, .contact-form h4 {
  font-family:var(--font-title); font-size:16px; font-weight:600;
  margin-bottom:15px; color:var(--primary);
}
.contact-info p { font-size:14px; color:var(--text-light); line-height:1.8; margin-bottom:8px; }
.contact-info a { color:var(--primary); text-decoration:underline; }
.contact-form input, .contact-form textarea {
  width:100%; padding:10px 15px; border:1px solid var(--border);
  border-radius:var(--radius); font-size:14px; font-family:var(--font-body);
  margin-bottom:12px; transition:var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color:var(--primary); outline:none; box-shadow:0 0 0 2px rgba(0,66,152,.1);
}
.contact-form textarea { min-height:120px; resize:vertical; }
.contact-form .btn-send {
  padding:12px 30px; width:auto;
}
@media (max-width:768px) { .contact-layout { grid-template-columns:1fr; gap:30px; } }

/* === SPEC GROUP (modal) === */
.spec-group { margin-bottom:25px; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.spec-item { padding:15px; background:var(--bg-light); border-radius:var(--radius); }
.spec-item strong { display:block; font-size:13px; margin-bottom:3px; }
.spec-item span { font-size:12px; color:var(--text-lighter); }
@media (max-width:600px) { .spec-grid { grid-template-columns:1fr; } }

/* === MODAL === */
.modal-overlay {
  position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:#fff; border-radius:var(--radius); padding:35px;
  max-width:600px; width:90%; max-height:85vh; overflow-y:auto;
  position:relative;
}
.modal-close {
  position:absolute; top:15px; right:15px;
  background:none; border:none; font-size:20px; color:var(--text-lighter);
  cursor:pointer; line-height:1;
}

/* === PRODUCT DESCRIPTION === */
.product-description { margin-top:50px; padding:30px; background:var(--bg-light); border-radius:var(--radius); font-size:13px; color:var(--text-light); line-height:1.8; }

/* === QUOTE SIDEBAR (extended) === */
.quote-sidebar-footer { padding:20px; border-top:1px solid var(--border); }
.quote-overlay { position:fixed; inset:0; z-index:1400; background:rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .3s; }
.quote-overlay.open { opacity:1; pointer-events:all; }
.quote-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
.quote-item .qremove { cursor:pointer; color:var(--text-lighter); font-size:14px; transition:var(--transition); }
.quote-item .qremove:hover { color:#c00; }
.quote-badge {
  display:none; background:var(--primary); color:#fff; font-size:10px;
  font-weight:700; padding:1px 6px; border-radius:10px; min-width:18px; text-align:center;
  margin-left:4px; line-height:1.5;
}
.quote-badge.show { display:inline-flex; align-items:center; justify-content:center; }

/* === FOOTER === */
.footer { background:#1a1a2e; color:rgba(255,255,255,.7); padding:50px 0 0; margin-top:0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.footer-col h3 {
  font-family:var(--font-title); font-size:13px; font-weight:600;
  color:#fff; margin-bottom:15px; text-transform:uppercase; letter-spacing:.05em;
}
.footer-col a {
  display:block; font-size:12px; color:rgba(255,255,255,.5);
  margin-bottom:8px; transition:var(--transition); text-decoration:none;
}
.footer-col a:hover { color:#fff; }
.footer-logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-title); font-size:14px; font-weight:600; color:#fff; margin-bottom:15px;
}
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1); padding:15px 0; font-size:11px;
  color:rgba(255,255,255,.35);
}
@media (max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:480px) { .footer-grid { grid-template-columns:1fr; } }

/* === WHATSAPP FLOAT === */

/* === HOME: Featured Projects (3 cards below About) === */
.home-projects{margin-top:40px}
.home-projects-title{font-family:var(--font-title);font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:20px;color:var(--text);text-align:center}
.home-projects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.home-proj-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);cursor:pointer}
.home-proj-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.home-proj-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-light);display:flex;align-items:center;justify-content:center}
.home-proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block}
.home-proj-card:hover .home-proj-img img{transform:scale(1.05)}
.home-proj-info{padding:14px 16px}
.home-proj-type{font-family:var(--font-title);font-size:10px;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.home-proj-name{font-family:var(--font-title);font-size:14px;font-weight:600;line-height:1.3;margin-bottom:2px}
.home-proj-loc{font-size:11px;color:var(--text-lighter)}
@media(max-width:768px){
  .home-projects-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .home-proj-info{padding:10px 12px}
  .home-proj-name{font-size:13px}
}
/* === CENTERED MORE BUTTON (showcase & projects) === */
.btn-more-center {
  display: flex; justify-content: center; margin: 30px auto 0; max-width: 280px;
  text-align: center;
}