/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative;
  padding-top: clamp(5.25rem, 7vh + 2rem, 7rem); /* solo despeja el navbar fijo */
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
}
/* En desktop el héroe ocupa una pantalla y centra su contenido,
   así el mockup sube y todos los elementos entran sin scroll */
@media (min-width: 861px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: clamp(2rem, 5vh, 3rem);
  }
}

/* Aura de degradado de marca */
.hero__aura {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 85%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 52% at 20% 26%, color-mix(in srgb, var(--brand-orange) 30%, transparent), transparent 70%),
    radial-gradient(44% 56% at 84% 16%, color-mix(in srgb, var(--brand-lila) 26%, transparent), transparent 72%);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;   /* más ancho al texto: el titular baja de líneas */
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hero__title {
  font-size: calc(var(--text-hero) * 0.9);
  margin-bottom: var(--space-5);
}
.hero__subtitle {
  font-size: calc(var(--text-lg) * 0.9);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero__actions .btn {
  font-size: calc(var(--text-base) * 0.9);
  min-height: 40px;
  padding: calc(var(--space-3) * 0.9) calc(var(--space-5) * 0.9);
}
.hero__actions .btn--lg {
  font-size: calc(var(--text-lg) * 0.9);
  min-height: 48px;
  padding: calc(var(--space-4) * 0.9) calc(var(--space-6) * 0.9);
}

/* ---------- Mockup de teléfono ---------- */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 0;
}

.phone {
  position: relative;
  container-type: inline-size;           /* la alerta de Don Tata también escala con el teléfono */
  width: min(300px, 76vw, 36svh);        /* 36svh evita que se salga en pantallas cortas */
  aspect-ratio: 1180 / 2540;             /* proporción de iPhone moderno */
  padding: 11px;                          /* grosor del marco de titanio */
  border-radius: 46px;
  /* canto metálico: claro en las esquinas, oscuro en el centro */
  background: linear-gradient(135deg,
      #7c7c82 0%, #3a3a3c 24%, #48484a 50%, #2c2c2e 76%, #7c7c82 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),   /* filo brillante del metal */
    inset 0 0 7px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 30px 55px -14px rgba(45, 53, 97, 0.5);      /* sombra ambiente */
}

.phone__screen {
  position: relative;
  container-type: inline-size;          /* el texto interior escala con el ancho del teléfono */
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: #0b141a;                            /* pantalla encendida */
  box-shadow: inset 0 0 0 2.5px #050608;          /* bisel negro fino */
  z-index: 1;
}
.phone__screen::after { /* reflejo de vidrio muy sutil, no estorba la lectura */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 30%);
  z-index: 4;
}

/* Isla dinámica */
.phone__island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  height: 24px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
}
.phone__island::after { /* lente de cámara con destello */
  content: "";
  position: absolute;
  top: 50%;
  right: 11%;
  transform: translateY(-50%);
  height: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #3a4a78 0%, #11131c 58%);
  box-shadow: inset 0 0 1.5px rgba(140, 165, 255, 0.6);
}

/* Botones laterales del titanio */
.phone__btn {
  position: absolute;
  background: linear-gradient(90deg, #57575b, #2a2a2c);
  z-index: 0;
}
.phone__btn--action { left: -2px; top: 17%; width: 3px; height: 4.5%; border-radius: 2px 0 0 2px; }
.phone__btn--volup  { left: -2px; top: 25%; width: 3px; height: 7%;   border-radius: 2px 0 0 2px; }
.phone__btn--voldn  { left: -2px; top: 34%; width: 3px; height: 7%;   border-radius: 2px 0 0 2px; }
.phone__btn--power  { right: -2px; top: 27%; width: 3px; height: 10%; border-radius: 0 2px 2px 0; }

/* Barra de estado del teléfono (9:41 + señal/wifi/batería) */
.phone__statusbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px 4px;
  background: #1f2c33;                    /* mismo tono que la cabecera del chat */
  color: #e9edef;
  font-size: 3.6cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.phone__status-icons { display: inline-flex; align-items: center; gap: 5px; color: #e9edef; }
.phone__status-icons svg { height: 3.6cqw; width: auto; display: block; }

/* Chat WhatsApp en modo oscuro */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; color: #e9edef; }
.chat__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px 12px;
  background: #1f2c33;
}
.chat__avatar { width: 11cqw; height: 11cqw; border-radius: 50%; background: #33434c; flex-shrink: 0; }
.chat__meta { display: flex; flex-direction: column; min-width: 0; }
.chat__name {
  font-size: 4.7cqw;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat__status { font-size: 4cqw; color: #8696a0; }
.chat__body {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background:
    linear-gradient(rgba(11, 20, 26, 0.92), rgba(11, 20, 26, 0.92));
}
.bubble {
  max-width: 88%;
  padding: 8px 10px 6px;
  border-radius: 10px;
  font-size: 4.7cqw;
  line-height: 1.45;
}
.bubble--in  { background: #1f2c33; border-top-left-radius: 3px; }
.bubble--out { background: #005c4b; border-top-right-radius: 3px; align-self: flex-end; margin-top: 8px; }
.bubble__text { display: block; }
.bubble__link { display: block; color: #53bdeb; word-break: break-all; margin-top: 3px; }
.bubble__time { display: block; text-align: right; font-size: 3.5cqw; color: #8696a0; margin-top: 3px; }
.bubble__time--out { display: inline-flex; align-items: center; gap: 3px; }
.bubble__ticks { height: 3.2cqw; width: auto; display: inline-block; vertical-align: middle; }


/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { text-align: center; }
  .hero__subtitle { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__visual { margin-top: var(--space-6); }
}