/* ============================================================
   PROSOURCE TRADING COMPANY — Main Stylesheet
   ============================================================
   EASY CUSTOMIZATION:
   --bg-image-opacity : 0.0 (image invisible) → 1.0 (full image)
   --bg-overlay-color : RGB tint over the image (white = 255,255,255)
   --header-bg        : Header/navbar background color
   --accent           : Buttons & highlights color
   ============================================================ */

:root {
  /* === BACKGROUND IMAGE SETTINGS === */
  --bg-image-opacity:  0.40;         /* Adjust image opacity: 0=hidden  1=fully visible */
  --bg-overlay-color:  255,255,255;  /* Overlay tint — white keeps content readable    */

  /* === CUSTOMIZE THESE === */
  --body-bg:    #1a2a3a;   /* Fallback color if images don't load */
  --header-bg:  #b1acb0;   	/* Header background */
  /* gris previo #a69c98; */
  /* gris previo #2b8180; */
  /* blue previo #0e659b; */
  /*--header-bg:  #ffffff;   
  --accent:     #C9943A;   /* Buttons & accent color */

  /* === LOGO COLORS (CSS only logo) === */
  --logo-icon-primary:   #E05820;   /* Orange squares in logo icon */
  --logo-icon-secondary: #222222;   /* Dark part of logo icon */
  --logo-text-color:     #333333;   /* "Prosource Trading LTD" text */

  /* === FIXED COLORS (rarely need changing) === */
  --white:       #ffffff;
  --orange: 	 #FFA500;
  --dark:        #1a1a2e;
  --footer-bg:   #0d1b2a;
  --footer-text: #cccccc;
  --text:        #333333;
  --text-nav:	 #ffffff;
  --text-light:  #666666;
  --card-shadow: 0 2px 16px rgba(0,0,0,0.10);
  --radius:      8px;
  --radius-lg:   16px;
  --transition:  0.25s ease;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', 'Segoe UI', sans-serif;
  background-color: var(--body-bg); /* fallback if images fail */
  color: var(--text-nav);
  line-height: 1.6;
  min-height: 100vh;
}

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

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Merriweather:wght@700&display=swap');

/* === CONTAINER === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
header {
  background: var(--header-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo-img {
  height: 80px; /* Ajusta la altura según necesites */
  width: auto;  /* Mantiene la proporción */
  display: block;
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
  padding: 0 45px;
}

/* --- Logo --- */
.logo-link { display: flex; align-items: center; gap: 10px; }

.logo-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-text .logo-brand {
  font-size: 13px;
  font-weight: 900;
  color: var(--logo-text-color);
  letter-spacing: 0.02em;
}
.logo-text .logo-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--logo-text-color);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

/* --- Main nav links --- */
nav.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-nav);
  border-radius: 6px;
  transition: color var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--accent); }

.nav-link .caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 2px;
  transition: transform var(--transition);
}

/* --- Language switcher --- */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-nav);
  border-radius: 6px;
  position: relative;
}
.lang-switcher:hover { color: var(--accent); }
.lang-flag { font-size: 16px; }

/* --- Dropdown menus --- */
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  min-width: 220px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--transition);
  z-index: 500;
}

.nav-item:hover .dropdown,
.lang-switcher:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a, .dropdown .dd-item {
  display: block;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid #f0f0f0;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
}
.dropdown a:last-child, .dropdown .dd-item:last-child { border-bottom: none; }
.dropdown a:hover, .dropdown .dd-item:hover { background: #fdf6ec; color: var(--accent); }
.dropdown .dd-item { display: flex; align-items: center; gap: 8px; }

/* --- CTA Button --- */
.btn-cta {
  background: var(--accent);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  white-space: nowrap;
}

/* --- CTA Button --- */
.btn-cta-submit {
  background: var(--accent);
  color: var(--orange);
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn-cta:hover { opacity: 0.88; transform: translateY(-1px); }

/* --- Mobile hamburger --- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

/* ============================================================
   PAGE WRAPPER (white card)
   ============================================================ */
.page-body {
  background: var(--white);
  margin: 0 auto;
  max-width: 1200px;
  min-height: 80vh;
}

/* ============================================================
   HERO / BANNER
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  height: 340px;
  background: linear-gradient(135deg, #1a1a2e 0%, #0d2137 60%, #1a3a5c 100%);
}

.hero img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 48px;
  max-width: 600px;
}

.hero-tag {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 8px;
}

.hero p {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 28px;
}

.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.6);
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.15); }

/* Hero slideshow thumbnails */
.hero-thumbs {
  display: flex;
  gap: 4px;
  position: absolute;
  bottom: 16px;
  left: 48px;
  z-index: 3;
}
.hero-thumbs .thumb {
  width: 60px;
  height: 40px;
  object-fit: cover;
  opacity: 0.6;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity var(--transition);
}
.hero-thumbs .thumb:hover, .hero-thumbs .thumb.active { opacity: 1; }

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding: 64px 48px; }

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  text-align: center;
}

.section-title {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
  text-align: center;
}

.section-text {
  font-size: 15px;
  color: var(--text-light);
  text-align: center;
  max-width: 780px;
  margin: 0 auto 16px;
  line-height: 1.8;
}

/* ============================================================
   ABOUT SECTION (homepage)
   ============================================================ */
.about-section { padding: 56px 48px; }

.about-section p {
  font-size: 15px;
  color: var(--text-light);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 14px;
  line-height: 1.8;
}

.about-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px 0 48px;
}

.btn-pill {
  background: var(--accent);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-pill:hover { opacity: 0.85; }
.btn-pill strong { font-weight: 900; }

/* 3-col feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.feature-card {
  text-align: center;
  padding: 24px 16px;
}

.feature-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--text-light);
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--dark);
}

.feature-card p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.7;
}

/* ============================================================
   FULL-WIDTH IMAGE BANNER
   ============================================================ */
.full-banner {
  position: relative;
  height: 300px;
  overflow: hidden;
}
.full-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.service-card {
  text-align: center;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition);
}
.service-card:hover { transform: translateY(-4px); }

.service-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.service-card-body { padding: 20px 16px; }

.service-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark);
}
.service-card h3 a { color: var(--accent); }

.service-card p {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 16px;
  line-height: 1.6;
}

.btn-learn {
  background: var(--accent);
  color: var(--white);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  transition: opacity var(--transition);
}
.btn-learn:hover { opacity: 0.85; }

/* ============================================================
   ADVANTAGES
   ============================================================ */
.advantages-section { background: #f9f9f9; padding: 56px 48px; }

.advantages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  margin-top: 40px;
}

.adv-item { display: flex; gap: 16px; align-items: flex-start; }

.adv-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

.adv-item h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--dark);
}

.adv-item p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
}

/* ============================================================
   PRODUCTS PORTFOLIO
   ============================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.product-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card:hover img { transform: scale(1.05); }

.product-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.70));
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 24px 12px 12px;
  text-align: center;
}

/* Bottom row (3 items wider) */
.products-grid .product-card.wide {
  grid-column: span 1;
}
.products-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 0;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  text-align: center;
  padding: 64px 48px;
  background: var(--white);
}

.cta-section .section-label { margin-bottom: 6px; }
.cta-section .section-title { margin-bottom: 16px; }
.cta-section p { font-size: 15px; color: var(--text-light); margin-bottom: 28px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 48px 48px 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.footer-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}

.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--footer-text);
  margin-bottom: 10px;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.contact-info-card {
  border: 1px solid #e8e8e8;
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
}

.contact-info-card .ci-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  color: var(--text-light);
}

.contact-info-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.contact-info-card p {
  font-size: 14px;
  color: var(--text-light);
}

/* Contact Form */
.contact-form-section {
  max-width: 640px;
  margin: 0 auto;
}

.contact-form-section h2 {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
  color: var(--dark);
}

.form-group { margin-bottom: 20px; }

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.form-group label span { color: var(--accent); }

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: #f8f8f8;
  transition: border-color var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  background: var(--white);
}

.form-group textarea { height: 160px; resize: vertical; }

/* ============================================================
   INNER PAGES (About, Services, Products)
   ============================================================ */
.page-hero {
  background: linear-gradient(135deg, #1a1a2e, #0d2137);
  padding: 48px;
  color: var(--white);
}
.page-hero h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 26px;
  margin-bottom: 8px;
}
.page-hero p { font-size: 15px; opacity: 0.75; }

.breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}
.breadcrumb a { color: rgba(255,255,255,0.55); }
.breadcrumb a:hover { color: var(--white); }

.inner-section { padding: 56px 48px; scroll-margin-top: 140px; }

.inner-section h2 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 24px;
  color: var(--dark);
  margin-bottom: 20px;
}

.inner-section p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 16px;
  max-width: 800px;
}

/* About tabs */
.about-tabs {
  scroll-margin-top: 140px;
  display: flex;
  gap: 0;
  border-bottom: 2px solid #eee;
  margin-bottom: 40px;
}

.tab-btn {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-light);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--transition);
}
.tab-btn:hover { color: var(--accent); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Product detail card */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}
.product-detail img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.product-detail.reverse { direction: rtl; }
.product-detail.reverse > * { direction: ltr; }

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
#scrollTop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: opacity var(--transition);
}
#scrollTop.visible { display: flex; }
#scrollTop:hover { opacity: 0.85; }

/* ============================================================
   PAGE LAYOUT WRAPPER + PETROLEUM BACKGROUND IMAGES
   ============================================================
   Each .bg-zone wraps one or more sections and shows a different
   petroleum image as its background. Opacity is controlled by
   --bg-image-opacity in :root (change once, applies everywhere).
   To swap images, change the url() values in each .bg-zone rule.
   ============================================================ */
.site-wrapper {
  background: var(--body-bg);
  min-height: 100vh;
  position: relative;
}

/* ── Background zones ─────────────────────────────────────── */
.bg-zone {
  position: relative;
  /* The image is set inline via a custom property per zone */
}

/* White tint overlay + image via pseudo-element */
.bg-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--zone-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* Parallax-like scroll effect */
  opacity: var(--bg-image-opacity);
  pointer-events: none;
  z-index: 0;
}

/* Overlay to ensure readability */
.bg-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--bg-overlay-color), calc(1 - var(--bg-image-opacity)));
  pointer-events: none;
  z-index: 1;
}

/* Everything inside bg-zone must sit above the pseudo-elements */
.bg-zone > * {
  position: relative;
  z-index: 2;
}

/* ── Zone 1: Oil rig / drilling (hero area & intro) ─────── */
.bg-zone-1 {
  --zone-image: url('https://images.unsplash.com/photo-1474552226712-ac0f0961a954?w=1800&q=85');
  /* To use own image: --zone-image: url('images/bg-oilrig.jpg'); */
}

/* ── Zone 2: Refinery / industrial (services section) ───── */
.bg-zone-2 {
  --zone-image: url('https://images.unsplash.com/photo-1565008576549-57569a49371d?w=1800&q=85');
  /* To use own image: --zone-image: url('images/bg-refinery.jpg'); */
}

/* ── Zone 3: Pipeline / infrastructure (products section) ── */
.bg-zone-3 {
  --zone-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1800&q=85');
  /* To use own image: --zone-image: url('images/bg-pipeline.jpg'); */
}

.content-card {
  background: var(--white);
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hamburger { display: flex; }

  nav.main-nav {
    display: none;
    position: fixed;
    inset: 70px 0 0 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    overflow-y: auto;
    z-index: 999;
  }
  nav.main-nav.open { display: flex; }

  .nav-link, .lang-switcher { padding: 14px 16px; border-radius: 0; border-bottom: 1px solid #f0f0f0; }
  
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: #fdf6ec;
  }

  .feature-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .products-row-3 { grid-template-columns: 1fr 1fr; }
  .advantages-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; }
  .product-detail.reverse { direction: ltr; }

  section { padding: 40px 24px; }
  .hero-content { padding: 40px 24px; }
  .hero-thumbs { left: 24px; }
  .nav-wrapper { padding: 0 20px; }
  .btn-cta { display: none; } /* hide in nav on mobile, still in mobile menu */
}

@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .products-row-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 22px; }
  .section-title { font-size: 22px; }
}

/* Utility */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }

.flag-icon {
  width: 24px !important; /* Fuerza el ancho */
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2); /* Les da un borde fino para que resalten */
}

.lang-option img {
  width: 20px;
  margin-right: 10px;
  vertical-align: middle;
}