/* Our own override, loaded after Squarespace's vendor CSS.
 *
 * Squarespace's site.css hides images/content behind classes like
 * .background-image-fx, .lazy-load, .sqs-image-content, etc. and expects
 * its own JS runtime to add a ".loaded" class once the image has finished
 * loading (a scroll/load animation system). That JS depends on
 * Static.SQUARESPACE_CONTEXT, which we deliberately don't ship (see
 * docs/informe-migracion.md) — so it throws on init and never adds
 * ".loaded", leaving every image permanently invisible.
 *
 * Keep content visible without the CMS runtime. Our independent animations
 * below use their own classes and respect reduced-motion preferences.
 */
.background-image-fx,
.lazy-load,
.sqs-image-content,
.grid-image-cover,
.grid-image-hover,
.custom-fallback-image,
.enable-on-first-image-load {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Divider paths are computed by Squarespace JS. Empty clip paths otherwise
 * erase the entire section background (including Industries we serve). */
.page-section > .section-border { clip-path: none !important; }
.page-section.yoy-divider-ready > .section-border { clip-path: var(--yoy-divider-clip) !important; }
.section-divider-display { display: block; visibility: hidden; }
.page-section.yoy-divider-ready > .section-divider-display { visibility: visible; }
.page-section.yoy-after-divider > .section-border {
  top: calc(-1 * var(--yoy-previous-divider-height, 0px)) !important;
}

.yoy-generative-host {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}
.yoy-generative-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.yoy-generative-contours {
  image-rendering: auto;
}

.summary-thumbnail-container img,
.user-items-list-carousel__slides,
.sqs-block-summary-v2 .summary-item {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Native grid replaces the summary block's JS positioning. */
.sqs-block-summary-v2 .summary-item-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  height: auto !important;
}
.sqs-block-summary-v2 .summary-item {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
}
.sqs-block-summary-v2 .summary-thumbnail {
  aspect-ratio: 4 / 3;
  padding-bottom: 0 !important;
}
.sqs-block-summary-v2 .summary-thumbnail img {
  width: 100%; height: 100%; object-fit: cover;
}
.sqs-block-summary-v2 .summary-title { margin-top: 16px; }

/* Scroll snapping keeps all logos/testimonials accessible without the CMS. */
.user-items-list-carousel__slides {
  display: grid !important;
  grid-auto-flow: column;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 48px) / 3) !important;
  gap: 24px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  transform: none !important;
  padding: 0 4vw 16px !important;
}
.user-items-list-carousel__slide {
  grid-area: auto !important;
  position: relative !important;
  width: auto !important;
  transform: none !important;
  scroll-snap-align: start;
}
.user-items-list-carousel__media-container { width: 100% !important; }
.user-items-list-carousel__media { object-fit: contain; max-height: 260px; }
.sqs-native-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
.sqs-native-video { aspect-ratio: var(--video-aspect, 16 / 9); }

.header-menu { background: #111; color: white; }
.header-menu a { color: inherit; }
.header-menu-controls,
.header-menu-controls-control { position: static !important; transform: none !important; }
.header-menu-nav-folder[hidden] { display: none !important; }
.header-menu-nav-folder.yoy-menu-active { display: block !important; transform: none !important; }
.header-menu-nav-folder.yoy-menu-active > .header-menu-nav-folder-content {
  opacity: 1;
  padding-top: calc(var(--header-height, 80px) + 24px);
}

/* These three pages were manually curated before this migration and do not
 * use Fluid Engine. Give their reviewed content a responsive document layout. */
main:is(.yoy-page-contact, .yoy-page-people, .yoy-page-careers) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  width: min(1100px, 92vw);
  margin-inline: auto;
  /* Top padding follows the header instead of a fixed 4rem: the header grows
   * to about 152px at tablet widths, where 4rem left the «¡Hablemos!» heading
   * 56px underneath it. These three pages have no .page-section, so the rule
   * further down does not reach them. */
  padding-block: calc(var(--header-height, 90px) + 1.5rem) 4rem;
}
main:is(.yoy-page-contact, .yoy-page-people, .yoy-page-careers) > * { grid-column: 1 / -1; min-width: 0; }
main:is(.yoy-page-contact, .yoy-page-people, .yoy-page-careers) img { display: block; width: 100%; height: auto; border-radius: 16px; }
.yoy-page-people > .sqs-html-content:has(img) { grid-column: span 4; }
.yoy-page-people > .sqs-html-content img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 600px) {
  .yoy-page-people > .sqs-html-content:has(img) { grid-column: span 12; }
}

@media (max-width: 1000px) {
  .sqs-block-summary-v2 .summary-item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-items-list-carousel__slides { grid-auto-columns: calc((100% - 24px) / 2) !important; }
}
@media (max-width: 600px) {
  .sqs-block-summary-v2 .summary-item-list { grid-template-columns: minmax(0, 1fr); }
  .user-items-list-carousel__slides { grid-auto-columns: 88% !important; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .yoy-parallax-frame { overflow: hidden; }
  img.yoy-parallax-image { transform: var(--yoy-image-transform, none) !important; }
  .yoy-background-effect-frame { overflow: hidden; }
  img.yoy-background-effect-image { transform: var(--yoy-background-transform, none) !important; }
  main .yoy-reveal-pending { opacity: 0 !important; translate: 0 56px; }
  main .yoy-reveal { transition: opacity 1000ms ease, translate 1000ms cubic-bezier(.2,.65,.3,1); }
}

/* Partner logos: six-ish compact marks across desktop, with a seamless loop. */
.yoy-logo-carousel .user-items-list-carousel__slides {
  grid-auto-columns: clamp(150px, 15vw, 240px) !important;
  gap: clamp(24px, 4vw, 64px) !important;
  padding: 0 !important;
  scroll-snap-type: none;
  scroll-behavior: auto !important;
  scrollbar-width: none;
}
.yoy-logo-carousel .user-items-list-carousel__slides::-webkit-scrollbar { display: none; }
.yoy-logo-carousel .user-items-list-carousel__slide { padding: 0 !important; }
.yoy-logo-carousel .user-items-list-carousel__media-container { margin: 0 !important; }
.yoy-logo-carousel .user-items-list-carousel__media-inner {
  height: 150px !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
}
.yoy-logo-carousel .user-items-list-carousel__media {
  position: static !important;
  width: 150px !important;
  height: 150px !important;
  max-width: 100%;
  object-fit: contain !important;
}
.yoy-logo-carousel .list-item-content { display: none; }
.yoy-logo-pause {
  display: block;
  margin: 16px auto 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (max-width: 600px) {
  .yoy-logo-carousel .user-items-list-carousel__media-inner { height: 115px !important; }
  .yoy-logo-carousel .user-items-list-carousel__media { width: 115px !important; height: 115px !important; }
}
@media (prefers-reduced-motion: reduce) { .yoy-logo-pause { display: none; } }

/* Explicit button tokens replace the missing Squarespace runtime styles. */
body :is(.sqs-block-button-element, .header-actions-action--cta a, .header-menu-cta a, .course-item__course-action-button) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: Montserrat, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center;
  border: 2px solid #4098c8 !important;
  border-radius: 999px !important;
  padding: 22px 32px !important;
  min-height: 64px;
}
body :is(.sqs-button-element--primary, .header-actions-action--cta a, .header-menu-cta a) {
  background: #4098c8 !important;
  color: #fff !important;
}
body .sqs-block-button-element.sqs-button-element--secondary {
  background: transparent !important;
  color: #4098c8 !important;
}
body :is(.header-actions-action--cta a, .header-menu-cta a, .course-item__course-action-button) {
  padding: 14px 20px !important;
  min-height: 50px;
}
body :is(.sqs-block-button-element, .header-actions-action--cta a, .header-menu-cta a, .course-item__course-action-button):hover { filter: brightness(1.12); }
.course-item__course-action-button {
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.course-item__course-action-button-text { display: none !important; }
.course-item__course-action-button-text[data-cta-action="start"] { display: inline !important; }
.header-nav-item--active > .header-nav-folder-title .header-nav-folder-title-text,
.header-nav-item--active > a,
.header-menu-nav-item--active .header-menu-nav-item-content,
.header-nav-folder-item a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 7px;
}

/* Section background video (backgroundMode "video", see section.njk). */
.section-background video.yoy-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image/video blocks created in yoysimulators-cms fill their grid box
   exactly; how the media sits inside it (crop vs. letterbox) comes from the
   block's "Ajuste" (block.data.fit -> object-fit, see src/_lib/sectionLayout.js). */
.sqs-block-content.yoy-media-fill,
.sqs-block:has(> .sqs-block-content > .yoy-media-fill) > .sqs-block-content { height: 100%; width: 100%; }
.sqs-block:has(.yoy-media-fill) { height: 100%; }
.yoy-media-fill,
.yoy-media-fill .sqs-native-video { position: relative; width: 100%; height: 100%; }
.yoy-media-fill img,
.yoy-media-fill video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.yoy-media-fill video { background: #000; }

/* 404 pages (src/404.njk). */
.yoy-not-found { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 120px 24px 80px; text-align: center; }
.yoy-not-found__inner { max-width: 640px; }
.yoy-not-found h1 { margin: 0 0 16px; }
.yoy-not-found ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; }
.yoy-not-found a { text-decoration: underline; }

/* YouTube block facade (blocks/video.njk, source "youtube"): thumbnail +
   play button; site.js swaps in the youtube-nocookie iframe on click. */
.yoy-youtube { position: relative; width: 100%; height: 100%; aspect-ratio: var(--video-aspect, 16 / 9); background: #000; overflow: hidden; }
.yoy-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yoy-youtube__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.yoy-youtube__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yoy-youtube__icon { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(23, 23, 23, 0.8); transition: background 0.2s; }
.yoy-youtube__icon::after { content: ''; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yoy-youtube__play:hover .yoy-youtube__icon, .yoy-youtube__play:focus-visible .yoy-youtube__icon { background: #ff0000; }
.yoy-youtube__play:focus-visible { outline: 3px solid #00bfa6; outline-offset: -3px; }

/* The fixed header overlays the first section, and Squarespace compensated for
 * it with
 *   main .sections:first-child .page-section:first-child:not(.content-collection)… {
 *     padding-top: var(--header-height)
 *   }
 * That rule is still in the vendored stylesheet but can never match us: the
 * original nested the sections inside main > article.page-regions > .region >
 * .sections, and this migration flattened all of it, so the sections are direct
 * children of main. The variable was being computed correctly all along by
 * header-space.js — there was simply nothing left to consume it, and the first
 * line of every top-aligned page rendered under the header. Worst on tablets:
 * 109px of the Jumbo Drill title was covered at 768px.
 *
 * Same rule, rewritten for the structure we actually have. The blog's own
 * first-section padding is applied by site.js and is excluded here, as in the
 * original. */
#page > section.page-section:first-of-type:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
  padding-top: var(--header-height, 90px);
}

/* Its companion: an inset background must not be pushed down with the content. */
#page > section.page-section:first-of-type.background-width--inset.layout-engine-section.has-background .section-background {
  top: var(--header-height, 90px);
}

/* Holding the logo triggers the hidden seasonal animation (halloween.js). iOS
 * would otherwise open its link preview on that same long press. */
#header a:has(img), #header a img { -webkit-touch-callout: none; }