@font-face {
  font-family: "HWT Artz";
  src: url("../fonts/hwt-artz.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("../fonts/BarlowSemiCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("../fonts/Barlow-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow SC";
  src: url("../fonts/Barlow-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #1f75c0;
  --blue-dark: #1a63a4;
  --blue-light: #79c1d9;

  --blue-claim: #59a3e4;
  --ink: #272727;
  --ink-strong: #0d0d0d;
  --soft: #e8ecef;
  --line: #c4c4c4;
  --white: #fff;

  --font-display: "HWT Artz", "Barlow SC", system-ui, sans-serif;
  --font-body: "Barlow SC", system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 8.91vw, 154px);
  --gutter-mid: clamp(20px, 15.63vw, 270px);
  --gutter-narrow: clamp(20px, 17.25vw, 298px);
  --wrap: 1420px;
  --wrap-narrow: 1132px;

  --fs-h1: clamp(54px, 9.05vw, 156px);
  --fs-h2: clamp(35px, 4.63vw, 80px);
  --fs-h3: clamp(24px, 2.08vw, 36px);
  --fs-card: clamp(21px, 2.31vw, 40px);
  --fs-eyebrow: clamp(13px, 1.1vw, 19px);
  --fs-lead: clamp(18px, 1.39vw, 24px);
  --fs-copy: clamp(16px, 1.22vw, 21px);
  --fs-card-data: clamp(15px, 1.16vw, 20px);
  --fs-step: clamp(17px, 1.16vw, 20px);
  --fs-faq: clamp(16px, 1.16vw, 20px);
  --fs-small: clamp(16px, 1.16vw, 20px);
  --fs-mail: clamp(15px, 0.98vw, 17px);

  --header-stuck: clamp(52px, 4.57vw, 79px);

  --radius-card: clamp(8px, 0.81vw, 14px);
  --radius-btn: clamp(6px, 0.46vw, 8px);
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .modal__backdrop,
  .modal__dialog,
  .modal__close,
  .site-header,
  .brand__xtantos,
  .brand__cee,
  .brand__sep { transition: none; }
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-copy);
  line-height: 1.22;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.h-display {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 0.9;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.002em;
}
.h-display--center { text-align: center; }
.h-display--ink { color: var(--ink-strong); }

.h-sub {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.08;
  color: var(--ink);
}

.only-lg { display: none; }
@media (min-width: 1025px) { .only-lg { display: initial; } }

.only-sm { display: none; }
@media (max-width: 700px) { .only-sm { display: initial; } }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.eyebrow--light { color: var(--blue-light); }

.is-blue { color: var(--blue); }
.is-blue-light { color: var(--blue-light); }

.round-btn {
  display: grid;
  place-items: center;
  width: clamp(46px, 4vw, 69px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.round-btn svg { width: 44%; height: 44%; }
.round-btn:hover:not(:disabled) { background: var(--blue-dark); transform: translateY(-2px); }
.round-btn:disabled { opacity: 0.5; cursor: default; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  padding-block: clamp(14px, 1.47vw, 25px);
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}
.site-header.is-stuck,
.site-header.has-nav { background: var(--blue); }
.site-header.is-stuck { padding-block: clamp(11px, 0.96vw, 16.5px); }
.site-header.is-stuck .brand__xtantos { width: clamp(66px, 6.14vw, 106px); }
.site-header.is-stuck .brand__cee { width: clamp(63px, 5.85vw, 101px); }
.site-header.is-stuck .brand__sep { height: clamp(30px, 2.49vw, 43px); }
.brand__xtantos,
.brand__cee,
.brand__sep { transition: width 0.3s var(--ease), height 0.3s var(--ease); }

:where(#labor, #como-hacerlo, #contacto, #faq) { scroll-margin-top: calc(var(--header-stuck) + 16px); }
.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: clamp(14px, 1.85vw, 32px); }
.brand__xtantos { width: clamp(96px, 7.87vw, 136px); height: auto; }
.brand__cee { width: clamp(92px, 7.52vw, 130px); height: auto; }
.brand__sep {
  width: 1px;
  height: clamp(38px, 3.18vw, 55px);
  background: rgba(255, 255, 255, 0.5);
}

.menu-toggle {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.93vw, 16px);
  color: var(--white);
}
.menu-toggle__label {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.16vw, 20px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.menu-toggle__bars { display: grid; gap: 7px; width: clamp(44px, 3.07vw, 52px); }
.menu-toggle__bars i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: translateY(9px) rotate(14deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { transform: translateY(-9px) rotate(-14deg); }

.main-nav {
  background: transparent;
  margin-top: clamp(22px, 2.66vw, 46px);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.site-header.has-nav { padding-bottom: 0; }
.main-nav__list {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.24vw, 56px);
  padding-block: clamp(24px, 2.72vw, 47px) clamp(24px, 2.49vw, 43px);
  color: var(--white);
  font-size: clamp(17px, 1.16vw, 20px);
}
.main-nav a { padding-block: 4px; border-bottom: 1px solid transparent; }
.main-nav a:hover { border-bottom-color: currentColor; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1b120d;
}
.hero__media,
.hero__scrim { position: absolute; inset: 0; }

.hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero__scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)
      top / 100% clamp(150px, 15.51vw, 268px) no-repeat,
    rgba(0, 0, 0, 0.5);
}

.hero__inner {
  z-index: 2;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  padding-block: clamp(120px, 9.03vw, 156px) clamp(60px, 8.91vw, 154px);
}
.hero__copy { color: var(--white); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.002em;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.28);
}
.hero__title span { display: block; white-space: nowrap; }

.hero__text {
  margin-top: clamp(8px, 0.69vw, 12px);
  max-width: clamp(280px, 29.28vw, 506px);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
}

.hero__text strong { font-weight: 700; }
.hero__lead {
  margin-top: clamp(12px, 1.22vw, 21px);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.1;
  color: var(--blue-claim);
}

.play {
  position: absolute;
  z-index: 3;
  top: 50.3%;
  left: 72.83%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(90px, 10.36vw, 179px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--white);
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(32, 117, 192, 0) 80.29%,
    rgba(32, 117, 192, 0.5) 100%);
  transition: transform 0.3s var(--ease);
}
.play::before {
  content: "";
  position: absolute;
  inset: 7.96%;
  border-radius: 50%;
  background: var(--blue);
  transition: background 0.3s var(--ease);
}
.play svg {
  position: relative;
  width: 10.45%;
  height: 17.23%;
  translate: 4% 0;
}
.play:hover { transform: scale(1.05); }
.play:hover::before { background: var(--blue-dark); }

.labor { background: var(--soft); }
.como { background: var(--white); }

.labor {
  padding-top: clamp(64px, 11.05vw, 191px);
  padding-bottom: clamp(48px, 7.47vw, 129px);
}

.labor__inner {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 392fr) minmax(0, 988fr);
  gap: clamp(24px, 2.31vw, 40px);
  align-items: stretch;
}

.labor__intro {
  display: flex;
  flex-direction: column;

  padding-bottom: calc(clamp(46px, 4vw, 69px) + clamp(16px, 1.33vw, 23px));
}
.labor__intro .h-display { margin-top: clamp(12px, 1.04vw, 18px); }

.link-arrow {
  margin-top: auto;
  padding-top: clamp(32px, 4vw, 72px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 0.87vw, 15px);
  font-size: var(--fs-small);
  line-height: 1.3;
  max-width: clamp(240px, 22.68vw, 392px);
}
.link-arrow__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(38px, 2.78vw, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  transition: background 0.25s var(--ease);
}
.link-arrow__icon svg { width: 48%; height: 48%; }
.link-arrow__strong {
  color: var(--blue);
  font-weight: 500;
  -webkit-text-stroke: 0.25px currentColor;
}
.link-arrow:hover .link-arrow__icon { background: var(--blue-dark); }
.link-arrow:hover .link-arrow__strong { text-decoration: underline; }

.carousel {
  --card-gap: clamp(10px, 1.1vw, 19px);
  min-width: 0;
  margin-right: calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 100vw) / 2);
  overflow: hidden;
}
.carousel__track {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;

  scroll-snap-type: x proximity;

  scrollbar-width: none;
  padding-bottom: 1px;
}
.carousel__track::-webkit-scrollbar { display: none; }

.card {
  position: relative;
  flex: 0 0 clamp(240px, 30.15vw, 521px);
  aspect-ratio: 521 / 646;
  scroll-snap-align: start;
}
.card__inner {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #16283a;
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 32%),

    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg, rgba(32, 117, 192, 0) 58.9%, rgba(32, 117, 192, 1) 100%);
}
.card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(8px, 0.58vw, 10px) clamp(16px, 1.74vw, 30px) clamp(20px, 2.31vw, 40px);
  color: var(--white);
  text-align: center;
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.card__spark {
  display: block;
  margin: 0 auto clamp(5px, 0.46vw, 8px);
  width: clamp(18px, 1.48vw, 25.56px);
  height: auto;
  aspect-ratio: 25.5556 / 30;
  color: var(--blue);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}
.card__data { font-size: var(--fs-card-data); line-height: 1.2; }
.card__data strong { font-weight: 700; }

.carousel__nav {
  display: flex;
  gap: clamp(10px, 1.1vw, 19px);
  margin-top: clamp(16px, 1.33vw, 23px);
}

.como { padding-block: clamp(56px, 6.94vw, 120px) clamp(80px, 11.86vw, 205px); }

.como__head {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  text-align: center;
}
.como__head .h-display { margin-top: clamp(12px, 1.04vw, 18px); }
.como__lead {
  margin: clamp(24px, 2.2vw, 38px) auto 0;
  max-width: clamp(300px, 30.7vw, 530px);
  font-size: var(--fs-copy);
  line-height: 1.2;
}
.como__lead strong { font-weight: 700; }

.como__grid {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  margin-top: clamp(52px, 6.89vw, 119px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.como__aside {
  position: sticky;
  top: calc(var(--header-stuck) + 30px);
  justify-self: center;
  max-width: clamp(280px, 21.53vw, 372px);
}
.como__note {
  margin-top: clamp(14px, 1.22vw, 21px);
  max-width: clamp(260px, 21.53vw, 372px);
  font-size: var(--fs-copy);
  line-height: 1.2;
}

.steps { position: relative; padding-left: 0; }
.steps::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(-26px, -2.08vw, -36px);
  bottom: clamp(-28px, -2.2vw, -38px);
  width: 1px;
  background: #c6ccd2;
}
.steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.27vw, 22px);
  padding-left: clamp(12px, 1.27vw, 22px);
}
.steps__item + .steps__item { margin-top: clamp(24px, 3.65vw, 63px); }
.steps__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: -50% -50%;
  width: clamp(10px, 0.93vw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
}
.steps__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(56px, 5.32vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
}
.steps__icon svg { width: 56%; height: 56%; }
.steps__item p {
  font-size: var(--fs-step);
  line-height: 1.28;
  max-width: 20em;
}
.steps__item strong { font-weight: 700; }

.contacto {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 51.45vw, 1000px);
  overflow: hidden;
  background: #2a231c;
}
.contacto__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: clamp(14px, 1.16vw, 20px) clamp(16px, 1.62vw, 28px);
  background: url("../img/contacto-matrimonio.jpg") center right / cover no-repeat;
  background-attachment: fixed;
}

.ai-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.9em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: clamp(11px, 0.81vw, 14px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.ai-badge__ai { font-weight: 700; letter-spacing: 0.01em; }
.ai-badge__gen { font-weight: 400; letter-spacing: 0.14em; }
.contacto__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(28px, 2.49vw, 43px) 0;
}
.contacto__panel {
  width: clamp(300px, 38.37vw, 663px);
  margin-left: clamp(16px, 2.43vw, 42px);
  padding: clamp(40px, 9.78vw, 169px) clamp(20px, 2.31vw, 40px) clamp(44px, 10.88vw, 188px);
  border-radius: var(--radius-card);
  background: var(--blue);
  color: var(--white);
  text-align: center;
}
.contacto__panel .h-display { margin-top: clamp(10px, 0.81vw, 14px); color: var(--white); }
.contacto__text {
  margin: clamp(30px, 3.53vw, 61px) auto 0;
  max-width: clamp(260px, 22.3vw, 385px);
  font-size: var(--fs-copy);
  line-height: 1.2;
}
.contacto__actions {
  margin-top: clamp(16px, 1.16vw, 20px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 0.58vw, 10px);
}
.contacto__mail {
  margin-top: clamp(30px, 3.01vw, 52px);
  font-size: var(--fs-copy);
  line-height: 1.14;
}
.contacto__mail a { font-weight: 700; }
.contacto__mail a:hover { text-decoration: underline; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.81vw, 14px);
  min-height: clamp(44px, 3.24vw, 56px);
  padding: 0 clamp(12px, 0.93vw, 16px) 0 clamp(16px, 1.68vw, 29px);
  border-radius: var(--radius-btn);
  background: var(--blue-light);
  color: var(--ink);
  font-size: var(--fs-mail);
  font-weight: 700;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn__icon {
  display: grid;
  place-items: center;
  width: clamp(22px, 1.62vw, 28px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
}
.btn__icon svg { width: 58%; height: 58%; }
.btn:hover { background: #8fcfe3; transform: translateY(-2px); }

.faq {
  background: var(--white);
  padding-block: clamp(68px, 8.97vw, 155px) clamp(72px, 10.42vw, 180px);
}
.faq__inner {
  width: min(100% - 2 * var(--gutter-narrow), var(--wrap-narrow));
  margin-inline: auto;
}
.faq .h-display { color: var(--ink-strong); }

.accordion { margin-top: clamp(34px, 3.94vw, 68px); }
.accordion__item + .accordion__item { border-top: 1px solid var(--line); }
.accordion__item h3 { font: inherit; font-weight: 400; }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  padding: clamp(13px, 1.04vw, 18px) 6px;
  font-size: var(--fs-faq);
  line-height: 1.3;
  text-align: left;
  color: var(--ink-strong);
}

.accordion__trigger[aria-expanded="true"] { color: var(--blue); -webkit-text-stroke: 0.4px currentColor; }

.accordion__sign {
  position: relative;
  flex: 0 0 auto;
  width: clamp(16px, 1.16vw, 20px);
  height: clamp(16px, 1.16vw, 20px);
  color: var(--blue);
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.6px;
  background: currentColor;
  translate: 0 -50%;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}
.accordion__sign::after { transform: rotate(90deg); }
[aria-expanded="true"] .accordion__sign::after { transform: rotate(0deg); opacity: 0; }

.accordion__panel {
  padding: 0 6px clamp(16px, 1.39vw, 24px);
  max-width: 90ch;
}
.accordion__panel p { font-size: var(--fs-faq); line-height: 1.5; color: var(--ink); }
.accordion__panel p + p { margin-top: 0.8em; }

.accordion__list {
  margin-top: 0.8em;
  padding-left: 1.4em;
  list-style: disc;
}
.accordion__list li { font-size: var(--fs-faq); line-height: 1.5; color: var(--ink); }
.accordion__list li + li { margin-top: 0.4em; }
.accordion__list + p { margin-top: 0.8em; }

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

.site-footer {
  background: var(--blue);
  color: var(--white);
  padding-block: clamp(48px, 5.79vw, 100px) clamp(42px, 4.86vw, 84px);
  text-align: center;
}
.site-footer__inner {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 4.63vw, 80px);
  padding-bottom: clamp(32px, 3.24vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: left;
}

.newsletter { max-width: 483px; }
.newsletter__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.22;
}
.newsletter__row {
  display: flex;
  margin-top: 8px;
}
.newsletter__email {
  width: 300px;
  max-width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 19px;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink);
  background: var(--white);
}
.newsletter__email::placeholder { color: var(--ink); opacity: 0.6; font-size: 18px; }
.newsletter__submit {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 38px;
  border-radius: 4px;
  background: var(--blue-light);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  transform: translateX(-6px);
  transition: background 0.25s var(--ease);
}
.newsletter__submit:hover { background: #8fcfe3; }
.newsletter__trap { position: absolute; left: -5000px; }

.share { text-align: center; }
.share__title { font-size: var(--fs-copy); line-height: 1.22; }
.share__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.16vw, 20px);
  margin-top: clamp(14px, 1.16vw, 20px);
}
.share__ico { display: block; transition: transform 0.5s var(--ease); }
.share__ico img { width: auto; height: clamp(28px, 2.31vw, 40px); }
.share__ico:hover { transform: scale(1.12); }
.share__cta {
  display: inline-block;
  margin-top: clamp(16px, 1.39vw, 24px);
  padding: clamp(11px, 0.81vw, 14px) clamp(24px, 2.2vw, 38px);
  border-radius: 50px;
  background: var(--blue-light);
  color: var(--ink);
  font-size: var(--fs-mail);
  font-weight: 700;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.share__cta:hover { background: #8fcfe3; transform: translateY(-2px); }

.site-footer__bottom {
  padding-top: clamp(36px, 4.05vw, 70px);
  text-align: center;
}

.site-footer__legal {
  margin-top: clamp(20px, 1.85vw, 32px);
  font-size: var(--fs-mail);
  line-height: 1.12;
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__rrss {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}
.rrss__ico {
  display: grid;
  place-items: center;
  width: clamp(40px, 2.72vw, 47px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink-strong);
}
.rrss__ico img {
  width: auto;
  height: clamp(15px, 1.16vw, 20px);
  transition: transform 0.5s var(--ease);
}
.rrss__ico:hover img { transform: scale(1.2); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.modal[hidden] { display: none; }
.modal.is-open { pointer-events: auto; }

.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s ease 0.1s;
}
.modal.is-open .modal__backdrop { opacity: 1; transition-delay: 0s; }

.modal__dialog {
  position: relative;
  width: 80%;
  max-width: calc((100vh - 8rem) * 16 / 9);
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1),
              transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.modal.is-open .modal__dialog {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.12s;
}
.modal__frame {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #101820;
  overflow: hidden;
}
.modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.modal__placeholder { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-copy); }
.modal__close {
  position: fixed;
  top: 2rem;
  right: 3rem;
  z-index: 1200;
  display: grid;
  place-items: center;
  width: max(4.675rem, calc(32px + 2vw));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s var(--ease);
}
.modal.is-open .modal__close { opacity: 1; transition-delay: 0.2s; }
.modal__close svg { width: 32%; height: 32%; }
.modal__close:hover { background: var(--blue-dark); }

body.is-locked { overflow: hidden; }

.daycard {
  --daycard-aire: 15px;

  position: fixed;
  z-index: 18;
  right: var(--daycard-aire);
  bottom: var(--daycard-aire);
  width: min(400px, calc(100% - 2 * var(--daycard-aire)));
  display: grid;
  grid-template-columns: clamp(104px, 8.68vw, 150px) 1fr;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transform: translateY(calc(100% + var(--daycard-aire)));
  visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.daycard.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.4s var(--ease), visibility 0s;
}

.daycard__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(112px, 8.68vw, 150px);

  border-radius: var(--radius-card) 0 0 var(--radius-card);
  object-fit: cover;
  object-position: center;
}

.daycard__body {

  padding: clamp(14px, 1.16vw, 20px) clamp(40px, 2.9vw, 50px)
           clamp(14px, 1.16vw, 20px) clamp(14px, 1.16vw, 20px);
  align-self: center;
}
.daycard__date {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(13px, 0.93vw, 16px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--blue);
}
.daycard__icon {
  width: 1em;
  height: 1.17em;
  flex: none;
  color: var(--blue);
}
.daycard__text {
  margin: 0.4em 0 0;
  font-size: clamp(15px, 1.04vw, 18px);
  line-height: 1.2;
  color: var(--ink);
}

.daycard__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.daycard__close svg { width: 15px; height: 15px; }
.daycard__close:hover { background: var(--soft); color: var(--blue); }
.daycard__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .daycard,
  .daycard__close { transition: none; }
}

@media (max-width: 1024px) {
  .site-footer__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .newsletter { max-width: 100%; width: 100%; }
  .newsletter__row { justify-content: center; }
  .site-footer__rrss { justify-content: center; flex-wrap: wrap; }

  .hero__media { object-position: 62% center; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 30%),
      linear-gradient(90deg, rgba(8, 10, 12, 0.52) 0%, rgba(8, 10, 12, 0.18) 55%, rgba(8, 10, 12, 0) 82%),
      rgba(0, 0, 0, 0.5);
  }

  .labor__inner { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
  .link-arrow { margin-top: clamp(24px, 3vw, 36px); padding-top: 0; }
  .card { flex-basis: clamp(240px, 44vw, 420px); }

  .como__grid { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 64px); }
  .como__aside { justify-self: start; max-width: 34em; }
  .steps { margin-left: clamp(8px, 1.5vw, 16px); }

  .contacto { align-items: stretch; }
  .contacto__panel { width: min(100% - 2 * var(--gutter), 560px); margin-inline: auto; }

  .contacto__inner { padding-bottom: clamp(60px, 7vw, 80px); }
  .contacto__media { background-position: 72% center; }
}

@media (max-width: 700px) {
  :root {

    --gutter: 16px;
    --gutter-mid: 16px;
    --gutter-narrow: 16px;

    --fs-h1: clamp(56px, 21.11vw, 76px);
    --fs-h2: clamp(32px, 11.11vw, 40px);
    --fs-h3: 18px;
    --fs-card: 32px;
    --fs-card-data: 18px;

    --fs-eyebrow: 16px;
    --fs-lead: 20px;
    --fs-copy: 18px;
    --fs-step: 18px;
    --fs-faq: 18px;
    --fs-small: 20px;
    --fs-mail: 18px;
  }

  .site-header { padding-top: 14px; }
  .site-header__inner { width: calc(100% - 32px); }
  .main-nav__list { width: calc(100% - 32px); flex-direction: column; gap: 12px; }
  .brand { gap: clamp(12px, 4.44vw, 16px); }
  .brand__xtantos { width: clamp(74px, 26.11vw, 94px); }
  .brand__cee { width: clamp(71px, 25vw, 90px); }
  .brand__sep { height: clamp(39px, 13.89vw, 50px); }
  .menu-toggle { gap: 8px; }
  .menu-toggle__label { font-size: 16px; }

  .hero__inner {
    padding-block: 96px 40px;
    text-align: center;
  }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)
        top / 100% 175px no-repeat,
      rgba(0, 0, 0, 0.2);
  }
  .hero__media { object-position: 62% center; }
  .hero__text,
  .hero__lead { margin-inline: auto; }
  .hero__text { margin-top: 19px; max-width: min(286px, 100%); }
  .hero__lead { margin-top: 9px; max-width: min(266px, 100%); }

  .play {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    width: 85px;
    margin: 26px auto 0;
  }

  .labor { padding-top: 53px; padding-bottom: 64px; }
  .labor__inner { gap: 0; }
  .labor__intro { display: contents; }
  .labor__intro .h-display { margin-top: 15px; }

  .carousel { margin-right: 0; margin-top: 30px; }
  .card { flex-basis: 100%; }
  .card__body { padding: 7px 20px 22px; }
  .card__spark { width: 16.7px; margin-bottom: 5px; }
  .carousel__nav { justify-content: center; gap: 13px; margin-top: 15px; }
  .round-btn { width: 57px; }

  .link-arrow { order: 1; max-width: 100%; margin-top: 57px; padding-top: 0; gap: 13px; }
  .link-arrow__icon { width: 48px; }

  .como { padding-block: 68px 77px; }
  .como__head .h-display { margin-top: 15px; }
  .como__lead { margin-top: 20px; max-width: 100%; }
  .como__grid { margin-top: 70px; gap: 60px; }
  .como__aside {
    position: static;
    justify-self: stretch;
    max-width: 100%;
    text-align: center;
  }
  .como__note { margin-top: 13px; max-width: 100%; font-size: 18px; }

  .steps { margin-left: 9px; }
  .steps::before { top: -33px; bottom: -49px; }
  .steps__item { gap: 14px; padding-left: 12px; }
  .steps__item + .steps__item { margin-top: 35px; }
  .steps__item::before { width: 14px; }
  .steps__icon { width: 62px; }

  .contacto {
    display: block;
    min-height: 0;
    background: var(--white);
  }
  .contacto__media {
    position: relative;
    inset: auto;
    height: 539px;
    background-attachment: scroll;
    background-position: 72% center;

    padding: 14px 14px calc(215px + 14px);
  }
  .contacto__inner { padding: 0; margin-top: -215px; }
  .contacto__panel {
    width: calc(100% - 32px);
    margin-inline: auto;
    padding: 44px 20px 72px;
  }
  .contacto__panel .h-display { margin-top: 15px; }
  .contacto__text { margin-top: 24px; max-width: 100%; font-size: 18px; }
  .contacto__actions {
    margin-top: 44px;
    flex-direction: column;
    align-items: center;
    gap: 11px;
  }
  .btn { min-height: 61px; }
  .contacto__mail { margin-top: 30px; font-size: 18px; }

  .faq { padding-block: 80px 60px; }
  .faq .h-display { font-size: min(40px, 10.8vw); }
  .accordion { margin-top: 53px; }
  .accordion__trigger { padding-block: 15px; }

  .daycard {
    --daycard-aire: 10px;
    grid-template-columns: 96px 1fr;
  }
  .daycard__date { font-size: 16px; }
  .daycard__text { font-size: 18px; }

  .site-footer { padding-block: 56px 56px; }
  .site-footer__legal { margin-top: 24px; }
  .share__title { font-size: 18px; }
  .share__cta { width: 100%; max-width: 300px; }

  .modal__dialog { width: 95%; }
  .modal__close {
    position: absolute;
    top: auto;
    right: 0;
    bottom: calc(100% + 12px);
    width: max(4rem, calc(32px + 2vw));
  }
}