/* ============================================================
   AZOTEY S.A. — CLAUDE EDITION
   Estilo: Industrial Premium + Azul Corporativo
   ============================================================ */

:root {
  /* Azul corporativo (heredado) */
  --az-blue:        #194F99;
  --az-blue-deep:   #0056b3;
  --az-blue-700:    #004a99;
  --az-blue-glow:   rgba(0, 123, 255, .45);

  /* Industrial premium */
  --az-ink:         #0b1220;   /* casi negro azulado */
  --az-ink-2:       #111c30;
  --az-steel:       #16243d;
  --az-steel-soft:  #1d3052;
  --az-line:        rgba(255,255,255,.08);

  /* Acento madera / dorado premium */
  --az-gold:        #d8a13a;
  --az-gold-soft:   #e7b95c;
  --az-amber:       #c8902f;

  /* Neutros claros */
  --az-paper:       #f5f7fa;
  --az-paper-2:     #eef2f7;
  --az-muted:       #5b6b80;
  --az-text:        #1a2433;

  --az-radius:      16px;
  --az-radius-sm:   10px;
  --az-shadow:      0 18px 50px -18px rgba(8,18,40,.55);
  --az-shadow-soft: 0 12px 30px -16px rgba(8,18,40,.35);
  --az-trans:       .35s cubic-bezier(.2,.7,.2,1);

  --font-head: 'Jost', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
}

/* ----------------------------- Base ----------------------------- */
* { scroll-behavior: smooth; }

html, body {
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--az-text);
  background: var(--az-paper);
  overflow-x: clip;
}

h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -.5px;
}

a { transition: color var(--az-trans); }

::selection { background: var(--az-gold); color: #1a1206; }

/* Reusable eyebrow label */
.az-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--az-blue-deep);
  margin-bottom: 1rem;
}
.az-eyebrow::before {
  content: "";
  width: 34px; height: 2px;
  background: var(--az-gold);
  display: inline-block;
}
.az-eyebrow.light { color: var(--az-gold-soft); }

.text-gold { color: var(--az-gold) !important; }
.bg-ink { background: var(--az-ink) !important; }

/* Section title underline accent */
.az-title { position: relative; }
.az-title .text-primary { color: var(--az-blue) !important; }

/* ----------------------------- Navbar ----------------------------- */
.az-navbar {
  background: rgba(11,18,32,.85) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--az-line);
  transition: background var(--az-trans), box-shadow var(--az-trans);
  z-index: 1030;
}
.az-navbar.scrolled {
  background: rgba(11,18,32,.96) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.az-navbar .navbar-brand img { max-height: 54px; transition: var(--az-trans); }
.az-navbar .nav-link {
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: .82rem;
  text-transform: uppercase;
  color: rgba(255,255,255,.82) !important;
  padding: .6rem 1rem !important;
}
.az-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: .35rem;
  height: 2px;
  background: var(--az-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--az-trans);
}
.az-navbar .nav-link:hover::after,
.az-navbar .nav-link.active::after { transform: scaleX(1); }
.az-navbar .nav-link:hover,
.az-navbar .nav-link.active { color: #fff !important; }
.az-navbar .dropdown-menu {
  background: var(--az-ink-2);
  border: 1px solid var(--az-line);
  border-radius: var(--az-radius-sm);
  box-shadow: var(--az-shadow);
}
.az-navbar .dropdown-item { color: rgba(255,255,255,.85); border-radius: 8px; }
.az-navbar .dropdown-item:hover { background: var(--az-steel); color: #fff; }
.az-navbar .navbar-toggler { color: #fff; }
.az-navbar .navbar-toggler-icon-custom { color:#fff; font-weight:600; letter-spacing:1px; }

/* ----------------------------- Hero ----------------------------- */
.az-hero {
  position: relative;
  overflow: hidden;
  background: var(--az-ink);
}
.az-hero video,
.az-hero .az-hero-img {
  width: 100%;
  height: 88vh;
  max-height: 820px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.03);
}
.az-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,18,32,.35) 0%, rgba(11,18,32,.15) 35%, rgba(11,18,32,.85) 100%),
    linear-gradient(90deg, rgba(0,86,179,.45) 0%, rgba(11,18,32,.1) 60%);
  pointer-events: none;
}
.az-hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 8% 9% 8%;
}
.az-hero-content .eyebrow {
  color: var(--az-gold-soft);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: 1rem;
}
.az-hero-content h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  max-width: 18ch;
  margin-bottom: 1.6rem;
  text-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.az-hero-content h1 .accent { color: var(--az-gold); }

/* hero scroll cue */
.az-scroll-cue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255,255,255,.7);
  font-size: 1.4rem;
  animation: azBounce 2s infinite;
}
@keyframes azBounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)} }

/* Mobile hero carousel */
.az-hero-mobile .carousel-item img { height: 70vh; object-fit: cover; }
.az-hero-mobile .hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center; padding: 0 1.2rem 3rem;
  background: linear-gradient(180deg, rgba(11,18,32,.1), rgba(11,18,32,.85));
}
.az-hero-mobile h1 { font-size: 1.6rem; text-shadow: 0 4px 18px rgba(0,0,0,.6); }

/* ----------------------------- Buttons ----------------------------- */
.btn { font-family: var(--font-head); font-weight: 600; letter-spacing: .5px; border-radius: 50px; }
.btn-gold {
  background: linear-gradient(135deg, var(--az-gold), var(--az-amber));
  color: #1a1206;
  border: none;
  box-shadow: 0 10px 26px -10px rgba(200,144,47,.7);
}
.btn-gold:hover { color:#1a1206; transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(200,144,47,.85); }
.btn-az {
  background: linear-gradient(135deg, var(--az-blue), var(--az-blue-deep));
  color:#fff; border:none;
  box-shadow: 0 10px 26px -12px var(--az-blue-glow);
}
.btn-az:hover { color:#fff; transform: translateY(-2px); }
.btn-ghost-light {
  border: 1.5px solid rgba(255,255,255,.6);
  color:#fff; background: transparent;
}
.btn-ghost-light:hover { background:#fff; color: var(--az-ink); }
/* legacy class kept for compatibility */
.btn-mostaza { background: linear-gradient(135deg, var(--az-gold), var(--az-amber)); color:#1a1206; border:none; font-weight:600; }
.btn-mostaza:hover { color:#1a1206; transform: translateY(-2px); }
.btn { transition: transform var(--az-trans), box-shadow var(--az-trans), background var(--az-trans), color var(--az-trans); }

/* ----------------------------- Section helpers ----------------------------- */
.az-section { padding: 6rem 0; }
.az-section-dark {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(0,123,255,.18), transparent 60%),
    linear-gradient(180deg, var(--az-ink) 0%, var(--az-ink-2) 100%);
  color: #e7edf6;
  position: relative;
}
.az-section-dark h1,.az-section-dark h2,.az-section-dark h3,.az-section-dark h4 { color:#fff; }
.az-section-dark p { color: rgba(231,237,246,.78); }
.az-paper { background: var(--az-paper); }
.az-paper-2 { background: var(--az-paper-2); }
.az-mision-vision { padding-top: 2rem; padding-bottom: 5rem; }

/* subtle plywood texture overlay */
.az-texture::before {
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px);
  pointer-events:none; opacity:.6;
}

/* ----------------------------- Feature / value cards ----------------------------- */
.az-card {
  background: #fff;
  border-radius: var(--az-radius);
  padding: 2rem 1.6rem;
  height: 100%;
  border: 1px solid rgba(13,32,64,.06);
  box-shadow: var(--az-shadow-soft);
  transition: transform var(--az-trans), box-shadow var(--az-trans), border-color var(--az-trans);
  position: relative;
  overflow: hidden;
}
.az-card::before {
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background: linear-gradient(90deg, var(--az-blue), var(--az-gold));
  transform: scaleX(0); transform-origin:left; transition: transform var(--az-trans);
}
.az-card:hover { transform: translateY(-8px); box-shadow: var(--az-shadow); border-color: rgba(0,123,255,.25); }
.az-card:hover::before { transform: scaleX(1); }
.az-card .az-icon {
  width: 62px; height: 62px;
  border-radius: 16px;
  display: flex; align-items:center; justify-content:center;
  font-size: 1.5rem; color:#fff; margin-bottom: 1.2rem;
  background: linear-gradient(135deg, var(--az-blue), var(--az-blue-deep));
  box-shadow: 0 10px 20px -10px var(--az-blue-glow);
}
.az-card.gold .az-icon { background: linear-gradient(135deg, var(--az-gold), var(--az-amber)); color:#1a1206; }
.az-card h4 { color: var(--az-ink); margin-bottom:.6rem; }
.az-card p { color: var(--az-muted); margin-bottom:0; }

/* keep legacy process-step usable */
.process-step { background:#fff; border-radius: var(--az-radius); box-shadow: var(--az-shadow-soft); transition: transform var(--az-trans), box-shadow var(--az-trans); }
.process-step:hover { transform: translateY(-6px); box-shadow: var(--az-shadow); }
.quality-badge {
  width: 64px; height:64px; border-radius:16px; margin: 0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff;
  background: linear-gradient(135deg, var(--az-blue), var(--az-blue-deep));
}

/* ----------------------------- Stats ----------------------------- */
.az-stat { text-align: center; padding: 1.2rem .5rem; }
.az-stat .num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--az-gold);
}
.az-stat .lbl { font-size:.95rem; color: rgba(231,237,246,.8); margin-top:.4rem; letter-spacing:.5px; }
.az-stat-row { border-radius: var(--az-radius); }

/* feature check inline */
.az-check { display:flex; align-items:center; gap:.6rem; font-weight:600; color: var(--az-text); }
.az-check i { color: var(--az-blue); }

/* ----------------------------- Process timeline ----------------------------- */
.az-process-card {
  background: rgba(255,255,255,.96);
  border-radius: var(--az-radius);
  padding: 2rem 1.4rem;
  height:100%;
  position: relative;
  box-shadow: var(--az-shadow-soft);
  transition: transform var(--az-trans), box-shadow var(--az-trans);
}
.az-process-card:hover { transform: translateY(-8px); box-shadow: var(--az-shadow); }
.az-process-num {
  position: absolute; top:-22px; left: 1.4rem;
  width: 50px; height:50px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:700; font-size:1.3rem; color:#fff;
  background: linear-gradient(135deg, var(--az-gold), var(--az-amber));
  box-shadow: 0 10px 20px -8px rgba(200,144,47,.7);
}
.az-process-card h4 { margin-top:.8rem; color: var(--az-ink); }
.az-process-card p { color: var(--az-muted); margin-bottom:0; }

/* ----------------------------- Factory cards ----------------------------- */
.az-factory {
  position: relative;
  border-radius: var(--az-radius);
  overflow: hidden;
  color:#fff;
  min-height: 100%;
  padding: 2.4rem;
  background: linear-gradient(135deg, var(--az-steel), var(--az-blue-deep));
  box-shadow: var(--az-shadow);
  transition: transform var(--az-trans);
}
.az-factory::after {
  content:""; position:absolute; right:-40px; bottom:-40px;
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(216,161,58,.25), transparent 70%);
}
.az-factory:hover { transform: translateY(-6px); }
.az-factory ul { padding-left: 1.1rem; }
.az-factory ul li { margin-bottom:.5rem; color: rgba(255,255,255,.9); }
.az-factory .yt-btn {
  position:absolute; bottom:-26px; right:24px;
  width:58px; height:58px; border-radius:50%;
  background:#ff0000; color:#fff; font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 26px -10px rgba(255,0,0,.7);
  transition: transform var(--az-trans);
}
.az-factory .yt-btn { z-index:5; position:absolute; bottom:18px; right:18px; width:58px; height:58px; border-radius:50%; background:#ff0000; color:#fff; font-size:1.7rem; display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 26px -10px rgba(255,0,0,.7); transition: all 0.3s ease; cursor: pointer; overflow: visible;
}
.az-factory::after { z-index: 1; }

.az-factory .yt-btn:hover { animation: youtube-pulse 1.5s infinite; transform: scale(1.25);
}

/* ----------------------------- Gallery (producción) ----------------------------- */
.az-gallery-card {
  position: relative;
  border-radius: var(--az-radius);
  overflow: hidden;
  height: 100%;
  background:#fff;
  box-shadow: var(--az-shadow-soft);
  transition: transform var(--az-trans), box-shadow var(--az-trans);
}
.az-gallery-card:hover { transform: translateY(-8px); box-shadow: var(--az-shadow); }
.az-gallery-media { position: relative; overflow:hidden; aspect-ratio: 4/3; }
.az-gallery-media img { width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.az-gallery-card:hover .az-gallery-media img { transform: scale(1.08); }
.az-gallery-step {
  position:absolute; top:14px; left:14px;
  background: var(--az-gold); color:#1a1206;
  font-family: var(--font-head); font-weight:700;
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.5);
}
.az-gallery-body { padding: 1.4rem 1.4rem 1.6rem; }
.az-gallery-body h2 { font-size:1.15rem; color: var(--az-blue-deep); font-weight:700; letter-spacing:.5px; margin-bottom:.6rem; }
.az-gallery-body p { color: var(--az-muted); font-size:.95rem; margin-bottom:0; }

/* ----------------------------- Contact cards ----------------------------- */
.az-contact-card {
  background:#fff;
  border-radius: var(--az-radius);
  padding: 2rem 1.6rem;
  height:100%;
  border:1px solid rgba(13,32,64,.06);
  box-shadow: var(--az-shadow-soft);
  transition: transform var(--az-trans), box-shadow var(--az-trans);
  text-align:center;
}
.az-contact-card:hover { transform: translateY(-6px); box-shadow: var(--az-shadow); }
.az-contact-card .az-icon-circle {
  width:70px; height:70px; border-radius:50%;
  margin: 0 auto 1.2rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; color:#fff;
  background: linear-gradient(135deg, var(--az-blue), var(--az-blue-deep));
}
.az-contact-card h4 { color: var(--az-ink); }
.az-contact-card a { color: var(--az-blue-deep); text-decoration:none; }
.az-contact-card a:hover { color: var(--az-gold); }

/* BOTÓN AZUL */
.az-contact-card .btn-az { color:#fff; /* blanco inicial */ }
.az-contact-card .btn-az:hover { color: var(--az-gold); /* dorado al hover */ }

/* ----------------------------- Flags ----------------------------- */
.az-flag {
  background:#fff; border-radius: var(--az-radius-sm);
  padding: 0; overflow: hidden;
  border:1px solid rgba(13,32,64,.06);
  box-shadow: var(--az-shadow-soft);
  transition: transform var(--az-trans), box-shadow var(--az-trans);
  height:100%;
}
.az-flag:hover { transform: translateY(-5px); box-shadow: var(--az-shadow); }
.az-flag img { display:block; width:100%; height:auto; aspect-ratio: 392/312; object-fit: cover; border-radius: var(--az-radius-sm); }
.az-flag h5 { font-size:.95rem; margin:0; color: var(--az-text); }

.az-img-lg { height: 50px; }
.az-img-sm { height: 35px; }

/* ----------------------------- CTA band ----------------------------- */
.az-cta {
  position: relative;
  overflow:hidden;
  background:
    radial-gradient(900px 400px at 15% 20%, rgba(216,161,58,.18), transparent 60%),
    linear-gradient(135deg, var(--az-blue-deep), var(--az-blue));
  color:#fff;
}
.az-cta h2 { color:#fff; }

/* mision / vision */
.mision-vision-container h3 { color: var(--az-blue-deep); }
.az-mv {
  background:#fff; border-radius: var(--az-radius); padding: 1.8rem;
  box-shadow: var(--az-shadow-soft); height:100%;
  border-top: 4px solid var(--az-blue);
  transition: transform var(--az-trans), box-shadow var(--az-trans);
}
.az-mv:hover { transform: translateY(-5px); box-shadow: var(--az-shadow); }
.az-mv.gold { border-top-color: var(--az-gold); }

/* ----------------------------- Footer ----------------------------- */
.az-footer {
  background:
    radial-gradient(800px 300px at 90% 0%, rgba(0,123,255,.16), transparent 60%),
    var(--az-ink);
  color: rgba(231,237,246,.75);
  border-top: 3px solid var(--az-gold);
}
.az-footer h3 { color:#fff; font-size:1.05rem; letter-spacing:1px; margin-bottom:1.2rem; position:relative; padding-bottom:.6rem; }
.az-footer h3::after { content:""; position:absolute; left:0; bottom:0; width:40px; height:2px; background: var(--az-gold); }
.az-footer a { color: rgba(231,237,246,.75); text-decoration:none; }
.az-footer a:hover { color: var(--az-gold); }
.az-footer .social-btn {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--az-steel); color:#fff; font-size:1.1rem;
  transition: transform var(--az-trans), background var(--az-trans);
}
.az-footer .social-btn:hover { transform: translateY(-3px); background: var(--az-blue); color:#fff; }

/* ----------------------------- Instagram reels ----------------------------- */
.instagram-reels { display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; }
.reel-container { flex:1 1 300px; max-width:340px; }

/* ----------------------------- WhatsApp / mail pills ----------------------------- */
.btn-whatsapp { background:#25D366; color:#fff; border:none; }
.btn-whatsapp:hover { background:#1da851; color:#fff; }
.btn-mail { background: var(--az-blue-deep); color:#fff; border:none; }
.btn-mail:hover { background: var(--az-blue); color:#fff; }

/* ----------------------------- Reveal animation ----------------------------- */
.az-reveal { opacity:0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.az-reveal.in { opacity:1; transform:none; }

/* ----------------------------- Responsive ----------------------------- */
@media (max-width: 991px) {
  .az-section { padding: 4rem 0; }
  .az-hero-content { padding: 0 6% 12% 6%; align-items:center; text-align:center; }
  .az-hero-content h1 { max-width: 100%; }
}
@media (max-width: 575px) {
  .az-hero-content .eyebrow { font-size:.72rem; }
}