/* Celular de la portada: maqueta de la app con mapa, isla de aviso y botones */
.telefono {
  --tel-ancho: 18.5rem;
  justify-self: center;
  width: min(100%, var(--tel-ancho));
  font-size: calc(var(--tel-ancho) / 18.5);
}

/* En PC el celular se ajusta al alto de la pantalla para caber entero */
@media (min-width: 980px) {
  .telefono {
    --tel-ancho: clamp(11.5rem, calc((100svh - 19.5rem) * 0.4865), 18.5rem);
  }
}

.telefono__marco {
  padding: 0.55em;
  border-radius: 2.9em;
  background: var(--tinta);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 40px 70px -30px rgba(23, 22, 15, 0.65),
    0 18px 50px -20px rgba(255, 107, 26, 0.55);
}

.telefono__pantalla {
  position: relative;
  aspect-ratio: 9 / 18.5;
  border-radius: 2.4em;
  background: #efebe3;
  overflow: hidden;
  font-family: var(--letra-app);
}

.telefono__mapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tmapa__suelo { fill: #efebe3; }
.tmapa__lote { fill: #e3ddd1; }

.tmapa__calle,
.tmapa__ruta,
.tmapa__ruta-borde {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tmapa__calle {
  stroke: #cfc8ba;
  stroke-width: 7;
}

.tmapa__ruta-borde {
  stroke: var(--tinta);
  stroke-width: 10;
}

.tmapa__ruta {
  stroke: var(--naranja);
  stroke-width: 5.5;
}

.tmapa__extremo {
  fill: #fff;
  stroke: var(--tinta);
  stroke-width: 3.5;
}

.tmapa__nombre {
  font-family: var(--letra-app);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  fill: var(--tinta);
}

.tmapa__punto {
  fill: #e23a14;
  stroke: #fff;
  stroke-width: 2.5;
}

.tmapa__onda {
  fill: rgba(226, 58, 20, 0.22);
  transform-box: fill-box;
  transform-origin: center;
}

.tmapa__moto {
  fill: var(--tinta);
  stroke: #fff;
  stroke-width: 3;
}

/* Ceja del teléfono */
.telefono__ceja {
  position: absolute;
  top: 0.6em;
  left: 50%;
  width: 4.6em;
  height: 1.25em;
  border-radius: 999px;
  background: var(--tinta);
  transform: translateX(-50%);
}

/* Isla de aviso */
.telefono__isla {
  position: absolute;
  top: 2.5em;
  left: 0.6em;
  right: 0.6em;
  padding: 0.8em 1em 0.9em;
  border-radius: 1.375em;
  background: var(--tinta);
  color: var(--hueso);
  box-shadow: 0 16px 30px -16px rgba(23, 22, 15, 0.8);
  transition: opacity 0.45s var(--suave), transform 0.45s var(--suave);
}

.telefono__isla-ceja {
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--naranja-claro);
}

.telefono__isla-valor {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.telefono__isla-linea {
  margin-top: 0.3em;
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.25;
  color: #d5d2ca;
}

/* Con la animación activa, la isla solo sale cerca de un punto crítico */
.telefono--vivo .telefono__isla {
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
}

.telefono--vivo.es-aviso .telefono__isla {
  opacity: 1;
  transform: none;
}

.telefono--vivo.es-aviso .tmapa__critico.es-cerca .tmapa__onda {
  animation: onda-critica 1.3s ease-out infinite;
}

@keyframes onda-critica {
  from {
    transform: scale(0.5);
    opacity: 1;
  }

  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Botones de abajo */
.telefono__botones {
  position: absolute;
  left: 0.6em;
  right: 0.6em;
  bottom: 0.75em;
  display: flex;
  gap: 0.4em;
}

.telefono__boton {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 2.75em;
  padding: 0 0.8em;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--hueso);
  font-size: 0.9375em;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background-color 0.25s;
}

.telefono__boton:hover {
  background: #000;
}

.telefono__boton--naranja {
  background: var(--naranja);
  color: var(--tinta);
}

.telefono__boton--naranja:hover {
  background: #ff8440;
}

.telefono__nota {
  margin-top: 0.75rem;
  font-family: var(--letra-codigo);
  font-size: 0.75rem;
  text-align: center;
  color: var(--tinta-suave);
}