/* Pantalla Próximamente · Mily Glasses Vision. */
body.mg-coming-soon {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #f7f4ef;
  color: #171514;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

body.mg-coming-soon *,
body.mg-coming-soon *::before,
body.mg-coming-soon *::after { box-sizing: border-box; }

.mg-soon {
  position: relative;
  isolation: isolate;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.mg-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/glasses-pattern.svg");
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: 0.65;
  /* El SVG ya tiene opacidad .32: el trazo final ronda .21, y .16 sobre el texto. */
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 75%) 0 58%, #000 82%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 75%) 0 58%, #000 82%);
  pointer-events: none;
}

.mg-soon__header,
.mg-soon__main {
  width: min(100%, 1440px);
  margin-inline: auto;
}
.mg-soon__header {
  display: flex;
  align-items: center;
  min-height: 76px;
  padding-inline: clamp(24px, 5vw, 80px);
}
.mg-soon__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #171514;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.mg-soon__brand strong { font-weight: 700; }
.mg-soon__mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: #f5a3c2;
}

.mg-soon__main {
  display: flex;
  align-items: center;
  min-height: 0;
}
.mg-soon__content {
  width: 100%;
  max-width: 1050px;
  margin-inline: auto;
  padding: 24px clamp(24px, 5vw, 80px) 54px;
}
.mg-soon h1 {
  max-width: 15ch;
  margin: 0;
  color: #171514;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(3rem, min(5.6vw, 8vh), 5.7rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1.07;
  text-wrap: balance;
}
.mg-soon h1 em { color: #b85c7f; font-weight: 400; }
.mg-soon__description {
  max-width: 58ch;
  margin: clamp(16px, 2.5vh, 25px) 0 0;
  color: #5e5853;
  font-size: clamp(0.88rem, 1.15vw, 1rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.mg-soon__contact { margin-top: clamp(22px, 4vh, 40px); }
.mg-soon__contact-heading {
  margin: 0 0 12px;
  color: #171514;
  font-size: 0.9rem;
  font-weight: 700;
}
.mg-soon__form { max-width: 550px; }
.mg-soon__form-row { display: flex; gap: 8px; }
body.mg-coming-soon .mg-soon__form-row input[type="text"] {
  min-width: 0;
  flex: 1;
  height: 48px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid #6f6862;
  border-radius: 4px;
  background: #fff;
  color: #171514;
  box-shadow: none;
  font: inherit;
  font-size: 0.9rem;
}
body.mg-coming-soon .mg-soon__form-row input[type="text"]::placeholder { color: #5e5853; opacity: 1; }
body.mg-coming-soon .mg-soon__form-row input[aria-invalid="true"] { border-color: #a52f3d; }
body.mg-coming-soon .mg-soon__form-row button {
  min-height: 48px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid #171514;
  border-radius: 4px;
  background: #171514;
  color: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
body.mg-coming-soon .mg-soon__form-row button:hover { background: #3b3330; border-color: #3b3330; }
body.mg-coming-soon .mg-soon__form-row button:disabled { cursor: wait; opacity: 0.72; }
.mg-soon__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 550px;
  min-height: 24px;
  margin-top: 11px;
  color: #5e5853;
  font-size: 0.8rem;
  line-height: 1.45;
}
body.mg-coming-soon .mg-soon__consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 1px 0 0;
  accent-color: #171514;
}
.mg-soon__consent a { color: #8c3f5e; text-decoration: underline; text-underline-offset: 2px; }
body.mg-coming-soon .mg-soon__form-row input:focus-visible,
body.mg-coming-soon .mg-soon__form-row button:focus-visible,
body.mg-coming-soon .mg-soon__consent input:focus-visible,
body.mg-coming-soon .mg-soon__consent a:focus-visible {
  outline: 3px solid #8c3f5e;
  outline-offset: 3px;
}
.mg-soon__feedback {
  max-width: 550px;
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.mg-soon__feedback--success { color: #22573b; }
.mg-soon__feedback--error { color: #a52f3d; }
.mg-soon__feedback[hidden] { display: none; }
.mg-soon__visually-hidden,
.mg-soon__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La secuencia solo aparece tras guardar correctamente la solicitud. */
.mg-soon__journey {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(247 244 239 / 94%);
  opacity: 1;
  transition: opacity 320ms ease-in-out;
}
.mg-soon__journey[hidden] { display: none; }
.mg-soon__journey--leaving { opacity: 0; }
.mg-soon__journey-track { position: relative; width: min(360px, 90vw); height: 130px; }
.mg-soon__journey-truck {
  position: absolute;
  top: 29px;
  left: 20px;
  width: 180px;
  animation: mg-truck-exit 950ms cubic-bezier(.55, .05, .8, .55) 850ms both;
}
.mg-soon__journey-glasses {
  position: absolute;
  top: 43px;
  left: calc(100% - 85px);
  width: 80px;
  animation: mg-glasses-load 760ms ease-in-out 50ms both;
}
@keyframes mg-glasses-load {
  0% { opacity: 0; transform: translateX(24px) scale(.9); }
  18% { opacity: 1; }
  75% { opacity: 1; transform: translate(-98px, 8px) scale(.65); }
  100% { opacity: 0; transform: translate(-110px, 8px) scale(.3); }
}
@keyframes mg-truck-exit {
  0% { transform: translateX(0); }
  100% { transform: translateX(-110vw); }
}

.mg-soon__dialog {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #f7f4ef;
  color: #171514;
  box-shadow: 0 25px 70px rgb(23 21 20 / 20%);
  overflow-y: auto;
}
.mg-soon__dialog::backdrop { background: rgb(23 21 20 / 52%); }
.mg-soon__dialog[open] { animation: mg-dialog-enter 380ms cubic-bezier(.2, .7, .2, 1) both; }
.mg-soon__dialog[open]::backdrop { animation: mg-backdrop-enter 380ms ease-out both; }
@keyframes mg-dialog-enter {
  from { opacity: 0; transform: translateY(16px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mg-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mg-soon__dialog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 310px; }
.mg-soon__dialog-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
  object-position: center 28%;
}
.mg-soon__dialog-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 42px 34px 32px;
}
body.mg-coming-soon .mg-soon__dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #171514;
  font: inherit;
  cursor: pointer;
}
body.mg-coming-soon .mg-soon__dialog-close svg { width: 19px; height: 19px; }
body.mg-coming-soon .mg-soon__dialog-close:hover { background: #e4ded5; }
.mg-soon__dialog-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #f5a3c2;
  color: #171514;
}
.mg-soon__dialog-mark svg { width: 25px; height: 25px; }
.mg-soon__dialog h2 {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.12;
}
.mg-soon__dialog p { margin: 14px 0 24px; color: #5e5853; font-size: .9rem; line-height: 1.5; }
body.mg-coming-soon .mg-soon__dialog-action {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid #171514;
  border-radius: 4px;
  background: #171514;
  color: #fff;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}
body.mg-coming-soon .mg-soon__dialog-action:hover { background: #3b3330; }
body.mg-coming-soon .mg-soon__dialog button:focus-visible { outline: 3px solid #8c3f5e; outline-offset: 3px; }

@media (max-width: 900px) {
  .mg-soon::before { opacity: 0.65; -webkit-mask-image: none; mask-image: none; }
  .mg-soon__content { max-width: 780px; }
  .mg-soon h1 { font-size: clamp(2.8rem, min(7.5vw, 7.8vh), 5rem); }
}

@media (max-width: 560px) {
  .mg-soon__header { min-height: 56px; }
  .mg-soon__content { padding: 10px 24px 22px; }
  .mg-soon h1 { font-size: clamp(2.2rem, min(9vw, 6.5vh), 3.5rem); }
  .mg-soon__description { margin-top: 12px; font-size: 0.85rem; line-height: 1.5; }
  .mg-soon__contact { margin-top: 18px; }
  .mg-soon__form-row { display: grid; gap: 8px; }
  body.mg-coming-soon .mg-soon__form-row button { width: 100%; }
  .mg-soon__dialog-layout { display: block; min-height: 0; }
  .mg-soon__dialog-photo { height: 165px; min-height: 0; object-position: center 26%; }
  .mg-soon__dialog-content { padding: 25px 24px 26px; }
  .mg-soon__dialog-mark { margin-bottom: 12px; }
  .mg-soon__dialog p { margin: 10px 0 18px; }
}

/* En pantallas muy bajas, permitir acceso al formulario y al mensaje completo. */
@media (max-height: 650px) {
  body.mg-coming-soon { height: auto; min-height: 100dvh; overflow-y: auto; }
  .mg-soon { height: auto; min-height: 100dvh; overflow: visible; }
  .mg-soon__main { min-height: auto; }
  .mg-soon__content { padding-block: 18px 32px; }
}

@media (prefers-reduced-motion: no-preference) {
  .mg-soon__content { animation: mg-soon-enter 650ms ease-out both; }
  @keyframes mg-soon-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mg-soon__journey { transition: none; }
  .mg-soon__journey-truck,
  .mg-soon__journey-glasses,
  .mg-soon__dialog[open],
  .mg-soon__dialog[open]::backdrop { animation: none; }
}