/* ========== Variables ========== */
:root {
  --pink-100: #fff0f6;
  --pink-200: #ffd6e8;
  --pink-300: #ffb3d1;
  --pink-400: #ff85b3;
  --pink-500: #ff4f93;
  --red-bow: #e8114e;
  --yellow: #ffe066;
  --blue: #7cc6fe;
  --white: #ffffff;
  --text: #7a1f47;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  min-height: 100%;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--text);
  /* mismos lunares que la invitación: se asoman al deslizar la intro */
  background:
    radial-gradient(circle, rgba(255,179,209,.35) 5px, transparent 6px) 0 0 / 40px 40px,
    radial-gradient(circle, rgba(255,179,209,.35) 5px, transparent 6px) 20px 20px / 40px 40px,
    var(--pink-100);
}
/* Mientras se ve la intro no hay scroll */
body.is-intro { height: 100%; overflow: hidden; }

/* ========== INTRO ========== */
.intro {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 20;
  overflow: hidden;
  touch-action: none; /* el dedo arrastra la intro, no la página */
  transform-origin: 50% 100%;
  /* Fondo rosa con lunares, muy Hello Kitty */
  background:
    radial-gradient(circle, rgba(255,255,255,.75) 6px, transparent 7px) 0 0 / 46px 46px,
    radial-gradient(circle, rgba(255,255,255,.75) 6px, transparent 7px) 23px 23px / 46px 46px,
    linear-gradient(160deg, var(--pink-200) 0%, var(--pink-300) 55%, #ffc4dc 100%);
}

/* Elementos flotantes del fondo */
.floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.floater {
  position: absolute;
  bottom: -60px;
  user-select: none;
  will-change: transform;
}

.intro__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 0 16px;
  text-align: center;
}

/* ========== Pantalla "Mantén presionado el regalo" ========== */
.start {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  /* que el dedo apretado no seleccione texto ni abra menús */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.start__box {
  position: relative;
  width: clamp(190px, 52vw, 250px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.start__ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  overflow: visible;
}
.start__ring circle {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.start__ring-bg { stroke: rgba(255,255,255,.7); }
.start__ring-fill {
  stroke: var(--red-bow);
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}
.start--ready .start__ring-fill { stroke: var(--yellow); }
.start__gift {
  font-size: clamp(100px, 28vw, 140px);
  line-height: 1;
  filter: drop-shadow(0 10px 14px rgba(232,17,78,.3));
  pointer-events: none;
}
.start__text {
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(180deg, var(--pink-400), var(--red-bow));
  border: 4px solid var(--white);
  border-radius: 999px;
  padding: .5em 1.3em;
  margin: 0 16px;
  box-shadow: 0 6px 0 #b30d3c, 0 10px 22px rgba(232,17,78,.35);
}
.start--ready .start__text {
  color: var(--red-bow);
  background: var(--yellow);
  box-shadow: 0 6px 0 #f0b400, 0 10px 22px rgba(240,180,0,.4);
}

/* ========== Hello Kitty central ========== */
.hero {
  height: clamp(170px, 34vh, 320px);
  opacity: 0; /* lo muestra GSAP */
  transform-origin: 30% 0%; /* se mece desde el globo */
}
.hero__img {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(122,31,71,.2));
}

/* ========== Título ========== */
.intro__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-weight: 700;
}
.intro__title .line {
  display: block;
  white-space: nowrap;
}
.intro__title .char {
  display: inline-block;
  opacity: 0;
  will-change: transform;
}
.line--small {
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  color: var(--white);
  text-shadow: 0 3px 0 var(--pink-500), 0 6px 12px rgba(232,17,78,.25);
}
.line--big {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(2.8rem, 13vw, 5.5rem);
  color: var(--red-bow);
  text-shadow: 3px 3px 0 var(--white), 6px 6px 0 var(--pink-400);
  padding: 0 .2em;
}
.line--medium {
  font-size: clamp(2rem, 8vw, 3.6rem);
  color: var(--white);
  text-shadow: 0 3px 0 var(--pink-500), 0 6px 12px rgba(232,17,78,.25);
}

/* ========== "Desliza para abrir" ========== */
.swipe-hint {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(330px, 86vw);
  height: 66px;
  padding: 0 18px 0 76px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 4px solid var(--white);
  box-shadow: 0 8px 22px rgba(232,17,78,.25), inset 0 2px 6px rgba(232,17,78,.12);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  cursor: grab;
}
.swipe-hint:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.swipe-hint__knob {
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: linear-gradient(180deg, var(--pink-400), var(--red-bow));
  box-shadow: 0 4px 10px rgba(232,17,78,.4);
}
.swipe-hint__text {
  flex: 1;
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  font-weight: 700;
  color: var(--red-bow);
  white-space: nowrap;
}
.swipe-hint__arrows {
  display: flex;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pink-500);
}
.swipe-hint__arrows i { font-style: normal; }

/* ========== INVITACIÓN ========== */
.invitacion[hidden] { display: none; }
.invitacion {
  position: relative;
  min-height: 100vh;
  padding: 0 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  /* clip (no hidden): recorta lo que se sale sin volverse una caja con scroll propio */
  overflow-x: clip;
  background:
    radial-gradient(circle, rgba(255,179,209,.35) 5px, transparent 6px) 0 0 / 40px 40px,
    radial-gradient(circle, rgba(255,179,209,.35) 5px, transparent 6px) 20px 20px / 40px 40px,
    linear-gradient(180deg, var(--pink-100) 0%, #ffe3ef 100%);
  background-attachment: fixed;
}
.invitacion > *:not(.floaters) {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
}
.floaters--fixed {
  position: fixed;
  z-index: 0;
  opacity: .7;
}

/* ----- Portada ----- */
.inv-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 24px;
}
.inv-kicker {
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  font-weight: 600;
  color: var(--pink-500);
}

/* Marquito para la foto */
.frame {
  position: relative;
  width: min(72vw, 290px, 30vh);
  padding: 14px 14px 0;
  background: var(--white);
  border-radius: 22px;
  box-shadow:
    0 0 0 6px var(--pink-300),
    0 0 0 12px var(--white),
    0 14px 30px rgba(232,17,78,.25);
  margin: 20px 0 8px;
}
.frame__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(255,255,255,.8) 5px, transparent 6px) 0 0 / 28px 28px,
    var(--pink-200);
}
.frame__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%; /* centra la carita */
}
.frame__placeholder {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 3px dashed var(--pink-400);
  border-radius: 12px;
  color: var(--pink-500);
  font-weight: 600;
  font-size: 1rem;
}
.frame__placeholder > span:first-child { font-size: 2.6rem; }
.frame__caption {
  font-family: 'Pacifico', cursive;
  color: var(--pink-500);
  font-size: 1.15rem;
  padding: 8px 0 12px;
}
.frame__bow {
  position: absolute;
  top: -38px;
  left: 50%;
  margin-left: -32px;
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.15));
  z-index: 2;
}
.frame__kitty {
  position: absolute;
  right: -46px;
  bottom: -30px;
  width: 110px;
  filter: drop-shadow(0 4px 8px rgba(122,31,71,.25));
}

/* Nombre y edad */
.inv-name {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 5.5rem);
  line-height: 1.2;
  color: var(--red-bow);
  text-shadow: 3px 3px 0 var(--white), 6px 6px 0 var(--pink-300);
}
.inv-age {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  font-weight: 700;
  color: var(--text);
}
.inv-age__num {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  background: var(--yellow);
  border: 5px solid var(--white);
  border-radius: 50%;
  font-size: 2.8rem;
  color: var(--red-bow);
  box-shadow: 0 6px 0 #f0b400, 0 10px 18px rgba(240,180,0,.35);
}
/* Botón "Desliza" */
.scroll-hint {
  position: relative;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
}
.scroll-hint__pill {
  font-size: clamp(1.1rem, 4.6vw, 1.35rem);
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(90deg, var(--pink-400), var(--red-bow), var(--pink-400));
  background-size: 200% 100%;
  border: 4px solid var(--white);
  border-radius: 999px;
  padding: .5em 1.3em;
  box-shadow: 0 5px 0 #b30d3c, 0 10px 20px rgba(232,17,78,.35);
  animation: shine 2.5s linear infinite;
}
.scroll-hint__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  height: 52px;
  justify-content: center;
  background: var(--yellow);
  border: 4px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 5px 0 #f0b400, 0 8px 16px rgba(240,180,0,.35);
}
.scroll-hint__arrow svg {
  width: 26px;
  height: 18px;
  fill: none;
  stroke: var(--red-bow);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scroll-hint__arrow svg + svg { margin-top: -8px; opacity: .55; }
.scroll-hint__sparkle {
  position: absolute;
  top: -4px;
  font-size: 1.4rem;
}
.scroll-hint__sparkle--l { left: -18px; }
.scroll-hint__sparkle--r { right: -18px; }

@keyframes shine {
  to { background-position: -200% 0; }
}

/* ----- Tarjetas ----- */
.card,
.countdown,
.rsvp {
  background: var(--white);
  border-radius: 26px;
  padding: 24px 20px;
  border: 4px dashed var(--pink-300);
  box-shadow: 0 10px 24px rgba(232,17,78,.12);
}
.card__title {
  font-family: 'Pacifico', cursive;
  font-size: 1.6rem;
  color: var(--red-bow);
  margin-bottom: 8px;
}
.card__text {
  font-size: 1.15rem;
  line-height: 1.5;
}
.card__text strong { color: var(--pink-500); }

/* ----- Detalles ----- */
.details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.details__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 10px;
  border-radius: 20px;
  border: 2.5px dashed var(--pink-400);
  /* corazoncitos en las esquinas */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff85b3' d='M12 21s-8.5-5.2-8.5-11.2A4.6 4.6 0 0 1 12 7.2a4.6 4.6 0 0 1 8.5 2.6C20.5 15.8 12 21 12 21z'/%3E%3C/svg%3E") no-repeat 7px 8px / 14px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff85b3' d='M12 21s-8.5-5.2-8.5-11.2A4.6 4.6 0 0 1 12 7.2a4.6 4.6 0 0 1 8.5 2.6C20.5 15.8 12 21 12 21z'/%3E%3C/svg%3E") no-repeat right 7px top 12px / 11px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff85b3' d='M12 21s-8.5-5.2-8.5-11.2A4.6 4.6 0 0 1 12 7.2a4.6 4.6 0 0 1 8.5 2.6C20.5 15.8 12 21 12 21z'/%3E%3C/svg%3E") no-repeat left 8px bottom 7px / 10px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff85b3' d='M12 21s-8.5-5.2-8.5-11.2A4.6 4.6 0 0 1 12 7.2a4.6 4.6 0 0 1 8.5 2.6C20.5 15.8 12 21 12 21z'/%3E%3C/svg%3E") no-repeat right 6px bottom 6px / 13px,
    #ffe6f0;
  box-shadow: 0 6px 14px rgba(232,17,78,.1);
}
.detail__icon {
  width: 46px;
  height: 46px;
}
.detail__value {
  font-size: clamp(.95rem, 3.9vw, 1.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--red-bow);
  white-space: pre-line;
}
.details__address {
  font-size: 1rem;
  font-weight: 600;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----- Botones ----- */
.btn {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
}
.btn--light {
  font-size: 1rem;
  color: var(--red-bow);
  background: var(--pink-100);
  border: 3px solid var(--pink-300);
  padding: .5em 1.3em;
}
.btn--main {
  font-size: 1.35rem;
  color: var(--white);
  background: linear-gradient(180deg, var(--pink-400), var(--red-bow));
  border: 4px solid var(--white);
  padding: .7em 1.6em;
  box-shadow: 0 6px 0 #b30d3c, 0 10px 22px rgba(232,17,78,.35);
  margin-top: 6px;
}

.btn--map {
  font-size: 1.15rem;
  padding: .55em 1.4em;
}

/* ----- Formulario de asistencia ----- */
.rsvp__intro {
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.rsvp-form,
.rsvp-form__si,
.rsvp-form__transporte {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.rsvp-form [hidden],
.rsvp [hidden] { display: none !important; }

.field {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--red-bow);
  padding: 0;
}
.field__label small {
  font-weight: 400;
  color: var(--pink-400);
}
.field__hint {
  font-size: .9rem;
  color: var(--pink-400);
  margin-top: -6px;
}
.field__input {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  color: var(--text);
  background: var(--pink-100);
  border: 3px solid var(--pink-200);
  border-radius: 16px;
  padding: .7em .9em;
  width: 100%;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.field__input::placeholder { color: #d79ab5; }
.field__input:focus {
  outline: none;
  border-color: var(--pink-400);
  box-shadow: 0 0 0 4px rgba(255,133,179,.25);
  background: var(--white);
}
.field__error {
  display: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--red-bow);
}
.field--error .field__input { border-color: var(--red-bow); background: #fff5f8; }
.field--error .field__error { display: block; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Botones de Sí / No */
.choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice label {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--pink-500);
  background: var(--pink-100);
  border: 3px solid var(--pink-200);
  border-radius: 999px;
  padding: .65em .5em;
  cursor: pointer;
  user-select: none;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.choice label:active { transform: scale(.95); }
.choice input:checked + label {
  color: var(--white);
  background: linear-gradient(180deg, var(--pink-400), var(--pink-500));
  border-color: var(--white);
  box-shadow: 0 4px 0 #c2185b, 0 6px 14px rgba(232,17,78,.3);
}
.choice input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Contador de personas */
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.stepper__btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid var(--white);
  background: linear-gradient(180deg, var(--pink-400), var(--pink-500));
  color: var(--white);
  font-family: 'Fredoka', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 #c2185b, 0 6px 14px rgba(232,17,78,.3);
}
.stepper__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c2185b; }
.stepper__value {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--yellow);
  border: 4px solid var(--white);
  box-shadow: 0 5px 0 #f0b400;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--red-bow);
}

.rsvp-form__submit {
  align-self: center;
  margin-top: 8px;
}
.rsvp-form__submit:disabled { opacity: .7; }

/* Aviso de WhatsApp para el transporte */
.wa-note {
  background: #eafff1;
  border: 3px dashed #25d366;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.wa-note__text {
  font-size: 1.05rem;
  line-height: 1.45;
}
.btn--wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  color: var(--white);
  background: linear-gradient(180deg, #3be37a, #1ebe5a);
  border: 4px solid var(--white);
  padding: .55em 1.3em;
  box-shadow: 0 5px 0 #128c45, 0 8px 18px rgba(18,140,69,.3);
}
.btn--wa:active { transform: translateY(3px); box-shadow: 0 2px 0 #128c45; }
.btn--wa__icon { width: 26px; height: 26px; }

/* Pantalla de gracias */
.rsvp-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rsvp-done__kitty { width: 130px; }
.rsvp-done__text { font-size: 1.15rem; line-height: 1.5; }
.rsvp-done__hint {
  font-size: .95rem;
  color: var(--pink-500);
  margin-top: 6px;
}

/* ----- Cuenta regresiva ----- */
.countdown {
  background: linear-gradient(180deg, var(--pink-400), var(--pink-500));
  border-color: var(--white);
  color: var(--white);
}
.countdown__title {
  font-family: 'Pacifico', cursive;
  font-size: 1.6rem;
  margin-bottom: 14px;
  text-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cd {
  background: var(--white);
  color: var(--red-bow);
  border-radius: 16px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
}
.cd__num {
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
}
.cd__lbl {
  font-size: .85rem;
  font-weight: 600;
  color: var(--pink-400);
}

/* ----- Final ----- */
.inv-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 1.2rem;
  font-weight: 600;
}
.inv-footer__kitty {
  width: 150px;
  margin-bottom: 8px;
}
.inv-footer__name {
  font-family: 'Pacifico', cursive;
  font-size: 2rem;
  color: var(--red-bow);
}

/* ========== Botón de música ========== */
.music-btn {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid var(--white);
  background: linear-gradient(160deg, var(--pink-400), var(--red-bow));
  box-shadow: 0 5px 0 #b30d3c, 0 8px 18px rgba(232,17,78,.35);
  font-size: 1.6rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.music-btn[hidden] { display: none; }
.music-btn:active { transform: translateY(3px); }
.music-btn__icon { display: inline-block; line-height: 1; }
.music-btn--off {
  background: var(--pink-200);
  box-shadow: 0 5px 0 var(--pink-400), 0 8px 18px rgba(232,17,78,.2);
}

/* Celulares bajitos (como 650px de alto) */
@media (max-width: 600px) and (min-height: 521px) and (max-height: 740px) {
  .intro__content { gap: 1rem; }
  .hero { height: 34vh; }
  .line--small { font-size: 1.5rem; }
  .line--big { font-size: 3.1rem; }
  .line--medium { font-size: 2rem; }
  .swipe-hint { height: 58px; }
  .swipe-hint__knob { width: 44px; height: 44px; margin-top: -22px; font-size: 1.5rem; }
}

/* Pantallas bajitas (móvil en horizontal) */
@media (max-height: 520px) {
  .hero { height: 26vh; }
  .line--small { font-size: 7vh; }
  .line--big { font-size: 13vh; }
  .line--medium { font-size: 9vh; }
  .swipe-hint { height: 54px; }
  .intro__content { gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .floaters { display: none; }
}