/* Mera Hero — Scoped under .mera-hero
   Origen: mera-travel-min/propuesta/pages/index.html, sección comp-lvykn6ec.
   Tokens redeclarados bajo la clase raíz (paso 4c de la skill). */

/* ── Fonts copiadas del clon Wix ─────────────────────────────────── */

/* wf_0239b14f25af467aa181840e5 = Montserrat Bold (eyebrow)
   src literal extraído de /tmp/lvykn6ec-css.txt líneas 14-20. */
@font-face {
  font-family: 'wf_0239b14f25af467aa181840e5';
  src: url('../fonts/wf_0239b14f25af467aa181840e5.woff2') format('woff2'),
       url('../fonts/wf_0239b14f25af467aa181840e5.woff')  format('woff');
  font-display: swap;
}

/* wf_fe93bc464ef94312984582f15 = Helvetica Neue LT Std 57 Condensed Oblique (body)
   src literal extraído de /tmp/lvykn6ec-css.txt líneas 114-120:
     file-d5523dd4.woff2 / file-0277630c.woff / file-eb5c3ac3.ttf
   Estos archivos existen en mera-travel-min/propuesta/assets/fonts/. */
@font-face {
  font-family: 'wf_fe93bc464ef94312984582f15';
  src: url('../fonts/wf_fe93bc464ef94312984582f15.woff2') format('woff2'),
       url('../fonts/wf_fe93bc464ef94312984582f15.woff')  format('woff');
  font-display: swap;
}

/* aether = Aether (latin) — titular navy 74px.
   Sólo necesitamos los subsets latin (U+0020..U+2212), que cubren todo
   el titular "Viajar no es / solo ir a un / destino." Los demás subsets
   (math/symbols/other) son para glyphs no presentes en este hero. */
@font-face {
  font-family: 'aether';
  src: url('../fonts/aether.latin-c1bf667d.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'aether';
  src: url('../fonts/aether.latin-c2bc71f4.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────────── */

.mera-hero {
  /* Colores */
  --mera-bg: transparent;
  --mera-color-eyebrow: #1FB9EB;
  --mera-color-title:   #152A42;
  /* color_40 del CSS Wix (regla `.color_40{color:rgb(var(--color_40))}`)
     y `--color_40:89,89,89` definido en index.html línea ~12556. */
  --mera-color-body:    rgb(89, 89, 89);
  /* Botón: el CSS Wix usa rgba(var(--color_17,color_17),1) como fondo base
     y `--shc-mutated-brightness:16,93,118` para oscurecer. Sin motor shc(),
     usamos color_17 (200,224,254) como fallback visible. */
  --mera-color-button-bg:      rgb(200, 224, 254);
  --mera-color-button-bg-hover: rgb(184, 131, 136);
  --mera-color-button-fg:      #FFFFFF;

  /* Familias */
  --mera-font-eyebrow: 'wf_0239b14f25af467aa181840e5', 'Montserrat', 'Helvetica Neue', sans-serif;
  --mera-font-body:    'wf_fe93bc464ef94312984582f15', 'Helvetica Neue', 'Helvetica', sans-serif;
  --mera-font-title:   'aether', 'Georgia', serif;
  --mera-font-button:  var(--mera-font-eyebrow);

  /* Geometría del clon: ancho útil 980px, grid 4 filas × 1 columna. */
  --mera-grid-min-width: 980px;
  --mera-image-width: 789px;
  --mera-image-height: 526px;

  /* Réplica literal del CSS extraído. */
  left: 0;
  margin-left: 0;
  width: 100%;
  min-width: var(--mera-grid-min-width);
  position: relative;
  box-sizing: border-box;
}

/* ── Layout grid: réplica del HTML ────────────────────────────────── */

.mera-hero__bg {
  /* capa decorativa Wix, vacía por defecto */
  display: none;
}

.mera-hero__content {
  position: static;
  display: grid;
  width: 100%;
  min-height: auto;
  grid-template-rows: repeat(3, min-content) 1fr;
  grid-template-columns: 100%;
  position: relative;
}

/* Imagen: cubre las 4 filas, anclada como el original. */
.mera-hero__media {
  position: relative;
  margin: 68px 0 0 calc((100% - var(--mera-grid-min-width)) * 0.5);
  left: 339px;
  grid-area: 1 / 1 / 5 / 2;
  justify-self: start;
  align-self: start;
  max-width: calc(100% - 339px);
}
.mera-hero__media-inner {
  display: block;
  line-height: 0;
}
.mera-hero__img {
  display: block;
  width: var(--mera-image-width);
  max-width: 100%;
  height: auto;
  aspect-ratio: 789 / 526; /* 3:2, fijada para layout estable (CLS). */
  object-fit: cover;
}

/* Cuerpo: grid-area 2, margen inferior 37px, left -3px. */
.mera-hero__body-wrap {
  position: relative;
  margin: 0 0 37px calc((100% - var(--mera-grid-min-width)) * 0.5);
  left: -3px;
  grid-area: 2 / 1 / 3 / 2;
  justify-self: start;
  align-self: start;
  max-width: calc(var(--mera-grid-min-width) - 3px);
}
.mera-hero__body {
  font-family: var(--mera-font-body);
  font-size: 18px;
  line-height: 1.4em;
  font-weight: normal;
  color: var(--mera-color-body);
  margin: 0;
}

/* Botón: grid-area 3, margen inferior 10px, left 8px.
   En el clon Wix el botón mide 142px × 40px con border-radius 10px (de
   `--rd:10px 10px 10px 10px` en el CSS extraído). */
.mera-hero__button-wrap {
  position: relative;
  margin: 0 0 10px calc((100% - var(--mera-grid-min-width)) * 0.5);
  left: 8px;
  grid-area: 3 / 1 / 4 / 2;
  justify-self: start;
  align-self: start;
  max-width: calc(var(--mera-grid-min-width) - 8px);
}
.mera-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  height: 40px;
  padding: 0 16px;
  background: var(--mera-color-button-bg);
  color: var(--mera-color-button-fg);
  font-family: var(--mera-font-button);
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.4s ease 0s, border-color 0.4s ease 0s;
  box-sizing: border-box;
}
.mera-hero__button:hover,
.mera-hero__button:focus-visible {
  background: var(--mera-color-button-bg-hover);
  outline: none;
}

/* Eyebrow + titular: grid-area 1, margen 96px 0 11px, left -13px. */
.mera-hero__headline {
  position: relative;
  margin: 96px 0 11px calc((100% - var(--mera-grid-min-width)) * 0.5);
  left: -13px;
  grid-area: 1 / 1 / 2 / 2;
  justify-self: start;
  align-self: start;
  max-width: calc(var(--mera-grid-min-width) - 13px);
}
.mera-hero__eyebrow {
  font-family: var(--mera-font-eyebrow);
  font-size: 16px;
  line-height: 1.4em;
  font-weight: normal;
  color: var(--mera-color-eyebrow);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.mera-hero__title {
  font-family: var(--mera-font-title);
  font-size: 74px;
  line-height: 0.9em;
  font-weight: normal;
  color: var(--mera-color-title);
  margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */

/* A partir de 1023px: rompe el grid a 1 columna vertical. La imagen se
   centra; cuerpo, botón y titular se apilan. */
@media (max-width: 1023px) {
  .mera-hero {
    --mera-grid-min-width: 100%;
    min-width: 0;
  }
  .mera-hero__media,
  .mera-hero__body-wrap,
  .mera-hero__button-wrap,
  .mera-hero__headline {
    left: 0;
    margin-left: 0;
    max-width: 100%;
  }
  .mera-hero__media {
    left: 50%;
    transform: translateX(-50%);
    margin-top: 32px;
  }
  .mera-hero__content {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 100%;
    gap: 24px;
    padding: 24px;
  }
  .mera-hero__headline {
    grid-area: 1 / 1 / 2 / 2;
  }
  .mera-hero__body-wrap {
    grid-area: 2 / 1 / 3 / 2;
  }
  .mera-hero__button-wrap {
    grid-area: 3 / 1 / 4 / 2;
  }
  .mera-hero__media {
    grid-area: 4 / 1 / 5 / 2;
  }
  .mera-hero__title { font-size: 56px; }
}

/* Móviles pequeños. */
@media (max-width: 600px) {
  .mera-hero__title  { font-size: 42px; line-height: 0.95em; }
  .mera-hero__body   { font-size: 16px; }
  .mera-hero__eyebrow { font-size: 14px; }
  .mera-hero__button { min-width: 100%; }
  .mera-hero__content { padding: 16px; gap: 16px; }
}