/* ==========================================================================
   Global Drip — estilos
   Maquetación replicada de irri-avance.com.ar. Todos los valores salen de
   variables.css.
   ========================================================================== */

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--color-gray);
  background: var(--color-dark);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 var(--line-height); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--heading-margin-bottom);
  font-family: var(--font-family-headings);
  color: inherit;
}
h1 { font-size: var(--h1-font-size); line-height: var(--h1-line-height); font-weight: var(--h1-font-weight); }
h2 { font-size: var(--h2-font-size); line-height: var(--h2-line-height); font-weight: var(--h2-font-weight); }
h3 { font-size: var(--h3-font-size); line-height: var(--h3-line-height); font-weight: var(--h3-font-weight); }
h4 { font-size: var(--h4-font-size); line-height: var(--h4-line-height); font-weight: var(--h4-font-weight); }
strong { font-weight: var(--bold-font-weight); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Separadores (w-separator size_small) */
.separator-small { height: var(--separator-small); }

/* Título grande de los bloques con video */
.display-title {
  font-size: var(--display-font-size);
  line-height: var(--h2-line-height);
  font-weight: var(--h2-font-weight);
  color: #fff;
}

/* Etiqueta de marca sobre el título (estilo h6 de la referencia) */
.eyebrow {
  display: block;
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);
  font-weight: var(--h6-font-weight);
  letter-spacing: var(--h6-letter-spacing);
  text-transform: uppercase;
  color: #fff;
}
.eyebrow strong { font-weight: var(--bold-font-weight); }

/* --- Botones (us-btn-style_*) -------------------------------------------- */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hwrapper-gap);
}

.btn {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: var(--btn-padding);
  font-family: inherit;
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  font-weight: 400;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  background: var(--btn-background);
  border: 0;
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: background var(--btn-transition), box-shadow var(--btn-transition), color var(--btn-transition);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover,
.btn:focus-visible {
  background: var(--btn-hover-background);
  box-shadow: var(--btn-shadow-hover);
  color: #fff;
}

/* Global Drip */
.btn--blue  { --btn-background: var(--gd-blue); }                    /* ref style_2 */
.btn--cyan  { --btn-background: var(--gd-cyan); }                    /* ref style_4 */
.btn--light { --btn-background: var(--gd-cyan); color: #1d1d1b; }   /* ref style_5 */
.btn--gray  { --btn-background: var(--color-gray-light); }           /* ref style_6 */
.btn--round { --btn-background: var(--gd-blue); border-radius: var(--btn-radius-round); font-weight: 600; } /* ref style_1 */
/* Krebs */
.btn--red   { --btn-background: var(--krebs-red); }
.btn--black { --btn-background: var(--krebs-black); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 111;
  height: var(--header-height);
  padding-inline: var(--section-padding-inline);
  color: var(--color-header-text-transparent);
  background: transparent;
  transition: height var(--header-transition), background var(--header-transition), box-shadow var(--header-transition);
}
.site-header.is-sticky {
  height: var(--header-sticky-height);
  background: var(--color-header-bg);
  color: var(--color-header-text);
  box-shadow: var(--header-shadow);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--site-content-width);
  height: 100%;
  margin: 0 auto;
}

.site-header__logo img {
  height: var(--header-logo-height);
  width: auto;
}

/* Menú desktop */
.nav__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__item { position: relative; }
.nav__link {
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 50px;
  padding-inline: var(--menu-items-gap);
  font-family: var(--font-family-headings);
  font-size: var(--menu-font-size);
  font-weight: var(--menu-font-weight);
  line-height: normal;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s;
}
.nav__title { position: relative; }
/* Subrayado hover (hover_underline) */
.nav__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.4em;
  width: 100%;
  height: 2px;
  margin-bottom: -2px;
  background: currentColor;
  opacity: 0;
  transition: all .2s;
}
.nav__item:hover > .nav__link,
.nav__link:focus-visible,
.nav__item.is-current > .nav__link { color: var(--color-header-text-hover); }
.nav__item:hover > .nav__link .nav__title::after { bottom: -2px; opacity: 1; }

.nav__arrow {
  width: .45em; height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}

/* Dropdown (dropdown_afb) */
.nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  min-width: 12rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-header-bg);
  color: var(--color-header-text);
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.1), 0 2px 1px -1px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.2);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 30px, 0);
  transform-origin: 50% 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s, visibility .2s;
}
.nav__item--has-sub:hover > .nav__submenu,
.nav__item--has-sub:focus-within > .nav__submenu,
.nav__item--has-sub.is-open > .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
.nav__submenu a {
  display: block;
  padding: .6em 20px;
  font-size: var(--menu-dropdown-font-size);
  line-height: 1.5;
  white-space: nowrap;
  transition: color .2s;
}
.nav__submenu a:hover,
.nav__submenu a:focus-visible { color: var(--color-header-text-hover); }

/* Hamburguesa */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  margin-right: -15px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__icon,
.nav__icon::before,
.nav__icon::after {
  display: block;
  width: 20px;
  height: 2.5px;
  background: currentColor;
  transition: transform .3s, background .3s;
}
.nav__icon { position: relative; }
.nav__icon::before,
.nav__icon::after { content: ""; position: absolute; left: 0; }
.nav__icon::before { top: -7px; }
.nav__icon::after  { top: 7px; }
.nav--open .nav__icon { background: transparent; }
.nav--open .nav__icon::before { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__icon::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav__toggle { display: flex; }
  .nav__list {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(var(--viewport-height) - var(--header-height));
    overflow-y: auto;
    padding: .7rem var(--section-padding-inline);
    background: var(--color-header-bg);
    color: var(--color-header-text);
    box-shadow: var(--header-shadow);
  }
  .nav--open .nav__list { display: flex; }
  .nav__link {
    justify-content: space-between;
    width: 100%;
    min-height: 0;
    padding: .7rem 0;
    font-size: 15px;
    line-height: 1.5;
  }
  .nav__title::after { display: none; }
  .nav__submenu {
    position: static;
    display: none;
    min-width: 0;
    padding-left: 1rem;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__item--has-sub:hover > .nav__submenu,
  .nav__item--has-sub:focus-within > .nav__submenu { display: none; }
  .nav__item--has-sub.is-open > .nav__submenu { display: block; }
  .nav__item--has-sub.is-open .nav__arrow { transform: translateY(25%) rotate(-135deg); }
  .nav__submenu a { padding: .5rem 0; }
}

/* --- Media de fondo + overlay (l-section-img / -video / -overlay) -------- */
.media-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--viewport-height);
  padding-block: var(--section-padding-block);
  color: #fff;
  background-color: var(--section-bg, var(--color-dark));
  overflow: hidden;
}
.media-section > .section-img,
.media-section > .section-video,
.media-section > .section-overlay {
  position: absolute;
  inset: 0;
}
.section-img {
  background-position: center center;
  background-size: cover;
}
.section-img--parallax { background-attachment: fixed; }
.section-video { pointer-events: none; }
.section-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-overlay { background: var(--overlay-base); }

.media-section a:not(.btn) { color: inherit; }

/* Secciones posteriores a la primera: descuentan el header sticky */
.media-section + .media-section {
  min-height: calc(var(--viewport-height) - var(--header-sticky-height));
}

/* --- Hero dividido en dos ---------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hero__half {
  /* Borde exterior alineado al contenedor de 1140px */
  --edge: max(var(--section-padding-inline), calc((100vw - var(--site-content-width)) / 2));
  --inner: var(--columns-gap);
  padding-top: calc(var(--header-height) + var(--section-padding-block));
}
.hero__half--goteo {
  --section-bg: #0b3a6e;
  padding-inline: var(--edge) var(--inner);
}
.hero__half--pivote {
  --section-bg: var(--krebs-black);
  padding-inline: var(--inner) var(--edge);
}
.hero__half--goteo  > .section-overlay { background: var(--overlay-goteo); }
.hero__half--pivote > .section-overlay { background: var(--overlay-pivote); }

.hero__half--goteo  .eyebrow { color: var(--gd-cyan); }
.hero__half--pivote .eyebrow { color: #fff; }
.hero__half--pivote .eyebrow strong { color: var(--krebs-red); }

.hero__content {
  position: relative;
  max-width: 540px;
}

@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; }
  .hero__half--goteo,
  .hero__half--pivote { padding-inline: var(--section-padding-inline); }
  .hero__half--pivote { min-height: calc(var(--viewport-height) - var(--header-sticky-height)); padding-top: var(--section-padding-block); }
}

/* --- Bloques con video/imagen (texto + botones) ------------------------- */
.block__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--columns-gap);
  width: 100%;
  max-width: calc(var(--site-content-width) + 2 * var(--section-padding-inline));
  margin: 0 auto;
  padding-inline: var(--section-padding-inline);
}
.block__content { grid-column: 1; }
.block--right .block__content { grid-column: 2; }

@media (max-width: 899px) {
  .block__inner { grid-template-columns: 1fr; }
  .block--right .block__content { grid-column: 1; }
  .section-img--parallax { background-attachment: scroll; }
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}
.site-footer a { transition: color .2s; }
.site-footer a:hover { color: var(--color-footer-accent); }

.footer__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--columns-gap);
  max-width: calc(var(--site-content-width) + 2 * var(--section-padding-inline));
  margin: 0 auto;
  padding: var(--section-padding-block) var(--section-padding-inline);
}
.footer__brand { text-align: center; }
.footer__brand img {
  width: 200px;
  height: auto;
  margin: 0 auto 10px;
}
.footer__slogan {
  font-style: italic;
  color: var(--color-footer-accent);
}
.footer__title {
  margin: 0 0 10px;
  font-family: var(--font-family-headings);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--color-footer-accent);
}
.footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__contact li + li { margin-top: 10px; }
.footer__contact a,
.footer__contact .footer__location {
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.footer__contact svg { width: 20px; height: 20px; flex-shrink: 0; }
.footer__contact .icon--accent { color: var(--color-footer-accent); }

.socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--separator-small);
}
.socials a {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  width: fit-content;
  color: #fff;
}
.socials__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 25px;
  transition: background .2s;
}
.socials a:hover { color: var(--color-footer-accent); }
.socials a:hover .socials__icon { background: var(--color-footer-accent); color: #fff; }
.socials svg { width: 1em; height: 1em; }

.footer__bottom {
  max-width: calc(var(--site-content-width) + 2 * var(--section-padding-inline));
  margin: 0 auto;
  padding: var(--section-padding-block-small) var(--section-padding-inline);
  font-size: 16px;
}
.footer__bottom a { color: var(--color-footer-accent); }
.footer__bottom a:hover { color: var(--color-gray-light); }

@media (max-width: 899px) {
  .footer__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 600px) {
  .footer__bottom { text-align: center; }
}

/* --- Accesibilidad: menos movimiento ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* Bloques de la portada con video/foto: oscurecido parejo (sin degradé) */
.block > .section-overlay { background: rgba(0, 0, 0, 0.5); }

/* Video del pivote: encuadre hacia el campo y el equipo */
.hero__half--pivote .section-video video { object-position: 70% 85%; }