/* ============================================================
   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 */

  /* === TEXTURED BACKGROUND SETTINGS (cold grays + geometric patterns) === */
  --bg-texture-1: #d5d8de;   /* Cool gray — zone 1 (about) */
  --bg-texture-2: #cdd1d8;   /* Deeper gray — zone 2 (services) */
  --bg-texture-3: #d2d5db;   /* Mid cool gray — zone 3 (products) */
  --bg-texture-adv: #c8ccd3; /* Advantages section */
  --bg-texture-cta: #dcdfe4; /* CTA sections */

  /* SVG curved wave pattern — subtle arcs */
  --wave-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 50 Q25 30 50 50 Q75 70 100 50' fill='none' stroke='%23000' stroke-width='0.4' opacity='0.05'/%3E%3Cpath d='M0 80 Q25 60 50 80 Q75 100 100 80' fill='none' stroke='%23000' stroke-width='0.4' opacity='0.04'/%3E%3Cpath d='M0 20 Q25 0 50 20 Q75 40 100 20' fill='none' stroke='%23000' stroke-width='0.4' opacity='0.04'/%3E%3C/svg%3E");

  /* SVG concentric circles / rings pattern */
  --rings-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='30' fill='none' stroke='%23000' stroke-width='0.4' opacity='0.04'/%3E%3Ccircle cx='40' cy='40' r='20' fill='none' stroke='%23000' stroke-width='0.3' opacity='0.035'/%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%23000' stroke-width='0.3' opacity='0.03'/%3E%3C/svg%3E");

  /* SVG hexagonal grid — engineering/industrial feel */
  --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23000' stroke-width='0.35' opacity='0.04'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23000' stroke-width='0.35' opacity='0.03'/%3E%3C/svg%3E");

  /* SVG flowing curves / topography lines */
  --topo-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60 C20 40 40 80 60 60 C80 40 100 80 120 60' fill='none' stroke='%23000' stroke-width='0.4' opacity='0.045'/%3E%3Cpath d='M0 30 C30 10 50 50 80 30 C100 15 110 45 120 30' fill='none' stroke='%23000' stroke-width='0.35' opacity='0.035'/%3E%3Cpath d='M0 90 C20 70 60 110 90 90 C105 80 115 100 120 90' fill='none' stroke='%23000' stroke-width='0.35' opacity='0.035'/%3E%3C/svg%3E");

  /* === 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: transparent;
  box-shadow: none;
  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: auto;
  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-color: var(--bg-texture-1);
  background-image: var(--topo-pattern), var(--rings-pattern);
  background-repeat: repeat;
  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: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 28px auto 48px;
  background: #3a3f4a;
  border-radius: 60px;
  padding: 10px 20px;
  max-width: 820px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn-pill {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  letter-spacing: 0.02em;
  position: relative;
  white-space: nowrap;
}

.btn-pill:hover {
  transform: scale(1.07);
  background: rgba(255,255,255,0.12);
  border-color: rgba(201,148,58,0.6);
  box-shadow: 0 0 16px rgba(201,148,58,0.25), 0 0 4px rgba(201,148,58,0.15);
  color: #ffffff;
}

.btn-pill:active {
  transform: scale(1.02);
}

.btn-pill strong { font-weight: 800; }

/* 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), box-shadow var(--transition);
  display: block;
  color: inherit;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

.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-color: var(--bg-texture-adv);
  background-image: var(--hex-pattern);
  background-repeat: repeat;
  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-color: var(--bg-texture-cta);
  background-image: var(--wave-pattern);
  background-repeat: repeat;
}

.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: #E87A1E; border-bottom-color: #E87A1E; font-weight: 700; }

.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 {
  max-width: 1200px;
  margin: 0 auto;
  /* No longer plain white — each zone applies its own textured bg */
}

/* ── Textured backgrounds per zone ────────────────────────── */
.bg-zone-1 > .content-card {
  background-color: var(--bg-texture-1);
  background-image: var(--topo-pattern), var(--rings-pattern);
  background-repeat: repeat;
}

.bg-zone-2 > .content-card {
  background-color: var(--bg-texture-2);
  background-image: var(--wave-pattern), var(--hex-pattern);
  background-repeat: repeat;
}

.bg-zone-3 > .content-card {
  background-color: var(--bg-texture-3);
  background-image: var(--rings-pattern), var(--topo-pattern);
  background-repeat: repeat;
}

/* ============================================================
   PETROCHEM INDUSTRY FOCUS SECTION (homepage)
   ============================================================ */
.petrochem-section {
  padding: 64px 48px;
  background: linear-gradient(135deg, #1a2a3a 0%, #0d2137 50%, #1c3550 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.petrochem-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hex-pattern);
  background-repeat: repeat;
  opacity: 0.15;
  pointer-events: none;
}

.petrochem-section .section-label {
  color: var(--accent);
}

.petrochem-section .section-title {
  color: #ffffff;
}

.petrochem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.petrochem-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: transform var(--transition), background var(--transition);
  position: relative;
  z-index: 1;
}

.petrochem-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.12);
}

.petrochem-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  color: var(--accent);
}

.petrochem-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
}

.petrochem-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
}

.petrochem-intro {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 8px;
  line-height: 1.8;
}

/* ── Petrochem hover tooltip (floating detail card) ──────── */
.petrochem-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 340px;
  background: #1c2533;
  background-image: linear-gradient(135deg, #1c2533 0%, #243040 100%);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(201,148,58,0.25);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 20px rgba(201,148,58,0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
  z-index: 100;
  pointer-events: none;
}

/* Arrow pointing down */
.petrochem-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #243040;
}

/* Show on card hover */
.petrochem-card:hover .petrochem-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.petrochem-tooltip strong {
  color: var(--accent);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Prevent tooltip from being clipped — cards need overflow visible */
.petrochem-card {
  overflow: visible;
}

/* Ensure grid doesn't clip tooltips */
.petrochem-grid {
  overflow: visible;
}
.petrochem-section {
  overflow: visible;
}

/* Form inputs bg on textured page */
.form-group input,
.form-group textarea {
  background: rgba(255,255,255,0.85);
}

/* ============================================================
   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; }
  .petrochem-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 */

  .about-btns {
    border-radius: 20px;
    padding: 8px;
    gap: 8px;
  }
  .btn-pill {
    padding: 10px 16px;
    font-size: 12px;
  }

  /* Hide hover tooltips on touch/mobile — not usable */
  .petrochem-tooltip {
    display: none;
  }
}

@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;
}
/* ============================================================
   FLOATING ISLANDS HEADER — REFACTOR 2026-04
   ============================================================
   Replaces the full-width sticky header with two independent
   floating "pill" islands (logo left, nav right). Uses
   glassmorphism (backdrop-filter blur) over a dark translucent
   background. Islands condense slightly when the page scrolls.
   Rules here are appended so they override the legacy header
   styles defined earlier in the file via cascade order.
   ============================================================ */

:root {
  /* Island pill — visual tokens */
  --island-bg:               rgba(17, 22, 38, 0.55);
  --island-bg-scrolled:      rgba(17, 22, 38, 0.78);
  --island-border:           1px solid rgba(255, 255, 255, 0.10);
  --island-shadow:           0 8px 32px rgba(0, 0, 0, 0.28);
  --island-shadow-scrolled:  0 6px 20px rgba(0, 0, 0, 0.35);
  --island-blur:             blur(18px) saturate(160%);
  --island-radius:           999px;

  /* Island layout */
  --island-top:              20px;
  --island-top-scrolled:     10px;
  --island-side-pad:         24px;
  --nav-pill-pad-y:          10px;
  --nav-pill-pad-x:          12px;

  /* Clearance that hero/page-hero content needs so it doesn't
     sit under the islands at the top of the page */
  --islands-clearance:       110px;
  --islands-clearance-mobile: 88px;

  /* Anchor-scroll offset */
  --scroll-anchor-offset:    100px;
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --island-bg:          rgba(17, 22, 38, 0.92);
    --island-bg-scrolled: rgba(17, 22, 38, 0.97);
  }
}

/* --- Header: fixed transparent layer -------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  padding: var(--island-top) var(--island-side-pad);
  gap: 16px;
  pointer-events: none;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Left island: Logo ---------------------------------------- */
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px 8px 14px;
  background: var(--island-bg);
  -webkit-backdrop-filter: var(--island-blur);
          backdrop-filter: var(--island-blur);
  border: var(--island-border);
  border-radius: var(--island-radius);
  box-shadow: var(--island-shadow);
  pointer-events: auto;
  transition:
    background 0.3s ease,
    padding   0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease;
}
.logo-link:hover {
  background: var(--island-bg-scrolled);
}
.logo-link .logo-img {
  height: 56px;
  width: auto;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Right island: main nav ----------------------------------- */
nav.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--nav-pill-pad-y) var(--nav-pill-pad-x);
  background: var(--island-bg);
  -webkit-backdrop-filter: var(--island-blur);
          backdrop-filter: var(--island-blur);
  border: var(--island-border);
  border-radius: var(--island-radius);
  box-shadow: var(--island-shadow);
  pointer-events: auto;
  transition:
    background 0.3s ease,
    padding   0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease;
}

/* Inner nav items */
nav.main-nav .nav-link,
nav.main-nav .lang-switcher {
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, padding 0.3s ease, font-size 0.3s ease;
}
nav.main-nav .nav-link:hover,
nav.main-nav .lang-switcher:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

nav.main-nav .nav-link.active {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-weight: 600;
}

/* CTA blended into nav as normal text link */
nav.main-nav a.btn-cta {
  background: transparent;
  color: var(--white);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: none;
  transform: none;
  transition: background 0.2s ease, color 0.2s ease, padding 0.3s ease, font-size 0.3s ease;
}
nav.main-nav a.btn-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  opacity: 1;
  transform: none;
}

nav.main-nav .nav-link .caret {
  border-top-color: currentColor;
  opacity: 0.75;
}

/* --- Dropdown: dark-glass to match islands ---- */
nav.main-nav .dropdown {
  top: calc(100% + var(--nav-pill-pad-y) + 6px);
  background: rgba(22, 28, 44, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40);
  border-radius: 14px;
  overflow: hidden;
}
nav.main-nav .dropdown a,
nav.main-nav .dropdown .dd-item {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
nav.main-nav .dropdown a:hover,
nav.main-nav .dropdown .dd-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}

/* --- Scrolled (condensed) state ------------------------------- */
header.is-scrolled .nav-wrapper {
  padding: var(--island-top-scrolled) var(--island-side-pad);
}
header.is-scrolled .logo-link {
  background: var(--island-bg-scrolled);
  padding: 5px 18px 5px 12px;
  box-shadow: var(--island-shadow-scrolled);
}
header.is-scrolled .logo-link .logo-img {
  height: 42px;
}
header.is-scrolled nav.main-nav {
  background: var(--island-bg-scrolled);
  padding: 6px 10px;
  box-shadow: var(--island-shadow-scrolled);
}
header.is-scrolled nav.main-nav .nav-link,
header.is-scrolled nav.main-nav .lang-switcher,
header.is-scrolled nav.main-nav a.btn-cta {
  padding: 6px 12px;
  font-size: 14px;
}

/* --- Clearance for hero + page-hero ------------- */
.hero-content {
  padding-top: var(--islands-clearance);
}
.page-hero {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* --- Anchor-scroll offset ------------ */
.inner-section { scroll-margin-top: var(--scroll-anchor-offset); }
.about-tabs    { scroll-margin-top: var(--scroll-anchor-offset); }

/* ============================================================
   MOBILE (≤900px) — Logo island + Hamburger island + sheet
   ============================================================ */
@media (max-width: 900px) {
  .nav-wrapper {
    padding: 12px 16px;
    gap: 12px;
  }

  .logo-link {
    padding: 6px 16px 6px 10px;
  }
  .logo-link .logo-img {
    height: 44px;
  }

  nav.main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    gap: 0;
    flex-direction: column;
    border: var(--island-border);
    border-radius: 999px;
    background: var(--island-bg);
    -webkit-backdrop-filter: var(--island-blur);
            backdrop-filter: var(--island-blur);
    box-shadow: var(--island-shadow);
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.25s ease, width 0.3s ease, height 0.3s ease;
  }
  .hamburger:hover { background: var(--island-bg-scrolled); }
  .hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 2px 0;
    background: var(--white);
    border-radius: 2px;
    transition: var(--transition);
  }

  /* Condensed state on mobile */
  header.is-scrolled .logo-link      { padding: 4px 14px 4px 8px; }
  header.is-scrolled .logo-link .logo-img { height: 38px; }
  header.is-scrolled .hamburger      {
    width: 42px;
    height: 42px;
    background: var(--island-bg-scrolled);
  }

  /* Open state: floating glass sheet */
  nav.main-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: fixed;
    top: 78px;
    left: 16px;
    right: 16px;
    inset: auto 16px auto 16px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 20px;
    background: var(--island-bg-scrolled);
    -webkit-backdrop-filter: var(--island-blur);
            backdrop-filter: var(--island-blur);
    border: var(--island-border);
    box-shadow: var(--island-shadow);
    pointer-events: auto;
    z-index: 999;
  }
  header.is-scrolled nav.main-nav.open { top: 66px; }

  nav.main-nav.open .nav-item,
  nav.main-nav.open > .lang-switcher {
    width: 100%;
  }
  nav.main-nav.open .nav-link,
  nav.main-nav.open .lang-switcher {
    padding: 12px 16px;
    border-radius: 10px;
    border-bottom: none;
    font-size: 15px;
    color: var(--white);
    width: 100%;
    justify-content: space-between;
  }
  nav.main-nav.open a.btn-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    margin-top: 4px;
    background: var(--accent);
    color: var(--white);
    border-radius: 999px;
    font-weight: 700;
  }
  nav.main-nav.open a.btn-cta:hover {
    background: var(--accent);
    color: var(--white);
    opacity: 0.9;
  }

  nav.main-nav.open .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    box-shadow: none;
    padding: 4px;
    margin: 4px 0 6px;
    border-radius: 10px;
    width: 100%;
    max-height: none;
  }
  nav.main-nav.open .dropdown a,
  nav.main-nav.open .dropdown .dd-item {
    color: rgba(255, 255, 255, 0.88);
    padding: 10px 14px;
    border-bottom: none;
    border-radius: 6px;
    font-size: 14px;
  }
  nav.main-nav.open .dropdown a:hover,
  nav.main-nav.open .dropdown .dd-item:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--accent);
  }

  .hero-content { padding-top: var(--islands-clearance-mobile); }
  .page-hero    {
    padding-top: 28px;
    padding-bottom: 32px;
    padding-left: 80px;
  }
}

/* --- Narrow/medium desktop page-hero clearance ----------------- */
@media (min-width: 901px) and (max-width: 1340px) {
  .page-hero {
    padding-left: 140px;
  }
}

@media (max-width: 600px) {
  nav.main-nav.open {
    left: 12px;
    right: 12px;
    inset: auto 12px auto 12px;
  }
}