@charset "UTF-8";
/* Media query breakpoints */
@font-face {
  font-family: "Cardo Bold";
  src: url("/themes/custom/historias/assets/fonts/cardo/Cardo-Bold.woff2") format("woff2"), url("/themes/custom/historias/assets/fonts/cardo/Cardo-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cardo Regular";
  src: url("/themes/custom/historias/assets/fonts/cardo/Cardo-Regular.woff2") format("woff2"), url("/themes/custom/historias/assets/fonts/cardo/Cardo-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cardo Italic";
  src: url("/themes/custom/historias/assets/fonts/cardo/Cardo-Italic.woff2") format("woff2"), url("/themes/custom/historias/assets/fonts/cardo/Cardo-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Display";
  src: url("/themes/custom/historias/assets/fonts/librecaslon/LibreCaslonDisplay-Regular.woff2") format("woff2"), url("/themes/custom/historias/assets/fonts/librecaslon/LibreCaslonDisplay-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "icomoon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/themes/custom/historias/assets/fonts/icomoon/icomoon.tff") format("tff"), url("/themes/custom/historias/assets/fonts/icomoon/icomoon.eot?") format("eot"), url("/themes/custom/historias/assets/fonts/icomoon/icomoon.woff") format("woff");
}
:root {
  --color-primary: #dc3437;
  --blue: hsla(240, 100%, 35.88%, 1);
  --black: #212121;
  --white-text: #e5e4dc;
  --white: hsla(0, 0%, 100%, 1);
  --gray-900: #212121;
  --gray-500: #9e9e9e;
  --gray-200: #e9e9e9;
  --success: hsla(166, 51%, 33%, 1);
  --alert: hsla(40, 100%, 56%, 1);
  --error: hsla(355, 82%, 46%, 1);
  --container: 1097px;
  --gutter-container: 0.9375rem;
  --font-title: "Libre Caslon Display", "BlinkMacSystemFont", -apple-system, "Roboto", "Lucida Sans";
  --font-bold: "Cardo Bold", sans-serif;
  --font-regular: "Cardo Regular", sans-serif;
  --font-italic: "Cardo Italic", sans-serif;
  --z-index-2xs: 1;
  --z-index-xs: 2;
  --z-index-sm: 3;
  --z-index-md: 4;
  --z-index-lg: 5;
  --z-index-xl: 5;
  --z-index-menu: 100;
  --z-index-modal: 200;
  --z-index-error: 300;
  --base-trans: 0.25s ease-in-out;
  --md-trans: 0.5s ease-in-out;
  --lg-trans: 1s ease-in-out;
  --hg-spacing: 4px;
  --bs-gutter-x: 2rem;
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-2lg: 36px;
  --spacing-xl: 40px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 72px;
  --spacing-5xl: 96px;
  --spacing-6xl: 112px;
  --spacing-7xl: 120px;
  --spacing-8xl: 160px;
}

@media (min-width: 992px) {
  :root {
    --gutter-container: 24px;
  }
}
/*
    - Name: "_generic.scss"
    - Description: "Add custom styles generic"
*/
* {
  font-display: swap;
}

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

html {
  color: var(--black);
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--color-primary);
  font-family: var(--font-regular);
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--background-700);
  cursor: default;
  transition: var(--base-trans);
}
body.scroll-off {
  overflow-y: hidden;
}

main {
  padding-top: 17vh !important;
  overflow-x: clip;
}

main,
.block-system-main-block {
  color: var(--black);
  transition: var(--base-trans);
}

.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
  position: absolute !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  white-space: nowrap !important;
}

img {
  max-width: 100%;
  height: auto;
}

.node__content {
  margin: 0 !important;
  font-size: 1rem;
}

.node--view-mode-teaser {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.field--type-entity-reference {
  margin-bottom: 0 !important;
}

[hidden] {
  display: none;
}

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

/* Containers */
.container {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  padding-left: var(--gutter-container);
  padding-right: var(--gutter-container);
}
@media (min-width: 768px) {
  .container {
    max-width: 90%;
    padding-left: var(--gutter-container);
    padding-right: var(--gutter-container);
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 100%;
    padding-right: 20vw !important;
    padding-left: 20vw !important;
  }
}

.container-header {
  margin: 0 auto;
  max-width: 90rem;
}
.container-header > div {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

h1,
h2 {
  font-family: var(--font-title);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  text-wrap: balance;
}

p.size-md {
  font-size: 1.125rem;
}
@media (min-width: 992px) {
  p.size-md {
    font-size: 1.5rem;
    letter-spacing: 0.01em !important;
  }
}
p.font-title {
  font-family: var(--font-title) !important;
}
p.font-text {
  font-family: var(--font-text) !important;
}

.text-white {
  color: var(--white);
}

@media (max-width: 1419px) {
  .hide-xl {
    display: none;
  }
}

/*
 * Scroll-triggered Animation System
 *
 * CSS transitions driven by IntersectionObserver class toggling.
 *
 * ARCHITECTURE NOTE — why perspective() in transform, not perspective property:
 *   The CSS `perspective` property on a parent creates a stacking context,
 *   which breaks `position: fixed` on all descendants (fixed becomes relative
 *   to the stacking context ancestor, not the viewport).
 *   Using perspective() inside `transform` applies the 3D depth to the element
 *   itself without creating any containing block for fixed-position descendants.
 *
 * Usage (HTML attributes):
 *   data-animate="flip-in"       → 3D flip, no wrapper needed
 *   data-animate="slide-up"      → Slide from below (parent needs .animate-clip-overflow)
 *   data-animate="slide-left-3d" → 3D perspective slide from left (image columns)
 *   data-animate-delay="200"  → Optional stagger delay in ms
 *
 * Parent utility (slide-up only):
 *   .animate-clip-overflow → overflow: hidden + display: block
 *
 * Prefers-reduced-motion: all transitions are automatically disabled.
 */
.animate-clip-overflow {
  display: block;
  overflow: hidden;
}

[data-animate=flip-in] {
  opacity: 0;
  transform: perspective(3000px) rotateX(-45deg) translateY(120px);
  will-change: transform, opacity;
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1s;
}

span[data-animate=flip-in],
a[data-animate=flip-in],
em[data-animate=flip-in],
strong[data-animate=flip-in] {
  display: inline-block;
}

[data-animate=flip-in].is-animated {
  opacity: 1;
  transform: perspective(3000px) rotateX(0deg) translateY(0px);
}

.animate-perspective-wrap [data-animate=slide-up] {
  transition-delay: 1.8s;
}

[data-animate=slide-up] {
  transform: translateY(124.762%);
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

span[data-animate=slide-up],
a[data-animate=slide-up] {
  display: inline-block;
}

[data-animate=slide-up].is-animated {
  transform: translateY(0%);
}

[data-animate=slide-up-clip] {
  display: block;
  overflow: hidden;
}
[data-animate=slide-up-clip] > * {
  display: block;
  transform: translateY(105%);
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate=slide-up-clip].is-animated > * {
  transform: translateY(0%);
}

[data-animate=slide-left-3d] {
  opacity: 0;
  transform: perspective(1200px) rotateX(-15deg) rotateY(-12deg) translate3d(-80px, 0px, 0px);
  transform-origin: 100% 100%;
  will-change: transform, opacity;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

[data-animate=slide-left-3d].is-animated {
  opacity: 1;
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translate3d(0px, 0px, 0px);
}

[data-animate=right-to-left-3d] {
  opacity: 0;
  transform: perspective(3000px) rotateX(-25deg) rotateY(15deg) translate3d(60px, -10px, 0px);
  transform-origin: 0 300px;
  will-change: transform, opacity;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

span[data-animate=right-to-left-3d],
a[data-animate=right-to-left-3d] {
  display: inline-block;
}

[data-animate=right-to-left-3d].is-animated {
  opacity: 1;
  transform: perspective(3000px) rotateX(0deg) rotateY(0deg) translate3d(0px, 0px, 0px);
}

[data-animate=left-to-right-3d] {
  opacity: 0;
  transform: perspective(3000px) rotateX(-25deg) rotateY(-15deg) translate3d(-60px, -10px, 0px);
  transform-origin: 100% 300px;
  will-change: transform, opacity;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

span[data-animate=left-to-right-3d],
a[data-animate=left-to-right-3d] {
  display: inline-block;
}

[data-animate=left-to-right-3d].is-animated {
  opacity: 1;
  transform: perspective(3000px) rotateX(0deg) rotateY(0deg) translate3d(0px, 0px, 0px);
}

[data-animate=fade-down],
[data-animate=fade-up],
[data-animate=fade-left],
[data-animate=fade-right] {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.7s ease;
}

[data-animate=fade-down] {
  transform: translateY(-30px);
}

[data-animate=fade-up] {
  transform: translateY(30px);
}

[data-animate=fade-left] {
  transform: translateX(-30px);
}

[data-animate=fade-right] {
  transform: translateX(30px);
}

[data-animate=fade-down].is-animated,
[data-animate=fade-up].is-animated,
[data-animate=fade-left].is-animated,
[data-animate=fade-right].is-animated {
  opacity: 1;
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/*# sourceMappingURL=style.css.map */