/* Homepage V3 — overrides to match root index.php (same styles/JS stack) */

/*
 * Rem scale (homepage V3 vs styleScreen)
 *
 * This template sets html { font-size: 0.6945vw !important; }. styleScreen.css
 * was authored for a 2.777vw root; overrides below rescale those rems (×4).
 *
 * styleMobile.css (max-width 640px): html is also 0.6945vw and every rem in that
 * file was scaled ×4 in-repo so mobile matches the old 2.777vw + unscaled rem
 * look. Prefer editing styleMobile for mobile sizing instead of duplicating here.
 *
 * Formula for styleScreen-only fixes:
 *   new_rem = old_rem * (2.777 / 0.6945)   (≈ old_rem * 4)
 */

:root {
  --color-dark-green: #25281B;
  --color-wine: #681B22;
  --color-salmon: #FF5E48;
  --color-white-bone: #FEFBF6;
  /* GSAP jQuery.settings.js tints on `main` (ScrollTrigger wine zone) */
  --color-main-scroll-base: #25281b; /* rgb(37, 40, 27); same as --main-color */
  --color-main-scroll-wine: #80202e; /* desktop: rgb(128, 32, 46) */
  --color-main-scroll-wine-sm: #751d29; /* mobile: rgb(117, 29, 41) */
  --bg-compost: #741c27; /* sampled from compost video / image */
}

main.page-template-homepage-v3 section#Biodegradacion {
  background-color: var(--bg-compost);
}

html {
  font-size: 0.6945vw !important;
}

body { height: auto; }

/* styleScreen .setPrev/.setNext: 3.2rem box + 2.4rem margin-bottom; rem ×4 vs 2.777vw baseline */
main.page-template-homepage-v3 .setPrev,
main.page-template-homepage-v3 .setNext {
  width: 12.8rem;
  height: 12.8rem;
  margin-bottom: 9.6rem;
}

/* styleScreen margin utilities isMT isMB isMRG: each rem × (2.777/0.6945) ≈ ×4 — mobile only */
@media (max-width: 640px) {
  main.page-template-homepage-v3 .isMRG00 { margin: 0 auto !important; }

  main.page-template-homepage-v3 .isMTA00 { margin-top: auto !important; }
  main.page-template-homepage-v3 .isMT000 { margin-top: 0 !important; }
  main.page-template-homepage-v3 .isMT008 { margin-top: 3.2rem !important; }
  main.page-template-homepage-v3 .isMT016 { margin-top: 6.4rem !important; }
  main.page-template-homepage-v3 .isMT024 { margin-top: 9.6rem !important; }
  main.page-template-homepage-v3 .isMT032 { margin-top: 12.8rem !important; }
  main.page-template-homepage-v3 .isMT048 { margin-top: 19.2rem !important; }
  main.page-template-homepage-v3 .isMT064 { margin-top: 25.6rem !important; }
  main.page-template-homepage-v3 .isMT072 { margin-top: 28.8rem !important; }
  main.page-template-homepage-v3 .isMT080 { margin-top: 32rem !important; }
  main.page-template-homepage-v3 .isMT096 { margin-top: 38.4rem !important; }
  main.page-template-homepage-v3 .isMT112 { margin-top: 44.8rem !important; }
  main.page-template-homepage-v3 .isMT128 { margin-top: 51.2rem !important; }
  main.page-template-homepage-v3 .isMT144 { margin-top: 57.6rem !important; }
  main.page-template-homepage-v3 .isMT160 { margin-top: 64rem !important; }
  main.page-template-homepage-v3 .isMT256 { margin-top: 102.4rem !important; }

  main.page-template-homepage-v3 .isMB000 { margin-bottom: 0 !important; }
  main.page-template-homepage-v3 .isMB004 { margin-bottom: 1.6rem !important; }
  main.page-template-homepage-v3 .isMB008 { margin-bottom: 3.2rem !important; }
  main.page-template-homepage-v3 .isMB016 { margin-bottom: 6.4rem !important; }
  main.page-template-homepage-v3 .isMB032 { margin-bottom: 12.8rem !important; }
  main.page-template-homepage-v3 .isMB048 { margin-bottom: 19.2rem !important; }
  main.page-template-homepage-v3 .isMB054 { margin-bottom: 21.6rem !important; }
  main.page-template-homepage-v3 .isMB064 { margin-bottom: 25.6rem !important; }
  main.page-template-homepage-v3 .isMB072 { margin-bottom: 28.8rem !important; }
  main.page-template-homepage-v3 .isMB080 { margin-bottom: 32rem !important; }
  main.page-template-homepage-v3 .isMB096 { margin-bottom: 38.4rem !important; }
  main.page-template-homepage-v3 .isMB112 { margin-bottom: 44.8rem !important; }
  main.page-template-homepage-v3 .isMB128 { margin-bottom: 51.2rem !important; }
  main.page-template-homepage-v3 .isMB144 { margin-bottom: 57.6rem !important; }
  main.page-template-homepage-v3 .isMB160 { margin-bottom: 64rem !important; }
  main.page-template-homepage-v3 .isMB256 { margin-bottom: 102.4rem !important; }
}


/* Keep only for the Fin de Vida title in Biodegradación section */
/* main.page-template-homepage-v3 section#Biodegradacion h1.isTTU.isDSK.isMB000 {
  font: 400 6.4rem/1.10em 'Robert', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: rgb(255, 94, 72) !important;
} */
/* Exclude h1 elements with isDSB/isDSA from Kirki global h1 overrides */
/* Apply styles from styleScreen.css (font-size: 5.0rem, font-weight: 300, line-height: 1.25em) */
/* main.page-template-homepage-v3 h1.isDSB,
main.page-template-homepage-v3 h1.isDSA {
  font-family: 'Robert', sans-serif !important;
  font-size: 5.0rem !important;
  font-weight: 300 !important;
  line-height: 1.25em !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: rgb(255, 94, 72) !important;
} */

/* Reset global h1 overrides for "Mosh®" headings on this template only */
/* main.page-template-homepage-v3 section#Material h1.isDSB.isMB000,
main.page-template-homepage-v3 section#Material h1.isDSA.isMB000,
main.page-template-homepage-v3 section#Biodegradacion h1.isDSB.isMB000,
main.page-template-homepage-v3 section#Biodegradacion h1.isDSA.isMB000,
main.page-template-homepage-v3 section#Biodegradacion h2.isDSB.isMB000,
main.page-template-homepage-v3 section#Biodegradacion h2.isDSA.isMB000 {
  font-family: 'Robert', sans-serif !important;
  font-size: 5.0rem !important;
  line-height: 1.25em !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
} */
/* Color all spans in headings containing "Mosh®" */
main.page-template-homepage-v3 section#Biodegradacion h1.isDSB.isMB000 > span,
main.page-template-homepage-v3 section#Biodegradacion h1.isDSA.isMB000 > span,
main.page-template-homepage-v3 section#Biodegradacion h2.isDSB.isMB000 > span,
main.page-template-homepage-v3 section#Biodegradacion h2.isDSA.isMB000 > span {
  color: rgb(255, 94, 72) !important;
}
/* main.page-template-homepage-v3 h2 {
  font-size: 4.8rem !important;
  text-transform: uppercase;
} */
/* main.page-template-homepage-v3 h3 { font-size: 31px !important; } */
/* Restore base h3 styles only for the Instagram heading ("Seguinos en IG") */
/* main.page-template-homepage-v3 h3.isDSB[data-aos="fade"][data-aos-delay="000"] {
  font: 400 3.1rem/1.23em 'Robert', sans-serif;
  margin-bottom: 2.4rem !important;
  letter-spacing: 0.05rem !important;
} */
/* main.page-template-homepage-v3 section#Home .isTAC.isMB064 h3 {
  font: 400 3.1rem/1.23em 'Robert', sans-serif;
  margin-bottom: 2.4rem;
  letter-spacing: 0.05rem;
} */
/* Text transform for Instagram h3 element only - target by section context with setGrid */
main.page-template-homepage-v3 section:has(.setGrid.setSwiper) h3.isDSB[data-aos="fade"][data-aos-delay="000"] {
  text-transform: uppercase !important;
}
/* Fallback for browsers that don't support :has() - target h3.isDSB with specific data attributes */
/* This is safe as there's only one h3.isDSB with these attributes (Instagram section) */
main.page-template-homepage-v3 h3.isDSB[data-aos="fade"][data-aos-delay="000"] {
  text-transform: uppercase !important;
}
main.page-template-homepage-v3 h4:not(.isLMT) { font-size: inherit !important; }
/* Reset all overrides for specific h4 in Biodegradación section - exclude from Kirki h4 rule */
main.page-template-homepage-v3 section#Biodegradacion h4[data-aos="fade"][data-aos-delay="100"] {
  font-family: 'Robert', sans-serif !important;
  font-size: 2.1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.25em !important;
  text-transform: inherit !important;
  color: rgb(255, 94, 72) !important;
  margin: 0 0 2.4rem 0 !important;
  text-shadow: none !important;
  text-align: justify !important;
}

main.page-template-homepage-v3 blockquote,
main.page-template-homepage-v3 p,
main.page-template-homepage-v3 ul,
main.page-template-homepage-v3 li,
main.page-template-homepage-v3 a {
  font-family: 'Robert', serif !important;
}

/* main { font-family: 'Robert', serif; } */
/* main * { font-family: 'Robert', serif; color: var(--color-dark-green); } */
/* REMOVED - conflicting with section-biodegradacion.php
main section * { font-family: 'Robert', serif !important; text-align: left; }
*/

main section#Home * {
  color: var(--font-color, rgb(255, 250, 245)) !important;
}
main section#Home .isTAC,
main section#Home .isTAC * {
  text-align: center !important;
}
/* Allow .isTAC to center text in all sections, not just #Home */
main section .isTAC,
main section .isTAC * {
  text-align: center !important;
}
main section#Home .isAlt span:last-child {
  color: var(--font-color, rgb(255, 250, 245)) !important;
}
/* Reset CSS overrides for hero grid labels (Design / Art / Packaging) */
/* Remove font-size, font-weight, text-align, line-height overrides to use styleScreen.css defaults */
main.page-template-homepage-v3 section#Home ul.isGRD li p.isAlt[data-aos="fade"] {
  font-size: 2.1rem !important;
  font-weight: 400 !important;
  text-align: left !important;
  line-height: 1.5em !important;
}
/* Also reset for spans inside those labels */
main.page-template-homepage-v3 section#Home ul.isGRD li p.isAlt[data-aos="fade"] span {
  font-size: inherit !important;
  font-weight: inherit !important;
  text-align: inherit !important;
  line-height: inherit !important;
}

main section#Material,
main section#Material * {
  color: var(--color-white-bone) !important;
}

/* Sections with light background should have dark text (matching styleScreen.css) */
main.page-template-homepage-v3 section:nth-of-type(2),
main.page-template-homepage-v3 section:nth-of-type(4),
main.page-template-homepage-v3 section:nth-of-type(7),
main.page-template-homepage-v3 section:nth-of-type(12),
main.page-template-homepage-v3 section:nth-of-type(13) {
  background: var(--font-color, rgb(255, 250, 245)) !important;
  color: var(--color-dark-green) !important;
}
main.page-template-homepage-v3 section:nth-of-type(2) *,
main.page-template-homepage-v3 section:nth-of-type(4) *,
main.page-template-homepage-v3 section:nth-of-type(7) *,
main.page-template-homepage-v3 section:nth-of-type(12) *,
main.page-template-homepage-v3 section:nth-of-type(13) * {
  color: var(--color-dark-green) !important;
}

/* main.page-template-homepage-v3 section {
  padding-left: 0;
  padding-right: 0;
} */

/* section:nth-of-type(1) { padding-top: 0; } */
/* section:nth-of-type(2) { display: block !important; } */
main.page-template-homepage-v3 section#Compromiso {
  background: transparent !important;
  color: var(--font-color);
}
main.page-template-homepage-v3 section#Compromiso .setWrapper.isAlt.isV02,
main.page-template-homepage-v3 section#Compromiso blockquote,
main.page-template-homepage-v3 section#Compromiso p {
  color: var(--font-color) !important;
}
/* main.page-template-homepage-v3 section#Compromiso blockquote {
  font: 400 9rem/1em 'Robert', sans-serif !important;
  letter-spacing: -0.1rem;
  margin-bottom: 9.6rem;
} */
/* main.page-template-homepage-v3 section#Compromiso .setWrapper.isAlt.isV02 p {
  font: 400 2.1rem/1.5em 'Robert', sans-serif !important;
  margin-bottom: 2.4rem;
  letter-spacing: 0;
} */
main.page-template-homepage-v3 section#Compromiso p u {
  color: inherit !important;
}
.primary_header_2_wrapper { background: none !important; border-bottom: none !important; }

header .logoCont,
header nav .isBND.logoCont {
  width: 9.6rem;
  min-width: 9.6rem;
  aspect-ratio: 5.3333 / 1;
  display: inline-block;
}
/* header nav > ul {
  font: 400 22px / 1.5em 'Robert', sans-serif;
} */

main.page-template-homepage-v3 section:nth-of-type(11) h1,
main.page-template-homepage-v3 section:nth-of-type(11) h2 {
	color: var(--alts-color) !important;
}


@media (max-width: 640px) {
  main.page-template-homepage-v3 dl,
  main.page-template-homepage-v3 .isLMT,
  main.page-template-homepage-v3 .isAlt h1 {
    max-width: 100% !important;
  }

  /* Objetos section: styleScreen section:nth-of-type(7):before green band was 27.7rem at 2.777vw-era root; match px with x4 */
  main.page-template-homepage-v3 section:nth-of-type(7)::before {
    height: 110.8rem;
  }

  /* .isSRC: styleScreen caps at 54rem; styleMobile breaks out with neg margin + calc — do not use margin:auto here */
  main.page-template-homepage-v3 .isSRC {
    max-width: none !important;
    width: calc(100% + 12.8rem) !important;
    margin: 32rem -6.4rem !important;
    box-sizing: border-box;
  }

  main.page-template-homepage-v3 .isSRC > img {
    max-width: 100%;
    height: auto;
  }

  main.page-template-homepage-v3 .isSRC > img:last-of-type {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  nav a { color: var(--color-dark-green) !important; }
  nav .logoCont { display: none; }
  header nav > ul { font-size: 9rem; }
  header .setWrapper {
    width: calc(100% - 16.4rem);
    margin: 7rem 6rem 0 6rem;
    min-height: 10rem !important;
  }
  header nav {
    width: 100%;
    background: var(--font-color);
    color: var(--main-color);
    padding: 20rem 8rem 20rem 8rem;
    position: fixed;
    display: none;
    left: 0;
    top: 0;
  }
  .isBND { width: 29.6rem !important; }
  .setMenu .setIcon { width: 7rem; height: 7rem; }
  .setMenu .setIcon span { height: 1rem; }
  footer > .setWrapper > div > * ul,
  footer > .setWrapper > div > * small { font-size: 6rem !important; }
  footer > .setWrapper > div > * p { font-size: 6rem !important; }
  .home__footer-v2 > .setWrapper > div form *:not(input, textarea, .isInput) {
    font-size: 4rem !important;
    font-weight: 500;
  }
}